action-engine-js 1.0.0

package/actionengine/display/graphics/texture/proceduraltexture.js

@@ -0,0 +1,192 @@
+// actionengine/display/graphics/texture/proceduraltexture.js
+class ProceduralTexture {
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
+        this.data = new Uint8ClampedArray(width * height * 4);
+        this.widthMask = width - 1; // For power-of-2 textures, faster modulo
+        this.heightMask = height - 1;
+    }
+
+    getPixel(x, y) {
+        // Fast modulo for power-of-2 textures using bitwise AND
+        const tx = x & this.widthMask;
+        const ty = y & this.heightMask;
+        const i = (ty * this.width + tx) * 4;
+        return {
+            r: this.data[i],
+            g: this.data[i + 1],
+            b: this.data[i + 2]
+        };
+    }
+
+    generateCheckerboard() {
+        const size = 4; // Make checkers a bit bigger
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                const isEven = ((x >> 2) + (y >> 2)) & 1; // Simpler calculation using bitwise
+                const i = (y * this.width + x) * 4;
+                if (isEven) {
+                    this.data[i] = 0; // Blue square
+                    this.data[i + 1] = 0;
+                    this.data[i + 2] = 255;
+                } else {
+                    this.data[i] = 255; // Purple square
+                    this.data[i + 1] = 0;
+                    this.data[i + 2] = 255;
+                }
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+
+    generateGrass() {
+        const baseColor = { r: 34, g: 139, b: 34 };
+        // Pre-calculate a noise table for faster lookup
+        const noiseTable = new Uint8Array(256);
+        for (let i = 0; i < 256; i++) {
+            noiseTable[i] = Math.floor(Math.random() * 30);
+        }
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                const variation = noiseTable[(x * 7 + y * 13) & 255];
+                const i = (y * this.width + x) * 4;
+                this.data[i] = Math.min(255, baseColor.r + variation);
+                this.data[i + 1] = Math.min(255, baseColor.g + variation);
+                this.data[i + 2] = Math.min(255, baseColor.b + variation);
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+
+    generateWater() {
+        const baseColor = { r: 0, g: 100, b: 255 }; // Keeping your bright blue base
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                // Just gentle noise for natural water look
+                const noise = Math.random() * 15 - 7;
+
+                const i = (y * this.width + x) * 4;
+                this.data[i] = Math.min(255, baseColor.r + noise);
+                this.data[i + 1] = Math.min(255, baseColor.g + noise);
+                this.data[i + 2] = Math.min(255, baseColor.b + noise);
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+
+    generateDeepWater() {
+        const baseColor = { r: 0, g: 21, b: 37 }; // Dark blue base
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                // Just subtle random variation
+                const variation = Math.random() * 15 - 7;
+
+                const i = (y * this.width + x) * 4;
+                this.data[i] = Math.min(255, baseColor.r + variation);
+                this.data[i + 1] = Math.min(255, baseColor.g + variation);
+                this.data[i + 2] = Math.min(255, baseColor.b + variation);
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+
+    generateSand() {
+        const baseColor = { r: 210, g: 185, b: 139 }; // Sandy beige
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                // Create grainy noise pattern
+                const noise = Math.random() * 20 - 10;
+
+                const i = (y * this.width + x) * 4;
+                this.data[i] = Math.min(255, baseColor.r + noise);
+                this.data[i + 1] = Math.min(255, baseColor.g + noise);
+                this.data[i + 2] = Math.min(255, baseColor.b + noise);
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+
+    generateRock() {
+        const baseColor = { r: 115, g: 109, b: 105 }; // Gray
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                // Just natural noise variation
+                const noise = Math.random() * 35 - 17;
+
+                const i = (y * this.width + x) * 4;
+                this.data[i] = Math.min(255, baseColor.r + noise);
+                this.data[i + 1] = Math.min(255, baseColor.g + noise);
+                this.data[i + 2] = Math.min(255, baseColor.b + noise);
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+
+    generateHighlandGrass() {
+        const baseColor = { r: 45, g: 89, b: 41 }; // Darker green
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                // Simple noise variation for natural look
+                const noise = Math.random() * 35 - 17;
+
+                const i = (y * this.width + x) * 4;
+                this.data[i] = Math.min(255, baseColor.r + noise);
+                this.data[i + 1] = Math.min(255, baseColor.g + noise);
+                this.data[i + 2] = Math.min(255, baseColor.b + noise);
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+
+    generateTreeline() {
+        const baseColor = { r: 116, g: 71, b: 0 }; // Brown base
+        const grayColor = { r: 115, g: 109, b: 105 }; // Gray instead of green
+
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                // Smooth blend between brown and gray
+                const blendFactor = Math.random();
+                const noise = Math.random() * 20 - 10;
+
+                const i = (y * this.width + x) * 4;
+                this.data[i] = Math.min(255, baseColor.r * blendFactor + grayColor.r * (1 - blendFactor) + noise);
+                this.data[i + 1] = Math.min(255, baseColor.g * blendFactor + grayColor.g * (1 - blendFactor) + noise);
+                this.data[i + 2] = Math.min(255, baseColor.b * blendFactor + grayColor.b * (1 - blendFactor) + noise);
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+
+    generateDunes() {
+        const baseColor = { r: 230, g: 185, b: 115 }; // More orange/reddish sand color
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                // Natural noise variation
+                const noise = Math.random() * 25 - 12;
+
+                const i = (y * this.width + x) * 4;
+                this.data[i] = Math.min(255, baseColor.r + noise);
+                this.data[i + 1] = Math.min(255, baseColor.g + noise);
+                this.data[i + 2] = Math.min(255, baseColor.b + noise);
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+
+    generateSnow() {
+        const baseColor = { r: 232, g: 232, b: 232 }; // Very light gray/white
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                // Just subtle noise variation
+                const noise = Math.random() * 12 - 6;
+
+                const i = (y * this.width + x) * 4;
+                this.data[i] = Math.min(255, baseColor.r + noise);
+                this.data[i + 1] = Math.min(255, baseColor.g + noise);
+                this.data[i + 2] = Math.min(255, baseColor.b + noise);
+                this.data[i + 3] = 255;
+            }
+        }
+    }
+}

package/actionengine/display/graphics/texture/texturemanager.js

@@ -0,0 +1,242 @@
+// actionengine/display/graphics/texture/texturemanager.js
+class TextureManager {
+    constructor(gl) {
+        this.gl = gl;
+        this.isWebGL2 = gl.getParameter(gl.VERSION).includes("WebGL 2.0");
+        this.textureArray = this.createTextureArray();
+        
+        // Create material properties texture
+        this.materialPropertiesTexture = this.createMaterialPropertiesTexture();
+        
+        // Flag to control per-texture material usage
+        this.usePerTextureMaterials = true;
+        
+        // Add a flag to track if material properties need updating
+        this.materialPropertiesDirty = true;
+        
+        // Store a hash of the last material properties to detect changes
+        this._lastMaterialPropertiesHash = 0;
+    }
+
+    createTextureArray() {
+        if (this.isWebGL2) {
+            return this.createWebGL2TextureArray();
+        } else {
+            return this.createWebGL1Texture();
+        }
+    }
+
+    createWebGL2TextureArray() {
+        console.log('[TextureManager] Creating WebGL2 texture array');
+        const array = this.gl.createTexture();
+        this.gl.bindTexture(this.gl.TEXTURE_2D_ARRAY, array);
+
+        // All our procedural textures are 256x256
+        this.gl.texImage3D(
+            this.gl.TEXTURE_2D_ARRAY,
+            0, // mip level
+            this.gl.RGBA, // internal format
+            256, // width
+            256, // height
+            textureRegistry.getTextureCount(), // number of layers
+            0, // border
+            this.gl.RGBA, // format
+            this.gl.UNSIGNED_BYTE, // type
+            null // data
+        );
+
+        // Load each texture as a layer
+        textureRegistry.textureList.forEach((textureName, i) => {
+            const proceduralTexture = textureRegistry.get(textureName);
+
+            // Convert to RGBA format
+            const rgbaData = new Uint8Array(proceduralTexture.width * proceduralTexture.height * 4);
+            for (let j = 0; j < proceduralTexture.data.length; j += 4) {
+                rgbaData[j] = proceduralTexture.data[j]; // R
+                rgbaData[j + 1] = proceduralTexture.data[j + 1]; // G
+                rgbaData[j + 2] = proceduralTexture.data[j + 2]; // B
+                rgbaData[j + 3] = 255; // A
+            }
+
+            this.gl.texSubImage3D(
+                this.gl.TEXTURE_2D_ARRAY,
+                0, // mip level
+                0, // x offset
+                0, // y offset
+                i, // z offset (layer)
+                256, // width
+                256, // height
+                1, // depth
+                this.gl.RGBA,
+                this.gl.UNSIGNED_BYTE,
+                rgbaData
+            );
+        });
+
+        // Set texture parameters
+        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT);
+        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT);
+
+        return array;
+    }
+
+    createWebGL1Texture() {
+        console.log('[TextureManager] Creating WebGL1 basic texture (no array support)');
+        // For WebGL1, just use the first texture in the registry
+        const array = this.gl.createTexture();
+        this.gl.bindTexture(this.gl.TEXTURE_2D, array);
+        
+        // Get the first texture (grass)
+        const proceduralTexture = textureRegistry.get(textureRegistry.textureList[0]);
+        
+        // Convert to RGBA format
+        const rgbaData = new Uint8Array(proceduralTexture.width * proceduralTexture.height * 4);
+        for (let j = 0; j < proceduralTexture.data.length; j += 4) {
+            rgbaData[j] = proceduralTexture.data[j]; // R
+            rgbaData[j + 1] = proceduralTexture.data[j + 1]; // G
+            rgbaData[j + 2] = proceduralTexture.data[j + 2]; // B
+            rgbaData[j + 3] = 255; // A
+        }
+        
+        this.gl.texImage2D(
+            this.gl.TEXTURE_2D,
+            0, // mip level
+            this.gl.RGBA, // internal format
+            256, // width
+            256, // height
+            0, // border
+            this.gl.RGBA, // format
+            this.gl.UNSIGNED_BYTE, // type
+            rgbaData // data
+        );
+        
+        // Set texture parameters
+        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.REPEAT);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT);
+        
+        return array;
+    }
+    
+    // Create a texture to store material properties for each texture
+    createMaterialPropertiesTexture() {
+        const gl = this.gl;
+        console.log('[TextureManager] Creating material properties texture');
+        
+        // Create a texture for material properties
+        // Each texel contains [roughness, metallic, baseReflectivity, reserved]
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        
+        // Get material properties data from texture registry
+        const textureCount = textureRegistry.getTextureCount();
+        const data = textureRegistry.getMaterialPropertiesArray();
+        
+        // Create and set texture data based on WebGL version
+        if (this.isWebGL2) {
+            gl.texImage2D(
+                gl.TEXTURE_2D, 
+                0, // mip level
+                gl.RGBA32F, // internal format - use float format for WebGL2
+                textureCount, // width (one texel per texture)
+                1, // height
+                0, // border
+                gl.RGBA, // format
+                gl.FLOAT, // type
+                data // data
+            );
+        } else {
+            // WebGL 1.0 fallback - try to use OES_texture_float extension
+            const ext = gl.getExtension('OES_texture_float');
+            if (ext) {
+                gl.texImage2D(
+                    gl.TEXTURE_2D, 
+                    0, // mip level
+                    gl.RGBA, // internal format
+                    textureCount, // width (one texel per texture)
+                    1, // height
+                    0, // border
+                    gl.RGBA, // format
+                    gl.FLOAT, // type
+                    data // data
+                );
+            } else {
+                console.warn('[TextureManager] Float textures not supported by this device. Falling back to global material properties.');
+                this.usePerTextureMaterials = false;
+                return null;
+            }
+        }
+        
+        // Set texture parameters - we need NEAREST filter for exact sampling
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        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);
+        
+        return texture;
+    }
+    
+    // Update the material properties texture with current values from the registry
+    updateMaterialPropertiesTexture() {
+        if (!this.materialPropertiesTexture || !this.usePerTextureMaterials) {
+            return;
+        }
+        
+        const gl = this.gl;
+        
+        // Get the current material properties data
+        const textureCount = textureRegistry.getTextureCount();
+        const data = textureRegistry.getMaterialPropertiesArray();
+        
+        // IMPORTANT: Save WebGL state before modifying
+        const previousTexture = gl.getParameter(gl.TEXTURE_BINDING_2D);
+        const previousActiveTexture = gl.getParameter(gl.ACTIVE_TEXTURE);
+        
+        // Bind and update the texture
+        gl.bindTexture(gl.TEXTURE_2D, this.materialPropertiesTexture);
+        
+        if (this.isWebGL2) {
+            gl.texSubImage2D(
+                gl.TEXTURE_2D, 
+                0, // mip level
+                0, // x offset
+                0, // y offset
+                textureCount, // width
+                1, // height
+                gl.RGBA, // format
+                gl.FLOAT, // type
+                data // data
+            );
+        } else {
+            // For WebGL1, we need to re-specify the entire texture
+            gl.texImage2D(
+                gl.TEXTURE_2D, 
+                0, // mip level
+                gl.RGBA, // internal format
+                textureCount, // width
+                1, // height
+                0, // border
+                gl.RGBA, // format
+                gl.FLOAT, // type
+                data // data
+            );
+        }
+        
+        // IMPORTANT: Restore WebGL state when done
+        gl.activeTexture(previousActiveTexture);
+        gl.bindTexture(gl.TEXTURE_2D, previousTexture);
+    }
+    
+    // Toggle per-texture material usage
+    togglePerTextureMaterials(enabled) {
+        this.usePerTextureMaterials = enabled;
+        
+        // If enabling and we don't have a material texture, create one
+        if (enabled && !this.materialPropertiesTexture) {
+            this.materialPropertiesTexture = this.createMaterialPropertiesTexture();
+        }
+    }
+}

package/actionengine/display/graphics/texture/textureregistry.js

@@ -0,0 +1,177 @@
+class TextureRegistry {
+
+	constructor() {
+		this.textures = new Map();
+		this.textureList = []; // Array to maintain texture order
+
+		// Add material properties storage for each texture
+		this.materialProperties = new Map();
+
+		// Default material properties (used when not specified for a texture)
+		// Note: Roughness is from 0.0 (mirror-like) to 1.0 (completely rough/diffuse)
+		// The shader inverts roughness internally so 0 = reflective, 1 = diffuse
+		this.defaultMaterialProperties = {
+			roughness: 0.0,  // Lower values = more reflective
+			metallic: 0.0,  // Higher values = more metallic
+			baseReflectivity: 0.0  // Higher values = more reflective at glancing angles
+		};
+
+		this.generateTextures();
+	}
+
+	generateTextures() {
+		// Create textures in a specific order for indexing
+		const grass = new ProceduralTexture(256, 256);
+		grass.generateGrass();
+		this.addTexture("grass", grass);
+
+		const water = new ProceduralTexture(256, 256);
+		water.generateWater();
+		this.addTexture("water", water);
+
+		const deepWater = new ProceduralTexture(256, 256);
+		deepWater.generateDeepWater();
+		this.addTexture("deepwater", deepWater);
+
+		const sand = new ProceduralTexture(256, 256);
+		sand.generateSand();
+		this.addTexture("sand", sand);
+
+		const dunes = new ProceduralTexture(256, 256);
+		dunes.generateDunes();
+		this.addTexture("dunes", dunes);
+
+		const rock = new ProceduralTexture(256, 256);
+		rock.generateRock();
+		this.addTexture("rock", rock);
+
+		const highland = new ProceduralTexture(256, 256);
+		highland.generateHighlandGrass();
+		this.addTexture("highland", highland);
+
+		const treeline = new ProceduralTexture(256, 256);
+		treeline.generateTreeline();
+		this.addTexture("treeline", treeline);
+
+		const snow = new ProceduralTexture(256, 256);
+		snow.generateSnow();
+		this.addTexture("snow", snow);
+
+		this.setMaterialProperties("grass", { roughness: 1.0, metallic: 0.0, baseReflectivity: 0.0 });
+		this.setMaterialProperties("water", { roughness: 0.08, metallic: 0.0, baseReflectivity: 0.72 });
+		this.setMaterialProperties("deepwater", { roughness: 0.05, metallic: 0.0, baseReflectivity: 0.8 });
+		this.setMaterialProperties("sand", { roughness: 0.54, metallic: 0.0, baseReflectivity: 0.21 });
+		this.setMaterialProperties("dunes", { roughness: 0.75, metallic: 0.2, baseReflectivity: 0.42 });
+		this.setMaterialProperties("rock", { roughness: 0.9, metallic: 0.05, baseReflectivity: 0.3 });
+		this.setMaterialProperties("highland", { roughness: 0.0, metallic: 0.0, baseReflectivity: 0.0 });
+		this.setMaterialProperties("treeline", { roughness: 0.7, metallic: 0.0, baseReflectivity: 0.2 });
+		this.setMaterialProperties("snow", { roughness: 0.65, metallic: 0.1, baseReflectivity: 0.09 });
+	}
+
+	addTexture(name, texture) {
+		this.textures.set(name, texture);
+		this.textureList.push(name);
+
+		// Initialize material properties with defaults
+		if (!this.materialProperties.has(name)) {
+			this.materialProperties.set(name, { ...this.defaultMaterialProperties });
+		}
+	}
+
+	get(type) {
+		return this.textures.get(type);
+	}
+
+	getTextureIndex(textureName) {
+		return this.textureList.indexOf(textureName);
+	}
+
+	getTextureByIndex(index) {
+		return this.textures.get(this.textureList[index]);
+	}
+
+	getTextureCount() {
+		return this.textureList.length;
+	}
+
+	// Get material properties for a texture
+	getMaterialProperties(textureName) {
+		if (this.materialProperties.has(textureName)) {
+			return this.materialProperties.get(textureName);
+		}
+		return { ...this.defaultMaterialProperties };
+	}
+
+	// Get material properties by texture index
+	getMaterialPropertiesByIndex(index) {
+		if (index >= 0 && index < this.textureList.length) {
+			const textureName = this.textureList[index];
+			return this.getMaterialProperties(textureName);
+		}
+		return { ...this.defaultMaterialProperties };
+	}
+
+	// Set material properties for a texture
+	setMaterialProperties(textureName, properties) {
+		if (!this.textures.has(textureName)) {
+			console.warn(`Texture '${textureName}' does not exist.`);
+			return;
+		}
+
+		// Get existing properties or default ones
+		const existing = this.materialProperties.get(textureName) || { ...this.defaultMaterialProperties };
+		
+
+
+		// Update with new properties
+		this.materialProperties.set(textureName, {
+			...existing,
+			...properties
+		});
+		
+		// Material properties have been updated
+	}
+
+	// Update default material properties (global settings)
+	setDefaultMaterialProperties(properties) {
+		// Check if any property is actually changing
+		let hasChanges = false;
+		Object.keys(properties).forEach(key => {
+			if (properties[key] !== this.defaultMaterialProperties[key]) {
+				hasChanges = true;
+			}
+		});
+		
+		// If nothing is changing, don't update
+		if (!hasChanges) {
+			return;
+		}
+		
+		this.defaultMaterialProperties = {
+			...this.defaultMaterialProperties,
+			...properties
+		};
+		
+		// Material properties have been updated
+	}
+
+	// Get all material properties as a flat array for use in a texture
+	getMaterialPropertiesArray() {
+		const textureCount = this.textureList.length;
+		const data = new Float32Array(textureCount * 4); // 4 components per texture (roughness, metallic, baseReflectivity, reserved)
+
+		for (let i = 0; i < textureCount; i++) {
+			const textureName = this.textureList[i];
+			const props = this.getMaterialProperties(textureName);
+
+			// Set values in the array
+			data[i * 4] = props.roughness;
+			data[i * 4 + 1] = props.metallic;
+			data[i * 4 + 2] = props.baseReflectivity;
+			data[i * 4 + 3] = 0; // Reserved for future use
+		}
+
+		return data;
+	}
+}
+const textureRegistry = new TextureRegistry(); // global