@lightningjs/renderer 0.9.3 → 1.0.0-rc.0

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

@@ -16,10 +16,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {
+  updateFloat32ArrayLength4,
+  validateArrayLength4,
+} from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
   type ShaderEffectUniforms,
+  type ShaderEffectValueMap,
 } from './ShaderEffect.js';
 
 /**
@@ -63,21 +68,8 @@ export class FadeOutEffect extends ShaderEffect {
       value: 0,
       method: 'uniform4fv',
       type: 'vec4',
-      validator: (value: number | number[]) => {
-        let r = value;
-        if (Array.isArray(r)) {
-          if (r.length === 2) {
-            r = [r[0], r[1], r[0], r[1]] as number[];
-          } else if (r.length === 3) {
-            r = [r[0], r[1], r[2], r[0]] as number[];
-          } else if (r.length !== 4) {
-            r = [r[0], r[0], r[0], r[0]] as number[];
-          }
-        } else if (typeof r === 'number') {
-          r = [r, r, r, r];
-        }
-        return r;
-      },
+      validator: validateArrayLength4,
+      updateProgramValue: updateFloat32ArrayLength4,
     },
   };
 

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

@@ -84,8 +84,11 @@ export class GlitchEffect extends ShaderEffect {
     time: {
       value: 0,
       method: 'uniform1f',
-      validator: (value: number) => {
-        return (Date.now() - value) % 1000;
+      updateOnBind: true,
+      updateProgramValue: (values) => {
+        const value = (values.value =
+          (Date.now() - (values.value as number)) % 1000);
+        values.programValue = value;
       },
       type: 'float',
     },

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

@@ -16,10 +16,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { DynamicShaderProps } from '../DynamicShader.js';
+import { updateWebSafeRadius, validateArrayLength4 } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
   type ShaderEffectUniforms,
+  type ShaderEffectValueMap,
 } from './ShaderEffect.js';
 
 /**
@@ -103,21 +106,9 @@ export class HolePunchEffect extends ShaderEffect {
       value: 0,
       method: 'uniform4fv',
       type: 'vec4',
-      validator: (value: number | number[]) => {
-        let r = value;
-        if (Array.isArray(r)) {
-          if (r.length === 2) {
-            r = [r[0], r[1], r[0], r[1]] as number[];
-          } else if (r.length === 3) {
-            r = [r[0], r[1], r[2], r[0]] as number[];
-          } else if (r.length !== 4) {
-            r = [r[0], r[0], r[0], r[0]] as number[];
-          }
-        } else if (typeof r === 'number') {
-          r = [r, r, r, r];
-        }
-        return r;
-      },
+      updateOnBind: true,
+      validator: validateArrayLength4,
+      updateProgramValue: updateWebSafeRadius,
     },
   };
 

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

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import { updateFloat32ArrayLengthN } from './EffectUtils.js';
 import {
   type DefaultEffectProps,
   ShaderEffect,
@@ -94,9 +95,12 @@ export class LinearGradientEffect extends ShaderEffect {
     colors: {
       value: 0xffffffff,
       validator: (rgbas: number[]): number[] => {
-        const cols = rgbas.map((rgbas) => getNormalizedRgbaComponents(rgbas));
-        return cols.reduce((acc, val) => acc.concat(val), [] as number[]);
+        return rgbas.reduce(
+          (acc, val) => acc.concat(getNormalizedRgbaComponents(val)),
+          [] as number[],
+        );
       },
+      updateProgramValue: updateFloat32ArrayLengthN,
       size: (props: LinearGradientEffectProps) => props.colors!.length,
       method: 'uniform4fv',
       type: 'vec4',

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

@@ -17,6 +17,10 @@
  * limitations under the License.
  */
 import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import {
+  updateFloat32ArrayLength2,
+  updateFloat32ArrayLengthN,
+} from './EffectUtils.js';
 import {
   type DefaultEffectProps,
   ShaderEffect,
@@ -105,15 +109,19 @@ export class RadialGradientEffect extends ShaderEffect {
     },
     pivot: {
       value: [0.5, 0.5],
+      updateProgramValue: updateFloat32ArrayLength2,
       method: 'uniform2fv',
       type: 'vec2',
     },
     colors: {
       value: 0xffffffff,
       validator: (rgbas: number[]): number[] => {
-        const cols = rgbas.map((rgbas) => getNormalizedRgbaComponents(rgbas));
-        return cols.reduce((acc, val) => acc.concat(val), [] as number[]);
+        return rgbas.reduce(
+          (acc, val) => acc.concat(getNormalizedRgbaComponents(val)),
+          [] as number[],
+        );
       },
+      updateProgramValue: updateFloat32ArrayLengthN,
       size: (props: RadialGradientEffectProps) => props.colors!.length,
       method: 'uniform4fv',
       type: 'vec4',

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

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import { updateShaderEffectColor } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
@@ -132,7 +133,7 @@ export class RadialProgressEffect extends ShaderEffect {
     },
     color: {
       value: 0xffffffff,
-      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      updateProgramValue: updateShaderEffectColor,
       method: 'uniform4fv',
       type: 'vec4',
     },

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

@@ -16,10 +16,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { DynamicShaderProps } from '../DynamicShader.js';
+import { updateWebSafeRadius, validateArrayLength4 } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
   type ShaderEffectUniforms,
+  type ShaderEffectValueMap,
 } from './ShaderEffect.js';
 
 /**
@@ -65,21 +68,9 @@ export class RadiusEffect extends ShaderEffect {
       value: 0,
       method: 'uniform4fv',
       type: 'vec4',
-      validator: (value: number | number[]) => {
-        let r = value;
-        if (Array.isArray(r)) {
-          if (r.length === 2) {
-            r = [r[0], r[1], r[0], r[1]] as number[];
-          } else if (r.length === 3) {
-            r = [r[0], r[1], r[2], r[0]] as number[];
-          } else if (r.length !== 4) {
-            r = [r[0], r[0], r[0], r[0]] as number[];
-          }
-        } else if (typeof r === 'number') {
-          r = [r, r, r, r];
-        }
-        return r;
-      },
+      updateOnBind: true,
+      validator: validateArrayLength4,
+      updateProgramValue: updateWebSafeRadius,
     },
   };
 

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

@@ -1,3 +1,7 @@
+import type {
+  AlphaShaderProp,
+  DimensionsShaderProp,
+} from '../../WebGlCoreShader.js';
 import type {
   UniformInfo,
   UniformMethodMap,
@@ -9,12 +13,28 @@ export interface ShaderEffectUniform {
   method: keyof UniformMethodMap;
   name?: string;
   size?: (value: Record<string, unknown>) => number;
+  updateOnBind?: boolean;
+  updateProgramValue?: (
+    programValues: ShaderEffectValueMap,
+    shaderProps?: Record<string, unknown>,
+  ) => void;
   validator?: (
     value: any,
     props: Record<string, unknown>,
   ) => number | number[] | number[][];
 }
 
+export interface ShaderEffectValueMap
+  extends DimensionsShaderProp,
+    AlphaShaderProp {
+  value: ShaderEffectUniform['value'];
+  programValue: number | Float32Array | undefined;
+  hasValidator: boolean;
+  hasProgramValueUpdater: boolean;
+  updateOnBind: boolean;
+  validatedValue?: number | number[];
+}
+
 export interface ShaderEffectUniforms {
   [key: string]: ShaderEffectUniform;
 }

package/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts

@@ -25,7 +25,6 @@ import { ImageTexture } from '../../../textures/ImageTexture.js';
 import {
   TrFontFace,
   type NormalizedFontMetrics,
-  type TrFontFaceDescriptors,
   type TrFontFaceOptions,
 } from '../TrFontFace.js';
 import type { FontShaper } from './internal/FontShaper.js';
@@ -77,25 +76,25 @@ export class SdfTrFontFace<
       'SDF Font Faces can only be used with the WebGL Renderer',
     );
 
-    this.texture = stage.txManager.loadTexture(
-      'ImageTexture',
-      {
-        src: atlasUrl,
-        // IMPORTANT: The SDF shader requires the alpha channel to NOT be
-        // premultiplied on the atlas texture. If it is premultiplied, the
-        // rendering of SDF glyphs (especially single-channel SDF fonts) will
-        // be very jagged.
-        premultiplyAlpha: false,
-      },
-      {
-        preload: true,
-      },
-    );
+    // Load image
+    this.texture = stage.txManager.loadTexture('ImageTexture', {
+      src: atlasUrl,
+      // IMPORTANT: The SDF shader requires the alpha channel to NOT be
+      // premultiplied on the atlas texture. If it is premultiplied, the
+      // rendering of SDF glyphs (especially single-channel SDF fonts) will
+      // be very jagged.
+      premultiplyAlpha: false,
+    });
 
     this.texture.on('loaded', () => {
       this.checkLoaded();
+      // Make sure we mark the stage for a re-render (in case the font's texture was freed and reloaded)
+      stage.requestRender();
     });
 
+    // Pre-load it
+    this.texture.ctxTexture.load();
+
     // Set this.data to the fetched data from dataUrl
     fetch(atlasDataUrl)
       .then(async (response) => {

package/src/core/text-rendering/font-face-types/TrFontFace.ts

@@ -61,7 +61,6 @@ export interface TrFontFaceDescriptors {
   unicodeRange?: string;
   display?: FontDisplay;
   featureSettings?: string;
-  variant?: string;
 }
 
 export interface FontMetrics {
@@ -182,7 +181,6 @@ export class TrFontFace extends EventEmitter {
           : descriptors.weight,
       stretch: descriptors.stretch,
       unicodeRange: descriptors.unicodeRange,
-      variant: descriptors.variant,
       featureSettings: descriptors.featureSettings,
       display: descriptors.display,
     };

package/src/core/text-rendering/font-face-types/WebTrFontFace.ts

@@ -57,7 +57,6 @@ export class WebTrFontFace extends TrFontFace {
           : determinedDescriptors.weight,
       stretch: determinedDescriptors.stretch,
       unicodeRange: determinedDescriptors.unicodeRange,
-      variant: determinedDescriptors.variant,
       featureSettings: determinedDescriptors.featureSettings,
       display: determinedDescriptors.display,
     };