STYLEGALLERY / STUDIESCODE + CURIOSITY / 03INDEPENDENT EXAMPLE

03 / Material passes & compositing

One object. Two truths.

A knotted surface is drawn twice: once as a lit solid and once as a line network. A soft moving mask decides which rendering reaches the final image.

SOLID TARGETWIRE TARGET× DIRECTIONAL MASK
What this study teaches

An independently generated torus knot is projected once into two offscreen 2D render targets. Solid and wire passes share geometry and camera; a directional alpha mask composites their outputs. This browser-canvas study isolates the article’s render-target principle without claiming its Three.js shader implementation.

Independent implementation informed by “Building a Blended Material Shader in WebGL with Solid.js”, Nathan Nye, Codrops. This is newly authored code and artwork, not a recovered original project. Uses independently authored Canvas 2D render targets and a compositing mask rather than the original Three.js project. No original source or assets are included.