@kite3d/engine 0.15.0

package/src/plugins/cannon/helper.ts

@@ -0,0 +1,255 @@
+// https://github.com/pmndrs/cannon-es-debugger/blob/master/src/cannon-es-debugger.ts
+
+import {
+    Box,
+    ConvexPolyhedron,
+    Cylinder,
+    Heightfield,
+    Quaternion as CannonQuaternion,
+    Shape,
+    Sphere,
+    Trimesh,
+    Vec3 as CannonVector3,
+} from 'cannon-es'
+import {
+    BoxGeometry,
+    BufferGeometry,
+    CylinderGeometry,
+    Float32BufferAttribute,
+    LineMaterial2,
+    Mesh,
+    PlaneGeometry,
+    SphereGeometry,
+    Vector3 as ThreeVector3,
+    Wireframe,
+    WireframeGeometry3
+} from "threepipe";
+
+type ComplexShape = Shape & {geometryId?: number}
+
+export function cannonDebugger() {
+    const scale = 1
+
+    const _tempVec0 = new CannonVector3()
+    const _tempVec1 = new CannonVector3()
+    const _tempVec2 = new CannonVector3()
+    const _tempQuat0 = new CannonQuaternion()
+    const _sphereGeometry = new SphereGeometry(1)
+    const _boxGeometry = new BoxGeometry(1, 1, 1)
+    const _planeGeometry = new PlaneGeometry(10, 10, 10, 10)
+    // const _material = new MeshBasicMaterial({color: color ?? 0x00ff00, wireframe: true})
+    const _material = new LineMaterial2({
+        color: 0x00ff00,
+        linewidth: 3, // in world units with size attenuation, pixels otherwise
+        vertexColors: false,
+        worldUnits: false,
+
+        dashed: false,
+        alphaToCoverage: true,
+
+        toneMapped: false,
+        transparent: true,
+        depthTest: true,
+        depthWrite: false,
+
+        allowOverride: false,
+    })
+    _material.userData.renderToGBuffer = false
+    _material.userData.renderToDepth = false
+
+// Move the planeGeometry forward a little bit to prevent z-fighting
+    _planeGeometry.translate(0, 0, 0.0001)
+
+    function createConvexPolyhedronGeometry(shape: ConvexPolyhedron): BufferGeometry {
+        const geometry = new BufferGeometry()
+
+        // Add vertices
+        const positions = []
+        for (let i = 0; i < shape.vertices.length; i++) {
+            const vertex = shape.vertices[i]
+            positions.push(vertex.x, vertex.y, vertex.z)
+        }
+        geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
+
+        // Add faces
+        const indices = []
+        for (let i = 0; i < shape.faces.length; i++) {
+            const face = shape.faces[i]
+            const a = face[0]
+            for (let j = 1; j < face.length - 1; j++) {
+                const b = face[j]
+                const c = face[j + 1]
+                indices.push(a, b, c)
+            }
+        }
+
+        geometry.setIndex(indices)
+        geometry.computeBoundingSphere()
+        geometry.computeVertexNormals()
+        return geometry
+    }
+
+    function createTrimeshGeometry(shape: Trimesh): BufferGeometry {
+        const geometry = new BufferGeometry()
+        const positions = []
+        const v0 = _tempVec0
+        const v1 = _tempVec1
+        const v2 = _tempVec2
+
+        for (let i = 0; i < shape.indices.length / 3; i++) {
+            shape.getTriangleVertices(i, v0, v1, v2)
+            positions.push(v0.x, v0.y, v0.z)
+            positions.push(v1.x, v1.y, v1.z)
+            positions.push(v2.x, v2.y, v2.z)
+        }
+
+        geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
+        geometry.computeBoundingSphere()
+        geometry.computeVertexNormals()
+        return geometry
+    }
+
+    function createHeightfieldGeometry(shape: Heightfield): BufferGeometry {
+        const geometry = new BufferGeometry()
+        const s = shape.elementSize || 1 // assumes square heightfield, else i*x, j*y
+        const positions = shape.data.flatMap((row, i) => row.flatMap((z, j) => [i * s, j * s, z]))
+        const indices = []
+
+        for (let xi = 0; xi < shape.data.length - 1; xi++) {
+            for (let yi = 0; yi < shape.data[xi].length - 1; yi++) {
+                const stride = shape.data[xi].length
+                const index = xi * stride + yi
+                indices.push(index + 1, index + stride, index + stride + 1)
+                indices.push(index + stride, index + 1, index)
+            }
+        }
+
+        geometry.setIndex(indices)
+        geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
+        geometry.computeBoundingSphere()
+        geometry.computeVertexNormals()
+        return geometry
+    }
+
+    function createMesh(shape: Shape): Mesh {
+        let mesh = new Mesh()
+        const {SPHERE, BOX, PLANE, CYLINDER, CONVEXPOLYHEDRON, TRIMESH, HEIGHTFIELD} = Shape.types
+
+        switch (shape.type) {
+            case SPHERE: {
+                mesh = new Wireframe(new WireframeGeometry3(_sphereGeometry), _material)
+                break
+            }
+            case BOX: {
+                mesh = new Wireframe(new WireframeGeometry3(_boxGeometry), _material)
+                break
+            }
+            case PLANE: {
+                mesh = new Wireframe(new WireframeGeometry3(_planeGeometry), _material)
+                break
+            }
+            case CYLINDER: {
+                const geometry = new CylinderGeometry(
+                    (shape as Cylinder).radiusTop,
+                    (shape as Cylinder).radiusBottom,
+                    (shape as Cylinder).height,
+                    (shape as Cylinder).numSegments
+                )
+                mesh = new Wireframe(new WireframeGeometry3(geometry), _material)
+                ;(shape as ComplexShape).geometryId = geometry.id
+                break
+            }
+            case CONVEXPOLYHEDRON: {
+                const geometry = createConvexPolyhedronGeometry(shape as ConvexPolyhedron)
+                mesh = new Wireframe(new WireframeGeometry3(geometry), _material)
+                ;(shape as ComplexShape).geometryId = geometry.id
+                break
+            }
+            case TRIMESH: {
+                const geometry = createTrimeshGeometry(shape as Trimesh)
+                mesh = new Wireframe(new WireframeGeometry3(geometry), _material)
+                ;(shape as ComplexShape).geometryId = geometry.id
+                break
+            }
+            case HEIGHTFIELD: {
+                const geometry = createHeightfieldGeometry(shape as Heightfield)
+                mesh = new Wireframe(new WireframeGeometry3(geometry), _material)
+                ;(shape as ComplexShape).geometryId = geometry.id
+                break
+            }
+        }
+        return mesh
+    }
+
+    function scaleMesh(mesh: Mesh, shape: Shape | ComplexShape): void {
+        const {SPHERE, BOX, PLANE, CYLINDER, CONVEXPOLYHEDRON, TRIMESH, HEIGHTFIELD} = Shape.types
+        switch (shape.type) {
+            case SPHERE: {
+                const {radius} = shape as Sphere
+                mesh.scale.set(radius * scale, radius * scale, radius * scale)
+                break
+            }
+            case BOX: {
+                mesh.scale.copy((shape as Box).halfExtents as unknown as ThreeVector3)
+                mesh.scale.multiplyScalar(2 * scale)
+                break
+            }
+            case PLANE: {
+                break
+            }
+            case CYLINDER: {
+                mesh.scale.set(1 * scale, 1 * scale, 1 * scale)
+                break
+            }
+            case CONVEXPOLYHEDRON: {
+                mesh.scale.set(1 * scale, 1 * scale, 1 * scale)
+                break
+            }
+            case TRIMESH: {
+                mesh.scale.copy((shape as Trimesh).scale as unknown as ThreeVector3).multiplyScalar(scale)
+                break
+            }
+            case HEIGHTFIELD: {
+                mesh.scale.set(1 * scale, 1 * scale, 1 * scale)
+                break
+            }
+        }
+    }
+
+    function typeMatch(mesh: Mesh|undefined, shape: Shape | ComplexShape): boolean {
+        if (!mesh) return false
+        const {geometry} = mesh
+        return (
+            geometry instanceof SphereGeometry && shape.type === Shape.types.SPHERE ||
+            geometry instanceof BoxGeometry && shape.type === Shape.types.BOX ||
+            geometry instanceof PlaneGeometry && shape.type === Shape.types.PLANE ||
+            // geometry.id === (shape as ComplexShape).geometryId && shape.type === Shape.types.BOX ||
+            // geometry.id === (shape as ComplexShape).geometryId && shape.type === Shape.types.SPHERE ||
+            // geometry.id === (shape as ComplexShape).geometryId && shape.type === Shape.types.PLANE ||
+            geometry.id === (shape as ComplexShape).geometryId && shape.type === Shape.types.CONVEXPOLYHEDRON ||
+            geometry.id === (shape as ComplexShape).geometryId && shape.type === Shape.types.TRIMESH ||
+            geometry.id === (shape as ComplexShape).geometryId && shape.type === Shape.types.HEIGHTFIELD
+        )
+    }
+
+    function updateMesh(mesh: Mesh|undefined, shape: Shape | ComplexShape) {
+        if (!typeMatch(mesh, shape)) {
+            mesh = createMesh(shape)
+        }
+        mesh && scaleMesh(mesh, shape)
+        return mesh
+    }
+
+
+    return {
+        createConvexPolyhedronGeometry,
+        createTrimeshGeometry,
+        createHeightfieldGeometry,
+        createMesh,
+        scaleMesh,
+        typeMatch,
+        updateMesh,
+    }
+}
+
+export const CannonDebugger = cannonDebugger();

package/src/plugins/cannon/threeToCannon.ts

@@ -0,0 +1,441 @@
+// https://github.com/donmccurdy/three-to-cannon/blob/main/src/index.ts
+import {Box, ConvexPolyhedron, Cylinder, Quaternion as CQuaternion, Shape, Sphere, Trimesh, Vec3} from 'cannon-es';
+import {ConvexHull, Box3, BufferGeometry, CylinderGeometry, MathUtils, Mesh, Object3D, SphereGeometry, Vector3} from 'threepipe';
+import {getComponent, getGeometry, getVertices} from './utils';
+
+const PI_2 = Math.PI / 2;
+
+export type BoxParameters = { x: number, y: number, z: number };
+
+export type CylinderParameters = { radiusTop: number, radiusBottom: number, height: number, segments: number };
+
+export type SphereParameters = { radius: number };
+
+export type ConvexPolyhedronParameters = { vertices: Float32Array, faces: number[][] };
+
+export type TrimeshParameters = { vertices: Float32Array, indices: Uint32Array };
+
+type ShapeTypeToShapeParameters = {
+    Box: BoxParameters,
+    Cylinder: CylinderParameters,
+    Sphere: SphereParameters,
+    ConvexPolyhedron: ConvexPolyhedronParameters,
+    Trimesh: TrimeshParameters,
+};
+
+export enum ShapeType {
+    BOX = 'Box',
+    CYLINDER = 'Cylinder',
+    SPHERE = 'Sphere',
+    HULL = 'ConvexPolyhedron',
+    MESH = 'Trimesh',
+}
+
+export interface ShapeOptions {
+    type?: ShapeType,
+    cylinderAxis?: 'x' | 'y' | 'z',
+    sphereRadius?: number,
+}
+
+export interface ShapeParameters<T extends ShapeType = ShapeType> {
+    type: T,
+    params: ShapeTypeToShapeParameters[T],
+    offset?: Vec3,
+    orientation?: CQuaternion,
+}
+
+export interface ShapeResult<T extends Shape = Shape> {
+    shape: T,
+    offset?: Vec3,
+    orientation?: CQuaternion,
+}
+
+/**
+ * Given a THREE.Object3D instance, creates parameters for a CANNON shape.
+ */
+export const getShapeParameters = function (object: Object3D, options: ShapeOptions = {}): ShapeParameters | null {
+    let geometry: BufferGeometry | null;
+
+    if (options.type === ShapeType.BOX) {
+        return getBoundingBoxParameters(object);
+    } else if (options.type === ShapeType.CYLINDER) {
+        return getBoundingCylinderParameters(object, options);
+    } else if (options.type === ShapeType.SPHERE) {
+        return getBoundingSphereParameters(object, options);
+    } else if (options.type === ShapeType.HULL) {
+        return getConvexPolyhedronParameters(object);
+    } else if (options.type === ShapeType.MESH) {
+        geometry = getGeometry(object);
+        return geometry ? getTrimeshParameters(geometry) : null;
+    } else if (options.type) {
+        throw new Error(`[CANNON.getShapeParameters] Invalid type "${options.type}".`);
+    }
+
+    geometry = getGeometry(object);
+    if (!geometry) return null;
+
+    switch (geometry.type) {
+        case 'BoxGeometry':
+        case 'BoxBufferGeometry':
+            return getBoxParameters(geometry);
+        case 'CylinderGeometry':
+        case 'CylinderBufferGeometry':
+            return getCylinderParameters(geometry as CylinderGeometry);
+        case 'PlaneGeometry':
+        case 'PlaneBufferGeometry':
+            return getPlaneParameters(geometry);
+        case 'SphereGeometry':
+        case 'SphereBufferGeometry':
+            return getSphereParameters(geometry as SphereGeometry);
+        case 'TubeGeometry':
+        case 'BufferGeometry':
+            return getBoundingBoxParameters(object);
+        default:
+            console.warn(
+                'Unrecognized geometry: "%s". Using bounding box as shape.', geometry.type
+            );
+            return getBoxParameters(geometry);
+    }
+};
+
+/**
+ * Given a THREE.Object3D instance, creates a corresponding CANNON shape.
+ */
+export const threeToCannon = function (object: Object3D, options: ShapeOptions = {}, shapeParameters?: ShapeParameters|null): ShapeResult | null {
+    shapeParameters = shapeParameters || getShapeParameters(object, options);
+    if (!shapeParameters) {
+        return null;
+    }
+
+    const { type, params, offset, orientation } = shapeParameters;
+
+    let shape: Shape;
+    if (type === ShapeType.BOX) {
+        shape = createBox(params as BoxParameters);
+    } else if (type === ShapeType.CYLINDER) {
+        shape = createCylinder(params as CylinderParameters);
+    } else if (type === ShapeType.SPHERE) {
+        shape = createSphere(params as SphereParameters);
+    } else if (type === ShapeType.HULL) {
+        shape = createConvexPolyhedron(params as ConvexPolyhedronParameters);
+    } else {
+        shape = createTrimesh(params as TrimeshParameters);
+    }
+
+    return {
+        shape,
+        offset,
+        orientation,
+    };
+};
+
+/******************************************************************************
+ * Shape construction
+ */
+
+function createBox (params: BoxParameters): Box {
+    const { x, y, z } = params;
+    const shape = new Box(new Vec3(x || 0.025, y || 0.025, z || 0.025));
+    return shape;
+}
+
+function createCylinder (params: CylinderParameters): Cylinder {
+    const { radiusTop, radiusBottom, height, segments } = params;
+
+    const shape = new Cylinder(radiusTop, radiusBottom, height, segments);
+
+    // Include metadata for serialization.
+    // TODO(cleanup): Is this still necessary?
+    shape.radiusTop = radiusBottom;
+    shape.radiusBottom = radiusBottom;
+    shape.height = height;
+    shape.numSegments = segments;
+
+    return shape;
+}
+
+function createSphere (params: SphereParameters): Sphere {
+    const shape = new Sphere(params.radius);
+
+    return shape;
+}
+
+function createConvexPolyhedron (params: ConvexPolyhedronParameters): ConvexPolyhedron {
+    const { faces, vertices: verticesArray } = params;
+
+    const vertices: Vec3[] = [];
+    for (let i = 0; i < verticesArray.length; i += 3) {
+        vertices.push(new Vec3(
+            verticesArray[i],
+            verticesArray[i + 1],
+            verticesArray[i + 2]
+        ));
+    }
+
+    const shape = new ConvexPolyhedron({
+        faces,
+        vertices
+    });
+
+    return shape;
+}
+
+function createTrimesh (params: TrimeshParameters): Trimesh {
+    const { vertices, indices } = params
+    const shape = new Trimesh(
+        vertices as unknown as number[],
+        indices as unknown as number[],
+    );
+
+    return shape;
+}
+
+/******************************************************************************
+ * Shape parameters
+ */
+
+function getBoxParameters (geometry: BufferGeometry): ShapeParameters<ShapeType.BOX> | null {
+    const vertices = getVertices(geometry);
+
+    if (!vertices.length) return null;
+
+    geometry.computeBoundingBox();
+    const box = geometry.boundingBox!;
+
+    return {
+        type: ShapeType.BOX,
+        params: {
+            x: (box.max.x - box.min.x) / 2,
+            y: (box.max.y - box.min.y) / 2,
+            z: (box.max.z - box.min.z) / 2,
+        },
+    };
+}
+
+/** Bounding box needs to be computed with the entire subtree, not just geometry. */
+function getBoundingBoxParameters (object: Object3D): ShapeParameters<ShapeType.BOX> | null {
+    const clone = object.clone();
+    clone.quaternion.set(0, 0, 0, 1);
+    clone.updateMatrixWorld();
+
+    const box = new Box3().setFromObject(clone);
+
+    if (!isFinite(box.min.lengthSq())) return null;
+
+    const localPosition = box.translate(clone.position.negate()).getCenter(new Vector3());
+
+    return {
+        type: ShapeType.BOX,
+        params: {
+            x: (box.max.x - box.min.x) / 2,
+            y: (box.max.y - box.min.y) / 2,
+            z: (box.max.z - box.min.z) / 2,
+        },
+        offset: localPosition.lengthSq()
+            ? new Vec3(localPosition.x, localPosition.y, localPosition.z)
+            : undefined,
+    };
+}
+
+/** Computes 3D convex hull as a CANNON.ConvexPolyhedron. */
+function getConvexPolyhedronParameters (object: Object3D): ShapeParameters<ShapeType.HULL> | null {
+    const geometry = getGeometry(object);
+
+    if (!geometry) return null;
+
+    // Perturb.
+    const eps = 1e-4;
+    for (let i = 0; i < geometry.attributes.position.count; i++) {
+        geometry.attributes.position.setXYZ(
+            i,
+            geometry.attributes.position.getX(i) + (Math.random() - 0.5) * eps,
+            geometry.attributes.position.getY(i) + (Math.random() - 0.5) * eps,
+            geometry.attributes.position.getZ(i) + (Math.random() - 0.5) * eps,
+        );
+    }
+
+    // Compute the 3D convex hull and collect convex hull vertices and faces.
+    const [ positions, indices ] = convexHullToJSON(new ConvexHull().setFromObject(new Mesh(geometry)));
+
+    return {
+        type: ShapeType.HULL,
+        params: {
+            vertices: new Float32Array(positions),
+            faces: indices,
+        },
+    };
+}
+
+function getCylinderParameters (
+    geometry: CylinderGeometry
+): ShapeParameters<ShapeType.CYLINDER> | null {
+    const params = geometry.parameters;
+
+    return {
+        type: ShapeType.CYLINDER,
+        params: {
+            radiusTop: params.radiusTop,
+            radiusBottom: params.radiusBottom,
+            height: params.height,
+            segments: params.radialSegments,
+        },
+        orientation: new CQuaternion()
+            .setFromEuler(MathUtils.degToRad(-90), 0, 0, 'XYZ')
+            .normalize(),
+    }
+}
+
+function getBoundingCylinderParameters (
+    object: Object3D,
+    options: ShapeOptions
+): ShapeParameters<ShapeType.CYLINDER> | null {
+    const axes = ['x', 'y', 'z'];
+    const majorAxis = options.cylinderAxis || 'y';
+    const minorAxes = axes.splice(axes.indexOf(majorAxis), 1) && axes;
+    const box = new Box3().setFromObject(object);
+
+    if (!isFinite(box.min.lengthSq())) return null;
+
+    // Compute cylinder dimensions.
+    const height = box.max[majorAxis] - box.min[majorAxis];
+    const radius = 0.5 * Math.max(
+        getComponent(box.max, minorAxes[0]) - getComponent(box.min, minorAxes[0]),
+        getComponent(box.max, minorAxes[1]) - getComponent(box.min, minorAxes[1]),
+    );
+
+    const eulerX = majorAxis === 'y' ? PI_2 : 0;
+    const eulerY = majorAxis === 'z' ? PI_2 : 0;
+
+    return {
+        type: ShapeType.CYLINDER,
+        params: {
+            radiusTop: radius,
+            radiusBottom: radius,
+            height,
+            segments: 12,
+        },
+        orientation: new CQuaternion()
+            .setFromEuler(eulerX, eulerY, 0, 'XYZ')
+            .normalize(),
+        offset: new Vec3(
+            (box.max.x + box.min.x) / 2,
+            (box.max.y + box.min.y) / 2,
+            (box.max.z + box.min.z) / 2,
+        ),
+    };
+}
+
+function getPlaneParameters (geometry: BufferGeometry): ShapeParameters<ShapeType.BOX> | null {
+    geometry.computeBoundingBox();
+    const box = geometry.boundingBox!;
+
+    return {
+        type: ShapeType.BOX,
+        params: {
+            x: (box.max.x - box.min.x) / 2 || 0.1,
+            y: (box.max.y - box.min.y) / 2 || 0.1,
+            z: (box.max.z - box.min.z) / 2 || 0.1,
+        },
+    };
+}
+
+function getSphereParameters (geometry: SphereGeometry): ShapeParameters<ShapeType.SPHERE> | null {
+    return {
+        type: ShapeType.SPHERE,
+        params: { radius: geometry.parameters.radius },
+    };
+}
+
+function getBoundingSphereParameters (
+    object: Object3D,
+    options: ShapeOptions
+): ShapeParameters<ShapeType.SPHERE> | null {
+    if (options.sphereRadius) {
+        return {
+            type: ShapeType.SPHERE,
+            params: { radius: options.sphereRadius },
+        };
+    }
+    const geometry = getGeometry(object);
+    if (!geometry) return null;
+    geometry.computeBoundingSphere();
+    const sphere = geometry.boundingSphere;
+    if(!sphere) return null;
+    if(!isFinite(sphere.radius)) return null;
+
+    // const localPosition = sphere.center.clone().sub(object.position);
+
+    return {
+        type: ShapeType.SPHERE,
+        params: { radius: geometry.boundingSphere!.radius },
+        // offset: localPosition.lengthSq()
+        //     ? new Vec3(localPosition.x, localPosition.y, localPosition.z)
+        //     : undefined,
+    };
+}
+
+function getTrimeshParameters (geometry: BufferGeometry): ShapeParameters<ShapeType.MESH> | null {
+    const vertices = getVertices(geometry);
+
+    if (!vertices.length) return null;
+
+    const indices = new Uint32Array(vertices.length);
+    for (let i = 0; i < vertices.length; i++) {
+        indices[i] = i;
+    }
+
+    return {
+        type: ShapeType.MESH,
+        params: {
+            vertices,
+            indices,
+        },
+    };
+}
+
+function convexHullToJSON(hull: ConvexHull) {
+    // Original ('src') indices do not include interior vertices,
+    // but 'hull.vertices' (the list they index) does. Output ('dst')
+    // arrays have interior vertices omitted.
+
+    const srcIndices = hull.faces.map((f) => {
+        const indices = [];
+        let edge = f.edge;
+        do {
+            const vertex = edge.head()
+            const index = hull.vertices.indexOf(vertex)
+            if(index >=0) indices.push(index);
+            edge = edge.next;
+        } while (edge !== f.edge);
+        return indices;
+    });
+    const uniqueSrcIndices = Array.from(new Set(srcIndices.flat())).sort();
+
+    // Output vertex positions, omitting interior vertices.
+    const dstPositions = [];
+    for (let i = 0; i < uniqueSrcIndices.length; i++) {
+        dstPositions.push(
+            hull.vertices[uniqueSrcIndices[i]].point.x,
+            hull.vertices[uniqueSrcIndices[i]].point.y,
+            hull.vertices[uniqueSrcIndices[i]].point.z,
+        );
+    }
+
+    // Mapping from 'src' (hull.vertices) to 'dst' (dstPositions) indices.
+    const srcToDstIndexMap = new Map();
+    for (let i = 0; i < uniqueSrcIndices.length; i++) {
+        srcToDstIndexMap.set(uniqueSrcIndices[i], i);
+    }
+
+    // Output triangles, as indices on dstPositions.
+    const dstIndices = [];
+    for (let i = 0; i < srcIndices.length; i++) {
+        dstIndices.push([
+            srcToDstIndexMap.get(srcIndices[i][0]),
+            srcToDstIndexMap.get(srcIndices[i][1]),
+            srcToDstIndexMap.get(srcIndices[i][2]),
+        ]);
+    }
+
+    return [dstPositions, dstIndices] as const;
+}