fix: fix engine bug

packages/effect/grass/shader/GrassVertexAttributeShader.ts

@@ -13,15 +13,16 @@ export let GrassVertexAttributeShader: string = /*wgsl*/ `
     }
 
     struct VertexOutput {
-        @location(0) varying_UV0: vec2<f32>,
-        @location(1) varying_UV1: vec2<f32>,
-        @location(2) varying_ViewPos: vec4<f32>,
-        @location(3) varying_Clip: vec4<f32>,
-        @location(4) varying_WPos: vec4<f32>,
-        @location(5) varying_WNormal: vec3<f32>,
-        @location(6) varying_Color: vec4<f32>,
+        @location(0) index: f32,
+        @location(1) varying_UV0: vec2<f32>,
+        @location(2) varying_UV1: vec2<f32>,
+        @location(3) varying_ViewPos: vec4<f32>,
+        @location(4) varying_Clip: vec4<f32>,
+        @location(5) varying_WPos: vec4<f32>,
+        @location(6) varying_WNormal: vec3<f32>,
+        @location(7) varying_Color: vec4<f32>,
         #if USE_SHADOWMAPING
-            @location(7) varying_ShadowPos: vec4<f32>,
+            @location(8) varying_ShadowPos: vec4<f32>,
         #endif
         @builtin(position) member: vec4<f32>
     };

samples/ext/Sample_Grass.ts

@@ -31,16 +31,16 @@ export class Sample_Grass {
 
         Engine3D.startRenderView(this.view);
 
-        this.post = this.view.scene.addComponent(PostProcessingComponent);
-        let fxaa = this.post.addPost(FXAAPost);
-        let fog = this.post.addPost(GlobalFog);
-        fog.fogColor = new Color(136 / 255, 215 / 255, 236 / 255, 1);
-        fog.start = 0;
-        fog.overrideSkyFactor = 0.0764;
-        fog.ins = 1;
-        fog.falloff = 0.626;
-        fog.scatteringExponent = 3;
-        fog.dirHeightLine = 10;
+        // this.post = this.view.scene.addComponent(PostProcessingComponent);
+        // let fxaa = this.post.addPost(FXAAPost);
+        // let fog = this.post.addPost(GlobalFog);
+        // fog.fogColor = new Color(136 / 255, 215 / 255, 236 / 255, 1);
+        // fog.start = 0;
+        // fog.overrideSkyFactor = 0.0764;
+        // fog.ins = 1;
+        // fog.falloff = 0.626;
+        // fog.scatteringExponent = 3;
+        // fog.dirHeightLine = 10;
         // post.addPost(TAAPost);
 
         this.createScene(this.view.scene);
@@ -148,9 +148,6 @@ export class Sample_Grass {
         // GUIHelp.addFolder("shadow");
         // GUIHelp.add(Engine3D.setting.shadow, "shadowBound", 0.0, 3000, 0.0001);
         // GUIHelp.endFolder();
-
-        let globalFog = this.post.getPost(GlobalFog);
-        // GUIUtil.renderFog(globalFog);
     }
 
 }

samples/graphic/Sample_GraphicMeshWave.ts

@@ -1,5 +1,5 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, LitMaterial, MeshRenderer, BoxGeometry, SphereGeometry, VirtualTexture, GPUTextureFormat, UnLitMaterial, UnLitTexArrayMaterial, BitmapTexture2DArray, BitmapTexture2D, PlaneGeometry, Vector3, Graphic3DMesh, Matrix4, Time, BlendMode, PrefabParser } from "@orillusion/core";
+import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, UnLitTexArrayMaterial, BitmapTexture2DArray, BitmapTexture2D, PlaneGeometry, Vector3, Graphic3DMesh, Matrix4, Time, BlendMode, PrefabParser } from "@orillusion/core";
 import { GUIUtil } from "@samples/utils/GUIUtil";
 import { Stats } from "@orillusion/stats";
 

samples/graphic/Sample_GraphicMesh_0.ts

@@ -1,5 +1,5 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, LitMaterial, MeshRenderer, BoxGeometry, SphereGeometry, VirtualTexture, GPUTextureFormat, UnLitMaterial, UnLitTexArrayMaterial, BitmapTexture2DArray, BitmapTexture2D, PlaneGeometry, Vector3, Graphic3DMesh, Matrix4, Time, BlendMode } from "@orillusion/core";
+import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, UnLitTexArrayMaterial, BitmapTexture2DArray, BitmapTexture2D, PlaneGeometry, Vector3, Graphic3DMesh, Matrix4, Time, BlendMode } from "@orillusion/core";
 import { GUIUtil } from "@samples/utils/GUIUtil";
 import { Stats } from "@orillusion/stats";
 

samples/graphic/Sample_GraphicMesh_1.ts

@@ -1,5 +1,5 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, LitMaterial, MeshRenderer, BoxGeometry, SphereGeometry, VirtualTexture, GPUTextureFormat, UnLitMaterial, UnLitTexArrayMaterial, BitmapTexture2DArray, BitmapTexture2D, PlaneGeometry, Vector3, Graphic3DMesh, Matrix4, Time, BlendMode, Color } from "@orillusion/core";
+import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, UnLitTexArrayMaterial, BitmapTexture2DArray, BitmapTexture2D, PlaneGeometry, Vector3, Graphic3DMesh, Matrix4, Time, BlendMode, Color } from "@orillusion/core";
 import { GUIUtil } from "@samples/utils/GUIUtil";
 import { Stats } from "@orillusion/stats";
 

samples/graphic/Sample_GraphicMesh_2.ts

@@ -1,5 +1,5 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, LitMaterial, MeshRenderer, BoxGeometry, SphereGeometry, VirtualTexture, GPUTextureFormat, UnLitMaterial, UnLitTexArrayMaterial, BitmapTexture2DArray, BitmapTexture2D, PlaneGeometry, Vector3, Graphic3DMesh, Matrix4, Time, BlendMode } from "@orillusion/core";
+import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, UnLitTexArrayMaterial, BitmapTexture2DArray, BitmapTexture2D, PlaneGeometry, Vector3, Graphic3DMesh, Matrix4, Time, BlendMode } from "@orillusion/core";
 import { GUIUtil } from "@samples/utils/GUIUtil";
 import { Stats } from "@orillusion/stats";
 

samples/graphic/Sample_GraphicMesh_3.ts

@@ -1,5 +1,5 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, LitMaterial, MeshRenderer, BoxGeometry, SphereGeometry, VirtualTexture, GPUTextureFormat, UnLitMaterial, UnLitTexArrayMaterial, BitmapTexture2DArray, BitmapTexture2D, PlaneGeometry, Vector3, Graphic3DMesh, Matrix4, Time, BlendMode, PrefabParser } from "@orillusion/core";
+import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, DirectLight, KelvinUtil, MeshRenderer, UnLitTexArrayMaterial, BitmapTexture2DArray, Vector3, Graphic3DMesh, Matrix4, Time, PrefabParser } from "@orillusion/core";
 import { GUIUtil } from "@samples/utils/GUIUtil";
 import { Stats } from "@orillusion/stats";
 

samples/gui/Sample_UIMultipleTextures.ts

@@ -0,0 +1,53 @@
+import { Engine3D, Scene3D, Object3D, Camera3D, View3D, UIImage, HoverCameraController, AtmosphericComponent, BitmapTexture2D, makeAloneSprite, WorldPanel, GPUCullMode, UIPanel, Color } from '@orillusion/core'
+
+class Sample_UIMultipleTextures {
+    async run() {
+        // initializa engine
+        await Engine3D.init()
+        // create new scene as root node
+        let scene3D: Scene3D = new Scene3D()
+        scene3D.addComponent(AtmosphericComponent)
+        // create    camera
+        let cameraObj: Object3D = new Object3D()
+        let camera = cameraObj.addComponent(Camera3D)
+        // adjust camera view
+        camera.perspective(60, Engine3D.aspect, 1, 5000.0)
+        // set camera controller
+        let controller = cameraObj.addComponent(HoverCameraController)
+        controller.setCamera(15, 10, 80)
+        // add camera node
+        scene3D.addChild(cameraObj)
+        let view = new View3D()
+        view.scene = scene3D
+        view.camera = camera
+        Engine3D.startRenderView(view)
+        // create panel root
+        let panelRoot: Object3D = new Object3D()
+        let panel: UIPanel = panelRoot.addComponent(WorldPanel)
+        panel.cullMode = GPUCullMode.none;
+        panelRoot.localScale.set(0.1, 0.1, 0.1)
+        let canvas = view.enableUICanvas()
+        canvas.addChild(panelRoot)
+
+        for (let i = 0; i < 10; i++) {
+            let bitmapTexture2D = new BitmapTexture2D()
+            bitmapTexture2D.flipY = true
+            await bitmapTexture2D.load('textures/digit/digit_' + i + '.png')
+
+            // create image node
+            let imageQuad = new Object3D()
+            panelRoot.addChild(imageQuad)
+            // create image component
+            let image: UIImage = imageQuad.addComponent(UIImage)
+            // set image size
+            image.uiTransform.resize(10, 10)
+            image.uiTransform.setXY((i - 5) * 8, 0);
+            image.color = Color.random();
+            // set image source
+            image.sprite = makeAloneSprite('webgpu' + i, bitmapTexture2D)
+        }
+
+    }
+}
+
+new Sample_UIMultipleTextures().run()

samples/index.ts

@@ -67,4 +67,4 @@
         </script>`
         document.body.appendChild(iframe)
     }
-}
+}

samples/loader/Sample_LoadGLB.ts

@@ -6,6 +6,7 @@ import { GUIUtil } from "@samples/utils/GUIUtil";
 // Sample to load glb file
 export class Sample_LoadGLB {
     scene: Scene3D;
+    model: Object3D;
 
     async run() {
         GUIHelp.init();
@@ -49,71 +50,60 @@ export class Sample_LoadGLB {
 
         /******** load glb file *******/
 
-        //cull mode
-        let list = {};
-        list[`HIE-Hand-Armor`] = JSON.stringify(
-            {
+        //model list
+        let list = {
+            "HIE-Hand-Armor": {
                 url: `gltfs/glb/HIE-Hand-Armor.glb`,
                 scale: 1,
                 offset: [0, 0, 0],
                 rotation: [0, 0, 0]
-            }
-        )
-        list[`PebsiCan`] = JSON.stringify(
-            {
+            },
+            "PebsiCan": {
                 url: `gltfs/glb/PebsiCan.glb`,
                 scale: 1,
                 offset: [0, 3, 0],
                 rotation: [0, 0, 0]
-            }
-        )
-        list[`Liv-SpecOpsWolf`] = JSON.stringify(
-            {
+            },
+            "Liv-SpecOpsWolf": {
                 url: `gltfs/glb/Liv-SpecOpsWolf.glb`,
                 scale: 20,
                 offset: [0, 0, 0],
                 rotation: [0, 0, 0]
-            }
-        )
-        list[`FlamingoPool`] = JSON.stringify(
-            {
+            },
+            "FlamingoPool": {
                 url: `gltfs/glb/FlamingoPool.glb`,
                 scale: 0.5,
                 offset: [0, 0, 0],
                 rotation: [180, 0, 0]
-            }
-        )
-        list[`PotionBottle`] = JSON.stringify(
-            {
+            },
+            "PotionBottle": {
                 url: `gltfs/glb/PotionBottle.glb`,
                 scale: 0.1,
                 offset: [0, 0, 0],
                 rotation: [0, 0, 0]
-            }
-        )
-        list[`wukong`] = JSON.stringify(
-            {
+            },
+            "wukong": {
                 url: `gltfs/wukong/wukong.gltf`,
                 scale: 10,
                 offset: [0, 0, 0],
                 rotation: [0, 0, 0]
             }
-        )
-
-        let model: Object3D;
-        let { url, scale, offset, rotation } = JSON.parse(list[`HIE-Hand-Armor`]);
-        this.loadGLB(model, url, offset, scale, rotation);
-        GUIHelp.add({ Model: `HIE-Hand-Armor` }, 'Model', list).onChange(async (v) => {
-            let { url, scale, offset, rotation } = JSON.parse(v);
-            this.loadGLB(model, url, offset, scale, rotation);
+        };
+
+
+        GUIHelp.add({ Model: `HIE-Hand-Armor` }, 'Model', Object.keys(list)).onChange(async (v) => {
+            let { url, scale, offset, rotation } = list[v];
+            this.loadGLB(url, offset, scale, rotation);
         });
+        let { url, scale, offset, rotation } = list[`HIE-Hand-Armor`];
+        this.loadGLB(url, offset, scale, rotation);
     }
 
-    private async loadGLB(model: Object3D, url: string, offset: number[], scale: number, rotation: number[]) {
-        if (model) {
-            this.scene.removeChild(model);
+    private async loadGLB(url: string, offset: number[], scale: number, rotation: number[]) {
+        if (this.model) {
+            this.scene.removeChild(this.model);
         }
-        model = (await Engine3D.res.loadGltf(url, { onProgress: (e) => this.onLoadProgress(e), onComplete: (e) => this.onComplete(e) })) as Object3D;
+        let model = this.model = (await Engine3D.res.loadGltf(url, { onProgress: (e) => this.onLoadProgress(e), onComplete: (e) => this.onComplete(e) })) as Object3D;
         this.scene.addChild(model);
         model.x = offset[0];
         model.y = offset[1];
@@ -129,11 +119,11 @@ export class Sample_LoadGLB {
     }
 
     onLoadProgress(e) {
-        console.log(e);
+        console.log('[loading]', e);
     }
 
     onComplete(e) {
-        console.log(e);
+        console.log('[compelete]', e);
     }
 
 }