Les Shaders

• Shaders natifs
• Shaders customs

Ecrire des customs shaders

• ShaderMaterial : Préprocesseur, code simplifié, moins de contrôle
• RawShaderMaterial : Pas de préprocesseur

Vertex Shader et Fragment shader

Ordre

JS => Vertex Shedex => Fragment Shader

Vertex Shader

Vertex shader : Modifier la position des vertex (x, y, z)

Fragment Shader

Fragment shader : Modifier la couleur des fragments (pixels) (rgba)

uniform : Variable récupérée du code JS, constante. Ne change pas à chaque vertex. attribute : Variable récupérée du code JS. Change à chaque vertex. varying : Variable récupérée du vertex shader, transmise du vertex shader au fragment shader.

Organisation

dossier Shaders

• vertex.glsl
• fragment.glsl

JS

Définir un RawShaderMaterial

 
// Import des shaders vertex et fragment
import vertexShader from './shaders/vertex.glsl'
import fragmentShader from './shaders/fragment.glsl'
 
//...
 
// Création du material
 
const material = new THREE.RawShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      random: { value: 0.5 }
      // Nos constantes envoyée du JS au shader
    }
})
 
// Si on veut mettre a jour une uniform
 
material.uniforms.random.value = Math.random();