@lightningjs/renderer 2.1.1 → 2.2.0

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -22,7 +22,7 @@ import {
   type DimensionsShaderProp,
   type AlphaShaderProp,
 } from '../WebGlCoreShader.js';
-import type { UniformInfo } from '../internal/ShaderUtils.js';
+import { type UniformInfo } from '../internal/ShaderUtils.js';
 import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
 import {
   ShaderEffect,
@@ -33,6 +33,7 @@ import {
 } from './effects/ShaderEffect.js';
 import type { EffectMap } from '../../../CoreShaderManager.js';
 import { assertTruthy } from '../../../../utils.js';
+import type { UniformMethodMap } from '../../../lib/WebGlContextWrapper.js';
 
 export interface DynamicShaderProps
   extends DimensionsShaderProp,
@@ -74,6 +75,7 @@ const getResolvedEffect = (
       const result: ShaderEffectValueMap = {
         value: defaultPropValues[key] as ShaderEffectUniform['value'],
         programValue: undefined,
+        method: uniform.method,
         updateOnBind: uniform.updateOnBind || false,
         hasValidator: uniform.validator !== undefined,
         hasProgramValueUpdater: uniform.updateProgramValue !== undefined,
@@ -142,13 +144,82 @@ export class DynamicShader extends WebGlCoreShader {
     glw.bindTexture(textures[0]!.ctxTexture);
   }
 
+  bindUniformMethods(props: DynamicShaderProps): void {
+    const glw = this.glw;
+    const effects = props.effects;
+    const effectsL = effects!.length;
+    for (let i = 0; i < effectsL; i++) {
+      const uniformInfo = this.effects[i]!.uniformInfo;
+      const effect = effects![i]! as Record<string, any>;
+      const propKeys = Object.keys(effect.props);
+      const propsLength = propKeys.length;
+      for (let j = 0; j < propsLength; j++) {
+        const key = propKeys[j]!;
+        const method = effect.props[key].method as keyof UniformMethodMap;
+        const location = this.getUniformLocation(uniformInfo[key]!.name);
+
+        if (
+          method === 'uniform2fv' ||
+          method === 'uniform2iv' ||
+          //uniform === 'uniform3fv	' || <--- check why this isnt recognized
+          method === 'uniform3iv' ||
+          method === 'uniform4fv' ||
+          method === 'uniform4iv' ||
+          method === 'uniformMatrix2fv' ||
+          method === 'uniformMatrix3fv' ||
+          method === 'uniformMatrix4fv' ||
+          method === 'uniform1f' ||
+          method === 'uniform1fv' ||
+          method === 'uniform1i' ||
+          method === 'uniform1iv'
+        ) {
+          effect.props[key].setUniformValue = function () {
+            glw[method](location, this.programValue);
+          };
+          continue;
+        }
+
+        if (method === 'uniform2f' || method === 'uniform2i') {
+          effect.props[key].setUniformValue = function () {
+            glw[method](location, this.programValue[0]!, this.programValue[1]!);
+          };
+          continue;
+        }
+
+        if (method === 'uniform3f' || method === 'uniform3i') {
+          effect.props[key].setUniformValue = function () {
+            glw[method](
+              location,
+              this.programValue[0]!,
+              this.programValue[1]!,
+              this.programValue[2]!,
+            );
+          };
+          continue;
+        }
+
+        if (method === 'uniform4f' || method === 'uniform4i') {
+          effect.props[key].setUniformValue = function () {
+            glw[method](
+              location,
+              this.programValue[0]!,
+              this.programValue[1]!,
+              this.programValue[2]!,
+              this.programValue[3]!,
+            );
+          };
+          continue;
+        }
+      }
+    }
+  }
+
   protected override bindProps(props: Required<DynamicShaderProps>): void {
     const effects = props.effects;
     const effectsL = effects.length;
     let i = 0;
     for (; i < effectsL; i++) {
       const effect = effects[i]! as Record<string, any>;
-      const uniformInfo = this.effects[i]!.uniformInfo;
       const propKeys = Object.keys(effect.props);
       const propsLength = propKeys.length;
       let j = 0;
@@ -162,7 +233,8 @@ export class DynamicShader extends WebGlCoreShader {
             ]?.uniforms[key];
           uniform?.updateProgramValue!(effect.props[key], props);
         }
-        this.setUniform(uniformInfo[key]!.name, effect.props[key].programValue);
+
+        prop.setUniformValue();
       }
     }
   }

package/src/core/renderers/webgl/shaders/RoundedRectangle.ts

@@ -80,7 +80,10 @@ export class RoundedRectangle extends WebGlCoreShader {
     const radiusFactor =
       Math.min(props.$dimensions.width, props.$dimensions.height) /
       (2.0 * props.radius);
-    this.setUniform('u_radius', props.radius * Math.min(radiusFactor, 1));
+    this.glw.uniform1f(
+      this.getUniformLocation('u_radius'),
+      props.radius * Math.min(radiusFactor, 1),
+    );
   }
 
   override canBatchShaderProps(

package/src/core/renderers/webgl/shaders/SdfShader.ts

@@ -89,18 +89,33 @@ export class SdfShader extends WebGlCoreShader {
     const resolvedProps = SdfShader.resolveDefaults(props);
     for (const key in resolvedProps) {
       if (key === 'transform') {
-        this.setUniform('u_transform', false, resolvedProps[key]);
+        this.glw.uniformMatrix3fv(
+          this.getUniformLocation('u_transform'),
+          resolvedProps[key],
+        );
       } else if (key === 'scrollY') {
-        this.setUniform('u_scrollY', resolvedProps[key]);
+        this.glw.uniform1f(
+          this.getUniformLocation('u_scrollY'),
+          resolvedProps[key],
+        );
       } else if (key === 'color') {
         const components = getNormalizedRgbaComponents(resolvedProps.color);
-        this.setUniform('u_color', components);
+        this.glw.uniform4fv(this.getUniformLocation('u_color'), components);
       } else if (key === 'size') {
-        this.setUniform('u_size', resolvedProps[key]);
+        this.glw.uniform1f(
+          this.getUniformLocation('u_size'),
+          resolvedProps[key],
+        );
       } else if (key === 'distanceRange') {
-        this.setUniform('u_distanceRange', resolvedProps[key]);
+        this.glw.uniform1f(
+          this.getUniformLocation('u_distanceRange'),
+          resolvedProps[key],
+        );
       } else if (key === 'debug') {
-        this.setUniform('u_debug', resolvedProps[key] ? 1.0 : 0.0);
+        this.glw.uniform1i(
+          this.getUniformLocation('u_debug'),
+          resolvedProps[key] ? 1 : 0,
+        );
       }
     }
   }

package/src/core/renderers/webgl/shaders/effects/ShaderEffect.ts

@@ -1,5 +1,6 @@
 import type { EffectMap } from '../../../../CoreShaderManager.js';
 import type { ExtractProps } from '../../../../CoreTextureManager.js';
+import type { WebGlContextWrapper } from '../../../../lib/WebGlContextWrapper.js';
 import type {
   AlphaShaderProp,
   DimensionsShaderProp,
@@ -89,6 +90,8 @@ export interface ShaderEffectValueMap
     AlphaShaderProp {
   value: ShaderEffectUniform['value'];
   programValue: number | Float32Array | undefined;
+  method: keyof UniformMethodMap;
+  setUniformValue?: () => void | null;
   hasValidator: boolean;
   hasProgramValueUpdater: boolean;
   updateOnBind: boolean;

package/src/core/text-rendering/renderers/TextRenderer.ts

@@ -431,24 +431,24 @@ export abstract class TextRenderer<
     };
     // For each prop setter add a wrapper method that checks if the prop is
     // different before calling the setter
-    this.set = Object.freeze(
-      Object.fromEntries(
-        Object.entries(propSetters).map(([key, setter]) => {
-          return [
-            key as keyof TrProps,
-            (state: StateT, value: TrProps[keyof TrProps]) => {
-              if (state.props[key as keyof TrProps] !== value) {
-                setter(state, value as never);
-                // Assume any prop change will require a render
-                // This is required because otherwise a paused RAF will result
-                // in renders when text props are changed.
-                this.stage.requestRender();
-              }
-            },
-          ];
-        }),
-      ),
-    ) as typeof this.set;
+    const propSet = {};
+    Object.keys(propSetters).forEach((key) => {
+      Object.defineProperty(propSet, key, {
+        value: (state: StateT, value: TrProps[keyof TrProps]) => {
+          // Check if the current prop value is different before calling the setter
+          if (state.props[key as keyof TrProps] !== value) {
+            propSetters[key as keyof TrPropSetters](state, value as never);
+
+            // Assume any prop change will require a render
+            // This ensures that renders are triggered appropriately even with RAF paused
+            this.stage.requestRender();
+          }
+        },
+        writable: false, // Prevents property from being changed
+        configurable: false, // Prevents property from being deleted
+      });
+    });
+    this.set = propSet as Readonly<TrPropSetters<StateT>>;
   }
 
   setStatus(state: StateT, status: StateT['status'], error?: Error) {