Find your next
experiment.

Procedural TSL surface with a GLSL fallback.

Patch a standard material with virtual texture offsets, noise, and dissolve uniforms.

Parse a standard_surface document into a WebGPU node material.

Procedural noise nodes drive color, roughness, and relief.

Local tiledimage maps feed albedo and roughness inputs.

Recipe matrix for physical standard_surface inputs.

Explicitly unpack PBR channels and tangent-space normals.

Compare MaterialX graph inputs with native sampler controls.

Compare TextureNode bias, gradients, and channel gathers.

Decode universal payloads and inspect runtime texture classes.

Compare array layers, volume slices, and cube faces.

Turn compressed KTX2 data into array/cube textures and layered render targets.

Read MRT color/normal slices back from a layered target with array depth.

Sample a real depth attachment and compare multisample resolve settings.

Estimate and allocate MRT/depth/MSAA memory under live backend limits.

Encode sampled depth, copy it asynchronously, and compare GPU versus CPU previews.

Copy a live framebuffer into a screen-space texture overlay.

Render known float values, display the target, and read one RGBA pixel back.

Compare standard, reversed, and logarithmic renderer depth configuration.

Compare native WebGPU logarithmic depth with an explicit WebGL2 renderer-option reference.

Inspect bones, clips, facial weights, and glTF deformation.

Compare shared animation state with independent mixers.

Compare crossfade, weighted, and additive motion layers.

Build state transitions, masked layers, and a managed clip cache.

Turn mixer events and action timing into an intent-gated locomotion controller.

Separate visual pose, authored movement, and an accumulated extracted motion channel.

Scrub normalized cycle phase, infer foot contact, and phase-lock Walk + Run.

Bound orientation turns to input and turn a normalized schedule into footstep events.

Compare shared skinning, independent clocks, and InstancedMesh proxies.

Compare shared, cloned, and unique material/texture lifecycles.

Compare TSL graph ownership and compileAsync prebuild versus first-render compilation.

Compare material-owned LightsNode lists with scene-wide and DynamicLighting contracts.

Compare material-owned shadow casting, receiving, and sample-position policies.

Carry RGB and alpha payloads through NodeMaterial shadow maps.

Register a custom point-light node and observe point-shadow ownership.

Wrap native Basic, PCF, and VSM filtering with live node uniforms.

Own a custom depth target and make shadow resource lifecycle visible.

Inspect the native shadow depth texture through the official HUD helper.

Accumulate jittered lighting into packed UV1 ping-pong buffers.

Adapt blocker search, penumbra estimation, and Poisson filtering to the current raw-depth shader branch.

Move blocker search and receiver filtering into a backend-portable NodeMaterial graph.

Measure native filter, map-resolution, caster-count, and update-policy tradeoffs.

Compare directional, point-light, and cascaded shadow-view budgets.

Measure timestamped GPU work against CPU submission and cached shadow updates.

Inspect nested CSM and point-light shadow renders with per-pass timing.

Compare PassNode graphs with EffectComposer's ordered ping-pong chain.

Name, preview, and asynchronously read back MRT color attachments.

Compare multisampled color resolves with texture-indexed readback.

Compare target precision, color space, and typed-array readback.

Update six cube views and read individual faces by index.

Compare raw cube sampling with roughness-aware prefiltered radiance.

Trace typed-array payloads from equirectangular pixels into PMREM.

Load, prefilter, rotate, and release real environment assets.

Compare PMREM, envMap, GroundedSkybox, and diffuse light probes.

Tune Sky/SkyMesh, capture a sun-safe cubemap, and bake PMREM lighting.

Compare Scene.environment, material.envNode, and classic envMap PMREM paths.

Author a shared TSL surface through explicit material slots.

Compare context overrides, native output edits, and full fragment replacement.

Compare physical and toon lighting models with selective light lists.

Replace the lighting rule with a custom LightingModel and context.

Compare direct-only and indirect-aware lighting models with AO context.

Trace environment radiance, probe irradiance, and baked lightmaps through custom lighting.

Compare real files, scene PMREM, and CubeCamera captures through one lighting context.

Interpolate eight captured SH probes through one cross-backend LightProbe.

Inspect native LightProbeGrid packing, helper topology, rebakes, and GPU ownership.

Blend captured SH fields with explicit distance falloff and refresh ownership.

Trace fallback, estimated, environment, and session-end ownership.

Compose ReflectorNode, instanced TSL cubes, and a postprocess pipeline.

Use reflected depth to attenuate distant floor reflections.

Choose reflection quality from target, MSAA, bounce, and budget costs.

Use sustained renderer timing to move through a reversible quality ladder.

Inject controlled actor load and observe quality downshift and recovery.

Run fixed load and quality rows, then compare WebGPU with the forced WebGL2 companion.

Combine CSS2D labels, CSS3D cards/sprites, and a vector SVG companion around one scene.

Load local SVG paths, build fill/stroke meshes, and share pointer/XR selection events.

Compare SVGLoader meshes, a browser-raster Texture, and SVGRenderer's simple vector DOM boundary.

Study storage-buffer compute, nearest-neighbor links, and a bloom render pipeline.

Sort packed cell keys and compare GPU candidate links with a CPU uniform-grid proxy.

Accumulate particle occupancy into atomic GPU cell counters and compare a CPU histogram.

Atomically append particle IDs into bounded buckets, then scan staged nearest candidates.

Compact active particle IDs and feed GPU-generated workgroup counts into the next kernel.

Compare live HTMLTexture, VR-ready HTMLMesh snapshots, and SVGLoader feature coverage.

Compare direct DOM paint invalidation, HTMLMesh snapshots, and a CanvasTexture fallback.

Map a source clip onto a renamed target skeleton.

Drive a 49-bone Soldier with Michelle's 65-bone dance.

Exercise native WebGPU sculpting, cursor feedback, and GLB export with a WebGL2 reference lane.

Run the actual progressive WebGLPathTracer with BVH generation, HDR environment lighting, capture, and teardown.

Bake Flamingo or Parrot morph frames into a texture and steer a 64×64 GPU flock.

Load the official car, replace named paint/detail/glass parts, reflect a Venice HDR, and release the scene.

Compare names dictionaries with getBoneName callbacks.

Validate missing roles and tune documented motion policies.

Correct rest-pose orientation, then solve a hand target.

Curves, tubes, holes, extrusion, and point clouds.

Connected curves, parametric surfaces, and fat lines.

LOD, sprites, fog, layers, and scene helpers.

Drive thousands of camera-facing sprites from TSL instance data.

Animate instanced geometry around sampled mathematical paths.

Compose WebGL geometry, CSS3D cards, and CSS2D labels with one camera.

Compose atom sprites and bond objects from a Three.js DOM scene graph.

Frame DOM planes with orthographic projection, zoom, and view offsets.

Transition metadata cards between table, sphere, helix, and grid layouts.

Mirror DOM transforms in WebGL wireframes with shared camera framing.

Compare native wireframe edges with a barycentric thickness shader.

Layer textured particles with additive blending and texture policy controls.

Route independent card and text-wave views through one shared WebGL canvas.

Meshes, InstancedMesh, BatchedMesh, culling, and picking.

Distance-based detail selection with shared geometry.

Per-object shader state through one shared node material.

Sprite-sheet tiles and multi-camera compositions.

Three sub-cameras with indexed visibility and picking.

Switch perspective and orthographic cameras in one rig with an active/overview split view.

SVG atlas rendering with worker-owned indexing.

AR hit-test and controller interaction paths.

Plane detection, depth sensing, and desktop simulation.

VR button, controller models, and desktop fallback.

Trace target-ray selection, controller attach/detach, and desktop synthetic event parity.

Map controller impacts to native-or-fallback haptic pulse contracts.

Compare boxes, spheres, and mesh hand-model profiles over tracked joints.

Trace fingertip intersection, button penetration, recovery, actions, and the required hand-tracking seam.

Trace pinch spawn, right-hand attachment/release, and same-object two-hand scaling.

Inspect the pinned two-hand, controller-grip, pointer-ray, and hand-tracking setup.

Trace viewer-space hit-test setup, matrix reticle updates, and select-driven cylinder placement.

Trace camera-bearing viewer views, camera-texture binding, and the explicit desktop adapter.

Trace required plane detection, native XRPlanes ownership, and deterministic desktop surface lifecycle.

Paint dynamic TubePainter strokes from synthetic controller paths.

Forward synthetic XR controller gestures into TransformControls.

Drag shader objects through a procedural depth-array occlusion path.

Grow an organic implicit surface from controller field points.

Compare Rapier, Jolt, and Ammo through one indexed-instancing contract.

Trace heightfields, explicit velocity, impulses, and body removal/re-add.

Inspect typed constraints, motors, limits, contacts, and detach/re-attach lifecycle.

Query collision-aware capsule movement through stairs, slopes, and dynamic crates.

Keep a visible sampled grid and fixed Rapier heightfield aligned through rebuilds.

Drive 128 indexed rigid bodies through two shared InstancedMesh buffers.

Measure shared instance buffers and indexed body batches from 128 to 800.

Move the Rapier world into a worker and measure transform handoff.

Separate collision filtering, solver filtering, hooks, events, and contact graphs.

Cut a solid while separating material, renderer, shadow, and stencil policies.

Capture a scene through paired surfaces with an off-axis portal camera.

Compare threshold clipping policies and bounded recursive portal capture.

Mask rectangular portal textures through an ellipse with the raw stencil contract.

Confine ordered ShaderPass effects to a stencil-defined scene region.

Express regional postprocessing as a WebGPU TSL graph with an honest WebGL2 fallback.

Make current and previous PassNode frames visible through an official afterimage graph.

Read current and previous beauty, normal, and velocity attachments from one WebGPU PassNode.

Downsize a WebGPU pass and keep depth/normal edges readable.

Snap vertices, reduce resolution, and compose a PS1-style TSL pipeline.

Sample red, green, and blue through separate radial UV offsets.

Replace BloomNode’s high pass with a cinematic horizontal flare.

Route a named MRT mask into BloomNode for object-level glow.

Feed a material’s emissive property into a bandwidth-aware MRT bloom.

Inspect refraction, volume thickness, attenuation, and node-backed PBR inputs.

Filter already-rendered content through a transparent NodeMaterial surface.

Copy the current framebuffer, generate mips, and pin a transparent sample level.

Read the previous depth attachment as raw, linear, or color-tinted data.

Bend the previous viewport through a normal-driven lens with safe UVs.

Render an offscreen chamber view through the native Refractor addon and DuDv shader.

Move a vertex-stage clip plane through the installed WEBGL_clip_cull_distance extension.

Visualize bounded ray origins, near/far segments, and capsule hit points.

Combine linear depth, shifted depth probes, and viewport refraction in one water graph.

Map material roughness to bicubic mip sampling from one ReflectorNode capture.

Depth-mask a ReflectorNode and blur its texture through randomized TSL taps.

Compare a thin reflective coat, coat roughness, and independent coat normals.

Trace the native node-material coating lobe and its explicit WebGL2 reference.

Translate lumens, lux, distance, and tone mapping into a measurable lighting stage.

Compare angular fixture profiles against a direct spotlight fallback.

Shape soft window-like sources with emitter size, power, and LTC integration.

Probe current-only SunLight APIs against a labeled directional-light shadow reference.

Trace official sunlight direction, sky, PMREM, shadow, and instanced-avenue ownership through the installed fallback.

Make rectangular sources visible through a layered volume pass and denoised composition.

Mix filtered panoramas and apply procedural/color controls through one environment graph.

Blend two deterministic six-face CubeTextures through a native TSL reflection graph.

Apply typed color-grading volumes through a RenderPipeline output node.

Grade a final WebGL2 image through EffectComposer and native LUTPass.

Turn native WebGL2 composer output into a resolution-aware color pattern.

Inspect native depth/normal targets and screen-space ambient occlusion output.

Capture opaque geometry into a G-buffer, reconstruct lighting, then composite transparency.

Decode mainImage GLSL into live TSL nodes and blend it on a full-screen surface.

Transform a waveform in a TSL storage buffer, read it back, visualize it, and play the result.

Drive NodeMaterial masks and caster shadows from a local-space angular interval.

Compute per-instance point widths in storage, then render them through one camera-facing Sprite.

Compose day/night maps, world-space sun response, bump detail, roughness, and a Fresnel atmosphere.

Turn layered TSL noise, rings, grain colors, and physical clearcoat into a reusable material.

Distribute and animate thousands of camera-facing stars through range, trigonometry, time, and color nodes.

Shape two animated flame sprites through billboarding, noise textures, UV deformation, gradient lookup, and alpha.

Twist a procedural cylinder through radial UVs, skewed noise, position deformation, and bloom.

Let three attractors write storage-backed particle positions and velocities into one instanced sprite field.

Fade smoke sprites against opaque geometry through viewport depth and a contrast-shaped intersection curve.

Raymarch point-light shadows, preserve depth edges through bilateral blur, and composite the result.

Track selected objects through depth-aware visible and hidden edge masks.

Ray-march a procedural 3D cloud field and preserve depth edges while upsampling.

Extract emissive MRT energy, bloom it, and orbit procedural ghost flares through the image.

Turn local height, normal, AO, and environment maps into a measurable PBR surface.

Update one shared material with object-scoped color state before every draw.

Make a front-facing physical-lighting response visible on a generated reflective band.

Run storage-buffer flocking kernels before an instanced vertex graph.

Turn an animated glTF rig into a speed-colored point field.

Drive a compressed glTF face with inspectable blend-shape weights.

Turn native paths and holes into filled, extruded, line, and point representations.

Travel native profiles along open and closed spline paths, then inspect step and bevel boundaries.

Turn native curve families into tubes and optionally fly a camera along their tangent frames.

Edit control points while comparing interpolation modes and in-place curve buffers.

Turn a local typeface fixture into filled and outlined Three.js geometry.

Keep font faces filled while turning their outlines into native stroke meshes.

Construct procedural 3D letters with depth, bevel, materials, and a mirrored companion.

Generate a culling-aware voxel landscape from merged planes and a local atlas.

Deform one subdivided plane, bake its shading, and navigate it through fog.

Generate continuous vessels from changing cross-sections and shade them procedurally.

Navigate a seeded skyline through a sunset sky and procedural facade graph.

Generate one seeded Neo-Gothic tower while tracing the WebGPU generator and sunset-lighting boundary.

Trace Water, Sky, PMREM, bloom, cloud parameters, and timer-driven motion.

Compare untouched geometry with LoopSubdivision topology, materials, and wireframes.

Drive a 128-plane spherical field from a deterministic VideoTexture stream.

Trace physical metal/glass, PMREM, clock hands, camera choreography, and bloom.

Make Timer-driven bounce transitions audible through five positional sources.

Study covariance kernels, transparent sprites, and depth ordering across a pinned-package boundary.

Accumulate intersecting transparent surfaces without draw-order popping.

Compare stochastic coverage, fixed cutouts, and sorted blending.

Compare solver iterations, CCD, sleeping, and fixed-step results.

Read worker-owned history through shared memory with a transfer fallback.

Compare ignoring, clamping, and reconciling stale commands.

Reconcile a late input from bounded worker-owned history.

Replay fixed-tick worker inputs from a transferred checkpoint.

Transfer serialized physics state across a worker and verify replay.

Capture, restore, and verify deterministic Rapier world replays.

Compare the Ammo/Bullet rigid-body bridge and indexed instance transforms.

Study the Three.js scene and Rapier rigid-body world synchronization boundary.

Trace indexed Jolt bodies flowing through shared InstancedMesh buffers.

Launch instanced physics balls from XR controller gestures.

Inspect request plans, reference spaces, session-only layers, bindings, and frame boundaries.

Run the 200-cube room, controller selection, collision loop, and explicit WebGL2 reference.

Grab and release a deterministic 50-object field through two controller attachment paths.

Trace controller floor intersections into source-shaped XR reference-space offsets.

Ride source-shaped track banking through procedural terrain, lifters, shadows, funfairs, and the explicit WebGL2 reference.

Render a separate layer scene with a desktop XRRenderTarget fallback.

Compare flat quad and curved cylinder layer proxies and callbacks.

Trace source canvas, texture upload, binding sub-image, and readback boundaries.

Exercise redraw, resource loss, recovery upload, destruction, and invalid-state policy.

Trace canvas video frames into VideoTexture and guarded equirect media layers.

Trace permission state, MediaStream tracks, VideoTexture/audio ownership, device probes, and teardown.

Model hit-attached and free anchors, pose updates, tracking loss, deletion, and synthetic persistence.

Trace storage initialization, compute updates, sprite binding, and CPU fallback.

Make per-frame creation, disposal, tracked memory, and renderer shutdown observable.

Compare indexed storage reads across WebGPU and WebGL2 backends.

Compare one shared mesh across a moving field of instance transforms.

Compare WebGPU and WebGL2 shadow rigs before immersive presentation.

Step through local and global storage-buffer compare stages.

Trace alternating storage-texture ownership through a TSL blur.

Verify one RGBA32F storage texture binding across read, modify, and write.

Write deterministic values across texture layers and verify GPU readback checksums.

Verify primary-pass picking, NodeMaterial gates, graph IDs, drag thresholds, and helper cleanup.

Execute trusted TSL fixtures, recompile fragmentNode, and inspect WGSL plus GLSL output.

Copy a small source region into a destination texture and verify changed versus untouched texels.

Reuse one persistent GPU-to-CPU staging buffer across aligned subrange reads.

Switch one renderer across four independent CanvasTargets and verify their size and disposal lifecycles.

Queue component ranges on a DataTexture, verify WebGL2 merging, and prove the queue clears after upload.

Project a deterministic map or TSL colorNode through a native WebGPU light and verify its shadow-matrix boundary.

Drive a native projector with two real VideoTexture frames and verify map-derived aspect plus teardown.

Attach the full Inspector, drive live TSL controls, preview named nodes, and verify teardown.

Probe device-defined subgroup lanes, intrinsics, feature gating, readback, and release.

Read back exact GPU draw words and verify the indirect render consumer.

Drive three draws from one GPU command buffer through byte offsets.

Reuse one index pattern while GPU commands select three vertex blocks.

Select three index windows from one GPU-driven indexed buffer.

Compare Uint16 and Uint32 authoring paths at the WebGPU upload boundary.

Split one indexed line-strip with the fixed restart sentinel and verify typed-index adaptation.

Resolve triangle coverage and packed depth in a visibility buffer.

Reconstruct material attributes after visibility resolves.

Read GPU visibility with a frame-latent renderer query.

Let a GPU-written command choose the rendered instance count.

Translate GLSL into TSL or WGSL and inspect the bridge.

Map geometry groups to material slots and audit the draw contract.

Update indexed positions, ranges, bounds, morph targets, and teardown explicitly.

Raycast a colored triangle field and reveal the selected face edges.

Orbit an orthographic cube field and inspect reversible raycast selection.

Tessellate the Utah Teapot and audit patch flags, shading lanes, and BufferGeometry ownership.

Make the smallest official geometry example explicit: box topology, texture color space, and loop ownership.

Turn deterministic 3D points into a convex hull and inspect the source point cloud versus surface.

Split sharp edges after OBJ vertex merging and inspect normals, shading, map, and teardown.

Load beveled type, tessellate its edges, and inspect per-face shader color and displacement attributes.

Trace color inputs through linear lighting, tone mapping, and display output.

Compare projections and make viewport/scissor ownership explicit across backends.

Render offscreen, restore renderer state, and hand the texture back to the canvas.

Audit current-dev loaders, attributes, packed SH, sorting, and pinned-package drift.

Serialize a named TSL graph, rebuild independent NodeMaterials, and expose the pinned-release loader boundary.

Reproduce the pinned UUID failure, recover with a local adapter, and compare the reconstructed scene.

Trace bytes, manager barriers, placeholder textures, cache, abort, and release.

Compare HTML-image and ImageBitmap ownership across same-origin and CORS paths.

Read pixel orientation and reveal URL-only cache reuse before a GPU texture upload.

Separate pinned runtime evidence from current-dev source drift and migration limits.

Restore a texture-bearing TSL graph and verify image, sampler, UUID, and release ownership.

Migrate a versioned node document, validate registries and references, and expose stock fallback behavior.

Round-trip official codes, graph layouts, graph IDs, localStorage, and trusted material code.

Validate the host/iframe handshake, message gate, request timeouts, graph events, and teardown.

Compare pinned and current-dev import libraries without executing unsupported graph code.

Share one Source across texture policies, fork ownership, and round-trip the image table.

Load an animated FBX, inspect the runtime graph, and exercise clip ownership.

Keep the FBX loader boundary visible while evaluating deterministic NURBS surfaces and curves.

Compare five material responses against a deterministic PMREM while keeping the KTX2 asset seam explicit.

Exercise real WebGL loss/restore and label application-owned backend recovery policy.

Parse XML scene graphs, inspect units/up-axis/animation, and state the supported subset honestly.

Separate geometry, material-library, path-resolution, and disposal boundaries.

Inspect named OBJ objects, MTL injection, topology, attributes, and parser teardown.

Parse a pinned TTF asset into shared mirrored TextGeometry and inspect the loader lifecycle.

Compare the five native blending modes and make alpha/depth ownership explicit.

Trace six-face CubeTexture ownership through reflection and refraction material paths.

Keep normal, AO, displacement, UV2, and environment channels aligned on one surface.

Compare native min/mag filters, mipmaps, wrapping, and anisotropy in a split sampler study.

Trace off-axis eye cameras, zero-parallax distance, targets, and anaglyph compositing.

Attach native flare elements to colored lights and inspect occlusion-owned lifecycle.

Compare native WebGPU LensflareMesh occlusion ownership with the classic WebGL reference.

Split a WebGL render into left and right eye viewports.

Interlace left and right render targets through a fullscreen scanline shader.

Render ground and wall reflections through internal mirror targets.

Trace WebGL pixels into a character-set DOM table with explicit effect ownership.

Trace stage roots, embedded layers, USDZ bytes, and the pinned parser boundary.

Export a scene, inspect the archive, reload it, and expose serialization loss.

Compare attribute-rich PLY with surface-only STL and make format loss explicit.

Trace Z-up Rhino layers, external WASM ownership, and layer visibility.

Drive a CanvasTexture from deterministic animationData and scrub it on a rounded mesh.

Navigate a source-shaped inward sphere with pointer longitude, latitude, and FOV boundaries.

Split a six-face atlas into inward-box textures and inspect damped orbit ownership.

Parse voxel chunks into palette-colored scene graphs and inspect greedy meshing.

Hand a Z-up primitive through printer, layer, infill, and local G-code export policy.

Route JSON-pointer animation channels into material properties through the installed extension.

Swap local mesh levels through the installed Needle progressive loader manager.

Combine native brush solids with subtraction, intersection, and addition.

Turn a metaball scalar field into a live polygonized surface.

Compare native polyhedra, planar, revolved, and parametric generators.

Compare gradual quaternion turns with an instant look-at target.

Populate and repaint native geometry color attributes across a small gallery.

Compare line displacement, particle size, sorted billboards, and alpha-tested billboard attributes.

Drive spherical and twist position targets through native influences.

Load the pinned Horse.glb through GLTFLoader and drive its AnimationMixer morph clip.

Parse a source-shaped AnimatedMorphSphere, animate a target, and share geometry with Points.

Compare shaded and wireframe scenes through one camera and a scissor divider.

Deform a heightfield, bake its lighting, and probe surface normals.

Quantize a material matrix with gradient maps and optional outlines.

Trace ZIP relationships, material resources, vertex colors, component builds, and transforms.

Compare one CRT effect implemented with native WGSL and TSL.

Compose many DOM-backed scenes through one shared canvas.

Turn a height texture into a camera-aware material illusion.

Read four neighboring texels and compare gathered depth values.

Correct cubemap reflections against a room-sized projection box.

Write the same source layers into array and volume render targets.

Feed a render-target collision field into GPU rain and surface ripples.

Interactive generated terrain study.

Animated ocean surface study.

Moving-scene cell migration and broad-phase queries.

Triangle queries and worker broad-phase comparison.

Standard raycast, Octree, and three-mesh-bvh paths.

Scene-level TLAS over shared-geometry BLAS trees.

ArrayCamera versus explicit scissored passes.

Storage-texture ping-pong loop and CPU fallback.

Sampled texture graph and node-driven output.

Procedural texture-gradient study.

Mipmap generation and sampling study.

Compare baseline and enhanced texture sampling on a steep floor.

Load a glTF extension fixture and steer brushed-metal highlights.

Parse clearcoat, sheen, and iridescence extensions side by side.

Trace transmission, volume, IOR, specular, and dispersion through GLTFLoader.

Switch authored material identities across shared glTF primitives.

Parse one mesh into a transform-rich field with one InstancedMesh batch.

Compare loader-mapped unlit shading with a PBR fallback reference.

Trace atlas offsets, rotation, scale, and UV-channel overrides through GLTFLoader.

Compare PNG/WebP/AVIF associations and the official Draco-backed Forest House asset.

Apply per-map transforms across base color, ORM, normal, occlusion, and emission.

Compare core emission with HDR emissiveStrength loader mapping.

Author a graph, export JSON/GLB, then load the artifact back.

Compare OpenGL and DirectX tangent maps through binary glTF export.

Export one InstancedMesh batch, inspect its extension, and load it back.

Encode a source-shaped mesh, inspect quantization and attributes, and own the DRC download lifecycle.

Parse a glTF material extension, mutate anisotropy factor/rotation/map state, and inspect lifecycle ownership.

Compose progress, decoders, animation, framing, switching, and cleanup.

Compare compact integer accessors with decoded runtime attributes.

Inspect loader-created physical materials and linear height relief.

Compare native extension application with unknown metadata preservation.

Switch authored camera projections and inspect node-attached lights.

Inspect sparse morph data and sparse animation output after loading.

Inspect authored filtering, mipmap, repeat, mirrored, and clamp state.

Inspect base color, packed ORM, normal, occlusion, emissive, and color-space mappings.

Inspect weighted joints, inverse bind matrices, morph deltas, and clips.

Inspect how OPAQUE, MASK, and BLEND map into Three.js materials.

Physical-scale HDR studio and postprocessing chain.

Backend, limits, output settings, and memory counters.

GPU timestamps compared with CPU render timing.

Frame lifecycle and render-loop study.

Color and normal attachments with async readback.

BundleGroup versus regular Group performance.

Browser audio and spatialization study.

Video texture and media playback study.

Media-element loading and texture workflows.

Browser codec capability and playback checks.

CSM split modes and shadow coverage.

Forward+ lighting and depth-slice heatmaps.

Shadow-map arrays and tile controls.

Position-dependent diffuse GI through a baked grid.

WebGPU CSMShadowNode versus WebGL CSM.

Six-direction cube shadow targets.

Trace native six-direction PointLight shadows through map, bias, radius, and receiver ownership.

Forward+ light ownership and shadow boundaries.

Compatibility study with explicit fallbacks.

Screen-space global illumination and temporal resolve.

Screen-space reflections with selectable views.

Inspect native WebGL SSRPass targets, reflection scope, and output modes.

Stochastic reflections with history denoising.

High-quality DOF with click-to-focus.

Performant blur-based focus effect.

GTAO, temporal resolve, and buffer previews.

Inspect native WebGL SAOPass normals, depth, occlusion, and blur.

Inspect native WebGL SMAA edge, weight, lookup, and blend stages.

Inspect native bright extraction and selective layer policy.

Inspect native normal/depth, AO, denoise, and output targets.

Blend two rendered worlds through native texture-aware transition targets.

Compose two scene passes through the native TSL TransitionNode graph.

Inspect native clear-color, alpha, and read-buffer ownership.

Inspect isolated radial scatter, projected-light sampling, and pass ownership.

Switch three source-backed fullscreen random-noise shader programs.

Route one shared scene texture through four masked effect composers.

Compare automatic and explicit UV-matrix transforms on a repeat-wrapped texture.

Inspect the source-factor × destination-factor material matrix.

Trace depth capture through two-stage blur into a ground shadow.

Switch one specimen across normal, velocity, and depth packing views.

Compare hashed coverage, sorted transparency, and temporal accumulation.

Study view-space matcap lobes, normal-map participation, and material replacement.

Stream sub-volumes into one resident 3D texture and raymarch the assembled field.

Trace thickness-driven light transport through the source-shaped shader.

Inspect native rectangular emitters, dimensions, and helper ownership.

Explore transmission, optical depth, attenuation, and transparency policy.

Velocity-vector blur for camera and objects.

Temporal anti-aliasing upscaling from a lower resolution.

Native, bilinear, FSR1, and TAAU comparisons.

Depth-raymarched SSS with temporal filtering.

Inspect thickness-driven scattering in the native node material.

Animate a native array-layer depth sample through TSL.

Promote KTX2 compressed layers into a native depth-sampling graph.

Trace the source-style GLSL3 sampler2DArray depth path.

Animate a red-channel volume slice through the source shader.

Compare the single-sample and four-sample composer paths side by side.

Noise volume, raymarching, and denoise.

Generated 3D density field with raymarching.

Stateful compute fluid loop with volumetric emission.

Opaque procedural isosurface raymarch.

Transmitted caustics with a scoped noise volume.

Reflective and refractive water surface.

GPU particle storage buffers and kernels.

GPU height-field solver with pointer disturbance.

Structured instance data shared with rendering.

Storage-backed per-vertex deformation.

Verlet cloth with springs, wind, and collider.

Naive, workgroup, and subgroup reductions.

Large GPU-owned point field with a pointer brush.

Compute-written 2D storage texture.

Computed 3D density field and cloud proxy.

GPU snow accumulation and collision field.

MLS-MPM particle/grid fluid topology.

Hierarchical exclusive scans, stable scatter, and indirect dispatch.

Scale stable GPU compaction through a three-level scan hierarchy.

Build the official keyframe contract from scratch: vectors for position and scale, quaternions for rotation, discrete colors, and scalar opacity on one mixer root.

The official selection helper turns a 2D rectangle into a 3D frustum. Compare camera depth, center-point semantics, and instance IDs without hiding the lifecycle.

Explore CanvasTexture · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A source-backed DOM-renderer contract for the pinned Three.js YouTube example: real iframe media surfaces become CSS3D objects, TrackballControls owns the camera, and a transparent blocker...

InstancedFlow keeps one geometry/material pair while each instance selects a curve, owns an offset, and receives an independent color.

Flow bends a mesh on the GPU by sampling curve position and Frenet frames from a half-float data texture, then advances the mesh along that path.

Explore Custom particle attributes · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore Custom color attributes · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

GLBufferAttribute describes a native WebGL buffer without asking Three.js to upload an array. The application owns the VBO data, while the geometry owns the attribute metadata, source swap, draw...

GLTFExporter accepts a scene or an array of scenes. This lab exports two authored roots to JSON and GLB, then independently reloads each artifact through GLTFLoader so scene count, animation...

The bundled CoffeeMat asset arrives through KTX2/Basis and Meshopt. This lab gives GLTFExporter a real compressed texture, proves the expected failure without texture utilities, then injects the...

GLTFLoader returns a default scene, the complete scenes array, imported cameras, parser access, and preserved metadata. Select each root scene and inspect the response boundary instead of treating...

A HemisphereLight blends sky and ground colors without casting shadows. The study keeps its helper update boundary visible beside a directional shadow reference and a source-shaped sky dome.

Explore Indexed lines contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

The box’s position and UV channels share a stride-eight Float32 record. One indexed topology is drawn many times while the per-instance matrix buffer changes every frame.

A WebGL2 integer attribute reaches a GLSL3 in int without normalized float conversion. A flat varying carries that discrete value to a sampler-array branch, so each triangle keeps its chosen texture.

Positions stay float32; color rides beside them as normalized Uint8 data. The CPU shares bytes, while Three.js still tracks two interleaved owners.

Parse five legacy texture families with their actual Three.js loaders. Compressed containers expose metadata and payload ownership; decoded raster formats expose RGBA bytes. Parsing success is...

A depth ladder places markers across several orders of magnitude. Rebuilding the native WebGLRenderer with logarithmicDepthBuffer makes the precision policy explicit.

Three focused line labs separate chain geometry, segment geometry, wide-line materials, dash distances, and generated wireframes.

Representative WebGL addon contracts: a CPU polygonizer, a reflection hook, a refractive virtual camera, and a replacement stereo renderer.

A CSS image, a scene background, a cube map, and a second scene all fill pixels differently. Make the ownership boundary visible.

Ten focused modes compare camera-facing labels, render-target impostors, repeated meshes, merged geometry, vertex colors, dataset fades, visibility switches, and morph targets.

Projection, viewports, pixel coordinates, and depth precision are separate camera decisions. Switch one contract at a time.

Five focused labs separate camera navigation, continuous motion, browser pointer lock, and event-driven object manipulation.

Five focused labs make instance attributes, object topology, skin deformation, batch capacity, and backend boundaries observable.

Compare parametric paths, arc-length sampling, generated tube topology, and NURBS target writes in one bounded study.

Twelve official manual pages become inspectable lessons for cleanup, debugging, capture timing, DOM composition, alpha, and canvas focus.

Four focused modes follow the official foundations path from one static Mesh to lit cubes, time-based animation, and a composed car.

Representative official gallery contracts make instance invalidation, CPU/GPU picking, line topology, resolution, and voxel rebuilds observable without claiming exact asset or pixel parity.

Representative labs from the official postprocessing gallery make screen ownership, history, antialiasing, selected effects, and target restoration observable without claiming exact asset or pixel...

Eight representative labs cover model loading, animation clips, component game loops, input edges, follower state, LUT images, live CanvasTexture updates, and parsed grid data.

Three focused passes separate deterministic procedural construction, terrain-owned placement, and CCD inverse-kinematics mutation.

Four focused labs make segmentation, profile construction, curve distance, and swept frames visible instead of leaving them as constructor options.

Five representative labs make constructor topology, polyhedron detail, wireframe snapshots, path commands, and arc-length caches observable without claiming complete renderer or example coverage.

Eleven focused modes move from built-in primitives to authored attributes, dynamic buffers, and voxel surfaces whose hidden faces are deliberately omitted.

Four compact labs make helper updates, light targets, shadow-camera variants, skeleton state, and explicit disposal observable. IES and projector lights remain intentionally source-only because...

A compact lab for reusable interpolation buffers, path triangulation, and CPU data ownership before those values reach the renderer.

Project HTML into CSS pixels, hide labels behind geometry, sort them by depth, and place globe labels from latitude and longitude.

A compact lab for the older WebGL/GLSL pass family: time-driven film, resolution-aware halftone, owned glitch displacement, and non-swapping save/texture passes.

A light needs a material, a direction or target, and—when shadows are enabled—explicit renderer, light, and mesh ownership. Change one boundary at a time.

Compare three materially different loader paths: Draco-compressed GLTF geometry, Basis-transcoded KTX2 textures, and SVG paths converted into Three.js shapes.

Compare the official GLTF and OBJ lessons as contracts: parse or load, inspect the returned hierarchy, frame its bounds, animate it, and release what the application owns.

Five compact labs make shading families, invalidation, line distances, light targets, probes, and area-light prerequisites observable without pretending every renderer path is equivalent.

Four focused labs make rotation, composition, bounds, intersections, pointer coordinates, and frame-rate independent motion observable.

Four compact labs separate logical canvas size, drawing-buffer size, renderer bookkeeping, uniform cloning, and blending/backend boundaries. The newer common-renderer target objects stay labeled...

Ten focused modes compare CSS layout, drawing-buffer sizing, device pixels, worker transfer, event proxies, and normalized-coordinate picking.

Multiple scenes share a drawing buffer through viewport/scissor rectangles. On-demand rendering shares an invalidation rule: schedule one frame, then let changes request another.

Pure GLSL modules become useful when their cloned uniforms, input texture IDs, resolution policy, and composer order are made explicit.

Seven focused modes connect a Shadertoy-style fragment function to Three.js uniforms, sampler input, mesh UVs, and the built-in fog pipeline.

Five focused labs connect color working spaces, 2D bounds, barycentric data, clipping planes, camera frustums, and angular coordinates.

Six labs make texture sources, raw texels, volume data, cube faces, media lifecycles, loaders, and invalidation boundaries observable.

Five compact labs connect timing, native data, masks, offscreen attachments, fog, cube capture, and stereo views without claiming whole-page mastery.

Six focused scenes make the official transparency lessons tangible: blending, double-sided faces, the two-mesh workaround, intersecting planes, ordered splits, and alpha-tested cutouts.

Study the WebXR boundary without pretending a desktop browser is a headset: the same scene exposes renderer XR state, VR capability, look-to-select dwell, controller rays, and attach/restore behavior.

`onBeforeCompile` lets a built-in material keep its lighting and normal pipeline while a small patch injects time-varying twist math. Separate cache keys keep opposite shader variants from sharing...

A per-material MRT mask feeds a Gaussian blur while the beauty pass stays intact, making selective post-processing ownership visible.

Three independently colored SpotLight instances reproduce the official multi-light shape: shared cone settings, range/decay, shadow casting, helper updates, and deterministic motion over a...

The pinned occlusion example combines a reflective WaterMesh, procedural SkyMesh, PMREM environment regeneration, animated geometry, and a small bloom pipeline.

This native Ammo study follows the pinned break example: convex bodies own Bullet hulls, contact manifolds expose applied impulse, and ConvexObjectBreaker replaces a hit object with...

This native Ammo study follows the pinned soft-body cloth example: a 20×15 patch is anchored to a motorized arm, simulated in a soft-rigid world, and written back into a lit Three.js surface.

This native Ammo study follows the pinned soft-body rope example: a 10-segment rope is anchored to a ball and a motorized arm inside a soft-rigid dynamics world.

This native Ammo study follows the pinned heightfield example: generated float samples are copied into the Ammo heap, wrapped by btHeightfieldTerrainShape, and used by falling rigid bodies.

This native Ammo study follows the pinned soft-body volume example: a sphere and a subdivided box keep their pressure while colliding with a ground plane, ramp, and thrown rigid balls.

This route turns Rapier's ray-cast vehicle controller into a small driving laboratory: the chassis is a dynamic rigid body, wheels raycast through suspension, and engine, steering, friction, and...

Three ways to turn a pointer into identity: geometric rays, indexed texture regions, and a one-pixel GPU ID pass.

Explore Dynamic Points · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A grid of points keeps its topology while CPU code rewrites the position and scale buffers every frame. A tiny ShaderMaterial turns each point into a camera-aware circular particle.

A focused WebGPU lab for post-render ownership: stateless edge filtering, in-frame supersampling, and history-based reprojection. Each mode exposes what it owns and when it runs.

A composer is a buffer graph. A render target is a producer. Make pass order, swaps, and target restoration visible instead of treating the screen as magic.

Explore Raw shader contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

This lab isolates the official reflection boundary: instanced recursive tree cubes, a native ReflectorNode, TSL-driven cube deformation, and a render-pipeline blur/vignette pass.

Build orbital frames, attach a turret, and let world transforms explain why hierarchy beats coordinate copying.

Explore Selective draw contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A fullscreen ShaderMaterial keeps its time, speed, and distortion uniforms on the CPU while GLSL owns the image. The controls expose mutation, recompilation, timing, and teardown as separate...

Each body keeps its own animation time and proportions while one WebGPU compute graph writes the skinned vertex stream reused by the render pass.

The source rig keeps one AnimationMixer while its skinned meshes expose an instance matrix, TSL-driven per-instance material variation, and a depth-directed blur pipeline.

A shadow-casting SpotLight projects a cookie map through a mutable cone. The lab keeps its target, shadow camera, helper geometry, and teardown boundaries visible.

A write-only Storage3DTexture receives deterministic values at (x, y, z) coordinates. A separate storage buffer verifies the computed voxels without claiming ordinary WebGL2 equivalence.

Compare EXR scene-linear HDR output with KTX2 raw texture containers. The lab keeps source target, output type, channel, color-space, compression, and release boundaries visible.

A deterministic 2×2 DataTexture is copied into a 4×4 destination at an explicit texel offset, then verified through GPU readback.

Images, canvases, labels, and palettes all cross the CPU/GPU boundary differently. Make readiness, sampling, and upload ownership visible.

Explore local TSL Graph mock peer with an interactive Three.js study and browser-based rendering controls.

Explore TSL Shadow Map Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

UVsDebug turns indexed or non-indexed triangular geometry into a labeled canvas. The helper is deliberately a browser-side diagnostic: it inspects UV attributes, not textures or renderer state.

With GLSL3, an empty BufferGeometry can still draw a field of triangles: the draw range supplies the vertex count, while gl_VertexID deterministically derives each position and color in a...

Deterministic 3DS binary chunks pass through the installed TDSLoader. The lab makes named objects, indexed faces, UVs, master scale, and the loader’s basic Phong material properties observable.

Deterministic Additive Manufacturing Format (AMF) documents pass through the installed AMFLoader. The lab makes metadata, unit scaling, material color/alpha, indexed triangle volumes, normals,...

The pinned example combines BatchedMesh, five geometry LODs, radix sorting, BLAS/TLAS BVHs, accelerated raycasting, and 500,000 instances. This route preserves that full topology and exposes the...

Bump mapping perturbs a lit surface from a height texture without changing its geometry or requiring vertex tangents. This procedural contract keeps the texture toggle, scale mutation, and shader...

A deterministic single-root BVH fixture passes through the installed BVHLoader. The lab makes hierarchy offsets, animation-channel selection, SkeletonHelper, AnimationClip, and AnimationMixer...

Explore WebGL Cubemap Render-to-Mipmaps Contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A deterministic per-vertex displacement attribute feeds the installed ShaderMaterial. The lab makes uniform amplitude, live buffer uploads, UV texture sampling, palette and repeat mutation, pause,...

The official decal splatter study raycasts a mesh, transforms its face normal, and clips a transparent DecalGeometry against the hit surface. This lab keeps that projection, material policy, and...

The pinned white-furnace diagnostic makes energy conservation visible: roughness runs left to right, metalness runs top to bottom, and every sphere shares the same filtered radiance.

Deterministic printer-style G-code passes through the installed GCodeLoader. The lab makes absolute/relative positioning, extrusion state, layer splitting, loader coordinate rotation,...

Explore Lookup Table Colors Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGL GPGPU Birds · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGL GPGPU Protoplanet · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGL GPGPU Water · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A deterministic KMZ ZIP contains doc.kml and a nested Collada model. The installed KMZLoader resolves the KML link, delegates the DAE to ColladaLoader, and returns a caller-owned scene graph.

A library-free packed LDraw text model passes through the installed LDrawLoader. The route exposes native surface meshes, ordinary edges, conditional edges, BFC-aware smoothing, and building-step...

The pinned gallery source composes TilesRenderer, GlobeControls, Cesium Ion authentication, GLTF/DRACO tile plugins, Google Photorealistic Tiles, atmospheric clouds, and postprocessing. This local...

Explore Collada kinematics contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

The pinned gallery source uses web-ifc directly: configure the WASM path, initialize IfcAPI, open the IFC byte stream with COORDINATE_TO_ORIGIN, stream all meshes, convert interleaved...

Deterministic raw RGB24 and RLE RGBA32 TGA payloads pass through the installed TGALoader. The route makes native RGBA conversion, origin handling, mipmap policy, DataTexture ownership, and the...

A procedural comparison makes MeshPhysicalMaterial clearcoat observable: base roughness, coating intensity, coating roughness, red/green channel maps, an independent normal layer, shader...

The official cubemap-mipmap study compares a six-face cube with authored mip levels against the same base cube with GPU-generated mipmaps. This explicit WebGL2 lane keeps texture ownership, level...

The official OBB study copies a geometry-level OBB through each world transform, runs pairwise intersectsOBB tests, and uses intersectRay to select the nearest oriented object. This lab makes...

A deterministic MD2 frame payload is shared across three native MD2CharacterComplex roots. The primary character exposes the official movement flags while clones exercise shareParts, morph...

A deterministic little-endian MD2 payload passes through the installed MD2Loader. The lab keeps the native render attributes, named frame morph targets, and derived AnimationClip visible as...

A deterministic big-endian MDD payload passes through the installed MDDLoader. The lab binds native morph targets to indexed geometry and drives the parsed AnimationClip through AnimationMixer.

A source-backed memory contract: every cycle creates a textured wireframe sphere, renders it through one WebGLRenderer, removes it from the scene, and disposes its geometry, material, and...

The second memory test intentionally differs from the clean lifecycle lab: 100 meshes share one sphere geometry, but every render replaces each mesh material with a new ShaderMaterial. The newest...

The pinned example compares a loaded source mesh with a cloned mesh rebuilt by SimplifyModifier. This contract keeps that two-mesh boundary while using a deterministic local torus-knot fixture in...

The pinned webcam example aligns a FaceCap glTF expression rig and a hidden webcam video in the same metric camera frame, then applies MediaPipe blendshapes, pose, and eye scores. This route uses...

A native WebGL2 WebGLRenderTarget with two color attachments receives color and normal data from one GLSL3 draw. The preview and indexed readback keep the attachments observable.

Explore Normal Map Contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Deterministic NRRD bytes pass through the installed NRRDLoader. The lab exposes typed payload decoding, spacing/RAS metadata, threshold repaint, and the official example’s x/y/z VolumeSlice...

Deterministic Point Cloud Data (PCD) records pass through the installed PCDLoader. The lab makes typed headers, ASCII/binary transport, RGB, normals, intensity, labels, point size, and the...

Deterministic Protein Data Bank text passes through the installed PDBLoader. The lab makes fixed-column atom coordinates, native CPK colors, deduplicated CONECT bonds, and the loader’s atom/bond...

Keep the PMREM cubemap pipeline visible: deterministic six-face input, CubeUV convolution, a roughness/metalness physical-material grid, and explicit source/derived-resource ownership.

Compare the pinned PMREM approximation against a matched DirectionalLight: a single bright radiance sample, a white/black metal/dielectric grid, and a clear switch between environment and...

A source-backed particle contract: one position buffer feeds a textured Points cloud, while PointsMaterial.sizeAttenuation, pointer camera input, and animated HSL color remain explicit and reversible.

WebGL2 can attach one layer of a DataArrayTexture as a framebuffer target. This route renders a source slice into a native WebGLArrayRenderTarget, then samples the rendered array layer in the...

Explore WebGL Sculpt Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A compact contract for the classic WebGL shadow-map example: a moving caster field, a large receiver, and a directional light whose map type and camera budget stay inspectable.

Measure a deterministic animated-caster field under one shadow-casting SunLight-family reference: PCF shadow-map configuration, receiver ownership, instance count, and CPU-side render samples stay...

Keep the VSM shadow lane visible: a moving torus knot, a directional light, a spotlight, filter controls, and a renderer-level variance shadow-map contract.

Keep the custom ShadowMesh path visible: animated geometry, a plane-projection matrix, explicit directional-versus-point divergence, and a stencil-capable renderer.

A source-shaped study of the official simple global illumination example: camera probes read a tiny render target and progressively paint bounced light into torus-knot vertex colors.

A float Data3DTexture feeds the official-style VolumeRenderShader1 raycaster. MIP and isosurface modes share one volume while clim, threshold, and colormap controls change the interpretation.

Explore TSL Instancing Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore TSL Skinning Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A GLSL3 UniformsGroup packs position and color arrays into one std140 LightingData block. Every specimen reads the same array while the active light count and motion change on the CPU.

A GLSL3 UniformsGroup packs shared light state into one std140 uniform buffer object. Every specimen reads the same GPU block while the controls mutate its contents without rebuilding the scene.

Explore Three.js Lab — Video Kinect Contract with an interactive Three.js study and browser-based rendering controls.

Explore WebGL Video Panorama Contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A VOX density chunk becomes a GLSL3 sampler3D and is raymarched through thousands of instanced boxes. The study keeps the source’s per-instance local-ray transform and depth write observable.

Deterministic VRML V2.0 text passes through the installed VRMLLoader. The lab exposes native Scene construction, Transform/Shape hierarchy, primitive and indexed geometry nodes,...

A source-backed wide-gamut contract: two scene backgrounds share one camera and a draggable scissor split, while Display P3 capability, working color space, output color space, and live...

Deterministic XYZ text passes through the installed XYZLoader. The lab exposes both supported layouts, native position/color attributes, the official centered PointsMaterial presentation, and...

The pinned example maps a Mixamo FBX animation onto a Ready Player glTF avatar with shared mixamorig bone names.

Explore WebGPU Centroid Sampling Contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Clipping Planes Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Clipping Stencil Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore CubeMap Mipmaps Contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A focused implementation of the official post-processing contract: scene pass, view-Z range fog, tone-mapped scene color, fog-color mix, and a color-transforming RenderPipeline output.

A bounded implementation of the official custom-fog contract: world-height pooling, two-octave procedural haze, distance fade, a sun-aligned key light, and deterministic terrain/forest proxies.

A bounded implementation of the official scattering contract: density fog, a downsampled Gaussian blur, and a fog-weighted composite over deterministic generated trees.

A bounded implementation of the official depth-target contract: render the scene into a floating-point depth attachment, then display that attachment through a fullscreen preview.

Explore WebGPU Stereo Effects Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

These focused modes separate WebGPU Line2 construction, instanced segment topology, wireframe generation, and post-render raycasting resolution.

Explore WebGPU Height Fog | Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A white furnace makes conservation visible: roughness runs left to right, metalness runs top to bottom, and every sphere shares the same filtered radiance.

A procedural six-face environment feeds the official-style TSL cubeTexture(..., getGroundProjectedNormal(...)) graph. The capture height controls the projected ground disk while the scene keeps a...

A single additive brush becomes a small HDR canvas: HalfFloat output, Extended sRGB presentation, TSL radial falloff, and an AfterImage trail.

The pinned gallery example loads Horse.glb, shares its morph-target geometry through one InstancedMesh, and writes a different AnimationMixer time into each instance’s morphTexture. This route...

Explore WebGPU Layers · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

The official multi-room example adds two independently baked LightProbeGrid instances to one scene. This contract lab keeps their ownership visible: bake separately, detach one grid, then reattach...

The official Sponza example schedules four probe captures per frame, completes each pass before the next indirect bounce, and keeps the helper out of cubemap captures. This synthetic atrium makes...

Explore WebGPU Basic Material | Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Materials Matrix · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Lightmap Material | Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Matcap Material | Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Batch Mesh · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

ReflectorNode captures a reflected camera into an internal render target. This compact contract makes its target, depth, resolution, and bounce policy observable without claiming the official...

Explore WebGPU Multisampled Renderbuffers | Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Particles · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Performance | Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Render Bundle | Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A bounded study of the official cubemap PMREM contract: six deterministic faces, a native environment node or fallback PMREM target, and a 6×5 physical-material grid spanning roughness and metalness.

A bounded implementation of the official equirectangular PMREM contract: decode the Ultra HDR source, prefilter it for physical materials, and expose the filtered radiance through the native node...

A bounded implementation of the official scene-derived PMREM contract: render a cube-lit source scene into a filtered target, then sample that target through a native node or explicit WebGL2 preview.

Compare the native WebGPU PMREM approximation against a matched DirectionalLight: a single bright radiance sample, a white/black metal/dielectric grid, and a clear switch between environment and...

The portal surface samples a second animated scene through the TSL pass(scenePortal, camera) graph.

A deterministic 100-object field makes the official post-processing chain observable: a scene pass feeds a dot-screen node, then an RGB-shift node owns the screen.

Explore WebGPU Direct Post-Processing Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

This study isolates the current WebGPU FXAA node boundary: a scene texture is color-transformed, passed through FXAANode, and written by a native RenderPipeline. The fallback keeps direct WebGL2...

A named emissive MRT attachment feeds BloomNode, LensflareNode samples the bloom along the image center, and GaussianBlurNode softens the resulting ghosts before the RenderPipeline composite.

This study isolates the installed TSL radialBlur() contract: the scene pass feeds center-directed samples, while the direct WebGL2 lane stays explicitly outside the native node graph.

Explore WebGPU Procedural Texture | Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Sandbox Contract / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Contact Shadows · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

A real SpotLight makes target ownership, cone angle, penumbra, distance, decay, and shadow-map state inspectable on native WebGPU with an explicitly labeled WebGL2 fallback.

The official sprites example turns a shared texture into a deep field of camera-facing sprites. This lab keeps the custom node contract visible: texture and UV color, alpha opacity, and per-sprite...

The official memory test deliberately creates a sphere, CanvasTexture, and Lambert material during every animation frame, then disposes the prior resources. This lab makes that ownership boundary...

Explore WebGPU Toon Material | Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

The official editor compiles an editable TSL fragment node into a live plane, then asks the renderer for the backend shader. This local study keeps that boundary visible without depending on the...

The official TSL Graph example attaches graph IDs to four NodeMaterial families, loads a graph document, and lets Inspector apply it to a shader-ball scene. This route keeps those ownership...

The same varying, texture, sampler, and uniform contract drives handwritten WGSL above and a TSL node graph below. Their CRT-style masks make the shared inputs visible.

Explore WebGPU Video Frame Contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Video Panorama Contract · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebGPU Volumetric Lighting + TRAA / Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

The pinned example uses Voxel Cone Tracing: a depth/normal MRT pre-pass feeds VXGI, indirect light enters through builtinGIContext, and temporal noise resolves with TRAA.

The pinned example loads the Khronos Sponza glTF, derives a directional sun from its bounds, and sends depth, packed normals, and velocity through a VXGI → GI-context → TRAA graph.

Explore WebXR AR cones - Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebXR VR stereo panorama - Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebXR VR panorama depth - Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebXR VR rollercoaster - Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebXR VR Sandbox · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebXR VR stereo video - Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebXR XR Cubes · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Explore WebXR XR Sculpt · Three.js Foundations with an interactive Three.js study and browser-based rendering controls.

Study the hand-pointer boundary as a deterministic desktop harness: a target ray finds the nearest mesh, pinch drives button states, and drag ownership is attached one frame later before returning...