add <two5-post-processing>

Author: spearwolf

packages/twopoint5d-elements-e2e/pages/bundle.html

@@ -11,5 +11,6 @@
     <two5-display debug data-testid="display"></two5-display>
     <two5-stage2d debug data-testid="stage2d"></two5-stage2d>
     <two5-texture-store debug data-testid="texture-store"></two5-texture-store>
+    <two5-post-processing debug data-testid="post-processing"></two5-post-processing>
   </body>
 </html>

packages/twopoint5d-elements-e2e/pages/post-processing.html

@@ -11,7 +11,7 @@
     <main class="two5-display-container">
       <x-display class="two5-display">
         <x-texture-store id="texstore" src="/assets/textures.json">
-          <x-post-processing debug>
+          <x-post-processing debug id="pp">
             <x-stage2d id="stage2d" projection-type="parallax" width="197" height="205"></x-stage2d>
           </x-post-processing>
         </x-texture-store>

packages/twopoint5d-elements-e2e/src/post-processing.ts

@@ -1,25 +1,33 @@
-import type {TextureStore} from '@spearwolf/twopoint5d';
-import {DisplayElement, Stage2DElement, TextureStoreElement} from '@spearwolf/twopoint5d-elements';
+import type {PostProcessingRenderer, TextureStore} from '@spearwolf/twopoint5d';
+import {DisplayElement, PostProcessingElement, Stage2DElement, TextureStoreElement} from '@spearwolf/twopoint5d-elements';
 import {Color, Scene, Sprite, SpriteMaterial} from 'three';
+import {GlitchPass} from 'three/addons/postprocessing/GlitchPass.js';
 import './display.css';
 import './style.css';
 
-const initialize = async (action: (scene: Scene, store: TextureStore) => void) => {
+const initialize = async (
+  action: (frame: {scene: Scene}, store: TextureStore, postProcessing: PostProcessingRenderer) => void,
+) => {
   customElements.define('x-display', DisplayElement);
   customElements.define('x-stage2d', Stage2DElement);
   customElements.define('x-texture-store', TextureStoreElement);
+  customElements.define('x-post-processing', PostProcessingElement);
 
-  const [stageEl, storeEl] = await Promise.all([
+  const [stageEl, storeEl, postProcessingEl] = await Promise.all([
     Stage2DElement.whenDefined(document.getElementById('stage2d')),
     TextureStoreElement.whenDefined(document.getElementById('texstore')),
+    PostProcessingElement.whenDefined(document.getElementById('pp')),
   ]);
 
-  action(await stageEl.sceneReady(), storeEl.store);
+  action(await stageEl.firstFrame(), storeEl.store, postProcessingEl.renderer);
 };
 
-initialize((scene, textureStore) => {
+initialize(({scene}, textureStore, postProcessing) => {
   scene.background = new Color(0x212121);
 
+  const glitchPass = new GlitchPass();
+  postProcessing.addPass(glitchPass);
+
   const sprite = new Sprite();
   sprite.scale.set(197, 205, 1);
   scene.add(sprite);

packages/twopoint5d-elements-e2e/tests/bundle.spec.ts

@@ -44,4 +44,14 @@ test.describe('bundle', () => {
       expect(await whenDefined(page, 'two5-texture-store')).toBe(true);
     });
   });
+
+  test.describe('two5-post-processing', () => {
+    test('has element', async ({page}) => {
+      await expect(page.getByTestId('post-processing')).toBeAttached();
+    });
+
+    test('custom element is defined', async ({page}) => {
+      expect(await whenDefined(page, 'two5-post-processing')).toBe(true);
+    });
+  });
 });

packages/twopoint5d-elements/package.json

@@ -36,16 +36,22 @@
     "./two5-texture-store.js": {
       "default": "./dist/src/two5-texture-store.js",
       "types": "./dist/src/two5-texture-store.d.ts"
+    },
+    "./two5-post-processing.js": {
+      "default": "./dist/src/two5-post-processing.js",
+      "types": "./dist/src/two5-post-processing.d.ts"
     }
   },
   "sideEffects": [
     "build/src/two5-display.js",
     "build/src/two5-stage2d.js",
     "build/src/two5-texture-store.js",
+    "build/src/two5-post-processing.js",
     "build/src/components/attachContextRoot.js",
     "dist/src/two5-display.js",
     "dist/src/two5-stage2d.js",
     "dist/src/two5-texture-store.js",
+    "dist/src/two5-post-processing.js",
     "dist/src/components/attachContextRoot.js",
     "dist/src/bundle.js",
     "dist/bundle.js"

packages/twopoint5d-elements/package.override.json

@@ -5,6 +5,7 @@
     "src/two5-display.js",
     "src/two5-stage2d.js",
     "src/two5-texture-store.js",
+    "src/two5-post-processing.js",
     "src/components/attachContextRoot.js"
   ],
   "scripts": null,

packages/twopoint5d-elements/src/bundle.ts

@@ -1,3 +1,4 @@
 import './two5-display.js';
+import './two5-post-processing.js';
 import './two5-stage2d.js';
 import './two5-texture-store.js';

packages/twopoint5d-elements/src/components/PostProcessingElement.ts

@@ -0,0 +1,63 @@
+import {consume, provide} from '@lit/context';
+import {eventize, type Eventize} from '@spearwolf/eventize';
+import {createEffect, type SignalReader} from '@spearwolf/signalize';
+import {signal, signalReader} from '@spearwolf/signalize/decorators';
+import {PostProcessingRenderer, type IStageRenderer} from '@spearwolf/twopoint5d';
+import {css, html} from 'lit';
+import {property} from 'lit/decorators.js';
+import {stageRendererContext} from '../index.js';
+import {whenDefined} from '../utils/whenDefined.js';
+import {TwoPoint5DElement} from './TwoPoint5DElement.js';
+
+export interface PostProcessingElement extends Eventize {}
+
+export class PostProcessingElement extends TwoPoint5DElement {
+  static async whenDefined(el: any): Promise<PostProcessingElement> {
+    await whenDefined(el);
+    if (el instanceof PostProcessingElement) {
+      return el;
+    }
+    throw new Error('not a PostProcessingElement');
+  }
+
+  static override styles = css`
+    :host {
+      display: inline;
+    }
+  `;
+
+  @consume({context: stageRendererContext, subscribe: true})
+  @property({attribute: false})
+  accessor stageRendererCtx: IStageRenderer | undefined;
+
+  @signal({readAsValue: true}) accessor parentRenderer: IStageRenderer | undefined;
+  @signalReader() accessor parentRenderer$: SignalReader<IStageRenderer | undefined>;
+
+  @provide({context: stageRendererContext})
+  accessor renderer = new PostProcessingRenderer();
+
+  constructor() {
+    super();
+    eventize(this);
+
+    this.loggerNS = 'two5-post-processing';
+
+    createEffect(() => {
+      const parent = this.parentRenderer;
+      if (parent) {
+        parent.addStage(this.renderer);
+        this.logger?.log('added renderer to parent', this);
+        return () => {
+          parent.removeStage(this.renderer);
+          this.logger?.log('removed renderer from parent', {parent, self: this});
+        };
+      }
+    }, [this.parentRenderer$]);
+  }
+
+  override render() {
+    this.parentRenderer = this.stageRendererCtx;
+
+    return html`<slot></slot>`;
+  }
+}

packages/twopoint5d-elements/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components/DisplayElement.js';
+export * from './components/PostProcessingElement.js';
 export * from './components/Stage2DElement.js';
 export * from './components/TextureStoreElement.js';
 export * from './components/TwoPoint5DElement.js';

packages/twopoint5d-elements/src/two5-post-processing.ts

@@ -0,0 +1,4 @@
+import {PostProcessingElement} from './components/PostProcessingElement.js';
+import './components/attachContextRoot.js';
+
+customElements.define('two5-post-processing', PostProcessingElement);