{"id":20778057,"url":"https://github.com/stackgl/gl-texture2d","last_synced_at":"2025-08-01T16:09:40.074Z","repository":{"id":57174402,"uuid":"10653293","full_name":"stackgl/gl-texture2d","owner":"stackgl","description":"WebGL texture wrapper","archived":false,"fork":false,"pushed_at":"2016-11-21T19:29:26.000Z","size":4535,"stargazers_count":57,"open_issues_count":4,"forks_count":10,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-07-28T08:25:07.823Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://stack.gl/gl-texture2d/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stackgl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-12T21:59:53.000Z","updated_at":"2025-07-23T21:22:05.000Z","dependencies_parsed_at":"2022-08-29T00:10:46.415Z","dependency_job_id":null,"html_url":"https://github.com/stackgl/gl-texture2d","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stackgl/gl-texture2d","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-texture2d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-texture2d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-texture2d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-texture2d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackgl","download_url":"https://codeload.github.com/stackgl/gl-texture2d/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-texture2d/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268257257,"owners_count":24221054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T13:18:56.535Z","updated_at":"2025-08-01T16:09:40.051Z","avatar_url":"https://github.com/stackgl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"gl-texture2d\n============\nWebGL texture object wrapper\n\n# Example\n\n[Try it in your browser right now](http://stackgl.github.io/gl-texture2d/)\n\n```javascript\nvar shell         = require(\"gl-now\")()\nvar createShader  = require(\"gl-shader\")\nvar createTexture = require(\"gl-texture2d\")\nvar drawTriangle  = require(\"a-big-triangle\")\nvar baboon        = require(\"baboon-image\")\nvar glslify       = require(\"glslify\")\n\nvar createShader = glslify({\n  vertex:\"\\\n    attribute vec2 position;\\\n    varying vec2 texCoord;\\\n    void main() {\\\n      gl_Position = vec4(position, 0, 1);\\\n      texCoord = vec2(0.0,1.0)+vec2(0.5,-0.5) * (position + 1.0);\\\n    }\", \n  fragment: \"\\\n    precision highp float;\\\n    uniform sampler2D texture;\\\n    varying vec2 texCoord;\\\n    void main() {\\\n      gl_FragColor = texture2D(texture, texCoord);\\\n    }\",\n  inline: true\n})\n\nvar shader, texture\n\nshell.on(\"gl-init\", function() {\n  var gl = shell.gl\n  \n  //Create texture\n  texture = createTexture(gl, baboon)\n\n  //Create shader\n  shader = createShader(gl)\n  shader.attributes.position.location = 0\n})\n\nshell.on(\"gl-render\", function() {\n  //Draw it\n  shader.bind()\n  shader.uniforms.texture = texture.bind()\n  drawTriangle(shell.gl)\n})\n```\n\nHere is what it should look like:\n\n\u003cimg src=\"https://raw.github.com/mikolalysenko/gl-texture2d/master/screenshot.png\"\u003e\n\n# Install\n\n    npm install gl-texture2d\n\n# API\n\n```javascript\nvar createTexture = require(\"gl-texture2d\")\n```\n\n## Constructor\nThere are three basic usage patterns for `createTexture`:\n\n### `var tex = createTexture(gl, shape[, format, type])`\nCreates an unitialized texture with the given dimensions and format\n\n* `shape` is a length 2 array representing the `[width, height]` of the texture\n* `format` (optional) is the format of the texture (default `gl.RGBA`)\n* `type` is the type of texture (default `gl.UNSIGNED_BYTE`)\n\n### `var tex = createTexture(gl, domElement[, format, type])`\nCreates a texture from the given data source.  Where `domElement` is one of the following items:\n\n* An `ImageData` object\n* An `HTMLCanvas` object\n* An `HTMLImage` object\n* An `HTMLVideo` object\n\nAnd `format` is an OpenGL data format or defaults to `gl.RGBA` and `type` is the storage type which defaults to `gl.UNSIGNED_BYTE`\n\n### `var tex = createTexture(gl, rawObject[, format, type])`\n\nCreates a texture from the given raw element. `rawObject` is a DOM-like element that have a `raw`, `width` and `height` fields. `raw` is a value that directly get passed to `texImage2D` / `texSubImage2D`.\n\nThis allows to support non-DOM implementation of WebGL like gl-headless.\n\n### `var tex = createTexture(gl, array)`\nCreates a texture from an [ndarray](https://github.com/mikolalysenko/ndarray).  The rules for selecting the format and type depend on the shape of the ndarray.  The type of the texture is inferred according to the following rules.  Let:\n\n* `dtype = ndarray.dtype(array)`\n* `shape = array.shape`\n\nThen the rules for `type` and `format` are defined according to the following table:\n\n| `dtype`      | `shape`    | `format`        | `type`                 |\n| ------------ |:----------:|:---------------:|:----------------------:|\n| `float*`     | [w,h]      | LUMINANCE       | FLOAT                  |\n| `float*`     | [w,h,1]    | ALPHA           | FLOAT                  |\n| `float*`     | [w,h,2]    | LUMINANCE_ALPHA | FLOAT                  |\n| `float*`     | [w,h,3]    | RGB             | FLOAT                  |\n| `float*`     | [w,h,4]    | RGBA            | FLOAT                  |\n| `(u)int*`    | [w,h]      | LUMINANCE       | UNSIGNED_BYTE          |\n| `(u)int*`    | [w,h,1]    | ALPHA           | UNSIGNED_BYTE          |\n| `(u)int*`    | [w,h,2]    | LUMINANCE_ALPHA | UNSIGNED_BYTE          |\n| `(u)int*`    | [w,h,3]    | RGB             | UNSIGNED_BYTE          |\n| `(u)int*`    | [w,h,4]    | RGBA            | UNSIGNED_BYTE          |\n\nOther combinations of shape and dtype are invalid and throw an error.\n\n## Texture Methods\n\n### `tex.bind([texUnit])`\nBinds the texture for use.  Basically a short cut for:\n\n```javascript\ngl.activeTexture(gl.TEXTURE0 + texUnit)\ngl.bindTexture(gl.TEXTURE_2D, this.handle)\n```\nIf `texUnit` is not specified then the active texture is not changed.\n\n**Returns** The texture unit the texture is bound to.\n\n### `tex.dispose()`\nDestroys the texture object and releases all of its resources.  Under the hood this is equivalent to:\n\n```javascript\ngl.deleteTexture(this.handle)\n```\n\n### `tex.setPixels(data[, offset, mipLevel])`\nUnpacks `data` into a subregion of the texture.  As before in the constructor `data` can be either an `ndarray`, `HTMLCanvas`, `HTMLImage`, `HTMLVideo` or a `rawObject`.  If `data` is an ndarray it must have a compatible format with the initial array layout.\n\n* `offset` is a length 2 array representing the offset into which the pixels will be written in `[x,y]`.  (Default: `[0,0]`)\n* `mipLevel` is the mip level to write to. (Default `0`)\n\nIf `data` is an `ndarray` the same rules as in the constructor are followed for converting the type of the buffer.\n\n### `tex.generateMipmap()`\nGenerates mipmaps for the texture.  This will fail if the texture dimensions are not a power of two.\n\n## Texture Properties\n\n#### `tex.shape`\nAn array representing the dimensions of the texture in `[width, height]`.  Writing to this value will resize the texture and invalidate its contents.  For example, to resize the texture `tex` to the shape `[newWidth, newHeight]` you can do:\n\n```javascript\ntex.shape = [newWidth, newHeight]\n```\n\n#### `tex.wrap`\nTexture wrap around behavior for x/y of the texture.  Used to set/get `[gl.TEXTURE_WRAP_T, gl.TEXTURE_WRAP_S]`.  Defaults to `[gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE]`.  To update this value, write to it with a vector. For example,\n\n```javascript\ntex.wrap = [gl.MIRRORED_REPEAT, gl.REPEAT]\n```\n\nOr you can update it with a single value to set the wrap mode for both axes:\n\n```javascript\ntex.wrap = gl.REPEAT\n```\n\n#### `tex.magFilter`\nMagnification filter.  Used to set/get `gl.TEXTURE_MAG_FILTER`. Defaults to `gl.NEAREST`\n\n#### `tex.minFilter`\nMinification filter. Used to set/get `gl.TEXTURE_MIN_FILTER`. Defaults to `gl.NEAREST`\n\n#### `tex.mipSamples`\nThe number of anisotropic filtering samples to use.  This requires `EXT_texture_filter_anisotropic` to have any effect.  High values will improve mipmap quality, but decrease performance.\n\n## Internals\n\n#### `tex.gl`\nA reference to the WebGL context of the texture.\n\n#### `tex.handle`\nA handle to the underlying texture object.\n\n#### `tex.format`\nThe internal format of the texture.\n\n#### `tex.type`\nThe internal data type of the texture.\n\n# Credits\n(c) 2013-2014 Mikola Lysenko. MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackgl%2Fgl-texture2d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackgl%2Fgl-texture2d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackgl%2Fgl-texture2d/lists"}