# ShaderMaterial

Creates a THREE.ShaderMaterial rendered with custom shaders.

<Box>
  <ShaderMaterial :props="{ uniforms: {}, vertexShader: '...', fragmentShader: '...' }" />
</Box>

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

# Props

As the other materials, you should use special prop props to define the following THREE.ShaderMaterial properties :

# Examples

# Adding textures

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

<ShaderMaterial :props="{ 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 */);
}