{"id":20778075,"url":"https://github.com/stackgl/gl-now","last_synced_at":"2025-07-23T08:05:28.446Z","repository":{"id":8910269,"uuid":"10635142","full_name":"stackgl/gl-now","owner":"stackgl","description":"Create a WebGL context now!","archived":false,"fork":false,"pushed_at":"2014-08-29T15:06:30.000Z","size":468,"stargazers_count":64,"open_issues_count":2,"forks_count":7,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-06-20T14:08:35.446Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://mikolalysenko.github.io/gl-now/","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-12T02:45:22.000Z","updated_at":"2024-12-16T17:43:18.000Z","dependencies_parsed_at":"2022-07-08T03:35:48.409Z","dependency_job_id":null,"html_url":"https://github.com/stackgl/gl-now","commit_stats":null,"previous_names":["mikolalysenko/gl-now"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stackgl/gl-now","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-now","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-now/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-now/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-now/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackgl","download_url":"https://codeload.github.com/stackgl/gl-now/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-now/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266640797,"owners_count":23960805,"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-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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:19:00.046Z","updated_at":"2025-07-23T08:05:28.403Z","avatar_url":"https://github.com/stackgl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"gl-now\n======\nCreate a WebGL context right now!\n\nThis module is an extension of [game-shell](https://github.com/mikolalysenko/game-shell) that creates a WebGL enabled canvas and adds it to the specified container.\n\n## Example\n\n[Try this demo in your browser](http://mikolalysenko.github.io/gl-now/)\n\n```javascript\n//Initialize shell\nvar shell = require(\"gl-now\")()\n\nshell.on(\"gl-init\", function() {\n  var gl = shell.gl\n  \n  //Create fragment shader\n  var fs = gl.createShader(gl.FRAGMENT_SHADER)\n  gl.shaderSource(fs, [\n    \"void main() {\",\n      \"gl_FragColor = vec4(1, 0, 0, 1);\",\n    \"}\"].join(\"\\n\"))\n  gl.compileShader(fs)\n\n  //Create vertex shader\n  var vs = gl.createShader(gl.VERTEX_SHADER)\n  gl.shaderSource(vs, [\n    \"attribute vec3 position;\",\n    \"void main() {\",\n      \"gl_Position = vec4(position, 1.0);\",\n    \"}\"].join(\"\\n\"))\n  gl.compileShader(vs)\n\n  //Link\n  var shader = gl.createProgram()\n  gl.attachShader(shader, fs)\n  gl.attachShader(shader, vs)\n  gl.linkProgram(shader)\n  gl.useProgram(shader)\n  \n  //Create buffer\n  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())\n  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([\n    -1, 0, 0,\n    0, -1, 0,\n    1, 1, 0\n  ]), gl.STATIC_DRAW)\n  \n  //Set up attribute pointer\n  var position_attribute = gl.getAttribLocation(shader, \"position\")\n  gl.enableVertexAttribArray(position_attribute)\n  gl.vertexAttribPointer(position_attribute, 3, gl.FLOAT, false, 0, 0)\n})\n\nshell.on(\"gl-render\", function(t) {\n  var gl = shell.gl\n\n  //Draw arrays\n  gl.drawArrays(gl.TRIANGLES, 0, 3)\n})\n\nshell.on(\"gl-error\", function(e) {\n  throw new Error(\"WebGL not supported :(\")\n})\n```\n\nResult:\n\n\u003cimg src=\"https://raw.github.com/mikolalysenko/gl-now/master/screenshot.png\"\u003e\n\n\n## Install\n\n    npm install gl-now\n    \n# API\n\n### `var shell = require(\"gl-now\")([options])`\n\nOptions is an object that takes the same fields as in [game-shell](https://github.com/mikolalysenko/game-shell#var-shell--requiregame-shelloptions) with the following additions:\n\n* `clearFlags` a list of flags to clear on redraw.  (Default `gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT`)\n* `clearColor` a length 4 array representing background clear color.  (Defaults to element's background-color or else `[0.2, 0.4, 0.8, 1.0]`\n* `clearDepth` value to clear depth buffer to (Defaults to `1.0`)\n* `clearStencil` value to clear stencil buffer to (Defaults to `0`)\n* `extensions` a list of necessary WebGL extensions to support.  Vendor prefix optional.  You can access these extensions later using [webglew](https://npmjs.org/package/webglew)\n* `glOptions` on object containing a set of parameters which are passed to the webgl context directly.\n\n## Events\n\nIn addition to all the events inherited from [game-shell](https://github.com/mikolalysenko/game-shell#events), `gl-now` adds the following events:\n\n### `gl-init`\nCalled once the WebGL context is initialized\n\n### `gl-render([frame_time])`\nCalled at the start of the WebGL frame.\n\n### `gl-error(reason)`\nCalled if there was an error initializing webgl\n\n### `gl-resize(width, height)`\nCalled when the WebGL window is resized\n\n\n## Properties\n\nFinally `gl-now` adds the following extra properties to `game-shell`:\n\n### `shell.gl`\n\nThe WebGL context\n\n### `shell.canvas`\n\nThe canvas object\n\n### `shell.width`\n\nThe width of the gl context\n\n### `shell.height`\n\nThe height of the context\n\n### `shell.scale`\n\nThe scale of the context, which defaults to 1. Set it to higher values for\na smaller viewport and faster rendering at the expense of quality.\n\n### `shell.mouse`\nA length 2 vector giving the current coordinate of the mouse on the screen\n\n### `shell.prevMouse`\nA length 2 vector giving the previous coordinate of the mouse on the screen\n\n# Credits\n(c) 2013 Mikola Lysenko. MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackgl%2Fgl-now","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackgl%2Fgl-now","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackgl%2Fgl-now/lists"}