aether-engine 1.0.0

package/src/renderer/WebGLRenderer.ts

@@ -0,0 +1,917 @@
+import { mat4 } from "gl-matrix";
+import { Camera } from "../components/Camera";
+import { MeshRenderer } from "../components/MeshRenderer";
+import { SkinnedMeshRenderer } from "../components/SkinnedMeshRenderer";
+import { SpriteRenderer } from "../components/SpriteRenderer";
+import { Transform } from "../components/Transform";
+import { GlobalAssets } from "../core/AssetManager";
+import { System } from "../ecs/System";
+import type { World } from "../ecs/World";
+import { LightingSystem } from "../systems/LightingSystem";
+import type { Material } from "./Material";
+import { Shader } from "./Shader";
+import { OcclusionMaterial } from "./OcclusionMaterial";
+import { ShadowCaster } from "../components/ShadowCaster";
+
+type CompiledShader = {
+	shader: Shader;
+	attribLocations: Record<string, number>;
+	uniformLocations: Record<string, WebGLUniformLocation>;
+};
+
+export class WebGLRenderer extends System {
+	private gl: WebGLRenderingContext;
+
+	private quadPositionBuffer: WebGLBuffer;
+	private quadTexCoordBuffer: WebGLBuffer;
+
+	private compiledShaders = new Map<string, CompiledShader>();
+	
+	private occlusionFBO: WebGLFramebuffer | null = null;
+	private occlusionTexture: WebGLTexture | null = null;
+	private occlusionMaterial: OcclusionMaterial;
+
+	constructor(world: World, canvas: HTMLCanvasElement) {
+		super(world);
+		const gl = canvas.getContext("webgl");
+		if (!gl) throw new Error("WebGL not supported");
+		this.gl = gl;
+
+		// Shared quad for sprites
+		this.quadPositionBuffer = gl.createBuffer()!;
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.quadPositionBuffer);
+		const positions = [
+			1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0,
+		];
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+		this.quadTexCoordBuffer = gl.createBuffer()!;
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.quadTexCoordBuffer);
+		const texcoords = [1.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0];
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoords), gl.STATIC_DRAW);
+
+		// Configure gl
+		gl.clearColor(0.005, 0.005, 0.015, 1.0);
+		gl.clearDepth(1.0);
+		gl.enable(gl.DEPTH_TEST);
+		gl.depthFunc(gl.LEQUAL);
+		gl.enable(gl.CULL_FACE);
+		gl.enable(gl.BLEND);
+		gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+		this.occlusionMaterial = new OcclusionMaterial();
+
+		this.resize(canvas.clientWidth, canvas.clientHeight);
+		window.addEventListener("resize", () => {
+			this.resize(canvas.clientWidth, canvas.clientHeight);
+		});
+	}
+
+	resize(width: number, height: number) {
+		this.gl.canvas.width = width;
+		this.gl.canvas.height = height;
+		this.gl.viewport(0, 0, width, height);
+		
+		if (!this.occlusionTexture) {
+			this.occlusionTexture = this.gl.createTexture()!;
+			this.gl.bindTexture(this.gl.TEXTURE_2D, this.occlusionTexture);
+			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.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.occlusionFBO = this.gl.createFramebuffer()!;
+			this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.occlusionFBO);
+			this.gl.framebufferTexture2D(
+				this.gl.FRAMEBUFFER,
+				this.gl.COLOR_ATTACHMENT0,
+				this.gl.TEXTURE_2D,
+				this.occlusionTexture,
+				0
+			);
+			this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+		}
+
+		this.gl.bindTexture(this.gl.TEXTURE_2D, this.occlusionTexture);
+		this.gl.texImage2D(
+			this.gl.TEXTURE_2D,
+			0,
+			this.gl.RGBA,
+			width,
+			height,
+			0,
+			this.gl.RGBA,
+			this.gl.UNSIGNED_BYTE,
+			null
+		);
+	}
+
+	private magentaTexture: WebGLTexture | null = null;
+	private getMagentaTexture(gl: WebGLRenderingContext): WebGLTexture {
+		if (this.magentaTexture) return this.magentaTexture;
+		this.magentaTexture = gl.createTexture()!;
+		gl.bindTexture(gl.TEXTURE_2D, this.magentaTexture);
+		const pixel = new Uint8Array([255, 0, 255, 255]);
+		gl.texImage2D(
+			gl.TEXTURE_2D,
+			0,
+			gl.RGBA,
+			1,
+			1,
+			0,
+			gl.RGBA,
+			gl.UNSIGNED_BYTE,
+			pixel,
+		);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+		return this.magentaTexture;
+	}
+
+	public updateTexture(
+		spriteRenderer: SpriteRenderer,
+		source: HTMLCanvasElement | HTMLImageElement,
+	) {
+		if (!this.gl) return;
+		const gl = this.gl;
+		if (!spriteRenderer.texture) {
+			spriteRenderer.texture = gl.createTexture() || undefined;
+		}
+		gl.bindTexture(gl.TEXTURE_2D, spriteRenderer.texture || null);
+		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+		spriteRenderer._loaded = true;
+	}
+
+	private getCompiledShader(material: Material): CompiledShader {
+		if (this.compiledShaders.has(material.programHash)) {
+			return this.compiledShaders.get(material.programHash)!;
+		}
+
+		const shader = new Shader(
+			this.gl,
+			material.vertexShader,
+			material.fragmentShader,
+		);
+		const gl = this.gl;
+
+		const attribLocations: Record<string, number> = {};
+		const numAttribs = gl.getProgramParameter(
+			shader.program,
+			gl.ACTIVE_ATTRIBUTES,
+		);
+		for (let i = 0; i < numAttribs; ++i) {
+			const info = gl.getActiveAttrib(shader.program, i);
+			if (info)
+				attribLocations[info.name] = gl.getAttribLocation(
+					shader.program,
+					info.name,
+				);
+		}
+
+		const uniformLocations: Record<string, WebGLUniformLocation> = {};
+		const numUniforms = gl.getProgramParameter(
+			shader.program,
+			gl.ACTIVE_UNIFORMS,
+		);
+		for (let i = 0; i < numUniforms; ++i) {
+			const info = gl.getActiveUniform(shader.program, i);
+			if (info) {
+				const loc = gl.getUniformLocation(shader.program, info.name)!;
+				uniformLocations[info.name] = loc;
+				const baseName = info.name.split("[")[0];
+				if (baseName !== info.name) {
+					uniformLocations[baseName] = loc;
+				}
+			}
+		}
+
+		const compiled: CompiledShader = {
+			shader,
+			attribLocations,
+			uniformLocations,
+		};
+		this.compiledShaders.set(material.programHash, compiled);
+		return compiled;
+	}
+
+	update(_dt: number): void {
+		const gl = this.gl;
+
+		let projectionMatrix = mat4.create();
+		const viewMatrix = mat4.create();
+
+		let cullBox: {
+			minX: number;
+			maxX: number;
+			minY: number;
+			maxY: number;
+		} | null = null;
+
+		const cameraEntities = this.world.query(Camera, Transform);
+		if (cameraEntities.length > 0) {
+			const camParams = this.world.getComponent(cameraEntities[0], Camera)!;
+			const camTransform = this.world.getComponent(
+				cameraEntities[0],
+				Transform,
+			)!;
+			camParams.updateProjection(gl.canvas.width, gl.canvas.height);
+			projectionMatrix = camParams.projectionMatrix;
+			camTransform.updateMatrix();
+			mat4.invert(viewMatrix, camTransform.matrix);
+
+			if (camParams.isOrthographic) {
+				const w = camParams.orthoSize * camParams.aspect;
+				const h = camParams.orthoSize;
+				const px = camTransform.position[0];
+				const py = camTransform.position[1];
+				cullBox = {
+					minX: px - w,
+					maxX: px + w,
+					minY: py - h,
+					maxY: py + h,
+				};
+			}
+		} else {
+			const aspect = gl.canvas.width / Math.max(gl.canvas.height, 1);
+			mat4.perspective(
+				projectionMatrix,
+				(45 * Math.PI) / 180,
+				aspect,
+				0.1,
+				100,
+			);
+			mat4.translate(viewMatrix, viewMatrix, [0, 0, -10]);
+		}
+
+		const meshEntities = this.world.query(Transform, MeshRenderer);
+		const skinnedMeshEntities = this.world.query(Transform, SkinnedMeshRenderer);
+		const allMeshEntities = [...meshEntities, ...skinnedMeshEntities];
+
+		const spriteEntities = this.world.query(Transform, SpriteRenderer);
+
+		// Grouping logic
+		const meshBatches = new Map<
+			string,
+			Array<{ entity: number; renderer: MeshRenderer; transform: Transform }>
+		>();
+		for (const e of allMeshEntities) {
+			const r = this.world.getComponent(e, MeshRenderer) || this.world.getComponent(e, SkinnedMeshRenderer)!;
+			const hash = r.material.programHash;
+			if (!meshBatches.has(hash)) meshBatches.set(hash, []);
+			meshBatches.get(hash)?.push({
+				entity: e,
+				renderer: r,
+				transform: this.world.getComponent(e, Transform)!,
+			});
+		}
+
+		const spriteBatches = new Map<
+			string,
+			Array<{ entity: number; renderer: SpriteRenderer; transform: Transform }>
+		>();
+		for (const e of spriteEntities) {
+			const transform = this.world.getComponent(e, Transform)!;
+
+			if (cullBox) {
+				const maxS = Math.max(
+					Math.abs(transform.scale[0]),
+					Math.abs(transform.scale[1]),
+				);
+				const radius = maxS * 1.5;
+				const px = transform.position[0];
+				const py = transform.position[1];
+
+				if (
+					px + radius < cullBox.minX ||
+					px - radius > cullBox.maxX ||
+					py + radius < cullBox.minY ||
+					py - radius > cullBox.maxY
+				) {
+					continue;
+				}
+			}
+
+			const r = this.world.getComponent(e, SpriteRenderer)!;
+			const hash = r.material.programHash;
+			if (!spriteBatches.has(hash)) spriteBatches.set(hash, []);
+			spriteBatches.get(hash)?.push({
+				entity: e,
+				renderer: r,
+				transform: transform,
+			});
+		}
+
+		// --- PASS 1: OCCLUSION MAP ---
+        if (this.occlusionFBO) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this.occlusionFBO);
+            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+            gl.clearColor(1.0, 1.0, 1.0, 1.0); // White background = unoccluded
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+            const occProgInfo = this.getCompiledShader(this.occlusionMaterial);
+            gl.useProgram(occProgInfo.shader.program);
+
+            if (occProgInfo.uniformLocations.uProjectionMatrix) {
+                gl.uniformMatrix4fv(occProgInfo.uniformLocations.uProjectionMatrix, false, projectionMatrix);
+            }
+
+            if ("aVertexPosition" in occProgInfo.attribLocations) {
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.quadPositionBuffer);
+                gl.vertexAttribPointer(occProgInfo.attribLocations.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
+                gl.enableVertexAttribArray(occProgInfo.attribLocations.aVertexPosition);
+            }
+
+            if ("aTextureCoord" in occProgInfo.attribLocations) {
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.quadTexCoordBuffer);
+                gl.vertexAttribPointer(occProgInfo.attribLocations.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
+                gl.enableVertexAttribArray(occProgInfo.attribLocations.aTextureCoord);
+            }
+
+            // Draw shadow casters
+            const shadowCasters = this.world.query(Transform, SpriteRenderer, ShadowCaster);
+            
+            const depthSorted = [];
+            for (const e of shadowCasters) {
+                depthSorted.push({
+                    transform: this.world.getComponent(e, Transform)!,
+                    sprite: this.world.getComponent(e, SpriteRenderer)!
+                });
+            }
+            depthSorted.sort((a, b) => a.transform.localPosition[2] - b.transform.localPosition[2]);
+
+            for (const { sprite, transform } of depthSorted) {
+                if (!sprite._loaded) continue;
+
+                const modelViewMatrix = mat4.create();
+                mat4.multiply(modelViewMatrix, viewMatrix, transform.matrix);
+
+                if (occProgInfo.uniformLocations.uModelViewMatrix)
+                    gl.uniformMatrix4fv(occProgInfo.uniformLocations.uModelViewMatrix, false, modelViewMatrix);
+                if (occProgInfo.uniformLocations.uModelMatrix)
+                    gl.uniformMatrix4fv(occProgInfo.uniformLocations.uModelMatrix, false, transform.matrix);
+                if (occProgInfo.uniformLocations.uColor)
+                    gl.uniform4fv(occProgInfo.uniformLocations.uColor, sprite.color);
+                if (occProgInfo.uniformLocations.uTexOffset)
+                    gl.uniform2fv(occProgInfo.uniformLocations.uTexOffset, sprite.uvOffset);
+                if (occProgInfo.uniformLocations.uTexScale)
+                    gl.uniform2fv(occProgInfo.uniformLocations.uTexScale, sprite.uvScale);
+
+                if (occProgInfo.uniformLocations.uSampler) {
+                    gl.activeTexture(gl.TEXTURE0);
+                    gl.bindTexture(gl.TEXTURE_2D, sprite.texture || null);
+                    gl.uniform1i(occProgInfo.uniformLocations.uSampler, 0);
+                }
+
+                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+            }
+        }
+        
+        // --- PASS 2: MAIN SCREEN ---
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.clearColor(0.005, 0.005, 0.015, 1.0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+		// DRAW SPRITES
+		for (const [_hash, batch] of spriteBatches) {
+			if (batch.length === 0) continue;
+
+			const firstMat = batch[0].renderer.material;
+			const progInfo = this.getCompiledShader(firstMat);
+
+			gl.useProgram(progInfo.shader.program);
+
+			if (firstMat.cullFace) gl.enable(gl.CULL_FACE);
+			else gl.disable(gl.CULL_FACE);
+			if (firstMat.depthTest) gl.enable(gl.DEPTH_TEST);
+			else gl.disable(gl.DEPTH_TEST);
+
+			gl.depthMask(firstMat.depthWrite);
+			if (firstMat.blendMode === "Additive") {
+				gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+			} else if (firstMat.blendMode === "Screen") {
+				gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
+			} else {
+				gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+			}
+
+			if (progInfo.uniformLocations.uProjectionMatrix) {
+				gl.uniformMatrix4fv(
+					progInfo.uniformLocations.uProjectionMatrix,
+					false,
+					projectionMatrix,
+				);
+			}
+
+			if (progInfo.uniformLocations.uViewMatrix) {
+				gl.uniformMatrix4fv(progInfo.uniformLocations.uViewMatrix, false, viewMatrix);
+			}
+			if (progInfo.uniformLocations.uResolution) {
+				gl.uniform2f(progInfo.uniformLocations.uResolution, gl.canvas.width, gl.canvas.height);
+			}
+			if (progInfo.uniformLocations.uTime) {
+				gl.uniform1f(progInfo.uniformLocations.uTime, (performance.now() % 100000) / 1000.0);
+			}
+			if (progInfo.uniformLocations.uOcclusionSampler) {
+				gl.activeTexture(gl.TEXTURE1);
+				gl.bindTexture(gl.TEXTURE_2D, this.occlusionTexture);
+				gl.uniform1i(progInfo.uniformLocations.uOcclusionSampler, 1);
+			}
+
+			if (progInfo.uniformLocations.uAmbientColor)
+				gl.uniform3fv(
+					progInfo.uniformLocations.uAmbientColor,
+					LightingSystem.ambientColor,
+				);
+			if (progInfo.uniformLocations.uActivePointLights)
+				gl.uniform1i(
+					progInfo.uniformLocations.uActivePointLights,
+					LightingSystem.activePointLights,
+				);
+			if (progInfo.uniformLocations.uLightPositions)
+				gl.uniform3fv(
+					progInfo.uniformLocations.uLightPositions,
+					LightingSystem.lightPositions,
+				);
+			if (progInfo.uniformLocations.uLightColors)
+				gl.uniform3fv(
+					progInfo.uniformLocations.uLightColors,
+					LightingSystem.lightColors,
+				);
+			if (progInfo.uniformLocations.uLightParams)
+				gl.uniform4fv(
+					progInfo.uniformLocations.uLightParams,
+					LightingSystem.lightParams,
+				);
+			if (progInfo.uniformLocations.uActiveParticleLights)
+				gl.uniform1i(
+					progInfo.uniformLocations.uActiveParticleLights,
+					LightingSystem.activeParticleLights,
+				);
+			if (progInfo.uniformLocations.uParticleLightPositions)
+				gl.uniform4fv(
+					progInfo.uniformLocations.uParticleLightPositions,
+					LightingSystem.particleLightPositions,
+				);
+			if (progInfo.uniformLocations.uParticleLightColors)
+				gl.uniform3fv(
+					progInfo.uniformLocations.uParticleLightColors,
+					LightingSystem.particleLightColors,
+				);
+
+			if ("aVertexPosition" in progInfo.attribLocations) {
+				gl.bindBuffer(gl.ARRAY_BUFFER, this.quadPositionBuffer);
+				gl.vertexAttribPointer(
+					progInfo.attribLocations.aVertexPosition,
+					3,
+					gl.FLOAT,
+					false,
+					0,
+					0,
+				);
+				gl.enableVertexAttribArray(progInfo.attribLocations.aVertexPosition);
+			}
+
+			if ("aTextureCoord" in progInfo.attribLocations) {
+				gl.bindBuffer(gl.ARRAY_BUFFER, this.quadTexCoordBuffer);
+				gl.vertexAttribPointer(
+					progInfo.attribLocations.aTextureCoord,
+					2,
+					gl.FLOAT,
+					false,
+					0,
+					0,
+				);
+				gl.enableVertexAttribArray(progInfo.attribLocations.aTextureCoord);
+			}
+
+			for (const [name, val] of Object.entries(firstMat.uniforms)) {
+				const loc = progInfo.uniformLocations[name];
+				if (!loc) continue;
+				if (val instanceof Float32Array || Array.isArray(val)) {
+					if (val.length === 2) gl.uniform2fv(loc, val);
+					else if (val.length === 3) gl.uniform3fv(loc, val);
+					else if (val.length === 4) gl.uniform4fv(loc, val);
+				} else if (typeof val === "number") {
+					gl.uniform1f(loc, val);
+				}
+			}
+
+			// Sort batch back-to-front (Painter's Algorithm) to resolve semi-transparent depth buffer culling clipping
+			batch.sort(
+				(a, b) => a.transform.localPosition[2] - b.transform.localPosition[2],
+			);
+
+			for (const { renderer: sprite, transform } of batch) {
+				if (!sprite._loaded && sprite.imageSrc) {
+					let texAsset = GlobalAssets.getTexture(sprite.imageSrc);
+					if (!texAsset) {
+						texAsset = GlobalAssets.loadTexture(sprite.imageSrc);
+					}
+
+					if (texAsset?.loaded) {
+						if (!texAsset.glTexture) {
+							const texture = gl.createTexture()!;
+							gl.bindTexture(gl.TEXTURE_2D, texture);
+							gl.texImage2D(
+								gl.TEXTURE_2D,
+								0,
+								gl.RGBA,
+								gl.RGBA,
+								gl.UNSIGNED_BYTE,
+								texAsset.image,
+							);
+							gl.texParameteri(
+								gl.TEXTURE_2D,
+								gl.TEXTURE_WRAP_S,
+								gl.CLAMP_TO_EDGE,
+							);
+							gl.texParameteri(
+								gl.TEXTURE_2D,
+								gl.TEXTURE_WRAP_T,
+								gl.CLAMP_TO_EDGE,
+							);
+							gl.texParameteri(
+								gl.TEXTURE_2D,
+								gl.TEXTURE_MIN_FILTER,
+								gl.NEAREST,
+							);
+							gl.texParameteri(
+								gl.TEXTURE_2D,
+								gl.TEXTURE_MAG_FILTER,
+								gl.NEAREST,
+							);
+							texAsset.glTexture = texture;
+						}
+						sprite.texture = texAsset.glTexture;
+						sprite._loaded = true;
+					} else if (!sprite.texture) {
+						sprite.texture = this.getMagentaTexture(gl);
+					}
+				}
+
+				const modelViewMatrix = mat4.create();
+				mat4.multiply(modelViewMatrix, viewMatrix, transform.matrix);
+
+				if (progInfo.uniformLocations.uModelViewMatrix)
+					gl.uniformMatrix4fv(
+						progInfo.uniformLocations.uModelViewMatrix,
+						false,
+						modelViewMatrix,
+					);
+				if (progInfo.uniformLocations.uModelMatrix)
+					gl.uniformMatrix4fv(
+						progInfo.uniformLocations.uModelMatrix,
+						false,
+						transform.matrix,
+					);
+				if (progInfo.uniformLocations.uColor)
+					gl.uniform4fv(progInfo.uniformLocations.uColor, sprite.color);
+				if (progInfo.uniformLocations.uTexOffset)
+					gl.uniform2fv(progInfo.uniformLocations.uTexOffset, sprite.uvOffset);
+				if (progInfo.uniformLocations.uTexScale)
+					gl.uniform2fv(progInfo.uniformLocations.uTexScale, sprite.uvScale);
+
+				if (progInfo.uniformLocations.uSampler) {
+					gl.activeTexture(gl.TEXTURE0);
+					gl.bindTexture(gl.TEXTURE_2D, sprite.texture || null);
+					gl.uniform1i(progInfo.uniformLocations.uSampler, 0);
+				}
+
+				gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+			}
+		}
+
+		// DRAW MESHES
+		for (const [_hash, batch] of meshBatches) {
+			if (batch.length === 0) continue;
+
+			const firstMat = batch[0].renderer.material;
+			const progInfo = this.getCompiledShader(firstMat);
+
+			gl.useProgram(progInfo.shader.program);
+
+			if (firstMat.cullFace) gl.enable(gl.CULL_FACE);
+			else gl.disable(gl.CULL_FACE);
+			if (firstMat.depthTest) gl.enable(gl.DEPTH_TEST);
+			else gl.disable(gl.DEPTH_TEST);
+			
+			gl.depthMask(firstMat.depthWrite);
+			if (firstMat.blendMode === "Additive") {
+				gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+			} else if (firstMat.blendMode === "Screen") {
+				gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
+			} else {
+				gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+			}
+
+			if (progInfo.uniformLocations.uProjectionMatrix) {
+				gl.uniformMatrix4fv(
+					progInfo.uniformLocations.uProjectionMatrix,
+					false,
+					projectionMatrix,
+				);
+			}
+
+			if (progInfo.uniformLocations.uViewMatrix) {
+				gl.uniformMatrix4fv(progInfo.uniformLocations.uViewMatrix, false, viewMatrix);
+			}
+			if (progInfo.uniformLocations.uResolution) {
+				gl.uniform2f(progInfo.uniformLocations.uResolution, gl.canvas.width, gl.canvas.height);
+			}
+			if (progInfo.uniformLocations.uTime) {
+				gl.uniform1f(progInfo.uniformLocations.uTime, (performance.now() % 100000) / 1000.0);
+			}
+			if (progInfo.uniformLocations.uOcclusionSampler) {
+				gl.activeTexture(gl.TEXTURE1);
+				gl.bindTexture(gl.TEXTURE_2D, this.occlusionTexture);
+				gl.uniform1i(progInfo.uniformLocations.uOcclusionSampler, 1);
+			}
+
+			if (progInfo.uniformLocations.uAmbientColor)
+				gl.uniform3fv(
+					progInfo.uniformLocations.uAmbientColor,
+					LightingSystem.ambientColor,
+				);
+			if (progInfo.uniformLocations.uActivePointLights)
+				gl.uniform1i(
+					progInfo.uniformLocations.uActivePointLights,
+					LightingSystem.activePointLights,
+				);
+			if (progInfo.uniformLocations.uLightPositions)
+				gl.uniform3fv(
+					progInfo.uniformLocations.uLightPositions,
+					LightingSystem.lightPositions,
+				);
+			if (progInfo.uniformLocations.uLightColors)
+				gl.uniform3fv(
+					progInfo.uniformLocations.uLightColors,
+					LightingSystem.lightColors,
+				);
+			if (progInfo.uniformLocations.uLightParams)
+				gl.uniform4fv(
+					progInfo.uniformLocations.uLightParams,
+					LightingSystem.lightParams,
+				);
+			if (progInfo.uniformLocations.uActiveParticleLights)
+				gl.uniform1i(
+					progInfo.uniformLocations.uActiveParticleLights,
+					LightingSystem.activeParticleLights,
+				);
+			if (progInfo.uniformLocations.uParticleLightPositions)
+				gl.uniform4fv(
+					progInfo.uniformLocations.uParticleLightPositions,
+					LightingSystem.particleLightPositions,
+				);
+			if (progInfo.uniformLocations.uParticleLightColors)
+				gl.uniform3fv(
+					progInfo.uniformLocations.uParticleLightColors,
+					LightingSystem.particleLightColors,
+				);
+
+			// Apply custom uniforms for material once per batch
+			let textureUnit = 0;
+			for (const [name, val] of Object.entries(firstMat.uniforms)) {
+				const loc = progInfo.uniformLocations[name];
+				if (!loc) continue;
+
+				if (
+					val &&
+					typeof val === "object" &&
+					"image" in val &&
+					"loaded" in val
+				) {
+					const texAsset = val as any;
+					if (texAsset.loaded) {
+						if (!texAsset.glTexture) {
+							const texture = gl.createTexture()!;
+							gl.bindTexture(gl.TEXTURE_2D, texture);
+							gl.texImage2D(
+								gl.TEXTURE_2D,
+								0,
+								gl.RGBA,
+								gl.RGBA,
+								gl.UNSIGNED_BYTE,
+								texAsset.image,
+							);
+							gl.texParameteri(
+								gl.TEXTURE_2D,
+								gl.TEXTURE_WRAP_S,
+								gl.CLAMP_TO_EDGE,
+							);
+							gl.texParameteri(
+								gl.TEXTURE_2D,
+								gl.TEXTURE_WRAP_T,
+								gl.CLAMP_TO_EDGE,
+							);
+							gl.texParameteri(
+								gl.TEXTURE_2D,
+								gl.TEXTURE_MIN_FILTER,
+								gl.NEAREST,
+							);
+							gl.texParameteri(
+								gl.TEXTURE_2D,
+								gl.TEXTURE_MAG_FILTER,
+								gl.NEAREST,
+							);
+							texAsset.glTexture = texture;
+						}
+						gl.activeTexture(gl.TEXTURE0 + textureUnit);
+						gl.bindTexture(gl.TEXTURE_2D, texAsset.glTexture);
+						gl.uniform1i(loc, textureUnit);
+						textureUnit++;
+					}
+				} else if (val instanceof Float32Array || Array.isArray(val)) {
+					if (val.length === 2) gl.uniform2fv(loc, val);
+					else if (val.length === 3) gl.uniform3fv(loc, val);
+					else if (val.length === 4) gl.uniform4fv(loc, val);
+				} else if (typeof val === "number") {
+					gl.uniform1f(loc, val);
+				}
+			}
+
+			for (const { renderer: meshBase, transform, entity } of batch) {
+				const mesh: any = meshBase; // Cast to any to access Skinned properties if they exist
+				
+				if (!mesh.positionBuffer || mesh.isDirty) {
+					if (!mesh.positionBuffer) mesh.positionBuffer = gl.createBuffer()!;
+					gl.bindBuffer(gl.ARRAY_BUFFER, mesh.positionBuffer);
+					gl.bufferData(gl.ARRAY_BUFFER, mesh.positions, gl.DYNAMIC_DRAW);
+				}
+				if ((!mesh.colorBuffer || mesh.isDirty) && mesh.colors) {
+					if (!mesh.colorBuffer) mesh.colorBuffer = gl.createBuffer()!;
+					gl.bindBuffer(gl.ARRAY_BUFFER, mesh.colorBuffer);
+					gl.bufferData(gl.ARRAY_BUFFER, mesh.colors, gl.DYNAMIC_DRAW);
+				}
+				if ((!mesh.normalBuffer || mesh.isDirty) && mesh.normals) {
+					if (!mesh.normalBuffer) mesh.normalBuffer = gl.createBuffer()!;
+					gl.bindBuffer(gl.ARRAY_BUFFER, mesh.normalBuffer);
+					gl.bufferData(gl.ARRAY_BUFFER, mesh.normals, gl.DYNAMIC_DRAW);
+				}
+				if ((!mesh.uvBuffer || mesh.isDirty) && mesh.uvs) {
+					if (!mesh.uvBuffer) mesh.uvBuffer = gl.createBuffer()!;
+					gl.bindBuffer(gl.ARRAY_BUFFER, mesh.uvBuffer);
+					gl.bufferData(gl.ARRAY_BUFFER, mesh.uvs, gl.DYNAMIC_DRAW);
+				}
+				
+				// SkinnedMeshRenderer Additions
+				if ("joints" in mesh) {
+					if (!mesh.jointBuffer || mesh.isDirty) {
+						if (!mesh.jointBuffer) mesh.jointBuffer = gl.createBuffer()!;
+						gl.bindBuffer(gl.ARRAY_BUFFER, mesh.jointBuffer);
+						gl.bufferData(gl.ARRAY_BUFFER, mesh.joints, gl.DYNAMIC_DRAW);
+					}
+					if (!mesh.weightBuffer || mesh.isDirty) {
+						if (!mesh.weightBuffer) mesh.weightBuffer = gl.createBuffer()!;
+						gl.bindBuffer(gl.ARRAY_BUFFER, mesh.weightBuffer);
+						gl.bufferData(gl.ARRAY_BUFFER, mesh.weights, gl.DYNAMIC_DRAW);
+					}
+				}
+
+				if ((!mesh.indexBuffer || mesh.isDirty) && mesh.indices) {
+					if (!mesh.indexBuffer) mesh.indexBuffer = gl.createBuffer()!;
+					gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh.indexBuffer);
+					gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, mesh.indices, gl.DYNAMIC_DRAW);
+				}
+				mesh.isDirty = false;
+
+				if ("aVertexPosition" in progInfo.attribLocations) {
+					gl.bindBuffer(gl.ARRAY_BUFFER, mesh.positionBuffer);
+					gl.vertexAttribPointer(
+						progInfo.attribLocations.aVertexPosition,
+						3,
+						gl.FLOAT,
+						false,
+						0,
+						0,
+					);
+					gl.enableVertexAttribArray(progInfo.attribLocations.aVertexPosition);
+				}
+
+				if ("aVertexColor" in progInfo.attribLocations) {
+					if (mesh.colorBuffer) {
+						gl.bindBuffer(gl.ARRAY_BUFFER, mesh.colorBuffer);
+						gl.vertexAttribPointer(
+							progInfo.attribLocations.aVertexColor,
+							4,
+							gl.FLOAT,
+							false,
+							0,
+							0,
+						);
+						gl.enableVertexAttribArray(progInfo.attribLocations.aVertexColor);
+					} else {
+						gl.disableVertexAttribArray(progInfo.attribLocations.aVertexColor);
+						gl.vertexAttrib4fv(
+							progInfo.attribLocations.aVertexColor,
+							[1, 1, 1, 1],
+						);
+					}
+				}
+
+				if ("aVertexNormal" in progInfo.attribLocations) {
+					if (mesh.normalBuffer) {
+						gl.bindBuffer(gl.ARRAY_BUFFER, mesh.normalBuffer);
+						gl.vertexAttribPointer(
+							progInfo.attribLocations.aVertexNormal,
+							3,
+							gl.FLOAT,
+							false,
+							0,
+							0,
+						);
+						gl.enableVertexAttribArray(progInfo.attribLocations.aVertexNormal);
+					} else {
+						gl.disableVertexAttribArray(progInfo.attribLocations.aVertexNormal);
+						gl.vertexAttrib3fv(
+							progInfo.attribLocations.aVertexNormal,
+							[0, 0, 0],
+						);
+					}
+				}
+
+				if ("aTextureCoord" in progInfo.attribLocations) {
+					if (mesh.uvBuffer) {
+						gl.bindBuffer(gl.ARRAY_BUFFER, mesh.uvBuffer);
+						gl.vertexAttribPointer(
+							progInfo.attribLocations.aTextureCoord,
+							2,
+							gl.FLOAT,
+							false,
+							0,
+							0,
+						);
+						gl.enableVertexAttribArray(progInfo.attribLocations.aTextureCoord);
+					} else {
+						gl.disableVertexAttribArray(progInfo.attribLocations.aTextureCoord);
+					}
+				}
+
+				// Skinned attributes bindings
+				if ("aJoints" in progInfo.attribLocations && mesh.jointBuffer) {
+					gl.bindBuffer(gl.ARRAY_BUFFER, mesh.jointBuffer);
+					gl.vertexAttribPointer(progInfo.attribLocations.aJoints, 4, gl.FLOAT, false, 0, 0);
+					gl.enableVertexAttribArray(progInfo.attribLocations.aJoints);
+				}
+				if ("aWeights" in progInfo.attribLocations && mesh.weightBuffer) {
+					gl.bindBuffer(gl.ARRAY_BUFFER, mesh.weightBuffer);
+					gl.vertexAttribPointer(progInfo.attribLocations.aWeights, 4, gl.FLOAT, false, 0, 0);
+					gl.enableVertexAttribArray(progInfo.attribLocations.aWeights);
+				}
+				
+				// Setup joint matrices uniform if SkinnedLitMaterial
+				if (progInfo.uniformLocations.uJointMatrices) {
+					const compMap = this.world.getComponentsForEntity(entity);
+					if (compMap) {
+						let animator: any = null;
+						for (const [cls, comp] of compMap.entries()) {
+							if (cls.name === "Animator3D") {
+								animator = comp;
+								break;
+							}
+						}
+						
+						if (animator && animator.jointMatrices) {
+							gl.uniformMatrix4fv(progInfo.uniformLocations.uJointMatrices, false, animator.jointMatrices);
+						}
+					}
+				}
+
+				const modelViewMatrix = mat4.create();
+				mat4.multiply(modelViewMatrix, viewMatrix, transform.matrix);
+
+				if (progInfo.uniformLocations.uModelViewMatrix) {
+					gl.uniformMatrix4fv(
+						progInfo.uniformLocations.uModelViewMatrix,
+						false,
+						modelViewMatrix,
+					);
+				}
+				if (progInfo.uniformLocations.uModelMatrix) {
+					gl.uniformMatrix4fv(
+						progInfo.uniformLocations.uModelMatrix,
+						false,
+						transform.matrix,
+					);
+				}
+
+				if (mesh.indexBuffer && mesh.indices) {
+					gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh.indexBuffer);
+					gl.drawElements(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0);
+				} else {
+					gl.drawArrays(gl.TRIANGLES, 0, mesh.vertexCount);
+				}
+			}
+		}
+
+		// Always enable cull face back for future draws if disabled manually
+		gl.enable(gl.CULL_FACE);
+		gl.depthMask(true);
+		gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+	}
+}