prepare post-processing test playground

spearwolf · spearwolf · commit 478497e5e725 · 2023-11-18T14:37:17.000+01:00
diff --git a/packages/twopoint5d-elements-e2e/index.html b/packages/twopoint5d-elements-e2e/index.html
@@ -11,6 +11,7 @@
     <ul>
       <li><a class="hover:underline" href="pages/bundle.html">bundle</a></li>
       <li><a class="hover:underline" href="pages/display-and-stage2d.html">display-and-stage2d</a></li>
+      <li><a class="hover:underline" href="pages/post-processing.html">post-processing</a></li>
       <li><a class="hover:underline" href="pages/simple-greeting.html">simple-greeting</a></li>
       <li><a class="hover:underline" href="pages/stage2d.html">stage2d</a></li>
       <li><a class="hover:underline" href="pages/display.html">display</a></li>
diff --git a/packages/twopoint5d-elements-e2e/pages/post-processing.html b/packages/twopoint5d-elements-e2e/pages/post-processing.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>post-processing (twopoint5d-elements-e2e)</title>
+  </head>
+  <body>
+    <script type="module" src="/src/post-processing.ts"></script>
+    <main class="two5-display-container">
+      <x-display class="two5-display">
+        <x-post-processing>
+          <x-stage2d id="stage2d" projection-type="parallax" width="197" height="205"></two5-stage2d>          
+        </x-post-processing>
+      </x-display>
+    </main>
+  </body>
+</html>
diff --git a/packages/twopoint5d-elements-e2e/src/post-processing.ts b/packages/twopoint5d-elements-e2e/src/post-processing.ts
@@ -0,0 +1,36 @@
+import {TextureStore} from '@spearwolf/twopoint5d';
+import {DisplayElement, Stage2DElement} from '@spearwolf/twopoint5d-elements';
+import {Color, Scene, Sprite, SpriteMaterial} from 'three';
+import './display.css';
+import './style.css';
+
+const initialize = async (action: (el: Stage2DElement) => void) => {
+  customElements.define('x-display', DisplayElement);
+  customElements.define('x-stage2d', Stage2DElement);
+
+  const el = await Stage2DElement.whenDefined(document.getElementById('stage2d'));
+  action(el);
+};
+
+const textures = new TextureStore().load('/assets/textures.json');
+
+initialize((el) => {
+  el.sceneReady().then((scene: Scene) => {
+    scene.background = new Color(0x212121);
+  });
+
+  el.firstFrame().then(({renderer, scene}) => {
+    textures.renderer = renderer;
+
+    const sprite = new Sprite();
+    sprite.scale.set(197, 205, 1);
+    scene.add(sprite);
+
+    textures.get('ballPatternRot', ['texture', 'imageCoords'], ([texture, imageCoords]) => {
+      console.log('texture', {texture, imageCoords});
+
+      sprite.material?.dispose();
+      sprite.material = new SpriteMaterial({map: texture});
+    });
+  });
+});
diff --git a/packages/twopoint5d/src/stage/PostProcessingRenderer.ts b/packages/twopoint5d/src/stage/PostProcessingRenderer.ts
@@ -1,5 +1,6 @@
 import type {WebGLRenderer} from 'three';
-import {EffectComposer, Pass} from 'three/addons/postprocessing/EffectComposer.js';
+import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
+import {Pass} from 'three/addons/postprocessing/Pass.js';
 import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
 import {
   StageAdded,
