ohzi-core 14.0.0 → 15.0.0

package/src/materials/SDFTextMaterial.ts

@@ -1,33 +1,80 @@
-import { BaseShaderMaterial } from './BaseShaderMaterial';
-
-import frag from '../shaders/sdf_text/sdf_text.frag';
-import vert from '../shaders/sdf_text/sdf_text.vert';
-
 import type { Texture } from 'three';
 import { DoubleSide, LinearFilter, Vector2 } from 'three';
+import { abs, attribute, cameraProjectionMatrix, cameraViewMatrix, clamp, dFdx, dFdy, float, length, mat4, max, min, positionGeometry, texture, uniform, uv, varying, vec2, vec4 } from 'three/tsl';
+import { NodeMaterial } from 'three/webgpu';
+
 import { OMath } from '../utilities/OMath';
 
-class SDFTextMaterial extends BaseShaderMaterial
+// Draws the glyphs of an SDFTextBatch, one instance per glyph. The vertex stage scales
+// and offsets the unit quad by plane_bounds, then places it with the instance matrix
+// (transformsCol0..3). The fragment stage reads the glyph cell of the multi channel
+// distance field atlas and turns the distance into coverage, about one pixel wide.
+class SDFTextMaterial extends NodeMaterial
 {
-  constructor(texture: Texture)
+  uniforms: {
+    _Texture: { value: Texture },
+    _Boldness: { value: number },
+    _AtlasSize: { value: Vector2 }
+  };
+
+  constructor(atlas: Texture)
   {
-    super(vert, frag, {
-      _Texture: { value: texture },
-      _Boldness: { value: 0.5 },
-      _AtlasSize: { value: new Vector2(1, 1) }
-    });
+    super();
+
+    const boldness = uniform(0.5);
+    const atlas_size = uniform(new Vector2(1, 1));
+
+    const plane_bounds = attribute('plane_bounds', 'vec4');
+    const glyph_matrix = mat4(
+      attribute('transformsCol0', 'vec4'),
+      attribute('transformsCol1', 'vec4'),
+      attribute('transformsCol2', 'vec4'),
+      attribute('transformsCol3', 'vec4')
+    );
+    const glyph_position = vec4(positionGeometry.xy.mul(plane_bounds.zw).add(plane_bounds.xy), positionGeometry.z, 1);
+
+    this.vertexNode = cameraProjectionMatrix.mul(cameraViewMatrix).mul(glyph_matrix).mul(glyph_position);
+
+    // Glyph bounds are atlas pixels: left, right, top, bottom.
+    const glyph_bounds = varying(attribute('glyph_bounds', 'vec4'));
+    const color = varying(attribute('color', 'vec4'));
+
+    const left = glyph_bounds.x.div(atlas_size.x);
+    const right = glyph_bounds.y.div(atlas_size.x);
+    const top = glyph_bounds.z.div(atlas_size.y);
+    const bottom = glyph_bounds.w.div(atlas_size.y);
+    const width = abs(right.sub(left));
+    const height = abs(top.sub(bottom));
+
+    const atlas_tex = texture(atlas, vec2(uv().x.mul(width).add(left), uv().y.mul(height).add(top).sub(height)));
+
+    this.uniforms = { _Texture: atlas_tex, _Boldness: boldness, _AtlasSize: atlas_size };
+
+    // The median of the three channels is the signed distance, 0.5 on the glyph edge.
+    const signed_distance = max(min(atlas_tex.r, atlas_tex.g), min(max(atlas_tex.r, atlas_tex.g), atlas_tex.b));
+    const distance = boldness.sub(signed_distance);
+    // Distance to the edge in screen pixels. Where the atlas is flat (deep inside or far
+    // outside a glyph) the gradient is 0. GLSL divided by it and relied on infinity,
+    // which WGSL does not guarantee, so the gradient is kept above a tiny floor.
+    const pixel_distance = distance.div(max(length(vec2(dFdx(distance), dFdy(distance))), 1e-6));
+    const coverage = clamp(float(0.5).sub(pixel_distance), 0, 1);
+
+    this.fragmentNode = vec4(color.rgb, coverage.mul(color.a));
 
     this.transparent = true;
     this.depthWrite = false;
     this.side = DoubleSide;
-    texture.minFilter = LinearFilter;
-    texture.magFilter = LinearFilter;
-    texture.generateMipmaps = false;
+    // Node materials take scene fog by default. The GLSL material ignored it.
+    this.fog = false;
+
+    atlas.minFilter = LinearFilter;
+    atlas.magFilter = LinearFilter;
+    atlas.generateMipmaps = false;
   }
 
   set_atlas_size(size: Vector2)
   {
-    (this.uniforms._AtlasSize.value as Vector2).copy(size);
+    this.uniforms._AtlasSize.value.copy(size);
   }
 
   set_boldness(value: number)

package/src/materials/SSAOComposeMaterial.ts

@@ -1,13 +1,22 @@
-import { BlitMaterial } from '../materials/BlitMaterial';
+import { BlitNodeMaterial } from '../materials/BlitNodeMaterial';
 
-import frag from '../shaders/ssao/ssao_compose.frag';
+import { Texture } from 'three';
+import { texture, vec4 } from 'three/tsl';
 
-class SSAOComposeMaterial extends BlitMaterial
+// Darkens the scene (_MainTex) by the occlusion in the red channel of _AO.
+class SSAOComposeMaterial extends BlitNodeMaterial
 {
   constructor()
   {
-    super(frag);
-    this.uniforms._AO = { value: undefined };
+    super();
+
+    const ao = texture(new Texture());
+
+    this.uniforms._AO = ao;
+
+    const occlusion = this.sample(ao).r;
+
+    this.fragmentNode = vec4(this.sample_main_tex().rgb.mul(occlusion.oneMinus()), 1);
   }
 }
 

package/src/materials/SSAOMaterial.ts

@@ -1,40 +1,137 @@
-import { BlitMaterial } from '../materials/BlitMaterial';
-
-import frag from '../shaders/ssao/ssao.frag';
-import vert from '../shaders/ssao/ssao.vert';
+import { BlitNodeMaterial } from '../materials/BlitNodeMaterial';
+import { decode_float_rg, decode_normal } from './deferred/depth_normal_encoding';
 
 import { DataTexture, Matrix4, RGBAFormat, RepeatWrapping, Vector3 } from 'three';
+import { abs, clamp, cross, dot, float, floor, Fn, ivec2, Loop, mix, normalize, smoothstep, step, texture, uniform, uniformArray, uv, vec2, vec3, vec4 } from 'three/tsl';
+import type { Node, TextureNode } from 'three/webgpu';
 
 import { OMath } from '../utilities/OMath';
-class SSAOMaterial extends BlitMaterial
+
+const KERNEL_SIZE = 64;
+const NOISE_SIZE = 4;
+
+// Screen space ambient occlusion over the DepthAndNormalsRenderer target (_MainTex).
+// Each pixel tests a hemisphere of samples around its normal against the depth
+// buffer and writes the occluded fraction to every channel.
+// use_exact_depth picks how samples read depth between texels: exact (default) or
+// one filtered fetch, which costs about half as much but bands flat surfaces.
+class SSAOMaterial extends BlitNodeMaterial
 {
-  constructor()
+  sample_kernel: Vector3[];
+  use_exact_depth: boolean;
+
+  constructor(use_exact_depth = true)
   {
-    super(frag, vert);
+    super();
+
+    this.sample_kernel = this.__get_sample_kernel();
+    this.use_exact_depth = use_exact_depth;
+
+    const inverse_proj = uniform(new Matrix4());
+    const projection = uniform(new Matrix4());
+    const bias = uniform(0.0125);
+    const radius = uniform(0.3);
+    const kernel = uniformArray<'vec3'>(this.sample_kernel, 'vec3');
+    const random_rotation = texture(this.__get_rotation_texture());
+
+    Object.assign(this.uniforms, {
+      _InverseProjMatrix: inverse_proj,
+      _ProjectionMatrix: projection,
+      _Bias: bias,
+      _Radius: radius,
+      _SampleKernel: kernel,
+      _RandomRotation: random_rotation
+    });
+
+    const depth_normal_tex = this.uniforms._MainTex as TextureNode;
+    const resolution = this.uniforms._Resolution as unknown as Node<'vec2'>;
+
+    // Bilinear depth, decoded per texel before interpolating. The texture filter returns
+    // 8 bit channels with only a few extra bits, which the RG packing scales by 255
+    // wherever the high byte steps, enough to self occlude flat surfaces in lines.
+    const exact_depth_at = (texture_uv: Node<'vec2'>) =>
+    {
+      const texel_pos = texture_uv.mul(resolution).sub(0.5);
+      const corner = floor(texel_pos);
+      const weight = texel_pos.sub(corner);
+      const last_texel = resolution.sub(1);
+
+      const texel_depth = (x: number, y: number) =>
+      {
+        const texel = clamp(corner.add(vec2(x, y)), vec2(0), last_texel);
+
+        return decode_float_rg(depth_normal_tex.load(ivec2(texel)).xy);
+      };
+
+      return mix(
+        mix(texel_depth(0, 0), texel_depth(1, 0), weight.x),
+        mix(texel_depth(0, 1), texel_depth(1, 1), weight.x),
+        weight.y
+      );
+    };
+
+    const filtered_depth_at = (texture_uv: Node<'vec2'>) => decode_float_rg(depth_normal_tex.sample(texture_uv).xy);
 
-    this.uniforms._InverseProjMatrix = { value: new Matrix4() };
-    this.uniforms._ProjectionMatrix  = { value: new Matrix4() };
+    const depth_at = use_exact_depth ? exact_depth_at : filtered_depth_at;
 
-    this.uniforms._Bias     = { value: 0.0125 };
-    this.uniforms._Radius   = { value: 0.3 };
-    this.uniforms._FarPlane = { value: 100 };
+    // Scales the far plane point under quad_uv by the stored depth over the far plane.
+    const view_position_at = (quad_uv: Node<'vec2'>) =>
+    {
+      const far_plane_point = inverse_proj.mul(vec4(quad_uv.mul(2).sub(1), 1, 1));
+      const depth = depth_at(this.texture_uv_at(depth_normal_tex, quad_uv));
+
+      return far_plane_point.xyz.div(far_plane_point.w).mul(depth);
+    };
+
+    this.fragmentNode = Fn(() =>
+    {
+      const frag_pos = view_position_at(uv()).toVar();
+      const normal = normalize(decode_normal(this.sample_main_tex().zw)).toVar();
+
+      // The noise tiles once every NOISE_SIZE pixels.
+      const random_xy = random_rotation.sample(uv().mul(resolution.div(NOISE_SIZE))).xy.mul(2).sub(1);
+      const random_vec = normalize(vec3(random_xy, 0));
+
+      const tangent = normalize(random_vec.sub(normal.mul(dot(random_vec, normal)))).toVar();
+      const bitangent = normalize(cross(normal, tangent)).toVar();
+
+      const occlusion = float(0).toVar();
 
-    this.uniforms._SampleKernel = { value: this.__get_sample_kernel() };
-    this.uniforms._RandomRotation = { value: this.__get_rotation_kernel() };
+      Loop(KERNEL_SIZE, ({ i }) =>
+      {
+        const offset = vec3(kernel.element(i));
+        const sample_pos = frag_pos.add(tangent.mul(offset.x).add(bitangent.mul(offset.y)).add(normal.mul(offset.z)).mul(radius));
+
+        const clip_pos = projection.mul(vec4(sample_pos, 1));
+        const sample_uv = clip_pos.xy.div(clip_pos.w).mul(0.5).add(0.5);
+        const sampled_depth = view_position_at(sample_uv).z;
+
+        const range_check = smoothstep(0, 1, radius.div(abs(frag_pos.z.sub(sampled_depth))));
+
+        occlusion.addAssign(step(sample_pos.z.add(bias), sampled_depth).mul(range_check));
+      });
+
+      return vec4(vec3(occlusion.div(KERNEL_SIZE)), 1);
+    })();
+  }
+
+  set_projection_matrix(projection_matrix: Matrix4)
+  {
+    (this.uniforms._ProjectionMatrix.value as Matrix4).copy(projection_matrix);
+    (this.uniforms._InverseProjMatrix.value as Matrix4).copy(projection_matrix).invert();
   }
 
   __get_sample_kernel()
   {
     const sample_kernel = [];
-    const kernel_size = 64;
 
-    for (let i = 0; i < kernel_size; i++)
+    for (let i = 0; i < KERNEL_SIZE; i++)
     {
       const dir = new Vector3(Math.random() * 2 - 1,
         Math.random() * 2 - 1,
         Math.random());
       dir.normalize();
-      let scale = i / kernel_size;
+      let scale = i / KERNEL_SIZE;
       scale   = OMath.lerp(0.1, 1.0, scale * scale);
       dir.multiplyScalar(scale);
 
@@ -43,17 +140,19 @@ class SSAOMaterial extends BlitMaterial
     return sample_kernel;
   }
 
-  __get_rotation_kernel()
+  // Random xy in RG, no z, so the kernel only spins around the normal.
+  __get_rotation_texture()
   {
-    const rotation_kernel = new Uint8Array(3 * 16);
-    for (let i = 0; i < 16; i++)
+    const rotation_kernel = new Uint8Array(4 * NOISE_SIZE * NOISE_SIZE);
+    for (let i = 0; i < NOISE_SIZE * NOISE_SIZE; i++)
     {
-      rotation_kernel[i * 3 + 1] = Math.floor(Math.random() * 255);
-      rotation_kernel[i * 3 + 2] = Math.floor(Math.random() * 255);
-      rotation_kernel[i * 3 + 3] = 0;
+      rotation_kernel[i * 4 + 0] = Math.floor(Math.random() * 255);
+      rotation_kernel[i * 4 + 1] = Math.floor(Math.random() * 255);
+      rotation_kernel[i * 4 + 2] = 0;
+      rotation_kernel[i * 4 + 3] = 255;
     }
 
-    const rotation_texture = new DataTexture(rotation_kernel, 4, 4, RGBAFormat);
+    const rotation_texture = new DataTexture(rotation_kernel, NOISE_SIZE, NOISE_SIZE, RGBAFormat);
     rotation_texture.wrapS = RepeatWrapping;
     rotation_texture.wrapT = RepeatWrapping;
 

package/src/materials/ScreenSpaceTextureMaterial.ts

@@ -1,42 +1,30 @@
 import type { Texture } from 'three';
 import { Vector2 } from 'three';
-import { BaseShaderMaterial } from './BaseShaderMaterial';
-class ScreenSpaceTextureMaterial extends BaseShaderMaterial
+import { uniform, uv, vec4 } from 'three/tsl';
+import { BlitNodeMaterial } from './BlitNodeMaterial';
+
+// Draws _MainTex on a screen space rectangle, _TextureSize pixels wide and tall, whose
+// bottom left corner sits _ScreenSpacePosition pixels from the bottom left corner of a
+// _ScreenSize pixels screen. The texture is sampled through BlitNodeMaterial, so render
+// targets and regular textures both show upright on every backend.
+class ScreenSpaceTextureMaterial extends BlitNodeMaterial
 {
   constructor()
   {
-    const vert = `
-      uniform vec2 _ScreenSpacePosition;
-      uniform vec2 _ScreenSize;
-      uniform vec2 _TextureSize;
-      varying vec2 vUv;
-      void main()
-      {
-        vec2 pos = uv * vec2(_TextureSize.x / _ScreenSize.x, _TextureSize.y / _ScreenSize.y);
-        pos += vec2(_ScreenSpacePosition.x / _ScreenSize.x, _ScreenSpacePosition.y / _ScreenSize.y);
+    super();
 
-        pos.x = pos.x * 2.0 - 1.0;
-        pos.y = pos.y * 2.0 - 1.0;
+    const screen_space_position = uniform(new Vector2());
+    const screen_size = uniform(new Vector2());
+    const texture_size = uniform(new Vector2());
 
-        gl_Position = vec4(pos, 0.0, 1.0);
-        vUv = uv;
-      }
-    `;
-    const frag = `
-      uniform sampler2D _MainTex;
-      varying vec2 vUv;
+    this.uniforms._ScreenSpacePosition = screen_space_position;
+    this.uniforms._ScreenSize = screen_size;
+    this.uniforms._TextureSize = texture_size;
 
-      void main()
-      {
-        gl_FragColor = texture2D(_MainTex, vUv);
-      }
-    `;
-    super(vert, frag, {
-      _MainTex: { value: undefined },
-      _ScreenSpacePosition: { value: new Vector2() },
-      _ScreenSize: { value: new Vector2() },
-      _TextureSize: { value: new Vector2() }
-    });
+    // Drawn on a 1x1 PlaneGeometry, whose UV is the bottom left based point of the rectangle.
+    const screen_uv = uv().mul(texture_size).add(screen_space_position).div(screen_size);
+
+    this.vertexNode = vec4(screen_uv.mul(2).sub(1), 0, 1);
   }
 
   set_position(x: number, y: number)

package/src/materials/UnrealBloomComposeMaterial.ts

@@ -1,40 +1,49 @@
-import { BlitMaterial } from './BlitMaterial';
+import { BlitNodeMaterial } from './BlitNodeMaterial';
 
-import frag from '../shaders/gaussian_blur/unreal_bloom_compose.frag';
+import { Color, Texture } from 'three';
+import { mix, texture, uniform, vec4 } from 'three/tsl';
+import type { Node } from 'three/webgpu';
 
-import type { Texture } from 'three';
-import { Color } from 'three';
-class UnrealBloomComposeMaterial extends BlitMaterial
+const BLOOM_FACTORS = [1.0, 0.8, 0.6, 0.4, 0.2];
+
+// Sums the blurred mips of GaussianBlurrer, each weighted by its bloom factor and tint.
+// Uniforms are named after the original GLSL shader (blurTexture1..N, bloomStrength...).
+// use_linear_color_space is kept for API compatibility: node materials sample and write
+// linear values on every target, so it no longer changes the shader.
+class UnrealBloomComposeMaterial extends BlitNodeMaterial
 {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   constructor(nMips: number, use_linear_color_space = false)
   {
-    super(frag, undefined, {
-      NUM_MIPS: nMips
-    });
-    this.uniforms._MainTex        = { value: undefined };
-    this.uniforms._BlurredTex     = { value: undefined };
-    this.uniforms._BloomStrength  = { value: 1 };
-
-    this.uniforms.blurTexture1  = { value: null };
-    this.uniforms.blurTexture2  = { value: null };
-    this.uniforms.blurTexture3  = { value: null };
-    this.uniforms.blurTexture4  = { value: null };
-    this.uniforms.blurTexture5  = { value: null };
-
-    this.uniforms.bloomStrength = { value: 1.0 };
-    this.uniforms.bloomFactors  = { value: [1.0, 0.8, 0.6, 0.4, 0.2] };
-    this.uniforms.bloomRadius   = { value: 1.0 };
-
-    this.defines.USE_LINEAR_COLOR_SPACE = use_linear_color_space;
-    const bloomTintColors = [
-      new Color('#FFFFFF'),
-      new Color('#FFFFFF'),
-      new Color('#FFFFFF'),
-      new Color('#FFFFFF'),
-      new Color('#FFFFFF')
-    ];
-
-    this.uniforms.bloomTintColors = { value: bloomTintColors };
+    super();
+
+    const bloom_strength = uniform(1);
+    const bloom_radius = uniform(1);
+    const tint_colors: Color[] = [];
+
+    this.uniforms.bloomStrength = bloom_strength;
+    this.uniforms.bloomRadius = bloom_radius;
+
+    let bloom: Node<'vec4'> = vec4(0);
+
+    for (let i = 0; i < nMips; i++)
+    {
+      const blur_tex = texture(new Texture());
+      const tint_color = new Color('#FFFFFF');
+      const factor = BLOOM_FACTORS[i] ?? BLOOM_FACTORS[BLOOM_FACTORS.length - 1];
+      const lerped_factor = mix(factor, 1.2 - factor, bloom_radius);
+
+      this.uniforms[`blurTexture${i + 1}`] = blur_tex;
+      tint_colors.push(tint_color);
+
+      bloom = bloom.add(this.sample(blur_tex).mul(vec4(uniform(tint_color), 1)).mul(lerped_factor));
+    }
+
+    // The tint uniforms hold these same Color instances, so editing them in place
+    // updates the shader.
+    this.uniforms.bloomTintColors = { value: tint_colors };
+
+    this.fragmentNode = bloom.mul(bloom_strength);
   }
 
   set_blur_texture_0(texture: Texture)

package/src/materials/WorldImageMaterial.ts

@@ -0,0 +1,51 @@
+import type { Texture } from 'three';
+import { DoubleSide, Vector3 } from 'three';
+import { cameraProjectionMatrix, mix, modelViewMatrix, positionGeometry, texture, uniform, vec4 } from 'three/tsl';
+import type { Node } from 'three/webgpu';
+import { NodeMaterial } from 'three/webgpu';
+
+// TSL lets any matrix node expose its columns through .element(), the typings only do it for arrays.
+type MatrixNode = Node<'mat4'> & { element: (column: number) => Node<'vec4'> };
+
+// Draws _MainTex on a WorldImage plane, with its alpha scaled by _Opacity. When
+// _ScreenAligned is 1, the plane drops its rotation and faces the camera, scaled by
+// _Scale instead of the mesh scale.
+class WorldImageMaterial extends NodeMaterial
+{
+  uniforms: {
+    _MainTex: { value: Texture },
+    _ScreenAligned: { value: number },
+    _Scale: { value: Vector3 },
+    _Opacity: { value: number }
+  };
+
+  constructor(map: Texture)
+  {
+    super();
+
+    const main_tex = texture(map);
+    const screen_aligned = uniform(0);
+    const scale = uniform(new Vector3(1, 1, 1));
+    const opacity = uniform(1);
+
+    this.uniforms = { _MainTex: main_tex, _ScreenAligned: screen_aligned, _Scale: scale, _Opacity: opacity };
+
+    // Screen aligned, the rotation and scale columns of modelViewMatrix become
+    // diag(_Scale) and only its translation is kept. Both positions are linear in the
+    // matrix, so blending them equals blending the matrices.
+    const world_aligned = modelViewMatrix.mul(vec4(positionGeometry, 1)).xyz;
+    const camera_aligned = (modelViewMatrix as MatrixNode).element(3).xyz.add(positionGeometry.mul(scale));
+
+    this.vertexNode = cameraProjectionMatrix.mul(vec4(mix(world_aligned, camera_aligned, screen_aligned), 1));
+
+    this.fragmentNode = vec4(main_tex.rgb, main_tex.a.mul(opacity));
+
+    this.transparent = true;
+    this.depthWrite = false;
+    this.side = DoubleSide;
+    // Node materials take scene fog by default. The GLSL material ignored it.
+    this.fog = false;
+  }
+}
+
+export { WorldImageMaterial };

package/src/materials/deferred/DeferredPointLightMaterial.ts

@@ -1,21 +1,52 @@
-import frag from '../../shaders/deferred/point_light.frag';
-import vert from '../../shaders/deferred/point_light.vert';
-
-import { BaseShaderMaterial } from '../../materials/BaseShaderMaterial';
-
 import type { RenderTarget } from 'three';
-import { AdditiveBlending, BackSide, Matrix4 } from 'three';
+import { AdditiveBlending, BackSide, Matrix4, Texture } from 'three';
+import { dot, modelViewPosition, normalize, saturate, screenUV, texture, uniform, vec2, vec4 } from 'three/tsl';
+import { NodeMaterial } from 'three/webgpu';
+
+import { decode_float_rg, decode_normal } from './depth_normal_encoding';
 
-class DeferredPointLightMaterial extends BaseShaderMaterial
+// Light volume of a deferred point light. Drawn on a sphere around the light, it
+// shades the pixels it covers from the albedo and the depth and normals buffers.
+class DeferredPointLightMaterial extends NodeMaterial
 {
+  uniforms: {
+    _Intensity: { value: number },
+    _AlbedoTex: { value: Texture },
+    _NormalDepthTex: { value: Texture },
+    _InverseProjMatrix: { value: Matrix4 }
+  };
+
   constructor(intensity = 1)
   {
-    super(vert, frag, {
-      _Intensity: { value: intensity },
-      _AlbedoTex: { value: undefined },
-      _NormalDepthTex: { value: undefined },
-      _InverseProjMatrix: { value: new Matrix4() }
-    });
+    super();
+
+    const intensity_node = uniform(intensity);
+    const albedo_tex = texture(new Texture());
+    const normal_depth_tex = texture(new Texture());
+    const inverse_proj = uniform(new Matrix4());
+
+    this.uniforms = {
+      _Intensity: intensity_node,
+      _AlbedoTex: albedo_tex,
+      _NormalDepthTex: normal_depth_tex,
+      _InverseProjMatrix: inverse_proj
+    };
+
+    // screenUV has a top left origin on both backends, and texture() flips
+    // render targets to match, so the buffers line up with the light volume.
+    const ndc = vec2(screenUV.x.mul(2).sub(1), screenUV.y.mul(-2).add(1));
+    const far_plane_ray = inverse_proj.mul(vec4(ndc, 1, 1));
+
+    const depth_normal = normal_depth_tex.sample(screenUV);
+    const frag_pos = far_plane_ray.xyz.div(far_plane_ray.w).mul(decode_float_rg(depth_normal.xy));
+    const normal = normalize(decode_normal(depth_normal.zw));
+    const albedo = albedo_tex.sample(screenUV).rgb;
+
+    const to_light = modelViewPosition.sub(frag_pos);
+    const diffuse = saturate(dot(normal, normalize(to_light)));
+    const attenuation = intensity_node.div(dot(to_light, to_light));
+
+    this.colorNode = vec4(albedo.mul(diffuse).mul(attenuation), 1);
 
     this.blending = AdditiveBlending;
     this.depthWrite = false;
@@ -24,7 +55,7 @@ class DeferredPointLightMaterial extends BaseShaderMaterial
 
   set_inverse_proj_matrix(mat4: Matrix4)
   {
-    (this.uniforms._InverseProjMatrix.value as Matrix4).copy(mat4);
+    this.uniforms._InverseProjMatrix.value.copy(mat4);
   }
 
   set_normal_depth_rt(rt: RenderTarget)

package/src/materials/deferred/depth_normal_encoding.ts

@@ -0,0 +1,36 @@
+import { dot, float, fract, Fn, vec2, vec3 } from 'three/tsl';
+import type { Node } from 'three/webgpu';
+
+// Packing shared by DepthAndNormalsRenderer and its consumers: depth01 goes in RG,
+// the view space normal in BA. Each value spreads over two 8 bit channels.
+
+const NORMAL_SCALE = 1.7777;
+
+// Splits a [0, 1) float over two channels. 1.0 itself wraps around to 0.
+const encode_float_rg = Fn(([value]: [Node<'float'>]) =>
+{
+  const encoded = fract(vec2(1, 255).mul(value));
+
+  return vec2(encoded.x.sub(encoded.y.div(255)), encoded.y);
+});
+
+const decode_float_rg = Fn(([encoded]: [Node<'vec2'>]) =>
+{
+  return dot(encoded, vec2(1, 1 / 255));
+});
+
+// Stereographic projection of a unit normal onto two channels.
+const encode_normal = Fn(([normal]: [Node<'vec3'>]) =>
+{
+  return normal.xy.div(normal.z.add(1)).div(NORMAL_SCALE).mul(0.5).add(0.5);
+});
+
+const decode_normal = Fn(([encoded]: [Node<'vec2'>]) =>
+{
+  const projected = vec3(encoded.mul(2 * NORMAL_SCALE).sub(NORMAL_SCALE), 1);
+  const g = float(2).div(dot(projected, projected));
+
+  return vec3(projected.xy.mul(g), g.sub(1));
+});
+
+export { decode_float_rg, decode_normal, encode_float_rg, encode_normal };

package/src/primitives/Cube.ts

@@ -6,7 +6,7 @@ class Cube extends Mesh
   {
     size     = size || new Vector3(1, 1, 1);
     segments = segments || new Vector3(1, 1, 1);
-    color    = color || 0xff0000;
+    color    = color ?? 0xff0000;
 
     const geometry = new BoxGeometry(size.x, size.y, size.z, segments.x, segments.y, segments.z);
     const material = new MeshBasicMaterial({ color: color });

package/src/primitives/Sphere.ts

@@ -9,7 +9,7 @@ class Sphere extends Mesh
 
   constructor(radius: number, color: number | string)
   {
-    color = color || '#FF0000';
+    color = color ?? '#FF0000';
     radius = radius || 1;
     const geometry = new SphereGeometry(radius, 64, 64);
     const material = new MeshBasicMaterial({ color: color });

package/src/raycast/GroupRaycaster.ts

@@ -3,7 +3,7 @@ import type { Input } from '../lib/Input';
 import { RaycastResolver } from './RaycastResolver';
 import { IdleState } from './states/IdleState';
 
-import type { Camera, Intersection, Object3D } from 'three';
+import type { Camera, Intersection, Object3D, Vector2 } from 'three';
 import { Raycaster } from 'three';
 import type { BaseState } from './states/BaseState';
 
@@ -36,7 +36,7 @@ class GroupRaycaster
 
   update()
   {
-    this.raycaster.setFromCamera(this.input.NDC, this.camera);
+    this.raycaster.setFromCamera(this.input.NDC as Vector2, this.camera);
     this.current_intersections = this.raycaster.intersectObjects(this.raycastee_group);
     this.current_state.update(this);
   }