feat(compute): Add custom compute shader samples

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() { }
+}
+