{"id":16125709,"url":"https://github.com/dy/gl-util","last_synced_at":"2025-04-04T17:06:53.629Z","repository":{"id":57742039,"uuid":"75168919","full_name":"dy/gl-util","owner":"dy","description":"Set of practical webgl functions","archived":false,"fork":false,"pushed_at":"2025-01-18T21:39:44.000Z","size":111,"stargazers_count":27,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T16:06:28.374Z","etag":null,"topics":["webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-30T08:53:59.000Z","updated_at":"2025-01-18T21:39:47.000Z","dependencies_parsed_at":"2025-03-21T15:19:25.177Z","dependency_job_id":null,"html_url":"https://github.com/dy/gl-util","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fgl-util","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fgl-util/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fgl-util/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fgl-util/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dy","download_url":"https://codeload.github.com/dy/gl-util/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217178,"owners_count":20903009,"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","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":["webgl"],"created_at":"2024-10-09T21:30:52.226Z","updated_at":"2025-04-04T17:06:53.590Z","avatar_url":"https://github.com/dy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gl-util [![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)\n\nSet of practical functions for webgl.\n\n[![npm install gl-util](https://nodei.co/npm/gl-util.png?mini=true)](https://npmjs.org/package/gl-util/)\n\n```js\nconst u = require('gl-util');\n\nlet gl = u.context(canvas)\n\nlet prog = u.program(gl, `\n\tprecision mediump float;\n\n\tattribute vec2 position;\n\n\tvoid main() {\n\t\tgl_Position = vec4(position * 2. - 1., 0, 1);\n\t}\n`, `\n\tprecision mediump float;\n\n\tuniform vec4 color;\n\n\tvoid main () {\n\t\tgl_FragColor = color;\n\t}\n`);\nu.attribute(prog, 'position', [0,0, 1,0, 0,1]);\nu.uniform(prog, 'color', [1, .2, 0, 1.]);\n\ngl.drawArrays(gl.TRIANGLES, 0, 3);\n```\n\n## API\n\n### `context(container|canvas|options?)`\n\nCreate and/or return WebGL context for the canvas element, possibly based on options. If `container` is not defined, `document.body` is used.\n\n| Option | Meaning |\n|---|---|\n| `canvas` | A canvas element to obtain context for. |\n| `container` | An element to create canvas in and return context for it. |\n| `width` | If specified, will set the canvas width. |\n| `height` | If specified, will set the canvas height. |\n| `pixelRatio` | Multiplier for `width` and `height`. |\n| `attributes` | Attributes object. Available attributes: `alpha`, `depth`, `stencil`, `antialias`, `premultipliedAlpha`, `preserveDrawingBuffer` and `failIfMajorPerformanceCaveat`. |\n\n```js\nconst getContext = require('gl-util/context')\n\n// create canvas element in the document.body and retrieve context for it\nlet gl = getContext({\n\tattributes: {\n\t\tantialias: true\n\t}\n})\n```\n\n### `prog = program(gl, prog|vert?, frag?)`\n\nSet active program or create a new program from vertex and fragment sources. Programs are cached for the context by source. The _WebGLProgram_ instance is returned.\n\n```js\nconst program = require('gl-util/program')\n\n// create and set program\nlet prog = program(gl, `\n\tprecision mediump float;\n\n\tattribute vec2 position;\n\n\tvoid main() {\n\t\tgl_Position = vec4(position * 2. - 1., 0, 1);\n\t}\n`, `\n\tprecision mediump float;\n\n\tuniform sampler2D image;\n\tuniform vec2 shape;\n\tuniform float x;\n\n\tvoid main () {\n\t\tgl_FragColor = texture2D(image, gl_FragCoord.xy / shape);\n\t}\n`)\n\n// set active program\nprogram(gl, prog)\n```\n\n### `unif = uniform(gl|program, {name: data, ...} | name?, data?)`\n\nGet/set uniform or multiple uniforms. Returns an object with uniform parameters: `{name, location, data, type}`. Uniforms are stored per-program instance.\n\n```js\nconst uniform = require('gl-util/uniform')\n\nuniform(gl, 'color', [1, .2, 0, 1]);\n```\n\n### `txt = texture(gl, {name: params, ...} | name?, params?)`\n\nSet texture[s] data or parameters:\n\n| Name | Meaning |\n|---|---|\n| `data` | Data passed to texture. Can be array, typed array, image, canvas or string denoting the URL of image to load. |\n| `index` | Texture unit number, if undefined - calculated automatically. |\n| `filter` | Sets texture scaling for both min and mag. Can be defined as two separate properties `minFilter` and `magFilter`. By default `gl.LINEAR`. |\n| `wrap` | Defines texture tiling vertically and horizontally. Can be defined precisely as `wrapS` and `wrapT`. By default `gl.CLAMP_TO_EDGE`, can be `gl.MIRRORED_REPEAT` or `gl.`. |\n| `width` | In pixels |\n| `height` | In pixels |\n| `format` | `gl.ALPHA`, `gl.RGB`, `gl.RGBA` (default), `gl.LUMINANCE`, `gl.LUMINANCE_ALPHA`, `gl.DEPTH_COMPONENT`, `gl.DEPTH_STENCIL`, [etc](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D) |\n| `type` | `gl.UNSIGNED_BYTE`, can be `gl.FLOAT` with proper extension enabled |\n| `level` | `0`, mipmap level. |\n\nReturns object with texture properties `{data, index, location, minFilter, magFilter, wrapS, wrapT, width, height, format, type, texture}`.\n\n```js\nconst texture = require('gl-util/texture')\n\nlet {width, height} = texture(gl, 'image', './picture.gif');\n```\n\n### `attr = attribute(gl, {name: params, ...} | name?, params?)`\n\nSet attribute[s] data or parameters:\n\n| Name | Default | Meaning |\n|---|---|---|\n| `data` | `null` | Data for the attribute, can be array, typed array or array buffer |\n| `size` | `2` | Number of data items per vertex |\n| `stride` | `0` | Offset in bytes between the beginning of consecutive vertex attributes. |\n| `offset` | `0` | Offset in bytes of the first component in the data. Must be a multiple of type. |\n| `type` | `gl.FLOAT` | Data type of each component in the `data` array. Must be one of: `gl.BYTE`, `gl.UNSIGNED_BYTE`, `gl.SHORT`, `gl.UNSIGNED_SHORT`, `gl.FLOAT`. |\n| `usage` | `gl.STATIC_DRAW` | Mode of draw: `gl.STATIC_DRAW` (rare changes), `gl.DYNAMIC_DRAW` (frequent changes) or `gl.STREAM_DRAW` (frequent updates) |\n| `normalized` | `false` | If fixed-point data values should be normalized or are to converted to fixed point values when accessed. |\n| `index` | `0` | Attribute unit number, detected automatically if omitted. |\n| `target` | `gl.ARRAY_BUFFER` | |\n| `buffer` | `null` | WebGLBuffer to use for attribute |\n\nReturns attribute properties `{data, size, stride, offset, usage, type, normalized, index, target, buffer}`.\n\n```js\nconst attribute = require('gl-util/attribute')\n\nattribute(gl, 'position', [0,0,1,0,0,1]);\n```\n\n### `clear(gl, optsion?)`\n\nClear the viewport.\n\n## Motivation\n\nThere are [regl](https://github.com/regl-project/regl), [stack.gl](https://github.com/stackgl/) and many other WegGL components or frameworks, so why gl-util?\n\n* WebGL frameworks API is usually difficult to remember, not much better than pure WebGL, although _regl_ does a great job. _gl-util_ is like functions from any WebGL tutorial - tiny, handy and already familiar.\n* _gl-util_ does not supersede WebGL API - that allows for debugging pure WebGL at any moment.\n* _gl-util_ is tiny - if one needs minimalistic WebGL setup it may be better to opt for a couple of functions than massive stack.gl components or regl (70kb+).\n* regl API may be cumbersome for organizing components\n\n\n## License\n\n(c) 2018 Dmitry Yv. MIT License\n\n\nso\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fgl-util","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdy%2Fgl-util","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fgl-util/lists"}