Sometime you want to take all the functionality of a built-in Three.js material like MeshStandardMaterial with all its physically based goodness, and customize it a bit.

This page serves to document the structure of built-in Three.js materials and explain how to tweak their essential components.

ShaderLib - these are the material shaders that combine chunks

ShaderChunk - these are the chunks that are #include -ed

<aside> ℹ️ The standard material is a subset of the physical material, so you can find its recipe in meshphysical_vert.glsl.js and meshphysical_frag.glsl.js

</aside>

Variables Glossary

How-tos

• Adding uniforms
• Adding varyings
• Replacing diffuse color
• Normal mapping
• Tangent space

ShaderUtils

export default class ShaderUtils {
  // Prepend to vertex shader
  static vertHead(shader, head) {
    shader.vertexShader = head + '\\n' + shader.vertexShader
  }
  // Prepend to fragment shader
  static fragHead(shader, head) {
    shader.fragmentShader = head + '\\n' + shader.fragmentShader
  }

  // Append to top of vertex shader main()
  static vertBody(shader, body) {
    shader.vertexShader = shader.vertexShader.replace(/void main\\(\\) {/, (head) => head + body)
  }

  // Append to top of fragment shader main()
  static fragBody(shader, body) {
    shader.fragmentShader = shader.fragmentShader.replace(/void main\\(\\) {/, (head) => head + body)
  }

  // Merge custom uniforms object with existing uniforms
  static uniforms(shader, uniforms) {
    shader.uniforms = { ...shader.uniforms, ...uniforms }
  }
}

• References