Fix ShaderCanvas scroll-back rendering via canvas element replacement
Root cause: Chromium limits ~16 simultaneous WebGL contexts. When scrolling
through a feed of 20+ shader cards, older contexts get silently evicted.
Once a context is lost on a canvas element, getContext('webgl2') returns null
on that same element forever — even after loseContext()/restore cycles.
Solution: The ShaderCanvas component now renders a container div and creates
canvas elements imperatively. When re-entering viewport:
1. Check if existing GL context is still alive (isContextLost)
2. If alive: just restart the animation loop
3. If dead: remove the old canvas, create a fresh DOM element, get a new
context, recompile, and start rendering
This means scrolling down creates new contexts and scrolling back up
replaces dead canvases with fresh ones. At any given time only ~9 visible
canvases hold active contexts — well within Chrome's limit.
Also: 200px rootMargin on IntersectionObserver pre-compiles shaders
before cards enter viewport for smoother scroll experience.
This commit is contained in:
John Lightner
parent
164dda4760
commit
c9967a17a0
1 changed files with 179 additions and 225 deletions
|
|
@ -1,14 +1,11 @@
|
||||||
/**
|
/**
|
||||||
* ShaderCanvas — Core WebGL component for rendering GLSL shaders.
|
* ShaderCanvas — WebGL GLSL renderer with viewport-aware lifecycle.
|
||||||
*
|
*
|
||||||
* Shadertoy-compatible: accepts mainImage(out vec4 fragColor, in vec2 fragCoord)
|
* Chromium limits ~16 simultaneous WebGL contexts. When a context is lost
|
||||||
* Injects uniforms: iTime, iResolution, iMouse
|
* (browser evicts it silently), you can't re-create it on the same canvas.
|
||||||
*
|
*
|
||||||
* Features:
|
* Solution: when re-entering viewport, if the context is dead, replace the
|
||||||
* - Visibility-aware: only renders when in viewport (IntersectionObserver)
|
* canvas DOM element with a fresh one. A new canvas gets a new context.
|
||||||
* - Graceful WebGL context failure handling
|
|
||||||
* - Debounced recompilation on code change
|
|
||||||
* - Mouse tracking for iMouse uniform
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useRef, useEffect, useCallback, useState } from 'react';
|
import { useRef, useEffect, useCallback, useState } from 'react';
|
||||||
|
|
@ -23,44 +20,23 @@ interface ShaderCanvasProps {
|
||||||
onCompileSuccess?: () => void;
|
onCompileSuccess?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const VERTEX_SHADER = `#version 300 es
|
const VERT = `#version 300 es
|
||||||
in vec4 a_position;
|
in vec4 a_position;
|
||||||
void main() { gl_Position = a_position; }
|
void main() { gl_Position = a_position; }`;
|
||||||
`;
|
|
||||||
|
|
||||||
function buildFragmentShader(userCode: string): string {
|
function buildFrag(userCode: string): string {
|
||||||
const prefix = `#version 300 es
|
const pfx = `#version 300 es
|
||||||
precision highp float;
|
precision highp float;
|
||||||
uniform float iTime;
|
uniform float iTime;
|
||||||
uniform vec3 iResolution;
|
uniform vec3 iResolution;
|
||||||
uniform vec4 iMouse;
|
uniform vec4 iMouse;
|
||||||
out vec4 outColor;
|
out vec4 outColor;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
if (userCode.includes('mainImage')) {
|
if (userCode.includes('mainImage')) {
|
||||||
return prefix + userCode + `
|
return pfx + userCode + `
|
||||||
void main() {
|
void main() { vec4 c; mainImage(c, gl_FragCoord.xy); outColor = c; }`;
|
||||||
vec4 col;
|
|
||||||
mainImage(col, gl_FragCoord.xy);
|
|
||||||
outColor = col;
|
|
||||||
}`;
|
|
||||||
}
|
}
|
||||||
|
return pfx + userCode.replace(/gl_FragColor/g, 'outColor');
|
||||||
// If user has void main(), replace gl_FragColor with outColor
|
|
||||||
return prefix + userCode.replace(/gl_FragColor/g, 'outColor');
|
|
||||||
}
|
|
||||||
|
|
||||||
function createShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {
|
|
||||||
const shader = gl.createShader(type);
|
|
||||||
if (!shader) return null;
|
|
||||||
gl.shaderSource(shader, source);
|
|
||||||
gl.compileShader(shader);
|
|
||||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
||||||
const info = gl.getShaderInfoLog(shader) || 'Unknown error';
|
|
||||||
gl.deleteShader(shader);
|
|
||||||
throw new Error(info);
|
|
||||||
}
|
|
||||||
return shader;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ShaderCanvas({
|
export default function ShaderCanvas({
|
||||||
|
|
@ -72,235 +48,213 @@ export default function ShaderCanvas({
|
||||||
onError,
|
onError,
|
||||||
onCompileSuccess,
|
onCompileSuccess,
|
||||||
}: ShaderCanvasProps) {
|
}: ShaderCanvasProps) {
|
||||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
const glRef = useRef<WebGL2RenderingContext | null>(null);
|
const stateRef = useRef({
|
||||||
const programRef = useRef<WebGLProgram | null>(null);
|
canvas: null as HTMLCanvasElement | null,
|
||||||
const animRef = useRef<number>(0);
|
gl: null as WebGL2RenderingContext | null,
|
||||||
const startTimeRef = useRef<number>(0);
|
prog: null as WebGLProgram | null,
|
||||||
const mouseRef = useRef<[number, number, number, number]>([0, 0, 0, 0]);
|
anim: 0,
|
||||||
const isVisibleRef = useRef(false);
|
t0: 0,
|
||||||
const [glFailed, setGlFailed] = useState(false);
|
visible: false,
|
||||||
|
running: false,
|
||||||
const cleanup = useCallback(() => {
|
mouse: [0, 0, 0, 0] as [number, number, number, number],
|
||||||
if (animRef.current) {
|
|
||||||
cancelAnimationFrame(animRef.current);
|
|
||||||
animRef.current = 0;
|
|
||||||
}
|
|
||||||
const gl = glRef.current;
|
|
||||||
if (gl && programRef.current) {
|
|
||||||
gl.deleteProgram(programRef.current);
|
|
||||||
programRef.current = null;
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const compile = useCallback(() => {
|
|
||||||
const canvas = canvasRef.current;
|
|
||||||
if (!canvas || !code.trim()) return;
|
|
||||||
|
|
||||||
// Don't compile if not visible (saves WebGL contexts)
|
|
||||||
if (!isVisibleRef.current && animate) return;
|
|
||||||
|
|
||||||
let gl = glRef.current;
|
|
||||||
if (!gl) {
|
|
||||||
gl = canvas.getContext('webgl2', {
|
|
||||||
antialias: false,
|
|
||||||
preserveDrawingBuffer: false,
|
|
||||||
powerPreference: 'low-power',
|
|
||||||
});
|
});
|
||||||
if (!gl) {
|
const codeRef = useRef(code);
|
||||||
setGlFailed(true);
|
codeRef.current = code;
|
||||||
onError?.('WebGL2 not available — too many active contexts');
|
|
||||||
return;
|
// ── Create a fresh canvas element ──────────────────────
|
||||||
}
|
const createCanvas = useCallback(() => {
|
||||||
glRef.current = gl;
|
const container = containerRef.current;
|
||||||
setGlFailed(false);
|
if (!container) return null;
|
||||||
|
const s = stateRef.current;
|
||||||
|
|
||||||
|
// Remove old canvas
|
||||||
|
if (s.canvas && s.canvas.parentNode) {
|
||||||
|
if (s.anim) { cancelAnimationFrame(s.anim); s.anim = 0; }
|
||||||
|
s.running = false;
|
||||||
|
s.prog = null;
|
||||||
|
s.gl = null;
|
||||||
|
s.canvas.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle context loss
|
const canvas = document.createElement('canvas');
|
||||||
canvas.addEventListener('webglcontextlost', (e) => {
|
canvas.className = 'block w-full h-full';
|
||||||
e.preventDefault();
|
canvas.width = container.clientWidth || width || 640;
|
||||||
cleanup();
|
canvas.height = container.clientHeight || height || 360;
|
||||||
glRef.current = null;
|
canvas.addEventListener('mousemove', (e) => {
|
||||||
setGlFailed(true);
|
const r = canvas.getBoundingClientRect();
|
||||||
}, { once: true });
|
s.mouse = [e.clientX - r.left, r.height - (e.clientY - r.top), 0, 0];
|
||||||
|
});
|
||||||
|
container.appendChild(canvas);
|
||||||
|
s.canvas = canvas;
|
||||||
|
return canvas;
|
||||||
|
}, [width, height]);
|
||||||
|
|
||||||
canvas.addEventListener('webglcontextrestored', () => {
|
// ── Compile shader ─────────────────────────────────────
|
||||||
setGlFailed(false);
|
const compile = useCallback((canvas: HTMLCanvasElement) => {
|
||||||
glRef.current = null; // Will be re-created on next compile
|
const s = stateRef.current;
|
||||||
compile();
|
|
||||||
}, { once: true });
|
|
||||||
|
|
||||||
// Clean previous program
|
let gl = s.gl;
|
||||||
if (programRef.current) {
|
if (!gl || gl.isContextLost()) {
|
||||||
gl.deleteProgram(programRef.current);
|
gl = canvas.getContext('webgl2', { antialias: false, powerPreference: 'low-power' });
|
||||||
programRef.current = null;
|
if (!gl) return false;
|
||||||
|
s.gl = gl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (s.prog) { gl.deleteProgram(s.prog); s.prog = null; }
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const vs = createShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
|
const vs = gl.createShader(gl.VERTEX_SHADER)!;
|
||||||
const fs = createShader(gl, gl.FRAGMENT_SHADER, buildFragmentShader(code));
|
gl.shaderSource(vs, VERT);
|
||||||
if (!vs || !fs) throw new Error('Failed to create shaders');
|
gl.compileShader(vs);
|
||||||
|
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
|
||||||
|
throw new Error(gl.getShaderInfoLog(vs) || 'VS error');
|
||||||
|
|
||||||
const program = gl.createProgram()!;
|
const fs = gl.createShader(gl.FRAGMENT_SHADER)!;
|
||||||
gl.attachShader(program, vs);
|
gl.shaderSource(fs, buildFrag(codeRef.current));
|
||||||
gl.attachShader(program, fs);
|
gl.compileShader(fs);
|
||||||
gl.linkProgram(program);
|
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
|
||||||
|
const e = gl.getShaderInfoLog(fs) || 'FS error';
|
||||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
gl.deleteShader(vs); gl.deleteShader(fs); throw new Error(e);
|
||||||
const err = gl.getProgramInfoLog(program) || 'Link failed';
|
|
||||||
gl.deleteProgram(program);
|
|
||||||
throw new Error(err);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clean up individual shaders
|
const p = gl.createProgram()!;
|
||||||
gl.deleteShader(vs);
|
gl.attachShader(p, vs); gl.attachShader(p, fs);
|
||||||
gl.deleteShader(fs);
|
gl.linkProgram(p);
|
||||||
|
gl.deleteShader(vs); gl.deleteShader(fs);
|
||||||
|
if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
|
||||||
|
const e = gl.getProgramInfoLog(p) || 'Link error';
|
||||||
|
gl.deleteProgram(p); throw new Error(e);
|
||||||
|
}
|
||||||
|
|
||||||
programRef.current = program;
|
s.prog = p;
|
||||||
gl.useProgram(program);
|
gl.useProgram(p);
|
||||||
|
|
||||||
// Set up fullscreen quad
|
|
||||||
const buf = gl.createBuffer();
|
const buf = gl.createBuffer();
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
|
||||||
const posLoc = gl.getAttribLocation(program, 'a_position');
|
const loc = gl.getAttribLocation(p, 'a_position');
|
||||||
gl.enableVertexAttribArray(posLoc);
|
gl.enableVertexAttribArray(loc);
|
||||||
gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
|
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
|
||||||
|
|
||||||
startTimeRef.current = performance.now();
|
s.t0 = performance.now();
|
||||||
onCompileSuccess?.();
|
onCompileSuccess?.();
|
||||||
onError?.('');
|
onError?.('');
|
||||||
|
return true;
|
||||||
// Start render loop
|
} catch (e: any) {
|
||||||
const render = () => {
|
onError?.(e.message);
|
||||||
if (!programRef.current || !glRef.current) return;
|
return false;
|
||||||
// Pause rendering when not visible
|
|
||||||
if (!isVisibleRef.current && animate) {
|
|
||||||
animRef.current = requestAnimationFrame(render);
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
}, [onError, onCompileSuccess]);
|
||||||
|
|
||||||
const gl = glRef.current;
|
// ── Animation loop ─────────────────────────────────────
|
||||||
const w = canvas.width;
|
const startLoop = useCallback(() => {
|
||||||
const h = canvas.height;
|
const s = stateRef.current;
|
||||||
const t = (performance.now() - startTimeRef.current) / 1000;
|
if (s.running || !s.gl || !s.prog || !s.canvas) return;
|
||||||
|
s.running = true;
|
||||||
|
|
||||||
|
const gl = s.gl;
|
||||||
|
const prog = s.prog;
|
||||||
|
const canvas = s.canvas;
|
||||||
|
|
||||||
|
const tick = () => {
|
||||||
|
if (!s.visible && animate) { s.running = false; s.anim = 0; return; }
|
||||||
|
if (!s.gl || !s.prog || gl.isContextLost()) { s.running = false; s.anim = 0; return; }
|
||||||
|
|
||||||
|
const w = canvas.width, h = canvas.height;
|
||||||
gl.viewport(0, 0, w, h);
|
gl.viewport(0, 0, w, h);
|
||||||
|
const t = (performance.now() - s.t0) / 1000;
|
||||||
const uTime = gl.getUniformLocation(programRef.current, 'iTime');
|
const uT = gl.getUniformLocation(prog, 'iTime');
|
||||||
const uRes = gl.getUniformLocation(programRef.current, 'iResolution');
|
const uR = gl.getUniformLocation(prog, 'iResolution');
|
||||||
const uMouse = gl.getUniformLocation(programRef.current, 'iMouse');
|
const uM = gl.getUniformLocation(prog, 'iMouse');
|
||||||
|
if (uT) gl.uniform1f(uT, t);
|
||||||
if (uTime) gl.uniform1f(uTime, t);
|
if (uR) gl.uniform3f(uR, w, h, 1);
|
||||||
if (uRes) gl.uniform3f(uRes, w, h, 1.0);
|
if (uM) gl.uniform4f(uM, ...s.mouse);
|
||||||
if (uMouse) gl.uniform4f(uMouse, ...mouseRef.current);
|
|
||||||
|
|
||||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
||||||
|
|
||||||
if (animate) {
|
s.anim = animate ? requestAnimationFrame(tick) : 0;
|
||||||
animRef.current = requestAnimationFrame(render);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
tick();
|
||||||
|
}, [animate]);
|
||||||
|
|
||||||
if (animRef.current) cancelAnimationFrame(animRef.current);
|
// ── Full setup: new canvas → compile → loop ────────────
|
||||||
render();
|
const fullSetup = useCallback(() => {
|
||||||
|
const canvas = createCanvas();
|
||||||
} catch (e: any) {
|
|
||||||
onError?.(e.message || 'Compilation failed');
|
|
||||||
}
|
|
||||||
}, [code, animate, onError, onCompileSuccess, cleanup]);
|
|
||||||
|
|
||||||
// Visibility observer — only initialize WebGL when in viewport
|
|
||||||
useEffect(() => {
|
|
||||||
const canvas = canvasRef.current;
|
|
||||||
if (!canvas) return;
|
if (!canvas) return;
|
||||||
|
if (compile(canvas)) {
|
||||||
|
startLoop();
|
||||||
|
}
|
||||||
|
}, [createCanvas, compile, startLoop]);
|
||||||
|
|
||||||
|
// ── Visibility observer ────────────────────────────────
|
||||||
|
useEffect(() => {
|
||||||
|
const container = containerRef.current;
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
(entries) => {
|
([entry]) => {
|
||||||
const wasVisible = isVisibleRef.current;
|
const s = stateRef.current;
|
||||||
isVisibleRef.current = entries[0]?.isIntersecting ?? false;
|
const was = s.visible;
|
||||||
|
s.visible = entry.isIntersecting;
|
||||||
|
|
||||||
// When becoming visible for the first time, compile
|
if (s.visible && !was) {
|
||||||
if (isVisibleRef.current && !wasVisible) {
|
// Entering viewport
|
||||||
if (!programRef.current) {
|
if (s.gl && !s.gl.isContextLost() && s.prog) {
|
||||||
compile();
|
// Context still alive — just restart loop
|
||||||
}
|
startLoop();
|
||||||
}
|
} else {
|
||||||
|
// Context lost or never created — fresh canvas
|
||||||
// When going out of viewport, release the WebGL context to free resources
|
fullSetup();
|
||||||
if (!isVisibleRef.current && wasVisible && animate) {
|
|
||||||
cleanup();
|
|
||||||
if (glRef.current) {
|
|
||||||
const ext = glRef.current.getExtension('WEBGL_lose_context');
|
|
||||||
ext?.loseContext();
|
|
||||||
glRef.current = null;
|
|
||||||
}
|
}
|
||||||
|
} else if (!s.visible && was) {
|
||||||
|
// Leaving viewport — stop loop (context stays on canvas)
|
||||||
|
if (s.anim) { cancelAnimationFrame(s.anim); s.anim = 0; }
|
||||||
|
s.running = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ threshold: 0.1 },
|
{ threshold: 0.01, rootMargin: '200px' },
|
||||||
);
|
);
|
||||||
|
|
||||||
observer.observe(canvas);
|
observer.observe(container);
|
||||||
return () => observer.disconnect();
|
|
||||||
}, [compile, cleanup, animate]);
|
|
||||||
|
|
||||||
// Recompile when code changes (for editor use)
|
return () => {
|
||||||
|
observer.disconnect();
|
||||||
|
const s = stateRef.current;
|
||||||
|
if (s.anim) cancelAnimationFrame(s.anim);
|
||||||
|
s.running = false;
|
||||||
|
};
|
||||||
|
}, [fullSetup, startLoop]);
|
||||||
|
|
||||||
|
// ── Code change (editor) ───────────────────────────────
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isVisibleRef.current || !animate) {
|
const s = stateRef.current;
|
||||||
compile();
|
if (s.visible && s.canvas) {
|
||||||
|
if (s.anim) { cancelAnimationFrame(s.anim); s.anim = 0; }
|
||||||
|
s.running = false;
|
||||||
|
if (compile(s.canvas)) startLoop();
|
||||||
}
|
}
|
||||||
return cleanup;
|
|
||||||
}, [code]); // eslint-disable-line react-hooks/exhaustive-deps
|
}, [code]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||||
|
|
||||||
// Resize handling
|
// ── Container resize → canvas resize ───────────────────
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const canvas = canvasRef.current;
|
const container = containerRef.current;
|
||||||
if (!canvas) return;
|
if (!container) return;
|
||||||
|
const ro = new ResizeObserver(([e]) => {
|
||||||
const observer = new ResizeObserver((entries) => {
|
const s = stateRef.current;
|
||||||
for (const entry of entries) {
|
if (!s.canvas) return;
|
||||||
const w = entry.contentRect.width;
|
const w = Math.floor(e.contentRect.width);
|
||||||
const h = entry.contentRect.height;
|
const h = Math.floor(e.contentRect.height);
|
||||||
if (w > 0 && h > 0) {
|
if (w > 0 && h > 0) { s.canvas.width = w; s.canvas.height = h; }
|
||||||
canvas.width = Math.floor(w);
|
|
||||||
canvas.height = Math.floor(h);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
ro.observe(container);
|
||||||
observer.observe(canvas);
|
return () => ro.disconnect();
|
||||||
return () => observer.disconnect();
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Mouse tracking
|
|
||||||
const handleMouseMove = (e: React.MouseEvent) => {
|
|
||||||
const rect = canvasRef.current?.getBoundingClientRect();
|
|
||||||
if (!rect) return;
|
|
||||||
mouseRef.current = [
|
|
||||||
e.clientX - rect.left,
|
|
||||||
rect.height - (e.clientY - rect.top),
|
|
||||||
mouseRef.current[2],
|
|
||||||
mouseRef.current[3],
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`relative ${className}`} style={{ width: width ? `${width}px` : '100%', height: height ? `${height}px` : '100%' }}>
|
<div
|
||||||
<canvas
|
ref={containerRef}
|
||||||
ref={canvasRef}
|
className={className}
|
||||||
width={width || 640}
|
style={{ width: width ? `${width}px` : '100%', height: height ? `${height}px` : '100%' }}
|
||||||
height={height || 360}
|
|
||||||
className="block w-full h-full"
|
|
||||||
onMouseMove={handleMouseMove}
|
|
||||||
/>
|
/>
|
||||||
{glFailed && (
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center bg-surface-2">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl mb-1">⬡</div>
|
|
||||||
<div className="text-xs text-gray-500">Scroll to load</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue