Here, ThreeJS fragment shaders are exported out as textures which are then used in Blender. This demo is real! Give it a click.

Shader 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.

It supports both Vanilla and React!

import { ShaderBaker, getTextureAsDataUrl } from "three-shader-baker";

const mesh = new THREE.Mesh(...)

const baker = new ShaderBaker();
const fbo = baker.bake(renderer, mesh, {
  // Optional options
  scene: scene, // Scene that the mesh is in. If provided, the current env map will be used.
  size: 1024, // Number. Size of the baked texture
  target: null // THREE.WebGLRenderTarget. If provided, the baked texture will be rendered to this target.
})

// Your resulting texture
const dataUrl = getTextureAsDataUrl(renderer, fbo.texture);

import {
  ShaderBaker,
  useShaderBaker,
  getTextureAsDataUrl
} from "three-shader-baker/react";

function Mesh() {
  const { bake } = useShaderBaker();
  const meshRef = useRef();

  useEffect(() => {
    const fbos = bake();
    const targrtFbo = fbos[meshRef.uuid];

    // Your resulting texture
    const dataUrl = getTextureAsDataUrl(renderer, targetFbo.texture);
  }, []);

  return <mesh ref={meshRef}>...</mesh>;
}

<ShaderBaker>
  <Mesh />
</ShaderBaker>;

This project is licensed under the AGPL-3.0 License. See the LICENSE file for details.Please email me at [email protected] if you would like to use this library under a different license.

npm install three-shader-baker
yarn add three-shader-baker

You can set the following helpers on THREE.Mesh.userData to control the baking process:

• __shaderBaker_isExcluded - Set this to true to exclude the mesh from baking.
• __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.

• (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.
• (React only) The order of priority for the size prop is as follows:
  1. __shaderBaker_size on the mesh
  2. size parameter in the bake function
  3. size prop on the <ShaderBaker /> component
• 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.
• 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 section for more details.

Baking 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.

If 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.

At 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.

For now, it is recommended to black out the screen or show a loading screen while the baking is happening.