action-engine-js 1.0.0

package/actionengine/display/graphics/renderers/actionrenderer3D/spriteRenderer3D.js

@@ -0,0 +1,266 @@
+// actionengine/display/graphics/renderers/actionrenderer3D/spriteRenderer3D.js
+
+class SpriteRenderer3D {
+    constructor(gl, programManager, isWebGL2 = false) {
+        this.gl = gl;
+        this.programManager = programManager;
+        this.isWebGL2 = isWebGL2;
+        
+        // Sprite shader and program
+        this.spriteShader = new SpriteShader();
+        this.program = null;
+        this.locations = {};
+        
+        // Quad geometry for billboards
+        this.quadBuffer = null;
+        this.indexBuffer = null;
+        
+        // Initialize
+        this._initializeShader();
+        this._createQuadGeometry();
+    }
+    
+    /**
+     * Initialize the billboard shader program
+     * @private
+     */
+    _initializeShader() {
+        
+        try {
+            this.program = this.programManager.createShaderProgram(
+                this.spriteShader.getVertexShader(this.isWebGL2),
+                this.spriteShader.getFragmentShader(this.isWebGL2),
+                'sprite_shader'
+            );
+            
+            // Get attribute and uniform locations
+            this.locations = {
+                // Attributes
+                position: this.gl.getAttribLocation(this.program, 'aPosition'),
+                texCoord: this.gl.getAttribLocation(this.program, 'aTexCoord'),
+                
+                // Uniforms
+                projectionMatrix: this.gl.getUniformLocation(this.program, 'uProjectionMatrix'),
+                viewMatrix: this.gl.getUniformLocation(this.program, 'uViewMatrix'),
+                spritePosition: this.gl.getUniformLocation(this.program, 'uSpritePosition'),
+                spriteSize: this.gl.getUniformLocation(this.program, 'uSpriteSize'),
+                cameraPosition: this.gl.getUniformLocation(this.program, 'uCameraPosition'),
+                cameraRight: this.gl.getUniformLocation(this.program, 'uCameraRight'),
+                cameraUp: this.gl.getUniformLocation(this.program, 'uCameraUp'),
+                isBillboard: this.gl.getUniformLocation(this.program, 'uIsBillboard'),
+                spriteForward: this.gl.getUniformLocation(this.program, 'uSpriteForward'),
+                spriteUp: this.gl.getUniformLocation(this.program, 'uSpriteUp'),
+                texture: this.gl.getUniformLocation(this.program, 'uTexture'),
+                color: this.gl.getUniformLocation(this.program, 'uColor'),
+                alpha: this.gl.getUniformLocation(this.program, 'uAlpha')
+            };
+            
+        } catch (error) {
+            console.error('[SpriteRenderer3D] Failed to initialize shader:', error);
+        }
+    }
+    
+    /**
+     * Create quad geometry for billboard rendering
+     * @private
+     */
+    _createQuadGeometry() {
+        const gl = this.gl;
+        
+        // Quad vertices (position + texture coordinates)
+        // Using a centered quad from -0.5 to 0.5
+        const vertices = new Float32Array([
+            // Position (x, y, z)    Texture (u, v)
+            -0.5, -0.5, 0.0,        0.0, 0.0,  // Bottom-left
+             0.5, -0.5, 0.0,        1.0, 0.0,  // Bottom-right
+             0.5,  0.5, 0.0,        1.0, 1.0,  // Top-right
+            -0.5,  0.5, 0.0,        0.0, 1.0   // Top-left
+        ]);
+        
+        // Quad indices
+        const indices = new Uint16Array([
+            0, 1, 2,  // First triangle
+            0, 2, 3   // Second triangle
+        ]);
+        
+        // Create vertex buffer
+        this.quadBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+        
+        // Create index buffer
+        this.indexBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+        
+        // Unbind buffers
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    }
+    
+    /**
+     * Render billboard sprites
+     * @param {Array} sprites - Array of ActionSprite3D objects
+     * @param {Object} camera - Camera object
+     * @param {Float32Array} projectionMatrix - Projection matrix
+     * @param {Float32Array} viewMatrix - View matrix
+     */
+    render(sprites, camera, projectionMatrix, viewMatrix) {
+        if (!sprites || sprites.length === 0 || !this.program) {
+            return;
+        }
+        
+        const gl = this.gl;
+        
+        // Use billboard shader program
+        gl.useProgram(this.program);
+        
+        // Set up vertex attributes
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+        
+        // Position attribute (3 floats)
+        gl.enableVertexAttribArray(this.locations.position);
+        gl.vertexAttribPointer(this.locations.position, 3, gl.FLOAT, false, 5 * 4, 0);
+        
+        // Texture coordinate attribute (2 floats)
+        gl.enableVertexAttribArray(this.locations.texCoord);
+        gl.vertexAttribPointer(this.locations.texCoord, 2, gl.FLOAT, false, 5 * 4, 3 * 4);
+        
+        // Set common uniforms
+        gl.uniformMatrix4fv(this.locations.projectionMatrix, false, projectionMatrix);
+        gl.uniformMatrix4fv(this.locations.viewMatrix, false, viewMatrix);
+        
+        // Calculate camera vectors for billboarding
+        const cameraVectors = this._calculateCameraVectors(camera);
+        gl.uniform3fv(this.locations.cameraPosition, camera.position.toArray());
+        gl.uniform3fv(this.locations.cameraRight, cameraVectors.right.toArray());
+        gl.uniform3fv(this.locations.cameraUp, cameraVectors.up.toArray());
+        
+        // Enable blending for transparency
+        gl.enable(gl.BLEND);
+        gl.enable(gl.DEPTH_TEST);
+        
+        // Ensure depth function matches the main 3D renderer for consistent depth testing
+        gl.depthFunc(gl.LEQUAL);
+        
+        gl.depthMask(false); // Don't write to depth buffer for billboards
+        
+        // Render each sprite
+        for (const sprite of sprites) {
+            if (!sprite.isTextureLoaded) {
+                continue;
+            }
+
+            
+            // Create WebGL texture if not already created
+            if (!sprite.texture) {
+                sprite.createWebGLTexture(gl);
+            }
+            
+            if (!sprite.texture) {
+                continue;
+            }
+            
+            // Set blend mode
+            this._setBlendMode(sprite.blendMode);
+            
+            // Bind texture
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, sprite.texture);
+            gl.uniform1i(this.locations.texture, 0);
+            
+            // Set sprite-specific uniforms
+            const worldPos = sprite.getWorldPosition();
+            gl.uniform3fv(this.locations.spritePosition, worldPos.toArray());
+            gl.uniform2fv(this.locations.spriteSize, [sprite.width, sprite.height]);
+            gl.uniform1i(this.locations.isBillboard, sprite.isBillboard ? 1 : 0);
+            if (!sprite.isBillboard) {
+                gl.uniform3fv(this.locations.spriteForward, sprite.forward.toArray());
+                gl.uniform3fv(this.locations.spriteUp, sprite.up.toArray());
+            }
+            gl.uniform3fv(this.locations.color, sprite.color);
+            gl.uniform1f(this.locations.alpha, sprite.alpha);
+            
+            // Draw the quad
+            gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+        }
+        
+        // Restore depth writing
+        gl.depthMask(true);
+        
+        // Restore normal blending
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        
+        // Cleanup
+        gl.disableVertexAttribArray(this.locations.position);
+        gl.disableVertexAttribArray(this.locations.texCoord);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+    
+    /**
+     * Calculate camera right and up vectors for billboarding
+     * @param {Object} camera - Camera object
+     * @returns {Object} Object containing right and up vectors
+     * @private
+     */
+    _calculateCameraVectors(camera) {
+        // Calculate view direction
+        const forward = camera.target.sub(camera.position).normalize();
+        
+        // Calculate right vector (cross product of forward and world up)
+        const worldUp = new Vector3(0, 1, 0);
+        const right = forward.cross(worldUp).normalize();
+        
+        // Calculate up vector (cross product of right and forward)
+        const up = right.cross(forward).normalize();
+        
+        return { right, up };
+    }
+    
+    /**
+     * Set OpenGL blend mode based on sprite blend mode
+     * @param {string} blendMode - Blend mode ('normal', 'additive', 'multiply')
+     * @private
+     */
+    _setBlendMode(blendMode) {
+        const gl = this.gl;
+        
+        switch (blendMode) {
+            case 'additive':
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+                break;
+            case 'multiply':
+                gl.blendFunc(gl.DST_COLOR, gl.ZERO);
+                break;
+            case 'normal':
+            default:
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+                break;
+        }
+    }
+    
+    /**
+     * Cleanup WebGL resources
+     */
+    dispose() {
+        const gl = this.gl;
+        
+        if (this.quadBuffer) {
+            gl.deleteBuffer(this.quadBuffer);
+            this.quadBuffer = null;
+        }
+        
+        if (this.indexBuffer) {
+            gl.deleteBuffer(this.indexBuffer);
+            this.indexBuffer = null;
+        }
+        
+        if (this.program) {
+            gl.deleteProgram(this.program);
+            this.program = null;
+        }
+    }
+}

package/actionengine/display/graphics/renderers/actionrenderer3D/sunrenderer3D.js

@@ -0,0 +1,140 @@
+// actionengine/display/graphics/renderers/actionrenderer3D/sunrenderer3D.js
+class SunRenderer3D {
+    constructor(gl, programManager) {
+        this.gl = gl;
+        this.programManager = programManager;
+        
+        // Create shader program for the sun
+        this.createShaderProgram();
+        
+        // Create sun point buffer
+        this.createSunBuffer();
+    }
+    
+    createShaderProgram() {
+        // Simple vertex shader with point size
+        const vsSource = `#version 300 es
+        in vec3 aPosition;
+        
+        uniform mat4 uProjectionMatrix;
+        uniform mat4 uViewMatrix;
+        uniform float uPointSize;
+        
+        void main() {
+            gl_Position = uProjectionMatrix * uViewMatrix * vec4(aPosition, 1.0);
+            gl_PointSize = uPointSize;
+        }`;
+        
+        // Fragment shader with a circular point
+        const fsSource = `#version 300 es
+        precision mediump float;
+        
+        uniform vec3 uSunColor;
+        out vec4 fragColor;
+        
+        void main() {
+            // Calculate distance from center of point
+            vec2 coord = gl_PointCoord - vec2(0.5);
+            float distance = length(coord);
+            
+            // Create a soft circle
+            float alpha = 1.0 - smoothstep(0.0, 0.5, distance);
+            
+            // Sun color with alpha based on distance
+            fragColor = vec4(uSunColor, alpha);
+        }`;
+        
+        // Create shader program
+        const vertexShader = this.compileShader(this.gl.VERTEX_SHADER, vsSource);
+        const fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, fsSource);
+        
+        this.program = this.gl.createProgram();
+        this.gl.attachShader(this.program, vertexShader);
+        this.gl.attachShader(this.program, fragmentShader);
+        this.gl.linkProgram(this.program);
+        
+        if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+            console.error('Unable to initialize sun shader program:', this.gl.getProgramInfoLog(this.program));
+            return;
+        }
+        
+        // Get attribute and uniform locations
+        this.locations = {
+            position: this.gl.getAttribLocation(this.program, 'aPosition'),
+            projectionMatrix: this.gl.getUniformLocation(this.program, 'uProjectionMatrix'),
+            viewMatrix: this.gl.getUniformLocation(this.program, 'uViewMatrix'),
+            pointSize: this.gl.getUniformLocation(this.program, 'uPointSize'),
+            sunColor: this.gl.getUniformLocation(this.program, 'uSunColor')
+        };
+    }
+    
+    compileShader(type, source) {
+        const shader = this.gl.createShader(type);
+        this.gl.shaderSource(shader, source);
+        this.gl.compileShader(shader);
+        
+        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+            console.error('Shader compile error:', this.gl.getShaderInfoLog(shader));
+            this.gl.deleteShader(shader);
+            return null;
+        }
+        
+        return shader;
+    }
+    
+    createSunBuffer() {
+        // Create a buffer for a single point
+        this.sunBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.sunBuffer);
+        
+        // Just one point at origin, will be positioned later
+        const position = new Float32Array([0, 0, 0]);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, position, this.gl.STATIC_DRAW);
+    }
+    
+    render(camera, lightPos, isVirtualBoyMode) {
+        const gl = this.gl;
+        
+        // Use our sun shader program
+        gl.useProgram(this.program);
+        
+        // Set matrices
+        const projectionMatrix = Matrix4.perspective(Matrix4.create(), camera.fov, Game.WIDTH / Game.HEIGHT, 0.1, 100000.0);
+        const viewMatrix = Matrix4.create();
+        Matrix4.lookAt(viewMatrix, camera.position.toArray(), camera.target.toArray(), camera.up.toArray());
+        
+        gl.uniformMatrix4fv(this.locations.projectionMatrix, false, projectionMatrix);
+        gl.uniformMatrix4fv(this.locations.viewMatrix, false, viewMatrix);
+        
+        // Set sun color based on active shader
+        if (isVirtualBoyMode) {
+            // Red for VirtualBoy shader variant
+            gl.uniform3f(this.locations.sunColor, 1.0, 0.0, 0.0);
+        } else {
+            // Default yellow-orange
+            gl.uniform3f(this.locations.sunColor, 1.0, 0.9, 0.5);
+        }
+        
+        // Set point size (5x smaller as requested)
+        gl.uniform1f(this.locations.pointSize, 100.0);
+        
+        // Bind position buffer
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.sunBuffer);
+        gl.vertexAttribPointer(this.locations.position, 3, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(this.locations.position);
+        
+        // Update the buffer with the sun position
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array([lightPos.x, lightPos.y, lightPos.z]));
+        
+        // Enable blending
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        
+        // Draw the sun as a point
+        gl.drawArrays(gl.POINTS, 0, 1);
+        
+        // Clean up
+        gl.disable(gl.BLEND);
+        gl.disableVertexAttribArray(this.locations.position);
+    }
+}

package/actionengine/display/graphics/renderers/actionrenderer3D/waterrenderer3D.js

@@ -0,0 +1,173 @@
+class WaterRenderer3D {
+    constructor(gl, programManager) {
+        this.gl = gl;
+        this.programManager = programManager;
+        this.waterProgram = programManager.getWaterProgram();
+        this.waterLocations = programManager.getWaterLocations();
+        this.waterBuffers = {
+            position: gl.createBuffer(),
+            normal: gl.createBuffer(),
+            texCoord: gl.createBuffer(),
+            indices: gl.createBuffer()
+        };
+        this.waterIndexCount = 0;
+        
+        // Add configuration options for water appearance
+        this.waterConfig = {
+    waveHeight: 2.0,  // Increased from 0.5 to 2.0 to match shader
+    waveSpeed: 1.0,
+    transparency: 0.8,
+    reflectivity: 0.6,
+    waterColor: [0.0, 0.48, 0.71],
+    waveDensity: 2.0
+};
+        
+        this.initializeWaterMesh();
+    }
+
+    initializeWaterMesh() {
+        // Create a more detailed water mesh grid
+        const gridSize = 32; // Increase detail level
+        const size = 100;
+        const vertices = [];
+        const normals = [];
+        const texCoords = [];
+        const indices = [];
+        
+        // Generate grid mesh
+        for (let z = 0; z <= gridSize; z++) {
+            for (let x = 0; x <= gridSize; x++) {
+                const xPos = (x / gridSize * 2 - 1) * size;
+                const zPos = (z / gridSize * 2 - 1) * size;
+                
+                vertices.push(xPos, 0, zPos);
+                normals.push(0, 1, 0);
+                texCoords.push(x / gridSize, z / gridSize);
+            }
+        }
+        
+        // Generate indices for triangle strips
+        for (let z = 0; z < gridSize; z++) {
+            for (let x = 0; x < gridSize; x++) {
+                const topLeft = z * (gridSize + 1) + x;
+                const topRight = topLeft + 1;
+                const bottomLeft = (z + 1) * (gridSize + 1) + x;
+                const bottomRight = bottomLeft + 1;
+                
+                indices.push(topLeft, bottomLeft, topRight);
+                indices.push(topRight, bottomLeft, bottomRight);
+            }
+        }
+
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.waterBuffers.position);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(vertices), this.gl.STATIC_DRAW);
+
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.waterBuffers.normal);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(normals), this.gl.STATIC_DRAW);
+
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.waterBuffers.texCoord);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(texCoords), this.gl.STATIC_DRAW);
+
+        this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.waterBuffers.indices);
+        this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), this.gl.STATIC_DRAW);
+
+        this.waterIndexCount = indices.length;
+    }
+
+    render(camera, currentTime, ocean) {
+        this.gl.useProgram(this.waterProgram);
+
+        // Enhanced depth and blending setup
+        this.gl.enable(this.gl.DEPTH_TEST);
+        this.gl.depthMask(false); // Changed to false for better transparency handling
+        this.gl.enable(this.gl.BLEND);
+        this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
+
+        const projection = Matrix4.perspective(Matrix4.create(), camera.fov, Game.WIDTH / Game.HEIGHT, 0.1, 10000.0);
+        const view = Matrix4.create();
+        Matrix4.lookAt(view, camera.position.toArray(), camera.target.toArray(), camera.up.toArray());
+        const model = Matrix4.create();
+
+        // Update water simulation
+        this.updateBuffersWithOcean(ocean);
+
+        // Set uniforms
+        this.gl.uniformMatrix4fv(this.waterLocations.projectionMatrix, false, projection);
+        this.gl.uniformMatrix4fv(this.waterLocations.viewMatrix, false, view);
+        this.gl.uniformMatrix4fv(this.waterLocations.modelMatrix, false, model);
+        this.gl.uniform1f(this.waterLocations.time, currentTime * this.waterConfig.waveSpeed);
+        this.gl.uniform3fv(this.waterLocations.cameraPos, camera.position.toArray());
+        this.gl.uniform3fv(this.waterLocations.lightDir, [0.5, -1.0, 0.5]);
+        
+        // Add new water configuration uniforms
+        this.gl.uniform1f(this.waterLocations.waveHeight, this.waterConfig.waveHeight);
+        this.gl.uniform1f(this.waterLocations.transparency, this.waterConfig.transparency);
+        this.gl.uniform1f(this.waterLocations.reflectivity, this.waterConfig.reflectivity);
+        this.gl.uniform3fv(this.waterLocations.waterColor, this.waterConfig.waterColor);
+        this.gl.uniform1f(this.waterLocations.waveDensity, this.waterConfig.waveDensity);
+
+        // Set up attributes
+        this.setupAttributes();
+        
+        // Draw water
+        this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.waterBuffers.indices);
+        this.gl.drawElements(this.gl.TRIANGLES, this.waterIndexCount, this.gl.UNSIGNED_SHORT, 0);
+
+        // Cleanup
+        this.gl.depthMask(true);
+        this.gl.disable(this.gl.BLEND);
+    }
+
+    setupAttributes() {
+        // Helper method to set up vertex attributes
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.waterBuffers.position);
+        this.gl.vertexAttribPointer(this.waterLocations.position, 3, this.gl.FLOAT, false, 0, 0);
+        this.gl.enableVertexAttribArray(this.waterLocations.position);
+
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.waterBuffers.normal);
+        this.gl.vertexAttribPointer(this.waterLocations.normal, 3, this.gl.FLOAT, false, 0, 0);
+        this.gl.enableVertexAttribArray(this.waterLocations.normal);
+
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.waterBuffers.texCoord);
+        this.gl.vertexAttribPointer(this.waterLocations.texCoord, 2, this.gl.FLOAT, false, 0, 0);
+        this.gl.enableVertexAttribArray(this.waterLocations.texCoord);
+    }
+
+    updateBuffersWithOcean(ocean) {
+        if (!ocean.triangles?.length) return;
+        
+        const positions = new Float32Array(ocean.triangles.length * 9);
+        const normals = new Float32Array(ocean.triangles.length * 9);
+        const indices = new Uint16Array(ocean.triangles.length * 3);
+        
+        ocean.triangles.forEach((triangle, i) => {
+            const baseIndex = i * 9;
+            for (let j = 0; j < 3; j++) {
+                // Add subtle wave movement
+                const offset = Math.sin(Date.now() * 0.001 + triangle.vertices[j].x * 0.1) * this.waterConfig.waveHeight;
+                
+                positions[baseIndex + j*3] = triangle.vertices[j].x;
+                positions[baseIndex + j*3 + 1] = triangle.vertices[j].y + offset + ocean.body.position.y;
+                positions[baseIndex + j*3 + 2] = triangle.vertices[j].z;
+                
+                normals[baseIndex + j*3] = triangle.normal.x;
+                normals[baseIndex + j*3 + 1] = triangle.normal.y;
+                normals[baseIndex + j*3 + 2] = triangle.normal.z;
+                
+                indices[i*3 + j] = i*3 + j;
+            }
+        });
+
+        this.waterIndexCount = indices.length;
+        
+        // Use DYNAMIC_DRAW for constantly updating buffers
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.waterBuffers.position);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.DYNAMIC_DRAW);
+        
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.waterBuffers.normal);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, normals, this.gl.DYNAMIC_DRAW);
+        
+        this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.waterBuffers.indices);
+        this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, indices, this.gl.DYNAMIC_DRAW);
+    }
+}

package/actionengine/display/graphics/renderers/actionrenderer3D/weatherrenderer3D.js

@@ -0,0 +1,87 @@
+// actionengine/display/graphics/renderers/actionrenderer3D/weatherrenderer3D.js
+class WeatherRenderer3D {
+    constructor(gl, programManager) {
+        this.gl = gl;
+        this.programManager = programManager;
+
+        // Get particle programs and locations
+        this.particleProgram = this.programManager.getParticleProgram();
+        this.particleLocations = this.programManager.getParticleLocations();
+
+        // Create buffers for particles
+        this.particleBuffers = {
+            position: this.gl.createBuffer(),
+            size: this.gl.createBuffer(),
+            color: this.gl.createBuffer()
+        };
+    }
+
+    render(weatherSystem, camera) {
+        if (!weatherSystem || !weatherSystem.particleEmitter) {
+            return;
+        }
+
+        const particles = weatherSystem.particleEmitter.getParticles();
+        if (particles.length === 0) {
+            return;
+        }
+
+        // Update particle buffers
+        const positions = new Float32Array(particles.length * 3);
+        const sizes = new Float32Array(particles.length);
+        const colors = new Float32Array(particles.length * 4);
+
+        particles.forEach((particle, i) => {
+            positions[i * 3] = particle.position.x;
+            positions[i * 3 + 1] = particle.position.y;
+            positions[i * 3 + 2] = particle.position.z;
+
+            sizes[i] = particle.size;
+
+            // Assuming rain particles are bluish
+            colors[i * 4] = 0.7;     // R
+            colors[i * 4 + 1] = 0.7; // G
+            colors[i * 4 + 2] = 1.0; // B
+            colors[i * 4 + 3] = particle.alpha; // A
+        });
+
+        // Set up WebGL state for particle rendering
+        this.gl.enable(this.gl.BLEND);
+        this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
+
+        // Use particle shader
+        this.gl.useProgram(this.particleProgram);
+
+        // Set matrices
+        const projection = Matrix4.perspective(Matrix4.create(), camera.fov, Game.WIDTH / Game.HEIGHT, 0.1, 10000.0);
+        const view = Matrix4.create();
+        Matrix4.lookAt(view, camera.position.toArray(), camera.target.toArray(), camera.up.toArray());
+
+        this.gl.uniformMatrix4fv(this.particleLocations.projectionMatrix, false, projection);
+        this.gl.uniformMatrix4fv(this.particleLocations.viewMatrix, false, view);
+
+        // Update and bind position buffer
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.particleBuffers.position);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.DYNAMIC_DRAW);
+        this.gl.vertexAttribPointer(this.particleLocations.position, 3, this.gl.FLOAT, false, 0, 0);
+        this.gl.enableVertexAttribArray(this.particleLocations.position);
+
+        // Update and bind size buffer
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.particleBuffers.size);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, sizes, this.gl.DYNAMIC_DRAW);
+        this.gl.vertexAttribPointer(this.particleLocations.size, 1, this.gl.FLOAT, false, 0, 0);
+        this.gl.enableVertexAttribArray(this.particleLocations.size);
+
+        // Update and bind color buffer
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.particleBuffers.color);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, colors, this.gl.DYNAMIC_DRAW);
+        this.gl.vertexAttribPointer(this.particleLocations.color, 4, this.gl.FLOAT, false, 0, 0);
+        this.gl.enableVertexAttribArray(this.particleLocations.color);
+
+        // Draw particles
+        this.gl.drawArrays(this.gl.POINTS, 0, particles.length);
+
+        // Cleanup
+        this.gl.disable(this.gl.BLEND);
+    }
+}