@actis/core 26.3.0

package/dist/index.mjs

@@ -0,0 +1,340 @@
+//#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
+export { Pass, Shader, WebGLRenderer };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@actis/core",
+  "type": "module",
+  "version": "26.3.0",
+  "description": "A versatile WebGL renderer designed with multipass support in mind.",
+  "author": "Leandro Peres <leandroperes@protonmail.com>",
+  "license": "GPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SOHNE/Actis.git",
+    "directory": "packages-engine/core"
+  },
+  "bugs": {
+    "url": "https://github.com/SOHNE/Actis/issues"
+  },
+  "keywords": [
+    "shader",
+    "glsl",
+    "multipass",
+    "webgl",
+    "canvas",
+    "actis"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/webgl2": "^0.0.12",
+    "tsdown": "^0.21.7",
+    "tslib": "^2.8.1",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}