@eigong/three-effekseer 0.1.0

package/README.md

@@ -0,0 +1,63 @@
+# @eigong/three-effekseer
+
+`@eigong/three-effekseer` is a WebGPU add-on that integrates Effekseer into a patched Three.js WebGPU renderer.
+
+## Install
+
+```bash
+npm install three@npm:@eigong/three@0.183.1-external-render-pass-hook.1 @eigong/three-effekseer
+```
+
+## Version Baseline
+
+This add-on is currently based on Effekseer `1.80 b2`.
+The required Three.js baseline is `@eigong/three@0.183.1-external-render-pass-hook.1`.
+
+## Requirements
+
+- The local Three.js fork must expose the external render pass hook implemented in:
+  - [WebGPURenderer.js](../../node_modules/three/src/renderers/webgpu/WebGPURenderer.js)
+  - [WebGPUBackend.js](../../node_modules/three/src/renderers/webgpu/WebGPUBackend.js)
+- The Effekseer WebGPU runtime must already be loaded in the page.
+
+## Canonical Example
+
+The canonical consumer of the add-on is the vanilla example:
+
+- HTML entry: [vanilla/index.html](../../react-vite-ts/vanilla/index.html)
+- Integration: [vanilla-main.ts](../../react-vite-ts/src/vanilla-main.ts)
+
+The React example in [ThreeEffekseerCanvas.tsx](../../react-vite-ts/src/ThreeEffekseerCanvas.tsx) consumes the same add-on, but it is not the reference integration.
+
+## Public API
+
+```ts
+import { EffekseerRenderPass } from '@eigong/three-effekseer'
+
+const pass = new EffekseerRenderPass(
+  renderer,
+  scene,
+  camera,
+  ctx,
+  { mode: 'composite' }
+)
+
+const capabilities = pass.getCapabilities()
+```
+
+This mirrors the WebGL-side integration format by exposing a dedicated `EffekseerRenderPass` on the Three side while keeping the Effekseer context external.
+
+`mode` defaults to `'basic'`.
+
+## Modes
+
+| Mode | Distortion | Depth Occlusion | Soft Particles | LOD | Collisions | Notes |
+| --- | --- | --- | --- | --- | --- | --- |
+| `basic` | No | Yes | No | No | No | Effekseer is injected into the primary scene render pass. Lowest cost path. |
+| `composite` | Yes | Yes | No | No | No | Uses scene capture for background refraction, renders the scene again into a composite target, then presents through `PostProcessing`. |
+
+## Unsupported Features
+
+- `Soft particles`: not supported yet. The add-on does not expose a sampleable scene depth texture to Effekseer.
+- `LOD`: not supported. The add-on does not currently provide a Three-side feature contract for effect level-of-detail selection.
+- `Collisions`: not supported. The add-on does not currently bridge Three scene collision data or collision callbacks into Effekseer.

package/dist/index.d.ts

@@ -0,0 +1,307 @@
+import * as THREE4 from 'three/webgpu';
+
+// common.ts
+function updateCameraProjection(camera, width, height) {
+  const cameraWithProjection = camera;
+  if (cameraWithProjection.isPerspectiveCamera === true && typeof cameraWithProjection.aspect === "number") {
+    cameraWithProjection.aspect = width / height;
+  }
+  cameraWithProjection.updateProjectionMatrix?.();
+}
+function syncEffekseerCamera(camera, effekseer) {
+  camera.updateMatrixWorld();
+  effekseer.setProjectionMatrix(camera.projectionMatrix.elements);
+  effekseer.setCameraMatrix(camera.matrixWorldInverse.elements);
+}
+
+// createBasicPass.ts
+function isPrimaryScenePass(camera, info) {
+  return info.camera === camera;
+}
+function createBasicPass(init) {
+  const { renderer, scene, camera, effekseer } = init;
+  const capabilities = {
+    mode: "basic",
+    supportsDistortion: false,
+    supportsDepthOcclusion: true,
+    supportsSoftParticles: false,
+    supportsLOD: false,
+    supportsCollisions: false
+  };
+  return {
+    getCapabilities() {
+      return capabilities;
+    },
+    resize(width, height, pixelRatio) {
+      renderer.setPixelRatio(pixelRatio);
+      renderer.setSize(width, height, false);
+      updateCameraProjection(camera, width, height);
+    },
+    render(deltaFrames) {
+      const previousHook = renderer.getExternalRenderPassHook();
+      renderer.setExternalRenderPassHook((info) => {
+        previousHook?.(info);
+        if (!isPrimaryScenePass(camera, info)) {
+          return;
+        }
+        syncEffekseerCamera(camera, effekseer);
+        effekseer.drawExternal(info.renderPassEncoder, {
+          colorFormat: info.colorFormat,
+          depthFormat: info.depthStencilFormat,
+          sampleCount: info.sampleCount
+        });
+      });
+      try {
+        syncEffekseerCamera(camera, effekseer);
+        effekseer.update(deltaFrames);
+        renderer.render(scene, camera);
+      } finally {
+        renderer.setExternalRenderPassHook(previousHook);
+      }
+    },
+    dispose() {
+    }
+  };
+}
+function isCompositePass(info, renderTarget, camera) {
+  return info.renderTarget === renderTarget && info.camera === camera;
+}
+function createCompositePassPresenter(init) {
+  const { renderer, scene, camera, renderTarget, resolveCompositePassState } = init;
+  return {
+    render(input) {
+      const previousHook = renderer.getExternalRenderPassHook();
+      const previousRenderTarget = renderer.getRenderTarget();
+      const previousActiveCubeFace = renderer.getActiveCubeFace();
+      const previousActiveMipmapLevel = renderer.getActiveMipmapLevel();
+      renderer.setRenderTarget(renderTarget);
+      renderer.setExternalRenderPassHook((info) => {
+        previousHook?.(info);
+        if (!isCompositePass(info, renderTarget, camera)) {
+          return;
+        }
+        const compositePassState = resolveCompositePassState(input, info);
+        if (!compositePassState) {
+          return;
+        }
+        input.effekseer.drawExternal(info.renderPassEncoder, compositePassState.effekseerPassState);
+      });
+      try {
+        renderer.render(scene, camera);
+      } finally {
+        renderer.setExternalRenderPassHook(previousHook);
+        renderer.setRenderTarget(
+          previousRenderTarget,
+          previousActiveCubeFace,
+          previousActiveMipmapLevel
+        );
+      }
+    },
+    resize() {
+    },
+    dispose() {
+    }
+  };
+}
+function createFinalPassPresenter(init) {
+  const { renderer } = init;
+  const postProcessing = new THREE4.PostProcessing(renderer);
+  let sourceTexture = null;
+  const updateOutputNode = (texture) => {
+    if (sourceTexture === texture) {
+      return;
+    }
+    sourceTexture = texture;
+    postProcessing.outputNode = THREE4.TSL.texture(texture);
+    postProcessing.needsUpdate = true;
+  };
+  return {
+    render(texture) {
+      updateOutputNode(texture);
+      postProcessing.render();
+    },
+    resize() {
+      postProcessing.needsUpdate = true;
+    },
+    dispose() {
+      postProcessing.dispose();
+    }
+  };
+}
+function getNativeGPUTexture(renderer, texture) {
+  const nativeTexture = renderer.backend.get(texture).texture;
+  return nativeTexture ?? null;
+}
+
+// createCompositePass.ts
+function createSceneCaptureTrigger(renderer, scenePass, samples) {
+  const postProcessing = new THREE4.PostProcessing(renderer);
+  const triggerTarget = new THREE4.RenderTarget(1, 1, {
+    type: renderer.getOutputBufferType(),
+    colorSpace: THREE4.LinearSRGBColorSpace,
+    depthBuffer: false,
+    samples
+  });
+  triggerTarget.texture.name = "ThreeEffekseer.captureTrigger";
+  postProcessing.outputColorTransform = false;
+  postProcessing.outputNode = scenePass.getTextureNode("output");
+  return {
+    render() {
+      const previousRenderTarget = renderer.getRenderTarget();
+      const previousActiveCubeFace = renderer.getActiveCubeFace();
+      const previousActiveMipmapLevel = renderer.getActiveMipmapLevel();
+      renderer.setRenderTarget(triggerTarget);
+      try {
+        postProcessing.render();
+      } finally {
+        renderer.setRenderTarget(
+          previousRenderTarget,
+          previousActiveCubeFace,
+          previousActiveMipmapLevel
+        );
+      }
+    },
+    resize() {
+    },
+    dispose() {
+      postProcessing.dispose();
+      triggerTarget.dispose();
+    }
+  };
+}
+function syncScenePassResources(renderer, scenePassResources) {
+  const renderTarget = scenePassResources.scenePass?.renderTarget ?? null;
+  const colorTexture = renderTarget?.texture ?? null;
+  const depthTexture = renderTarget?.depthTexture ?? null;
+  scenePassResources.renderTarget = renderTarget;
+  scenePassResources.colorTexture = colorTexture;
+  scenePassResources.depthTexture = depthTexture;
+  scenePassResources.nativeColorTexture = colorTexture ? getNativeGPUTexture(renderer, colorTexture) : null;
+  scenePassResources.nativeColorTextureView = scenePassResources.nativeColorTexture?.createView() ?? null;
+  scenePassResources.nativeDepthTexture = depthTexture ? getNativeGPUTexture(renderer, depthTexture) : null;
+  scenePassResources.nativeDepthTextureView = null;
+}
+function createFinalPassState(renderer, scenePassResources, info) {
+  syncScenePassResources(renderer, scenePassResources);
+  const backgroundTextureView = scenePassResources.nativeColorTextureView;
+  return {
+    backgroundTextureView,
+    depthTextureView: null,
+    effekseerPassState: {
+      colorFormat: info.colorFormat,
+      depthFormat: info.depthStencilFormat,
+      sampleCount: info.sampleCount,
+      ...backgroundTextureView ? { backgroundTextureView } : {}
+    }
+  };
+}
+function createCompositePass(init) {
+  const { renderer, scene, camera, effekseer } = init;
+  const samples = Math.max(0, renderer.samples || 0);
+  const capabilities = {
+    mode: "composite",
+    supportsDistortion: true,
+    supportsDepthOcclusion: true,
+    supportsSoftParticles: false,
+    supportsLOD: false,
+    supportsCollisions: false
+  };
+  const scenePass = THREE4.TSL.pass(scene, camera);
+  const sceneCaptureTrigger = createSceneCaptureTrigger(renderer, scenePass, samples);
+  const compositionTarget = new THREE4.RenderTarget(1, 1, {
+    type: renderer.getOutputBufferType(),
+    colorSpace: THREE4.LinearSRGBColorSpace,
+    depthBuffer: true,
+    samples
+  });
+  compositionTarget.texture.name = "ThreeEffekseer.composition";
+  const drawingBufferSize = new THREE4.Vector2();
+  const scenePassResources = {
+    scenePass,
+    renderTarget: scenePass.renderTarget,
+    colorTexture: scenePass.renderTarget.texture,
+    depthTexture: scenePass.renderTarget.depthTexture,
+    nativeColorTexture: null,
+    nativeColorTextureView: null,
+    nativeDepthTexture: null,
+    nativeDepthTextureView: null
+  };
+  const compositePresenter = createCompositePassPresenter({
+    renderer,
+    scene,
+    camera,
+    renderTarget: compositionTarget,
+    resolveCompositePassState: (_input, info) => createFinalPassState(renderer, scenePassResources, info)
+  });
+  const presenter = createFinalPassPresenter({ renderer });
+  return {
+    getCapabilities() {
+      return capabilities;
+    },
+    resize(width, height, pixelRatio) {
+      renderer.setPixelRatio(pixelRatio);
+      renderer.setSize(width, height, false);
+      renderer.getDrawingBufferSize(drawingBufferSize);
+      compositionTarget.setSize(drawingBufferSize.width, drawingBufferSize.height);
+      updateCameraProjection(camera, width, height);
+      presenter.resize(width, height, pixelRatio);
+    },
+    render(deltaFrames) {
+      syncEffekseerCamera(camera, effekseer);
+      effekseer.update(deltaFrames);
+      sceneCaptureTrigger.render();
+      scenePassResources.renderTarget = scenePass.renderTarget;
+      scenePassResources.colorTexture = scenePass.renderTarget.texture;
+      scenePassResources.depthTexture = scenePass.renderTarget.depthTexture;
+      compositePresenter.render({
+        scenePassResources,
+        effekseer
+      });
+      presenter.render(compositionTarget.texture);
+    },
+    dispose() {
+      sceneCaptureTrigger.dispose();
+      presenter.dispose();
+      compositionTarget.dispose();
+    }
+  };
+}
+
+// ThreeEffekseerPass.ts
+function createThreeEffekseerPass(init, options = {}) {
+  if (options.mode === "composite") {
+    return createCompositePass(init);
+  }
+  return createBasicPass(init);
+}
+
+// EffekseerRenderPass.ts
+var EffekseerRenderPass = class {
+  pass;
+  constructor(renderer, scene, camera, effekseer, options = {}) {
+    this.pass = createThreeEffekseerPass(
+      {
+        renderer,
+        scene,
+        camera,
+        effekseer
+      },
+      options
+    );
+  }
+  getCapabilities() {
+    return this.pass.getCapabilities();
+  }
+  setSize(width, height, pixelRatio = 1) {
+    this.pass.resize(width, height, pixelRatio);
+  }
+  render(deltaFrames = 1) {
+    this.pass.render(deltaFrames);
+  }
+  dispose() {
+    this.pass.dispose();
+  }
+};
+var EffekseerRenderPass_default = EffekseerRenderPass;
+
+export { EffekseerRenderPass_default as EffekseerRenderPass };

package/dist/index.js

@@ -0,0 +1,321 @@
+// common.ts
+function updateCameraProjection(camera, width, height) {
+  const cameraWithProjection = camera;
+  if (cameraWithProjection.isPerspectiveCamera === true && typeof cameraWithProjection.aspect === "number") {
+    cameraWithProjection.aspect = width / height;
+  }
+  cameraWithProjection.updateProjectionMatrix?.();
+}
+function syncEffekseerCamera(camera, effekseer) {
+  camera.updateMatrixWorld();
+  effekseer.setProjectionMatrix(camera.projectionMatrix.elements);
+  effekseer.setCameraMatrix(camera.matrixWorldInverse.elements);
+}
+
+// createBasicPass.ts
+function isPrimaryScenePass(camera, info) {
+  return info.camera === camera;
+}
+function createBasicPass(init) {
+  const { renderer, scene, camera, effekseer } = init;
+  const capabilities = {
+    mode: "basic",
+    supportsDistortion: false,
+    supportsDepthOcclusion: true,
+    supportsSoftParticles: false,
+    supportsLOD: false,
+    supportsCollisions: false
+  };
+  return {
+    getCapabilities() {
+      return capabilities;
+    },
+    resize(width, height, pixelRatio) {
+      renderer.setPixelRatio(pixelRatio);
+      renderer.setSize(width, height, false);
+      updateCameraProjection(camera, width, height);
+    },
+    render(deltaFrames) {
+      const previousHook = renderer.getExternalRenderPassHook();
+      renderer.setExternalRenderPassHook((info) => {
+        previousHook?.(info);
+        if (!isPrimaryScenePass(camera, info)) {
+          return;
+        }
+        syncEffekseerCamera(camera, effekseer);
+        effekseer.drawExternal(info.renderPassEncoder, {
+          colorFormat: info.colorFormat,
+          depthFormat: info.depthStencilFormat,
+          sampleCount: info.sampleCount
+        });
+      });
+      try {
+        syncEffekseerCamera(camera, effekseer);
+        effekseer.update(deltaFrames);
+        renderer.render(scene, camera);
+      } finally {
+        renderer.setExternalRenderPassHook(previousHook);
+      }
+    },
+    dispose() {
+    }
+  };
+}
+
+// createCompositePass.ts
+import * as THREE4 from "three/webgpu";
+
+// createCompositePassPresenter.ts
+import "three/webgpu";
+function isCompositePass(info, renderTarget, camera) {
+  return info.renderTarget === renderTarget && info.camera === camera;
+}
+function createCompositePassPresenter(init) {
+  const { renderer, scene, camera, renderTarget, resolveCompositePassState } = init;
+  return {
+    render(input) {
+      const previousHook = renderer.getExternalRenderPassHook();
+      const previousRenderTarget = renderer.getRenderTarget();
+      const previousActiveCubeFace = renderer.getActiveCubeFace();
+      const previousActiveMipmapLevel = renderer.getActiveMipmapLevel();
+      renderer.setRenderTarget(renderTarget);
+      renderer.setExternalRenderPassHook((info) => {
+        previousHook?.(info);
+        if (!isCompositePass(info, renderTarget, camera)) {
+          return;
+        }
+        const compositePassState = resolveCompositePassState(input, info);
+        if (!compositePassState) {
+          return;
+        }
+        input.effekseer.drawExternal(info.renderPassEncoder, compositePassState.effekseerPassState);
+      });
+      try {
+        renderer.render(scene, camera);
+      } finally {
+        renderer.setExternalRenderPassHook(previousHook);
+        renderer.setRenderTarget(
+          previousRenderTarget,
+          previousActiveCubeFace,
+          previousActiveMipmapLevel
+        );
+      }
+    },
+    resize() {
+    },
+    dispose() {
+    }
+  };
+}
+
+// createFinalPassPresenter.ts
+import * as THREE2 from "three/webgpu";
+function createFinalPassPresenter(init) {
+  const { renderer } = init;
+  const postProcessing = new THREE2.PostProcessing(renderer);
+  let sourceTexture = null;
+  const updateOutputNode = (texture) => {
+    if (sourceTexture === texture) {
+      return;
+    }
+    sourceTexture = texture;
+    postProcessing.outputNode = THREE2.TSL.texture(texture);
+    postProcessing.needsUpdate = true;
+  };
+  return {
+    render(texture) {
+      updateOutputNode(texture);
+      postProcessing.render();
+    },
+    resize() {
+      postProcessing.needsUpdate = true;
+    },
+    dispose() {
+      postProcessing.dispose();
+    }
+  };
+}
+
+// webgpuInternals.ts
+import "three/webgpu";
+function getNativeGPUTexture(renderer, texture) {
+  const nativeTexture = renderer.backend.get(texture).texture;
+  return nativeTexture ?? null;
+}
+
+// createCompositePass.ts
+function createSceneCaptureTrigger(renderer, scenePass, samples) {
+  const postProcessing = new THREE4.PostProcessing(renderer);
+  const triggerTarget = new THREE4.RenderTarget(1, 1, {
+    type: renderer.getOutputBufferType(),
+    colorSpace: THREE4.LinearSRGBColorSpace,
+    depthBuffer: false,
+    samples
+  });
+  triggerTarget.texture.name = "ThreeEffekseer.captureTrigger";
+  postProcessing.outputColorTransform = false;
+  postProcessing.outputNode = scenePass.getTextureNode("output");
+  return {
+    render() {
+      const previousRenderTarget = renderer.getRenderTarget();
+      const previousActiveCubeFace = renderer.getActiveCubeFace();
+      const previousActiveMipmapLevel = renderer.getActiveMipmapLevel();
+      renderer.setRenderTarget(triggerTarget);
+      try {
+        postProcessing.render();
+      } finally {
+        renderer.setRenderTarget(
+          previousRenderTarget,
+          previousActiveCubeFace,
+          previousActiveMipmapLevel
+        );
+      }
+    },
+    resize() {
+    },
+    dispose() {
+      postProcessing.dispose();
+      triggerTarget.dispose();
+    }
+  };
+}
+function syncScenePassResources(renderer, scenePassResources) {
+  const renderTarget = scenePassResources.scenePass?.renderTarget ?? null;
+  const colorTexture = renderTarget?.texture ?? null;
+  const depthTexture = renderTarget?.depthTexture ?? null;
+  scenePassResources.renderTarget = renderTarget;
+  scenePassResources.colorTexture = colorTexture;
+  scenePassResources.depthTexture = depthTexture;
+  scenePassResources.nativeColorTexture = colorTexture ? getNativeGPUTexture(renderer, colorTexture) : null;
+  scenePassResources.nativeColorTextureView = scenePassResources.nativeColorTexture?.createView() ?? null;
+  scenePassResources.nativeDepthTexture = depthTexture ? getNativeGPUTexture(renderer, depthTexture) : null;
+  scenePassResources.nativeDepthTextureView = null;
+}
+function createFinalPassState(renderer, scenePassResources, info) {
+  syncScenePassResources(renderer, scenePassResources);
+  const backgroundTextureView = scenePassResources.nativeColorTextureView;
+  return {
+    backgroundTextureView,
+    depthTextureView: null,
+    effekseerPassState: {
+      colorFormat: info.colorFormat,
+      depthFormat: info.depthStencilFormat,
+      sampleCount: info.sampleCount,
+      ...backgroundTextureView ? { backgroundTextureView } : {}
+    }
+  };
+}
+function createCompositePass(init) {
+  const { renderer, scene, camera, effekseer } = init;
+  const samples = Math.max(0, renderer.samples || 0);
+  const capabilities = {
+    mode: "composite",
+    supportsDistortion: true,
+    supportsDepthOcclusion: true,
+    supportsSoftParticles: false,
+    supportsLOD: false,
+    supportsCollisions: false
+  };
+  const scenePass = THREE4.TSL.pass(scene, camera);
+  const sceneCaptureTrigger = createSceneCaptureTrigger(renderer, scenePass, samples);
+  const compositionTarget = new THREE4.RenderTarget(1, 1, {
+    type: renderer.getOutputBufferType(),
+    colorSpace: THREE4.LinearSRGBColorSpace,
+    depthBuffer: true,
+    samples
+  });
+  compositionTarget.texture.name = "ThreeEffekseer.composition";
+  const drawingBufferSize = new THREE4.Vector2();
+  const scenePassResources = {
+    scenePass,
+    renderTarget: scenePass.renderTarget,
+    colorTexture: scenePass.renderTarget.texture,
+    depthTexture: scenePass.renderTarget.depthTexture,
+    nativeColorTexture: null,
+    nativeColorTextureView: null,
+    nativeDepthTexture: null,
+    nativeDepthTextureView: null
+  };
+  const compositePresenter = createCompositePassPresenter({
+    renderer,
+    scene,
+    camera,
+    renderTarget: compositionTarget,
+    resolveCompositePassState: (_input, info) => createFinalPassState(renderer, scenePassResources, info)
+  });
+  const presenter = createFinalPassPresenter({ renderer });
+  return {
+    getCapabilities() {
+      return capabilities;
+    },
+    resize(width, height, pixelRatio) {
+      renderer.setPixelRatio(pixelRatio);
+      renderer.setSize(width, height, false);
+      renderer.getDrawingBufferSize(drawingBufferSize);
+      compositionTarget.setSize(drawingBufferSize.width, drawingBufferSize.height);
+      updateCameraProjection(camera, width, height);
+      sceneCaptureTrigger.resize(width, height, pixelRatio);
+      compositePresenter.resize(width, height, pixelRatio);
+      presenter.resize(width, height, pixelRatio);
+    },
+    render(deltaFrames) {
+      syncEffekseerCamera(camera, effekseer);
+      effekseer.update(deltaFrames);
+      sceneCaptureTrigger.render();
+      scenePassResources.renderTarget = scenePass.renderTarget;
+      scenePassResources.colorTexture = scenePass.renderTarget.texture;
+      scenePassResources.depthTexture = scenePass.renderTarget.depthTexture;
+      compositePresenter.render({
+        scenePassResources,
+        effekseer
+      });
+      presenter.render(compositionTarget.texture);
+    },
+    dispose() {
+      sceneCaptureTrigger.dispose();
+      compositePresenter.dispose();
+      presenter.dispose();
+      compositionTarget.dispose();
+    }
+  };
+}
+
+// ThreeEffekseerPass.ts
+function createThreeEffekseerPass(init, options = {}) {
+  if (options.mode === "composite") {
+    return createCompositePass(init);
+  }
+  return createBasicPass(init);
+}
+
+// EffekseerRenderPass.ts
+var EffekseerRenderPass = class {
+  pass;
+  constructor(renderer, scene, camera, effekseer, options = {}) {
+    this.pass = createThreeEffekseerPass(
+      {
+        renderer,
+        scene,
+        camera,
+        effekseer
+      },
+      options
+    );
+  }
+  getCapabilities() {
+    return this.pass.getCapabilities();
+  }
+  setSize(width, height, pixelRatio = 1) {
+    this.pass.resize(width, height, pixelRatio);
+  }
+  render(deltaFrames = 1) {
+    this.pass.render(deltaFrames);
+  }
+  dispose() {
+    this.pass.dispose();
+  }
+};
+var EffekseerRenderPass_default = EffekseerRenderPass;
+export {
+  EffekseerRenderPass_default as EffekseerRenderPass
+};

package/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="./three-webgpu-hook.d.ts" />
+
+export * from './dist/index'

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@eigong/three-effekseer",
+  "version": "0.1.0",
+  "description": "WebGPU add-on that integrates Effekseer into a patched Three.js renderer",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "index.d.ts",
+    "three-webgpu-hook.d.ts",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup index.ts --format esm --dts --clean",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "effekseer",
+    "three",
+    "threejs",
+    "webgpu"
+  ],
+  "peerDependencies": {
+    "three": ">=0.183.1 <0.184.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/three-webgpu-hook.d.ts

@@ -0,0 +1,28 @@
+import 'three/webgpu'
+import type { Camera, RenderTarget } from 'three'
+
+declare module 'three/webgpu' {
+  export interface ExternalRenderPassHookInfo {
+    renderer: WebGPURenderer
+    renderPassEncoder: GPURenderPassEncoder
+    commandEncoder: GPUCommandEncoder
+    colorFormat: GPUTextureFormat
+    depthStencilFormat: GPUTextureFormat | null
+    sampleCount: number
+    isDefaultCanvasTarget: boolean
+    renderTarget: RenderTarget | null
+    camera: Camera | null
+    colorAttachmentView: GPUTextureView
+    resolveTargetView: GPUTextureView | null
+    depthStencilAttachmentView: GPUTextureView | null
+    sampleableColorTextureView: GPUTextureView | null
+    sampleableDepthTextureView: GPUTextureView | null
+  }
+
+  export type ExternalRenderPassHook = (info: ExternalRenderPassHookInfo) => void
+
+  export interface WebGPURenderer {
+    setExternalRenderPassHook(callback: ExternalRenderPassHook | null): this
+    getExternalRenderPassHook(): ExternalRenderPassHook | null
+  }
+}