@xeokit/xeokit-sdk 2.4.0-alpha-81 → 2.4.0-alpha-82

package/src/viewer/scene/geometry/VBOGeometry.js

@@ -0,0 +1,319 @@
+import {Geometry} from './Geometry.js';
+import {RenderState} from '../webgl/RenderState.js';
+import {ArrayBuf} from '../webgl/ArrayBuf.js';
+import {math} from '../math/math.js';
+import {stats} from '../stats.js';
+import {buildEdgeIndices} from '../math/buildEdgeIndices.js';
+import {geometryCompressionUtils} from '../math/geometryCompressionUtils.js';
+
+const memoryStats = stats.memory;
+const tempAABB = math.AABB3();
+
+/**
+ * @desc A {@link Geometry} that keeps its geometry data solely in GPU memory, without retaining it in browser memory.
+ *
+ * VBOGeometry uses less memory than {@link ReadableGeometry}, which keeps its geometry data in both browser and GPU memory.
+ *
+ * ## Usage
+ *
+ * Creating a {@link Mesh} with a VBOGeometry that defines a single triangle, plus a {@link PhongMaterial} with diffuse {@link Texture}:
+ *
+ * [[Run this example](/examples/#geometry_VBOGeometry)]
+ *
+ * ````javascript
+ * import {Viewer, Mesh, VBOGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *         canvasId: "myCanvas"
+ *     });
+ *
+ * new Mesh(viewer.scene, {
+ *         geometry: new VBOGeometry(viewer.scene, {
+ *             primitive: "triangles",
+ *             positions: [0.0, 3, 0.0, -3, -3, 0.0, 3, -3, 0.0],
+ *             normals: [0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0],
+ *             uv: [0.0, 0.0, 0.5, 1.0, 1.0, 0.0],
+ *             indices: [0, 1, 2]
+ *         }),
+ *         material: new PhongMaterial(viewer.scene, {
+ *             diffuseMap: new Texture(viewer.scene, {
+ *                 src: "textures/diffuse/uvGrid2.jpg"
+ *             }),
+ *             backfaces: true
+ *         })
+ *     });
+ * ````
+ */
+class VBOGeometry extends Geometry {
+
+    /**
+     @private
+     */
+    get type() {
+        return "VBOGeometry";
+    }
+
+    /**
+     * @private
+     * @returns {Boolean}
+     */
+    get isVBOGeometry() {
+        return true;
+    }
+
+    /**
+     * @constructor
+     * @param {Component} owner Owner component. When destroyed, the owner will destroy this component as well.
+     * @param {*} [cfg] Configs
+     * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+     * @param {String} [cfg.primitive="triangles"]  The primitive type. Accepted values are 'points', 'lines', 'line-loop', 'line-strip', 'triangles', 'triangle-strip' and 'triangle-fan'.
+     * @param {Number[]} [cfg.positions]  Positions array.
+     * @param {Number[]} [cfg.normals]  Vertex normal vectors array.
+     * @param {Number[]} [cfg.uv]  UVs array.
+     * @param {Number[]} [cfg.colors]  Vertex colors.
+     * @param {Number[]} [cfg.indices]  Indices array.
+     * @param {Number} [cfg.edgeThreshold=10]  When autogenerating edges for supporting {@link Drawable#edges}, this indicates the threshold angle (in degrees) between the face normals of adjacent triangles below which the edge is discarded.
+     */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        this._state = new RenderState({ // Arrays for emphasis effects are got from xeokit.GeometryLite friend methods
+            compressGeometry: true,
+            primitive: null, // WebGL enum
+            primitiveName: null, // String
+            positionsDecodeMatrix: null, // Set when compressGeometry == true
+            uvDecodeMatrix: null, // Set when compressGeometry == true
+            positionsBuf: null,
+            normalsBuf: null,
+            colorsbuf: null,
+            uvBuf: null,
+            indicesBuf: null,
+            hash: ""
+        });
+
+        this._numTriangles = 0;
+
+        this._edgeThreshold = cfg.edgeThreshold || 10.0;
+        this._aabb = null;
+        this._obb = math.OBB3();
+
+        const state = this._state;
+        const gl = this.scene.canvas.gl;
+
+        cfg.primitive = cfg.primitive || "triangles";
+        switch (cfg.primitive) {
+            case "points":
+                state.primitive = gl.POINTS;
+                state.primitiveName = cfg.primitive;
+                break;
+            case "lines":
+                state.primitive = gl.LINES;
+                state.primitiveName = cfg.primitive;
+                break;
+            case "line-loop":
+                state.primitive = gl.LINE_LOOP;
+                state.primitiveName = cfg.primitive;
+                break;
+            case "line-strip":
+                state.primitive = gl.LINE_STRIP;
+                state.primitiveName = cfg.primitive;
+                break;
+            case "triangles":
+                state.primitive = gl.TRIANGLES;
+                state.primitiveName = cfg.primitive;
+                break;
+            case "triangle-strip":
+                state.primitive = gl.TRIANGLE_STRIP;
+                state.primitiveName = cfg.primitive;
+                break;
+            case "triangle-fan":
+                state.primitive = gl.TRIANGLE_FAN;
+                state.primitiveName = cfg.primitive;
+                break;
+            default:
+                this.error("Unsupported value for 'primitive': '" + cfg.primitive +
+                    "' - supported values are 'points', 'lines', 'line-loop', 'line-strip', 'triangles', " +
+                    "'triangle-strip' and 'triangle-fan'. Defaulting to 'triangles'.");
+                state.primitive = gl.TRIANGLES;
+                state.primitiveName = cfg.primitive;
+        }
+
+        if (!cfg.positions) {
+            this.error("Config expected: positions");
+            return; // TODO: Recover?
+        }
+
+        if (!cfg.indices) {
+            this.error("Config expected: indices");
+            return; // TODO: Recover?
+        }
+
+        var positions;
+
+        {
+            const positionsDecodeMatrix = cfg.positionsDecodeMatrix;
+
+            if (positionsDecodeMatrix) {
+
+                // Compressed positions
+
+            } else {
+
+                // Uncompressed positions
+
+                const bounds = geometryCompressionUtils.getPositionsBounds(cfg.positions);
+                const result = geometryCompressionUtils.compressPositions(cfg.positions, bounds.min, bounds.max);
+                positions = result.quantized;
+                state.positionsDecodeMatrix = result.decodeMatrix;
+                state.positionsBuf = new ArrayBuf(gl, gl.ARRAY_BUFFER, positions, positions.length, 3, gl.STATIC_DRAW);
+                memoryStats.positions += state.positionsBuf.numItems;
+                math.positions3ToAABB3(cfg.positions, this._aabb);
+                math.positions3ToAABB3(positions, tempAABB, state.positionsDecodeMatrix);
+                math.AABB3ToOBB3(tempAABB, this._obb);
+            }
+        }
+
+        if (cfg.colors) {
+            const colors = cfg.colors.constructor === Float32Array ? cfg.colors : new Float32Array(cfg.colors);
+            state.colorsBuf = new ArrayBuf(gl, gl.ARRAY_BUFFER, colors, colors.length, 4, gl.STATIC_DRAW);
+            memoryStats.colors += state.colorsBuf.numItems;
+        }
+
+        if (cfg.uv) {
+            const bounds = geometryCompressionUtils.getUVBounds(cfg.uv);
+            const result = geometryCompressionUtils.compressUVs(cfg.uv, bounds.min, bounds.max);
+            const uv = result.quantized;
+            state.uvDecodeMatrix = result.decodeMatrix;
+            state.uvBuf = new ArrayBuf(gl, gl.ARRAY_BUFFER, uv, uv.length, 2, gl.STATIC_DRAW);
+            memoryStats.uvs += state.uvBuf.numItems;
+        }
+
+        if (cfg.normals) {
+            const normals = geometryCompressionUtils.compressNormals(cfg.normals);
+            let normalized = state.compressGeometry;
+            state.normalsBuf = new ArrayBuf(gl, gl.ARRAY_BUFFER, normals, normals.length, 3, gl.STATIC_DRAW, normalized);
+            memoryStats.normals += state.normalsBuf.numItems;
+        }
+
+        {
+            const indices = (cfg.indices.constructor === Uint32Array || cfg.indices.constructor === Uint16Array) ? cfg.indices : new Uint32Array(cfg.indices);
+            state.indicesBuf = new ArrayBuf(gl, gl.ELEMENT_ARRAY_BUFFER, indices, indices.length, 1, gl.STATIC_DRAW);
+            memoryStats.indices += state.indicesBuf.numItems;
+            const edgeIndices = buildEdgeIndices(positions, indices, state.positionsDecodeMatrix, this._edgeThreshold);
+            this._edgeIndicesBuf = new ArrayBuf(gl, gl.ELEMENT_ARRAY_BUFFER, edgeIndices, edgeIndices.length, 1, gl.STATIC_DRAW);
+
+            if (this._state.primitiveName === "triangles") {
+                this._numTriangles = (cfg.indices.length / 3);
+            }
+        }
+
+        this._buildHash();
+
+        memoryStats.meshes++;
+    }
+
+    _buildHash() {
+        const state = this._state;
+        const hash = ["/g"];
+        hash.push("/" + state.primitive + ";");
+        if (state.positionsBuf) {
+            hash.push("p");
+        }
+        if (state.colorsBuf) {
+            hash.push("c");
+        }
+        if (state.normalsBuf || state.autoVertexNormals) {
+            hash.push("n");
+        }
+        if (state.uvBuf) {
+            hash.push("u");
+        }
+        hash.push("cp"); // Always compressed
+        hash.push(";");
+        state.hash = hash.join("");
+    }
+
+    _getEdgeIndices() {
+        return this._edgeIndicesBuf;
+    }
+
+    /**
+     * Gets the primitive type.
+     *
+     * Possible types are: 'points', 'lines', 'line-loop', 'line-strip', 'triangles', 'triangle-strip' and 'triangle-fan'.
+     *
+     * @type {String}
+     */
+    get primitive() {
+        return this._state.primitiveName;
+    }
+
+    /**
+     * Gets the local-space axis-aligned 3D boundary (AABB).
+     *
+     * The AABB is represented by a six-element Float64Array containing the min/max extents of the axis-aligned volume, ie. ````[xmin, ymin,zmin,xmax,ymax, zmax]````.
+     *
+     * @type {Number[]}
+     */
+    get aabb() {
+        return this._aabb;
+    }
+
+    /**
+     * Gets the local-space oriented 3D boundary (OBB).
+     *
+     * The OBB is represented by a 32-element Float64Array containing the eight vertices of the box, where each vertex is a homogeneous coordinate having [x,y,z,w] elements.
+     *
+     * @type {Number[]}
+     */
+    get obb() {
+        return this._obb;
+    }
+
+    /**
+     * Approximate number of triangles in this VBOGeometry.
+     *
+     * Will be zero if {@link VBOGeometry#primitive} is not 'triangles', 'triangle-strip' or 'triangle-fan'.
+     *
+     * @type {Number}
+     */
+    get numTriangles() {
+        return this._numTriangles;
+    }
+
+    /** @private */
+    _getState() {
+        return this._state;
+    }
+
+    /**
+     * Destroys this component.
+     */
+    destroy() {
+        super.destroy();
+        const state = this._state;
+        if (state.indicesBuf) {
+            state.indicesBuf.destroy();
+        }
+        if (state.positionsBuf) {
+            state.positionsBuf.destroy();
+        }
+        if (state.normalsBuf) {
+            state.normalsBuf.destroy();
+        }
+        if (state.uvBuf) {
+            state.uvBuf.destroy();
+        }
+        if (state.colorsBuf) {
+            state.colorsBuf.destroy();
+        }
+        if (this._edgeIndicesBuf) {
+            this._edgeIndicesBuf.destroy();
+        }
+        state.destroy();
+        memoryStats.meshes--;
+    }
+}
+
+export {VBOGeometry};

package/src/viewer/scene/geometry/builders/buildBoxGeometry.js

@@ -0,0 +1,238 @@
+import {utils} from '../../utils.js';
+
+/**
+ * @desc Creates box-shaped {@link Geometry}.
+ *
+ * ## Usage
+ *
+ * In the example below we'll create a {@link Mesh} with a box-shaped {@link ReadableGeometry}.
+ *
+ * [[Run this example](/examples/#geometry_builders_buildBoxGeometry)]
+ *
+ * ````javascript
+ * import {Viewer, Mesh, buildBoxGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *         canvasId: "myCanvas"
+ * });
+ *
+ * viewer.scene.camera.eye = [0, 0, 5];
+ * viewer.scene.camera.look = [0, 0, 0];
+ * viewer.scene.camera.up = [0, 1, 0];
+ *
+ * new Mesh(viewer.scene, {
+ *      geometry: new ReadableGeometry(viewer.scene, buildBoxGeometry({
+ *         center: [0,0,0],
+ *         xSize: 1,  // Half-size on each axis
+ *         ySize: 1,
+ *         zSize: 1
+ *      }),
+ *      material: new PhongMaterial(viewer.scene, {
+ *         diffuseMap: new Texture(viewer.scene, {
+ *             src: "textures/diffuse/uvGrid2.jpg"
+ *         })
+ *      })
+ * });
+ * ````
+ *
+ * @function buildBoxGeometry
+ * @param {*} [cfg] Configs
+ * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number[]} [cfg.center]  3D point indicating the center position.
+ * @param {Number} [cfg.xSize=1.0]  Half-size on the X-axis.
+ * @param {Number} [cfg.ySize=1.0]  Half-size on the Y-axis.
+ * @param {Number} [cfg.zSize=1.0]  Half-size on the Z-axis.
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildBoxGeometry(cfg = {}) {
+
+    let xSize = cfg.xSize || 1;
+    if (xSize < 0) {
+        console.error("negative xSize not allowed - will invert");
+        xSize *= -1;
+    }
+
+    let ySize = cfg.ySize || 1;
+    if (ySize < 0) {
+        console.error("negative ySize not allowed - will invert");
+        ySize *= -1;
+    }
+
+    let zSize = cfg.zSize || 1;
+    if (zSize < 0) {
+        console.error("negative zSize not allowed - will invert");
+        zSize *= -1;
+    }
+
+    const center = cfg.center;
+    const centerX = center ? center[0] : 0;
+    const centerY = center ? center[1] : 0;
+    const centerZ = center ? center[2] : 0;
+
+    const xmin = -xSize + centerX;
+    const ymin = -ySize + centerY;
+    const zmin = -zSize + centerZ;
+    const xmax = xSize + centerX;
+    const ymax = ySize + centerY;
+    const zmax = zSize + centerZ;
+
+    return utils.apply(cfg, {
+
+        // The vertices - eight for our cube, each
+        // one spanning three array elements for X,Y and Z
+        positions: [
+
+            // v0-v1-v2-v3 front
+            xmax, ymax, zmax,
+            xmin, ymax, zmax,
+            xmin, ymin, zmax,
+            xmax, ymin, zmax,
+
+            // v0-v3-v4-v1 right
+            xmax, ymax, zmax,
+            xmax, ymin, zmax,
+            xmax, ymin, zmin,
+            xmax, ymax, zmin,
+
+            // v0-v1-v6-v1 top
+            xmax, ymax, zmax,
+            xmax, ymax, zmin,
+            xmin, ymax, zmin,
+            xmin, ymax, zmax,
+
+            // v1-v6-v7-v2 left
+            xmin, ymax, zmax,
+            xmin, ymax, zmin,
+            xmin, ymin, zmin,
+            xmin, ymin, zmax,
+
+            // v7-v4-v3-v2 bottom
+            xmin, ymin, zmin,
+            xmax, ymin, zmin,
+            xmax, ymin, zmax,
+            xmin, ymin, zmax,
+
+            // v4-v7-v6-v1 back
+            xmax, ymin, zmin,
+            xmin, ymin, zmin,
+            xmin, ymax, zmin,
+            xmax, ymax, zmin
+        ],
+
+        // Normal vectors, one for each vertex
+        normals: [
+
+            // v0-v1-v2-v3 front
+            0, 0, 1,
+            0, 0, 1,
+            0, 0, 1,
+            0, 0, 1,
+
+            // v0-v3-v4-v5 right
+            1, 0, 0,
+            1, 0, 0,
+            1, 0, 0,
+            1, 0, 0,
+
+            // v0-v5-v6-v1 top
+            0, 1, 0,
+            0, 1, 0,
+            0, 1, 0,
+            0, 1, 0,
+
+            // v1-v6-v7-v2 left
+            -1, 0, 0,
+            -1, 0, 0,
+            -1, 0, 0,
+            -1, 0, 0,
+
+            // v7-v4-v3-v2 bottom
+            0, -1, 0,
+            0, -1, 0,
+            0, -1, 0,
+            0, -1, 0,
+
+            // v4-v7-v6-v5 back
+            0, 0, -1,
+            0, 0, -1,
+            0, 0, -1,
+            0, 0, -1
+        ],
+
+        // UV coords
+        uv: [
+
+            // v0-v1-v2-v3 front
+            1, 0,
+            0, 0,
+            0, 1,
+            1, 1,
+
+            // v0-v3-v4-v1 right
+            0, 0,
+            0, 1,
+            1, 1,
+            1, 0,
+
+            // v0-v1-v6-v1 top
+            1, 1,
+            1, 0,
+            0, 0,
+            0, 1,
+
+            // v1-v6-v7-v2 left
+            1, 0,
+            0, 0,
+            0, 1,
+            1, 1,
+
+            // v7-v4-v3-v2 bottom
+            0, 1,
+            1, 1,
+            1, 0,
+            0, 0,
+
+            // v4-v7-v6-v1 back
+            0, 1,
+            1, 1,
+            1, 0,
+            0, 0
+        ],
+
+        // Indices - these organise the
+        // positions and uv texture coordinates
+        // into geometric primitives in accordance
+        // with the "primitive" parameter,
+        // in this case a set of three indices
+        // for each triangle.
+        //
+        // Note that each triangle is specified
+        // in counter-clockwise winding order.
+        //
+        // You can specify them in clockwise
+        // order if you configure the Modes
+        // node's frontFace flag as "cw", instead of
+        // the default "ccw".
+        indices: [
+            0, 1, 2,
+            0, 2, 3,
+            // front
+            4, 5, 6,
+            4, 6, 7,
+            // right
+            8, 9, 10,
+            8, 10, 11,
+            // top
+            12, 13, 14,
+            12, 14, 15,
+            // left
+            16, 17, 18,
+            16, 18, 19,
+            // bottom
+            20, 21, 22,
+            20, 22, 23
+        ]
+    });
+}
+
+export {buildBoxGeometry};

package/src/viewer/scene/geometry/builders/buildBoxLinesGeometry.js

@@ -0,0 +1,106 @@
+import {utils} from '../../utils.js';
+
+/**
+ * @desc Creates a box-shaped lines {@link Geometry}.
+ *
+ * ## Usage
+ *
+ * In the example below we'll create a {@link Mesh} with a box-shaped {@link ReadableGeometry} that has lines primitives.
+ *
+ * [[Run this example](/examples/#geometry_builders_buildBoxLinesGeometry)]
+ *
+ * ````javascript
+ * import {Viewer, Mesh, buildBoxLinesGeometry, ReadableGeometry, PhongMaterial} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *         canvasId: "myCanvas"
+ * });
+ *
+ * viewer.scene.camera.eye = [0, 0, 5];
+ * viewer.scene.camera.look = [0, 0, 0];
+ * viewer.scene.camera.up = [0, 1, 0];
+ *
+ * new Mesh(viewer.scene, {
+ *      geometry: new ReadableGeometry(viewer.scene, buildBoxLinesGeometry({
+ *         center: [0,0,0],
+ *         xSize: 1,  // Half-size on each axis
+ *         ySize: 1,
+ *         zSize: 1
+ *      })),
+ *      material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0,1,0]
+ *      })
+ * });
+ * ````
+ *
+ * @function buildBoxLinesGeometry
+ * @param {*} [cfg] Configs
+ * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number[]} [cfg.center]  3D point indicating the center position.
+ * @param {Number} [cfg.xSize=1.0]  Half-size on the X-axis.
+ * @param {Number} [cfg.ySize=1.0]  Half-size on the Y-axis.
+ * @param {Number} [cfg.zSize=1.0]  Half-size on the Z-axis.
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildBoxLinesGeometry(cfg = {}) {
+
+    let xSize = cfg.xSize || 1;
+    if (xSize < 0) {
+        console.error("negative xSize not allowed - will invert");
+        xSize *= -1;
+    }
+
+    let ySize = cfg.ySize || 1;
+    if (ySize < 0) {
+        console.error("negative ySize not allowed - will invert");
+        ySize *= -1;
+    }
+
+    let zSize = cfg.zSize || 1;
+    if (zSize < 0) {
+        console.error("negative zSize not allowed - will invert");
+        zSize *= -1;
+    }
+
+    const center = cfg.center;
+    const centerX = center ? center[0] : 0;
+    const centerY = center ? center[1] : 0;
+    const centerZ = center ? center[2] : 0;
+
+    const xmin = -xSize + centerX;
+    const ymin = -ySize + centerY;
+    const zmin = -zSize + centerZ;
+    const xmax = xSize + centerX;
+    const ymax = ySize + centerY;
+    const zmax = zSize + centerZ;
+
+    return utils.apply(cfg, {
+        primitive: "lines",
+        positions: [
+            xmin, ymin, zmin,
+            xmin, ymin, zmax,
+            xmin, ymax, zmin,
+            xmin, ymax, zmax,
+            xmax, ymin, zmin,
+            xmax, ymin, zmax,
+            xmax, ymax, zmin,
+            xmax, ymax, zmax
+        ],
+        indices: [
+            0, 1,
+            1, 3,
+            3, 2,
+            2, 0,
+            4, 5,
+            5, 7,
+            7, 6,
+            6, 4,
+            0, 4,
+            1, 5,
+            2, 6,
+            3, 7
+        ]
+    });
+}
+
+export {buildBoxLinesGeometry};