threejs-shaders

1# Three.js Shaders
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7```javascript
8import * as THREE from "three";
9 
10const renderer = new THREE.WebGLRenderer({ antialias: true });
11renderer.setPixelRatio(window.devicePixelRatio);
12renderer.setSize(window.innerWidth, window.innerHeight);
13document.body.appendChild(renderer.domElement);
14 
15const scene = new THREE.Scene();
16const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
17camera.position.set(0, 0, 2);
18 
19const material = new THREE.ShaderMaterial({
20  uniforms: {
21    time: { value: 0 },
22    color: { value: new THREE.Color(0x0066ff) }, // hex converted to the linear working space
23  },
24  vertexShader: /* glsl */ `
25    varying vec2 vUv;
26 
27    void main() {
28      vUv = uv;
29      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
30    }
31  `,
32  fragmentShader: /* glsl */ `
33    uniform float time;
34    uniform vec3 color;
35    varying vec2 vUv;
36 
37    void main() {
38      float wave = sin(vUv.x * 10.0 + time * 2.0) * 0.5 + 0.5;
39      gl_FragColor = vec4(color * wave, 1.0);
40      #include <tonemapping_fragment>
41      #include <colorspace_fragment>
42    }
43  `,
44});
45 
46const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
47scene.add(mesh);
48 
49const timer = new THREE.Timer();
50timer.connect(document);
51 
52renderer.setAnimationLoop(animate);
53 
54function animate() {
55  timer.update();
56…