alpha to RenderOp with automatic shader props (#18)

I've added alpha to the shader props which can be used for automatic
shader props similar to [$dimensions](#1).
This is a prop we need for some of the DynamicShader effects.

This pull request is also related to #15

Author: frank-weindel

examples/tests/dynamic-shader.ts

@@ -154,7 +154,7 @@ export default async function ({ renderer }: ExampleSettings) {
     y: 100,
     width: 250,
     height: 500,
-    color: 0xff0000ff,
+    color: 0x00000000,
     shader: renderer.makeShader('DynamicShader', {
       effects: [
         {

src/core/renderers/webgl/WebGlCoreRenderOp.ts

@@ -43,6 +43,7 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
     readonly buffers: BufferCollection,
     readonly shader: WebGlCoreShader,
     readonly shaderProps: Record<string, unknown>,
+    readonly alpha: number,
     readonly clippingRect: Rect | null,
     readonly dimensions: Dimensions,
     readonly bufferIdx: number,

src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -285,6 +285,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       this.newRenderOp(
         targetShader,
         shaderProps as any,
+        alpha,
         targetDims,
         clippingRect,
         bufferIdx,
@@ -447,6 +448,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
   private newRenderOp(
     shader: WebGlCoreShader,
     shaderProps: Record<string, unknown>,
+    alpha: number,
     dimensions: Dimensions,
     clippingRect: Rect | null,
     bufferIdx: number,
@@ -457,6 +459,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       this.quadBufferCollection,
       shader,
       shaderProps,
+      alpha,
       clippingRect,
       dimensions,
       bufferIdx,
@@ -491,10 +494,13 @@ export class WebGlCoreRenderer extends CoreRenderer {
       if (recursive) {
         throw new Error('Unable to add texture to render op');
       }
-      const { shader, shaderProps, dimensions, clippingRect } = curRenderOp;
+
+      const { shader, shaderProps, dimensions, clippingRect, alpha } =
+        curRenderOp;
       this.newRenderOp(
         shader,
         shaderProps,
+        alpha,
         dimensions,
         clippingRect,
         bufferIdx,

src/core/renderers/webgl/WebGlCoreShader.ts

@@ -53,6 +53,17 @@ export interface DimensionsShaderProp {
   $dimensions?: Dimensions;
 }
 
+export interface AlphaShaderProp {
+  /**
+   * Alpha of the Node being rendered (Auto-set by the renderer)
+   *
+   * @remarks
+   * DO NOT SET THIS. It is set automatically by the renderer.
+   * Any values set here will be ignored.
+   */
+  $alpha?: number;
+}
+
 export abstract class WebGlCoreShader extends CoreShader {
   protected boundBufferCollection: BufferCollection | null = null;
   protected buffersBound = false;
@@ -260,6 +271,13 @@ export abstract class WebGlCoreShader extends CoreShader {
         }
         this.setUniform('u_dimensions', [dimensions.width, dimensions.height]);
       }
+      if (hasOwn(props, '$alpha')) {
+        let alpha = props.$alpha as number | null;
+        if (!alpha) {
+          alpha = renderOp.alpha;
+        }
+        this.setUniform('u_alpha', alpha);
+      }
       this.bindProps(props);
     }
   }

src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -21,9 +21,9 @@ import type { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
 import {
   WebGlCoreShader,
   type DimensionsShaderProp,
+  type AlphaShaderProp,
 } from '../WebGlCoreShader.js';
 import type { UniformInfo } from '../internal/ShaderUtils.js';
-import type { WebGlCoreRenderOp } from '../WebGlCoreRenderOp.js';
 import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
 import { RadiusEffect } from './effects/RadiusEffect.js';
 import { BorderEffect } from './effects/BorderEffect.js';
@@ -37,7 +37,9 @@ import { BorderLeftEffect } from './effects/BorderLeftEffect.js';
 import { GlitchEffect } from './effects/GlitchEffect.js';
 import { FadeOutEffect } from './effects/FadeOutEffect.js';
 
-export interface DynamicShaderProps extends DimensionsShaderProp {
+export interface DynamicShaderProps
+  extends DimensionsShaderProp,
+    AlphaShaderProp {
   effects?: EffectDesc[];
 }
 
@@ -85,6 +87,7 @@ export class DynamicShader extends WebGlCoreShader {
         { name: 'u_pixelRatio', uniform: 'uniform1f' },
         { name: 'u_texture', uniform: 'uniform2fv' },
         { name: 'u_dimensions', uniform: 'uniform2fv' },
+        { name: 'u_alpha', uniform: 'uniform1f' },
         ...shader.uniforms,
       ],
       shaderSources: {
@@ -324,6 +327,7 @@ export class DynamicShader extends WebGlCoreShader {
         width: 0,
         height: 0,
       },
+      $alpha: 0,
     };
   }
 
@@ -389,6 +393,7 @@ export class DynamicShader extends WebGlCoreShader {
 
     uniform vec2 u_resolution;
     uniform vec2 u_dimensions;
+    uniform float u_alpha;
     uniform float u_radius;
     uniform sampler2D u_texture;
 
@@ -416,7 +421,7 @@ export class DynamicShader extends WebGlCoreShader {
 
       ${drawEffects}
 
-      gl_FragColor = shaderColor * v_color.a;
+      gl_FragColor = shaderColor * u_alpha;
     }
   `;
 }

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

@@ -536,6 +536,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         distanceRange,
         debug: debug.sdfShaderDebug,
       } satisfies SdfShaderProps,
+      alpha,
       clippingRect,
       { height: textH, width: textW },
       0,