@opsydyn/effect-three 0.3.0 → 0.6.4

package/src/webgl/points.ts

@@ -0,0 +1,205 @@
+/**
+ * The WebGL kit's points: three's `Points` with the materials Drei draws them with
+ * (`bf6f4ad`): its `PointMaterial` (three's `PointsMaterial` with a round mask), and the
+ * shaders of its `Sparkles` and `Stars`, ported as they are. The buffers come from the
+ * kernel (`pointBuffers`), the same for every renderer.
+ *
+ * One change from Drei's `PointMaterial`: it applies tone mapping and the output colour
+ * space a second time after its mask, which brightens the dots; here the mask only sets
+ * the alpha, and fully masked corners are discarded so opaque dots are round too.
+ *
+ * @module
+ */
+import {
+  AdditiveBlending,
+  BufferAttribute,
+  BufferGeometry,
+  Group,
+  type Material,
+  Points,
+  PointsMaterial,
+  ShaderMaterial,
+} from 'three';
+
+import type { PointLook, PointsNode } from '../kernel/description.ts';
+import { type PointBuffers, pointBuffers } from '../kernel/pointBuffers.ts';
+import type { HostedPoints } from '../kernel/renderKit.ts';
+
+/** Drei's `PointMaterial` mask: 1 inside the circle, smoothed over a pixel at its edge. */
+const roundMask = /* glsl */ `
+  vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+  float r = dot(cxy, cxy);
+  float delta = fwidth(r);
+  float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+  gl_FragColor.a *= mask;
+  if (gl_FragColor.a < 0.01) discard;
+`;
+
+/** Dots: `PointsMaterial` with a size factor a point and, round, Drei's mask. */
+const dotsMaterial = (look: Extract<PointLook, { readonly _tag: 'Dots' }>): Material => {
+  const material = new PointsMaterial({
+    color: 0xffffff,
+    vertexColors: true,
+    size: look.size,
+    sizeAttenuation: look.sizeAttenuation,
+    opacity: look.opacity,
+    transparent: look.transparent,
+  });
+  material.onBeforeCompile = (shader) => {
+    shader.vertexShader = shader.vertexShader
+      .replace('uniform float size;', 'uniform float size;\nattribute float pointSize;')
+      .replace('gl_PointSize = size;', 'gl_PointSize = size * pointSize;');
+    if (look.round) {
+      shader.fragmentShader = shader.fragmentShader.replace(
+        '#include <opaque_fragment>',
+        `#include <opaque_fragment>\n${roundMask}`,
+      );
+    }
+  };
+  material.customProgramCacheKey = () => `effect-three:dots:${look.round}`;
+  return material;
+};
+
+/** Drei's `SparklesImplMaterial`, its shaders as Drei writes them. */
+const sparklesMaterial = (): ShaderMaterial =>
+  new ShaderMaterial({
+    uniforms: { time: { value: 0 }, pixelRatio: { value: 1 } },
+    vertexShader: /* glsl */ `
+      uniform float pixelRatio;
+      uniform float time;
+      attribute float size;
+      attribute float speed;
+      attribute float opacity;
+      attribute vec3 noise;
+      attribute vec3 color;
+      varying vec3 vColor;
+      varying float vOpacity;
+      void main() {
+        vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+        modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
+        modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
+        modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
+        vec4 viewPosition = viewMatrix * modelPosition;
+        vec4 projectionPostion = projectionMatrix * viewPosition;
+        gl_Position = projectionPostion;
+        gl_PointSize = size * 25. * pixelRatio;
+        gl_PointSize *= (1.0 / - viewPosition.z);
+        vColor = color;
+        vOpacity = opacity;
+      }`,
+    fragmentShader: /* glsl */ `
+      varying vec3 vColor;
+      varying float vOpacity;
+      void main() {
+        float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+        float strength = 0.05 / distanceToCenter - 0.1;
+        gl_FragColor = vec4(vColor, strength * vOpacity);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+      }`,
+    transparent: true,
+    depthWrite: false,
+  });
+
+/** Drei's `StarfieldMaterial`, its shaders as Drei writes them. */
+const starsMaterial = (fade: boolean): ShaderMaterial =>
+  new ShaderMaterial({
+    uniforms: { time: { value: 0 }, fade: { value: fade ? 1 : 0 } },
+    vertexShader: /* glsl */ `
+      uniform float time;
+      attribute float size;
+      varying vec3 vColor;
+      void main() {
+        vColor = color;
+        vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);
+        gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));
+        gl_Position = projectionMatrix * mvPosition;
+      }`,
+    fragmentShader: /* glsl */ `
+      uniform float fade;
+      varying vec3 vColor;
+      void main() {
+        float opacity = 1.0;
+        if (fade == 1.0) {
+          float d = distance(gl_PointCoord, vec2(0.5, 0.5));
+          opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
+        }
+        gl_FragColor = vec4(vColor, opacity);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+      }`,
+    blending: AdditiveBlending,
+    depthWrite: false,
+    transparent: true,
+    vertexColors: true,
+  });
+
+/** The geometry from the kernel's buffers, with the attribute names each shader reads. */
+const pointsGeometry = (buffers: PointBuffers, look: PointLook): BufferGeometry => {
+  const geometry = new BufferGeometry();
+  geometry.setAttribute('position', new BufferAttribute(buffers.positions, 3));
+  geometry.setAttribute('color', new BufferAttribute(buffers.colors, 3));
+  geometry.setAttribute(
+    look._tag === 'Dots' ? 'pointSize' : 'size',
+    new BufferAttribute(buffers.sizes, 1),
+  );
+  if (look._tag === 'Sparkles') {
+    geometry.setAttribute('speed', new BufferAttribute(buffers.speeds, 1));
+    geometry.setAttribute('opacity', new BufferAttribute(buffers.opacities, 1));
+    geometry.setAttribute('noise', new BufferAttribute(buffers.noise, 3));
+  }
+  return geometry;
+};
+
+const materialFor = (look: PointLook): Material => {
+  switch (look._tag) {
+    case 'Dots':
+      return dotsMaterial(look);
+    case 'Sparkles':
+      return sparklesMaterial();
+    case 'Stars':
+      return starsMaterial(look.fade);
+  }
+};
+
+const draw = (look: PointLook): Points<BufferGeometry, Material> => {
+  const buffers = pointBuffers(look);
+  const drawn = new Points(pointsGeometry(buffers, look), materialFor(look));
+  drawn.visible = buffers.count > 0;
+  // Sparkles size by the device's pixel ratio, as Drei's take the viewport's `dpr`.
+  drawn.onBeforeRender = (renderer) => {
+    const material = drawn.material;
+    if (material instanceof ShaderMaterial && material.uniforms['pixelRatio'] !== undefined) {
+      material.uniforms['pixelRatio'].value = renderer.getPixelRatio();
+    }
+  };
+  return drawn;
+};
+
+export const hostPoints = (first: PointsNode): HostedPoints => {
+  const object = new Group();
+  let look = first.look;
+  let drawn = draw(look);
+  object.add(drawn);
+  const free = (): void => {
+    drawn.geometry.dispose();
+    drawn.material.dispose();
+  };
+  return {
+    object,
+    update: (next) => {
+      look = next.look;
+      drawn.removeFromParent();
+      free();
+      drawn = draw(look);
+      object.add(drawn);
+    },
+    tick: (seconds) => {
+      const time =
+        drawn.material instanceof ShaderMaterial ? drawn.material.uniforms['time'] : undefined;
+      // Drei's stars twinkle at `speed`; its sparkles carry their speed a mote.
+      if (time !== undefined) time.value = look._tag === 'Stars' ? seconds * look.speed : seconds;
+    },
+    dispose: free,
+  };
+};

package/src/webgpu/index.ts

@@ -7,6 +7,8 @@
  */
 import type { RenderKit } from '../kernel/renderKit.ts';
 import { createContactShadows } from './contactShadows.ts';
+import { hostLine } from './line.ts';
+import { hostPoints } from './points.ts';
 import { hostShaderGrid } from './shaderGrid.ts';
 import { hostSky } from './sky.ts';
 
@@ -15,5 +17,7 @@ export const webgpuKit: RenderKit = {
   shading: 'tsl',
   sky: hostSky,
   shaderGrid: hostShaderGrid,
+  line: hostLine,
+  points: hostPoints,
   contactShadows: createContactShadows,
 };

package/src/webgpu/line.ts

@@ -0,0 +1,67 @@
+/**
+ * The WebGPU kit's lines: three's fat lines for WebGPU (`Line2`, `LineSegments2` and `Line2NodeMaterial`,
+ * the node-material twins of what Drei's `Line` uses), which size themselves to the viewport
+ * before each draw.
+ *
+ * @module
+ */
+import { Group } from 'three';
+import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
+import { LineSegmentsGeometry } from 'three/addons/lines/LineSegmentsGeometry.js';
+import { Line2 } from 'three/addons/lines/webgpu/Line2.js';
+import { LineSegments2 } from 'three/addons/lines/webgpu/LineSegments2.js';
+import { Line2NodeMaterial } from 'three/webgpu';
+
+import type { LineNode } from '../kernel/description.ts';
+import { drawable, fillLineGeometry } from '../kernel/lineGeometry.ts';
+import type { HostedLine } from '../kernel/renderKit.ts';
+
+/** The material's look from the description; vertex colours want white, as Drei sets. */
+const style = (material: Line2NodeMaterial, line: LineNode): void => {
+  material.color.setHex(line.vertexColors === null ? line.color : 0xffffff);
+  if (material.vertexColors !== (line.vertexColors !== null)) {
+    material.vertexColors = line.vertexColors !== null;
+    material.needsUpdate = true;
+  }
+  material.linewidth = line.width;
+  material.worldUnits = line.worldUnits;
+  material.dashed = line.dashed;
+  material.dashSize = line.dashSize;
+  material.gapSize = line.gapSize;
+  // The node material reads the dash scale as `scale`, as `LineDashedMaterial` names it.
+  material.scale = line.dashScale;
+  material.dashOffset = line.dashOffset;
+  material.opacity = line.opacity;
+  material.transparent = line.transparent;
+};
+
+const draw = (line: LineNode, material: Line2NodeMaterial): LineSegments2 => {
+  const drawn = line.segments
+    ? new LineSegments2(fillLineGeometry(new LineSegmentsGeometry(), line), material)
+    : new Line2(fillLineGeometry(new LineGeometry(), line), material);
+  drawn.computeLineDistances();
+  drawn.visible = drawable(line);
+  return drawn;
+};
+
+export const hostLine = (first: LineNode): HostedLine => {
+  const object = new Group();
+  const material = new Line2NodeMaterial();
+  style(material, first);
+  let drawn = draw(first, material);
+  object.add(drawn);
+  return {
+    object,
+    update: (next) => {
+      style(material, next);
+      drawn.removeFromParent();
+      drawn.geometry.dispose();
+      drawn = draw(next, material);
+      object.add(drawn);
+    },
+    dispose: () => {
+      drawn.geometry.dispose();
+      material.dispose();
+    },
+  };
+};

package/src/webgpu/points.ts

@@ -0,0 +1,193 @@
+/**
+ * The WebGPU kit's points. WebGPU draws point primitives one pixel across, so sized
+ * points are instanced sprites with three's `PointsNodeMaterial`, as three's WebGPU
+ * examples draw them: a quad a point, `sizeNode` pixels across. Dots, sparkles and stars
+ * port the WebGL kit's shaders (Drei's, `bf6f4ad`) to TSL, from the same kernel buffers:
+ * the sprite's `uv` stands in for `gl_PointCoord`.
+ *
+ * Sparkles drift in the node's own space here (Drei moves them in world space), which
+ * is the same unless the node is rotated or scaled.
+ *
+ * @module
+ */
+import { AdditiveBlending, Group, InstancedBufferAttribute } from 'three';
+import {
+  cos,
+  distance,
+  exp,
+  float,
+  fwidth,
+  instancedBufferAttribute,
+  modelWorldMatrix,
+  positionView,
+  sin,
+  smoothstep,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+  vec4,
+} from 'three/tsl';
+import { PointsNodeMaterial, Sprite } from 'three/webgpu';
+
+import type { PointLook, PointsNode } from '../kernel/description.ts';
+import { type PointBuffers, pointBuffers } from '../kernel/pointBuffers.ts';
+import type { HostedPoints } from '../kernel/renderKit.ts';
+
+/** Scene time for sparkles and stars, a uniform the host sets each frame. */
+const createTime = () => uniform(0);
+type Time = ReturnType<typeof createTime>;
+
+const vec3Attribute = (array: Float32Array) =>
+  instancedBufferAttribute<'vec3'>(new InstancedBufferAttribute(array, 3), 'vec3');
+const floatAttribute = (array: Float32Array) =>
+  instancedBufferAttribute<'float'>(new InstancedBufferAttribute(array, 1), 'float');
+
+type Attributes = {
+  readonly position: ReturnType<typeof vec3Attribute>;
+  readonly color: ReturnType<typeof vec3Attribute>;
+  readonly size: ReturnType<typeof floatAttribute>;
+};
+
+const attributes = (buffers: PointBuffers): Attributes => ({
+  position: vec3Attribute(buffers.positions),
+  color: vec3Attribute(buffers.colors),
+  size: floatAttribute(buffers.sizes),
+});
+
+/** Where the sprite's fragment is across its point: `gl_PointCoord`. */
+const pointCoord = uv();
+
+/** Dots: Drei's `PointMaterial`, round by its mask, a size factor a point. */
+const dotsMaterial = (
+  look: Extract<PointLook, { readonly _tag: 'Dots' }>,
+  given: Attributes,
+): PointsNodeMaterial => {
+  const material = new PointsNodeMaterial({
+    transparent: look.transparent,
+    sizeAttenuation: look.sizeAttenuation,
+  });
+  material.positionNode = given.position;
+  material.colorNode = vec4(given.color, 1);
+  material.sizeNode = given.size.mul(look.size);
+  const cxy = pointCoord.mul(2).sub(1);
+  const r = cxy.dot(cxy);
+  const delta = fwidth(r);
+  const mask = float(1).sub(smoothstep(float(1).sub(delta), delta.add(1), r));
+  material.opacityNode = look.round ? mask.mul(look.opacity) : float(look.opacity);
+  // Corners left out entirely, opaque or not.
+  material.alphaTestNode = float(0.01);
+  return material;
+};
+
+/** Drei's sparkles: motes swaying about their places, glowing from their middles. */
+const sparklesMaterial = (
+  buffers: PointBuffers,
+  given: Attributes,
+  time: Time,
+): PointsNodeMaterial => {
+  const speed = floatAttribute(buffers.speeds);
+  const opacity = floatAttribute(buffers.opacities);
+  const noise = vec3Attribute(buffers.noise);
+  const material = new PointsNodeMaterial({
+    transparent: true,
+    depthWrite: false,
+    sizeAttenuation: false,
+  });
+  const worldX = modelWorldMatrix.mul(vec4(given.position, 1)).x;
+  const phase = time.mul(speed);
+  material.positionNode = given.position.add(
+    vec3(
+      cos(phase.add(worldX.mul(noise.z).mul(100))).mul(0.2),
+      sin(phase.add(worldX.mul(noise.x).mul(100))).mul(0.2),
+      cos(phase.add(worldX.mul(noise.y).mul(100))).mul(0.2),
+    ),
+  );
+  material.colorNode = vec4(given.color, 1);
+  // Drei's `size * 25 * pixelRatio / -viewZ`; the material multiplies in the pixel ratio.
+  material.sizeNode = given.size.mul(25).div(positionView.z.negate());
+  const strength = float(0.05)
+    .div(distance(pointCoord, vec2(0.5, 0.5)))
+    .sub(0.1);
+  material.opacityNode = strength.mul(opacity).clamp(0, 1);
+  return material;
+};
+
+/**
+ * Drei's stars. Its shader places them at `vec4(position, 0.5)`: the same direction as
+ * twice the position at full weight, half as far in clip space, so here they are drawn at
+ * twice their positions, and sized by half the view depth.
+ */
+const starsMaterial = (
+  look: Extract<PointLook, { readonly _tag: 'Stars' }>,
+  given: Attributes,
+  time: Time,
+): PointsNodeMaterial => {
+  const material = new PointsNodeMaterial({
+    transparent: true,
+    depthWrite: false,
+    blending: AdditiveBlending,
+    sizeAttenuation: false,
+  });
+  material.positionNode = given.position.mul(2);
+  material.colorNode = vec4(given.color, 1);
+  material.sizeNode = given.size
+    .mul(float(30).div(positionView.z.negate().mul(0.5)))
+    .mul(sin(time.add(100)).add(3));
+  const d = distance(pointCoord, vec2(0.5, 0.5));
+  const soft = float(1).div(exp(d.sub(0.25).mul(16)).add(1));
+  material.opacityNode = look.fade ? soft : float(1);
+  return material;
+};
+
+const materialFor = (
+  look: PointLook,
+  buffers: PointBuffers,
+  given: Attributes,
+  time: Time,
+): PointsNodeMaterial => {
+  switch (look._tag) {
+    case 'Dots':
+      return dotsMaterial(look, given);
+    case 'Sparkles':
+      return sparklesMaterial(buffers, given, time);
+    case 'Stars':
+      return starsMaterial(look, given, time);
+  }
+};
+
+const draw = (look: PointLook, time: Time): Sprite => {
+  const buffers = pointBuffers(look);
+  const material = materialFor(look, buffers, attributes(buffers), time);
+  const sprite = new Sprite(material);
+  sprite.count = buffers.count;
+  sprite.visible = buffers.count > 0;
+  sprite.frustumCulled = false;
+  return sprite;
+};
+
+export const hostPoints = (first: PointsNode): HostedPoints => {
+  const object = new Group();
+  const time = createTime();
+  let look = first.look;
+  let drawn = draw(look, time);
+  object.add(drawn);
+  // Sprites share three's one quad geometry: only the material is this node's.
+  const free = (): void => {
+    drawn.material.dispose();
+  };
+  return {
+    object,
+    update: (next) => {
+      look = next.look;
+      drawn.removeFromParent();
+      free();
+      drawn = draw(look, time);
+      object.add(drawn);
+    },
+    tick: (seconds) => {
+      time.value = look._tag === 'Stars' ? seconds * look.speed : seconds;
+    },
+    dispose: free,
+  };
+};