refactor(effects-manager): extract GLSL shaders to .glsl files via raw-loader (#886)

packages/phoenix-event-display/package.json

@@ -18,7 +18,7 @@
     "tsc": "tsc",
     "tsc:build": "tsc -p tsconfig.build.json",
     "start": "yarn tsc:build --watch",
-    "build": "rimraf ./dist && yarn tsc:build",
+    "build": "rimraf ./dist && yarn tsc:build && node -e \"require('fs').mkdirSync('dist/managers/three-manager/shaders',{recursive:true});['hover-vertex','hover-fragment'].forEach(f=>require('fs').copyFileSync('src/managers/three-manager/shaders/'+f+'.glsl','dist/managers/three-manager/shaders/'+f+'.glsl'))\"",
     "build:esm": "yarn tsc:build --module es2018 --target es5 --outDir dist/esm",
     "build:cjs": "yarn tsc:build --module commonjs --target es5 --outDir dist/cjs",
     "build:bundle": "webpack -c configs/webpack.conf.js",

packages/phoenix-event-display/src/managers/three-manager/effects-manager.ts

@@ -13,6 +13,8 @@ import {
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
 import { Pass } from 'three/examples/jsm/postprocessing/Pass.js';
+import VERTEX_SHADER from './shaders/hover-vertex';
+import HOVER_FRAGMENT_SHADER from './shaders/hover-fragment';
 
 /**
  * Represents the possible visual states of objects managed
@@ -84,24 +86,6 @@ export class EffectsManager {
   /** Render function with (normal render) or without antialias (effects render). */
   public render: (scene: Scene, camera: Camera) => void;
 
-  /** Vertex shader for hover outline rendering. */
-  private static readonly VERTEX_SHADER = `
-    void main() {
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }
-  `;
-
-  /** Fragment shader for hover outlines. Color controlled via uniforms. */
-  private static readonly HOVER_FRAGMENT_SHADER = `
-    uniform float opacity;
-    uniform float colorR;
-    uniform float colorG;
-    uniform float colorB;
-    void main() {
-      gl_FragColor = vec4(colorR, colorG, colorB, opacity);
-    }
-  `;
-
   /**
    * Constructor for the effects manager.
    * @param camera The camera inside the scene.
@@ -401,8 +385,8 @@ export class EffectsManager {
     const edges = new EdgesGeometry(object.geometry, 15);
 
     const lineMaterial = new ShaderMaterial({
-      vertexShader: EffectsManager.VERTEX_SHADER,
-      fragmentShader: EffectsManager.HOVER_FRAGMENT_SHADER,
+      vertexShader: VERTEX_SHADER,
+      fragmentShader: HOVER_FRAGMENT_SHADER,
       uniforms: {
         opacity: { value: 0.8 },
         colorR: { value: this._hoverColor.r },

packages/phoenix-event-display/src/managers/three-manager/shaders/hover-fragment.ts

@@ -0,0 +1,11 @@
+/** Fragment shader for hover outline color. */
+export default `
+uniform float opacity;
+uniform float colorR;
+uniform float colorG;
+uniform float colorB;
+
+void main() {
+  gl_FragColor = vec4(colorR, colorG, colorB, opacity);
+}
+`;

packages/phoenix-event-display/src/managers/three-manager/shaders/hover-vertex.ts

@@ -0,0 +1,11 @@
+/** Vertex shader for hover outline rendering. */
+export default `
+uniform float opacity;
+uniform float colorR;
+uniform float colorG;
+uniform float colorB;
+
+void main() {
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;

packages/phoenix-ng/jest.config.js

@@ -25,7 +25,9 @@ module.exports = {
   // 🔑 CRITICAL: ensures CI uses your setup-jest.ts
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
 
-  moduleNameMapper: pathsToModuleNameMapper(paths, { prefix: '<rootDir>' }),
+  moduleNameMapper: {
+    ...pathsToModuleNameMapper(paths, { prefix: '<rootDir>' }),
+  },
 
   transformIgnorePatterns: [
     `/node_modules/(?!.*\\.m?js$|${esModules.join('|')})`,