@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta2

package/src/core/lib/WebGlContextWrapper.ts

@@ -3,6 +3,11 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 
 import { assertTruthy } from '../../utils.js';
+import type {
+  Vec2,
+  Vec3,
+  Vec4,
+} from '../renderers/webgl/internal/ShaderUtils.js';
 import { isWebGl2 } from '../renderers/webgl/internal/WebGlUtils.js';
 
 /**
@@ -800,6 +805,20 @@ export class WebGlContextWrapper {
     );
   }
 
+  /**
+   * Sets the value of a vec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v - array of 4 numbers.
+   */
+  uniform2fa(location: string, value: Vec2) {
+    this.gl.uniform2f(
+      this.gl.getUniformLocation(this.curProgram!, location),
+      value[0],
+      value[1],
+    );
+  }
+
   /**
    * Sets the value of a vec2 array uniform variable.
    *
@@ -858,6 +877,21 @@ export class WebGlContextWrapper {
     );
   }
 
+  /**
+   * Sets the value of a vec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v - array of 4 numbers.
+   */
+  uniform3fa(location: string, value: Vec3) {
+    this.gl.uniform3f(
+      this.gl.getUniformLocation(this.curProgram!, location),
+      value[0],
+      value[1],
+      value[2],
+    );
+  }
+
   /**
    * Sets the value of a vec3 array uniform variable.
    *
@@ -920,6 +954,22 @@ export class WebGlContextWrapper {
     );
   }
 
+  /**
+   * Sets the value of a vec4 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v - array of 4 numbers.
+   */
+  uniform4fa(location: string, value: Vec4) {
+    this.gl.uniform4f(
+      this.gl.getUniformLocation(this.curProgram!, location),
+      value[0],
+      value[1],
+      value[2],
+      value[3],
+    );
+  }
+
   /**
    * Sets the value of a vec4 array uniform variable.
    *

package/src/core/lib/utils.ts

@@ -359,3 +359,28 @@ export function calcFactoredRadiusArray(
   result[3] *= factor;
   return result;
 }
+
+export function dataURIToBlob(dataURI: string): Blob {
+  dataURI = dataURI.replace(/^data:/, '');
+
+  const type = dataURI.match(/image\/[^;]+/)?.[0] || '';
+  const base64 = dataURI.replace(/^[^,]+,/, '');
+
+  const sliceSize = 1024;
+  const byteCharacters = atob(base64);
+  const bytesLength = byteCharacters.length;
+  const slicesCount = Math.ceil(bytesLength / sliceSize);
+  const byteArrays = new Array(slicesCount);
+
+  for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+    const begin = sliceIndex * sliceSize;
+    const end = Math.min(begin + sliceSize, bytesLength);
+
+    const bytes = new Array(end - begin);
+    for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+      bytes[i] = byteCharacters[offset]?.charCodeAt(0);
+    }
+    byteArrays[sliceIndex] = new Uint8Array(bytes);
+  }
+  return new Blob(byteArrays, { type });
+}

package/src/core/renderers/CoreShaderNode.ts

@@ -88,7 +88,7 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
   readonly stage: Stage;
   readonly shaderType: CoreShaderType<Props>;
   protected propsConfig: ShaderProps<Props> | undefined;
-  protected resolvedProps: Props | undefined = undefined;
+  readonly resolvedProps: Props | undefined = undefined;
   protected definedProps: Props | undefined = undefined;
   protected node: CoreNode | null = null;
   update: (() => void) | undefined = undefined;
@@ -152,10 +152,6 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
     this.node = node;
   }
 
-  getResolvedProps() {
-    return this.resolvedProps;
-  }
-
   get props(): Props | undefined {
     return this.definedProps;
   }

package/src/core/renderers/canvas/CanvasRenderer.ts

@@ -33,7 +33,6 @@ import {
 } from './internal/ColorUtils.js';
 import { assertTruthy } from '../../../utils.js';
 import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
-import type { CoreShaderType } from '../CoreShaderNode.js';
 
 export class CanvasRenderer extends CoreRenderer {
   private context: CanvasRenderingContext2D;

package/src/core/renderers/canvas/CanvasTexture.ts

@@ -64,8 +64,11 @@ export class CanvasTexture extends CoreContextTexture {
     // - tinted image
     const mult = this.tintCache ? 8 : 4;
     if (this.textureSource.dimensions) {
-      const { width, height } = this.textureSource.dimensions;
-      this.setTextureMemUse(width * height * mult);
+      this.setTextureMemUse(
+        this.textureSource.dimensions.width *
+          this.textureSource.dimensions.height *
+          mult,
+      );
     }
   }
 

package/src/core/renderers/webgl/WebGlRenderOp.ts

@@ -24,6 +24,8 @@ import type { BufferCollection } from './internal/BufferCollection.js';
 import type { WebGlShaderNode } from './WebGlShaderNode.js';
 import type { QuadOptions } from '../CoreRenderer.js';
 import type { CoreTextNode } from '../../CoreTextNode.js';
+import type { RectWithValid } from '../../lib/utils.js';
+import type { Dimensions } from '../../../common/CommonTypes.js';
 
 type ReqQuad =
   | 'alpha'
@@ -44,7 +46,6 @@ type RenderOpQuadOptions = Pick<QuadOptions, ReqQuad> &
  *
  */
 export class WebGlRenderOp extends CoreRenderOp {
-  length = 0;
   numQuads = 0;
   textures: WebGlCtxTexture[] = [];
 
@@ -56,15 +57,32 @@ export class WebGlRenderOp extends CoreRenderOp {
   readonly maxTextures: number;
   readonly buffers: BufferCollection;
   readonly shader: WebGlShaderNode;
+  readonly width: number;
+  readonly height: number;
+  readonly clippingRect: RectWithValid;
+  readonly rtt: boolean;
+  readonly parentHasRenderTexture: boolean;
+  readonly framebufferDimensions?: Dimensions;
+  readonly alpha: number;
+  readonly pixelRatio: number;
 
   constructor(
     readonly renderer: WebGlRenderer,
-    readonly quad: RenderOpQuadOptions,
+    quad: RenderOpQuadOptions,
     readonly bufferIdx: number,
   ) {
     super();
     this.buffers = quad.sdfBuffers || renderer.quadBufferCollection;
     this.shader = quad.shader as WebGlShaderNode;
+    this.width = quad.width;
+    this.height = quad.height;
+    this.clippingRect = quad.clippingRect;
+    this.parentHasRenderTexture = quad.parentHasRenderTexture;
+    this.framebufferDimensions = quad.framebufferDimensions;
+    this.rtt = quad.rtt;
+    this.alpha = quad.alpha;
+    this.pixelRatio =
+      this.parentHasRenderTexture === true ? 1 : renderer.stage.pixelRatio;
 
     /**
      * related to line 51
@@ -110,22 +128,20 @@ export class WebGlRenderOp extends CoreRenderOp {
     // TODO: Reduce calculations required
     const quadIdx = (this.bufferIdx / 32) * 6 * 2;
     // Clipping
-    if (this.quad.clippingRect.valid) {
-      const { x, y, width, height } = this.quad.clippingRect;
-      const pixelRatio = this.quad.parentHasRenderTexture
-        ? 1
-        : stage.pixelRatio;
-      const canvasHeight = options.canvas.height;
-
-      const clipX = Math.round(x * pixelRatio);
-      const clipWidth = Math.round(width * pixelRatio);
-      const clipHeight = Math.round(height * pixelRatio);
-      let clipY = Math.round(canvasHeight - clipHeight - y * pixelRatio);
+    if (this.clippingRect.valid === true) {
+      const clipX = Math.round(this.clippingRect.x * this.pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.width * this.pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.height * this.pixelRatio);
+      let clipY = Math.round(
+        options.canvas.height -
+          clipHeight -
+          this.clippingRect.y * this.pixelRatio,
+      );
       // if parent has render texture, we need to adjust the scissor rect
       // to be relative to the parent's framebuffer
-      if (this.quad.parentHasRenderTexture) {
-        clipY = this.quad.framebufferDimensions
-          ? this.quad.framebufferDimensions.height - this.quad.height
+      if (this.parentHasRenderTexture) {
+        clipY = this.framebufferDimensions
+          ? this.framebufferDimensions.height - this.height
           : 0;
       }
 

package/src/core/renderers/webgl/WebGlRenderer.ts

@@ -50,7 +50,7 @@ import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
 import type { CoreShaderType } from '../CoreShaderNode.js';
 
-const WORDS_PER_QUAD = 24;
+const WORDS_PER_QUAD = 32;
 // const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
 
 export type WebGlRendererOptions = CoreRendererOptions;
@@ -252,12 +252,10 @@ export class WebGlRenderer extends CoreRenderer {
 
     assertTruthy(texture !== null, 'Texture is required');
 
-    let { curBufferIdx: bufferIdx, curRenderOp } = this;
+    let { curBufferIdx: bufferIdx } = this;
 
     if (this.reuseRenderOp(params) === false) {
       this.newRenderOp(params, bufferIdx);
-      curRenderOp = this.curRenderOp;
-      assertTruthy(curRenderOp);
     }
 
     let texCoordX1 = 0;
@@ -374,7 +372,6 @@ export class WebGlRenderer extends CoreRenderer {
     fQuadBuffer[bufferIdx++] = 1; //node y coord
 
     // Update the length of the current render op
-    this.curRenderOp.length += WORDS_PER_QUAD;
     this.curRenderOp.numQuads++;
     this.curBufferIdx = bufferIdx;
   }
@@ -386,7 +383,7 @@ export class WebGlRenderer extends CoreRenderer {
    * @param shader
    * @param bufferIdx
    */
-  private newRenderOp(quad: QuadOptions, bufferIdx: number) {
+  private newRenderOp(quad: QuadOptions | WebGlRenderOp, bufferIdx: number) {
     const curRenderOp = new WebGlRenderOp(this, quad, bufferIdx);
     this.curRenderOp = curRenderOp;
     this.renderOps.push(curRenderOp);
@@ -416,7 +413,7 @@ export class WebGlRenderer extends CoreRenderer {
       if (recursive) {
         throw new Error('Unable to add texture to render op');
       }
-      this.newRenderOp(this.curRenderOp.quad as QuadOptions, bufferIdx);
+      this.newRenderOp(this.curRenderOp, bufferIdx);
       return this.addTexture(texture, bufferIdx, true);
     }
     return textureIdx;
@@ -428,19 +425,17 @@ export class WebGlRenderer extends CoreRenderer {
    * @returns
    */
   reuseRenderOp(params: QuadOptions): boolean {
-    const { shader, parentHasRenderTexture, rtt, clippingRect } = params;
-
     // Switching shader program will require a new render operation
     if (
       this.curRenderOp?.shader.shaderKey !==
-      (shader as WebGlShaderNode).shaderKey
+      (params.shader as WebGlShaderNode).shaderKey
     ) {
       return false;
     }
 
     // Switching clipping rect will require a new render operation
     if (
-      compareRect(this.curRenderOp.quad.clippingRect, clippingRect) === false
+      compareRect(this.curRenderOp.clippingRect, params.clippingRect) === false
     ) {
       return false;
     }
@@ -448,16 +443,26 @@ export class WebGlRenderer extends CoreRenderer {
     // Force new render operation if rendering to texture
     // @todo: This needs to be improved, render operations could also be reused
     // for rendering to texture
-    if (parentHasRenderTexture !== undefined || rtt !== undefined) {
+    if (
+      params.parentHasRenderTexture !== undefined ||
+      params.rtt !== undefined
+    ) {
       return false;
     }
 
+    if (
+      this.curRenderOp.shader.shaderKey === 'default' &&
+      params.shader?.shaderKey === 'default'
+    ) {
+      return true;
+    }
+
     // Check if the shader can batch the shader properties
     if (
-      !this.curRenderOp.shader.program.reuseRenderOp(
+      this.curRenderOp.shader.program.reuseRenderOp(
         params,
-        this.curRenderOp.quad as QuadOptions,
-      )
+        this.curRenderOp,
+      ) === false
     ) {
       return false;
     }
@@ -682,9 +687,9 @@ export class WebGlRenderer extends CoreRenderer {
     if (this.defaultShaderNode !== null) {
       return this.defaultShaderNode as WebGlShaderNode;
     }
-    this.stage.shManager.registerShaderType('Default', Default);
+    this.stage.shManager.registerShaderType('default', Default);
     this.defaultShaderNode = this.stage.shManager.createShader(
-      'Default',
+      'default',
     ) as WebGlShaderNode;
     return this.defaultShaderNode;
   }

package/src/core/renderers/webgl/WebGlShaderNode.ts

@@ -11,6 +11,7 @@ import type {
   Vec4,
 } from './internal/ShaderUtils.js';
 import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { WebGlRenderOp } from './WebGlRenderOp.js';
 import type { WebGlShaderProgram } from './WebGlShaderProgram.js';
 
 export type ShaderSource<T> =
@@ -46,7 +47,10 @@ export type WebGlShaderType<T extends object = Record<string, unknown>> =
      * This function is used to check if the shader can be reused based on quad info
      * @param props
      */
-    canBatch?: (renderOpA: QuadOptions, renderOpB: QuadOptions) => boolean;
+    canBatch?: (
+      incomingQuad: QuadOptions,
+      currentRenderOp: WebGlRenderOp,
+    ) => boolean;
     /**
      * extensions required for specific shader?
      */

package/src/core/renderers/webgl/WebGlShaderProgram.ts

@@ -141,31 +141,45 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
   }
 
-  reuseRenderOp(renderOpA: QuadOptions, renderOpB: QuadOptions): boolean {
-    const lifecycleCheck = this.lifecycle.canBatch
-      ? this.lifecycle.canBatch(renderOpA, renderOpB)
-      : true;
-    if (!lifecycleCheck) {
-      return false;
+  reuseRenderOp(
+    incomingQuad: QuadOptions,
+    currentRenderOp: WebGlRenderOp,
+  ): boolean {
+    if (this.lifecycle.canBatch !== undefined) {
+      return this.lifecycle.canBatch(incomingQuad, currentRenderOp);
     }
 
-    if (this.useSystemAlpha) {
-      if (renderOpA.alpha !== renderOpB.alpha) {
+    if (this.useSystemAlpha === true) {
+      if (incomingQuad.alpha !== currentRenderOp.alpha) {
         return false;
       }
     }
 
-    if (this.useSystemDimensions) {
+    if (this.useSystemDimensions === true) {
       if (
-        renderOpA.width !== renderOpB.width ||
-        renderOpA.height !== renderOpB.height
+        incomingQuad.width !== currentRenderOp.width ||
+        incomingQuad.height !== currentRenderOp.height
       ) {
         return false;
       }
     }
+    let shaderPropsA: Record<string, unknown> | undefined = undefined;
+    let shaderPropsB: Record<string, unknown> | undefined = undefined;
+
+    if (incomingQuad.shader !== null) {
+      shaderPropsA = incomingQuad.shader.resolvedProps;
+    }
+    if (currentRenderOp.shader !== null) {
+      shaderPropsB = currentRenderOp.shader.resolvedProps;
+    }
+
+    if (
+      (shaderPropsA === undefined && shaderPropsB !== undefined) ||
+      (shaderPropsA !== undefined && shaderPropsB === undefined)
+    ) {
+      return false;
+    }
 
-    const shaderPropsA = renderOpA.shader?.getResolvedProps();
-    const shaderPropsB = renderOpB.shader?.getResolvedProps();
     if (shaderPropsA !== undefined && shaderPropsB !== undefined) {
       for (const key in shaderPropsA) {
         if (shaderPropsA[key] !== shaderPropsB[key]) {
@@ -181,17 +195,17 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.bindBufferCollection(renderOp.buffers);
     this.bindTextures(renderOp.textures);
 
-    const { parentHasRenderTexture } = renderOp.quad;
+    const { parentHasRenderTexture } = renderOp;
 
     // Skip if the parent and current operation both have render textures
-    if (renderOp.quad.rtt && parentHasRenderTexture) {
+    if (renderOp.rtt === true && parentHasRenderTexture === true) {
       return;
     }
 
     // Bind render texture framebuffer dimensions as resolution
     // if the parent has a render texture
-    if (parentHasRenderTexture) {
-      const { width, height } = renderOp.quad.framebufferDimensions!;
+    if (parentHasRenderTexture === true) {
+      const { width, height } = renderOp.framebufferDimensions!;
       // Force pixel ratio to 1.0 for render textures since they are always 1:1
       // the final render texture will be rendered to the screen with the correct pixel ratio
       this.glw.uniform1f('u_pixelRatio', 1.0);
@@ -207,19 +221,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       );
     }
 
-    this.glw.uniform1f('u_rtt', renderOp.quad.rtt ? 1 : 0);
-
-    if (this.useSystemAlpha) {
-      this.glw.uniform1f('u_alpha', renderOp.quad.alpha);
-    }
+    // if (this.useSystemAlpha) {
+    this.glw.uniform1f('u_alpha', renderOp.alpha);
+    // }
 
-    if (this.useSystemDimensions) {
-      this.glw.uniform2f(
-        'u_dimensions',
-        renderOp.quad.width,
-        renderOp.quad.height,
-      );
-    }
+    // if (this.useSystemDimensions) {
+    this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
+    // }
 
     /**temporary fix to make sdf texts work */
     if (renderOp.sdfShaderProps !== undefined) {
@@ -230,7 +238,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       return;
     }
 
-    if (renderOp.shader.props) {
+    if (renderOp.shader.props !== undefined) {
       /**
        * loop over all precalculated uniform types
        */
@@ -276,7 +284,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       const name = attribs[i]!;
       const resolvedBuffer = buffer.getBuffer(name);
       const resolvedInfo = buffer.getAttributeInfo(name);
-      if (!resolvedBuffer || !resolvedInfo) {
+      if (resolvedBuffer === undefined || resolvedInfo === undefined) {
         continue;
       }
       glw.enableVertexAttribArray(i);

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

@@ -62,10 +62,7 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
   onSdfBind(props) {
     this.uniformMatrix3fv('u_transform', props.transform);
     this.uniform1f('u_scrollY', props.scrollY);
-    this.uniform4fv(
-      'u_color',
-      new Float32Array(getNormalizedRgbaComponents(props.color)),
-    );
+    this.uniform4fa('u_color', getNormalizedRgbaComponents(props.color));
     this.uniform1f('u_size', props.size);
     this.uniform1f('u_distanceRange', props.distanceRange);
     this.uniform1i('u_debug', props.debug ? 1 : 0);

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

@@ -712,7 +712,6 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     const ctxTexture = texture.ctxTexture;
 
     renderOp.addTexture(ctxTexture as WebGlCtxTexture);
-    renderOp.length = state.bufferNumFloats;
     renderOp.numQuads = state.bufferNumQuads;
 
     renderer.addRenderOp(renderOp);

package/src/core/textures/ImageTexture.ts

@@ -23,7 +23,11 @@ import {
   isCompressedTextureContainer,
   loadCompressedTexture,
 } from '../lib/textureCompression.js';
-import { convertUrlToAbsolute, isBase64Image } from '../lib/utils.js';
+import {
+  convertUrlToAbsolute,
+  dataURIToBlob,
+  isBase64Image,
+} from '../lib/utils.js';
 import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
 import { fetchJson } from '../text-rendering/font-face-types/utils.js';
 
@@ -40,7 +44,7 @@ export interface ImageTextureProps {
    *
    * @default ''
    */
-  src?: string | ImageData | (() => ImageData | null);
+  src?: string | Blob | ImageData | (() => ImageData | null);
   /**
    * Whether to premultiply the alpha channel into the color channels of the
    * image.
@@ -133,10 +137,10 @@ export class ImageTexture extends Texture {
     return mimeType.indexOf('image/png') !== -1;
   }
 
-  async loadImageFallback(src: string, hasAlpha: boolean) {
+  async loadImageFallback(src: string | Blob, hasAlpha: boolean) {
     const img = new Image();
 
-    if (isBase64Image(src) === false) {
+    if (typeof src === 'string' && isBase64Image(src) === false) {
       img.crossOrigin = 'anonymous';
     }
 
@@ -151,7 +155,11 @@ export class ImageTexture extends Texture {
           resolve({ data: img, premultiplyAlpha: hasAlpha });
         };
 
-        img.src = src;
+        if (src instanceof Blob) {
+          img.src = URL.createObjectURL(src);
+        } else {
+          img.src = src;
+        }
       },
     );
   }
@@ -215,9 +223,16 @@ export class ImageTexture extends Texture {
         );
       }
 
-      const blob = await fetchJson(src, 'blob').then(
-        (response) => response as Blob,
-      );
+      let blob;
+
+      if (isBase64Image(src) === true) {
+        blob = dataURIToBlob(src);
+      } else {
+        blob = await fetchJson(src, 'blob').then(
+          (response) => response as Blob,
+        );
+      }
+
       return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
     }
 
@@ -274,6 +289,14 @@ export class ImageTexture extends Texture {
     }
 
     if (typeof src !== 'string') {
+      if (src instanceof Blob) {
+        if (this.txManager.hasCreateImageBitmap === true) {
+          const { sx, sy, sw, sh } = this.props;
+          return this.createImageBitmap(src, premultiplyAlpha, sx, sy, sw, sh);
+        } else {
+          return this.loadImageFallback(src, premultiplyAlpha ?? true);
+        }
+      }
       if (src instanceof ImageData) {
         return {
           data: src,