06 / Stylized point field

Stylized Point FieldTangent neon ribbons, binary SDF glyphs, and pooled Chinese ink

Explore a Three.js point-field shader with tangent neon ribbons, binary SDF glyphs, and pooled ink across a base torus, seeded terrain, or local GLB.

Renderer

Preset

Target

Playback

Quality

System anatomy

How three visual languages render one stable point target.

Family: Point-Cloud Styling
Status: Active · authored study
Drivers: Time · Style preset · Target geometry · Local geometry
Primitive: Tangent ribbon instances · Binary SDF glyph sprites · Pigment-mask composite
Pipeline: Deterministic target sampling · Stable normal-tangent frames · Target-tangent neon ribbons · Single-channel binary SDF atlas · Shared blurred pigment mask
Source: 1 mapped unit

Cyberpunk ribbons, binary-led SDF glyphs, and an ink-wash compositor render directly over a base torus, seeded terrain, or browser-local GLB. Target geometry stays stable while each style supplies its own color, motion, and compositing language.

This authored TSL study applies three visual languages directly to stable point targets: a base knot, seeded terrain, or a browser-local model.

This preview uses one managed WebGPU renderer with automatic WebGL2 fallback, a capped pixel ratio, deterministic geometry, and complete GPU cleanup when you leave or switch studies.

Pipeline, step by step

Choose one stable point target
Switch between the built-in torus, a seeded terrain cloud, and a browser-local GLB without changing the selected rendering style.
Build deterministic surface frames
Normalized normals and orthogonal tangents keep ribbons, glyphs, and pigment attached to both procedural and uploaded geometry.
Trace target-tangent ribbons
Cyberpunk stretches selected samples along stable target tangents, pairing compact light cores with longer seeded-color ribbons instead of randomly rotated billboard dashes.
Set binary-led SDF glyphs
Matrix maps stable point IDs into a 4×4 single-channel Chakra Petch atlas led by zero and one, reserving glyph changes and bright heads for sparse code streams.
Pool pigment through one shared mask
Ink deposits sparse splats into a common field, then blurs and composites that field with pooled rims, coherent paper grain, and deliberate untouched space.

CompatibilityThe live study uses Three.js 0.185.0, preferring WebGPU and falling back automatically to WebGL2. Source, classification, and notes remain readable when graphics are unavailable, animation is disabled, or the graphics device is lost.

CreditFirst-party GLSL is extracted from commit d018f6d057c8f30144979bbcc95436cfb405d7c5.

Open-source adaptationThis authored TSL study keeps the recovered point-sprite conventions while replacing the original flow lifecycle with stable target geometry. The live runtime styles a base torus, seeded terrain, or browser-local GLB through tangent ribbons, binary SDF glyphs, and a shared ink mask.

Extraction manifest Material point sprite source

Local geometry

Use your own model.

Switch the live target between the base torus, seeded terrain, and one self-contained GLB 2.0 file. Local triangle surfaces become up to 64K framed points; Cyberpunk keeps a subtle model tint while Matrix and Ink apply authored palettes.

The file is processed in memory in this browser tab. It is never uploaded, stored, or included in analytics.

Current targetBase torus knotBuilt-in deterministic geometry

GLB 2.0 · 20 MB maximum · static triangle meshes. RGB vertex colors multiply each mesh's base-material color before the selected style applies its palette. Texture maps, animation, cameras, and lights are ignored. Draco, Meshopt, and instancing are not supported.

Choose local GLB

Base torus is active.

Extracted source

GLSL basis: point targets and sprite shaping.

lib/shaders/materialization/materialization.frag.glsl39 lines

uniform vec3 fogColor;
uniform float fogNear;
uniform float fogFar;

varying vec3 vColor;
varying float vFogDepth;

void main() {
  // Map gl_PointCoord to [-1, 1]
  vec2 coord = gl_PointCoord * 2.0 - 1.0;
  float r2 = dot(coord, coord);

  if(r2 > 1.0)
      discard;

  // Reconstruct sphere normal
  vec3 normal = vec3(coord, sqrt(1.0 - r2));

  // Light direction (view space, upper-right)
  vec3 lightDir = normalize(vec3(0.5, 0.8, 1.0));

  // Diffuse
  float diffuse = max(dot(normal, lightDir), 0.0);

  // Specular (Blinn-Phong)
  vec3 viewDir = vec3(0.0, 0.0, 1.0);
  vec3 halfDir = normalize(lightDir + viewDir);
  float specular = pow(max(dot(normal, halfDir), 0.0), 32.0);

  // Ambient + diffuse + specular
  vec3 color = vColor * (0.5 + 0.5 * diffuse) + vec3(0.05) * specular;

  // Fog
  float fogFactor = smoothstep(fogNear, fogFar, vFogDepth);
  color = mix(color, fogColor, fogFactor);

  gl_FragColor = vec4(color, 1.0);
}