{"id":20778084,"url":"https://github.com/stackgl/gl-fbo","last_synced_at":"2025-04-06T19:13:17.586Z","repository":{"id":57174390,"uuid":"8296481","full_name":"stackgl/gl-fbo","owner":"stackgl","description":"WebGL framebuffer wrapper","archived":false,"fork":false,"pushed_at":"2017-02-23T18:43:35.000Z","size":730,"stargazers_count":60,"open_issues_count":6,"forks_count":19,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-30T18:08:30.499Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://stack.gl/gl-fbo/","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-02-19T18:27:31.000Z","updated_at":"2023-08-08T11:27:10.000Z","dependencies_parsed_at":"2022-08-29T00:10:50.524Z","dependency_job_id":null,"html_url":"https://github.com/stackgl/gl-fbo","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-fbo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-fbo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-fbo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackgl%2Fgl-fbo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackgl","download_url":"https://codeload.github.com/stackgl/gl-fbo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247535520,"owners_count":20954576,"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":[],"created_at":"2024-11-17T13:19:05.506Z","updated_at":"2025-04-06T19:13:17.557Z","avatar_url":"https://github.com/stackgl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"gl-fbo\n======\nWebGL framebuffer object wrapper\n\n## Example\n\n[Try this in your browser if you have WebGL](http://stackgl.github.io/gl-fbo/)\n\n```javascript\nvar shell = require(\"gl-now\")()\nvar createFBO = require(\"gl-fbo\")\nvar glslify = require(\"glslify\")\nvar ndarray = require(\"ndarray\")\nvar fill = require(\"ndarray-fill\")\nvar fillScreen = require(\"a-big-triangle\")\n\nvar createUpdateShader = glslify({\n  vertex: \"\\\n    attribute vec2 position;\\\n    varying vec2 uv;\\\n    void main() {\\\n      gl_Position = vec4(position,0.0,1.0);\\\n      uv = 0.5 * (position+1.0);\\\n    }\",\n  fragment: \"\\\n    precision mediump float;\\\n    uniform sampler2D buffer;\\\n    uniform vec2 dims;\\\n    varying vec2 uv;\\\n    void main() {\\\n      float n = 0.0;\\\n      for(int dx=-1; dx\u003c=1; ++dx)\\\n      for(int dy=-1; dy\u003c=1; ++dy) {\\\n        n += texture2D(buffer, uv+vec2(dx,dy)/dims).r;\\\n      }\\\n      float s = texture2D(buffer, uv).r;\\\n      if(n \u003e 3.0+s || n \u003c 3.0) {\\\n        gl_FragColor = vec4(0,0,0,1);\\\n      } else {\\\n        gl_FragColor = vec4(1,1,1,1);\\\n      }\\\n    }\",\n  inline: true\n})\n\nvar createDrawShader = glslify({\n  vertex: \"\\\n    attribute vec2 position;\\\n    varying vec2 uv;\\\n    void main() {\\\n      gl_Position = vec4(position,0.0,1.0);\\\n      uv = 0.5 * (position+1.0);\\\n    }\",\n  fragment: \"\\\n    precision mediump float;\\\n    uniform sampler2D buffer;\\\n    varying vec2 uv;\\\n    void main() {\\\n      gl_FragColor = texture2D(buffer, uv);\\\n    }\",\n  inline: true\n})\n\nvar state, updateShader, drawShader, current = 0\n\nshell.on(\"gl-init\", function() {\n  var gl = shell.gl\n  \n  //Turn off depth test\n  gl.disable(gl.DEPTH_TEST)\n\n  //Initialize shaders\n  updateShader = createUpdateShader(gl)\n  drawShader = createDrawShader(gl)\n\n  //Allocate buffers\n  state = [ createFBO(gl, [512, 512]), createFBO(gl, [512, 512]) ]\n  \n  //Initialize state buffer\n  var initial_conditions = ndarray(new Uint8Array(512*512*4), [512, 512, 4])\n  fill(initial_conditions, function(x,y,c) {\n    if(c === 3) {\n      return 255\n    }\n    return Math.random() \u003e 0.9 ? 255 : 0\n  })\n  state[0].color[0].setPixels(initial_conditions)\n  \n  //Set up vertex pointers\n  drawShader.attributes.position.location = updateShader.attributes.position.location = 0\n})\n\nshell.on(\"tick\", function() {\n  var gl = shell.gl\n  var prevState = state[current]\n  var curState = state[current ^= 1]\n\n  //Switch to state fbo\n  curState.bind()\n  \n  //Run update shader\n  updateShader.bind()\n  updateShader.uniforms.buffer = prevState.color[0].bind()\n  updateShader.uniforms.dims = prevState.shape\n  fillScreen(gl)\n})\n\nshell.on(\"gl-render\", function(t) {\n  var gl = shell.gl\n  \n  //Render contents of buffer to screen\n  drawShader.bind()\n  drawShader.uniforms.buffer = state[current].color[0].bind()\n  fillScreen(gl)\n})\n```\n\nResult:\n\n\u003cimg src=\"https://raw.github.com/stackgl/gl-fbo/master/screenshot.png\"\u003e\n\n\n## Install\n\nInstall using npm:\n\n    npm install gl-fbo\n\n# API\n\n### `var createFBO = require(\"gl-fbo\")`\n\n## Constructor\nThere is currently only one default way to create a Framebuffer object.  You can construct a framebuffer using the following syntax:\n\n### `var fbo = createFBO(gl, shape[, options])`\nCreates a wrapped framebuffer object\n\n* `gl` is a handle to a WebGL context\n* `shape` is a length 2 array encoding the `[width, height]` of the frame buffer\n* `options` is an object containing the following optional properties:\n\n    + `options.preferFloat` Upgrade to floating point if available, otherwise fallback to 8bit. (default `false`)\n    + `options.float` Use floating point textures (default `false`)\n    + `options.color`  The number of color buffers to create (default `1`)\n    + `options.depth` If fbo has a depth buffer (default: `true`)\n    + `options.stencil` If fbo has a stencil buffer (default: `false`)\n\n## Methods\n\n### `fbo.bind()`\nBinds the framebuffer object to the display.  To rebind the original drawing buffer, you can just call WebGL directly:\n\n```javascript\n//Bind the drawing buffer\ngl.bindFramebuffer(gl.FRAMEBUFFER, null)\n```\n\n### `fbo.dispose()`\nDestroys the framebuffer object and releases all associated resources\n\n## Properties\n\n\n### `fbo.shape`\nReturns the shape of the frame buffer object.  Writing to this property resizes the framebuffer.  For example,\n\n```javascript\nfbo.shape = [ newWidth, newHeight ]\n```\n\n### `fbo.gl`\nA reference to the WebGL context\n\n### `fbo.handle`\nA handle to the underlying Framebuffer object.\n\n### `fbo.color`\nAn array containing [`gl-texture2d`](https://github.com/stackgl/gl-texture2d) objects representing the buffers.  \n\n### `fbo.depth`\nThe depth/stencil component of the FBO.  Stored as a [`gl-texture2d`](https://github.com/stackgl/gl-texture2d).  If not present, is `null`.\n\nCredits\n=======\n(c) 2013-2014 Mikola Lysenko. MIT License","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackgl%2Fgl-fbo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackgl%2Fgl-fbo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackgl%2Fgl-fbo/lists"}