{"id":15287932,"url":"https://github.com/farazzshaikh/three-shader-baker","last_synced_at":"2025-04-04T20:13:22.563Z","repository":{"id":257798436,"uuid":"861940858","full_name":"FarazzShaikh/three-shader-baker","owner":"FarazzShaikh","description":"🍰 Bake your Three.js shaders or materials into textures!","archived":false,"fork":false,"pushed_at":"2024-10-06T10:31:55.000Z","size":7208,"stargazers_count":145,"open_issues_count":2,"forks_count":14,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T20:13:17.401Z","etag":null,"topics":["baking","materials","shaders","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://farazzshaikh.github.io/three-shader-baker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FarazzShaikh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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},"funding":{"github":"farazzshaikh","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2024-09-23T18:49:08.000Z","updated_at":"2025-03-30T00:53:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"1901b3ab-837a-44a5-bfd0-9c021c41b59a","html_url":"https://github.com/FarazzShaikh/three-shader-baker","commit_stats":null,"previous_names":["farazzshaikh/three-shader-baker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FarazzShaikh%2Fthree-shader-baker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FarazzShaikh%2Fthree-shader-baker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FarazzShaikh%2Fthree-shader-baker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FarazzShaikh%2Fthree-shader-baker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FarazzShaikh","download_url":"https://codeload.github.com/FarazzShaikh/three-shader-baker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242680,"owners_count":20907134,"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":["baking","materials","shaders","threejs","webgl"],"created_at":"2024-09-30T15:39:40.727Z","updated_at":"2025-04-04T20:13:22.542Z","avatar_url":"https://github.com/FarazzShaikh.png","language":"TypeScript","funding_links":["https://github.com/sponsors/farazzshaikh","https://github.com/sponsors/FarazzShaikh"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003csup\u003eTHREE\u003c/sup\u003e Shader Baker\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eBake your Three.js shaders or materials into textures!\u003c/h3\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://farazzshaikh.github.io/three-shader-baker/\" target=\"_blank\"\u003e\u003cimg width=\"100%\" src=\"https://github.com/FarazzShaikh/three-shader-baker/blob/main/assets/example-screenshot.png?raw=true\" alt=\"Shader Baker example\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c/p\u003e\n\u003cp align=\"middle\"\u003e\n  \u003ci\u003eHere, ThreeJS fragment shaders are exported out as textures which are then used in Blender. This demo is real! Give it a click.\u003c/i\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/three-shader-baker\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/three-shader-baker.svg?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/three-shader-baker\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/three-shader-baker?style=for-the-badge\u0026colorB=red\" /\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://github.com/sponsors/FarazzShaikh\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/sponsor-30363D?style=for-the-badge\u0026logo=GitHub-Sponsors\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/CantBeFaraz\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/follow/CantBeFaraz?style=for-the-badge\u0026logo=x\" alt=\"Chat on Twitter\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nShader Baker lets you export your Three.js shaders or materials as textures. This is useful when you want to use the same shader in other 3D software like Blender, Unity, etc. You can also use the exported textures in other Three.js shaders/materials to save on performance.\n\n**It supports both Vanilla and React!**\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Vanilla example\u003c/summary\u003e\n\n```js\nimport { ShaderBaker, getTextureAsDataUrl } from \"three-shader-baker\";\n\nconst mesh = new THREE.Mesh(...)\n\nconst baker = new ShaderBaker();\nconst fbo = baker.bake(renderer, mesh, {\n  // Optional options\n  scene: scene, // Scene that the mesh is in. If provided, the current env map will be used.\n  size: 1024, // Number. Size of the baked texture\n  target: null // THREE.WebGLRenderTarget. If provided, the baked texture will be rendered to this target.\n})\n\n// Your resulting texture\nconst dataUrl = getTextureAsDataUrl(renderer, fbo.texture);\n\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow React example\u003c/summary\u003e\n\n```js\nimport {\n  ShaderBaker,\n  useShaderBaker,\n  getTextureAsDataUrl\n} from \"three-shader-baker/react\";\n\nfunction Mesh() {\n  const { bake } = useShaderBaker();\n  const meshRef = useRef();\n\n  useEffect(() =\u003e {\n    const fbos = bake();\n    const targrtFbo = fbos[meshRef.uuid];\n\n    // Your resulting texture\n    const dataUrl = getTextureAsDataUrl(renderer, targetFbo.texture);\n  }, []);\n\n  return \u003cmesh ref={meshRef}\u003e...\u003c/mesh\u003e;\n}\n\n\u003cShaderBaker\u003e\n  \u003cMesh /\u003e\n\u003c/ShaderBaker\u003e;\n```\n\n\u003c/details\u003e\n\n## License\n\nThis project is licensed under the AGPL-3.0 License. See the [LICENSE](LICENSE.md) file for details.Please email me at [farazzshaikh@gmail.com](mailto:farazzshaikh@gmail.com) if you would like to use this library under a different license.\n\n## Installation\n\n```bash\nnpm install three-shader-baker\nyarn add three-shader-baker\n```\n\n## Helpers **(React only)**\n\nYou can set the following helpers on `THREE.Mesh.userData` to control the baking process:\n\n- `__shaderBaker_isExcluded` - Set this to `true` to exclude the mesh from baking.\n- `__shaderBaker_size` - Set this to a number to override the size of the baked texture for this mesh. Can be used to bake different textures at different resolutions.\n\n## Gotchas\n\n- **(React only)** The `bake` functions from `const { bake } = useShaderBaker()` is memoized. Make sure to pass it as a dependency in your `useEffect` hook otherwise it will unnecessary state updates.\n- **(React only)** The order of priority for the `size` prop is as follows:\n  1. `__shaderBaker_size` on the mesh\n  2. `size` parameter in the `bake` function\n  3. `size` prop on the `\u003cShaderBaker /\u003e` component\n- Lighting is baked from a single point of view (`[0, 0, -1]` looking towards `[0, 0, 0]`). This means specular highlights and reflections will not be accurate if the camera is dynamic. This is a limitation of texture baking in general.\n- Any animated shaders will only be baked at the current frame. Unless you bake the texture at every frame, the animation will not be captured. See the [performance ](#performance) section for more details.\n\n## Performance\n\nBaking shaders is an expensive operation. It is recommended to bake the shaders only once and then use the resulting texture in your scene or export it out. The cost of baking is directly proportional to the `size` of the baked texture. The larger the texture, the more time it will take to bake.\n\nIf you have animated shaders, you will need to bake the texture at every frame to capture the animation. This can be done by calling the `bake` function at every frame. This is not recommended for real-time applications as it can be very expensive.\n\nAt the moment, baking is a synchronous operation. This means that the browser will freeze while the baking is happening. You will also see a flicker in the scene as the process is happening. I will be looking into making this asynchronous in the future.\n\nFor now, it is recommended to black out the screen or show a loading screen while the baking is happening.\n\n## API Reference\n\n\u003cdetails\u003e\n\n\u003csummary\u003eVanilla\u003c/summary\u003e\n\n#### `ShaderBaker`\n\n#### `ShaderBaker.constructor()`\n\nCreates a new instance of the ShaderBaker.\n\n#### `ShaderBaker.bake(renderer: THREE.WebGLRenderer, mesh: THREE.Mesh, options: Object): THREE.WebGLRenderTarget`\n\nBakes the shader/material of the mesh into a render target.\n\n- `renderer` - The renderer instance.\n- `mesh` - The mesh whose shader/material you want to bake.\n- `options` - Optional options.\n  - `scene` - The scene that the mesh is in. If provided, the current env map will be used.\n  - `size` - Number. Size of the baked texture. Default is 1024.\n  - `target` - THREE.WebGLRenderTarget. If provided, the baked texture will be rendered to this target.\n  - `dilation` - Number. Number of pixels to dilate the texture by. Default is 2. This is useful to prevent seam artifacts.\n\n#### `ShaderBaker.dispose()`\n\nDisposes of the ShaderBaker instance and its associated resources.\n\n#### `getTextureAsDataUrl(renderer: THREE.WebGLRenderer, texture: THREE.Texture): string`\n\nConverts a texture to a data URL.\n\n#### `downloadTexture(renderer: THREE.WebGLRenderer, texture: THREE.Texture, filename: string): void`\n\nDownloads a texture as a png file.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eReact\u003c/summary\u003e\n\n#### `\u003cShaderBaker /\u003e`\n\nA provider component that provides the `useShaderBaker` hook. Any `THREE.Mesh` inside this component will be baked into separate render targets.\n\nThis props of this component are as follows:\n\n- `size` - Number. Size of the baked texture. Default is 1024.\n- `dilation` - Number. Number of pixels to dilate the texture by. Default is 2. This is useful to prevent seam artifacts.\n\n#### `\u003cShaderBakerExclusion /\u003e`\n\nA component that excludes a `THREE.Mesh` from being baked. Any `THREE.Mesh` inside this component will be excluded from baking.\n\nYou can manually exclude meshes by setting `THREE.Mesh.userData[\"__shaderBaker_isExcluded\"] = true`.\n\n#### `const obj = useShaderBaker()`\n\nA hook that returns useful functions and data for baking. The object returned has the following properties:\n\n- `bake(args): { [mesh.uuid]: THREE.WebGLRenderTarget }`\n  - This function bakes all the meshes inside the `\u003cShaderBaker /\u003e` component.\n  - The args are as follows:\n    - `mesh: mesh: THREE.Mesh | THREE.Mesh[] | null` - The mesh(es) to bake. If not provided, all meshes inside the `\u003cShaderBaker /\u003e` component will be baked.\n    - `options: Object`\n      - `dialetion` - Number. Number of pixels to dilate the texture by. Default is 2. This is useful to prevent seam artifacts.\n      - `size` - Number. Size of the baked texture. Default is 1024.\n- `renderTargets: { [key: string]: THREE.WebGLRenderTarget }`\n  - An object containing all the render targets of the baked meshes. Keyed by the their respective mesh's uuid.\n- `textures: { [key: string]: THREE.Texture }`\n  - An object containing all the textures of the baked meshes (`THREE.WebGLRenderTarget.texture`). Keyed by the their respective mesh's uuid.\n\n#### `getTextureAsDataUrl(renderer: THREE.WebGLRenderer, texture: THREE.Texture): string`\n\nConverts a texture to a data URL.\n\n#### `downloadTexture(renderer: THREE.WebGLRenderer, texture: THREE.Texture, filename: string): void`\n\nDownloads a texture as a png file.\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarazzshaikh%2Fthree-shader-baker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarazzshaikh%2Fthree-shader-baker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarazzshaikh%2Fthree-shader-baker/lists"}