Merge branch 'main' into texture-management-replace-finalizationregistry

Author: frank-weindel

examples/tests/dynamic-shader.ts

@@ -40,7 +40,7 @@ export default async function ({ renderer }: ExampleSettings) {
             angle: 220,
             colors: [
               0xff0000ff, 0x00ff00ff, 0xff0000ff, 0x0000ffff, 0xffff00ff,
-              0xff0000ff,
+              0xff000000,
             ],
           },
         },
@@ -154,7 +154,7 @@ export default async function ({ renderer }: ExampleSettings) {
     y: 100,
     width: 250,
     height: 500,
-    color: 0xff0000ff,
+    color: 0x00000000,
     shader: renderer.createShader('DynamicShader', {
       effects: [
         {
@@ -200,6 +200,28 @@ export default async function ({ renderer }: ExampleSettings) {
     parent: renderer.root,
   });
 
+  const t7 = renderer.createNode({
+    x: 1000,
+    y: 700,
+    width: 750,
+    height: 250,
+    shader: renderer.makeShader('DynamicShader', {
+      effects: [
+        {
+          type: 'radialGradient',
+          props: {
+            colors: [0xff0000ff, 0x00ff00ff, 0x00000000],
+            stops: [0.1, 0.4, 1.0],
+            height: 200,
+            width: 1000,
+            pivot: [0, 0.5],
+          },
+        },
+      ],
+    }),
+    parent: renderer.root,
+  });
+
   /*
    * End: Sprite Map Demo
    */

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",
@@ -69,6 +69,7 @@
   },
   "files": [
     "dist",
+    "src",
     "LICENSE",
     "NOTICE",
     "README.md"

package.json

@@ -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/WebGlCoreRenderOp.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/WebGlCoreRenderer.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/WebGlCoreShader.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';
@@ -36,6 +36,7 @@ import { BorderBottomEffect } from './effects/BorderBottomEffect.js';
 import { BorderLeftEffect } from './effects/BorderLeftEffect.js';
 import { GlitchEffect } from './effects/GlitchEffect.js';
 import { FadeOutEffect } from './effects/FadeOutEffect.js';
+import { RadialGradientEffect } from './effects/RadialGradientEffect.js';
 
 /**
  * Allows the `keyof EffectMap` to be mapped over and form an discriminated
@@ -75,7 +76,9 @@ type MapEffectDescs<T extends keyof EffectMap> = T extends keyof EffectMap
 
 type EffectDesc = MapEffectDescs<keyof EffectMap>;
 
-export interface DynamicShaderProps extends DimensionsShaderProp {
+export interface DynamicShaderProps
+  extends DimensionsShaderProp,
+    AlphaShaderProp {
   effects?: EffectDesc[];
 }
 
@@ -88,6 +91,7 @@ export interface EffectMap {
   borderTop: typeof BorderTopEffect;
   fadeOut: typeof FadeOutEffect;
   linearGradient: typeof LinearGradientEffect;
+  radialGradient: typeof RadialGradientEffect;
   grayscale: typeof GrayscaleEffect;
   glitch: typeof GlitchEffect;
 }
@@ -101,6 +105,7 @@ const Effects = {
   borderTop: BorderTopEffect,
   fadeOut: FadeOutEffect,
   linearGradient: LinearGradientEffect,
+  radialGradient: RadialGradientEffect,
   grayscale: GrayscaleEffect,
   glitch: GlitchEffect,
 };
@@ -125,6 +130,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: {
@@ -364,6 +370,7 @@ export class DynamicShader extends WebGlCoreShader {
         width: 0,
         height: 0,
       },
+      $alpha: 0,
     };
   }
 
@@ -429,6 +436,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;
 
@@ -456,7 +464,7 @@ export class DynamicShader extends WebGlCoreShader {
 
       ${drawEffects}
 
-      gl_FragColor = shaderColor * v_color.a;
+      gl_FragColor = shaderColor * u_alpha;
     }
   `;
 }

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

@@ -176,7 +176,7 @@ export class LinearGradientEffect extends ShaderEffect {
         stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
         colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
       }
-      return colorOut;
+      return mix(maskColor, colorOut, colorOut.a);
     `;
   };
 }