GLSL is the dividing line. Given GLSL ShaderMaterial's foilMaterial(), WebGPURenderer logs THREE.NodeBuilder: Material "ShaderMaterial" is not compatible. and draws the cover with a default node material instead, so the page runs but the effect is gone (tested on the book from TSL Backends). Keep WebGLRenderer while a project depends on:
GLSL ShaderMaterials, onBeforeCompile patches or libraries built on them, including EffectComposer passes;
the most stable API: WebGLRenderer's surface barely moves, while WebGPURenderer deprecated renderAsync() in r181 and renamed PostProcessing to RenderPipeline in r183;
WebXR on today's headsets, where WebGPURenderer needs the experimental XRGPUBinding or its WebGL 2 backend.
For new work that needs compute or TSL, start on WebGPURenderer, which covers WebGL 2 browsers anyway; WebGLNodesHandler (TSL Backends) lets older projects adopt TSL before switching.
<!doctype html>
<style>
body { margin: 0; background: #f5f1e8; font: 12px system-ui, sans-serif; color: #263238; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; padding: 4px; }
canvas { display: block; }
ul { margin: 0; padding: 8px 8px 8px 24px; background: #fff; width: 220px; }
li { margin: 3px 0; }
</style>
<script type="importmap">
{ "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.186.1/examples/jsm/" } }
</script>
<div class="row" id="row">
<ul>
<li><b>GLSL ShaderMaterial</b>: the foil cover. WebGPURenderer logs "not compatible" and draws a default material.</li>
<li><b>EffectComposer passes</b>: the vignette. WebGPURenderer uses RenderPipeline and pass nodes instead.</li>
<li><b>onBeforeCompile</b> patches and libraries built on them.</li>
<li><b>WebXR</b> on today's headsets.</li>
</ul>
</div>
<script type="module">
import * as THREE from 'three';
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { CopyShader } from 'three/addons/shaders/CopyShader.js';
const BOOKS = [
{ title: 'The Quiet Harbor', author: 'Elena Marsh', color: '#1f5f8b', rating: 4.6, pages: 312 },
{ title: 'Patterns of the Deep Web', author: 'Ravi Menon', color: '#5b3f99', rating: 4.3, pages: 428 },
{ title: 'Salt and Saffron', author: 'Leila Haddad', color: '#e09a10', rating: 4.8, pages: 256 },
{ title: 'Small Steps to Big Summits', author: 'Tom Okafor', color: '#3f7d3a', rating: 4.1, pages: 198 },
{ title: "The Clockmaker's Paradox", author: 'Iris Vale', color: '#b5452f', rating: 4.5, pages: 344 },
{ title: 'Gardens in Glass', author: 'June Park', color: '#2a9d8f', rating: 4.4, pages: 176 },
];
// --- Book model: pages, two boards and a curved spine, merged with one group per part ---
const thickness = (book) => 0.05 + book.pages * 0.0003; // metres, from the page count
function bookGeometry(book, height, depth = 0.62) {
const t = thickness(book), b = 0.012, y = height / 2, z = -depth / 2;
const box = (w, h, d, x, zz = z) => new THREE.BoxGeometry(w, h, d).translate(x, y, zz);
const spine = new THREE.CylinderGeometry(t / 2, t / 2, height, 24, 1, true, -Math.PI / 2, Math.PI)
.scale(1, 1, 0.5).translate(0, y, 0);
return mergeGeometries([box(t - 2 * b, height - 0.03, depth - 0.02, 0, z + 0.01),
box(b, height, depth, (b - t) / 2), box(b, height, depth, (t - b) / 2), spine], true);
}
function paint(book, width, height, draw) {
const canvas = Object.assign(document.createElement('canvas'), { width, height });
const g = canvas.getContext('2d');
g.fillStyle = book.color; g.fillRect(0, 0, width, height);
g.fillStyle = '#ffffff';
draw(g);
const texture = new THREE.CanvasTexture(canvas);
texture.colorSpace = THREE.SRGBColorSpace;
return texture;
}
const coverArt = (book) => paint(book, 360, 520, (g) => {
g.font = 'bold 50px Georgia, serif';
book.title.split(' ').forEach((word, i) => g.fillText(word, 28, 84 + i * 56, 304));
g.font = 'italic 28px Georgia, serif';
g.fillText(`${book.author}, ${book.rating} / 5`, 28, 460);
});
const spineArt = (book) => paint(book, 128, 640, (g) => {
g.rotate(Math.PI / 2);
g.textBaseline = 'middle';
g.font = 'bold 44px Georgia, serif';
g.fillText(book.title, 24, -64, 440);
g.font = '28px Georgia, serif';
g.fillText(book.author.split(' ').at(-1), 490, -64, 130);
});
function createSpineBook(book, height = 0.9) {
const material = (options) => new THREE.MeshStandardMaterial({ roughness: 0.6, ...options });
const mesh = new THREE.Mesh(bookGeometry(book, height), [material({ color: '#f3ecdc' }),
material({ color: book.color }), material({ map: coverArt(book) }), material({ map: spineArt(book) })]);
return Object.assign(mesh, { name: book.title, userData: { book } });
}
// --- The arrangement ---
function createBookcase() {
const bookcase = new THREE.Group();
const plank = new THREE.Mesh(new THREE.BoxGeometry(3.5, 0.06, 0.8), new THREE.MeshStandardMaterial({ color: '#8d6e63' }));
plank.name = 'plank';
plank.position.set(0, -0.52, 0);
bookcase.add(plank);
const top = BOOKS.reduce((best, book) => (book.rating > best.rating ? book : best));
let x = -0.85;
BOOKS.forEach((book, i) => {
const mesh = createSpineBook(book, 0.84 + 0.05 * (i % 3)); // three trim heights
if (book === top) {
mesh.position.set(0.3, -0.49, 0.05);
mesh.rotation.y = -Math.PI / 2 + 0.35; // cover forward, turned a little
} else {
mesh.position.set(x + thickness(book) / 2, -0.49, 0.3); // running x plus half a thickness
x += thickness(book) + 0.005;
}
bookcase.add(mesh);
});
return bookcase;
}
// GLSL: this is the part that ties the page to WebGLRenderer
const foil = new THREE.ShaderMaterial({
uniforms: { map: { value: null }, time: { value: 0 } },
vertexShader: `varying vec2 vUv;
void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,
fragmentShader: `uniform sampler2D map; uniform float time; varying vec2 vUv;
void main() {
float band = smoothstep(0.12, 0.0, abs(vUv.x + vUv.y - fract(time * 0.25) * 2.5 + 0.2));
gl_FragColor = vec4(texture2D(map, vUv).rgb + band * vec3(0.9, 0.8, 0.5), 1.0);
#include <colorspace_fragment>
}`,
});
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(360, 260);
document.getElementById('row').prepend(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color('#fbf8f2');
const camera = new THREE.PerspectiveCamera(35, 360 / 260, 0.1, 50);
camera.position.set(0.2, 0.5, 1.7);
camera.lookAt(0, 0.42, 0);
scene.add(new THREE.HemisphereLight('#ffffff', '#8d6e63', 1.4));
const sun = new THREE.DirectionalLight('#ffffff', 2);
sun.position.set(1, 2, 3);
scene.add(sun);
const book = createSpineBook(BOOKS[2], 0.9);
foil.uniforms.map.value = book.material[2].map;
book.material[2] = foil;
book.rotation.y = -Math.PI / 2 + 0.35;
scene.add(book);
const vignette = new ShaderPass({
uniforms: { tDiffuse: { value: null } },
vertexShader: CopyShader.vertexShader,
fragmentShader: `uniform sampler2D tDiffuse; varying vec2 vUv;
void main() { vec2 d = vUv - 0.5; vec4 c = texture2D(tDiffuse, vUv); gl_FragColor = vec4(c.rgb * (1.0 - 1.4 * dot(d, d)), c.a); }`,
});
const composer = new EffectComposer(renderer);
[new RenderPass(scene, camera), vignette, new OutputPass()].forEach((p) => composer.addPass(p));
renderer.setAnimationLoop((t) => {
foil.uniforms.time.value = t / 1000;
composer.render();
});
</script>