@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta10

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

@@ -1,145 +1,167 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { CoreRenderOp } from '../CoreRenderOp.js';
-import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import type { WebGlRenderer } from './WebGlRenderer.js';
-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';
-
-type ReqQuad =
-  | 'alpha'
-  | 'shader'
-  | 'parentHasRenderTexture'
-  | 'rtt'
-  | 'clippingRect'
-  | 'height'
-  | 'width';
-type RenderOpQuadOptions = Pick<QuadOptions, ReqQuad> &
-  Partial<Omit<QuadOptions, ReqQuad>> & {
-    sdfShaderProps?: Record<string, unknown>;
-    sdfBuffers?: BufferCollection;
-  };
-
-/**
- * Can render multiple quads with multiple textures (up to vertex shader texture limit)
- *
- */
-export class WebGlRenderOp extends CoreRenderOp {
-  length = 0;
-  numQuads = 0;
-  textures: WebGlCtxTexture[] = [];
-
-  /**
-   * need to improve this when TextRenderers are refactored
-   */
-  readonly sdfShaderProps: Record<string, unknown> | undefined;
-  readonly sdfNode: CoreTextNode | undefined;
-  readonly maxTextures: number;
-  readonly buffers: BufferCollection;
-  readonly shader: WebGlShaderNode;
-
-  constructor(
-    readonly renderer: WebGlRenderer,
-    readonly quad: RenderOpQuadOptions,
-    readonly bufferIdx: number,
-  ) {
-    super();
-    this.buffers = quad.sdfBuffers || renderer.quadBufferCollection;
-    this.shader = quad.shader as WebGlShaderNode;
-
-    /**
-     * related to line 51
-     */
-    this.sdfShaderProps = quad.sdfShaderProps;
-
-    this.maxTextures = this.shader.program.supportsIndexedTextures
-      ? (renderer.glw.getParameter(
-          renderer.glw.MAX_VERTEX_TEXTURE_IMAGE_UNITS,
-        ) as number)
-      : 1;
-  }
-
-  addTexture(texture: WebGlCtxTexture): number {
-    const { textures, maxTextures } = this;
-    let existingIdx = -1;
-    const texturesLength = textures.length;
-    for (let i = 0; i < texturesLength; i++) {
-      const t = textures[i];
-      if (t === texture) {
-        existingIdx = i;
-        break;
-      }
-    }
-
-    if (existingIdx !== -1) {
-      return existingIdx;
-    }
-
-    if (texturesLength >= maxTextures) {
-      return 0xffffffff;
-    }
-    this.textures.push(texture);
-    return texturesLength;
-  }
-
-  draw() {
-    const { glw, options, stage } = this.renderer;
-
-    stage.shManager.useShader(this.shader.program);
-    this.shader.program.bindRenderOp(this);
-
-    // 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 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
-          : 0;
-      }
-
-      glw.setScissorTest(true);
-      glw.scissor(clipX, clipY, clipWidth, clipHeight);
-    } else {
-      glw.setScissorTest(false);
-    }
-
-    glw.drawElements(
-      glw.TRIANGLES,
-      6 * this.numQuads,
-      glw.UNSIGNED_SHORT,
-      quadIdx,
-    );
-  }
-}
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CoreRenderOp } from '../CoreRenderOp.js';
+import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
+import type { WebGlRenderer } from './WebGlRenderer.js';
+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'
+  | 'shader'
+  | 'parentHasRenderTexture'
+  | 'rtt'
+  | 'clippingRect'
+  | 'height'
+  | 'width';
+type RenderOpQuadOptions = Pick<QuadOptions, ReqQuad> &
+  Partial<Omit<QuadOptions, ReqQuad>> & {
+    sdfShaderProps?: Record<string, unknown>;
+    sdfBuffers?: BufferCollection;
+  };
+
+/**
+ * Can render multiple quads with multiple textures (up to vertex shader texture limit)
+ *
+ */
+export class WebGlRenderOp extends CoreRenderOp {
+  numQuads = 0;
+  textures: WebGlCtxTexture[] = [];
+
+  /**
+   * need to improve this when TextRenderers are refactored
+   */
+  readonly sdfShaderProps: Record<string, unknown> | undefined;
+  readonly sdfNode: CoreTextNode | undefined;
+  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 | null;
+  readonly alpha: number;
+  readonly pixelRatio: number;
+
+  constructor(
+    readonly renderer: WebGlRenderer,
+    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
+     */
+    this.sdfShaderProps = quad.sdfShaderProps;
+
+    this.maxTextures = this.shader.program.supportsIndexedTextures
+      ? (renderer.glw.getParameter(
+          renderer.glw.MAX_VERTEX_TEXTURE_IMAGE_UNITS,
+        ) as number)
+      : 1;
+  }
+
+  addTexture(texture: WebGlCtxTexture): number {
+    const { textures, maxTextures } = this;
+    let existingIdx = -1;
+    const texturesLength = textures.length;
+    for (let i = 0; i < texturesLength; i++) {
+      const t = textures[i];
+      if (t === texture) {
+        existingIdx = i;
+        break;
+      }
+    }
+
+    if (existingIdx !== -1) {
+      return existingIdx;
+    }
+
+    if (texturesLength >= maxTextures) {
+      return 0xffffffff;
+    }
+    this.textures.push(texture);
+    return texturesLength;
+  }
+
+  draw() {
+    const { glw, options, stage } = this.renderer;
+
+    stage.shManager.useShader(this.shader.program);
+    this.shader.program.bindRenderOp(this);
+
+    // Clipping
+    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.parentHasRenderTexture) {
+        clipY = this.framebufferDimensions
+          ? this.framebufferDimensions.height - this.height
+          : 0;
+      }
+
+      glw.setScissorTest(true);
+      glw.scissor(clipX, clipY, clipWidth, clipHeight);
+    } else {
+      glw.setScissorTest(false);
+    }
+
+    // Check if this is SDF rendering (has sdfBuffers)
+    if (this.sdfShaderProps !== undefined) {
+      // SDF rendering uses drawArrays with explicit triangle vertices (6 vertices per quad)
+      glw.drawArrays(glw.TRIANGLES, 0, 6 * this.numQuads);
+    } else {
+      // Regular rendering uses drawElements with index buffer (4 vertices per quad)
+      const quadIdx = (this.bufferIdx / 32) * 6 * 2;
+      glw.drawElements(
+        glw.TRIANGLES,
+        6 * this.numQuads,
+        glw.UNSIGNED_SHORT,
+        quadIdx,
+      );
+    }
+  }
+}