@remotion/web-renderer 4.0.398 → 4.0.399

package/dist/drawing/text/handle-text-node.d.ts

@@ -1,11 +1,12 @@
 import type { LogLevel } from 'remotion';
 import type { InternalState } from '../../internal-state';
 import type { ProcessNodeReturnValue } from '../process-node';
-export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, }: {
+export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: LogLevel;
     parentRect: DOMRect;
     internalState: InternalState;
     rootElement: HTMLElement | SVGElement;
+    onlyBackgroundClip: boolean;
 }) => Promise<ProcessNodeReturnValue>;

package/dist/drawing/text/handle-text-node.js

@@ -1,6 +1,6 @@
 import { processNode } from '../process-node';
 import { drawText } from './draw-text';
-export const handleTextNode = async ({ node, context, logLevel, parentRect, internalState, rootElement, }) => {
+export const handleTextNode = async ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }) => {
     const span = document.createElement('span');
     const parent = node.parentNode;
     if (!parent) {
@@ -11,7 +11,7 @@ export const handleTextNode = async ({ node, context, logLevel, parentRect, inte
     const value = await processNode({
         context,
         element: span,
-        draw: drawText({ span, logLevel }),
+        draw: drawText({ span, logLevel, onlyBackgroundClip }),
         logLevel,
         parentRect,
         internalState,

package/dist/drawing/transform-in-3d.d.ts

@@ -1,10 +1,11 @@
-export declare const transformIn3d: ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, }: {
+import type { InternalState } from '../internal-state';
+export declare const transformIn3d: ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, internalState, }: {
     untransformedRect: DOMRect;
     matrix: DOMMatrix;
     sourceCanvas: OffscreenCanvas;
     rectAfterTransforms: DOMRect;
+    internalState: InternalState;
 }) => {
     canvas: OffscreenCanvas;
     rect: DOMRect;
-    cleanup: () => void;
 };

package/dist/drawing/transform-in-3d.js

@@ -1,3 +1,26 @@
+// Vertex shader - now includes texture coordinates
+const vsSource = `
+		attribute vec2 aPosition;
+		attribute vec2 aTexCoord;
+		uniform mat4 uTransform;
+		uniform mat4 uProjection;
+		varying vec2 vTexCoord;
+
+		void main() {
+				gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
+				vTexCoord = aTexCoord;
+		}
+`;
+// Fragment shader - samples from texture and unpremultiplies alpha
+const fsSource = `
+		precision mediump float;
+		uniform sampler2D uTexture;
+		varying vec2 vTexCoord;
+
+		void main() {
+				gl_FragColor = texture2D(uTexture, vTexCoord);
+		}
+`;
 function compileShader(shaderGl, source, type) {
     const shader = shaderGl.createShader(type);
     if (!shader) {
@@ -12,147 +35,143 @@ function compileShader(shaderGl, source, type) {
     }
     return shader;
 }
-const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
+const createHelperCanvas = ({ canvasWidth, canvasHeight, helperCanvasState, }) => {
+    var _a;
+    if (helperCanvasState.current) {
+        // Resize canvas if dimensions changed
+        if (helperCanvasState.current.canvas.width !== canvasWidth ||
+            helperCanvasState.current.canvas.height !== canvasHeight) {
+            helperCanvasState.current.canvas.width = canvasWidth;
+            helperCanvasState.current.canvas.height = canvasHeight;
+        }
+        // Always reset viewport and clear when reusing
+        helperCanvasState.current.gl.viewport(0, 0, canvasWidth, canvasHeight);
+        helperCanvasState.current.gl.clearColor(0, 0, 0, 0);
+        helperCanvasState.current.gl.clear(helperCanvasState.current.gl.COLOR_BUFFER_BIT);
+        return helperCanvasState.current;
+    }
     const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
-    const gl = canvas.getContext('webgl', {
+    const gl = (_a = canvas.getContext('webgl', {
         premultipliedAlpha: true,
-    });
+    })) !== null && _a !== void 0 ? _a : undefined;
     if (!gl) {
         throw new Error('WebGL not supported');
     }
-    // Vertex shader - now includes texture coordinates
-    const vsSource = `
-        attribute vec2 aPosition;
-        attribute vec2 aTexCoord;
-        uniform mat4 uTransform;
-        uniform mat4 uProjection;
-        varying vec2 vTexCoord;
-
-        void main() {
-            gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
-            vTexCoord = aTexCoord;
-        }
-    `;
-    // Fragment shader - samples from texture and unpremultiplies alpha
-    const fsSource = `
-        precision mediump float;
-        uniform sampler2D uTexture;
-        varying vec2 vTexCoord;
-
-        void main() {
-            gl_FragColor = texture2D(uTexture, vTexCoord);
-        }
-    `;
-    // Create program
+    // Compile shaders and create program once
     const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
     const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
     const program = gl.createProgram();
+    if (!program) {
+        throw new Error('Could not create program');
+    }
     gl.attachShader(program, vertexShader);
     gl.attachShader(program, fragmentShader);
     gl.linkProgram(program);
     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
         throw new Error('Program link error: ' + gl.getProgramInfoLog(program));
     }
-    gl.useProgram(program);
-    // Clear and draw
-    gl.clearColor(0, 0, 0, 0); // Transparent background
-    gl.clear(gl.COLOR_BUFFER_BIT);
-    // Enable blending for transparency
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    return { canvas, gl, program, vertexShader, fragmentShader };
+    // Get attribute and uniform locations once
+    const locations = {
+        aPosition: gl.getAttribLocation(program, 'aPosition'),
+        aTexCoord: gl.getAttribLocation(program, 'aTexCoord'),
+        uTransform: gl.getUniformLocation(program, 'uTransform'),
+        uProjection: gl.getUniformLocation(program, 'uProjection'),
+        uTexture: gl.getUniformLocation(program, 'uTexture'),
+    };
+    // Shaders can be deleted after linking
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    const cleanup = () => {
+        gl.deleteProgram(program);
+        const loseContext = gl.getExtension('WEBGL_lose_context');
+        if (loseContext) {
+            loseContext.loseContext();
+        }
+    };
+    helperCanvasState.current = { canvas, gl, program, locations, cleanup };
+    return helperCanvasState.current;
 };
-export const transformIn3d = ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, }) => {
-    const { canvas, gl, program } = createHelperCanvas({
+export const transformIn3d = ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, internalState, }) => {
+    const { canvas, gl, program, locations } = createHelperCanvas({
         canvasWidth: rectAfterTransforms.width,
         canvasHeight: rectAfterTransforms.height,
+        helperCanvasState: internalState.helperCanvasState,
     });
+    // Use the cached program
+    gl.useProgram(program);
+    // Setup viewport and clear (already done in createHelperCanvas, but ensure it's set)
+    gl.viewport(0, 0, rectAfterTransforms.width, rectAfterTransforms.height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    // Enable blending
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    // Create vertex buffer
     const vertexBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-    // Create a quad (two triangles) with texture coordinates
     // prettier-ignore
     const vertices = new Float32Array([
-        // Position (x, y) + TexCoord (u, v)
-        // First:
-        untransformedRect.x, untransformedRect.y, 0, 0, // bottom-left
-        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0, // bottom-right
-        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1, // top-left
-        // Second:
-        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1, // top-left
-        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0, // bottom-right
-        untransformedRect.x + untransformedRect.width, untransformedRect.y + untransformedRect.height, 1, 1, // top-right
+        untransformedRect.x, untransformedRect.y, 0, 0,
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0,
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1,
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1,
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0,
+        untransformedRect.x + untransformedRect.width, untransformedRect.y + untransformedRect.height, 1, 1,
     ]);
     gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-    const aPosition = gl.getAttribLocation(program, 'aPosition');
-    const aTexCoord = gl.getAttribLocation(program, 'aTexCoord');
-    // Position attribute (2 floats, stride 4 floats, offset 0)
-    gl.enableVertexAttribArray(aPosition);
-    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
-    // Texture coordinate attribute (2 floats, stride 4 floats, offset 2)
-    gl.enableVertexAttribArray(aTexCoord);
-    gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
+    // Setup attributes using cached locations
+    gl.enableVertexAttribArray(locations.aPosition);
+    gl.vertexAttribPointer(locations.aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
+    gl.enableVertexAttribArray(locations.aTexCoord);
+    gl.vertexAttribPointer(locations.aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
     // Create and configure texture
     const texture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, texture);
-    // Set texture parameters
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-    // Upload the source canvas as a texture
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-    // The transform matrix
+    // Set uniforms using cached locations
     const transformMatrix = matrix.toFloat32Array();
-    const zScale = 1000000000; // By default infinite in chrome
-    // Create orthographic projection matrix for pixel coordinates with offset
+    const zScale = 1000000000;
+    // Projection matrix accounts for the output canvas dimensions
     const projectionMatrix = new Float32Array([
-        2 / canvas.width,
+        2 / rectAfterTransforms.width,
         0,
         0,
         0,
         0,
-        -2 / canvas.height,
+        -2 / rectAfterTransforms.height,
         0,
         0,
         0,
         0,
         -2 / zScale,
         0,
-        -1 + (2 * -rectAfterTransforms.x) / canvas.width,
-        1 - (2 * -rectAfterTransforms.y) / canvas.height,
+        -1 + (2 * -rectAfterTransforms.x) / rectAfterTransforms.width,
+        1 - (2 * -rectAfterTransforms.y) / rectAfterTransforms.height,
         0,
         1,
     ]);
-    const uTransform = gl.getUniformLocation(program, 'uTransform');
-    const uProjection = gl.getUniformLocation(program, 'uProjection');
-    const uTexture = gl.getUniformLocation(program, 'uTexture');
-    gl.uniformMatrix4fv(uTransform, false, transformMatrix);
-    gl.uniformMatrix4fv(uProjection, false, projectionMatrix);
-    gl.uniform1i(uTexture, 0); // Use texture unit 0
+    gl.uniformMatrix4fv(locations.uTransform, false, transformMatrix);
+    gl.uniformMatrix4fv(locations.uProjection, false, projectionMatrix);
+    gl.uniform1i(locations.uTexture, 0);
+    // Draw
     gl.drawArrays(gl.TRIANGLES, 0, 6);
-    // Clean up resources to prevent leaks and ensure clean state for reuse
-    gl.disableVertexAttribArray(aPosition);
-    gl.disableVertexAttribArray(aTexCoord);
-    // Clean up resources to prevent leaks and ensure clean state for reuse
+    // Clean up per-frame resources only
+    gl.disableVertexAttribArray(locations.aPosition);
+    gl.disableVertexAttribArray(locations.aTexCoord);
     gl.deleteTexture(texture);
     gl.deleteBuffer(vertexBuffer);
     gl.bindTexture(gl.TEXTURE_2D, null);
-    gl.deleteTexture(texture);
-    // Reset pixel store state
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    // Reset state
+    gl.disable(gl.BLEND);
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-    // Reset blend function to the initial state
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
     return {
         canvas,
         rect: rectAfterTransforms,
-        cleanup: () => {
-            const loseContext = gl.getExtension('WEBGL_lose_context');
-            if (loseContext) {
-                loseContext.loseContext();
-            }
-        },
     };
 };