Glsl shader as map source for meshStandardMaterial

Questions
,
2

I think you’re looking for something like the GPGPU water example, which uses custom shaders to generate a heightMap. Here’s a simplified explanation of the code in that example:

  1. Create a plane Mesh with custom shaders to calculate water height (red & green channels).
  2. Set up an OrthographicCamera and a Scene to render this plane head-on.
  3. Render this Scene to a THREE.WebGLRenderTarget so the render result will get stored in a texture.
  4. Create a second plane Mesh with its heightmap assigned to the result of the RenderTarget: heightmap = renderTarget.texture
  5. Set up a PerspectiveCamera and a secondary Scene.
  6. Render your second scene as usual with the WebGLRenderer to output to canvas.

Keep in mind that you’ll need to do the rendering in two separate scenes to avoid infinite recursion problems.

You can do something similar yourself.

  • In step 1, you could render your custom ShaderToy shader.
  • In step 4, assign the custom render texture as the color map:
    MeshStandardMaterial({map: renderTarget.texture});
2 Likes