{"id":15634719,"url":"https://github.com/spite/three.fbohelper","last_synced_at":"2025-06-14T06:02:36.344Z","repository":{"id":65374743,"uuid":"69408742","full_name":"spite/THREE.FBOHelper","owner":"spite","description":"FrameBuffer Object inspector for three.js","archived":false,"fork":false,"pushed_at":"2018-02-27T23:38:08.000Z","size":11931,"stargazers_count":138,"open_issues_count":2,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-05T09:42:50.888Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/spite.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":"2016-09-28T00:04:39.000Z","updated_at":"2025-05-09T03:55:44.000Z","dependencies_parsed_at":"2023-01-20T04:18:35.329Z","dependency_job_id":null,"html_url":"https://github.com/spite/THREE.FBOHelper","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/spite/THREE.FBOHelper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.FBOHelper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.FBOHelper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.FBOHelper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.FBOHelper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spite","download_url":"https://codeload.github.com/spite/THREE.FBOHelper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.FBOHelper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259768514,"owners_count":22908228,"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-10-03T10:56:01.585Z","updated_at":"2025-06-14T06:02:36.328Z","avatar_url":"https://github.com/spite.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# THREE.FBOHelper\nFrameBuffer Object inspector for three.js\n\n####Check out a demo here: [Goth GPU Physics](https://www.clicktorelease.com/code/THREE.FBOHelper/#512)\n\u003ca href=\"https://www.clicktorelease.com/code/THREE.FBOHelper/\" \u003e\u003cimg src=\"https://raw.githubusercontent.com/spite/THREE.FBOHelper/master/about/demo.jpg\" alt=\"Demo\"/\u003e\u003c/a\u003e\n# Screenshots\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/spite/THREE.FBOHelper/master/about/snapshot1.jpg\" alt=\"Snapshot\"/\u003ePosition buffer\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/spite/THREE.FBOHelper/master/about/snapshot2.jpg\" alt=\"Snapshot\"/\u003eMotion blur buffer\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/spite/THREE.FBOHelper/master/about/snapshot3.jpg\" alt=\"Snapshot\"/\u003eShadow map buffer\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/spite/THREE.FBOHelper/master/about/snapshot4.jpg\" alt=\"Snapshot\"/\u003ePosition buffer\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n# How to use\n\n- Include THREE.FBOHelper.js. There's an ES6 build and an ES5 build transpiled with babel-cli in /build.\n- Create a helper linked to a WebGLRenderer\n```js\nvar helper = new FBOHelper( renderer );\n```\nor use npm to install the package:\n```\nnpm i three.fbo-helper\n```\nand include it in your code (remember to include three.js too)\n```js\nvar THREE = require( 'three' );\nvar FBOHelper = require( 'three.fbo-helper' );\n```\n- Call .setSize to adjust to the renderer size (don't forget to do onResize!)\n```js\nhelper.setSize( width, height );\n```\n- Attach WebGLRenderTargets at discretion\n```js\nhelper.attach( fieldFBO, 'Distance Field' );\nhelper.attach( particleFBO, 'Particles' );\n```\n```attach()``` admits a third parameters, ```formatter```, a function that will receive an object with the values of the current point ```x```, ```y```, ```u```, ```v```, ```r```, ```g```, ```b```, and ```a```. You can return a custom string in case you want to show a different caption in the label. Otherwise, it will show all the values. \nExample:\n```js\nhelper.attach( buffer, 'Particles', function( d ) {\n  return `Position: (${d.x}, ${d.y}, ${d.z}) | Life: ${d.a}`;\n} );\n```\n- Update with your animation loop\n```js\nhelper.update();\n```\n- If for any reason you resize the FBO, call:\n```js\nhelper.refreshFBO( fbo );\n````\n\n- Call ```.detach``` to remove any fbo previously attached\n```js\nhelper.deatch( fbo );\n````\n\nOnce the helper is working, you can select FBOs to inspect, and drag the viewer around and use the scroll/mousewheel to zoom in and out.\n\n#### License ####\n\nMIT licensed\n\nCopyright (C) 2016 Jaume Sanchez Elias, http://www.clicktorelease.com\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2Fthree.fbohelper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspite%2Fthree.fbohelper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2Fthree.fbohelper/lists"}