ohzi-core 13.3.0 → 15.0.0

package/src/dev_bridge/ViewNavigator.ts

@@ -0,0 +1,101 @@
+export interface ViewSummary
+{
+  name: string;
+  url: string;
+  current: boolean;
+}
+
+export interface ViewManagerLike
+{
+  views: Array<{ name?: unknown; url?: unknown }>;
+  get_current_view(): { name?: unknown } | undefined;
+  go_to_view(name: string, change_url?: boolean, skip?: boolean): void;
+}
+
+export interface NavigateRequest
+{
+  name?: unknown;
+  change_url?: unknown;
+  skip?: unknown;
+}
+
+export interface NavigateResult
+{
+  requested: string;
+  current: string | null;
+  change_url: boolean;
+  skip: boolean;
+}
+
+// ViewManager.get() returns undefined for an unknown name and go_to_view then
+// dereferences v.url, so the name is validated here before it can throw.
+class ViewNavigator
+{
+  list(manager: ViewManagerLike): { current: string | null; views: ViewSummary[] }
+  {
+    const current = this.current(manager);
+
+    return {
+      current,
+      views: this.names(manager).map((view) => ({
+        name: view.name,
+        url: view.url,
+        current: view.name === current
+      }))
+    };
+  }
+
+  go(manager: ViewManagerLike, request: NavigateRequest): NavigateResult
+  {
+    const name = typeof request.name === 'string' ? request.name : null;
+    const available = this.names(manager);
+
+    if (name === null || !available.some((view) => view.name === name))
+    {
+      const listed = available.map((view) => view.name).join(', ');
+
+      throw this.error('not_found', `Unknown view. Available views: ${listed}.`);
+    }
+
+    const change_url = request.change_url === undefined ? true : request.change_url === true;
+    const skip = request.skip === true;
+
+    manager.go_to_view(name, change_url, skip);
+
+    return { requested: name, current: this.current(manager), change_url, skip };
+  }
+
+  private names(manager: ViewManagerLike): Array<{ name: string; url: string }>
+  {
+    const views = Array.isArray(manager.views) ? manager.views : [];
+
+    return views
+      .filter((view) => typeof view.name === 'string')
+      .map((view) => ({
+        name: view.name as string,
+        url: typeof view.url === 'string' ? view.url : ''
+      }));
+  }
+
+  private current(manager: ViewManagerLike): string | null
+  {
+    const view = manager.get_current_view();
+
+    if (typeof view !== 'object' || view === null || typeof view.name !== 'string')
+    {
+      return null;
+    }
+
+    return view.name;
+  }
+
+  private error(code: string, message: string): Error
+  {
+    const error: Error & { code?: string } = new Error(message);
+    error.code = code;
+
+    return error;
+  }
+}
+
+export { ViewNavigator };

package/src/dev_bridge/protocol.ts

@@ -0,0 +1,31 @@
+// This file MUST stay in sync with mcp/src/protocol.ts.
+// A mismatch is caught at handshake time and refuses the connection.
+export const PROTOCOL_VERSION = 1;
+
+export interface CanvasInfo
+{
+  width: number;
+  height: number;
+  dpr: number;
+}
+
+export interface AppInfo
+{
+  core_version: string;
+  components_version: string;
+  pit_version: string;
+  active_view: string | null;
+  has_camera: boolean;
+  canvas: CanvasInfo;
+}
+
+export interface Command
+{
+  id: string;
+  cmd: string;
+  args?: Record<string, unknown>;
+}
+
+export type Reply =
+  | { id: string; ok: true; result: unknown }
+  | { id: string; ok: false; error: { code: string; message: string } };

package/src/index.ts

@@ -1,7 +1,6 @@
 import { BaseApplication } from './BaseApplication';
 import { AddMaterial } from './materials/AddMaterial';
-import { BaseShaderMaterial } from './materials/BaseShaderMaterial';
-import { BlitMaterial } from './materials/BlitMaterial';
+import { BlitNodeMaterial } from './materials/BlitNodeMaterial';
 import { UnrealBloomComposeMaterial } from './materials/UnrealBloomComposeMaterial';
 import { BaseRender } from './render_mode/BaseRender';
 import { AbstractLoader } from './resource_loader/AbstractLoader';
@@ -17,7 +16,18 @@ import { CameraManager } from './CameraManager';
 import { CanvasDrawer } from './canvas_drawer/CanvasDrawer';
 import { SimpleTextDrawer } from './canvas_drawer/SimpleTextDrawer';
 import { Capabilities } from './Capabilities';
+import { CameraBridge } from './dev_bridge/CameraBridge';
+import { CaptureService } from './dev_bridge/CaptureService';
+import { ConsoleBuffer } from './dev_bridge/ConsoleBuffer';
+import { DebugDrawer } from './dev_bridge/DebugDrawer';
+import { InputSynthesizer } from './dev_bridge/InputSynthesizer';
+import { PerformanceProbe } from './dev_bridge/PerformanceProbe';
+import { RenderModeRegistry } from './dev_bridge/RenderModeRegistry';
+import { SceneEditor } from './dev_bridge/SceneEditor';
+import { SceneInspector } from './dev_bridge/SceneInspector';
+import { ViewNavigator } from './dev_bridge/ViewNavigator';
 import { Debug } from './Debug';
+import { DevBridge } from './dev_bridge/DevBridge';
 import { Graphics } from './Graphics';
 import { CSSAnimator } from './html_utilities/CSSAnimator';
 import { Initializer } from './Initializer';
@@ -26,7 +36,9 @@ import { OrthographicCamera } from './OrthographicCamera';
 import { OS } from './OS';
 import { OScreen } from './OScreen';
 import { PerspectiveCamera } from './PerspectiveCamera';
+import { BloomRender } from './render_mode/BloomRender';
 import { DebugNormalsRender } from './render_mode/DebugNormalsRender';
+import { DeferredRender } from './render_mode/DeferredRender';
 import { NormalAORender } from './render_mode/NormalAORender';
 import { NormalRender } from './render_mode/NormalRender';
 import { UnrealBloomRender } from './render_mode/UnrealBloomRender';
@@ -80,14 +92,9 @@ import { VectorInterpolator } from './action_sequencer/VectorInterpolator';
 
 import { DualFilteringBlurrer } from './render_utilities/DualFilteringBlurrer';
 import { GaussianBlurrer } from './render_utilities/GaussianBlurrer';
-import { MedianFilter } from './render_utilities/MedianFilter';
 
 import { Blurrer } from './render_utilities/Blurrer';
 
-import { GPUParticleSystem } from './gpu_particles/GPUParticleSystem';
-import { ParticleAttribute } from './gpu_particles/ParticleAttribute';
-import { ParticlePositionAttribute } from './gpu_particles/ParticlePositionAttribute';
-
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { DualFilteringBlurMaterial } from './materials/DualFilteringBlurMaterial';
 
@@ -125,12 +132,12 @@ import { AbstractCameraState } from './camera_controller/states/common/AbstractC
 import { CommonCameraState } from './camera_controller/states/common/CommonCameraState';
 
 export {
-    AbstractCameraState, AbstractLoader, AbstractScene, ActionEvent, ActionInterpolator, ActionSequencer, ActionSequencerBuilder, AddMaterial, ApplicationView, ArrayUtilities, Arrow, AsyncAbstractLoader, AsyncAudiosLoader, AsyncObjectsLoader, AsyncTextureLoader, AsyncTexturesLoader, AudioLoader, BaseApplication, BaseRender, BaseShaderMaterial, BasisLoader, BlitMaterial, Blurrer, Browser, BufferGeometryUtils, CameraController, CameraManager, CameraMovementMode, CameraUtilities, CanvasDrawer, Capabilities, CommonCameraState, Compilator, CSSAnimator, Cube, CubemapLoader, DAELoader, Debug, DebugNormalsRender, DrawIOAnimationSheet, DualFilteringBlurMaterial, DualFilteringBlurrer, EasingFunctions, FileLoader,
-    FontLoader, FrustumPointFitter, GaussianBlurrer, GeometryUtilities, GLTFDRACOLoader, GLTFLoader, GPUParticleSystem, Graphics, Grid, HDRCubeTextureLoader, HDRTextureLoader, HighQualityLoadingState, HorizontalPlane, HTMLUtilities,
-    ImageUtilities, ImmediateMode, Initializer, JSONLoader, KeyboardInput, Line, LoadingState, MedianFilter, MeshSampler,
+    AbstractCameraState, AbstractLoader, AbstractScene, ActionEvent, ActionInterpolator, ActionSequencer, ActionSequencerBuilder, AddMaterial, ApplicationView, ArrayUtilities, Arrow, AsyncAbstractLoader, AsyncAudiosLoader, AsyncObjectsLoader, AsyncTextureLoader, AsyncTexturesLoader, AudioLoader, BaseApplication, BaseRender, BasisLoader, BlitNodeMaterial, BloomRender, Blurrer, Browser, BufferGeometryUtils, CameraBridge, CameraController, CameraManager, CameraMovementMode, CameraUtilities, CanvasDrawer, Capabilities, CaptureService, CommonCameraState, Compilator, ConsoleBuffer, CSSAnimator, Cube, CubemapLoader, DAELoader, Debug, DebugDrawer, DebugNormalsRender, DeferredRender, DevBridge, DrawIOAnimationSheet, DualFilteringBlurMaterial, DualFilteringBlurrer, EasingFunctions, FileLoader,
+    FontLoader, FrustumPointFitter, GaussianBlurrer, GeometryUtilities, GLTFDRACOLoader, GLTFLoader, Graphics, Grid, HDRCubeTextureLoader, HDRTextureLoader, HighQualityLoadingState, HorizontalPlane, HTMLUtilities,
+    ImageUtilities, ImmediateMode, Initializer, InputSynthesizer, JSONLoader, KeyboardInput, Line, LoadingState, MeshSampler,
     ModelUtilities, NormalAORender,
-    NormalRender, NumberInterpolator, ObjectUtilities, OBJLoader, OMath, OrthographicCamera, OrthographicFrustumPointFitter, OS, OScreen, ParticleAttribute,
-    ParticlePositionAttribute, PerspectiveCamera, PerspectiveFrustumPointFitter, PointArrayLoader, RegularLoadingState, RenderLoop, ResourceBatch,
-    ResourceContainer, SceneManager, Screen, SDFTextBatch, SimpleTextDrawer, Sphere, StringUtilities, Text2D, TextLoader, TextureLoader, Time, TimeUtilities, TransitionManager, TransitionTable, UnrealBloomComposeMaterial, UnrealBloomRender, UpdatableMaterialMesh, Validation, VectorInterpolator, VerticalPlane, VideoLoader, ViewComponent,
-    ViewComponentManager, ViewManager, VRRender, WorldImage
+    NormalRender, NumberInterpolator, ObjectUtilities, OBJLoader, OMath, OrthographicCamera, OrthographicFrustumPointFitter, OS, OScreen,
+    PerformanceProbe, PerspectiveCamera, PerspectiveFrustumPointFitter, PointArrayLoader, RegularLoadingState, RenderLoop, RenderModeRegistry, ResourceBatch,
+    ResourceContainer, SceneEditor, SceneInspector, SceneManager, Screen, SDFTextBatch, SimpleTextDrawer, Sphere, StringUtilities, Text2D, TextLoader, TextureLoader, Time, TimeUtilities, TransitionManager, TransitionTable, UnrealBloomComposeMaterial, UnrealBloomRender, UpdatableMaterialMesh, Validation, VectorInterpolator, VerticalPlane, VideoLoader, ViewComponent,
+    ViewComponentManager, ViewManager, ViewNavigator, VRRender, WorldImage
 };

package/src/materials/AddMaterial.ts

@@ -1,15 +1,22 @@
-import { BlitMaterial } from './BlitMaterial';
+import { BlitNodeMaterial } from './BlitNodeMaterial';
 
-import type { Texture } from 'three';
-import frag from '../shaders/add/add.frag';
+import { Texture } from 'three';
+import { texture } from 'three/tsl';
 
-class AddMaterial extends BlitMaterial
+// Outputs _MainTex plus _SecondTex.
+// use_half_float is kept for API compatibility: node materials sample and write linear
+// values on every target, so it no longer changes the shader.
+class AddMaterial extends BlitNodeMaterial
 {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   constructor(use_half_float = false)
   {
-    super(frag);
-    this.defines.USE_LINEAR_COLOR_SPACE = use_half_float;
-    this.uniforms._SecondTex = { value: undefined };
+    super();
+
+    const second_tex = texture(new Texture());
+    this.uniforms._SecondTex = second_tex;
+
+    this.fragmentNode = this.sample_main_tex().add(this.sample(second_tex));
   }
 
   set_add_texture(tex: Texture)

package/src/materials/BlitNodeMaterial.ts

@@ -0,0 +1,85 @@
+import { NoBlending, Texture, Vector2 } from 'three';
+import { positionGeometry, texture, uniform, uv, vec4 } from 'three/tsl';
+import { type Node, NodeMaterial, type TextureNode } from 'three/webgpu';
+
+type TextureKind = Texture & { isRenderTargetTexture?: boolean, isFramebufferTexture?: boolean, isDepthTexture?: boolean };
+
+// Same textures three's TextureNode treats as top left origin on both backends.
+function has_top_left_origin(value: TextureKind): boolean
+{
+  return value.isRenderTargetTexture === true || value.isFramebufferTexture === true || value.isDepthTexture === true;
+}
+
+// TSL counterpart of BlitMaterial for the WebGPURenderer (WebGPU and WebGL2 backends).
+// Uniforms are TSL nodes stored under the same names as BlitMaterial, and every node
+// exposes `.value`, so Blitter and render modes drive both materials the same way.
+class BlitNodeMaterial extends NodeMaterial
+{
+  uniforms: { [uniform: string]: { value: any } };
+  uv_by_texture = new Map<TextureNode, Node<'vec2'>>();
+  top_left_origin_by_texture = new Map<TextureNode, Node<'bool'>>();
+
+  constructor()
+  {
+    super();
+
+    this.uniforms = {
+      _MainTex: texture(new Texture()),
+      _Resolution: uniform(new Vector2(0, 0)),
+      _TargetResolution: uniform(new Vector2(0, 0))
+    };
+
+    // Blitter draws a 1x1 PlaneGeometry, stretched here to cover clip space.
+    this.vertexNode = vec4(positionGeometry.xy.mul(2), 0, 1);
+    this.fragmentNode = this.sample_main_tex();
+
+    this.depthWrite = false;
+    this.depthTest = false;
+    this.blending = NoBlending;
+  }
+
+  // PlaneGeometry UVs start at the bottom left, which matches regular textures.
+  // Render targets are sampled with a top left origin, so their UVs are flipped.
+  // Decided per draw, since the same material blits both kinds.
+  uv_for(texture_node: TextureNode)
+  {
+    let texture_uv = this.uv_by_texture.get(texture_node);
+
+    if (texture_uv === undefined)
+    {
+      texture_uv = this.texture_uv_at(texture_node, uv());
+      this.uv_by_texture.set(texture_node, texture_uv);
+    }
+
+    return texture_uv;
+  }
+
+  // Same mapping for any point of the quad, given in its bottom left UV space,
+  // where the matching clip space position is quad_uv * 2 - 1.
+  texture_uv_at(texture_node: TextureNode, quad_uv: Node<'vec2'>)
+  {
+    let top_left_origin = this.top_left_origin_by_texture.get(texture_node);
+
+    if (top_left_origin === undefined)
+    {
+      top_left_origin = uniform(false).onObjectUpdate(() => has_top_left_origin(texture_node.value as TextureKind));
+      this.top_left_origin_by_texture.set(texture_node, top_left_origin);
+    }
+
+    return top_left_origin.select(quad_uv.flipY(), quad_uv);
+  }
+
+  sample(texture_node: TextureNode, offset?: Node<'vec2'>)
+  {
+    const base_uv = this.uv_for(texture_node);
+
+    return texture_node.sample(offset ? base_uv.add(offset) : base_uv);
+  }
+
+  sample_main_tex(offset?: Node<'vec2'>)
+  {
+    return this.sample(this.uniforms._MainTex as TextureNode, offset);
+  }
+}
+
+export { BlitNodeMaterial };

package/src/materials/BloomComposeMaterial.ts

@@ -1,23 +1,35 @@
-import { CustomBlending, OneFactor } from 'three';
-import frag from '../shaders/bloom/bloom_compose.frag';
-import cheap_frag from '../shaders/bloom/cheap_bloom_compose.frag';
-import { BlitMaterial } from './BlitMaterial';
+import { CustomBlending, OneFactor, Texture } from 'three';
+import { texture, uniform } from 'three/tsl';
+import { BlitNodeMaterial } from './BlitNodeMaterial';
 
-class BloomComposeMaterial extends BlitMaterial
+// Adds the blurred image on top of _MainTex. With alpha_blending it outputs only the
+// blur and relies on additive blending against whatever is already in the target.
+class BloomComposeMaterial extends BlitNodeMaterial
 {
   constructor(alpha_blending: boolean = false)
   {
-    super(alpha_blending ? cheap_frag : frag);
-    this.uniforms._MainTex        = { value: undefined };
-    this.uniforms._BlurredTex     = { value: undefined };
-    this.uniforms._BloomStrength  = { value: 1 };
+    super();
+
+    const blurred_tex = texture(new Texture());
+    const bloom_strength = uniform(1);
+
+    this.uniforms._BlurredTex = blurred_tex;
+    this.uniforms._BloomStrength = bloom_strength;
+
+    const blur = this.sample(blurred_tex);
 
     if (alpha_blending)
     {
+      this.fragmentNode = blur;
+
       this.blending  = CustomBlending;
       this.blendSrc  = OneFactor;
       this.blendDst  = OneFactor;
     }
+    else
+    {
+      this.fragmentNode = this.sample_main_tex().add(blur.mul(bloom_strength));
+    }
   }
 }
 

package/src/materials/BoxBlurMaterial.ts

@@ -1,15 +1,35 @@
-import { BlitMaterial } from '../materials/BlitMaterial';
-
-import frag from '../shaders/box_blur/box_blur.frag';
+import { BlitNodeMaterial } from '../materials/BlitNodeMaterial';
 
 import { Vector2 } from 'three';
+import { uniform, vec2 } from 'three/tsl';
+
+const DISTANCE = 2;
+const TAPS: Array<[number, number]> = [
+  [-4, 0.0525], [-3, 0.075], [-2, 0.110], [-1, 0.150],
+  [0, 0.225],
+  [1, 0.150], [2, 0.110], [3, 0.075], [4, 0.0525]
+];
 
-class BoxBlurMaterial extends BlitMaterial
+// One separable pass of a 9 tap blur along _SampleDir.
+class BoxBlurMaterial extends BlitNodeMaterial
 {
   constructor()
   {
-    super(frag);
-    this.uniforms._SampleDir = { value: new Vector2() };
+    super();
+
+    const sample_dir = uniform(new Vector2());
+    this.uniforms._SampleDir = sample_dir;
+
+    const resolution = this.uniforms._Resolution as typeof sample_dir;
+    const dir = sample_dir.mul(vec2(0.5).div(resolution));
+
+    const taps = TAPS.map(([step, weight]) =>
+    {
+      const tap = step === 0 ? this.sample_main_tex() : this.sample_main_tex(dir.mul(step * DISTANCE));
+      return tap.mul(weight);
+    });
+
+    this.fragmentNode = taps.reduce((sum, tap) => sum.add(tap));
   }
 }
 

package/src/materials/ClearDepthNormalMaterial.ts

@@ -1,16 +1,22 @@
-import { BlitMaterial } from '../materials/BlitMaterial';
-
-import frag from '../shaders/clear/clear_depth_normal.frag';
+import { BlitNodeMaterial } from '../materials/BlitNodeMaterial';
+import { encode_float_rg, encode_normal } from './deferred/depth_normal_encoding';
 
 import type { Vector3 } from 'three';
 import { Vector4 } from 'three';
+import { normalize, uniform, vec4 } from 'three/tsl';
 
-class ClearDepthNormalMaterial extends BlitMaterial
+// Fills a depth and normals target with one depth (x) and view space normal (yzw).
+class ClearDepthNormalMaterial extends BlitNodeMaterial
 {
   constructor(clear_depth: number, clear_normal: Vector3)
   {
-    super(frag);
-    this.uniforms._DepthNormal = { value: new Vector4(clear_depth, clear_normal.x, clear_normal.y, clear_normal.z) };
+    super();
+
+    const depth_normal = uniform(new Vector4(clear_depth, clear_normal.x, clear_normal.y, clear_normal.z));
+
+    this.uniforms._DepthNormal = depth_normal;
+
+    this.fragmentNode = vec4(encode_float_rg(depth_normal.x), encode_normal(normalize(depth_normal.yzw)));
   }
 }
 

package/src/materials/DepthNormalMaterial.ts

@@ -1,29 +1,40 @@
-import frag from '../shaders/depth_normals/depth_normals.frag';
-import vert from '../shaders/depth_normals/depth_normals.vert';
+import { NoBlending } from 'three';
+import { abs, normalize, normalView, positionView, uniform, vec4 } from 'three/tsl';
+import { NodeMaterial } from 'three/webgpu';
 
-import { ShaderMaterial } from 'three';
+import { encode_float_rg, encode_normal } from './deferred/depth_normal_encoding';
 
-class DepthNormalMaterial extends ShaderMaterial
+// Scene override that writes linear depth over the far plane (RG) and the
+// view space normal (BA), packed by depth_normal_encoding.
+class DepthNormalMaterial extends NodeMaterial
 {
+  uniforms: { _FarPlane: { value: number } };
+
   constructor()
   {
-    super({
-      uniforms: {
-        _FarPlane: { value: 1 }
-      },
-      vertexShader: vert,
-      fragmentShader: frag
-    });
+    super();
+
+    const far_plane = uniform(1);
+
+    this.uniforms = { _FarPlane: far_plane };
+
+    this.fragmentNode = vec4(
+      encode_float_rg(abs(positionView.z).div(far_plane)),
+      encode_normal(normalize(normalView))
+    );
+
+    // The normal lives in alpha, so it must be written as is.
+    this.blending = NoBlending;
   }
-  
+
   set far_plane(value: number)
   {
     this.uniforms._FarPlane.value = value;
   }
-  
+
   get far_plane(): number
   {
-    return this.uniforms._FarPlane.value as number;
+    return this.uniforms._FarPlane.value;
   }
 }
 

package/src/materials/DualFilteringBlurMaterial.ts

@@ -1,13 +1,40 @@
-import { BlitMaterial } from './BlitMaterial';
+import { BlitNodeMaterial } from './BlitNodeMaterial';
 
-import downsample_frag from '../shaders/dual_filter_blur/downsample.frag';
-import upsample_frag from '../shaders/dual_filter_blur/upsample.frag';
+import { vec2 } from 'three/tsl';
+import type { Node } from 'three/webgpu';
 
-class DualFilteringBlurMaterial extends BlitMaterial
+// [x, y, weight]: tap offsets in half source texels, as in the GLSL material.
+type Tap = [number, number, number];
+
+// The center plus the four diagonals.
+const DOWNSAMPLE_TAPS: Tap[] = [
+  [0, 0, 4],
+  [-1, -1, 1], [1, 1, 1], [1, -1, 1], [-1, 1, 1]
+];
+
+// A ring of eight taps, where the diagonals weigh twice the side taps.
+const UPSAMPLE_TAPS: Tap[] = [
+  [-2, 0, 1], [-1, 1, 2], [0, 2, 1], [1, 1, 2],
+  [2, 0, 1], [1, -1, 2], [0, -2, 1], [-1, -1, 2]
+];
+
+// One pass of the dual filtering (Kawase) blur. Taps land between texels, so the
+// linear filter averages several texels per fetch. Both kernels are symmetric, so
+// render targets (top left origin) and regular textures blur the same.
+class DualFilteringBlurMaterial extends BlitNodeMaterial
 {
   constructor(upsample: boolean)
   {
-    super(upsample ? upsample_frag : downsample_frag);
+    super();
+
+    // Blitter sets _Resolution to the source size on every blit.
+    const half_pixel = vec2(0.5).div(this.uniforms._Resolution as unknown as Node<'vec2'>);
+    const taps = upsample ? UPSAMPLE_TAPS : DOWNSAMPLE_TAPS;
+
+    const weighted_taps = taps.map(([x, y, weight]) => this.sample_main_tex(half_pixel.mul(vec2(x, y))).mul(weight));
+    const weight_sum = taps.reduce((sum, [, , weight]) => sum + weight, 0);
+
+    this.fragmentNode = weighted_taps.reduce((sum, tap) => sum.add(tap)).div(weight_sum);
   }
 }
 

package/src/materials/GaussianBlurMaterial.ts

@@ -1,29 +1,51 @@
-import { BlitMaterial } from './BlitMaterial';
-
-import frag from '../shaders/gaussian_blur/gaussian_blur.frag';
+import { BlitNodeMaterial } from './BlitNodeMaterial';
 
 import { Vector2 } from 'three';
+import { uniform, vec2 } from 'three/tsl';
 
-class GaussianBlurMaterial extends BlitMaterial
+function gaussian_pdf(x: number, sigma: number)
+{
+  return 0.39894 * Math.exp(-0.5 * x * x / (sigma * sigma)) / sigma;
+}
+
+// One separable pass of a gaussian blur along direction. The kernel is fixed per
+// material, so its weights are computed here and the taps are unrolled into the graph.
+class GaussianBlurMaterial extends BlitNodeMaterial
 {
   constructor(kernel_radius: number)
   {
-    super(frag, undefined, {
-      KERNEL_RADIUS: kernel_radius,
-      SIGMA: kernel_radius
-    });
+    super();
+
+    const tex_size = uniform(new Vector2(0.5, 0.5));
+    const direction = uniform(new Vector2(0.5, 0.5));
+    const radius = uniform(1);
+
+    this.uniforms.texSize = tex_size;
+    this.uniforms.direction = direction;
+    this.uniforms.radius = radius;
+
+    const sigma = kernel_radius;
+    const step = direction.mul(vec2(1).div(tex_size)).mul(radius);
+
+    let weight_sum = gaussian_pdf(0, sigma);
+    let color_sum = this.sample_main_tex().mul(weight_sum);
+
+    for (let i = 1; i < kernel_radius; i++)
+    {
+      const weight = gaussian_pdf(i, sigma);
+      const offset = step.mul(i);
+      const pair = this.sample_main_tex(offset).add(this.sample_main_tex(offset.negate()));
 
-    this.uniforms.texSize = { value: new Vector2(0.5, 0.5) };
-    this.uniforms.direction = { value: new Vector2(0.5, 0.5) };
-    this.uniforms.radius = { value: 1 };
+      color_sum = color_sum.add(pair.mul(weight));
+      weight_sum += 2 * weight;
+    }
 
-    this.defines.USE_LINEAR_COLOR_SPACE = true;
+    this.fragmentNode = color_sum.div(weight_sum);
   }
 
   set_size(w: number, h: number)
   {
-    (this.uniforms.texSize.value as Vector2).x = w;
-    (this.uniforms.texSize.value as Vector2).y = h;
+    (this.uniforms.texSize.value as Vector2).set(w, h);
   }
 
   set_direction(x: number, y: number)

package/src/materials/LineMaterial.ts

@@ -0,0 +1,52 @@
+import { Color } from 'three';
+import { abs, attribute, cameraPosition, cameraProjectionMatrix, cameraViewMatrix, cross, float, modelWorldMatrix, normalize, positionGeometry, uniform, varying, vec4 } from 'three/tsl';
+import { NodeMaterial } from 'three/webgpu';
+
+// Draws a Line as a flat ribbon that faces the camera. Line stores every point twice,
+// with orientation 1 and -1, and the vertex stage pushes the two copies apart by
+// _Thickness, across both the line and the direction to the camera. The ribbon is
+// _Color along its middle and half as bright at its edges.
+class LineMaterial extends NodeMaterial
+{
+  uniforms: {
+    _Thickness: { value: number },
+    _Length: { value: number },
+    _ElapsedTime: { value: number },
+    _Color: { value: Color }
+  };
+
+  constructor()
+  {
+    super();
+
+    const thickness = uniform(0.2);
+    const color = uniform(new Color('#FF0000'));
+
+    // The shader does not read _Length or _ElapsedTime. Line keeps _Length equal to its
+    // total length for code that reads it.
+    this.uniforms = { _Thickness: thickness, _Length: uniform(0), _ElapsedTime: uniform(0), _Color: color };
+
+    const orientation = attribute('orientation', 'float');
+    const world_next = modelWorldMatrix.mul(vec4(attribute('next_position', 'vec3'), 1)).xyz;
+    const world_previous = modelWorldMatrix.mul(vec4(attribute('previous_position', 'vec3'), 1)).xyz;
+
+    const along = normalize(world_previous.sub(world_next));
+    const across = normalize(cross(along, normalize(cameraPosition.sub(world_next))));
+    const world_position = modelWorldMatrix.mul(vec4(positionGeometry, 1)).xyz
+      .add(across.mul(thickness.mul(0.5)).mul(orientation));
+
+    this.vertexNode = cameraProjectionMatrix.mul(cameraViewMatrix).mul(vec4(world_position, 1));
+
+    // -1 on one edge of the ribbon, 0 along its middle, 1 on the other edge.
+    const side = varying(orientation);
+
+    this.fragmentNode = vec4(color.mul(float(1).sub(abs(side)).mul(0.5).add(0.5)), 1);
+
+    this.transparent = true;
+    this.depthWrite = false;
+    // Node materials take scene fog by default. The GLSL material ignored it.
+    this.fog = false;
+  }
+}
+
+export { LineMaterial };