@actis/core 26.3.0

package/README.md

@@ -0,0 +1,129 @@
+# SOHNE | Actis
+
+[![NPM version][npm-image]][npm-url]
+[![PR Welcome][npm-downloads-image]][npm-downloads-url]
+
+`Actis` is a lightweight WebGL rendering library designed to make it easy to work with WebGL fragment shaders, passes, and textures. It integrates seamlessly with React for modern web development.
+
+## Features
+
+- Simple API for setting up WebGL rendering contexts
+- Support for multiple rendering passes and shaders
+- Integration with React for easy use in web applications
+
+## Installation
+
+You can install `Actis` via npm:
+
+```bash
+npm install @actis/core
+```
+
+or via yarn:
+
+```bash
+yarn add @actis/core
+```
+
+## Usage
+
+### Basic Usage
+
+Here's a simple example to get you started:
+
+```tsx
+import WebGLRenderer from '@actis/core'
+import React, { useEffect, useRef } from 'react'
+
+// Main React functional component
+function App() {
+  const canvasRef = useRef<HTMLCanvasElement>(null) // Reference to the canvas element
+  const rendererRef = useRef<WebGLRenderer>() // Reference to the WebGL renderer
+
+  useEffect(() => {
+    rendererRef.current = new WebGLRenderer(canvasRef.current) // Initialize the renderer with the canvas element
+    const passes = {
+      passes: [
+        {
+          name: 'bufferA',
+          fragmentShader: `
+            #ifdef GL_ES
+            precision mediump float;
+            #endif
+
+            uniform vec2 u_resolution;
+            uniform float u_time;
+            uniform vec2 u_mouse;
+
+            float sdCircle(in vec2 p, in float r) {
+              return length(p) - r;
+            }
+
+            void main() {
+              vec2 p = (2. * gl_FragCoord.xy - u_resolution.xy) / u_resolution.y;
+              vec2 m = (2. * u_mouse.xy - u_resolution.xy) / u_resolution.y;
+              vec3 color = vec3(.0);
+              float d = sdCircle(p - m, .125);
+              color = mix(color, vec3(1.), 1.0 - smoothstep(0.0, 0.01, d));
+              gl_FragColor = vec4(color, 1.);
+            }
+          `,
+          textures: [],
+        },
+        {
+          name: 'bufferB',
+          fragmentShader: `
+            precision highp float;
+            uniform sampler2D u_texture0;
+            uniform vec2 u_resolution;
+            void main() {
+              vec2 uv = gl_FragCoord.xy / u_resolution;
+              vec4 color = texture2D(u_texture0, uv);
+              float smoothValue = smoothstep(0.0, 1.0, color.r);
+              gl_FragColor = vec4(smoothValue, 0.0, 0.0, 1.0);
+            }
+          `,
+          textures: ['bufferA'],
+        },
+        {
+          name: 'MainBuffer',
+          fragmentShader: `
+            precision highp float;
+            uniform sampler2D u_texture0;
+            uniform vec2 u_resolution;
+            void main() {
+              vec2 uv = gl_FragCoord.xy / u_resolution;
+              vec4 color = texture2D(u_texture0, uv);
+              gl_FragColor = color;
+            }
+          `,
+          textures: ['bufferB'],
+        },
+      ],
+      textures: [],
+    }
+    rendererRef.current.setup(passes) // Setup the renderer with the passes
+    requestAnimationFrame(rendererRef.current.render) // Start the rendering loop
+  }, [])
+
+  // Render the canvas element
+  return <canvas ref={canvasRef} width={800} height={600} />
+}
+
+export default App
+```
+
+### Advanced Usage
+
+For more advanced usage, such as adding multiple passes and using textures, refer to the [API documentation](#advanced-usage) ~in a near future~.
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request on GitHub.
+
+[//]: (Externals)
+[npm-image]: https://img.shields.io/npm/v/@actis/core.svg?style=flat-square&logo=npm
+[npm-url]: https://npmjs.org/package/@actis/core
+[npm-downloads-image]: https://img.shields.io/npm/dm/@actis/core.svg
+[npm-downloads-url]: https://npmcharts.com/compare/@actis/core?minimal=true
+[//]: (EOF)

package/dist/index.cjs

@@ -0,0 +1,343 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/pass/Pass.ts
+/**
+* Represents a render pass in the WebGL pipeline.
+* Responsible for managing framebuffer, texture, and draw calls for a single pass.
+*/
+var Pass = class {
+	constructor(gl, shader, width, height, offscreen = true, textures = []) {
+		this.gl = gl;
+		this.shader = shader;
+		this.width = width;
+		this.height = height;
+		this.texture = this.createTexture();
+		this.framebuffer = this.createFramebuffer(this.texture);
+		this.next = null;
+		this.offscreen = offscreen;
+		this.textures = textures;
+		this.positionAttributeLocation = this.shader.getAttribLocation("a_position");
+		this.positionBuffer = this.createPositionBuffer();
+	}
+	use() {
+		this.shader.use();
+		if (this.offscreen) {
+			this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+			this.gl.viewport(0, 0, this.width, this.height);
+		} else {
+			this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+			this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+		}
+	}
+	resize(width, height) {
+		this.width = width;
+		this.height = height;
+		if (this.offscreen) {
+			this.texture = this.createTexture();
+			this.framebuffer = this.createFramebuffer(this.texture);
+		}
+	}
+	draw() {
+		const positions = new Float32Array([
+			-1,
+			-1,
+			1,
+			-1,
+			-1,
+			1,
+			-1,
+			1,
+			1,
+			-1,
+			1,
+			1
+		]);
+		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
+		this.gl.enableVertexAttribArray(this.positionAttributeLocation);
+		this.gl.vertexAttribPointer(this.positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);
+		this.textures.forEach((texture, index) => {
+			this.gl.activeTexture(this.gl.TEXTURE0 + index);
+			this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+			this.shader.setUniform(`u_texture${index}`, "1i", index);
+		});
+		this.gl.drawArrays(this.gl.TRIANGLES, 0, positions.length / 2);
+	}
+	createTexture() {
+		const texture = this.gl.createTexture();
+		this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+		this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.width, this.height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
+		return texture;
+	}
+	createFramebuffer(texture) {
+		const framebuffer = this.gl.createFramebuffer();
+		this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
+		this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, texture, 0);
+		this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+		return framebuffer;
+	}
+	createPositionBuffer() {
+		const buffer = this.gl.createBuffer();
+		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+		return buffer;
+	}
+};
+//#endregion
+//#region src/shader/Shader.ts
+const ERROR_LOG_REGEX = /ERROR: 0:(\d+): (.*)(?=\n|$)/;
+/**
+* Compiles and manages a WebGL shader program.
+* Responsible for compiling, linking, and providing access to uniforms and attributes.
+*/
+var Shader = class {
+	constructor(gl, vertexSource, fragmentSource, onError, passName) {
+		this.gl = gl;
+		this.onError = onError;
+		this.passName = passName;
+		this.uniformLocations = /* @__PURE__ */ new Map();
+		const vertexShader = this.compileShader(vertexSource || this.defaultVertexShader(), gl.VERTEX_SHADER);
+		const fragmentShader = this.compileShader(fragmentSource, gl.FRAGMENT_SHADER);
+		this.program = this.linkProgram(vertexShader, fragmentShader);
+	}
+	compileShader(source, type) {
+		const shader = this.gl.createShader(type);
+		if (!shader) throw new Error("Failed to create shader");
+		this.gl.shaderSource(shader, source);
+		this.gl.compileShader(shader);
+		if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+			const log = this.gl.getShaderInfoLog(shader);
+			this.gl.deleteShader(shader);
+			const coords = this.extractErrorCoords(log || "");
+			this.onError({
+				passName: this.passName,
+				coords
+			});
+			throw new Error(`Failed to compile shader: ${log}`);
+		}
+		return shader;
+	}
+	extractErrorCoords(log) {
+		const match = ERROR_LOG_REGEX.exec(log);
+		if (match) return {
+			line: Number.parseInt(match[1], 10),
+			message: match[2]
+		};
+		return {
+			line: 0,
+			message: ""
+		};
+	}
+	linkProgram(vertexShader, fragmentShader) {
+		const program = this.gl.createProgram();
+		if (!program) throw new Error("Failed to create program");
+		if (vertexShader) this.gl.attachShader(program, vertexShader);
+		this.gl.attachShader(program, fragmentShader);
+		this.gl.linkProgram(program);
+		if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+			const log = this.gl.getProgramInfoLog(program);
+			this.gl.deleteProgram(program);
+			throw new Error(`Failed to link program: ${log}`);
+		}
+		return program;
+	}
+	use() {
+		this.gl.useProgram(this.program);
+	}
+	setUniform(name, type, ...values) {
+		let location = this.uniformLocations.get(name);
+		if (!location) {
+			location = this.gl.getUniformLocation(this.program, name);
+			this.uniformLocations.set(name, location);
+		}
+		switch (type) {
+			case "1f":
+				this.gl.uniform1f(location, values[0]);
+				break;
+			case "1i":
+				this.gl.uniform1i(location, values[0]);
+				break;
+			case "2fv":
+				this.gl.uniform2fv(location, values[0]);
+				break;
+			case "3fv":
+				this.gl.uniform3fv(location, values[0]);
+				break;
+			case "4fv":
+				this.gl.uniform4fv(location, values[0]);
+				break;
+		}
+	}
+	getAttribLocation(name) {
+		return this.gl.getAttribLocation(this.program, name);
+	}
+	defaultVertexShader() {
+		return `
+      attribute vec4 a_position;
+      void main() {
+        gl_Position = a_position;
+      }`;
+	}
+};
+//#endregion
+//#region src/engine/WebGLRenderer.ts
+/**
+* Renderer class responsible for managing the WebGL context, render passes, and animation loop.
+*/
+var WebGLRenderer = class {
+	constructor(canvas, onError) {
+		this.canvas = canvas;
+		this.animationRequestID = -1;
+		this.gl = this.initializeWebGLContext(canvas);
+		this.passes = null;
+		this.textureMap = /* @__PURE__ */ new Map();
+		this.now = /* @__PURE__ */ new Date();
+		this.onError = onError;
+		this.mouseX = 0;
+		this.mouseY = 0;
+		this.time = 0;
+		this.timeDelta = 0;
+		this.realToCSSPixels = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+		this.paused = false;
+		this.playbackTime = 0;
+		this.lastTime = 0;
+		this.frameRate = 0;
+		this.currentFrame = 0;
+		this.currentTime = 0;
+		this.startTime = 0;
+		this.initMouseEvents();
+		if (typeof window !== "undefined") window.addEventListener("resize", this.resizeCanvasToDisplaySize.bind(this));
+	}
+	initializeWebGLContext(canvas) {
+		const opts = {
+			alpha: false,
+			depth: false,
+			stencil: false,
+			premultipliedAlpha: false,
+			antialias: false,
+			preserveDrawingBuffer: true,
+			powerPreference: "high-performance"
+		};
+		const gl = canvas.getContext("webgl2", opts) || canvas.getContext("experimental-webgl2", opts) || canvas.getContext("webgl", opts) || canvas.getContext("experimental-webgl", opts);
+		if (!gl) throw new Error("WebGL not supported");
+		return gl;
+	}
+	initMouseEvents() {
+		this.canvas.addEventListener("mousemove", this.setMousePosition.bind(this));
+		this.canvas.addEventListener("touchstart", this.preventDefault, { passive: false });
+		this.canvas.addEventListener("touchmove", this.handleTouchMove.bind(this), { passive: false });
+	}
+	setMousePosition(e) {
+		const mouse = {
+			x: e.clientX || e.pageX,
+			y: e.clientY || e.pageY
+		};
+		const rect = this.canvas.getBoundingClientRect();
+		if (mouse.x >= rect.left && mouse.x <= rect.right && mouse.y >= rect.top && mouse.y <= rect.bottom) {
+			this.mouseX = (mouse.x - rect.left) * this.realToCSSPixels;
+			this.mouseY = this.canvas.height - (mouse.y - rect.top) * this.realToCSSPixels;
+		}
+	}
+	handleTouchMove(e) {
+		e.preventDefault();
+		if (e.touches.length > 0) this.setMousePosition(e.touches[0]);
+	}
+	preventDefault(e) {
+		e.preventDefault();
+	}
+	addPass(pass) {
+		if (this.passes) {
+			let current = this.passes;
+			while (current.next) current = current.next;
+			current.next = pass;
+		} else this.passes = pass;
+	}
+	resizeCanvasToDisplaySize() {
+		const displayWidth = Math.floor(this.canvas.clientWidth * this.realToCSSPixels);
+		const displayHeight = Math.floor(this.canvas.clientHeight * this.realToCSSPixels);
+		if (this.canvas.width !== displayWidth || this.canvas.height !== displayHeight) {
+			this.canvas.width = displayWidth;
+			this.canvas.height = displayHeight;
+			let current = this.passes;
+			while (current) {
+				current.resize(displayWidth, displayHeight);
+				current = current.next;
+			}
+		}
+	}
+	updateUniforms(pass) {
+		pass.shader.setUniform("u_date", "4fv", [
+			this.now.getFullYear(),
+			this.now.getMonth() + 1,
+			this.now.getDate(),
+			this.now.getHours() * 3600 + this.now.getMinutes() * 60 + this.now.getSeconds() + this.now.getMilliseconds() / 1e3
+		]);
+		pass.shader.setUniform("u_frame", "1i", this.currentFrame);
+		pass.shader.setUniform("u_time", "1f", this.currentTime);
+		pass.shader.setUniform("u_timeDelta", "1f", this.timeDelta);
+		pass.shader.setUniform("u_frameRate", "1f", this.frameRate);
+		pass.shader.setUniform("u_resolution", "2fv", [pass.width, pass.height]);
+		pass.shader.setUniform("u_mouse", "2fv", [this.mouseX, this.mouseY]);
+	}
+	updateTime(currentTime) {
+		if (this.paused) {
+			this.timeDelta = 0;
+			return;
+		}
+		const t = currentTime ?? (typeof performance !== "undefined" ? performance.now() : Date.now());
+		if (this.startTime === 0) this.startTime = t;
+		if (this.lastTime === 0) this.lastTime = t;
+		this.timeDelta = (t - this.startTime) / 1e3;
+		this.currentTime += this.timeDelta;
+		this.frameRate = 1 / this.timeDelta;
+		this.currentFrame++;
+		this.startTime = t;
+	}
+	render(currentTime) {
+		this.updateTime(currentTime);
+		this.resizeCanvasToDisplaySize();
+		let current = this.passes;
+		while (current) {
+			current.use();
+			this.updateUniforms(current);
+			current.draw();
+			current = current.next;
+		}
+		if (typeof requestAnimationFrame !== "undefined") this.animationRequestID = requestAnimationFrame(this.render.bind(this));
+	}
+	setup(config) {
+		const displayWidth = Math.floor(this.canvas.clientWidth * this.realToCSSPixels);
+		const displayHeight = Math.floor(this.canvas.clientHeight * this.realToCSSPixels);
+		config.passes.forEach((passConfig) => {
+			try {
+				const shader = new Shader(this.gl, passConfig.vertexShader, passConfig.fragmentShader, this.onError, passConfig.name);
+				const offscreen = passConfig.offscreen || passConfig.name !== "MainBuffer";
+				const pass = new Pass(this.gl, shader, displayWidth, displayHeight, offscreen, passConfig.textures.map((textureName) => this.textureMap.get(textureName)));
+				this.addPass(pass);
+				this.textureMap.set(passConfig.name, pass.texture);
+			} catch (error) {
+				console.error(`Error in pass ${passConfig.name}: ${error.message}`);
+			}
+		});
+	}
+	play() {
+		this.paused = false;
+		this.animationRequestID = requestAnimationFrame(this.render.bind(this));
+	}
+	pause() {
+		this.paused = true;
+		cancelAnimationFrame(this.animationRequestID);
+	}
+	reset() {
+		this.playbackTime = 0;
+		this.currentFrame = 0;
+		this.lastTime = 0;
+		this.frameRate = 0;
+	}
+};
+//#endregion
+exports.Pass = Pass;
+exports.Shader = Shader;
+exports.WebGLRenderer = WebGLRenderer;

package/dist/index.d.cts

@@ -0,0 +1,117 @@
+//#region src/types/renderer.d.ts
+type PassConfig = {
+  name: string;
+  fragmentShader: string;
+  vertexShader?: string;
+  offscreen?: boolean;
+  textures: string[];
+};
+type RendererConfig = {
+  passes: PassConfig[];
+};
+//#endregion
+//#region src/types/shader.d.ts
+type ShaderError = {
+  passName: string;
+  coords: {
+    line: number;
+    message: string;
+  };
+};
+type UniformType = '1f' | '1i' | '2fv' | '3fv' | '4fv';
+//#endregion
+//#region src/shader/Shader.d.ts
+/**
+ * Compiles and manages a WebGL shader program.
+ * Responsible for compiling, linking, and providing access to uniforms and attributes.
+ */
+declare class Shader {
+  private gl;
+  private program;
+  private uniformLocations;
+  private onError;
+  private passName;
+  constructor(gl: WebGLRenderingContext, vertexSource: string | undefined, fragmentSource: string, onError: (details: ShaderError) => void, passName: string);
+  private compileShader;
+  private extractErrorCoords;
+  private linkProgram;
+  use(): void;
+  setUniform(name: string, type: UniformType, ...values: any[]): void;
+  getAttribLocation(name: string): number;
+  private defaultVertexShader;
+}
+//#endregion
+//#region src/pass/Pass.d.ts
+/**
+ * Represents a render pass in the WebGL pipeline.
+ * Responsible for managing framebuffer, texture, and draw calls for a single pass.
+ */
+declare class Pass {
+  gl: WebGLRenderingContext;
+  shader: Shader;
+  width: number;
+  height: number;
+  texture: WebGLTexture;
+  framebuffer: WebGLFramebuffer;
+  next: Pass | null;
+  offscreen: boolean;
+  textures: WebGLTexture[];
+  positionBuffer: WebGLBuffer;
+  positionAttributeLocation: number;
+  constructor(gl: WebGLRenderingContext, shader: Shader, width: number, height: number, offscreen?: boolean, textures?: WebGLTexture[]);
+  use(): void;
+  resize(width: number, height: number): void;
+  draw(): void;
+  private createTexture;
+  private createFramebuffer;
+  private createPositionBuffer;
+}
+//#endregion
+//#region src/engine/WebGLRenderer.d.ts
+/**
+ * Renderer class responsible for managing the WebGL context, render passes, and animation loop.
+ */
+declare class WebGLRenderer {
+  private gl;
+  private passes;
+  private canvas;
+  private animationRequestID;
+  private textureMap;
+  private now;
+  private onError;
+  mouseX: number;
+  mouseY: number;
+  time: number;
+  timeDelta: number;
+  realToCSSPixels: number;
+  paused: boolean;
+  playbackTime: number;
+  lastTime: number;
+  frameRate: number;
+  currentFrame: number;
+  currentTime: number;
+  startTime: number;
+  constructor(canvas: HTMLCanvasElement, onError: (details: {
+    passName: string;
+    coords: {
+      line: number;
+      message: string;
+    };
+  }) => void);
+  private initializeWebGLContext;
+  private initMouseEvents;
+  private setMousePosition;
+  private handleTouchMove;
+  private preventDefault;
+  addPass(pass: Pass): void;
+  private resizeCanvasToDisplaySize;
+  private updateUniforms;
+  private updateTime;
+  render(currentTime: number): void;
+  setup(config: RendererConfig): void;
+  play(): void;
+  pause(): void;
+  reset(): void;
+}
+//#endregion
+export { Pass, type PassConfig, type RendererConfig, Shader, WebGLRenderer };

package/dist/index.d.mts

@@ -0,0 +1,117 @@
+//#region src/types/renderer.d.ts
+type PassConfig = {
+  name: string;
+  fragmentShader: string;
+  vertexShader?: string;
+  offscreen?: boolean;
+  textures: string[];
+};
+type RendererConfig = {
+  passes: PassConfig[];
+};
+//#endregion
+//#region src/types/shader.d.ts
+type ShaderError = {
+  passName: string;
+  coords: {
+    line: number;
+    message: string;
+  };
+};
+type UniformType = '1f' | '1i' | '2fv' | '3fv' | '4fv';
+//#endregion
+//#region src/shader/Shader.d.ts
+/**
+ * Compiles and manages a WebGL shader program.
+ * Responsible for compiling, linking, and providing access to uniforms and attributes.
+ */
+declare class Shader {
+  private gl;
+  private program;
+  private uniformLocations;
+  private onError;
+  private passName;
+  constructor(gl: WebGLRenderingContext, vertexSource: string | undefined, fragmentSource: string, onError: (details: ShaderError) => void, passName: string);
+  private compileShader;
+  private extractErrorCoords;
+  private linkProgram;
+  use(): void;
+  setUniform(name: string, type: UniformType, ...values: any[]): void;
+  getAttribLocation(name: string): number;
+  private defaultVertexShader;
+}
+//#endregion
+//#region src/pass/Pass.d.ts
+/**
+ * Represents a render pass in the WebGL pipeline.
+ * Responsible for managing framebuffer, texture, and draw calls for a single pass.
+ */
+declare class Pass {
+  gl: WebGLRenderingContext;
+  shader: Shader;
+  width: number;
+  height: number;
+  texture: WebGLTexture;
+  framebuffer: WebGLFramebuffer;
+  next: Pass | null;
+  offscreen: boolean;
+  textures: WebGLTexture[];
+  positionBuffer: WebGLBuffer;
+  positionAttributeLocation: number;
+  constructor(gl: WebGLRenderingContext, shader: Shader, width: number, height: number, offscreen?: boolean, textures?: WebGLTexture[]);
+  use(): void;
+  resize(width: number, height: number): void;
+  draw(): void;
+  private createTexture;
+  private createFramebuffer;
+  private createPositionBuffer;
+}
+//#endregion
+//#region src/engine/WebGLRenderer.d.ts
+/**
+ * Renderer class responsible for managing the WebGL context, render passes, and animation loop.
+ */
+declare class WebGLRenderer {
+  private gl;
+  private passes;
+  private canvas;
+  private animationRequestID;
+  private textureMap;
+  private now;
+  private onError;
+  mouseX: number;
+  mouseY: number;
+  time: number;
+  timeDelta: number;
+  realToCSSPixels: number;
+  paused: boolean;
+  playbackTime: number;
+  lastTime: number;
+  frameRate: number;
+  currentFrame: number;
+  currentTime: number;
+  startTime: number;
+  constructor(canvas: HTMLCanvasElement, onError: (details: {
+    passName: string;
+    coords: {
+      line: number;
+      message: string;
+    };
+  }) => void);
+  private initializeWebGLContext;
+  private initMouseEvents;
+  private setMousePosition;
+  private handleTouchMove;
+  private preventDefault;
+  addPass(pass: Pass): void;
+  private resizeCanvasToDisplaySize;
+  private updateUniforms;
+  private updateTime;
+  render(currentTime: number): void;
+  setup(config: RendererConfig): void;
+  play(): void;
+  pause(): void;
+  reset(): void;
+}
+//#endregion
+export { Pass, type PassConfig, type RendererConfig, Shader, WebGLRenderer };