action-engine-js 1.0.0

package/actionengine/display/graphics/actionmodel3D.js

@@ -0,0 +1,191 @@
+class ActionModel3D {
+    constructor() {
+        // Node structure
+        this.nodes = [];  // All nodes with full properties 
+        this.rootNodes = [];  // Top-level node indices
+        this.meshNodes = [];  // Nodes with meshes
+        this.jointNodes = []; // Nodes used as bones
+        this.skinNodes = [];  // Nodes using skins
+        this.nodeMap = {};    // Look up nodes by name
+
+        // Mesh data
+        this.meshes = [];     // Complete mesh data for each mesh
+        this.originalTriangles = [];  // Initial triangle geometry
+        this.triangles = [];  // Current triangle geometry
+        
+        // Original skin definitions 
+        this.skins = [];      // Complete skin definitions from GLB
+
+        // Bone/joint relationships
+        this.jointToSkinIndex = {};    // Which skin each joint belongs to
+        this.nodeToSkinIndex = {};     // Which skin each node uses
+        this.inverseBindMatrices = {}; // Joint index -> its starting pose matrix
+        
+        // Per-vertex skinning data
+        this.vertexJoints = [];  // Which joints affect each vertex
+        this.vertexWeights = []; // How much each joint affects each vertex
+
+        // Animation data
+        this.animations = {};    // All animation data
+        
+        this.vertexToTriangleMap = {}; // Maps vertex positions to array of triangle indices that use that vertex
+        this.nodeToVertexMap = {}; // Maps node indices to Set of vertex positions influenced by that node based on skinning data
+    }
+    
+    createBoxModel(size, height) {
+        // Character model is made out of Triangles
+        const halfSize = size / 2;
+        const halfHeight = height / 2;
+        const yOffset = 0;
+        // Define vertices
+        const v = {
+            ftl: new Vector3(-halfSize, halfHeight + yOffset, halfSize),
+            ftr: new Vector3(halfSize, halfHeight + yOffset, halfSize),
+            fbl: new Vector3(-halfSize, -halfHeight + yOffset, halfSize),
+            fbr: new Vector3(halfSize, -halfHeight + yOffset, halfSize),
+            btl: new Vector3(-halfSize, halfHeight + yOffset, -halfSize),
+            btr: new Vector3(halfSize, halfHeight + yOffset, -halfSize),
+            bbl: new Vector3(-halfSize, -halfHeight + yOffset, -halfSize),
+            bbr: new Vector3(halfSize, -halfHeight + yOffset, -halfSize)
+        };
+        return [
+            // Front face (yellow)
+            new Triangle(v.ftl, v.fbl, v.ftr, "#FFFF00"),
+            new Triangle(v.fbl, v.fbr, v.ftr, "#FFFF00"),
+            // Back face
+            new Triangle(v.btr, v.bbl, v.btl, "#FF0000"),
+            new Triangle(v.btr, v.bbr, v.bbl, "#FF0000"),
+            // Right face
+            new Triangle(v.ftr, v.fbr, v.btr, "#FF0000"),
+            new Triangle(v.fbr, v.bbr, v.btr, "#FF0000"),
+            // Left face
+            new Triangle(v.btl, v.bbl, v.ftl, "#FF0000"),
+            new Triangle(v.ftl, v.bbl, v.fbl, "#FF0000"),
+            // Top face
+            new Triangle(v.ftl, v.ftr, v.btr, "#FF0000"),
+            new Triangle(v.ftl, v.btr, v.btl, "#FF0000"),
+            // Bottom face
+            new Triangle(v.fbl, v.bbl, v.fbr, "#FF0000"),
+            new Triangle(v.bbl, v.bbr, v.fbr, "#FF0000")
+        ];
+    }
+
+    createCapsuleModel(size, height) {
+        const segments = 16; // Number of segments around the capsule
+        const triangles = [];
+        const radius = size / 2;
+        const cylinderHeight = height - size; // Subtract diameter to account for hemispheres
+        const halfCylinderHeight = cylinderHeight / 2;
+
+        // Helper function to create vertex on hemisphere
+        const createSphereVertex = (phi, theta, yOffset) => {
+            return new Vector3(
+                radius * Math.sin(phi) * Math.cos(theta),
+                yOffset + radius * Math.cos(phi),
+                radius * Math.sin(phi) * Math.sin(theta)
+            );
+        };
+
+        // Create top hemisphere
+        for (let lat = 0; lat <= segments / 2; lat++) {
+            const phi = (lat / segments) * Math.PI;
+            const nextPhi = ((lat + 1) / segments) * Math.PI;
+
+            for (let lon = 0; lon < segments; lon++) {
+                const theta = (lon / segments) * 2 * Math.PI;
+                const nextTheta = ((lon + 1) / segments) * 2 * Math.PI;
+
+                if (lat === 0) {
+                    // Top cap triangle (this one was correct)
+                    triangles.push(
+                        new Triangle(
+                            new Vector3(0, halfCylinderHeight + radius, 0),
+                            createSphereVertex(Math.PI / segments, nextTheta, halfCylinderHeight),
+                            createSphereVertex(Math.PI / segments, theta, halfCylinderHeight),
+                            "#FFFF00"
+                        )
+                    );
+                } else {
+                    // Hemisphere body triangles (fixing winding order)
+                    const v1 = createSphereVertex(phi, theta, halfCylinderHeight);
+                    const v2 = createSphereVertex(nextPhi, theta, halfCylinderHeight);
+                    const v3 = createSphereVertex(nextPhi, nextTheta, halfCylinderHeight);
+                    const v4 = createSphereVertex(phi, nextTheta, halfCylinderHeight);
+                    triangles.push(new Triangle(v1, v3, v2, "#FFFF00"));
+                    triangles.push(new Triangle(v1, v4, v3, "#FFFF00"));
+                }
+            }
+        }
+
+        // Create cylinder body
+        for (let lon = 0; lon < segments; lon++) {
+            const theta = (lon / segments) * 2 * Math.PI;
+            const nextTheta = ((lon + 1) / segments) * 2 * Math.PI;
+
+            const topLeft = new Vector3(radius * Math.cos(theta), halfCylinderHeight, radius * Math.sin(theta));
+            const topRight = new Vector3(
+                radius * Math.cos(nextTheta),
+                halfCylinderHeight,
+                radius * Math.sin(nextTheta)
+            );
+            const bottomLeft = new Vector3(radius * Math.cos(theta), -halfCylinderHeight, radius * Math.sin(theta));
+            const bottomRight = new Vector3(
+                radius * Math.cos(nextTheta),
+                -halfCylinderHeight,
+                radius * Math.sin(nextTheta)
+            );
+
+            triangles.push(new Triangle(topLeft, topRight, bottomLeft, "#FF0000"));
+            triangles.push(new Triangle(bottomLeft, topRight, bottomRight, "#FF0000"));
+        }
+
+        // Create bottom hemisphere
+        // Stop BEFORE the last segment
+        for (let lat = segments / 2; lat < segments - 1; lat++) {
+            const phi = (lat / segments) * Math.PI;
+            const nextPhi = ((lat + 1) / segments) * Math.PI;
+
+            for (let lon = 0; lon < segments; lon++) {
+                const theta = (lon / segments) * 2 * Math.PI;
+                const nextTheta = ((lon + 1) / segments) * 2 * Math.PI;
+
+                if (lat === segments - 1) {
+                    // Bottom cap triangle
+                    triangles.push(
+                        new Triangle(
+                            new Vector3(0, -halfCylinderHeight - radius, 0),
+                            createSphereVertex(Math.PI - Math.PI / segments, theta, -halfCylinderHeight),
+                            createSphereVertex(Math.PI - Math.PI / segments, nextTheta, -halfCylinderHeight),
+                            "#FF0000"
+                        )
+                    );
+                } else {
+                    // Hemisphere body triangles
+                    const v1 = createSphereVertex(phi, theta, -halfCylinderHeight);
+                    const v2 = createSphereVertex(nextPhi, theta, -halfCylinderHeight);
+                    const v3 = createSphereVertex(nextPhi, nextTheta, -halfCylinderHeight);
+                    const v4 = createSphereVertex(phi, nextTheta, -halfCylinderHeight);
+                    triangles.push(new Triangle(v1, v3, v2, "#FF0000"));
+                    triangles.push(new Triangle(v1, v4, v3, "#FF0000"));
+                }
+            }
+        }
+
+        // Separately create just the bottom cap triangles once
+        for (let lon = 0; lon < segments; lon++) {
+            const theta = (lon / segments) * 2 * Math.PI;
+            const nextTheta = ((lon + 1) / segments) * 2 * Math.PI;
+
+            triangles.push(
+                new Triangle(
+                    new Vector3(0, -halfCylinderHeight - radius, 0),
+                    createSphereVertex(Math.PI - Math.PI / segments, theta, -halfCylinderHeight),
+                    createSphereVertex(Math.PI - Math.PI / segments, nextTheta, -halfCylinderHeight),
+                    "#FF0000"
+                )
+            );
+        }
+
+        return triangles;
+    }
+}

package/actionengine/display/graphics/actionsprite3D.js

@@ -0,0 +1,230 @@
+// actionengine/display/graphics/actionsprite3D.js
+
+class ActionSprite3D extends RenderableObject {
+    constructor(options = {}) {
+        super();
+
+        // Required options
+        if (!options.base64Data) {
+            throw new Error('ActionSprite3D: base64Data is required');
+        }
+
+        // Store sprite properties
+        this.base64Data = options.base64Data;
+        this.position = options.position || new Vector3(0, 0, 0);
+        this.width = options.width || 1.0;
+        this.height = options.height || 1.0;
+        this.color = options.color || [1.0, 1.0, 1.0]; // RGB tint
+        this.alpha = options.alpha !== undefined ? options.alpha : 1.0;
+        this.blendMode = options.blendMode || 'normal'; // 'normal', 'additive', 'multiply'
+
+        // Billboard mode - defaults to true for backward compatibility
+        this.isBillboard = options.billboard !== undefined ? options.billboard : true;
+
+        // Sprite orientation (for non-billboard mode)
+        this.forward = options.forward || new Vector3(0, 0, 1); // Default facing positive Z
+        this.up = options.up || new Vector3(0, 1, 0); // Default up is positive Y
+
+        // Attachment properties
+        this.attachedTo = null;
+        this.localOffset = new Vector3(0, 0, 0);
+
+        // WebGL resources
+        this.texture = null;
+        this.isTextureLoaded = false;
+
+        // Create texture from base64 data
+        this._createTextureFromBase64();
+    }
+    
+    /**
+     * Create WebGL texture from base64 image data
+     * @private
+     */
+    _createTextureFromBase64() {
+        // Check if base64 data is placeholder or invalid
+        if (!this.base64Data || this.base64Data === "replace_this_base_64_string") {
+            console.warn('ActionSprite3D: Using placeholder base64 data, creating default texture');
+            this._createDefaultTexture();
+            return;
+        }
+        
+        // Create image element
+        const image = new Image();
+        
+        image.onload = () => {
+            // Will be set by the billboard renderer when GL context is available
+            this._imageData = image;
+            this.isTextureLoaded = true;
+        };
+        
+        image.onerror = () => {
+            console.error('ActionSprite3D: Failed to load image from base64 data, using fallback');
+            this._createDefaultTexture();
+        };
+        
+        // Set source as data URL
+        image.src = `data:image/png;base64,${this.base64Data}`;
+    }
+    
+    /**
+     * Create a default texture when base64 data is missing or invalid
+     * @private
+     */
+    _createDefaultTexture() {
+        // Create a small default texture (4x4 orange gradient)
+        const canvas = document.createElement('canvas');
+        canvas.width = 4;
+        canvas.height = 4;
+        const ctx = canvas.getContext('2d');
+        
+        // Create a simple gradient
+        const gradient = ctx.createLinearGradient(0, 0, 4, 4);
+        gradient.addColorStop(0, '#ff6600'); // Orange
+        gradient.addColorStop(1, '#ff3300'); // Red-orange
+        
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, 4, 4);
+        
+        this._imageData = canvas;
+        this.isTextureLoaded = true;
+    }
+    
+    /**
+     * Create the actual WebGL texture (called by renderer)
+     * @param {WebGLRenderingContext} gl - WebGL context
+     */
+    createWebGLTexture(gl) {
+        if (!this._imageData || this.texture) {
+            return;
+        }
+        
+        this.texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        
+        // Upload the image data
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._imageData);
+        
+        // Set texture parameters
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        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);
+        
+        // Unbind
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+    
+    /**
+     * Attach this sprite to another object with a local offset
+     * @param {Object} object - Object to attach to (must have position property)
+     * @param {Vector3} offset - Local offset from the object's position
+     */
+    attachTo(object, offset = new Vector3(0, 0, 0)) {
+        this.attachedTo = object;
+        this.localOffset = offset;
+    }
+    
+    /**
+     * Detach this sprite from any attached object
+     */
+    detach() {
+        this.attachedTo = null;
+        this.localOffset = new Vector3(0, 0, 0);
+    }
+    
+    /**
+     * Get the world position of this sprite
+     * @returns {Vector3} World position
+     */
+    getWorldPosition() {
+        if (this.attachedTo && this.attachedTo.position) {
+            // If attached to an object that has a transformVertex method (like Arwing),
+            // use it to properly transform the local offset
+            if (this.attachedTo.transformVertex) {
+                // Transform the local offset using the ship's transformation
+                const transformedOffset = this.attachedTo.transformVertex(this.localOffset);
+                // The transformVertex already includes position, so return it directly
+                return transformedOffset;
+            } else {
+                // Fallback to simple position + offset
+                return this.attachedTo.position.add(this.localOffset);
+            }
+        }
+        return this.position;
+    }
+    
+    /**
+     * Update sprite (called by rendering system)
+     * @param {number} deltaTime - Time since last update
+     */
+    update(deltaTime) {
+        // Override in subclasses for animation, etc.
+    }
+    
+    /**
+     * Set the color tint of the sprite
+     * @param {Array} color - RGB color array [r, g, b] with values 0-1
+     */
+    setColor(color) {
+        this.color = color;
+    }
+    
+    /**
+     * Set the alpha transparency of the sprite
+     * @param {number} alpha - Alpha value 0-1
+     */
+    setAlpha(alpha) {
+        this.alpha = Math.max(0, Math.min(1, alpha));
+    }
+    
+    /**
+     * Set the size of the sprite
+     * @param {number} width - Width in world units
+     * @param {number} height - Height in world units
+     */
+    setSize(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+    
+    /**
+     * Set the blend mode for rendering
+     * @param {string} mode - 'normal', 'additive', or 'multiply'
+     */
+    setBlendMode(mode) {
+        this.blendMode = mode;
+    }
+
+    /**
+     * Set the orientation of the sprite (for non-billboard mode)
+     * @param {Vector3} forward - Forward direction vector
+     * @param {Vector3} up - Up direction vector
+     */
+    setOrientation(forward, up = new Vector3(0, 1, 0)) {
+        this.forward = forward;
+        this.up = up;
+    }
+    
+    /**
+     * Cleanup WebGL resources
+     * @param {WebGLRenderingContext} gl - WebGL context
+     */
+    dispose(gl) {
+        if (this.texture) {
+            gl.deleteTexture(this.texture);
+            this.texture = null;
+        }
+    }
+    
+    /**
+     * Get model matrix (required by RenderableObject)
+     * For billboards, this is just the position
+     */
+    getModelMatrix() {
+        const matrix = Matrix4.create();
+        const worldPos = this.getWorldPosition();
+        Matrix4.translate(matrix, matrix, worldPos.toArray());
+        return matrix;
+    }
+}