@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta20

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,
@@ -35,7 +35,11 @@ import {
   type WebGlColor,
 } from './internal/RendererUtils.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import { Texture, TextureType } from '../../textures/Texture.js';
+import {
+  Texture,
+  TextureType,
+  type TextureCoords,
+} from '../../textures/Texture.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { WebGlCtxSubTexture } from './WebGlCtxSubTexture.js';
 import { BufferCollection } from './internal/BufferCollection.js';
@@ -48,10 +52,7 @@ import { WebGlCtxRenderTexture } from './WebGlCtxRenderTexture.js';
 import { Default } from '../../shaders/webgl/Default.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
-import type { CoreShaderType } from '../CoreShaderNode.js';
-
-const WORDS_PER_QUAD = 32;
-// const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
+import type { Dimensions } from '../../../common/CommonTypes.js';
 
 export type WebGlRendererOptions = CoreRendererOptions;
 
@@ -77,6 +78,13 @@ export class WebGlRenderer extends CoreRenderer {
   override rttNodes: CoreNode[] = [];
   activeRttNode: CoreNode | null = null;
 
+  override defaultTextureCoords: TextureCoords = {
+    x1: 0,
+    y1: 0,
+    x2: 1,
+    y2: 1,
+  };
+
   //// Default Shader
   defaultShaderNode: WebGlShaderNode | null = null;
   quadBufferCollection: BufferCollection;
@@ -126,11 +134,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',
@@ -247,133 +254,72 @@ 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;
+    const f = this.fQuadBuffer;
+    const u = this.uiQuadBuffer;
+    let i = this.curBufferIdx;
 
-    assertTruthy(texture !== null, 'Texture is required');
-
-    let { curBufferIdx: bufferIdx } = this;
-
-    if (this.reuseRenderOp(params) === false) {
-      this.newRenderOp(params, bufferIdx);
+    const reuse = this.reuseRenderOp(params);
+    if (reuse === false) {
+      this.newRenderOp(params, i);
     }
 
-    let texCoordX1 = 0;
-    let texCoordY1 = 0;
-    let texCoordX2 = 1;
-    let texCoordY2 = 1;
-
-    if (texture.type === TextureType.subTexture) {
-      const {
-        x: tx,
-        y: ty,
-        width: tw,
-        height: th,
-      } = (texture as SubTexture).props;
-      const { width: parentW = 0, height: parentH = 0 } = (
-        texture as SubTexture
-      ).parentTexture.dimensions || { width: 0, height: 0 };
-      texCoordX1 = tx / parentW;
-      texCoordX2 = texCoordX1 + tw / parentW;
-      texCoordY1 = ty / parentH;
-      texCoordY2 = texCoordY1 + th / parentH;
-      texture = (texture as SubTexture).parentTexture;
+    let tx = params.texture!;
+    if (tx.type === TextureType.subTexture) {
+      tx = (tx as SubTexture).parentTexture;
     }
 
-    if (
-      texture.type === TextureType.image &&
-      params.textureOptions !== null &&
-      params.textureOptions.resizeMode !== undefined &&
-      texture.dimensions !== null
-    ) {
-      const resizeMode = params.textureOptions.resizeMode;
-      const { width: tw, height: th } = texture.dimensions;
-      if (resizeMode.type === 'cover') {
-        const scaleX = params.width / tw;
-        const scaleY = params.height / th;
-        const scale = Math.max(scaleX, scaleY);
-        const precision = 1 / scale;
-        // Determine based on width
-        if (scale && scaleX && scaleX < scale) {
-          const desiredSize = precision * params.width;
-          texCoordX1 = (1 - desiredSize / tw) * (resizeMode.clipX ?? 0.5);
-          texCoordX2 = texCoordX1 + desiredSize / tw;
-        }
-        // Determine based on height
-        if (scale && scaleY && scaleY < scale) {
-          const desiredSize = precision * params.height;
-          texCoordY1 = (1 - desiredSize / th) * (resizeMode.clipY ?? 0.5);
-          texCoordY2 = texCoordY1 + desiredSize / th;
-        }
-      }
-    }
+    const tidx = this.addTexture(tx.ctxTexture as WebGlCtxTexture, i);
 
-    // Flip texture coordinates if dictated by texture options
-    let flipY = 0;
-    if (params.textureOptions !== null) {
-      if (params.textureOptions.flipX === true) {
-        [texCoordX1, texCoordX2] = [texCoordX2, texCoordX1];
-      }
-
-      // convert to integer for bitwise operation below
-      flipY = +(params.textureOptions.flipY || false);
-    }
+    const rc = params.renderCoords!;
+    const tc = params.textureCoords!;
 
-    // Eitherone should be true
-    if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
-      [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
-    }
-
-    const ctxTexture = texture.ctxTexture as WebGlCtxTexture;
-    assertTruthy(ctxTexture instanceof WebGlCtxTexture);
-    const textureIdx = this.addTexture(ctxTexture, bufferIdx);
-
-    assertTruthy(this.curRenderOp !== null);
-    assertTruthy(params.renderCoords);
+    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++] = texCoordX1; // texCoordX
-    fQuadBuffer[bufferIdx++] = texCoordY1; // 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++] = texCoordX2;
-    fQuadBuffer[bufferIdx++] = texCoordY1;
-    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++] = texCoordX1;
-    fQuadBuffer[bufferIdx++] = texCoordY2;
-    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++] = texCoordX2;
-    fQuadBuffer[bufferIdx++] = texCoordY2;
-    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;
+
+    this.curRenderOp!.numQuads++;
+    this.curBufferIdx = i + 32;
   }
 
   /**
@@ -406,14 +352,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;
@@ -440,16 +385,30 @@ export class WebGlRenderer extends CoreRenderer {
       return false;
     }
 
-    // Force new render operation if rendering to texture
-    // @todo: This needs to be improved, render operations could also be reused
-    // for rendering to texture
+    // Force new render operation if rendering to texture is different
     if (
-      params.parentHasRenderTexture !== undefined ||
-      params.rtt !== undefined
+      this.curRenderOp.parentHasRenderTexture !==
+        params.parentHasRenderTexture ||
+      this.curRenderOp.rtt !== params.rtt
     ) {
       return false;
     }
 
+    if (
+      params.parentHasRenderTexture === true &&
+      this.curRenderOp.framebufferDimensions !== null &&
+      params.framebufferDimensions !== null
+    ) {
+      if (
+        this.curRenderOp.framebufferDimensions.w !==
+          params.framebufferDimensions.w ||
+        this.curRenderOp.framebufferDimensions.h !==
+          params.framebufferDimensions.h
+      ) {
+        return false;
+      }
+    }
+
     if (
       this.curRenderOp.shader.shaderKey === 'default' &&
       params.shader?.shaderKey === 'default'
@@ -608,8 +567,7 @@ export class WebGlRenderer extends CoreRenderer {
       // Skip nodes that are not visible
       if (
         node.worldAlpha === 0 ||
-        (node.strictBounds === true &&
-          node.renderState === CoreNodeRenderState.OutOfBounds)
+        node.renderState === CoreNodeRenderState.OutOfBounds
       ) {
         continue;
       }
@@ -622,10 +580,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
@@ -667,6 +622,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) {
@@ -694,9 +653,86 @@ export class WebGlRenderer extends CoreRenderer {
     return this.defaultShaderNode;
   }
 
+  override getTextureCoords(node: CoreNode): TextureCoords | undefined {
+    const texture = node.texture;
+    if (texture === null) {
+      return undefined;
+    }
+
+    //this stuff needs to be properly moved to CtxSubTexture at some point in the future.
+    const ctxTexture =
+      (texture as SubTexture).parentTexture !== undefined
+        ? (texture as SubTexture).parentTexture.ctxTexture
+        : texture.ctxTexture;
+    if (ctxTexture === undefined) {
+      return undefined;
+    }
+
+    const textureOptions = node.props.textureOptions;
+
+    //early exit for textures with no options unless its a subtexture
+    if (
+      texture.type !== TextureType.subTexture &&
+      textureOptions === undefined
+    ) {
+      return (ctxTexture as WebGlCtxTexture).txCoords;
+    }
+
+    let { x1, x2, y1, y2 } = (ctxTexture as WebGlCtxTexture).txCoords;
+    if (texture.type === TextureType.subTexture) {
+      const { w: parentW, h: parentH } = (texture as SubTexture).parentTexture
+        .dimensions!;
+      const { x, y, w, h } = (texture as SubTexture).props;
+      x1 = x / parentW;
+      y1 = y / parentH;
+      x2 = x1 + w / parentW;
+      y2 = y1 + h / parentH;
+    }
+
+    const resizeMode = textureOptions.resizeMode;
+    if (
+      resizeMode !== undefined &&
+      resizeMode.type === 'cover' &&
+      texture.dimensions !== null
+    ) {
+      const dimensions = texture.dimensions as Dimensions;
+      const w = node.props.w;
+      const h = node.props.h;
+      const scaleX = w / dimensions.w;
+      const scaleY = h / dimensions.h;
+      const scale = Math.max(scaleX, scaleY);
+      const precision = 1 / scale;
+
+      // Determine based on width
+      if (scaleX < scale) {
+        const desiredSize = precision * node.props.w;
+        x1 = (1 - desiredSize / dimensions.w) * (resizeMode.clipX ?? 0.5);
+        x2 = x1 + desiredSize / dimensions.w;
+      }
+      // Determine based on height
+      if (scaleY < scale) {
+        const desiredSize = precision * node.props.h;
+        y1 = (1 - desiredSize / dimensions.h) * (resizeMode.clipY ?? 0.5);
+        y2 = y1 + desiredSize / dimensions.h;
+      }
+    }
+
+    if (textureOptions.flipX === true) {
+      [x1, x2] = [x2, x1];
+    }
+    if (textureOptions.flipY === true) {
+      [y1, y2] = [y2, y1];
+    }
+    return {
+      x1,
+      y1,
+      x2,
+      y2,
+    };
+  }
+
   /**
-   * Updates the WebGL context's clear color and clears the color buffer.
-   *
+   * Sets the glClearColor to the specified color.   *
    * @param color - The color to set as the clear color, represented as a 32-bit integer.
    */
   updateClearColor(color: number) {
@@ -715,6 +751,5 @@ export class WebGlRenderer extends CoreRenderer {
       raw: color,
       normalized: normalizedColor,
     };
-    glw.clear();
   }
 }

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
    *
@@ -46,10 +45,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlRenderer;
   protected glw: WebGlContextWrapper;
-  protected attributeLocations: Record<string, number>;
+  protected attributeLocations: string[];
+  protected uniformLocations: Record<string, WebGLUniformLocation> | null;
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;
   protected useSystemAlpha = false;
   protected useSystemDimensions = false;
+  protected useTimeValue = false;
+  public isDestroyed = false;
   supportsIndexedTextures = false;
 
   constructor(
@@ -117,10 +119,14 @@ 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.useTimeValue =
+      this.glw.getUniformLocation(program, 'u_dimensions') !== null &&
+      config.time !== undefined;
 
     this.lifecycle = {
       update: config.update,
@@ -133,9 +139,8 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   disableAttributes() {
-    const { glw } = this;
-    const attribs = Object.keys(this.attributeLocations);
-    const attribLen = attribs.length;
+    const glw = this.glw;
+    const attribLen = this.attributeLocations.length;
     for (let i = 0; i < attribLen; i++) {
       glw.disableVertexAttribArray(i);
     }
@@ -149,6 +154,12 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       return this.lifecycle.canBatch(incomingQuad, currentRenderOp);
     }
 
+    if (this.useTimeValue === true) {
+      if (incomingQuad.time !== currentRenderOp.time) {
+        return false;
+      }
+    }
+
     if (this.useSystemAlpha === true) {
       if (incomingQuad.alpha !== currentRenderOp.alpha) {
         return false;
@@ -169,6 +180,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     if (incomingQuad.shader !== null) {
       shaderPropsA = incomingQuad.shader.resolvedProps;
     }
+
     if (currentRenderOp.shader !== null) {
       shaderPropsB = currentRenderOp.shader.resolvedProps;
     }
@@ -205,13 +217,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     // Bind render texture framebuffer dimensions as resolution
     // if the parent has a render texture
     if (parentHasRenderTexture === true) {
-      const { width, height } = renderOp.framebufferDimensions!;
+      const { w, h } = 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);
 
       // Set resolution to the framebuffer dimensions
-      this.glw.uniform2f('u_resolution', width, height);
+      this.glw.uniform2f('u_resolution', w, h);
     } else {
       this.glw.uniform1f('u_pixelRatio', renderOp.renderer.stage.pixelRatio);
       this.glw.uniform2f(
@@ -221,13 +233,17 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       );
     }
 
-    // if (this.useSystemAlpha) {
-    this.glw.uniform1f('u_alpha', renderOp.alpha);
-    // }
+    if (this.useTimeValue === true) {
+      this.glw.uniform1f('u_time', renderOp.time as number);
+    }
+
+    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) {
@@ -277,7 +293,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
 
   bindBufferCollection(buffer: BufferCollection) {
     const { glw } = this;
-    const attribs = Object.keys(this.attributeLocations);
+    const attribs = this.attributeLocations;
     const attribLen = attribs.length;
 
     for (let i = 0; i < attribLen; i++) {
@@ -306,7 +322,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 +334,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 = this.attributeLocations;
+    const attribLen = this.attributeLocations.length;
+    for (let i = 0; i < attribLen; i++) {
+      this.glw.deleteBuffer(attribs[i]!);
+    }
+  }
 }

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

@@ -15,12 +15,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { formatRgba, parseColorRgba } from '../../lib/colorParser.js';
 import { valuesAreEqual } from '../../lib/utils.js';
 import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
-import {
-  formatRgba,
-  parseColorRgba,
-} from '../../renderers/canvas/internal/ColorUtils.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
 import {
   BorderTemplate,
@@ -38,13 +35,13 @@ export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
   props: BorderTemplate.props,
   update() {
     this.computed.borderColor = formatRgba(parseColorRgba(this.props!.color));
-    this.computed.borderAsym = !valuesAreEqual(this.props!.width as number[]);
+    this.computed.borderAsym = !valuesAreEqual(this.props!.w as number[]);
   },
   render(ctx, quad, renderContext) {
     renderContext();
     ctx.strokeStyle = this.computed.borderColor!;
-    if (this.computed.borderAsym === false && this.props!.width[0] > 0) {
-      const bWidth = this.props!.width[0];
+    if (this.computed.borderAsym === false && this.props!.w[0] > 0) {
+      const bWidth = this.props!.w[0];
       const bHalfWidth = bWidth * 0.5;
       ctx.lineWidth = bWidth;
       ctx.beginPath();
@@ -57,7 +54,7 @@ export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
       return;
     }
 
-    const { 0: t, 1: r, 2: b, 3: l } = this.props!.width as Vec4;
+    const { 0: t, 1: r, 2: b, 3: l } = this.props!.w as Vec4;
     if (t > 0) {
       const y = quad.ty + t * 0.5;
       strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, t);

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

@@ -36,23 +36,16 @@ export const HolePunch: CanvasShaderType<
   update() {
     this.computed.radius = calcFactoredRadiusArray(
       this.props!.radius as Vec4,
-      this.props!.width,
-      this.props!.height,
+      this.props!.w,
+      this.props!.h,
     );
   },
   render(ctx, quad, renderContext) {
     ctx.save();
     renderContext();
-    const { x, y, width, height } = this.props!;
+    const { x, y, w, h } = this.props!;
     ctx.beginPath();
-    roundRect(
-      ctx,
-      quad.tx + x,
-      quad.ty + y,
-      width,
-      height,
-      this.computed.radius!,
-    );
+    roundRect(ctx, quad.tx + x, quad.ty + y, w, h, this.computed.radius!);
     ctx.closePath();
     ctx.fillStyle = 'black';
     ctx.globalCompositeOperation = 'destination-out';