@lightningjs/renderer 0.9.4 → 1.0.0-rc.0

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

@@ -61,10 +61,6 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     return this._nativeCtxTexture;
   }
 
-  get renderable(): boolean {
-    return this.textureSource.renderable;
-  }
-
   get w() {
     return this._w;
   }
@@ -118,11 +114,11 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
    * Called when the texture data needs to be loaded and uploaded to a texture
    */
   async onLoadRequest(): Promise<Dimensions> {
-    const { glw, memManager } = this;
+    const { glw } = this;
 
     // Set to a 1x1 transparent texture
     glw.texImage2D(0, glw.RGBA, 1, 1, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
-    memManager.setTextureMemUse(this, TRANSPARENT_TEXTURE_DATA.byteLength);
+    this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
 
     const textureData = await this.textureSource?.getTextureData();
     // If the texture has been freed while loading, return early.
@@ -153,7 +149,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       );
 
       glw.texImage2D(0, glw.RGBA, glw.RGBA, glw.UNSIGNED_BYTE, data);
-      memManager.setTextureMemUse(this, width * height * 4);
+      this.setTextureMemUse(width * height * 4);
 
       // generate mipmaps for power-of-2 textures or in WebGL2RenderingContext
       if (glw.isWebGl2() || (isPowerOfTwo(width) && isPowerOfTwo(height))) {
@@ -175,7 +171,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         glw.UNSIGNED_BYTE,
         TRANSPARENT_TEXTURE_DATA,
       );
-      memManager.setTextureMemUse(this, TRANSPARENT_TEXTURE_DATA.byteLength);
+      this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
     } else if ('mipmaps' in textureData.data && textureData.data.mipmaps) {
       const {
         mipmaps,
@@ -197,7 +193,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
       glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
 
-      memManager.setTextureMemUse(this, view.byteLength);
+      this.setTextureMemUse(view.byteLength);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,
@@ -227,10 +223,10 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     if (!this._nativeCtxTexture) {
       return;
     }
-    const { glw, memManager } = this;
+    const { glw } = this;
 
     glw.deleteTexture(this._nativeCtxTexture);
-    memManager.setTextureMemUse(this, 0);
+    this.setTextureMemUse(0);
     this._nativeCtxTexture = null;
   }
 

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

@@ -50,6 +50,7 @@ import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { RenderTexture } from '../../textures/RenderTexture.js';
 import type { CoreNode } from '../../CoreNode.js';
 import { WebGlCoreCtxRenderTexture } from './WebGlCoreCtxRenderTexture.js';
+import type { BaseShaderController } from '../../../main-api/ShaderController.js';
 import { ImageTexture } from '../../textures/ImageTexture.js';
 
 const WORDS_PER_QUAD = 24;
@@ -80,6 +81,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
   activeRttNode: CoreNode | null = null;
 
   //// Default Shader
+  defShaderCtrl: BaseShaderController;
   defaultShader: WebGlCoreShader;
   quadBufferCollection: BufferCollection;
 
@@ -102,7 +104,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     this.defaultTexture = new ColorTexture(this.txManager);
 
     // Mark the default texture as ALWAYS renderable
-    // This prevents it from ever being garbage collected.
+    // This prevents it from ever being cleaned up.
     // Fixes https://github.com/lightning-js/renderer/issues/262
     this.defaultTexture.setRenderableOwner(this, true);
 
@@ -128,7 +130,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       extensions: getWebGlExtensions(this.glw),
     };
     this.shManager.renderer = this;
-    this.defaultShader = this.shManager.loadShader('DefaultShader').shader;
+    this.defShaderCtrl = this.shManager.loadShader('DefaultShader');
+    this.defaultShader = this.defShaderCtrl.shader as WebGlCoreShader;
     const quadBuffer = glw.createBuffer();
     assertTruthy(quadBuffer);
     const stride = 6 * Float32Array.BYTES_PER_ELEMENT;
@@ -235,6 +238,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       tb,
       tc,
       td,
+      renderCoords,
       rtt: renderToTexture,
       parentHasRenderTexture,
       framebufferDimensions,
@@ -281,7 +285,12 @@ export class WebGlCoreRenderer extends CoreRenderer {
     }
 
     const flipX = textureOptions?.flipX ?? false;
-    const flipY = textureOptions?.flipY ?? false;
+    let flipY = textureOptions?.flipY ?? false;
+
+    // always flip flipY for render textures
+    if (texture instanceof RenderTexture) {
+      flipY = !flipY;
+    }
 
     let texCoordX1 = 0;
     let texCoordY1 = 0;
@@ -333,16 +342,46 @@ export class WebGlCoreRenderer extends CoreRenderer {
       [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
     }
 
-    const { txManager } = this.stage;
-    const ctxTexture = txManager.getCtxTexture(texture);
+    const ctxTexture = texture.ctxTexture;
     assertTruthy(ctxTexture instanceof WebGlCoreCtxTexture);
     const textureIdx = this.addTexture(ctxTexture, bufferIdx);
 
     curRenderOp = this.curRenderOp;
     assertTruthy(curRenderOp);
+    if (renderCoords) {
+      const { x1, y1, x2, y2, x3, y3, x4, y4 } = renderCoords;
+      // Upper-Left
+      fQuadBuffer[bufferIdx++] = x1; // vertexX
+      fQuadBuffer[bufferIdx++] = y1; // vertexY
+      fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
+      fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
+      uiQuadBuffer[bufferIdx++] = colorTl; // color
+      fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+
+      // Upper-Right
+      fQuadBuffer[bufferIdx++] = x2;
+      fQuadBuffer[bufferIdx++] = y2;
+      fQuadBuffer[bufferIdx++] = texCoordX2;
+      fQuadBuffer[bufferIdx++] = texCoordY1;
+      uiQuadBuffer[bufferIdx++] = colorTr;
+      fQuadBuffer[bufferIdx++] = textureIdx;
 
-    // render quad advanced
-    if (tb !== 0 || tc !== 0) {
+      // Lower-Left
+      fQuadBuffer[bufferIdx++] = x4;
+      fQuadBuffer[bufferIdx++] = y4;
+      fQuadBuffer[bufferIdx++] = texCoordX1;
+      fQuadBuffer[bufferIdx++] = texCoordY2;
+      uiQuadBuffer[bufferIdx++] = colorBl;
+      fQuadBuffer[bufferIdx++] = textureIdx;
+
+      // Lower-Right
+      fQuadBuffer[bufferIdx++] = x3;
+      fQuadBuffer[bufferIdx++] = y3;
+      fQuadBuffer[bufferIdx++] = texCoordX2;
+      fQuadBuffer[bufferIdx++] = texCoordY2;
+      uiQuadBuffer[bufferIdx++] = colorBr;
+      fQuadBuffer[bufferIdx++] = textureIdx;
+    } else if (tb !== 0 || tc !== 0) {
       // Upper-Left
       fQuadBuffer[bufferIdx++] = tx; // vertexX
       fQuadBuffer[bufferIdx++] = ty; // vertexY
@@ -412,7 +451,6 @@ export class WebGlCoreRenderer extends CoreRenderer {
       uiQuadBuffer[bufferIdx++] = colorBr;
       fQuadBuffer[bufferIdx++] = textureIdx;
     }
-
     // Update the length of the current render op
     curRenderOp.length += WORDS_PER_QUAD;
     curRenderOp.numQuads++;
@@ -605,7 +643,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       this.activeRttNode = node;
 
       assertTruthy(node.texture, 'RTT node missing texture');
-      const ctxTexture = txManager.getCtxTexture(node.texture);
+      const ctxTexture = node.texture.ctxTexture;
       assertTruthy(ctxTexture instanceof WebGlCoreCtxRenderTexture);
       this.renderToTextureActive = true;
 
@@ -655,4 +693,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
     }
     this.rttNodes.splice(index, 1);
   }
+
+  override getDefShaderCtr(): BaseShaderController {
+    return this.defShaderCtrl;
+  }
 }

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

@@ -25,9 +25,31 @@ import {
 } from '../WebGlCoreShader.js';
 import type { UniformInfo } from '../internal/ShaderUtils.js';
 import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
-import { ShaderEffect } from './effects/ShaderEffect.js';
+import {
+  ShaderEffect,
+  type ShaderEffectUniform,
+  type ShaderEffectValueMap,
+} from './effects/ShaderEffect.js';
 import type { EffectMap } from '../../../CoreShaderManager.js';
-import memize from 'memize';
+import { assertTruthy } from '../../../../utils.js';
+
+export interface BaseEffectDesc {
+  name: string;
+  type: keyof EffectMap;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: Record<string, any>;
+}
+
+export interface EffectDesc<
+  T extends { name: string; type: keyof EffectMap } = {
+    name: string;
+    type: keyof EffectMap;
+  },
+> extends BaseEffectDesc {
+  name: T['name'];
+  type: T['type'];
+  props: ExtractProps<EffectMap[T['type']]>;
+}
 
 /**
  * Allows the `keyof EffectMap` to be mapped over and form an discriminated
@@ -42,12 +64,14 @@ import memize from 'memize';
  * ```
  * (
  *   {
+ *     name: 'effect1',
  *     type: 'radius',
  *     props?: {
  *       radius?: number | number[];
  *     }
  *   } |
  *   {
+ *     name: 'effect2',
  *     type: 'border',
  *     props?: {
  *       width?: number;
@@ -62,43 +86,80 @@ import memize from 'memize';
  * field.
  */
 type MapEffectDescs<T extends keyof EffectMap> = T extends keyof EffectMap
-  ? SpecificEffectDesc<T>
+  ? EffectDesc<{ type: T; name: string }>
   : never;
 
-export type EffectDesc = MapEffectDescs<keyof EffectMap>;
+export type EffectDescUnion = MapEffectDescs<keyof EffectMap>;
 
 export interface DynamicShaderProps
   extends DimensionsShaderProp,
     AlphaShaderProp {
-  effects?: EffectDesc[];
-}
-
-export interface SpecificEffectDesc<
-  FxType extends keyof EffectMap = keyof EffectMap,
-> {
-  type: FxType;
-  props?: ExtractProps<EffectMap[FxType]>;
+  effects?: EffectDescUnion[];
 }
 
-const effectCache = new Map<string, EffectDesc[]>();
+const effectCache = new Map<string, BaseEffectDesc[]>();
 const getResolvedEffect = (
-  effects: EffectDesc[] | undefined,
-  effectContructors: Partial<EffectMap> | undefined,
-): EffectDesc[] => {
+  effects: BaseEffectDesc[],
+  effectContructors: Partial<EffectMap>,
+): BaseEffectDesc[] => {
   const key = JSON.stringify(effects);
   if (effectCache.has(key)) {
     return effectCache.get(key)!;
   }
+  effects = effects ?? [];
+  const resolvedEffects = [];
+  const effectsLength = effects.length;
+  let i = 0;
+  for (; i < effectsLength; i++) {
+    const { name, type, props } = effects[i] as BaseEffectDesc;
+    const resolvedEffect = {
+      name,
+      type,
+      props: {} as Record<string, any>,
+    };
+
+    const effectConstructor = effectContructors[type]!;
+    const defaultPropValues = effectConstructor.resolveDefaults(props);
+    const uniforms = effectConstructor.uniforms;
+    const uniformKeys = Object.keys(uniforms);
+    const uniformsLength = uniformKeys.length;
+    let j = 0;
+    for (; j < uniformsLength; j++) {
+      const key = uniformKeys[j]!;
+      const uniform = uniforms[key]!;
+
+      const result: ShaderEffectValueMap = {
+        value: defaultPropValues[key] as ShaderEffectUniform['value'],
+        programValue: undefined,
+        updateOnBind: uniform.updateOnBind || false,
+        hasValidator: uniform.validator !== undefined,
+        hasProgramValueUpdater: uniform.updateProgramValue !== undefined,
+      };
+
+      const validatedValue =
+        (result.hasValidator &&
+          uniform.validator!(defaultPropValues[key], defaultPropValues)) ||
+        defaultPropValues[key];
+
+      if (defaultPropValues[key] !== validatedValue) {
+        result.validatedValue = validatedValue as number | number[];
+      }
 
-  const value = (effects ?? []).map((effect) => ({
-    type: effect.type,
-    props: effectContructors![effect.type]!.resolveDefaults(
-      (effect.props || {}) as any,
-    ),
-  })) as EffectDesc[];
+      if (result.hasProgramValueUpdater) {
+        uniform.updateProgramValue!(result);
+      }
 
-  effectCache.set(key, value);
-  return value;
+      if (result.programValue === undefined) {
+        result.programValue = result.value as number;
+      }
+
+      resolvedEffect.props[key] = result;
+    }
+    resolvedEffects.push(resolvedEffect);
+  }
+
+  effectCache.set(key, resolvedEffects);
+  return resolvedEffects;
 };
 
 export class DynamicShader extends WebGlCoreShader {
@@ -130,8 +191,6 @@ export class DynamicShader extends WebGlCoreShader {
     this.effects = shader.effects as Array<
       InstanceType<EffectMap[keyof EffectMap]>
     >;
-
-    this.calculateProps = memize(this.calculateProps.bind(this));
   }
 
   override bindTextures(textures: WebGlCoreCtxTexture[]) {
@@ -140,34 +199,29 @@ export class DynamicShader extends WebGlCoreShader {
     glw.bindTexture(textures[0]!.ctxTexture);
   }
 
-  private calculateProps(effects: EffectDesc[]) {
-    const regEffects = this.renderer.shManager.getRegisteredEffects();
-    const results: { name: string; value: unknown }[] = [];
-    effects?.forEach((eff, index) => {
-      const effect = this.effects[index]!;
-      const fxClass = regEffects[effect.name as keyof EffectMap]!;
-      const props = eff.props ?? {};
-      const uniInfo = effect.uniformInfo;
-      Object.keys(props).forEach((p) => {
-        const fxProp = fxClass.uniforms[p]!;
-        const propInfo = uniInfo[p]!;
-        let value = fxProp.validator
-          ? fxProp.validator(props[p], props)
-          : props[p];
-        if (Array.isArray(value)) {
-          value = new Float32Array(value);
-        }
-        results.push({ name: propInfo.name, value });
-      });
-    });
-    return results;
-  }
-
   protected override bindProps(props: Required<DynamicShaderProps>): void {
-    const results = this.calculateProps(props.effects);
-    results.forEach((r) => {
-      this.setUniform(r.name, r.value);
-    });
+    const effects = props.effects;
+    const effectsL = effects.length;
+    let i = 0;
+    for (; i < effectsL; i++) {
+      const effect = effects[i]! as Record<string, any>;
+      const uniformInfo = this.effects[i]!.uniformInfo;
+      const propKeys = Object.keys(effect.props);
+      const propsLength = propKeys.length;
+      let j = 0;
+      for (; j < propsLength; j++) {
+        const key = propKeys[j]!;
+        const prop = effect.props[key]!;
+        if (prop.updateOnBind === true) {
+          const uniform =
+            this.renderer.shManager.getRegisteredEffects()[
+              effect.type as keyof EffectMap
+            ]?.uniforms[key];
+          uniform?.updateProgramValue!(effect.props[key], props);
+        }
+        this.setUniform(uniformInfo[key]!.name, effect.props[key].programValue);
+      }
+    }
   }
 
   override canBatchShaderProps(
@@ -192,7 +246,8 @@ export class DynamicShader extends WebGlCoreShader {
       for (const key in effectA.props) {
         if (
           (effectB.props && !effectB.props[key]) ||
-          effectA.props[key] !== effectB.props![key]
+          (effectA.props[key] as ShaderEffectValueMap).value !==
+            (effectB.props[key] as ShaderEffectValueMap).value
         ) {
           return false;
         }
@@ -396,8 +451,12 @@ export class DynamicShader extends WebGlCoreShader {
     props: DynamicShaderProps,
     effectContructors?: Partial<EffectMap>,
   ): Required<DynamicShaderProps> {
+    assertTruthy(effectContructors);
     return {
-      effects: getResolvedEffect(props.effects, effectContructors),
+      effects: getResolvedEffect(
+        props.effects ?? [],
+        effectContructors,
+      ) as EffectDescUnion[],
       $dimensions: {
         width: 0,
         height: 0,

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

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import { updateShaderEffectColor } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
@@ -69,7 +69,7 @@ export class BorderBottomEffect extends ShaderEffect {
     },
     color: {
       value: 0xffffffff,
-      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      updateProgramValue: updateShaderEffectColor,
       method: 'uniform4fv',
       type: 'vec4',
     },

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

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import { updateShaderEffectColor } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
@@ -69,7 +69,7 @@ export class BorderEffect extends ShaderEffect {
     },
     color: {
       value: 0xffffffff,
-      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      updateProgramValue: updateShaderEffectColor,
       method: 'uniform4fv',
       type: 'vec4',
     },

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

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import { updateShaderEffectColor } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
@@ -69,7 +69,7 @@ export class BorderLeftEffect extends ShaderEffect {
     },
     color: {
       value: 0xffffffff,
-      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      updateProgramValue: updateShaderEffectColor,
       method: 'uniform4fv',
       type: 'vec4',
     },

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

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import { updateShaderEffectColor } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
@@ -69,7 +69,7 @@ export class BorderRightEffect extends ShaderEffect {
     },
     color: {
       value: 0xffffffff,
-      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      updateProgramValue: updateShaderEffectColor,
       method: 'uniform4fv',
       type: 'vec4',
     },

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

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import { updateShaderEffectColor } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
@@ -69,7 +69,7 @@ export class BorderTopEffect extends ShaderEffect {
     },
     color: {
       value: 0xffffffff,
-      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      updateProgramValue: updateShaderEffectColor,
       method: 'uniform4fv',
       type: 'vec4',
     },

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

@@ -1,3 +1,6 @@
+import type { DynamicShaderProps } from '../DynamicShader.js';
+import type { ShaderEffectValueMap } from './ShaderEffect.js';
+
 /*
  * If not stated otherwise in this file or this component's LICENSE file the
  * following copyright and licenses apply:
@@ -18,9 +21,11 @@
  */
 export const colorToFloat32Array = (argb: number) => {
   const col = getRgbaComponentsNormalized(argb);
-  col[0] *= col[3]!;
-  col[1] *= col[3]!;
-  col[2] *= col[3]!;
+  /* eslint-disable @typescript-eslint/no-non-null-assertion -- getRgbaComponentsNormalized has a constant array size */
+  col[0]! *= col[3]!;
+  col[1]! *= col[3]!;
+  col[2]! *= col[3]!;
+  /* eslint-enable */
   return col;
 };
 
@@ -31,3 +36,124 @@ const getRgbaComponentsNormalized = (argb: number): number[] => {
   const a = (argb / 16777216) | 0;
   return [r / 255, g / 255, b / 255, a / 255];
 };
+
+export const updateShaderEffectColor = (values: ShaderEffectValueMap) => {
+  if (values.programValue === undefined) {
+    values.programValue = new Float32Array(4);
+  }
+  const rgba = values.value as number;
+  const floatArray = values.programValue as Float32Array;
+  floatArray[0] = (rgba >>> 24) / 255;
+  floatArray[1] = ((rgba >>> 16) & 0xff) / 255;
+  floatArray[2] = ((rgba >>> 8) & 0xff) / 255;
+  floatArray[3] = (rgba & 0xff) / 255;
+};
+
+export const updateFloat32ArrayLength2 = (values: ShaderEffectValueMap) => {
+  const validatedValue = (values.validatedValue || values.value) as number[];
+  if (values.programValue instanceof Float32Array) {
+    const floatArray = values.programValue;
+    floatArray[0] = validatedValue[0]!;
+    floatArray[1] = validatedValue[1]!;
+  } else {
+    values.programValue = new Float32Array(validatedValue);
+  }
+};
+
+export const updateFloat32ArrayLength4 = (values: ShaderEffectValueMap) => {
+  const validatedValue = (values.validatedValue || values.value) as number[];
+  if (values.programValue instanceof Float32Array) {
+    const floatArray = values.programValue;
+    floatArray[0] = validatedValue[0]!;
+    floatArray[1] = validatedValue[1]!;
+    floatArray[2] = validatedValue[1]!;
+    floatArray[3] = validatedValue[1]!;
+  } else {
+    values.programValue = new Float32Array(validatedValue);
+  }
+};
+
+export const updateFloat32ArrayLengthN = (values: ShaderEffectValueMap) => {
+  const validatedValue = (values.validatedValue || values.value) as number[];
+  if (values.programValue instanceof Float32Array) {
+    const len = validatedValue.length;
+    const programValue = values.programValue;
+    for (let i = 0; i < len; i++) {
+      programValue[i] = validatedValue[i]!;
+    }
+  } else {
+    values.programValue = new Float32Array(validatedValue);
+  }
+};
+
+export const validateArrayLength4 = (value: number | number[]): number[] => {
+  const isArray = Array.isArray(value);
+  if (!isArray) {
+    return [value, value, value, value];
+  } else if (isArray && value.length === 4) {
+    return value;
+  } else if (isArray && value.length === 2) {
+    return [value[0]!, value[1]!, value[0]!, value[1]!];
+  } else if (isArray && value.length === 3) {
+    return [value[0]!, value[1]!, value[2]!, value[0]!];
+  }
+  return [value[0]!, value[0]!, value[0]!, value[0]!];
+};
+
+export const updateWebSafeRadius = (
+  values: ShaderEffectValueMap,
+  shaderProps?: DynamicShaderProps,
+) => {
+  if (values.programValue === undefined) {
+    values.programValue = new Float32Array(4);
+  }
+  const programValue = values.programValue as Float32Array;
+  const validatedValue = (values.validatedValue || values.value) as number[];
+  if (shaderProps === undefined && values.$dimensions === undefined) {
+    programValue[0] = validatedValue[0]!;
+    programValue[1] = validatedValue[1]!;
+    programValue[2] = validatedValue[2]!;
+    programValue[3] = validatedValue[3]!;
+    return;
+  }
+
+  let storedDimensions = values.$dimensions;
+  if (shaderProps !== undefined) {
+    const { $dimensions } = shaderProps;
+    if (
+      storedDimensions !== undefined &&
+      (storedDimensions.width === $dimensions!.width ||
+        storedDimensions.height === $dimensions!.height)
+    ) {
+      return;
+    }
+    if (storedDimensions === undefined) {
+      storedDimensions = {
+        width: $dimensions?.width as number,
+        height: $dimensions?.height as number,
+      };
+      values.$dimensions = storedDimensions;
+    }
+  }
+
+  const { width, height } = storedDimensions!;
+  const [r0, r1, r2, r3] = validatedValue;
+  const factor = Math.min(
+    Math.min(
+      Math.min(
+        width / Math.max(width, r0! + r1!),
+        width / Math.max(width, r2! + r3!),
+      ),
+      Math.min(
+        height / Math.max(height, r0! + r2!),
+        height / Math.max(height, r1! + r3!),
+      ),
+    ),
+    1,
+  );
+
+  programValue[0] = r0! * factor;
+  programValue[1] = r1! * factor;
+  programValue[2] = r2! * factor;
+  programValue[3] = r3! * factor;
+};