@lightningjs/renderer 0.7.6 → 0.8.0

package/src/core/CoreTextNode.ts

@@ -55,35 +55,32 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     super(stage, props);
     this._textRendererOverride = props.textRendererOverride;
     const { resolvedTextRenderer, textRendererState } =
-      this.resolveTextRendererAndState(
-        {
-          x: this.absX,
-          y: this.absY,
-          width: props.width,
-          height: props.height,
-          textAlign: props.textAlign,
-          color: props.color,
-          zIndex: props.zIndex,
-          contain: props.contain,
-          scrollable: props.scrollable,
-          scrollY: props.scrollY,
-          offsetY: props.offsetY,
-          letterSpacing: props.letterSpacing,
-          debug: props.debug,
-          fontFamily: props.fontFamily,
-          fontSize: props.fontSize,
-          fontStretch: props.fontStretch,
-          fontStyle: props.fontStyle,
-          fontWeight: props.fontWeight,
-          text: props.text,
-          lineHeight: props.lineHeight,
-          maxLines: props.maxLines,
-          textBaseline: props.textBaseline,
-          verticalAlign: props.verticalAlign,
-          overflowSuffix: props.overflowSuffix,
-        },
-        undefined,
-      );
+      this.resolveTextRendererAndState({
+        x: this.absX,
+        y: this.absY,
+        width: props.width,
+        height: props.height,
+        textAlign: props.textAlign,
+        color: props.color,
+        zIndex: props.zIndex,
+        contain: props.contain,
+        scrollable: props.scrollable,
+        scrollY: props.scrollY,
+        offsetY: props.offsetY,
+        letterSpacing: props.letterSpacing,
+        debug: props.debug,
+        fontFamily: props.fontFamily,
+        fontSize: props.fontSize,
+        fontStretch: props.fontStretch,
+        fontStyle: props.fontStyle,
+        fontWeight: props.fontWeight,
+        text: props.text,
+        lineHeight: props.lineHeight,
+        maxLines: props.maxLines,
+        textBaseline: props.textBaseline,
+        verticalAlign: props.verticalAlign,
+        overflowSuffix: props.overflowSuffix,
+      });
     this.textRenderer = resolvedTextRenderer;
     this.trState = textRendererState;
   }
@@ -179,8 +176,10 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
   set textRendererOverride(value: CoreTextNodeProps['textRendererOverride']) {
     this._textRendererOverride = value;
 
+    this.textRenderer.destroyState(this.trState);
+
     const { resolvedTextRenderer, textRendererState } =
-      this.resolveTextRendererAndState(this.trState.props, this.trState);
+      this.resolveTextRendererAndState(this.trState.props);
     this.textRenderer = resolvedTextRenderer;
     this.trState = textRendererState;
   }
@@ -348,6 +347,11 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     return super.checkRenderProps();
   }
 
+  override onChangeIsRenderable(isRenderable: boolean) {
+    super.onChangeIsRenderable(isRenderable);
+    this.textRenderer.setIsRenderable(this.trState, isRenderable);
+  }
+
   override renderQuads(renderer: CoreRenderer) {
     assertTruthy(this.globalTransform);
     this.textRenderer.renderQuads(
@@ -358,15 +362,21 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     );
   }
 
+  /**
+   * Destroy the node and cleanup all resources
+   */
+  override destroy(): void {
+    super.destroy();
+
+    this.textRenderer.destroyState(this.trState);
+  }
+
   /**
    * Resolve a text renderer and a new state based on the current text renderer props provided
    * @param props
    * @returns
    */
-  private resolveTextRendererAndState(
-    props: TrProps,
-    prevState?: TextRendererState,
-  ): {
+  private resolveTextRendererAndState(props: TrProps): {
     resolvedTextRenderer: TextRenderer;
     textRendererState: TextRendererState;
   } {
@@ -377,15 +387,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
     const textRendererState = resolvedTextRenderer.createState(props);
 
-    const stateEvents = ['loading', 'loaded', 'failed'];
-
-    if (prevState) {
-      // Remove the old event listeners from previous state obj there was one
-      stateEvents.forEach((eventName) => {
-        prevState.emitter.off(eventName);
-      });
-    }
-
     textRendererState.emitter.on('loaded', this.onTextLoaded);
     textRendererState.emitter.on('failed', this.onTextFailed);
 

package/src/core/CoreTextureManager.ts

@@ -288,6 +288,8 @@ export class CoreTextureManager {
         }
       }
     }
+    // Free the ctx texture if it exists.
+    this.ctxTextureCache.get(texture)?.free();
   }
 
   /**

package/src/core/Stage.ts

@@ -37,11 +37,13 @@ import type {
   FpsUpdatePayload,
   FrameTickPayload,
 } from '../common/CommonTypes.js';
+import { TextureMemoryManager } from './TextureMemoryManager.js';
 
 export interface StageOptions {
   rootId: number;
   appWidth: number;
   appHeight: number;
+  txMemByteThreshold: number;
   boundsMargin: number | [number, number, number, number];
   deviceLogicalPixelRatio: number;
   devicePhysicalPixelRatio: number;
@@ -73,6 +75,7 @@ export class Stage extends EventEmitter {
   /// Module Instances
   public readonly animationManager: AnimationManager;
   public readonly txManager: CoreTextureManager;
+  public readonly txMemManager: TextureMemoryManager;
   public readonly fontManager: TrFontManager;
   public readonly textRenderers: Partial<TextRendererMap>;
   public readonly shManager: CoreShaderManager;
@@ -106,9 +109,11 @@ export class Stage extends EventEmitter {
       boundsMargin,
       enableContextSpy,
       numImageWorkers,
+      txMemByteThreshold,
     } = options;
 
     this.txManager = new CoreTextureManager(numImageWorkers);
+    this.txMemManager = new TextureMemoryManager(txMemByteThreshold);
     this.shManager = new CoreShaderManager();
     this.animationManager = new AnimationManager();
     this.contextSpy = enableContextSpy ? new ContextSpy() : null;
@@ -138,6 +143,7 @@ export class Stage extends EventEmitter {
       clearColor: clearColor ?? 0xff000000,
       bufferMemory,
       txManager: this.txManager,
+      txMemManager: this.txMemManager,
       shManager: this.shManager,
       contextSpy: this.contextSpy,
     });
@@ -243,11 +249,15 @@ export class Stage extends EventEmitter {
 
     renderer?.render();
 
+    this.calculateFps();
+
     // Reset renderRequested flag if it was set
     if (renderRequested) {
       this.renderRequested = false;
     }
+  }
 
+  calculateFps() {
     // If there's an FPS update interval, emit the FPS update event
     // when the specified interval has elapsed.
     const { fpsUpdateInterval } = this.options;

package/src/core/TextureMemoryManager.ts

@@ -0,0 +1,66 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2024 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 type { CoreContextTexture } from './renderers/CoreContextTexture.js';
+
+export class TextureMemoryManager {
+  private memUsed = 0;
+  private textures: Map<CoreContextTexture, number> = new Map();
+  private threshold: number;
+
+  /**
+   * @param byteThreshold Number of texture bytes to trigger garbage collection
+   */
+  constructor(byteThreshold: number) {
+    this.threshold = byteThreshold;
+
+    // If the threshold is 0, we disable the memory manager by replacing the
+    // setTextureMemUse method with a no-op function.
+    if (byteThreshold === 0) {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      this.setTextureMemUse = () => {};
+    }
+  }
+
+  setTextureMemUse(ctxTexture: CoreContextTexture, byteSize: number) {
+    if (this.textures.has(ctxTexture)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.memUsed -= this.textures.get(ctxTexture)!;
+    }
+
+    if (byteSize === 0) {
+      this.textures.delete(ctxTexture);
+      return;
+    } else {
+      this.memUsed += byteSize;
+      this.textures.set(ctxTexture, byteSize);
+    }
+
+    if (this.memUsed > this.threshold) {
+      this.gc();
+    }
+  }
+
+  gc() {
+    this.textures.forEach((byteSize, ctxTexture) => {
+      if (!ctxTexture.renderable) {
+        ctxTexture.free();
+      }
+    });
+  }
+}

package/src/core/platform.ts

@@ -23,14 +23,22 @@ import type { Stage } from './Stage.js';
  * Platform render loop initiator
  */
 export const startLoop = (stage: Stage) => {
+  let isIdle = false;
   const runLoop = () => {
     stage.updateAnimations();
 
     if (!stage.hasSceneUpdates()) {
+      // We still need to calculate the fps else it looks like the app is frozen
+      stage.calculateFps();
       setTimeout(runLoop, 16.666666666666668);
+      if (!isIdle) {
+        stage.emit('idle');
+        isIdle = true;
+      }
       return;
     }
 
+    isIdle = false;
     stage.drawFrame();
     requestAnimationFrame(runLoop);
   };

package/src/core/renderers/CoreContextTexture.ts

@@ -17,14 +17,19 @@
  * limitations under the License.
  */
 
+import type { TextureMemoryManager } from '../TextureMemoryManager.js';
 import type { Texture } from '../textures/Texture.js';
 
 export abstract class CoreContextTexture {
+  readonly memManager: TextureMemoryManager;
   readonly textureSource: Texture;
 
-  constructor(textureSource: Texture) {
+  constructor(memManager: TextureMemoryManager, textureSource: Texture) {
+    this.memManager = memManager;
     this.textureSource = textureSource;
   }
 
   abstract load(): void;
+  abstract free(): void;
+  abstract get renderable(): boolean;
 }

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

@@ -18,13 +18,18 @@
  */
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { SubTexture } from '../../textures/SubTexture.js';
 import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 
 export class WebGlCoreCtxSubTexture extends WebGlCoreCtxTexture {
-  constructor(glw: WebGlContextWrapper, textureSource: SubTexture) {
-    super(glw, textureSource);
+  constructor(
+    glw: WebGlContextWrapper,
+    memManager: TextureMemoryManager,
+    textureSource: SubTexture,
+  ) {
+    super(glw, memManager, textureSource);
   }
 
   override async onLoadRequest(): Promise<Dimensions> {

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

@@ -19,6 +19,7 @@
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy } from '../../../utils.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Texture } from '../../textures/Texture.js';
 import { isPowerOfTwo } from '../../utils.js';
@@ -44,8 +45,12 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
   private _w = 0;
   private _h = 0;
 
-  constructor(protected glw: WebGlContextWrapper, textureSource: Texture) {
-    super(textureSource);
+  constructor(
+    protected glw: WebGlContextWrapper,
+    memManager: TextureMemoryManager,
+    textureSource: Texture,
+  ) {
+    super(memManager, textureSource);
   }
 
   get ctxTexture(): WebGLTexture {
@@ -56,6 +61,10 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     return this._nativeCtxTexture;
   }
 
+  get renderable(): boolean {
+    return this.textureSource.renderable;
+  }
+
   get w() {
     return this._w;
   }
@@ -80,8 +89,12 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     }
     this._state = 'loading';
     this.textureSource.setState('loading');
+    this._nativeCtxTexture = this.createNativeCtxTexture();
     this.onLoadRequest()
       .then(({ width, height }) => {
+        if (this._state === 'freed') {
+          return;
+        }
         this._state = 'loaded';
         this._w = width;
         this._h = height;
@@ -100,8 +113,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
    * Called when the texture data needs to be loaded and uploaded to a texture
    */
   async onLoadRequest(): Promise<Dimensions> {
-    this._nativeCtxTexture = this.createNativeCtxTexture();
-    const { glw } = this;
+    const { glw, memManager } = this;
 
     // On initial load request, create a 1x1 transparent texture to use until
     // the texture data is finally loaded.
@@ -126,10 +138,17 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       glw.UNSIGNED_BYTE,
       TRANSPARENT_TEXTURE_DATA,
     );
+    memManager.setTextureMemUse(this, TRANSPARENT_TEXTURE_DATA.byteLength);
 
     const textureData = await this.textureSource?.getTextureData();
+    // If the texture has been freed while loading, return early.
+    if (!this._nativeCtxTexture) {
+      assertTruthy(this._state === 'freed');
+      return { width: 0, height: 0 };
+    }
     let width = 0;
     let height = 0;
+
     assertTruthy(this._nativeCtxTexture);
     glw.activeTexture(0);
     // If textureData is null, the texture is empty (0, 0) and we don't need to
@@ -150,6 +169,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       );
 
       glw.texImage2D(0, glw.RGBA, glw.RGBA, glw.UNSIGNED_BYTE, data);
+      memManager.setTextureMemUse(this, width * height * 4);
 
       // generate mipmaps for power-of-2 textures or in WebGL2RenderingContext
       if (glw.isWebGl2() || (isPowerOfTwo(width) && isPowerOfTwo(height))) {
@@ -160,6 +180,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       height = 0;
       // Reset to a 1x1 transparent texture
       glw.bindTexture(this._nativeCtxTexture);
+
       glw.texImage2D(
         0,
         glw.RGBA,
@@ -170,6 +191,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         glw.UNSIGNED_BYTE,
         TRANSPARENT_TEXTURE_DATA,
       );
+      memManager.setTextureMemUse(this, TRANSPARENT_TEXTURE_DATA.byteLength);
     } else if ('mipmaps' in textureData.data && textureData.data.mipmaps) {
       const {
         mipmaps,
@@ -184,12 +206,14 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
           : (mipmaps[0] as unknown as ArrayBufferView);
 
       glw.bindTexture(this._nativeCtxTexture);
-      glw.compressedTexImage2D(0, glInternalFormat, width, height, 0, view);
 
+      glw.compressedTexImage2D(0, glInternalFormat, width, height, 0, view);
       glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
       glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
       glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
       glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
+
+      memManager.setTextureMemUse(this, view.byteLength);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,
@@ -202,6 +226,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       height,
     };
   }
+
   /**
    * Free the WebGLTexture from the GPU
    *
@@ -212,13 +237,16 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       return;
     }
     this._state = 'freed';
+    this.textureSource.setState('freed');
     this._w = 0;
     this._h = 0;
     if (!this._nativeCtxTexture) {
       return;
     }
-    const { glw } = this;
+    const { glw, memManager } = this;
+
     glw.deleteTexture(this._nativeCtxTexture);
+    memManager.setTextureMemUse(this, 0);
     this._nativeCtxTexture = null;
   }
 

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

@@ -57,6 +57,7 @@ import { WebGlCoreShader } from './WebGlCoreShader.js';
 import { RoundedRectangle } from './shaders/RoundedRectangle.js';
 import { ContextSpy } from '../../lib/ContextSpy.js';
 import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 
 const WORDS_PER_QUAD = 24;
 const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
@@ -66,6 +67,7 @@ export interface WebGlCoreRendererOptions {
   canvas: HTMLCanvasElement | OffscreenCanvas;
   pixelRatio: number;
   txManager: CoreTextureManager;
+  txMemManager: TextureMemoryManager;
   shManager: CoreShaderManager;
   clearColor: number;
   bufferMemory: number;
@@ -84,6 +86,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
   //// Core Managers
   txManager: CoreTextureManager;
+  txMemManager: TextureMemoryManager;
   shManager: CoreShaderManager;
 
   //// Options
@@ -114,6 +117,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     const { canvas, clearColor, bufferMemory } = options;
     this.options = options;
     this.txManager = options.txManager;
+    this.txMemManager = options.txMemManager;
     this.shManager = options.shManager;
     this.defaultTexture = new ColorTexture(this.txManager);
     // When the default texture is loaded, request a render in case the
@@ -198,9 +202,13 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
   override createCtxTexture(textureSource: Texture): CoreContextTexture {
     if (textureSource instanceof SubTexture) {
-      return new WebGlCoreCtxSubTexture(this.glw, textureSource);
+      return new WebGlCoreCtxSubTexture(
+        this.glw,
+        this.txMemManager,
+        textureSource,
+      );
     }
-    return new WebGlCoreCtxTexture(this.glw, textureSource);
+    return new WebGlCoreCtxTexture(this.glw, this.txMemManager, textureSource);
   }
 
   /**

package/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.ts

@@ -61,13 +61,22 @@ export class LinearGradientEffect extends ShaderEffect {
   ): Required<LinearGradientEffectProps> {
     const colors = props.colors ?? [0xff000000, 0xffffffff];
 
-    let stops = props.stops;
-    if (!stops) {
-      stops = [];
-      const calc = colors.length - 1;
-      for (let i = 0; i < colors.length; i++) {
-        stops.push(i * (1 / calc));
+    let stops = props.stops || [];
+    if (stops.length === 0 || stops.length !== colors.length) {
+      const colorsL = colors.length;
+      let i = 0;
+      const tmp = stops;
+      for (; i < colorsL; i++) {
+        if (stops[i]) {
+          tmp[i] = stops[i]!;
+          if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
+            tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
+          }
+        } else {
+          tmp[i] = i * (1 / (colors.length - 1));
+        }
       }
+      stops = tmp;
     }
     return {
       colors,
@@ -94,28 +103,6 @@ export class LinearGradientEffect extends ShaderEffect {
     },
     stops: {
       value: [],
-      validator: (
-        value: number[],
-        props: LinearGradientEffectProps,
-      ): number[] => {
-        const colors = props.colors ?? [];
-        let stops = value;
-        const tmp: number[] = value;
-        if (stops.length === 0 || (stops && stops.length !== colors.length)) {
-          for (let i = 0; i < colors.length; i++) {
-            if (stops[i]) {
-              tmp[i] = stops[i]!;
-              if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
-                tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
-              }
-            } else {
-              tmp[i] = i * (1 / (colors.length - 1));
-            }
-          }
-          stops = tmp;
-        }
-        return tmp;
-      },
       size: (props: LinearGradientEffectProps) => props.colors!.length,
       method: 'uniform1fv',
       type: 'float',
@@ -166,10 +153,7 @@ export class LinearGradientEffect extends ShaderEffect {
 
       float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
       vec4 colorOut = $fromLinear(mix($toLinear(colors[0]), $toLinear(colors[1]), stopCalc));
-      for(int i = 1; i < ${colors}-1; i++) {
-        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
-        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
-      }
+      ${this.ColorLoop(colors)}
       return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
   };

package/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.ts

@@ -66,13 +66,22 @@ export class RadialGradientEffect extends ShaderEffect {
   ): Required<RadialGradientEffectProps> {
     const colors = props.colors ?? [0xff000000, 0xffffffff];
 
-    let stops = props.stops;
-    if (!stops) {
-      stops = [];
-      const calc = colors.length - 1;
-      for (let i = 0; i < colors.length; i++) {
-        stops.push(i * (1 / calc));
+    let stops = props.stops || [];
+    if (stops.length === 0 || stops.length !== colors.length) {
+      const colorsL = colors.length;
+      let i = 0;
+      const tmp = stops;
+      for (; i < colorsL; i++) {
+        if (stops[i]) {
+          tmp[i] = stops[i]!;
+          if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
+            tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
+          }
+        } else {
+          tmp[i] = i * (1 / (colors.length - 1));
+        }
       }
+      stops = tmp;
     }
     return {
       colors,
@@ -111,34 +120,22 @@ export class RadialGradientEffect extends ShaderEffect {
     },
     stops: {
       value: [],
-      validator: (
-        value: number[],
-        props: RadialGradientEffectProps,
-      ): number[] => {
-        const colors = props.colors ?? [];
-        let stops = value;
-        const tmp: number[] = value;
-        if (stops.length === 0 || (stops && stops.length !== colors.length)) {
-          for (let i = 0; i < colors.length; i++) {
-            if (stops[i]) {
-              tmp[i] = stops[i]!;
-              if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
-                tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
-              }
-            } else {
-              tmp[i] = i * (1 / (colors.length - 1));
-            }
-          }
-          stops = tmp;
-        }
-        return tmp;
-      },
       size: (props: RadialGradientEffectProps) => props.colors!.length,
       method: 'uniform1fv',
       type: 'float',
     },
   };
 
+  static ColorLoop = (amount: number): string => {
+    let loop = '';
+    for (let i = 2; i < amount; i++) {
+      loop += `colorOut = mix(colorOut, colors[${i}], clamp((dist - stops[${
+        i - 1
+      }]) / (stops[${i}] - stops[${i - 1}]), 0.0, 1.0));`;
+    }
+    return loop;
+  };
+
   static override onColorize = (props: RadialGradientEffectProps) => {
     const colors = props.colors!.length || 1;
     return `
@@ -149,10 +146,7 @@ export class RadialGradientEffect extends ShaderEffect {
 
       float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
       vec4 colorOut = mix(colors[0], colors[1], stopCalc);
-      for(int i = 1; i < ${colors}-1; i++) {
-        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
-        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
-      }
+      ${this.ColorLoop(colors)}
       return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
   };