Clyune Component GalleryShader Blob · How it works & code
Deformed Sphere with ShaderMaterial.
Runtime logic
Visiting `/threejs/shader`, DemoHost lazy-loads `demos/shader-blob.js` (registry `mod: 'shader-blob'`) and calls `mountShaderBlob(host, { variant: 'shader' })`. `createThreeStage` sets up WebGLRenderer, Scene, PerspectiveCamera and OrbitControls, plus the info panel. The module registers its per-frame callback with `S.onFrame`. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; WebGL (three.js): WebGL through three.js WebGLRenderer; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21, three 0.170.0
Dependencies
three 0.170.0, three/addons/controls/OrbitControls.js 0.170.0, react 18.3.1
Imported APIs
createThreeStage — Shared three.js stage: WebGLRenderer, scene, perspective camera, OrbitControls, auto framing and render loop; THREE — three.js namespace; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; THREE.Color — Colour object; THREE.ShaderMaterial — Custom GLSL material; THREE.IcosahedronGeometry — Icosahedron geometry; THREE.Mesh — Mesh (geometry + material)
Source code
frontend/src/demos/shader-blob.js: shader-blob.js (L1-L59)
Code walkthrough
L4-11: `PARAMS_SPEC` (constant/table). L12-27: `DOC` (constant/table); math via `Math.sin`. L29-59: `mountShaderBlob` (function); creates three.js objects `Color`, `ShaderMaterial`, `IcosahedronGeometry`, `Mesh`; math via `Math.sin`; returns readouts `t`, `s`, `f`, `d0`, `verts`, `mix` to the info panel.
Principles
p′ = p + n · s · sin(uTime + f · p.y) Colour = mix (A, B, 0.5 + 0.5) · sin(3 · p.y + uTime)) Brightness = 0.5 + 0.5 · (N · L) Colour transceiver(s) Shader) It's a little program that runs straight on a graphic card. Vertex colorer To determine where each vertex will be drawn: here, each vertex follows the line of law n Roll out for a distance d，d Follow Height y 和时间变化，于是球面像水波一样鼓起、凹下。 Cardular Colours Determines the colour of each pixel: in the colour A 和 B 之间按正弦来回混合，再乘上简单的光照系数。 uTime Yes JavaScript Every frame passes to a graphic card uniform variable, all vertex shares.