@lightningjs/renderer 3.0.0-beta7 → 3.0.0-beta9

package/src/core/renderers/CoreShaderNode.ts

@@ -150,6 +150,16 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
     this.node = node;
   }
 
+  createValueKey() {
+    let valueKey = '';
+    for (const key in this.resolvedProps) {
+      valueKey += `${key}:${this.resolvedProps[key]!};`;
+    }
+    valueKey += `node-width:${this.node!.width}`;
+    valueKey += `node-height:${this.node!.height}`;
+    return valueKey;
+  }
+
   get props(): Props | undefined {
     return this.definedProps;
   }

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

@@ -292,6 +292,10 @@ export class CanvasRenderer extends CoreRenderer {
     this.clearColor = this.getParsedColor(color);
   }
 
+  override updateViewport(): void {
+    // noop
+  }
+
   getDefaultShaderNode() {
     return null;
   }

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

@@ -67,10 +67,7 @@ export class CanvasShaderNode<
 
       this.update = () => {
         const prevKey = this.valueKey;
-        this.valueKey = '';
-        for (const key in this.resolvedProps) {
-          this.valueKey += `${key}:${this.resolvedProps[key]!};`;
-        }
+        this.valueKey = this.createValueKey();
 
         if (prevKey === this.valueKey) {
           return;

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

@@ -18,11 +18,9 @@
  */
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
-import { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Texture } from '../../textures/Texture.js';
-import { isPowerOfTwo } from '../../utils.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
 
@@ -57,7 +55,6 @@ export class WebGlCtxTexture extends CoreContextTexture {
       this.load();
       return null;
     }
-    assertTruthy(this._nativeCtxTexture);
     return this._nativeCtxTexture;
   }
 

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

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import { assertTruthy, createWebGLContext } from '../../../utils.js';
+import { createWebGLContext } from '../../../utils.js';
 import {
   CoreRenderer,
   type BufferInfo,
@@ -53,9 +53,6 @@ import { Default } from '../../shaders/webgl/Default.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
 
-const WORDS_PER_QUAD = 32;
-// const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
-
 export type WebGlRendererOptions = CoreRendererOptions;
 
 interface CoreWebGlSystem {
@@ -136,11 +133,10 @@ export class WebGlRenderer extends CoreRenderer {
       extensions: getWebGlExtensions(this.glw),
     };
     const quadBuffer = glw.createBuffer();
-    assertTruthy(quadBuffer);
     const stride = 8 * Float32Array.BYTES_PER_ELEMENT;
     this.quadBufferCollection = new BufferCollection([
       {
-        buffer: quadBuffer,
+        buffer: quadBuffer!,
         attributes: {
           a_position: {
             name: 'a_position',
@@ -257,71 +253,74 @@ export class WebGlRenderer extends CoreRenderer {
    * The function updates the length and number of quads in the current render operation, and updates the current buffer index.
    */
   addQuad(params: QuadOptions) {
-    const { fQuadBuffer, uiQuadBuffer } = this;
-    let texture = params.texture;
-
-    assertTruthy(texture !== null, 'Texture is required');
-
-    let { curBufferIdx: bufferIdx } = this;
-
-    if (this.reuseRenderOp(params) === false) {
-      this.newRenderOp(params, bufferIdx);
+    const f = this.fQuadBuffer;
+    const u = this.uiQuadBuffer;
+    let i = this.curBufferIdx;
+
+    let ro = this.curRenderOp!;
+    const reuse = this.reuseRenderOp(params) === false;
+    if (reuse) {
+      this.newRenderOp(params, i);
+      ro = this.curRenderOp!;
     }
 
-    if (texture.type === TextureType.subTexture) {
-      texture = (texture as SubTexture).parentTexture;
+    let tx = params.texture!;
+    if (tx.type === TextureType.subTexture) {
+      tx = (tx as SubTexture).parentTexture;
     }
 
-    assertTruthy(texture.ctxTexture instanceof WebGlCtxTexture);
-    const textureIdx = this.addTexture(texture.ctxTexture, bufferIdx);
+    const tidx = this.addTexture(tx.ctxTexture as WebGlCtxTexture, i);
 
-    assertTruthy(this.curRenderOp !== null);
-    assertTruthy(params.renderCoords);
-    assertTruthy(params.textureCoords);
+    const rc = params.renderCoords!;
+    const tc = params.textureCoords!;
+
+    const cTl = params.colorTl;
+    const cTr = params.colorTr;
+    const cBl = params.colorBl;
+    const cBr = params.colorBr;
 
     // Upper-Left
-    fQuadBuffer[bufferIdx++] = params.renderCoords.x1; // vertexX
-    fQuadBuffer[bufferIdx++] = params.renderCoords.y1; // vertexY
-    fQuadBuffer[bufferIdx++] = params.textureCoords.x1; // texCoordX
-    fQuadBuffer[bufferIdx++] = params.textureCoords.y1; // texCoordY
-    uiQuadBuffer[bufferIdx++] = params.colorTl; // color
-    fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
-    fQuadBuffer[bufferIdx++] = 0; //node X coord
-    fQuadBuffer[bufferIdx++] = 0; //node y coord
+    f[i] = rc.x1;
+    f[i + 1] = rc.y1;
+    f[i + 2] = tc.x1;
+    f[i + 3] = tc.y1;
+    u[i + 4] = cTl;
+    f[i + 5] = tidx;
+    f[i + 6] = 0;
+    f[i + 7] = 0;
 
     // Upper-Right
-    fQuadBuffer[bufferIdx++] = params.renderCoords.x2;
-    fQuadBuffer[bufferIdx++] = params.renderCoords.y2;
-    fQuadBuffer[bufferIdx++] = params.textureCoords.x2;
-    fQuadBuffer[bufferIdx++] = params.textureCoords.y1;
-    uiQuadBuffer[bufferIdx++] = params.colorTr;
-    fQuadBuffer[bufferIdx++] = textureIdx;
-    fQuadBuffer[bufferIdx++] = 1; //node X coord
-    fQuadBuffer[bufferIdx++] = 0; //node y coord
+    f[i + 8] = rc.x2;
+    f[i + 9] = rc.y2;
+    f[i + 10] = tc.x2;
+    f[i + 11] = tc.y1;
+    u[i + 12] = cTr;
+    f[i + 13] = tidx;
+    f[i + 14] = 1;
+    f[i + 15] = 0;
 
     // Lower-Left
-    fQuadBuffer[bufferIdx++] = params.renderCoords.x4;
-    fQuadBuffer[bufferIdx++] = params.renderCoords.y4;
-    fQuadBuffer[bufferIdx++] = params.textureCoords.x1;
-    fQuadBuffer[bufferIdx++] = params.textureCoords.y2;
-    uiQuadBuffer[bufferIdx++] = params.colorBl;
-    fQuadBuffer[bufferIdx++] = textureIdx;
-    fQuadBuffer[bufferIdx++] = 0; //node X coord
-    fQuadBuffer[bufferIdx++] = 1; //node y coord
+    f[i + 16] = rc.x4;
+    f[i + 17] = rc.y4;
+    f[i + 18] = tc.x1;
+    f[i + 19] = tc.y2;
+    u[i + 20] = cBl;
+    f[i + 21] = tidx;
+    f[i + 22] = 0;
+    f[i + 23] = 1;
 
     // Lower-Right
-    fQuadBuffer[bufferIdx++] = params.renderCoords.x3;
-    fQuadBuffer[bufferIdx++] = params.renderCoords.y3;
-    fQuadBuffer[bufferIdx++] = params.textureCoords.x2;
-    fQuadBuffer[bufferIdx++] = params.textureCoords.y2;
-    uiQuadBuffer[bufferIdx++] = params.colorBr;
-    fQuadBuffer[bufferIdx++] = textureIdx;
-    fQuadBuffer[bufferIdx++] = 1; //node X coord
-    fQuadBuffer[bufferIdx++] = 1; //node y coord
-
-    // Update the length of the current render op
-    this.curRenderOp.numQuads++;
-    this.curBufferIdx = bufferIdx;
+    f[i + 24] = rc.x3;
+    f[i + 25] = rc.y3;
+    f[i + 26] = tc.x2;
+    f[i + 27] = tc.y2;
+    u[i + 28] = cBr;
+    f[i + 29] = tidx;
+    f[i + 30] = 1;
+    f[i + 31] = 1;
+
+    ro.numQuads++;
+    this.curBufferIdx = i + 32;
   }
 
   /**
@@ -354,14 +353,13 @@ export class WebGlRenderer extends CoreRenderer {
     bufferIdx: number,
     recursive?: boolean,
   ): number {
-    assertTruthy(this.curRenderOp);
-    const textureIdx = this.curRenderOp.addTexture(texture);
+    const textureIdx = this.curRenderOp!.addTexture(texture);
     // TODO: Refactor to be more DRY
     if (textureIdx === 0xffffffff) {
       if (recursive) {
         throw new Error('Unable to add texture to render op');
       }
-      this.newRenderOp(this.curRenderOp, bufferIdx);
+      this.newRenderOp(this.curRenderOp!, bufferIdx);
       return this.addTexture(texture, bufferIdx, true);
     }
     return textureIdx;
@@ -570,10 +568,7 @@ export class WebGlRenderer extends CoreRenderer {
       // Set the active RTT node to the current node
       // So we can prevent rendering children of nested RTT nodes
       this.activeRttNode = node;
-
-      assertTruthy(node.texture !== null, 'RTT node missing texture');
-      const ctxTexture = node.texture.ctxTexture;
-      assertTruthy(ctxTexture instanceof WebGlCtxRenderTexture);
+      const ctxTexture = node.texture.ctxTexture as WebGlCtxRenderTexture;
       this.renderToTextureActive = true;
 
       // Bind the the texture's framebuffer
@@ -615,6 +610,10 @@ export class WebGlRenderer extends CoreRenderer {
     this.renderToTextureActive = false;
   }
 
+  updateViewport(): void {
+    this.glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+  }
+
   removeRTTNode(node: CoreNode) {
     const index = this.rttNodes.indexOf(node);
     if (index === -1) {

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

@@ -90,11 +90,9 @@ export class WebGlShaderNode<
           this.updater!(this.node as CoreNode, this.props);
           return;
         }
+
         const prevKey = this.valueKey;
-        this.valueKey = '';
-        for (const key in this.resolvedProps) {
-          this.valueKey += `${key}:${this.resolvedProps[key]!};`;
-        }
+        this.valueKey = this.createValueKey();
 
         if (prevKey === this.valueKey) {
           return;

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

@@ -35,8 +35,7 @@ import {
 } from './internal/ShaderUtils.js';
 
 export class WebGlShaderProgram implements CoreShaderProgram {
-  protected boundBufferCollection: BufferCollection | null = null;
-  protected program: WebGLProgram;
+  protected program: WebGLProgram | null;
   /**
    * Vertex Array Object
    *
@@ -47,9 +46,11 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   protected renderer: WebGlRenderer;
   protected glw: WebGlContextWrapper;
   protected attributeLocations: Record<string, number>;
+  protected uniformLocations: Record<string, WebGLUniformLocation> | null;
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;
   protected useSystemAlpha = false;
   protected useSystemDimensions = false;
+  public isDestroyed = false;
   supportsIndexedTextures = false;
 
   constructor(
@@ -117,10 +118,10 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.program = program;
     this.attributeLocations = glw.getAttributeLocations(program);
 
-    this.useSystemAlpha =
-      this.glw.getUniformLocation(program, 'u_alpha') !== null;
-    this.useSystemDimensions =
-      this.glw.getUniformLocation(program, 'u_dimensions') !== null;
+    const uniLocs = (this.uniformLocations = glw.getUniformLocations(program));
+
+    this.useSystemAlpha = uniLocs['u_alpha'] !== undefined;
+    this.useSystemDimensions = uniLocs['u_dimensions'] !== undefined;
 
     this.lifecycle = {
       update: config.update,
@@ -133,7 +134,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   disableAttributes() {
-    const { glw } = this;
+    const glw = this.glw;
     const attribs = Object.keys(this.attributeLocations);
     const attribLen = attribs.length;
     for (let i = 0; i < attribLen; i++) {
@@ -221,13 +222,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       );
     }
 
-    // if (this.useSystemAlpha) {
-    this.glw.uniform1f('u_alpha', renderOp.alpha);
-    // }
+    if (this.useSystemAlpha === true) {
+      this.glw.uniform1f('u_alpha', renderOp.alpha);
+    }
 
-    // if (this.useSystemDimensions) {
-    this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
-    // }
+    if (this.useSystemDimensions === true) {
+      this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
+    }
 
     /**temporary fix to make sdf texts work */
     if (renderOp.sdfShaderProps !== undefined) {
@@ -306,7 +307,10 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   attach(): void {
-    this.glw.useProgram(this.program);
+    if (this.isDestroyed === true) {
+      return;
+    }
+    this.glw.useProgram(this.program, this.uniformLocations!);
     if (this.glw.isWebGl2() && this.vao) {
       this.glw.bindVertexArray(this.vao);
     }
@@ -315,4 +319,23 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   detach(): void {
     this.disableAttributes();
   }
+
+  destroy() {
+    if (this.isDestroyed === true) {
+      return;
+    }
+    const glw = this.glw;
+
+    this.detach();
+
+    glw.deleteProgram(this.program!);
+    this.program = null;
+    this.uniformLocations = null;
+
+    const attribs = Object.keys(this.attributeLocations);
+    const attribLen = attribs.length;
+    for (let i = 0; i < attribLen; i++) {
+      this.glw.deleteBuffer(attribs[i]!);
+    }
+  }
 }

package/src/core/shaders/canvas/LinearGradient.ts

@@ -53,15 +53,17 @@ export const LinearGradient: CanvasShaderType<
   },
   render(ctx, quad, renderContext) {
     renderContext();
+    const computed = this.computed as ComputedLinearGradientValues;
     const gradient = ctx.createLinearGradient(
-      quad.tx + this.computed.x0!,
-      quad.ty + this.computed.y0!,
-      quad.tx + this.computed.x1!,
-      quad.ty + this.computed.y1!,
+      quad.tx + computed.x0,
+      quad.ty + computed.y0,
+      quad.tx + computed.x1,
+      quad.ty + computed.y1,
     );
-    const colors = this.computed.colors!;
+    const colors = computed.colors;
+    const stops = this.props!.stops;
     for (let i = 0; i < colors.length; i++) {
-      gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+      gradient.addColorStop(stops[i]!, colors[i]!);
     }
     ctx.fillStyle = gradient;
     ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);

package/src/core/shaders/canvas/RadialGradient.ts

@@ -38,9 +38,9 @@ export const RadialGradient: CanvasShaderType<
   update(node) {
     let scaleX = 1;
     let scaleY = 1;
-
-    const pWidth = this.props!.width;
-    const pHeight = this.props!.height;
+    const props = this.props as RadialGradientProps;
+    const pWidth = props.width;
+    const pHeight = props.height;
     if (pWidth > pHeight) {
       scaleX = pWidth / pHeight;
     } else if (pHeight > pWidth) {
@@ -48,34 +48,27 @@ export const RadialGradient: CanvasShaderType<
     }
 
     this.computed = {
-      pivotX: this.props!.pivot[0] * node.width,
-      pivotY: this.props!.pivot[1] * node.height,
+      pivotX: props.pivot[0] * node.width,
+      pivotY: props.pivot[1] * node.height,
       scaleX,
       scaleY,
       size: Math.min(pWidth, pHeight) * 0.5,
-      colors: this.props!.colors.map((value) => this.toColorString(value)),
+      colors: props.colors.map((value) => this.toColorString(value)),
     };
   },
   render(ctx, quad, renderContext) {
     renderContext();
-
-    const { scaleX, scaleY, pivotX, pivotY } = this.computed!;
-    const colors = this.computed.colors!;
-    let x = quad.tx + pivotX!;
-    let y = quad.ty + pivotY!;
+    const { scaleX, scaleY, pivotX, pivotY, colors, size } = this
+      .computed as ComputedRadialGradientValues;
+    let x = quad.tx + pivotX;
+    let y = quad.ty + pivotY;
+    const stops = this.props!.stops;
 
     if (scaleX === scaleY) {
-      const gradient = ctx.createRadialGradient(
-        x,
-        y,
-        0,
-        x,
-        y,
-        this.computed.size!,
-      );
+      const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
 
       for (let i = 0; i < colors.length; i++) {
-        gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+        gradient.addColorStop(stops[i]!, colors[i]!);
       }
 
       ctx.fillStyle = gradient;
@@ -84,28 +77,21 @@ export const RadialGradient: CanvasShaderType<
     }
 
     ctx.save();
-    ctx.scale(scaleX!, scaleY!);
-    x = x / scaleX!;
-    y = y / scaleY!;
-    const gradient = ctx.createRadialGradient(
-      x,
-      y,
-      0,
-      x,
-      y,
-      this.computed.size!,
-    );
+    ctx.scale(scaleX, scaleY);
+    x = x / scaleX;
+    y = y / scaleY;
+    const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
 
     for (let i = 0; i < colors.length; i++) {
-      gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+      gradient.addColorStop(stops[i]!, colors[i]!);
     }
 
     ctx.fillStyle = gradient;
     ctx.fillRect(
-      quad.tx / scaleX!,
-      quad.ty / scaleY!,
-      quad.width / scaleX!,
-      quad.height / scaleY!,
+      quad.tx / scaleX,
+      quad.ty / scaleY,
+      quad.width / scaleX,
+      quad.height / scaleY,
     );
 
     ctx.restore();

package/src/core/shaders/canvas/RoundedWithBorder.ts

@@ -35,18 +35,19 @@ export const RoundedWithBorder: CanvasShaderType<
   props: RoundedWithBorderTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
+      props.radius as Vec4,
       node.width,
       node.height,
     );
     this.computed.radius = radius;
-    this.computed.borderColor = this.toColorString(this.props!['border-color']);
+    this.computed.borderColor = this.toColorString(props['border-color']);
     this.computed.borderAsym = !valuesAreEqual(
-      this.props!['border-width'] as number[],
+      props['border-width'] as number[],
     );
     //following vec4 convention 0, 1, 2, 3 => x, y, z, w;
-    const [x, y, z, w] = this.props!['border-width'] as Vec4;
+    const [x, y, z, w] = props['border-width'] as Vec4;
     this.computed.borderRadius = [
       Math.max(0.0, radius[0] - Math.max(x, w) * 0.5),
       Math.max(0.0, radius[1] - Math.max(x, y) * 0.5),
@@ -55,17 +56,18 @@ export const RoundedWithBorder: CanvasShaderType<
     ];
   },
   render(ctx, quad, renderContext) {
+    const computed = this.computed as ComputedValues;
     roundedRectWithBorder(
       ctx,
       quad.tx,
       quad.ty,
       quad.width,
       quad.height,
-      this.computed.radius!,
+      computed.radius,
       this.props!['border-width'] as Vec4,
-      this.computed.borderRadius!,
-      this.computed.borderColor!,
-      this.computed.borderAsym!,
+      computed.borderRadius,
+      computed.borderColor,
+      computed.borderAsym,
       renderContext,
     );
   },

package/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts

@@ -38,37 +38,39 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
   props: RoundedWithBorderAndShadowTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
+      props.radius as Vec4,
       node.width,
       node.height,
     );
     this.computed.radius = radius;
-    this.computed.borderColor = this.toColorString(this.props!['border-color']);
+    this.computed.borderColor = this.toColorString(props['border-color']);
     this.computed.borderAsym = !valuesAreEqual(
-      this.props!['border-width'] as number[],
+      props['border-width'] as number[],
     );
-    const borderWidth = this.props!['border-width'] as Vec4;
+    const borderWidth = props['border-width'] as Vec4;
     this.computed.borderRadius = radius.map((value, index) =>
       Math.max(0, value - borderWidth[index]! * 0.5),
     ) as Vec4;
 
-    this.computed.shadowColor = this.toColorString(this.props!['shadow-color']);
+    this.computed.shadowColor = this.toColorString(props['shadow-color']);
     this.computed.shadowRadius = radius.map(
-      (value) => value + this.props!['shadow-blur'],
+      (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
   render(ctx, quad, renderContext) {
     const { tx, ty, width, height } = quad;
+    const computed = this.computed as ComputedValues;
     render.shadow(
       ctx,
       tx,
       ty,
       height,
       width,
-      this.computed.shadowColor!,
+      computed.shadowColor,
       this.props!['shadow-projection'],
-      this.computed.shadowRadius!,
+      computed.shadowRadius,
       this.stage.pixelRatio,
     );
     render.roundedRectWithBorder(
@@ -77,11 +79,11 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
       quad.ty,
       quad.width,
       quad.height,
-      this.computed.radius!,
+      computed.radius,
       this.props!['border-width'] as Vec4,
-      this.computed.borderRadius!,
-      this.computed.borderColor!,
-      this.computed.borderAsym!,
+      computed.borderRadius,
+      computed.borderColor,
+      computed.borderAsym,
       renderContext,
     );
   },

package/src/core/shaders/canvas/RoundedWithShadow.ts

@@ -35,34 +35,35 @@ export const RoundedWithShadow: CanvasShaderType<
   props: RoundedWithShadowTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
+      props.radius as Vec4,
       node.width,
       node.height,
     );
     this.computed.radius = radius;
-    this.computed.shadowColor = this.toColorString(this.props!['shadow-color']);
+    this.computed.shadowColor = this.toColorString(props['shadow-color']);
     this.computed.shadowRadius = radius.map(
-      (value) => value + this.props!['shadow-blur'],
+      (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
   render(ctx, quad, renderContext) {
     const { tx, ty, width, height } = quad;
-
+    const computed = this.computed as ComputedValues;
     render.shadow(
       ctx,
       tx,
       ty,
       width,
       height,
-      this.computed.shadowColor!,
+      computed.shadowColor,
       this.props!['shadow-projection'],
-      this.computed.shadowRadius!,
+      computed.shadowRadius,
       this.stage.pixelRatio,
     );
 
     const path = new Path2D();
-    render.roundRect(path, tx, ty, width, height, this.computed.radius!);
+    render.roundRect(path, tx, ty, width, height, computed.radius);
     ctx.clip(path);
     renderContext();
   },

package/src/core/shaders/templates/BorderTemplate.ts

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
-import { validateArrayLength4, type PrefixedType } from './shaderUtils.js';
+import { validateArrayLength4, type PrefixedType } from '../utils.js';
 
 /**
  * Properties of the {@link Border} shader