Shaders, post-processing & WebGPU

import { Color, ShaderMaterial } from "three";
import type { IUniform } from "three";
 
type WaveUniforms = {
  uTime: IUniform<number>;
  uColor: IUniform<Color>;
};
const uniforms: WaveUniforms = {
  uTime: { value: 0 },
  uColor: { value: new Color("#4f8cff") },
};
 
const mat = new ShaderMaterial({
  uniforms,
  vertexShader: VERT,
  fragmentShader: FRAG,
  transparent: false,
});
// per frame: typed, no string lookups
uniforms.uTime.value = timer.getElapsed();

uniform float uTime;
varying vec2 vUv;
varying float vH;
 
void main() {
  vUv = uv;
  vec3 p = position;
  p.z += sin(p.x * 4.0 + uTime) * 0.1;
  vH = p.z;
  gl_Position = projectionMatrix * modelViewMatrix
    * vec4(p, 1.0);
}

uniform vec3 uColor;
varying vec2 vUv;
varying float vH;
 
void main() {
  vec3 c = uColor * (0.7 + vH * 3.0);
  gl_FragColor = vec4(c, 1.0);
  #include <tonemapping_fragment>
  #include <colorspace_fragment>
}

const uTime = { value: 0 };               // shared ref
const mat = new MeshStandardMaterial({ color: "teal" });
 
mat.onBeforeCompile = (shader) => {
  shader.uniforms.uTime = uTime;
  shader.vertexShader = shader.vertexShader
    .replace("#include <common>", /* glsl */ `
      #include <common>
      uniform float uTime;`)
    .replace("#include <begin_vertex>", /* glsl */ `
      #include <begin_vertex>
      transformed.y += sin(position.x * 3.0 + uTime)
        * 0.2;`);
};
// distinct cache key if variants differ
mat.customProgramCacheKey = () => "wave-v1";

 RenderPass ─► rtA ─► UnrealBloomPass ─► rtB ─► … ─► OutputPass ─► canvas
 (linear HDR, HalfFloat targets)                    tone map + sRGB

import { EffectComposer } from
  "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from
  "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from
  "three/addons/postprocessing/UnrealBloomPass.js";
import { OutputPass } from
  "three/addons/postprocessing/OutputPass.js";
 
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new UnrealBloomPass(
  new Vector2(innerWidth, innerHeight),
  0.8,   // strength
  0.4,   // radius
  0.85,  // threshold (luminance)
));
composer.addPass(new OutputPass());
 
renderer.setAnimationLoop(() => composer.render());
// on resize: composer.setSize(w, h)
// and composer.setPixelRatio(renderer.getPixelRatio())

const rt = new WebGLRenderTarget(512, 512, {
  samples: 4,              // MSAA inside the target
  type: HalfFloatType,     // HDR headroom
});
const screen = new Mesh(
  new PlaneGeometry(2, 1),
  new MeshBasicMaterial({ map: rt.texture }),
);
 
renderer.setAnimationLoop(() => {
  screen.visible = false;          // avoid feedback
  renderer.setRenderTarget(rt);
  renderer.render(monitorScene, monitorCam);
  renderer.setRenderTarget(null);  // back to canvas
  screen.visible = true;
  renderer.render(scene, camera);
});

import * as THREE from "three/webgpu";
 
const renderer = new THREE.WebGPURenderer({
  antialias: true,
  // forceWebGL: true,  // test the WebGL2 backend
});
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
document.body.append(renderer.domElement);
 
await renderer.init();   // picks WebGPU or WebGL2
console.log(renderer.backend.isWebGPUBackend
  ? "WebGPU" : "WebGL2 fallback");
renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

import * as THREE from "three/webgpu";
import {
  color, mix, normalLocal, positionLocal, sin, time,
  uniform, uv,
} from "three/tsl";
 
const tint = uniform(new THREE.Color("#ff6a3d"));
const amp = uniform(0.05);
 
const mat = new THREE.MeshStandardNodeMaterial();
mat.colorNode = mix(color("#1b2a49"), tint, uv().y);
mat.positionNode = positionLocal.add(
  normalLocal.mul(
    sin(time.mul(2).add(positionLocal.y.mul(8))).mul(amp),
  ),
);
mat.roughnessNode = uv().x;  // 0..1 across the mesh
 
// runtime updates: no recompilation
tint.value.set("#3dffb0");
amp.value = 0.1;

import { Fn, If, float, uv, vec3, Discard } from "three/tsl";
 
// a reusable function: ring mask with discard
const ring = Fn(() => {
  const d = uv().sub(0.5).length();
  If(d.greaterThan(0.5), () => { Discard(); });
  const edge = d.smoothstep(0.35, 0.4).oneMinus()
    .mul(d.smoothstep(0.25, 0.3));
  return vec3(edge, edge.mul(0.6), float(0.2));
});
mat.colorNode = ring();

import * as THREE from "three/webgpu";
import { pass } from "three/tsl";
import { bloom } from
  "three/addons/tsl/display/BloomNode.js";
 
const pipeline = new THREE.RenderPipeline(renderer);
const scenePass = pass(scene, camera);
const sceneColor = scenePass.getTextureNode("output");
const glow = bloom(sceneColor, 1.0, 0.4, 0.85);
pipeline.outputNode = sceneColor.add(glow);
 
renderer.setAnimationLoop(() => pipeline.render());
// tweak live: glow.strength.value = 1.5

import * as THREE from "three/webgpu";
import {
  Fn, If, deltaTime, hash, instanceIndex, instancedArray,
  uniform, vec3,
} from "three/tsl";
 
const COUNT = 100_000;
const pos = instancedArray(COUNT, "vec3"); // GPU buffer
const vel = instancedArray(COUNT, "vec3");
const gravity = uniform(-9.8);
 
const init = Fn(() => {
  const p = pos.element(instanceIndex);
  p.assign(vec3(hash(instanceIndex).sub(0.5).mul(10),
    hash(instanceIndex.add(1)).mul(10),
    hash(instanceIndex.add(2)).sub(0.5).mul(10)));
})().compute(COUNT);
 
const step = Fn(() => {
  const p = pos.element(instanceIndex);
  const v = vel.element(instanceIndex);
  v.y.addAssign(gravity.mul(deltaTime));
  p.addAssign(v.mul(deltaTime));
  If(p.y.lessThan(0), () => {
    p.y.assign(0);
    v.y.assign(v.y.negate().mul(0.6)); // bounce
  });
})().compute(COUNT);

import { Color, MeshStandardMaterial } from "three";
 
export function withRim(
  mat: MeshStandardMaterial, rim = new Color("#6cf"),
  power = 2.5,
): MeshStandardMaterial {
  mat.onBeforeCompile = (s) => {
    s.uniforms.uRim = { value: rim };
    s.uniforms.uPow = { value: power };
    s.fragmentShader = s.fragmentShader
      .replace("#include <common>", `#include <common>
        uniform vec3 uRim; uniform float uPow;`)
      .replace("#include <emissivemap_fragment>",
        `#include <emissivemap_fragment>
        float f = pow(1.0 - saturate(dot(normal,
          normalize(vViewPosition))), uPow);
        totalEmissiveRadiance += uRim * f;`);
  };
  mat.customProgramCacheKey = () => `rim-${power}`;
  return mat;
}

import { ShaderPass } from
  "three/addons/postprocessing/ShaderPass.js";
 
const Vignette = {
  uniforms: {
    tDiffuse: { value: null },  // filled by the composer
    uStrength: { value: 0.5 },
  },
  vertexShader: /* glsl */ `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix
        * vec4(position, 1.0);
    }`,
  fragmentShader: /* glsl */ `
    uniform sampler2D tDiffuse;
    uniform float uStrength;
    varying vec2 vUv;
    void main() {
      vec4 c = texture2D(tDiffuse, vUv);
      float d = distance(vUv, vec2(0.5));
      c.rgb *= 1.0 - smoothstep(0.3, 0.8, d) * uStrength;
      gl_FragColor = c;
    }`,
};
const vignette = new ShaderPass(Vignette);
composer.insertPass(vignette, composer.passes.length - 1);

import * as THREE from "three/webgpu";
import { color, mix, sin, time, uv } from "three/tsl";
 
const renderer = new THREE.WebGPURenderer({
  antialias: true,
});
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
renderer.toneMapping = THREE.AgXToneMapping;
document.body.append(renderer.domElement);
await renderer.init();
 
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  50, innerWidth / innerHeight, 0.1, 50,
);
camera.position.set(0, 0, 3);
scene.add(new THREE.HemisphereLight("#fff", "#446", 2));
 
const mat = new THREE.MeshStandardNodeMaterial();
const pulse = sin(time.mul(3)).mul(0.5).add(0.5);
mat.colorNode = mix(color("#2244ff"), color("#ff4422"),
  uv().y.mul(pulse));
scene.add(new THREE.Mesh(
  new THREE.TorusKnotGeometry(0.6, 0.2, 128, 16), mat,
));
 
renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

import * as THREE from "three/webgpu";
import { color, uniform } from "three/tsl";
 
const mat = new THREE.SpriteNodeMaterial();
mat.positionNode = pos.toAttribute(); // per instance
mat.colorNode = color("#9cf");
mat.scaleNode = uniform(0.03);
mat.depthWrite = false;
 
const particles = new THREE.Sprite(mat);
particles.count = COUNT;        // instanced sprites
particles.frustumCulled = false; // bounds unknown
scene.add(particles);
 
await renderer.init();
renderer.compute(init);          // once
renderer.setAnimationLoop(() => {
  renderer.compute(step);        // simulate
  renderer.render(scene, camera);
});

import * as THREE from "three/webgpu";
import { emissive, mrt, output, pass } from "three/tsl";
import { bloom } from
  "three/addons/tsl/display/BloomNode.js";
 
const scenePass = pass(scene, camera);
scenePass.setMRT(mrt({ output, emissive }));
const base = scenePass.getTextureNode("output");
const glowSrc = scenePass.getTextureNode("emissive");
 
const pipeline = new THREE.RenderPipeline(renderer);
pipeline.outputNode = base.add(bloom(glowSrc, 2, 0.5, 0));
renderer.setAnimationLoop(() => pipeline.render());
// give glowing meshes emissive + emissiveIntensity > 1