ShaderMaterial

Creates a THREE.ShaderMaterial rendered with custom shaders.

<Box>
  <ShaderMaterial />
</Box>

Source : https://github.com/troisjs/trois/blob/master/src/materials/ShaderMaterial.ts

Props

NameDescriptionTypeDefault
uniformsUniforms to pass to shaderObject
vertexShaderVertex shader, as stringString
fragmentShaderFragment shader, as stringString

Examples

Adding textures

You can pass textures to shaders by adding a Texture with the prop uniform as a child of the material:

<ShaderMaterial :fragmentShader="...">
  <Texture src="/my/texture/src.png" uniform="myCustomTexture"/>
</ShaderMaterial>

The texture will be set as a uniform sampler2D in the shader. The fragment shader in the example above would have access to the texture as:

uniform sampler2D myCustomTexture;

void main(){
  gl_FragColor = texture2D(myCustomTexture, /* your UV vec2 */);
}