@lightningjs/renderer 3.0.0-beta4 → 3.0.0-beta5

package/dist/src/core/renderers/webgl/WebGlCoreShaderManager.d.ts

@@ -0,0 +1,27 @@
+import { type DynamicEffects, DynamicShaderController } from '../../../main-api/DynamicShaderController.js';
+import type { ShaderController } from '../../../main-api/ShaderController.js';
+import { CoreShaderManager, type ShaderMap } from '../../CoreShaderManager.js';
+import type { ExtractProps } from '../../CoreTextureManager.js';
+import { type DynamicShaderProps } from './shaders/DynamicShader.js';
+import type { WebGlCoreRenderer } from './WebGlCoreRenderer.js';
+export interface DynamicShaderEffectMap {
+}
+export declare class WebGlCoreShaderManager extends CoreShaderManager {
+    protected effectConstructors: Partial<DynamicShaderEffectMap>;
+    constructor(renderer: WebGlCoreRenderer);
+    registerEffectType<Type extends keyof DynamicShaderEffectMap>(effectType: Type, effectClass: DynamicShaderEffectMap[Type]): void;
+    getRegisteredEffects(): Partial<DynamicShaderEffectMap>;
+    loadShader<Type extends keyof ShaderMap>(shType: Type, props?: ExtractProps<ShaderMap[Type]>): ShaderController<Type>;
+    loadDynamicShader<T extends DynamicEffects<[
+        ...{
+            name?: string;
+            type: keyof DynamicShaderEffectMap;
+        }[]
+    ]>>(props: DynamicShaderProps): DynamicShaderController<T>;
+    protected _createDynShaderCtr<T extends DynamicEffects<[
+        ...{
+            name?: string;
+            type: keyof DynamicShaderEffectMap;
+        }[]
+    ]>>(shader: InstanceType<ShaderMap['DynamicShader']>, props: ExtractProps<ShaderMap['DynamicShader']>): DynamicShaderController<T>;
+}

package/dist/src/core/renderers/webgl/WebGlCoreShaderManager.js

@@ -0,0 +1,82 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2024 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { DynamicShaderController, } from '../../../main-api/DynamicShaderController.js';
+import { CoreShaderManager } from '../../CoreShaderManager.js';
+import { DefaultShader } from './shaders/DefaultShader.js';
+import { DynamicShader, } from './shaders/DynamicShader.js';
+import { SdfShader } from './shaders/SdfShader.js';
+export class WebGlCoreShaderManager extends CoreShaderManager {
+    effectConstructors = {};
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.registerShaderType('DefaultShader', DefaultShader);
+        this.registerShaderType('DynamicShader', DynamicShader);
+        this.registerShaderType('SdfShader', SdfShader);
+    }
+    registerEffectType(effectType, effectClass) {
+        this.effectConstructors[effectType] = effectClass;
+    }
+    getRegisteredEffects() {
+        return this.effectConstructors;
+    }
+    loadShader(shType, props) {
+        if (!this.renderer) {
+            throw new Error(`Renderer is not been defined`);
+        }
+        const ShaderClass = this.shConstructors[shType];
+        if (!ShaderClass) {
+            throw new Error(`Shader type "${shType}" is not registered`);
+        }
+        if (shType === 'DynamicShader') {
+            return this.loadDynamicShader(props);
+        }
+        const resolvedProps = ShaderClass.resolveDefaults(props);
+        const cacheKey = ShaderClass.makeCacheKey(resolvedProps) || ShaderClass.name;
+        if (cacheKey && this.shCache.has(cacheKey)) {
+            return this._createShaderCtr(shType, this.shCache.get(cacheKey), resolvedProps);
+        }
+        // @ts-expect-error ShaderClass WILL accept a Renderer
+        const shader = new ShaderClass(this.renderer, props);
+        if (cacheKey) {
+            this.shCache.set(cacheKey, shader);
+        }
+        return this._createShaderCtr(shType, shader, resolvedProps);
+    }
+    loadDynamicShader(props) {
+        if (!this.renderer) {
+            throw new Error(`Renderer is not been defined`);
+        }
+        const resolvedProps = DynamicShader.resolveDefaults(props, this.effectConstructors);
+        const cacheKey = DynamicShader.makeCacheKey(resolvedProps, this.effectConstructors);
+        if (cacheKey && this.shCache.has(cacheKey)) {
+            return this._createDynShaderCtr(this.shCache.get(cacheKey), resolvedProps);
+        }
+        const shader = new DynamicShader(this.renderer, props, this.effectConstructors);
+        if (cacheKey) {
+            this.shCache.set(cacheKey, shader);
+        }
+        return this._createDynShaderCtr(shader, resolvedProps);
+    }
+    _createDynShaderCtr(shader, props) {
+        shader.bindUniformMethods(props);
+        return new DynamicShaderController(shader, props, this);
+    }
+}
+//# sourceMappingURL=WebGlCoreShaderManager.js.map

package/dist/src/core/renderers/webgl/WebGlCoreShaderManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGlCoreShaderManager.js","sourceRoot":"","sources":["../../../../../src/core/renderers/webgl/WebGlCoreShaderManager.ts"],"names":[],"mappings":"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"}

package/dist/src/core/renderers/webgl/WebGlCoreShaderProgram.d.ts

@@ -0,0 +1,11 @@
+import type { WebGlContextWrapper } from "../../lib/WebGlContextWrapper.js";
+import type { WebGlShader } from "../CoreShaderManager.js";
+import type { WebGlCoreRenderOp } from "./WebGlCoreRenderOp.js";
+export default class WebGlCoreShaderProgram {
+    protected program: WebGLProgram;
+    protected vao: WebGLVertexArrayObject | undefined;
+    readonly uniformLocations: Record<string, number>;
+    readonly attributeLocations: Record<string, number>;
+    constructor(glw: WebGlContextWrapper, shader: WebGlShader, options: Record<string, unknown>);
+    bindRenderOp(renderOp: WebGlCoreRenderOp): void;
+}

package/dist/src/core/renderers/webgl/WebGlCoreShaderProgram.js

@@ -0,0 +1,34 @@
+import { createProgram, createShader, DEFAULT_FRAGMENT, DEFAULT_VERTEX } from "./internal/ShaderUtils.js";
+export default class WebGlCoreShaderProgram {
+    program;
+    vao;
+    uniformLocations;
+    attributeLocations;
+    constructor(glw, shader, options) {
+        const webGl2 = glw.isWebGl2();
+        const requiredExtensions = (webGl2 && options.webgl2Extensions) ||
+            (!webGl2 && options.webgl1Extensions) ||
+            [];
+        const glVersion = webGl2 ? '2.0' : '1.0';
+        requiredExtensions.forEach((extensionName) => {
+            if (!glw.getExtension(extensionName)) {
+                throw new Error(`Shader "${this.constructor.name}" requires extension "${extensionName}" for WebGL ${glVersion} but wasn't found`);
+            }
+        });
+        const vertex = createShader(glw, glw.VERTEX_SHADER, DEFAULT_VERTEX);
+        const fragment = createShader(glw, glw.FRAGMENT_SHADER, DEFAULT_FRAGMENT);
+        if (!vertex || !fragment) {
+            throw new Error();
+        }
+        const program = createProgram(glw, vertex, fragment);
+        if (!program) {
+            throw new Error();
+        }
+        this.program = program;
+        this.uniformLocations = glw.getUniformLocations(program);
+        this.attributeLocations = glw.getAttributeLocations(program);
+    }
+    bindRenderOp(renderOp) {
+    }
+}
+//# sourceMappingURL=WebGlCoreShaderProgram.js.map

package/dist/src/core/renderers/webgl/WebGlCoreShaderProgram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGlCoreShaderProgram.js","sourceRoot":"","sources":["../../../../../src/core/renderers/webgl/WebGlCoreShaderProgram.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG1G,MAAM,CAAC,OAAO,OAAO,sBAAsB;IAC/B,OAAO,CAAe;IACtB,GAAG,CAAqC;IACzC,gBAAgB,CAAyB;IACzC,kBAAkB,CAAwB;IAEnD,YAAY,GAAwB,EAAE,MAAmB,EAAE,OAAgC;QACzF,MAAM,MAAM,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,kBAAkB,GACtB,CAAC,MAAM,IAAI,OAAO,CAAC,gBAAgB,CAAC;YACpC,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,gBAAgB,CAAC;YACrC,EAAE,CAAC;QACL,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QACxC,kBAA+B,CAAC,OAAO,CAAC,CAAC,aAAa,EAAE,EAAE;YACzD,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;gBACpC,MAAM,IAAI,KAAK,CACb,WAAW,IAAI,CAAC,WAAW,CAAC,IAAI,yBAAyB,aAAa,eAAe,SAAS,mBAAmB,CAClH,CAAC;aACH;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,aAAa,EAAE,cAAc,CAAC,CAAA;QACnE,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAA;QAEzE,IAAG,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE;YACvB,MAAM,IAAI,KAAK,EAAE,CAAC;SACnB;QAED,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;QAEpD,IAAG,CAAC,OAAO,EAAE;YACX,MAAM,IAAI,KAAK,EAAE,CAAC;SACnB;QAED,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QAEvB,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QACzD,IAAI,CAAC,kBAAkB,GAAG,GAAG,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAC/D,CAAC;IAED,YAAY,CAAC,QAA2B;IAExC,CAAC;CACF"}

package/dist/src/core/renderers/webgl/internal/ShaderUtils.js

@@ -48,38 +48,38 @@ export function createProgram(glw, vertexShader, fragmentShader) {
     glw.deleteProgram(program);
     return undefined;
 }
-export const DefaultVertexSource = `
-  # ifdef GL_FRAGMENT_PRECISION_HIGH
-  precision highp float;
-  # else
-  precision mediump float;
-  # endif
-
-  attribute vec2 a_position;
-  attribute vec2 a_textureCoords;
-  attribute vec4 a_color;
-  attribute vec2 a_nodeCoords;
-
-  uniform vec2 u_resolution;
-  uniform float u_pixelRatio;
-  uniform vec2 u_dimensions;
-  uniform vec4 u_shadow;
-
-  varying vec4 v_color;
-  varying vec2 v_textureCoords;
-
-  void main() {
-    vec2 normalized = a_position * u_pixelRatio;
-    vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
-
-    vec2 outerEdge = clamp(a_textureCoords * 2.0 - vec2(1.0), -1.0, 1.0);
-    vec2 shadowEdge = outerEdge;
-    vec2 vertexPos = normalized + outerEdge + shadowEdge;
-    v_color = a_color;
-    v_textureCoords = a_textureCoords;
-
-    gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
-  }
+export const DefaultVertexSource = `
+  # ifdef GL_FRAGMENT_PRECISION_HIGH
+  precision highp float;
+  # else
+  precision mediump float;
+  # endif
+
+  attribute vec2 a_position;
+  attribute vec2 a_textureCoords;
+  attribute vec4 a_color;
+  attribute vec2 a_nodeCoords;
+
+  uniform vec2 u_resolution;
+  uniform float u_pixelRatio;
+  uniform vec2 u_dimensions;
+  uniform vec4 u_shadow;
+
+  varying vec4 v_color;
+  varying vec2 v_textureCoords;
+
+  void main() {
+    vec2 normalized = a_position * u_pixelRatio;
+    vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+
+    vec2 outerEdge = clamp(a_textureCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+    vec2 shadowEdge = outerEdge;
+    vec2 vertexPos = normalized + outerEdge + shadowEdge;
+    v_color = a_color;
+    v_textureCoords = a_textureCoords;
+
+    gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
+  }
 `;
 /**
  * generate fragment source for
@@ -87,9 +87,9 @@ export const DefaultVertexSource = `
  * @returns
  */
 export function genGradientColors(stops) {
-    let result = `
-    float stopCalc = (dist - u_stops[0]) / (u_stops[1] - u_stops[0]);
-    vec4 colorOut = mix(u_colors[0], u_colors[1], stopCalc);
+    let result = `
+    float stopCalc = (dist - u_stops[0]) / (u_stops[1] - u_stops[0]);
+    vec4 colorOut = mix(u_colors[0], u_colors[1], stopCalc);
   `;
     if (stops > 2) {
         for (let i = 2; i < stops; i++) {

package/dist/src/core/renderers/webgl/shaders/DefaultShader.js

@@ -35,52 +35,52 @@ export class DefaultShader extends WebGlCoreShader {
         glw.bindTexture(textures[0].ctxTexture);
     }
     static shaderSources = {
-        vertex: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-
-      attribute vec2 a_position;
-      attribute vec2 a_textureCoordinate;
-      attribute vec4 a_color;
-
-      uniform vec2 u_resolution;
-      uniform float u_pixelRatio;
-
-
-      varying vec4 v_color;
-      varying vec2 v_textureCoordinate;
-
-      void main() {
-        vec2 normalized = a_position * u_pixelRatio;
-        vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
-
-        v_color = a_color;
-        v_textureCoordinate = a_textureCoordinate;
-
-        gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
-        gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
-      }
+        vertex: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+
+      attribute vec2 a_position;
+      attribute vec2 a_textureCoordinate;
+      attribute vec4 a_color;
+
+      uniform vec2 u_resolution;
+      uniform float u_pixelRatio;
+
+
+      varying vec4 v_color;
+      varying vec2 v_textureCoordinate;
+
+      void main() {
+        vec2 normalized = a_position * u_pixelRatio;
+        vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+
+        v_color = a_color;
+        v_textureCoordinate = a_textureCoordinate;
+
+        gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
+        gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
+      }
     `,
-        fragment: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-
-      uniform vec2 u_resolution;
-      uniform sampler2D u_texture;
-
-      varying vec4 v_color;
-      varying vec2 v_textureCoordinate;
-
-      void main() {
-          vec4 color = texture2D(u_texture, v_textureCoordinate);
-          gl_FragColor = vec4(v_color) * texture2D(u_texture, v_textureCoordinate);
-      }
+        fragment: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+
+      uniform vec2 u_resolution;
+      uniform sampler2D u_texture;
+
+      varying vec4 v_color;
+      varying vec2 v_textureCoordinate;
+
+      void main() {
+          vec4 color = texture2D(u_texture, v_textureCoordinate);
+          gl_FragColor = vec4(v_color) * texture2D(u_texture, v_textureCoordinate);
+      }
     `,
     };
 }

package/dist/src/core/renderers/webgl/shaders/DefaultShaderBatched.js

@@ -49,70 +49,70 @@ export class DefaultShaderBatched extends WebGlCoreShader {
         this.glw.uniform1iv(this.getUniformLocation('u_textures[0]'), samplers);
     }
     static shaderSources = {
-        vertex: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-
-      attribute vec2 a_textureCoordinate;
-      attribute vec2 a_position;
-      attribute vec4 a_color;
-      attribute float a_textureIndex;
-      attribute float a_depth;
-
-      uniform vec2 u_resolution;
-      uniform float u_pixelRatio;
-
-      varying vec4 v_color;
-      varying vec2 v_textureCoordinate;
-      varying float v_textureIndex;
-
-      void main(){
-        vec2 normalized = a_position * u_pixelRatio / u_resolution;
-        vec2 zero_two = normalized * 2.0;
-        vec2 clip_space = zero_two - 1.0;
-
-        // pass to fragment
-        v_color = a_color;
-        v_textureCoordinate = a_textureCoordinate;
-        v_textureIndex = a_textureIndex;
-
-        // flip y
-        gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
-      }
+        vertex: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+
+      attribute vec2 a_textureCoordinate;
+      attribute vec2 a_position;
+      attribute vec4 a_color;
+      attribute float a_textureIndex;
+      attribute float a_depth;
+
+      uniform vec2 u_resolution;
+      uniform float u_pixelRatio;
+
+      varying vec4 v_color;
+      varying vec2 v_textureCoordinate;
+      varying float v_textureIndex;
+
+      void main(){
+        vec2 normalized = a_position * u_pixelRatio / u_resolution;
+        vec2 zero_two = normalized * 2.0;
+        vec2 clip_space = zero_two - 1.0;
+
+        // pass to fragment
+        v_color = a_color;
+        v_textureCoordinate = a_textureCoordinate;
+        v_textureIndex = a_textureIndex;
+
+        // flip y
+        gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
+      }
     `,
-        fragment: (textureUnits) => `
-      #define txUnits ${textureUnits}
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-
-      uniform vec2 u_resolution;
-      uniform sampler2D u_image;
-      uniform sampler2D u_textures[txUnits];
-
-      varying vec4 v_color;
-      varying vec2 v_textureCoordinate;
-      varying float v_textureIndex;
-
-      vec4 sampleFromTexture(sampler2D textures[${textureUnits}], int idx, vec2 uv) {
+        fragment: (textureUnits) => `
+      #define txUnits ${textureUnits}
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+
+      uniform vec2 u_resolution;
+      uniform sampler2D u_image;
+      uniform sampler2D u_textures[txUnits];
+
+      varying vec4 v_color;
+      varying vec2 v_textureCoordinate;
+      varying float v_textureIndex;
+
+      vec4 sampleFromTexture(sampler2D textures[${textureUnits}], int idx, vec2 uv) {
         ${Array.from(Array(textureUnits).keys())
-            .map((idx) => `
-          ${idx !== 0 ? 'else ' : ''}if (idx == ${idx}) {
-            return texture2D(textures[${idx}], uv);
-          }
+            .map((idx) => `
+          ${idx !== 0 ? 'else ' : ''}if (idx == ${idx}) {
+            return texture2D(textures[${idx}], uv);
+          }
         `)
-            .join('')}
-        return texture2D(textures[0], uv);
-      }
-
-      void main(){
-        gl_FragColor = vec4(v_color) * sampleFromTexture(u_textures, int(v_textureIndex), v_textureCoordinate);
-      }
+            .join('')}
+        return texture2D(textures[0], uv);
+      }
+
+      void main(){
+        gl_FragColor = vec4(v_color) * sampleFromTexture(u_textures, int(v_textureIndex), v_textureCoordinate);
+      }
     `,
     };
 }