add <two5-glitch-pass> element

Author: spearwolf

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

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

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

@@ -1,7 +1,12 @@
 import type {PostProcessingRenderer, TextureStore} from '@spearwolf/twopoint5d';
-import {DisplayElement, PostProcessingElement, Stage2DElement, TextureStoreElement} from '@spearwolf/twopoint5d-elements';
+import {
+  DisplayElement,
+  GlitchPassElement,
+  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';
 
@@ -12,6 +17,7 @@ const initialize = async (
   customElements.define('x-stage2d', Stage2DElement);
   customElements.define('x-texture-store', TextureStoreElement);
   customElements.define('x-post-processing', PostProcessingElement);
+  customElements.define('x-glitch-pass', GlitchPassElement);
 
   const [stageEl, storeEl, postProcessingEl] = await Promise.all([
     Stage2DElement.whenDefined(document.getElementById('stage2d')),
@@ -22,12 +28,9 @@ const initialize = async (
   action(await stageEl.firstFrame(), storeEl.store, postProcessingEl.renderer);
 };
 
-initialize(({scene}, textureStore, postProcessing) => {
+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/package.json

@@ -40,18 +40,24 @@
     "./two5-post-processing.js": {
       "default": "./dist/src/two5-post-processing.js",
       "types": "./dist/src/two5-post-processing.d.ts"
+    },
+    "./two5-glitch-pass.js": {
+      "default": "./dist/src/two5-glitch-pass.js",
+      "types": "./dist/src/two5-glitch-pass.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/two5-glitch-pass.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/two5-glitch-pass.js",
     "dist/src/components/attachContextRoot.js",
     "dist/src/bundle.js",
     "dist/bundle.js"

packages/twopoint5d-elements/package.override.json

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

packages/twopoint5d-elements/src/bundle.ts

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

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

@@ -0,0 +1,55 @@
+import {consume} from '@lit/context';
+import {effect, signal} from '@spearwolf/signalize/decorators';
+import {css, html} from 'lit';
+import {property} from 'lit/decorators.js';
+import {GlitchPass} from 'three/addons/postprocessing/GlitchPass.js';
+import {postProcessingContext, type IPostProcessingContext} from '../context/post-processing-context.js';
+import {whenDefined} from '../utils/whenDefined.js';
+import {TwoPoint5DElement} from './TwoPoint5DElement.js';
+
+export class GlitchPassElement extends TwoPoint5DElement {
+  static async whenDefined(el: any): Promise<GlitchPassElement> {
+    await whenDefined(el);
+    if (el instanceof GlitchPassElement) {
+      return el;
+    }
+    throw new Error('not a GlitchPassElement');
+  }
+
+  static override styles = css`
+    :host {
+      display: inline;
+    }
+  `;
+
+  @consume({context: postProcessingContext, subscribe: true})
+  @property({attribute: false})
+  @signal()
+  accessor postProcessing: IPostProcessingContext | undefined;
+
+  @signal({readAsValue: true})
+  accessor glitchPass = new GlitchPass();
+
+  @effect({deps: ['postProcessing', 'glitchPass']})
+  onPostProcessingUpdate() {
+    const postProcessing = this.postProcessing;
+    if (postProcessing != null) {
+      this.logger?.log('add glitchPass to postProcessing', {postProcessing, self: this});
+      postProcessing.renderer.addPass(this.glitchPass);
+      return () => {
+        this.logger?.log('remove glitchPass from postProcessing', {postProcessing, self: this});
+        postProcessing.renderer.removePass(this.glitchPass);
+      };
+    }
+  }
+
+  constructor() {
+    super();
+    this.loggerNS = 'two5-glitch-pass';
+    this.onPostProcessingUpdate();
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -1,13 +1,14 @@
-import {consume, provide} from '@lit/context';
+import {ContextProvider, consume, provide} from '@lit/context';
 import {effect, signal} 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 {postProcessingContext, type IPostProcessingContext} from '../context/post-processing-context.js';
+import {stageRendererContext} from '../context/stage-renderer-context.js';
 import {whenDefined} from '../utils/whenDefined.js';
 import {TwoPoint5DElement} from './TwoPoint5DElement.js';
 
-export class PostProcessingElement extends TwoPoint5DElement {
+export class PostProcessingElement extends TwoPoint5DElement implements IPostProcessingContext {
   static async whenDefined(el: any): Promise<PostProcessingElement> {
     await whenDefined(el);
     if (el instanceof PostProcessingElement) {
@@ -30,7 +31,7 @@ export class PostProcessingElement extends TwoPoint5DElement {
   @provide({context: stageRendererContext})
   accessor renderer = new PostProcessingRenderer();
 
-  @effect()
+  @effect({signal: 'parentRenderer'})
   onParentRendererChange() {
     const parent = this.parentRenderer;
     if (parent) {
@@ -43,9 +44,15 @@ export class PostProcessingElement extends TwoPoint5DElement {
     }
   }
 
+  readonly #postProcessingProvider: ContextProvider<typeof postProcessingContext, typeof this>;
+
   constructor() {
     super();
     this.loggerNS = 'two5-post-processing';
+
+    this.#postProcessingProvider = new ContextProvider(this, {context: postProcessingContext});
+    this.#postProcessingProvider.setValue(this);
+
     this.onParentRendererChange();
   }
 

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

@@ -0,0 +1,8 @@
+import {createContext} from '@lit/context';
+import type {PostProcessingRenderer} from '@spearwolf/twopoint5d';
+
+export interface IPostProcessingContext {
+  renderer: PostProcessingRenderer;
+}
+
+export const postProcessingContext = createContext<IPostProcessingContext | undefined>(Symbol('post-processing'));

packages/twopoint5d-elements/src/index.ts

@@ -1,9 +1,11 @@
 export * from './components/DisplayElement.js';
+export * from './components/GlitchPassElement.js';
 export * from './components/PostProcessingElement.js';
 export * from './components/Stage2DElement.js';
 export * from './components/TextureStoreElement.js';
 export * from './components/TwoPoint5DElement.js';
 export * from './context/display-context.js';
+export * from './context/post-processing-context.js';
 export * from './context/stage-renderer-context.js';
 export * from './context/texture-store-context.js';
 export * from './utils/ConsoleLogger.js';

packages/twopoint5d-elements/src/two5-glitch-pass.ts

@@ -0,0 +1,4 @@
+import './components/attachContextRoot.js';
+import {GlitchPassElement} from './components/GlitchPassElement.js';
+
+customElements.define('two5-glitch-pass', GlitchPassElement);