THREE.JS / FOUNDATIONS 160

One asset, three paths.

Parse one SVG into vector meshes, load the same file as a browser raster, and render a deliberately limited vector reference with SVGRenderer. The matrix makes support boundaries visible instead of hiding them behind a single preview.

Initializing Preparing renderer

Preparing the WebGPU/WebGL2 scene, SVGLoader parse, raster texture, and SVGRenderer reference...

paths
-
shapes
-
strokes
-
triangles
-
raster
-
SVG DOM
-
draws
-
source
-
Feature probessame asset / separate contracts

Vector mode uses path.toShapes(), createFillMaterial(), createStrokeMaterial(), and pointsToStroke().

Support matrixprobing source
featurevector meshraster textureSVGRenderer
gradient fill---
gradient stroke---
filter---
text---
stroke---

The browser raster is the reference for source-level features; vector and SVGRenderer rows describe what this study actually constructs.

Specimen assetloading

A local SVG keeps the experiment deterministic and inspectable.

SVG feature specimen preview
svg-feature-specimen.svggradient, filter, text, fill, and stroke
SVGRenderer referencehigh

The inline SVG is rendered from simple ShapeGeometry only; it intentionally does not claim texture, filter, or text parity.

Ownership boundarylive
vector geometry/materials-
raster texture-
SVG DOM elements-

Rebuild replaces vector resources; raster reload replaces its Texture; release disposes all three lanes and removes the generated SVG DOM.

The scene compares the same local source, not identical pixels. Try ?forceWebGL=1 for the WebGL2 companion, then use Release resources to inspect cleanup.

THREE.JS FOUNDATIONS LAB