feat(compute): Add custom compute shader samples (#336)

Add custom compute shader samples (#336)

samples/computer/Sample_Cloth.ts

@@ -0,0 +1,116 @@
+import { GUIHelp } from '@orillusion/debug/GUIHelp';
+import { AtmosphericComponent, BoxGeometry, CameraUtil, DirectLight, Engine3D, HoverCameraController, LitMaterial, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, View3D, webGPUContext } from '@orillusion/core';
+import { ClothSimulator } from "./cloth/ClothSimulator";
+
+export class Demo_Cloth {
+    constructor() {
+    }
+
+    async run() {
+
+        Engine3D.setting.shadow.autoUpdate = true;
+        Engine3D.setting.shadow.updateFrameRate = 1;
+        Engine3D.setting.shadow.shadowBound = 8;
+        Engine3D.setting.shadow.shadowSize = 1024;
+        Engine3D.setting.shadow.shadowBias = 0.00001;
+
+        await Engine3D.init({});
+
+        GUIHelp.init();
+
+        let scene = new Scene3D();
+        let sky = scene.addComponent(AtmosphericComponent);
+        await this.initScene(scene);
+
+        let camera = CameraUtil.createCamera3DObject(scene);
+
+        camera.perspective(60, webGPUContext.aspect, 0.01, 10000.0);
+        let ctl = camera.object3D.addComponent(HoverCameraController);
+        ctl.setCamera(30, -28, 2);
+
+        let view = new View3D();
+        view.scene = scene;
+        view.camera = camera;
+
+        Engine3D.startRenderView(view);
+    }
+
+    async initScene(scene: Scene3D) {
+        let mat = new LitMaterial();
+        mat.baseMap = Engine3D.res.grayTexture;
+        mat.roughness = 0.8;
+        mat.metallic = 0.1;
+
+        let sphere = new Object3D();
+        sphere.transform.z = 0.5;
+        let mr = sphere.addComponent(MeshRenderer);
+        mr.geometry = new SphereGeometry(0.16, 16, 16);
+        mr.material = mat;//new HDRLitMaterial();
+        mr.castShadow = true;
+        scene.addChild(sphere);
+
+        let cloth = new Object3D();
+        let simulator = cloth.addComponent(ClothSimulator);
+        simulator.castShadow = true;
+        simulator.SetInteractionSphere(sphere);
+        scene.addChild(cloth);
+
+        {
+            let mat = new LitMaterial();
+            mat.baseMap = Engine3D.res.grayTexture;
+            mat.roughness = 0.8;
+            let plane = new Object3D();
+            plane.transform.y = -1;
+            let planeMesh = plane.addComponent(MeshRenderer);
+            planeMesh.geometry = new PlaneGeometry(100, 100);
+            planeMesh.material = mat;
+            planeMesh.receiveShadow = true;
+            scene.addChild(plane);
+        }
+
+        {
+            var lightObj = new Object3D();
+            lightObj.x = 0;
+            lightObj.y = 0;
+            lightObj.z = 0;
+            lightObj.rotationX = 45;
+            lightObj.rotationY = 0;
+            lightObj.rotationZ = 0;
+            let lc = lightObj.addComponent(DirectLight);
+            lc.intensity = 20;
+            lc.castShadow = true;
+            scene.addChild(lightObj);
+        }
+
+        {
+            let poleMat = new LitMaterial();
+
+
+            let pole_L = new Object3D();
+            pole_L.transform.y = -0.25;
+            pole_L.transform.x = -0.59;
+            let mr = pole_L.addComponent(MeshRenderer);
+            mr.geometry = new BoxGeometry(0.02, 1.5, 0.02);
+            mr.material = poleMat
+            mr.castShadow = true;
+            scene.addChild(pole_L);
+
+            let pole_R = new Object3D();
+            pole_R.transform.y = -0.25;
+            pole_R.transform.x = 0.59;
+            mr = pole_R.addComponent(MeshRenderer);
+            mr.geometry = new BoxGeometry(0.02, 1.5, 0.02);
+            mr.material = poleMat
+            mr.castShadow = true;
+            scene.addChild(pole_R);
+
+            let pole_T = new Object3D();
+            pole_T.transform.y = 0.5;
+            mr = pole_T.addComponent(MeshRenderer);
+            mr.geometry = new BoxGeometry(1.2, 0.02, 0.02);
+            mr.material = poleMat
+            mr.castShadow = true;
+            scene.addChild(pole_T);
+        }
+    }
+}

samples/computer/Sample_Flame.ts

@@ -0,0 +1,73 @@
+
+import { AtmosphericComponent, CameraUtil, DirectLight, Engine3D, HoverCameraController, Object3D, PlaneGeometry, Scene3D, Vector3, View3D, webGPUContext } from "@orillusion/core";
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { FlameSimulator } from "./flame/FlameSimulator";
+import { FlameSimulatorMaterial } from "./flame/FlameSimulatorMaterial";
+
+export class Demo_Flame {
+    constructor() { }
+
+    protected mLastPoint: Vector3 = new Vector3();
+    protected mVelocity: Vector3 = new Vector3();
+
+    async run() {
+        await Engine3D.init({});
+
+        GUIHelp.init();
+
+        let scene = new Scene3D();
+        let sky = scene.addComponent(AtmosphericComponent);
+        await this.initScene(scene);
+
+        let camera = CameraUtil.createCamera3DObject(scene);
+
+        camera.perspective(60, webGPUContext.aspect, 0.01, 10000.0);
+        let ctl = camera.object3D.addComponent(HoverCameraController);
+        ctl.setCamera(0, 0, 5);
+
+        let view = new View3D();
+        view.scene = scene;
+        view.camera = camera;
+        Engine3D.startRenderView(view);
+    }
+
+    async initScene(scene: Scene3D) {
+        let cesiumMan = await Engine3D.res.loadGltf('gltfs/CesiumMan/CesiumMan.gltf');
+        // cesiumMan.transform.localScale.set(10, 10, 10);
+        cesiumMan.rotationX = -90;
+        cesiumMan.rotationY = 180;
+        cesiumMan.y = -0.8;
+        scene.addChild(cesiumMan);
+
+        // {
+        //     let obj = new Object3D();
+        //     obj.y = -1;
+        //     obj.z = -10;
+        //     let mr = obj.addComponent(MeshRenderer);
+        //     mr.geometry = new PlaneGeometry(100, 100, 1, 1, Vector3.Y_AXIS);
+        //     mr.material = new LitMaterial();
+        //     mr.castShadow = true;
+        //     mr.receiveShadow = true;
+        //     scene.addChild(obj);
+        // }
+
+        {
+            let obj = new Object3D();
+            obj.rotationX = 120;
+            obj.rotationY = 306;
+            let light = obj.addComponent(DirectLight);
+            light.intensity = 5;
+            light.castShadow = true;
+            light.debug();
+            scene.addChild(obj);
+        }
+
+        let emulation = cesiumMan.addComponent(FlameSimulator);
+        emulation.alwaysRender = true;
+        emulation.geometry = new PlaneGeometry(0.01, 0.01, 1.0, 1.0, Vector3.Z_AXIS);
+        emulation.material = new FlameSimulatorMaterial();
+
+    }
+
+    async initComputeBuffer() { }
+}

samples/computer/Sample_Flow.ts

@@ -0,0 +1,34 @@
+import { AtmosphericComponent, CameraUtil, Engine3D, HoverCameraController, Object3D, Scene3D, Vector3, View3D, webGPUContext } from '@orillusion/core';
+import { FlowSimulator } from "./flow/FlowSimulator";
+
+export class Demo_Flow {
+    constructor() {
+    }
+
+    async run() {
+        await Engine3D.init({});
+
+        let scene = new Scene3D();
+        let sky = scene.addComponent(AtmosphericComponent);
+        await this.initScene(scene);
+
+        let camera = CameraUtil.createCamera3DObject(scene);
+
+        camera.perspective(60, webGPUContext.aspect, 0.01, 10000.0);
+        let ctl = camera.object3D.addComponent(HoverCameraController);
+        ctl.setCamera(0, 0, 4, new Vector3(0, 1, 0));
+        ctl.maxDistance = 1000;
+
+        let view = new View3D();
+        view.scene = scene;
+        view.camera = camera;
+
+        Engine3D.startRenderView(view);
+    }
+
+    async initScene(scene: Scene3D) {
+        let obj = new Object3D();
+        obj.addComponent(FlowSimulator);
+        scene.addChild(obj);
+    }
+}

samples/computer/Sample_FlowImg.ts

@@ -0,0 +1,98 @@
+import { GUIHelp } from '@orillusion/debug/GUIHelp';
+import { CameraUtil, Engine3D, HoverCameraController, Object3D, Scene3D, webGPUContext, AtmosphericComponent, View3D } from '@orillusion/core';
+import { FlowImgSimulator } from "./flowImg/FlowImgSimulator";
+
+export class Demo_FlowImg {
+    constructor() { }
+
+    async run() {
+        await Engine3D.init({});
+        let scene = new Scene3D();
+        let sky = scene.addComponent(AtmosphericComponent);
+        await this.initScene(scene);
+
+        let camera = CameraUtil.createCamera3DObject(scene);
+
+        camera.perspective(60, webGPUContext.aspect, 0.01, 10000.0);
+        let ctl = camera.object3D.addComponent(HoverCameraController);
+        ctl.distance = 3;
+
+        let view = new View3D();
+        view.scene = scene;
+        view.camera = camera;
+
+        Engine3D.startRenderView(view);
+    }
+
+    async initScene(scene: Scene3D) {
+        GUIHelp.init();
+
+        var obj = new Object3D();
+        let image = await this.imageloader('png/logo.png');
+        let simulator = obj.addComponent(FlowImgSimulator);
+        simulator.setImageData(image);
+        scene.addChild(obj);
+
+        let input = document.createElement('input')
+        input.type = 'file'
+        input.accept = '.png,.webp'
+        input.style.position = 'fixed'
+        document.body.appendChild(input)
+        /*input.onchange= async (e)=>{
+            let url = URL.createObjectURL(e.target.files[0])
+            let image = await this.imageloader(url)
+            simulator.setImageData(image);
+            simulator.reset()
+        }*/
+        GUIHelp.addButton('Change Image (PNG with transparent)', ()=>{
+            input.click()
+        })
+        GUIHelp.endFolder();
+        setTimeout(()=>{
+            for(let f in GUIHelp.folders){
+                if(f == 'FlowImgSimulator'){
+                    GUIHelp.folders[f].open()
+                }    
+                else
+                    GUIHelp.gui.removeFolder(GUIHelp.folders[f])
+            }
+        })
+    }
+
+    async initComputeBuffer() { }
+
+    async imageloader(url: string) {
+        const res = await fetch(url)
+        const img = await res.blob()
+        const bitmap = await createImageBitmap(img)
+        const r = 1 //bitmap.width / bitmap.height
+
+        const canvas = document.createElement('canvas');
+        canvas.hidden = true;
+        document.body.appendChild(canvas);
+
+        // const canvas = document.querySelector('#canvas') as HTMLCanvasElement
+        const width = canvas.width = 512
+        const height = canvas.height = canvas.width / r
+        const context = canvas.getContext('2d')
+        if (!context)
+            throw new Error('no canvas')
+        context.drawImage(bitmap, 0, 0, width, height)
+        const pixelData = context.getImageData(0, 0, width, height)
+        // console.log(pixelData)
+        const positions = [], colors = []
+        for (let i = 0; i < pixelData.data.length; i += 4) {
+            const alpha = pixelData.data[i + 3]
+            if (alpha > 0) {
+                const r = pixelData.data[i + 0]
+                const g = pixelData.data[i + 1]
+                const b = pixelData.data[i + 2]
+                colors.push(r, g, b, 1)
+                const y = Math.floor(i / width / 4)
+                const x = (Math.floor(i / 4) - y * width)
+                positions.push(x / width, y / width, 0, 1)
+            }
+        }
+        return { positions, colors }
+    }
+}

samples/computer/Sample_Fluid.ts

@@ -0,0 +1,71 @@
+import { GUIHelp } from '@orillusion/debug/GUIHelp';
+import { Camera3D, CameraUtil, ColliderComponent, Engine3D, HoverCameraController, Object3D, PointerEvent3D, Scene3D, SphereGeometry, Vector3, View3D, webGPUContext } from '@orillusion/core';
+import { FluidEmulation } from './fluid/FluidSimulator';
+import { FluidSimulatorMaterial } from './fluid/FluidSimulatorMaterial';
+
+export class Demo_Fluid {
+    constructor() { }
+
+    protected mLastPoint: Vector3 = new Vector3();
+    protected mVelocity: Vector3 = new Vector3();
+
+    async run() {
+        Engine3D.setting.material.materialChannelDebug = true;
+        Engine3D.setting.pick.enable = true;
+        Engine3D.setting.pick.mode = `pixel`;
+        Engine3D.setting.render.postProcessing.ssao.radius = 0.1;
+        Engine3D.setting.render.postProcessing.ssao.aoPower = 4.2;
+
+        Engine3D.setting.render.postProcessing.gtao.usePosFloat32 = false;
+        Engine3D.setting.render.postProcessing.gtao.maxDistance = 0.65;
+        Engine3D.setting.render.postProcessing.gtao.maxPixel = 10;
+        await Engine3D.init({});
+
+        GUIHelp.init();
+
+        let scene = new Scene3D();
+        //await this.initScene(scene);
+
+        let camera = CameraUtil.createCamera3DObject(scene);
+
+        camera.perspective(60, webGPUContext.aspect, 0.01, 10000.0);
+        let ctl = camera.object3D.addComponent(HoverCameraController);
+        ctl.setCamera(-45, -30, 50, new Vector3(15, 0, 10));
+
+        let view = new View3D();
+        view.scene = scene;
+        view.camera = camera;
+
+        Engine3D.startRenderView(view);
+        await this.initScene(scene);
+    }
+
+    async initScene(scene: Scene3D) {
+        let obj = new Object3D();
+
+        let emulation = obj.addComponent(FluidEmulation);
+        emulation.alwaysRender = true;
+        emulation.geometry = new SphereGeometry(0.08, 8, 8);
+        emulation.material = new FluidSimulatorMaterial();
+        scene.addChild(obj);
+
+        obj.addComponent(ColliderComponent);
+        let pickFire = scene.view.pickFire;
+        pickFire.addEventListener(
+            PointerEvent3D.PICK_MOVE, 
+            function (e: PointerEvent3D) {
+                let point = e.data.pickInfo.worldPos;
+                if (point.y >= 0 && (this.mLastPoint.x != point.x && this.mLastPoint.y != point.y && this.mLastPoint.z != point.z)) {
+                    point.subtract(this.mLastPoint, this.mVelocity);
+                    this.mLastPoint.copy(point);
+                    let r = scene.view.camera;
+                    let ray = r.screenPointToRay(Engine3D.inputSystem.mouseX, Engine3D.inputSystem.mouseY);
+                    emulation.updateInputInfo(scene.view.camera.transform.localPosition, ray.direction, this.mVelocity);
+                    return;
+                }
+            }, this);
+    }
+
+    async initComputeBuffer() { }
+}
+