feat(geometry): Add extrude geometry feature (#225)

Add extrude geometry class,
Add 3 conduit demos base on extrude geometry.

samples/geometry/Sample_ConduitGeometry.ts

@@ -0,0 +1,125 @@
+import { BitmapTexture2D, Color, Engine3D, ExtrudeGeometry, GeometryBase, LitMaterial, MeshRenderer, Object3D, Scene3D, SphereGeometry, Vector3 } from "@orillusion/core";
+import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene";
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+
+// An sample to use ExtrudeGeometry
+class Sample_ConduitGeometry {
+
+    scene: Scene3D;
+    material: LitMaterial;
+    object3Ds: Object3D[];
+    isClosedConduit: boolean = true;
+
+    async run() {
+        let param = createSceneParam();
+        param.camera.distance = 30;
+        await Engine3D.init();
+        let exampleScene = createExampleScene(param);
+        this.scene = exampleScene.scene;
+        Engine3D.startRenderView(exampleScene.view);
+        await this.createMaterial();
+
+        GUIHelp.init();
+        GUIHelp.add(this, 'isClosedConduit').onChange(() => {
+            if (this.object3Ds) {
+                for (let item of this.object3Ds) {
+                    item.removeSelf();
+                }
+            }
+            this.object3Ds = null;
+
+            this.createConduit();
+        });
+        GUIHelp.open();
+        this.createConduit();
+    }
+
+    async createMaterial() {
+        this.material = new LitMaterial();
+        let texture = new BitmapTexture2D();
+        texture.addressModeU = "repeat";
+        texture.addressModeV = "repeat";
+        await texture.load('textures/grid.jpg');
+        this.material.baseMap = texture;
+    }
+
+
+    private createConduit() {
+        this.object3Ds = [];
+
+        let shape = this.getShape();
+        let curve = this.getCurve();
+        let conduitObject3D = new Object3D();
+        this.scene.addChild(conduitObject3D);
+
+        let renderer = conduitObject3D.addComponent(MeshRenderer);
+        renderer.material = this.material;
+        let geometry = renderer.geometry = new ExtrudeGeometry().build(shape, this.isClosedConduit, curve, 0.2);
+
+        //
+        this.object3Ds.push(conduitObject3D);
+        //show vertex point
+        for (const item of geometry.sections) {
+            for (let i = 0, count = item.rotateShape.length; i < count; i++) {
+                let ball = this.showPoint(item.rotateShape[i].add(item.center), i);
+                this.object3Ds.push(ball);
+            }
+        }
+    }
+
+    shapeRadius = 1;
+    modelRadius = 4;
+
+    private getShape(): Vector3[] {
+        let vertexList: Vector3[] = [];//circle
+        let radius = this.shapeRadius;
+        const vertexCount = 8;
+        for (let i = 0; i < vertexCount; i++) {
+            let angle = Math.PI * 2 * i / vertexCount;
+            let point = new Vector3(Math.sin(angle), 0, Math.cos(angle)).multiplyScalar(radius);
+            vertexList.push(point);
+        }
+        return vertexList;
+    }
+
+    private getCurve(): Vector3[] {
+        let vertexList: Vector3[] = [];
+        let radius = this.modelRadius;
+        const sectionCount = 60;
+        for (let i = 0; i < sectionCount; i++) {
+            let angle = Math.PI * 2 * i / 20;
+            radius += 0.1 * i / sectionCount;
+            let offsetY = 0.6 - Math.sqrt(i / sectionCount);
+            let point = new Vector3(Math.sin(angle), offsetY * 6, Math.cos(angle)).multiplyScalar(radius);
+            vertexList.push(point);
+        }
+        return vertexList;
+    }
+
+    private geo: GeometryBase;
+    private mats: LitMaterial[];
+
+    private showPoint(p: Vector3, index: number): Object3D {
+        this.geo ||= new SphereGeometry(0.3, 10, 10);
+        if (!this.mats) {
+            this.mats = [];
+            for (let i = 0; i < 40; i++) {
+                let mat = new LitMaterial();
+                mat.baseColor = Color.random();
+                this.mats.push(mat);
+            }
+        }
+
+        let obj = new Object3D();
+        this.scene.addChild(obj);
+        let m = obj.addComponent(MeshRenderer);
+        m.material = this.mats[index];
+        m.geometry = this.geo;
+
+        obj.localPosition = p;
+
+        return obj;
+    }
+}
+
+new Sample_ConduitGeometry().run();

samples/geometry/Sample_ConduitGeometry2.ts

@@ -0,0 +1,124 @@
+import { AttributeAnimCurve, BitmapTexture2D, BlendMode, Color, Engine3D, ExtrudeGeometry, LitMaterial, MeshRenderer, Object3D, Object3DUtil, PropertyAnimClip, PropertyAnimation, Scene3D, Vector3, WrapMode } from "@orillusion/core";
+import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene";
+import { UVMoveComponent } from "@samples/material/script/UVMoveComponent";
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { GUIUtil } from "@samples/utils/GUIUtil";
+
+// An sample to use ExtrudeGeometry and make uv move animation
+class Sample_ConduitGeometry2 {
+
+    scene: Scene3D;
+    material: LitMaterial;
+    animClip: PropertyAnimClip;
+    curveX: AttributeAnimCurve;
+    curveY: AttributeAnimCurve;
+    curveZ: AttributeAnimCurve;
+    totalTime: number;
+
+    async run() {
+        GUIHelp.init();
+        Engine3D.setting.shadow.shadowBound = 50;
+        Engine3D.setting.shadow.shadowBias = 0.0001;
+        let param = createSceneParam();
+        param.camera.distance = 50;
+        await Engine3D.init();
+        let exampleScene = createExampleScene(param);
+        this.scene = exampleScene.scene;
+        Engine3D.startRenderView(exampleScene.view);
+        await this.createMaterial();
+        await this.loadCurveData();
+
+        this.bindCurveAnimation();
+        this.createConduit();
+        this.createFloor();
+    }
+
+    createFloor() {
+        let object3D = Object3DUtil.GetSingleCube(200, 1, 200, 1, 1, 1);
+        object3D.y = -2;
+        this.scene.addChild(object3D)
+    }
+
+    bindCurveAnimation(): void {
+        let obj = Object3DUtil.GetSingleSphere(0.2, 0.8, 0.4, 0.2);
+        obj.scaleX = 1.5;
+        let holder = new Object3D();
+        this.scene.addChild(holder);
+        holder.scaleX = holder.scaleY = holder.scaleZ = 5;
+        holder.addChild(obj);
+        let animation = obj.addComponent(PropertyAnimation);
+        animation.autoPlay = true;
+        animation.defaultClip = this.animClip.name;
+        animation.speed = 0.5;
+        animation.appendClip(this.animClip);
+    }
+    async loadCurveData() {
+        // load external curve data
+        let json: any = await Engine3D.res.loadJSON('json/anim_0.json');
+        this.animClip = new PropertyAnimClip();
+        this.animClip.parse(json);
+        this.animClip.wrapMode = WrapMode.Loop;
+        let curve = this.animClip['objAnimClip']['']['curve'];
+        this.curveX = curve['m_LocalPosition.x'];
+        this.curveY = curve['m_LocalPosition.y'];
+        this.curveZ = curve['m_LocalPosition.z'];
+        this.totalTime = this.animClip.totalTime;
+    }
+
+    async createMaterial() {
+        this.material = new LitMaterial();
+        this.material.depthCompare = 'always';
+        this.material.blendMode = BlendMode.ADD;
+        this.material.baseColor = new Color(0, 1, 0.5, 1.0);
+        this.material.transparent = true;
+
+        let texture = new BitmapTexture2D();
+        texture.addressModeU = "repeat";
+        texture.addressModeV = "repeat";
+        await texture.load('textures/cell.png');
+        this.material.baseMap = texture;
+    }
+
+    private createConduit() {
+        let shape = this.getShape();
+        let curve = this.getCurve();
+        let conduitObject3D = new Object3D();
+        this.scene.addChild(conduitObject3D);
+
+        let renderer = conduitObject3D.addComponent(MeshRenderer);
+        renderer.material = this.material;
+        renderer.geometry = new ExtrudeGeometry().build(shape, true, curve, 0.2);
+
+        let component = conduitObject3D.addComponent(UVMoveComponent);
+        component.speed.set(0, -0.8, 0.5, 0.5)
+        GUIUtil.renderUVMove(component);
+
+    }
+
+    private getShape(): Vector3[] {
+        let vertexList: Vector3[] = [];//circle
+        let radius = 1.2;
+        const vertexCount = 8;
+        for (let i = 0; i < vertexCount; i++) {
+            let angle = Math.PI * 2 * i / vertexCount;
+            let point = new Vector3(Math.sin(angle), 0, Math.cos(angle)).multiplyScalar(radius);
+            vertexList.push(point);
+        }
+        return vertexList;
+    }
+
+    private getCurve(): Vector3[] {
+        let vertexList: Vector3[] = [];
+        for (let i = 0; i < this.totalTime; i += 0.05) {
+            let point = new Vector3();
+            point.x = this.curveX.getValue(i);
+            point.y = this.curveY.getValue(i);
+            point.z = - this.curveZ.getValue(i);
+            point.multiplyScalar(5);
+            vertexList.push(point);
+        }
+        return vertexList;
+    }
+}
+
+new Sample_ConduitGeometry2().run();

samples/geometry/Sample_ConduitGeometry3.ts

@@ -0,0 +1,99 @@
+import { BitmapTexture2D, BlendMode, Color, Engine3D, ExtrudeGeometry, LitMaterial, MeshRenderer, Object3D, Object3DUtil, Scene3D, Vector3 } from "@orillusion/core";
+import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene";
+import { UVMoveComponent } from "@samples/material/script/UVMoveComponent";
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { GUIUtil } from "@samples/utils/GUIUtil";
+
+// An sample to use ExtrudeGeometry and make uv move animation
+class Sample_ConduitGeometry3 {
+
+    scene: Scene3D;
+    material: LitMaterial;
+    totalTime: number;
+
+    async run() {
+        GUIHelp.init();
+        Engine3D.setting.shadow.shadowBound = 50;
+        Engine3D.setting.shadow.shadowBias = 0.0001;
+        let param = createSceneParam();
+        param.camera.distance = 50;
+        await Engine3D.init();
+        let exampleScene = createExampleScene(param);
+        this.scene = exampleScene.scene;
+        Engine3D.startRenderView(exampleScene.view);
+        await this.createMaterial();
+
+        this.createConduit();
+        this.createFloor();
+    }
+
+    createFloor() {
+        let object3D = Object3DUtil.GetSingleCube(200, 1, 200, 1, 1, 1);
+        this.scene.addChild(object3D)
+    }
+
+    async createMaterial() {
+        this.material = new LitMaterial();
+        this.material.cullMode = 'none';
+        this.material.depthCompare = 'always';
+        this.material.blendMode = BlendMode.ADD;
+        this.material.baseColor = new Color(0, 1, 0.5, 1.0);
+        this.material.transparent = true;
+
+        let texture = new BitmapTexture2D();
+        texture.addressModeU = "repeat";
+        texture.addressModeV = "repeat";
+        await texture.load('textures/cell.png');
+        this.material.baseMap = texture;
+    }
+
+    private createConduit() {
+        let shape = this.getShape();
+        let curve = this.getCurve();
+        let conduitObject3D = new Object3D();
+        this.scene.addChild(conduitObject3D);
+
+        let renderer = conduitObject3D.addComponent(MeshRenderer);
+        renderer.material = this.material;
+        renderer.geometry = new ExtrudeGeometry().build(shape, false, curve, 0.2);
+
+        let component = conduitObject3D.addComponent(UVMoveComponent);
+        component.speed.set(0, -0.4, 4, 0.5)
+        GUIUtil.renderUVMove(component);
+
+    }
+
+    private getShape(): Vector3[] {
+        let vertexList: Vector3[] = [];//an area
+        const vertexCount = 40;
+        for (let i = 0; i < vertexCount; i++) {
+            let angle = i * Math.PI * 2 / 23;
+            let angle2 = i * Math.PI * 2 / 50;
+            let z2 = Math.sin(angle2) * 8 * (Math.random() * 0.1 + 0.9);
+            let vertex = new Vector3(
+                i + this.random(-0.2, 0.2) - vertexCount * 0.5,
+                0,
+                Math.sin(angle) + this.random(-1, 1)
+            );
+
+            vertex.z += z2;
+
+            vertexList.push(vertex);
+        }
+
+        return vertexList;
+    }
+
+    private random(min: number, max: number): number {
+        return Math.random() * (max - min) + min;
+    }
+
+    private getCurve(): Vector3[] {
+        let vertexList: Vector3[] = [];
+        vertexList.push(new Vector3(0, 0, 0));
+        vertexList.push(new Vector3(0, 20, 0));
+        return vertexList;
+    }
+}
+
+new Sample_ConduitGeometry3().run();