@lightningjs/renderer 2.12.1 → 3.0.0-beta1

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

@@ -0,0 +1,433 @@
+import type { CoreNode } from '../../CoreNode.js';
+import { getNormalizedRgbaComponents } from '../../lib/utils.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { Stage } from '../../Stage.js';
+import type { QuadOptions } from '../CoreRenderer.js';
+import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
+import type {
+  UniformCollection,
+  Vec2,
+  Vec3,
+  Vec4,
+} from './internal/ShaderUtils.js';
+import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { WebGlShaderProgram } from './WebGlShaderProgram.js';
+
+export type ShaderSource<T> =
+  | string
+  | ((renderer: WebGlRenderer, props: T) => string);
+
+/**
+ * This is the WebGL specific ShaderType @mixes CoreShaderType
+ */
+export type WebGlShaderType<T extends object = Record<string, unknown>> =
+  CoreShaderType<T> & {
+    /**
+     * fragment shader source for WebGl or WebGl2
+     */
+    fragment: ShaderSource<T>;
+    /**
+     * vertex shader source for WebGl or WebGl2
+     */
+    vertex?: ShaderSource<T>;
+    /**
+     * This function is called when one of the props is changed, here you can update the uniforms you use in the fragment / vertex shader.
+     * @param node WebGlContextWrapper with utilities to update uniforms, and other actions.
+     */
+    update?: (this: WebGlShaderNode<T>, node: CoreNode) => void;
+
+    /**
+     * only used for SDF shader, will be removed in the future.
+     *
+     * @warning don't use this in your shader type
+     */
+    onSdfBind?: (this: WebGlContextWrapper, props: T) => void;
+    /**
+     * This function is used to check if the shader can be reused based on quad info
+     * @param props
+     */
+    canBatch?: (renderOpA: QuadOptions, renderOpB: QuadOptions) => boolean;
+    /**
+     * extensions required for specific shader?
+     */
+    webgl1Extensions?: string[];
+    webgl2Extensions?: string[];
+    supportsIndexedTextures?: boolean;
+  };
+
+export class WebGlShaderNode<
+  Props extends object = Record<string, unknown>,
+> extends CoreShaderNode<Props> {
+  readonly program: WebGlShaderProgram;
+  private updater: ((node: CoreNode, props?: Props) => void) | undefined =
+    undefined;
+  private valueKey: string = '';
+  uniforms: UniformCollection = {
+    single: {},
+    vec2: {},
+    vec3: {},
+    vec4: {},
+  };
+
+  constructor(
+    shaderKey: string,
+    config: WebGlShaderType<Props>,
+    program: WebGlShaderProgram,
+    stage: Stage,
+    props?: Props,
+  ) {
+    super(shaderKey, config, stage, props);
+    this.program = program;
+    if (config.update !== undefined) {
+      this.updater = config.update!;
+
+      this.update = () => {
+        if (this.props === undefined) {
+          this.updater!(this.node as CoreNode, this.props);
+          return;
+        }
+        const prevKey = this.valueKey;
+        this.valueKey = '';
+        for (const key in this.resolvedProps) {
+          this.valueKey += `${key}:${this.resolvedProps[key]!};`;
+        }
+
+        if (prevKey === this.valueKey) {
+          return;
+        }
+
+        if (prevKey.length > 0) {
+          this.stage.shManager.mutateShaderValueUsage(prevKey, -1);
+        }
+
+        const values = this.stage.shManager.getShaderValues(
+          this.valueKey,
+        ) as unknown as UniformCollection;
+        if (values !== undefined) {
+          this.uniforms = values;
+          return;
+        }
+        //create empty uniform collection when calculating new values
+        this.uniforms = {
+          single: {},
+          vec2: {},
+          vec3: {},
+          vec4: {},
+        };
+        this.updater!(this.node as CoreNode);
+        this.stage.shManager.setShaderValues(
+          this.valueKey,
+          this.uniforms as unknown as Record<string, unknown>,
+        );
+      };
+    }
+  }
+
+  /**
+   * Sets the value of a RGBA variable
+   * @param location
+   * @param value
+   */
+  uniformRGBA(location: string, value: number) {
+    this.uniform4fv(
+      location,
+      new Float32Array(getNormalizedRgbaComponents(value)),
+    );
+  }
+
+  /**
+   * Sets the value of a single float uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The value to set.
+   */
+  uniform1f(location: string, value: number) {
+    this.uniforms.single[location] = {
+      method: 'uniform1f',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a float array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of values to set.
+   */
+  uniform1fv(location: string, value: Float32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniform1fv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a single integer uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The value to set.
+   */
+  uniform1i(location: string, value: number) {
+    this.uniforms.single[location] = {
+      method: 'uniform1i',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of an integer array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of values to set.
+   */
+  uniform1iv(location: string, value: Int32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniform1iv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a vec2 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   */
+  uniform2f(location: string, v0: number, v1: number) {
+    this.uniforms.vec2[location] = {
+      method: 'uniform2f',
+      value: [v0, v1],
+    };
+  }
+
+  /**
+   * Sets the value of a vec2 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec2 values to set as FloatArray.
+   */
+  uniform2fv(location: string, value: Float32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniform2fv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a vec2 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec2 values to set.
+   */
+  uniform2fa(location: string, value: Vec2) {
+    this.uniforms.vec2[location] = {
+      method: 'uniform2f',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a ivec2 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   */
+  uniform2i(location: string, v0: number, v1: number) {
+    this.uniforms.vec2[location] = {
+      method: 'uniform2i',
+      value: [v0, v1],
+    };
+  }
+
+  /**
+   * Sets the value of an ivec2 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of ivec2 values to set.
+   */
+  uniform2iv(location: string, value: Int32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniform2iv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a vec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   */
+  uniform3f(location: string, v0: number, v1: number, v2: number) {
+    this.uniforms.vec3[location] = {
+      method: 'uniform3f',
+      value: [v0, v1, v2],
+    };
+  }
+
+  /**
+   * Sets the value of a vec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param
+   */
+  uniform3fa(location: string, value: Vec3) {
+    this.uniforms.vec3[location] = {
+      method: 'uniform3f',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a vec3 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec3 values to set.
+   */
+  uniform3fv(location: string, value: Float32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniform3fv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a ivec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   */
+  uniform3i(location: string, v0: number, v1: number, v2: number) {
+    this.uniforms.vec3[location] = {
+      method: 'uniform3i',
+      value: [v0, v1, v2],
+    };
+  }
+
+  /**
+   * Sets the value of an ivec3 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of ivec3 values to set.
+   */
+  uniform3iv(location: string, value: Int32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniform3iv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a vec4 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   * @param v3 - The fourth component of the vector.
+   */
+  uniform4f(location: string, v0: number, v1: number, v2: number, v3: number) {
+    this.uniforms.vec4[location] = {
+      method: 'uniform4f',
+      value: [v0, v1, v2, v3],
+    };
+  }
+
+  /**
+   * Sets an array of numbers
+   * @param location The location of the uniform variable.
+   * @param value
+   */
+  uniform4fa(location: string, value: Vec4) {
+    this.uniforms.vec4[location] = {
+      method: 'uniform4f',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a vec4 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec4 values to set.
+   */
+  uniform4fv(location: string, value: Float32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniform4fv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a ivec4 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   * @param v3 - The fourth component of the vector.
+   */
+  uniform4i(location: string, v0: number, v1: number, v2: number, v3: number) {
+    this.uniforms.vec4[location] = {
+      method: 'uniform4i',
+      value: [v0, v1, v2, v3],
+    };
+  }
+
+  /**
+   * Sets the value of an ivec4 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of ivec4 values to set.
+   */
+  uniform4iv(location: string, value: Int32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniform4iv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a mat2 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param transpose - Whether to transpose the matrix.
+   * @param value - The array of mat2 values to set.
+   */
+  uniformMatrix2fv(location: string, value: Float32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniformMatrix2fv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a mat2 uniform variable.
+   * @param location - The location of the uniform variable.
+   * @param value - The array of mat2 values to set.
+   */
+  uniformMatrix3fv(location: string, value: Float32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniformMatrix3fv',
+      value,
+    };
+  }
+
+  /**
+   * Sets the value of a mat4 uniform variable.
+   * @param location - The location of the uniform variable.
+   * @param value - The array of mat4 values to set.
+   */
+  uniformMatrix4fv(location: string, value: Float32Array) {
+    this.uniforms.single[location] = {
+      method: 'uniformMatrix4fv',
+      value,
+    };
+  }
+}