@opsydyn/effect-three 0.0.0-stage → 0.2.0

package/dist/index-4045wme0.js

@@ -0,0 +1,129 @@
+// src/kernel/contactShadowPasses.ts
+import {
+  Color,
+  Mesh,
+  MeshBasicMaterial,
+  OrthographicCamera,
+  PlaneGeometry,
+  Scene,
+  Vector3
+} from "three";
+var up = new Vector3(0, 1, 0);
+var aim = new Vector3;
+var groundGeometry = (width, depth, flipped) => {
+  const geometry = new PlaneGeometry(width, depth).rotateX(-Math.PI / 2);
+  if (flipped)
+    return geometry;
+  const uv = geometry.getAttribute("uv");
+  for (let i = 0;i < uv.count; i++)
+    uv.setY(i, 1 - uv.getY(i));
+  return geometry;
+};
+var reshaped = (a, b) => a.resolution !== b.resolution || a.size[0] !== b.size[0] || a.size[1] !== b.size[1];
+var createContactShadowPasses = (graph, renderer, materials) => {
+  let shown;
+  const release = () => {
+    if (shown === undefined)
+      return;
+    shown.plane.removeFromParent();
+    shown.plane.geometry.dispose();
+    shown.plane.material.dispose();
+    shown.target.dispose();
+    shown.blurTarget.dispose();
+    shown.depthMaterial.dispose();
+    shown.horizontal.material.dispose();
+    shown.vertical.material.dispose();
+    shown.quad.geometry.dispose();
+    shown = undefined;
+  };
+  const build = (description) => {
+    const [width, depth] = description.size;
+    const target = renderer.createTarget(description.resolution, description.resolution);
+    const blurTarget = renderer.createTarget(description.resolution, description.resolution);
+    const material = new MeshBasicMaterial({
+      map: target.texture,
+      transparent: true,
+      depthWrite: false
+    });
+    const plane = new Mesh(groundGeometry(width, depth, materials.flippedTargets), material);
+    plane.raycast = () => {
+      return;
+    };
+    graph.scene.add(plane);
+    const color = new Color;
+    const quad = new Mesh(new PlaneGeometry(2, 2));
+    quad.position.z = -0.5;
+    const quadScene = new Scene;
+    quadScene.add(quad);
+    return {
+      description,
+      plane,
+      camera: new OrthographicCamera(-width / 2, width / 2, depth / 2, -depth / 2, 0, 1),
+      target,
+      blurTarget,
+      color,
+      depthMaterial: materials.depth(color),
+      horizontal: materials.blur("horizontal"),
+      vertical: materials.blur("vertical"),
+      quad,
+      quadScene,
+      quadCamera: new OrthographicCamera(-1, 1, 1, -1, 0, 1)
+    };
+  };
+  const update = (current, description) => {
+    current.plane.position.fromArray(description.position);
+    current.plane.material.opacity = description.opacity;
+    current.color.setHex(description.color);
+    current.camera.position.fromArray(description.position);
+    current.camera.up.set(0, 0, 1);
+    current.camera.lookAt(aim.copy(current.camera.position).add(up));
+    current.camera.near = description.near;
+    current.camera.far = description.far;
+    current.camera.updateProjectionMatrix();
+    current.camera.updateMatrixWorld();
+    return { ...current, description };
+  };
+  const blurPass = (current, amount) => {
+    const { horizontal, vertical, quad, quadScene, quadCamera } = current;
+    quad.material = horizontal.material;
+    horizontal.set(current.target.texture, amount / 256);
+    renderer.render(quadScene, quadCamera, undefined, current.blurTarget);
+    quad.material = vertical.material;
+    vertical.set(current.blurTarget.texture, amount / 256);
+    renderer.render(quadScene, quadCamera, undefined, current.target);
+  };
+  const render = (current) => {
+    const { scene } = graph;
+    const background = scene.background;
+    const override = scene.overrideMaterial;
+    current.plane.visible = false;
+    scene.background = null;
+    scene.overrideMaterial = current.depthMaterial;
+    renderer.render(scene, current.camera, undefined, current.target);
+    scene.overrideMaterial = override;
+    scene.background = background;
+    current.plane.visible = true;
+    blurPass(current, current.description.blur);
+    if (current.description.smooth)
+      blurPass(current, current.description.blur * 0.4);
+  };
+  return {
+    draw: () => {
+      const description = graph.contactShadows();
+      if (description === null) {
+        release();
+        return;
+      }
+      if (shown !== undefined && reshaped(shown.description, description))
+        release();
+      shown = update(shown ?? build(description), description);
+      render(shown);
+    },
+    dispose: release
+  };
+};
+
+export { createContactShadowPasses };
+
+//# debugId=AFE8D134F596683564756E2164756E21
+//# sourceMappingURL=index-4045wme0.js.map

package/dist/index-4045wme0.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/kernel/contactShadowPasses.ts"],
+  "sourcesContent": [
+    "/**\n * Contact shadows, drawn by the frame loop with the scene's renderer: the passes, shared\n * by every render kit, which supplies the materials (`ShadowMaterials`).\n *\n * Behavioural reference: Drei `src/core/ContactShadows.tsx` at `bf6f4ad`, itself after\n * three.js's `webgl_shadow_contact` example by mrdoob (both MIT). As there, every drawn\n * frame:\n *\n * 1. renders the scene from below with an orthographic camera into a texture, through a\n *    depth material that turns nearness to the ground into shadow (alpha `1 − depth`,\n *    colour `color · depth · 2`), with the background off and the shadow plane hidden;\n * 2. blurs it horizontally and vertically (`blur / 256`), twice with `smooth` (the second\n *    at 0.4 of the blur);\n * 3. shows it on a transparent plane facing up.\n *\n * One difference: the blur passes draw a quad with their own camera, so they fill the\n * texture wherever the shadows are placed. (Drei draws its quad at the world origin with\n * the shadow camera, which leaves the blur empty when the shadows sit above `y = 0`.)\n *\n * @module\n */\nimport {\n  Color,\n  type Material,\n  Mesh,\n  MeshBasicMaterial,\n  OrthographicCamera,\n  PlaneGeometry,\n  Scene,\n  type Texture,\n  Vector3,\n} from 'three';\n\nimport type { ContactShadows } from './description.ts';\nimport type { RenderTarget, SceneRenderer } from './renderer.ts';\nimport type { ContactShadowPasses, ShadowedScene } from './renderKit.ts';\n\n/** One blur direction's material, and how to point it at a texture by an amount. */\nexport type BlurPass = {\n  readonly material: Material;\n  /** Reads `source`, blurring by `amount` of the texture's width (or height). */\n  readonly set: (source: Texture, amount: number) => void;\n};\n\n/** What a render kit draws contact shadows with. */\nexport type ShadowMaterials = {\n  /**\n   * The material the scene is drawn through from below: colour `color · depth · 2`, alpha\n   * `1 − depth`, no depth test or write.\n   */\n  readonly depth: (color: Color) => Material;\n  readonly blur: (direction: 'horizontal' | 'vertical') => BlurPass;\n  /**\n   * Whether the renderer reads a target's texture with v running the other way from\n   * WebGL's: three's WebGPU renderer does, on either backend.\n   */\n  readonly flippedTargets: boolean;\n};\n\n/** Everything one set of contact shadows holds while shown. */\ntype Shown = {\n  readonly description: ContactShadows;\n  readonly plane: Mesh<PlaneGeometry, MeshBasicMaterial>;\n  readonly camera: OrthographicCamera;\n  readonly target: RenderTarget;\n  readonly blurTarget: RenderTarget;\n  readonly color: Color;\n  readonly depthMaterial: Material;\n  readonly horizontal: BlurPass;\n  readonly vertical: BlurPass;\n  readonly quad: Mesh<PlaneGeometry, Material>;\n  readonly quadScene: Scene;\n  readonly quadCamera: OrthographicCamera;\n};\n\nconst up = new Vector3(0, 1, 0);\nconst aim = new Vector3();\n\n/**\n * The plane's geometry: flat, facing up, its texture's v running towards +z as the shadow\n * camera's image does (already so where the renderer reads targets flipped).\n */\nconst groundGeometry = (width: number, depth: number, flipped: boolean): PlaneGeometry => {\n  const geometry = new PlaneGeometry(width, depth).rotateX(-Math.PI / 2);\n  if (flipped) return geometry;\n  const uv = geometry.getAttribute('uv');\n  for (let i = 0; i < uv.count; i++) uv.setY(i, 1 - uv.getY(i));\n  return geometry;\n};\n\n/** Whether a change needs new targets, geometry or camera rather than an update. */\nconst reshaped = (a: ContactShadows, b: ContactShadows): boolean =>\n  a.resolution !== b.resolution || a.size[0] !== b.size[0] || a.size[1] !== b.size[1];\n\n/** Creates the contact shadow passes for one scene graph and renderer, with `materials`. */\nexport const createContactShadowPasses = (\n  graph: ShadowedScene,\n  renderer: SceneRenderer,\n  materials: ShadowMaterials,\n): ContactShadowPasses => {\n  let shown: Shown | undefined;\n\n  const release = (): void => {\n    if (shown === undefined) return;\n    shown.plane.removeFromParent();\n    shown.plane.geometry.dispose();\n    shown.plane.material.dispose();\n    shown.target.dispose();\n    shown.blurTarget.dispose();\n    shown.depthMaterial.dispose();\n    shown.horizontal.material.dispose();\n    shown.vertical.material.dispose();\n    shown.quad.geometry.dispose();\n    shown = undefined;\n  };\n\n  const build = (description: ContactShadows): Shown => {\n    const [width, depth] = description.size;\n    const target = renderer.createTarget(description.resolution, description.resolution);\n    const blurTarget = renderer.createTarget(description.resolution, description.resolution);\n    const material = new MeshBasicMaterial({\n      map: target.texture,\n      transparent: true,\n      depthWrite: false,\n    });\n    const plane = new Mesh(groundGeometry(width, depth, materials.flippedTargets), material);\n    // Shadows are scenery: never picked, never in the way of an overlay.\n    plane.raycast = () => undefined;\n    graph.scene.add(plane);\n    const color = new Color();\n    const quad = new Mesh<PlaneGeometry, Material>(new PlaneGeometry(2, 2));\n    // In front of the quad camera, between its near and far planes.\n    quad.position.z = -0.5;\n    const quadScene = new Scene();\n    quadScene.add(quad);\n    return {\n      description,\n      plane,\n      camera: new OrthographicCamera(-width / 2, width / 2, depth / 2, -depth / 2, 0, 1),\n      target,\n      blurTarget,\n      color,\n      depthMaterial: materials.depth(color),\n      horizontal: materials.blur('horizontal'),\n      vertical: materials.blur('vertical'),\n      quad,\n      quadScene,\n      quadCamera: new OrthographicCamera(-1, 1, 1, -1, 0, 1),\n    };\n  };\n\n  /** Applies the fields that change in place: placement, reach, colour and opacity. */\n  const update = (current: Shown, description: ContactShadows): Shown => {\n    current.plane.position.fromArray(description.position);\n    current.plane.material.opacity = description.opacity;\n    current.color.setHex(description.color);\n    current.camera.position.fromArray(description.position);\n    // Looking straight up, with +z as the image's up: its v runs towards +z, as the plane's.\n    current.camera.up.set(0, 0, 1);\n    current.camera.lookAt(aim.copy(current.camera.position).add(up));\n    current.camera.near = description.near;\n    current.camera.far = description.far;\n    current.camera.updateProjectionMatrix();\n    current.camera.updateMatrixWorld();\n    return { ...current, description };\n  };\n\n  /** One blur: horizontally into the spare target, then vertically back. */\n  const blurPass = (current: Shown, amount: number): void => {\n    const { horizontal, vertical, quad, quadScene, quadCamera } = current;\n    quad.material = horizontal.material;\n    horizontal.set(current.target.texture, amount / 256);\n    renderer.render(quadScene, quadCamera, undefined, current.blurTarget);\n    quad.material = vertical.material;\n    vertical.set(current.blurTarget.texture, amount / 256);\n    renderer.render(quadScene, quadCamera, undefined, current.target);\n  };\n\n  const render = (current: Shown): void => {\n    const { scene } = graph;\n    const background = scene.background;\n    const override = scene.overrideMaterial;\n    current.plane.visible = false;\n    scene.background = null;\n    scene.overrideMaterial = current.depthMaterial;\n    renderer.render(scene, current.camera, undefined, current.target);\n    scene.overrideMaterial = override;\n    scene.background = background;\n    current.plane.visible = true;\n    blurPass(current, current.description.blur);\n    if (current.description.smooth) blurPass(current, current.description.blur * 0.4);\n  };\n\n  return {\n    draw: () => {\n      const description = graph.contactShadows();\n      if (description === null) {\n        release();\n        return;\n      }\n      if (shown !== undefined && reshaped(shown.description, description)) release();\n      shown = update(shown ?? build(description), description);\n      render(shown);\n    },\n    dispose: release,\n  };\n};\n"
+  ],
+  "mappings": "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",
+  "debugId": "AFE8D134F596683564756E2164756E21",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Effect-native declarative Three.js scenes.
+ *
+ * - Authoring: `scene`, `mesh`, `group`, `box`, `standard`, `spin` and friends.
+ * - Runtime: `SceneRuntime.make` inside a `Scope`, with `ResourceRegistry` and
+ *   `FrameSource` provided by the application.
+ *
+ * @module
+ */
+export * from './kernel/index.ts';
+export * from './runtime/index.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}