From 3e7daef7b7cc3cf4352c6012d204c03ac8cb33ff Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Wed, 1 Nov 2023 13:19:08 +0800 Subject: [PATCH 01/34] fix: fix gltf sample fix gltf sample fix emissive color --- samples/graphic/Sample_GraphicMesh_7.ts | 23 +-- samples/graphic/Sample_GraphicMesh_Color.ts | 173 +++++++++++++++++ .../graphic/Sample_GraphicMesh_SpriteSheet.ts | 179 ++++++++++++++++++ samples/loader/Sample_LoadGLB.ts | 47 +++-- samples/material/Sample_ClearCoat.ts | 2 +- samples/utils/ExampleScene.ts | 6 +- .../core/struct/VertexAttributeIndexShader.ts | 5 + src/assets/shader/lighting/BxDF_frag.ts | 4 +- .../shader/materials/UnLitTextureArray.ts | 6 +- .../graphic/new/Graphic3DMeshRenderer.ts | 34 +++- .../parser/gltf/GLTFSubParserConverter.ts | 2 +- src/materials/LitMaterial.ts | 47 +++++ src/materials/SkyMaterial.ts | 2 +- src/math/Color.ts | 16 ++ src/math/UV.ts | 9 + 15 files changed, 498 insertions(+), 57 deletions(-) create mode 100644 samples/graphic/Sample_GraphicMesh_Color.ts create mode 100644 samples/graphic/Sample_GraphicMesh_SpriteSheet.ts diff --git a/samples/graphic/Sample_GraphicMesh_7.ts b/samples/graphic/Sample_GraphicMesh_7.ts index 7bfffc60..b753c7ea 100644 --- a/samples/graphic/Sample_GraphicMesh_7.ts +++ b/samples/graphic/Sample_GraphicMesh_7.ts @@ -55,8 +55,6 @@ export class Sample_GraphicMesh_7 { await this.initScene(); - - sky.relativeTransform = this.lightObj3D.transform; } @@ -91,32 +89,21 @@ export class Sample_GraphicMesh_7 { { this.width = 15; this.height = 15; - // let geometry = new BoxGeometry(1, 1, 1); let geometry = new PlaneGeometry(1, 1, 1, 1, Vector3.Z_AXIS); let mr = Graphic3DMesh.draw(this.scene, geometry, bitmapTexture2DArray, this.width * this.height); this.parts = mr.object3Ds; mr.material.blendMode = BlendMode.ADD; - // mr.material.doubleSide = true; mr.material.transparent = true; mr.material.depthWriteEnabled = false; mr.material.useBillboard = true; for (let i = 0; i < this.width * this.height; i++) { const element = this.parts[i]; - // mr.setTextureID(i, i % texts.length); - // mr.setTextureID(i, 52); mr.setTextureID(i, 0); - // mr.setTextureID(i, 39); - // mr.setTextureID(i, 18); - element.transform.scaleX = 5.5; element.transform.scaleY = 5.5; element.transform.scaleZ = 5.5; - - // let c = Color.random(); - // c.a = 0.55; - // this.colors.push(c); } let c1 = new Color(0.65, 0.1, 0.2, 0.15); @@ -142,25 +129,21 @@ export class Sample_GraphicMesh_7 { this.tmpArray.length = 0; for (let i = 0; i < this.parts.length; i++) { const element = this.parts[i]; - let tmp = this.sphericalFibonacci(i, this.parts.length); tmp.scaleBy(this.cafe); - element.transform.localPosition = tmp; - - // if (sc > this.cafe * 0.95) { this.tmpArray.push(element); - // } } for (let i = 0; i < this.tmpArray.length / 3; i++) { this.view.graphic3D.Clear(i.toString()); - this.view.graphic3D.drawLines(i.toString(), [ + this.view.graphic3D.drawLines(i.toString(), + [ this.tmpArray[i * 3 + 0].transform.worldPosition, this.tmpArray[i * 3 + 1].transform.worldPosition, this.tmpArray[i * 3 + 2].transform.worldPosition, ], - this.colors); + this.colors); } } } diff --git a/samples/graphic/Sample_GraphicMesh_Color.ts b/samples/graphic/Sample_GraphicMesh_Color.ts new file mode 100644 index 00000000..4bfc06f7 --- /dev/null +++ b/samples/graphic/Sample_GraphicMesh_Color.ts @@ -0,0 +1,173 @@ +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, PostProcessingComponent, BloomPost, ColorUtil, Graphic3DMeshRenderer } from "@orillusion/core"; +import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Stats } from "@orillusion/stats"; + +export class Sample_GraphicMesh_Color { + private lightObj3D: Object3D; + private scene: Scene3D; + private parts: Object3D[]; + private width: number; + private height: number; + private cafe: number = 47; + private frame: number = 16; + private view: View3D; + private colors: Color[]; + private tmpArray: any[] = []; + + private color1: Color ; + private color2: Color ; + graphicMeshRenderer: Graphic3DMeshRenderer; + + constructor() { } + + async run() { + + Matrix4.maxCount = 500000; + Matrix4.allocCount = 500000; + + await Engine3D.init({ beforeRender: () => this.update() }); + + Engine3D.setting.render.debug = true; + Engine3D.setting.shadow.shadowBound = 5; + + this.colors = []; + + GUIHelp.init(); + + this.scene = new Scene3D(); + this.scene.addComponent(Stats); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.enable = false; + let camera = CameraUtil.createCamera3DObject(this.scene); + camera.perspective(60, Engine3D.aspect, 1, 5000.0); + + camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); + + this.view = new View3D(); + this.view.scene = this.scene; + this.view.camera = camera; + + Engine3D.startRenderView(this.view); + + GUIUtil.renderDebug(); + + let post = this.scene.addComponent(PostProcessingComponent); + let bloom = post.addPost(BloomPost); + bloom.bloomIntensity = 10.0 + GUIUtil.renderBloom(bloom); + + await this.initScene(); + + sky.relativeTransform = this.lightObj3D.transform; + } + + async initScene() { + /******** light *******/ + { + this.lightObj3D = new Object3D(); + this.lightObj3D.rotationX = 21; + this.lightObj3D.rotationY = 108; + this.lightObj3D.rotationZ = 10; + let directLight = this.lightObj3D.addComponent(DirectLight); + directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + directLight.castShadow = false; + directLight.intensity = 10; + GUIUtil.renderDirLight(directLight); + this.scene.addChild(this.lightObj3D); + } + + let texts = []; + + texts.push(await Engine3D.res.loadTexture("textures/128/star_0008.png") as BitmapTexture2D); + + let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); + bitmapTexture2DArray.setTextures(texts); + + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = bitmapTexture2DArray; + mat.name = "LitMaterial"; + + GUIHelp.add(this, "cafe", 0.0, 100.0); + GUIHelp.add(this, "frame", 0.0, 100.0); + { + this.width = 15; + this.height = 15; + let geometry = new PlaneGeometry(1, 1, 1, 1, Vector3.Z_AXIS); + this.graphicMeshRenderer = Graphic3DMesh.draw(this.scene, geometry, bitmapTexture2DArray, this.width * this.height); + this.parts = this.graphicMeshRenderer.object3Ds; + + this.graphicMeshRenderer.material.blendMode = BlendMode.ADD; + this.graphicMeshRenderer.material.transparent = true; + this.graphicMeshRenderer.material.depthWriteEnabled = false; + this.graphicMeshRenderer.material.useBillboard = true; + + for (let i = 0; i < this.width * this.height; i++) { + const element = this.parts[i]; + this.graphicMeshRenderer.setTextureID(i, 0); + element.transform.scaleX = 5.5; + element.transform.scaleY = 5.5; + element.transform.scaleZ = 5.5; + } + + this.color1 = new Color(1.5, 0.1, 0.2, 1.0); + this.color2 = new Color(0.1, 0.1, 4.5, 1.0); + let c2 = new Color(1.0, 1.1, 0.2, 0.65); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + } + + this.updateOnce(1000); + } + + update() { + this.updateOnce(Time.frame); + } + + updateOnce(engineFrame: number) { + if (this.parts) { + this.tmpArray.length = 0; + let len = this.parts.length ; + for (let i = 0; i < len; i++) { + const element = this.parts[i]; + let tmp = this.sphericalFibonacci(i, len); + tmp.scaleBy(this.cafe); + element.transform.localPosition = tmp; + this.tmpArray.push(element); + + let c = Color.lerp( Math.sin(engineFrame*0.001 + (i/len)), this.color1,this.color2, Color.COLOR_0 ); + this.graphicMeshRenderer.setBaseColor(i,c); + } + + for (let i = 0; i < this.tmpArray.length - 1; i++) { + this.view.graphic3D.Clear(i.toString()); + this.view.graphic3D.drawLines(i.toString(), [ + Vector3.ZERO, + this.tmpArray[i + 1].transform.worldPosition, + ], + this.colors); + } + } + } + + public madfrac(A: number, B: number): number { + return A * B - Math.floor(A * B); + } + + public sphericalFibonacci(i: number, n: number): Vector3 { + const PHI = Math.sqrt(5.0) * 0.5 + 0.5; + let phi = 2.0 * Math.PI * this.madfrac(i, PHI - 1); + let cosTheta = 1.0 - (2.0 * i + 1.0) * (1.0 / n); + let sinTheta = Math.sqrt(Math.max(Math.min(1.0 - cosTheta * cosTheta, 1.0), 0.0)); + + return new Vector3( + Math.cos(phi) * sinTheta, + Math.sin(phi) * sinTheta, + cosTheta); + } + +} diff --git a/samples/graphic/Sample_GraphicMesh_SpriteSheet.ts b/samples/graphic/Sample_GraphicMesh_SpriteSheet.ts new file mode 100644 index 00000000..03f21098 --- /dev/null +++ b/samples/graphic/Sample_GraphicMesh_SpriteSheet.ts @@ -0,0 +1,179 @@ +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, PostProcessingComponent, BloomPost, ColorUtil, Graphic3DMeshRenderer, UV } from "@orillusion/core"; +import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Stats } from "@orillusion/stats"; + +export class Sample_GraphicMesh_SpriteSheet { + private lightObj3D: Object3D; + private scene: Scene3D; + private parts: Object3D[]; + private width: number; + private height: number; + private cafe: number = 47; + private frame: number = 16; + private view: View3D; + private colors: Color[]; + private tmpArray: any[] = []; + + private color1: Color; + private color2: Color; + graphicMeshRenderer: Graphic3DMeshRenderer; + + constructor() { } + + async run() { + + Matrix4.maxCount = 500000; + Matrix4.allocCount = 500000; + + await Engine3D.init({ beforeRender: () => this.update() }); + + Engine3D.setting.render.debug = true; + Engine3D.setting.shadow.shadowBound = 5; + + this.colors = []; + + GUIHelp.init(); + + this.scene = new Scene3D(); + this.scene.addComponent(Stats); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.enable = false; + let camera = CameraUtil.createCamera3DObject(this.scene); + camera.perspective(60, Engine3D.aspect, 1, 5000.0); + + camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); + + this.view = new View3D(); + this.view.scene = this.scene; + this.view.camera = camera; + + Engine3D.startRenderView(this.view); + + GUIUtil.renderDebug(); + + let post = this.scene.addComponent(PostProcessingComponent); + let bloom = post.addPost(BloomPost); + bloom.bloomIntensity = 10.0 + GUIUtil.renderBloom(bloom); + + await this.initScene(); + + sky.relativeTransform = this.lightObj3D.transform; + } + + async initScene() { + /******** light *******/ + { + this.lightObj3D = new Object3D(); + this.lightObj3D.rotationX = 21; + this.lightObj3D.rotationY = 108; + this.lightObj3D.rotationZ = 10; + let directLight = this.lightObj3D.addComponent(DirectLight); + directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + directLight.castShadow = false; + directLight.intensity = 10; + GUIUtil.renderDirLight(directLight); + this.scene.addChild(this.lightObj3D); + } + + let texts = []; + + // texts.push(await Engine3D.res.loadTexture("textures/spriteSheet/sequence_0031.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/spriteSheet/sequence_0050.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/spriteSheet/sequence_0036.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/spriteSheet/sequence_0053.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/spriteSheet/sequence_0041.png") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/spriteSheet/sequence_0040.png") as BitmapTexture2D); + + let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); + bitmapTexture2DArray.setTextures(texts); + + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = bitmapTexture2DArray; + mat.name = "LitMaterial"; + + GUIHelp.add(this, "cafe", 0.0, 100.0); + GUIHelp.add(this, "frame", 0.0, 100.0); + { + this.width = 15; + this.height = 15; + let geometry = new PlaneGeometry(1, 1, 1, 1, Vector3.Z_AXIS); + this.graphicMeshRenderer = Graphic3DMesh.draw(this.scene, geometry, bitmapTexture2DArray, this.width * this.height); + this.parts = this.graphicMeshRenderer.object3Ds; + + this.graphicMeshRenderer.material.blendMode = BlendMode.ADD; + this.graphicMeshRenderer.material.transparent = true; + this.graphicMeshRenderer.material.depthWriteEnabled = false; + this.graphicMeshRenderer.material.useBillboard = true; + + for (let i = 0; i < this.width * this.height; i++) { + const element = this.parts[i]; + this.graphicMeshRenderer.setTextureID(i, 0); + element.transform.scaleX = 5.5; + element.transform.scaleY = 5.5; + element.transform.scaleZ = 5.5; + } + + this.color1 = new Color(1.5, 0.1, 0.2, 1.0); + this.color2 = new Color(0.1, 0.1, 4.5, 1.0); + let c2 = new Color(1.0, 1.1, 0.2, 0.45); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + } + + this.updateOnce(1000); + } + + update() { + this.updateOnce(Time.frame); + } + + updateOnce(engineFrame: number) { + if (this.parts) { + this.tmpArray.length = 0; + let len = this.parts.length; + for (let i = 0; i < len; i++) { + const element = this.parts[i]; + let tmp = this.sphericalFibonacci(i, len); + tmp.scaleBy(this.cafe); + element.transform.localPosition = tmp; + this.tmpArray.push(element); + + // let c = Color.lerp(Math.sin(engineFrame * 0.001 + (i / len)), this.color1, this.color2, Color.COLOR_0); + // this.graphicMeshRenderer.setBaseColor(i, c); + this.graphicMeshRenderer.setUVRect(i, UV.getUVSheet((i / len) * 100 + engineFrame * 0.08, 3, 3)); + } + + for (let i = 0; i < this.tmpArray.length - 1; i++) { + this.view.graphic3D.Clear(i.toString()); + this.view.graphic3D.drawLines(i.toString(), [ + Vector3.ZERO, + this.tmpArray[i + 1].transform.worldPosition, + ], + this.colors); + } + } + } + + public madfrac(A: number, B: number): number { + return A * B - Math.floor(A * B); + } + + public sphericalFibonacci(i: number, n: number): Vector3 { + const PHI = Math.sqrt(5.0) * 0.5 + 0.5; + let phi = 2.0 * Math.PI * this.madfrac(i, PHI - 1); + let cosTheta = 1.0 - (2.0 * i + 1.0) * (1.0 / n); + let sinTheta = Math.sqrt(Math.max(Math.min(1.0 - cosTheta * cosTheta, 1.0), 0.0)); + + return new Vector3( + Math.cos(phi) * sinTheta, + Math.sin(phi) * sinTheta, + cosTheta); + } + +} diff --git a/samples/loader/Sample_LoadGLB.ts b/samples/loader/Sample_LoadGLB.ts index 2ef82b3b..d24ac932 100644 --- a/samples/loader/Sample_LoadGLB.ts +++ b/samples/loader/Sample_LoadGLB.ts @@ -83,14 +83,6 @@ export class Sample_LoadGLB { rotation: [180, 0, 0] } ) - list[`Mark-XLIV`] = JSON.stringify( - { - url: `gltfs/glb/Mark-XLIV.glb`, - scale: 0.1, - offset: [0, 0, 0], - rotation: [0, 0, 0] - } - ) list[`PotionBottle`] = JSON.stringify( { url: `gltfs/glb/PotionBottle.glb`, @@ -109,28 +101,33 @@ export class Sample_LoadGLB { ) 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); - if (model) { - this.scene.removeChild(model); - } - 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]; - model.z = offset[2]; - - model.scaleX = scale; - model.scaleY = scale; - model.scaleZ = scale; - - model.rotationX = rotation[0]; - model.rotationY = rotation[1]; - model.rotationZ = rotation[2]; - + this.loadGLB(model, url, offset, scale, rotation); }); } + private async loadGLB(model: Object3D, url: string, offset: number[], scale: number, rotation: number[]) { + if (model) { + this.scene.removeChild(model); + } + 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]; + model.z = offset[2]; + + model.scaleX = scale; + model.scaleY = scale; + model.scaleZ = scale; + + model.rotationX = rotation[0]; + model.rotationY = rotation[1]; + model.rotationZ = rotation[2]; + } + onLoadProgress(e) { console.log(e); } diff --git a/samples/material/Sample_ClearCoat.ts b/samples/material/Sample_ClearCoat.ts index dedc92c5..3b7b013a 100644 --- a/samples/material/Sample_ClearCoat.ts +++ b/samples/material/Sample_ClearCoat.ts @@ -72,7 +72,7 @@ class Sample_ClearCoat { // model.transform.scaleZ = 10; // model.transform.y = -5; - let clearCoatRoughnessTex = await Engine3D.res.loadTexture("PBR/ClearCoatTest/T_Imperfections_Wipe_Mask.PNG"); + let clearCoatRoughnessTex = await Engine3D.res.loadTexture("materials/T_Imperfections_FingerPrints_Mask2.jpg"); // this.scene.addChild(model); let space = 50; diff --git a/samples/utils/ExampleScene.ts b/samples/utils/ExampleScene.ts index 1554b209..76f17251 100644 --- a/samples/utils/ExampleScene.ts +++ b/samples/utils/ExampleScene.ts @@ -48,10 +48,10 @@ let exampleSceneParam: ExampleSceneParam; export function createSceneParam(): ExampleSceneParam { let param: ExampleSceneParam = { camera: { - near: 1, - far: 5000, + near: 0.01, + far: 1000, distance: 100, - fov: 60, + fov: 45, pitch: -15, roll: -30, }, diff --git a/src/assets/shader/core/struct/VertexAttributeIndexShader.ts b/src/assets/shader/core/struct/VertexAttributeIndexShader.ts index 99821333..475785bf 100644 --- a/src/assets/shader/core/struct/VertexAttributeIndexShader.ts +++ b/src/assets/shader/core/struct/VertexAttributeIndexShader.ts @@ -34,6 +34,11 @@ export let VertexAttributeIndexShader: string = /*wgsl*/ ` struct GraphicNodeStruct{ matrixIndex:f32, texIndex:f32, + tex2Index:f32, + tex3Index:f32, + baseColor:vec4f, + emissiveColor:vec4f, + uvRect:vec4f, } var ORI_VertexOut: VertexOutput ; diff --git a/src/assets/shader/lighting/BxDF_frag.ts b/src/assets/shader/lighting/BxDF_frag.ts index d2d39a73..5544a3b7 100644 --- a/src/assets/shader/lighting/BxDF_frag.ts +++ b/src/assets/shader/lighting/BxDF_frag.ts @@ -134,7 +134,6 @@ export let BxDF_frag: string = /*wgsl*/ ` #endif var color = specColor + indirectResult ; - color += fragData.Emissive.xyz ; var clearCoatColor = vec3(0.0); #if USE_CLEARCOAT @@ -147,8 +146,7 @@ export let BxDF_frag: string = /*wgsl*/ ` #endif var retColor = (LinearToGammaSpace(color.rgb)); - // retColor += fragData.Emissive.xyz ; - // ORI_FragmentOutput.color = vec4( irradiance * min(fragData.Albedo.rgb,vec3f(1.0)) ,fragData.Albedo.a) ; + retColor += fragData.Emissive.xyz ; ORI_FragmentOutput.color = vec4( retColor.rgb * fragData.Albedo.a ,fragData.Albedo.a) ; } diff --git a/src/assets/shader/materials/UnLitTextureArray.ts b/src/assets/shader/materials/UnLitTextureArray.ts index ad161668..bc5bec6f 100644 --- a/src/assets/shader/materials/UnLitTextureArray.ts +++ b/src/assets/shader/materials/UnLitTextureArray.ts @@ -52,9 +52,10 @@ export let UnLitTextureArray: string = /*wgsl*/ ` // irradiance += (globalUniform.skyExposure * textureSampleLevel(prefilterMap, prefilterMapSampler, ORI_VertexVarying.vWorldNormal.xyz, 0.8 * (MAX_REFLECTION_LOD) ).rgb); graphicNode = graphicBuffer[u32(round(ORI_VertexVarying.index))]; - + var uv = transformUV1.zw * ORI_VertexVarying.fragUV0 + transformUV1.xy; - let color = textureSample(baseMap,baseMapSampler,uv, u32(round(graphicNode.texIndex)) ); + uv = graphicNode.uvRect.zw * uv.xy + graphicNode.uvRect.xy; + var color = textureSample(baseMap,baseMapSampler,uv, u32(round(graphicNode.texIndex)) ) * graphicNode.baseColor ; // let color = textureSample(baseMap,baseMapSampler,uv, u32(round(ORI_VertexVarying.index))); // ORI_ViewDir = normalize( globalUniform.CameraPos.xyz - ORI_VertexVarying.vWorldPos.xyz); @@ -62,6 +63,7 @@ export let UnLitTextureArray: string = /*wgsl*/ ` // irradiance = LinearToGammaSpace(irradiance.rgb) * color.rgb ;//* att ; + color += graphicNode.emissiveColor ; if(color.w < 0.5){ discard ; } diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer.ts index 82ca2a14..b3e56f62 100644 --- a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer.ts +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer.ts @@ -1,3 +1,4 @@ +import { Color, Vector4 } from "../../../../.."; import { MeshRenderer } from "../../../../../components/renderer/MeshRenderer"; import { View3D } from "../../../../../core/View3D"; import { Object3D } from "../../../../../core/entities/Object3D"; @@ -23,7 +24,8 @@ export class Graphic3DMeshRenderer extends MeshRenderer { mat.baseMap = tex; this.material = mat; - this.transformBuffer = new StorageGPUBuffer(num * 2, 0); + this.transformBuffer = new StorageGPUBuffer( num * (4 * 4) , 0); + // this.transformBuffer = new StorageGPUBuffer( num * 2 , 0); this.material.setStorageBuffer("graphicBuffer", this.transformBuffer); this.object3Ds = []; @@ -34,6 +36,11 @@ export class Graphic3DMeshRenderer extends MeshRenderer { this.transformBuffer.setFloat("matrix_" + i, element.transform.worldMatrix.index); this.transformBuffer.setFloat("texId_" + i, 1); + this.transformBuffer.setFloat("texId2_" + i, 1); + this.transformBuffer.setFloat("texId3_" + i, 1); + this.transformBuffer.setColor("baseColor_" + i, new Color() ); + this.transformBuffer.setColor("emissiveColor_" + i, new Color(0,0,0,0)); + this.transformBuffer.setVector4("uvRect_" + i, new Vector4(0,0,1,1) ); } this.transformBuffer.apply(); @@ -45,6 +52,31 @@ export class Graphic3DMeshRenderer extends MeshRenderer { this._onChange = true; } + // public setTexture2ID(i: number, id: number) { + // this.transformBuffer.setFloat("texId_" + i, id); + // this._onChange = true; + // } + + // public setTexture3ID(i: number, id: number) { + // this.transformBuffer.setFloat("texId_" + i, id); + // this._onChange = true; + // } + + public setBaseColor(i: number, color: Color) { + this.transformBuffer.setColor("baseColor_" + i, color); + this._onChange = true; + } + + public setEmissiveColor(i: number, color: Color) { + this.transformBuffer.setColor("emissiveColor_" + i, color); + this._onChange = true; + } + + public setUVRect(i: number, v: Vector4) { + this.transformBuffer.setVector4("uvRect_" + i, v); + this._onChange = true; + } + public onUpdate(view?: View3D) { if (this._onChange) { this._onChange = false; diff --git a/src/loader/parser/gltf/GLTFSubParserConverter.ts b/src/loader/parser/gltf/GLTFSubParserConverter.ts index 07d95f5b..99479482 100644 --- a/src/loader/parser/gltf/GLTFSubParserConverter.ts +++ b/src/loader/parser/gltf/GLTFSubParserConverter.ts @@ -180,7 +180,7 @@ export class GLTFSubParserConverter { let physicMaterial = (newMat = this.applyMaterialExtensions(primitive.material, newMat)); if (`enableBlend` in primitive.material) { if (primitive.material[`enableBlend`]) { - physicMaterial.blendMode = BlendMode.NORMAL; + physicMaterial.blendMode = BlendMode.SOFT_ADD; } else { physicMaterial.blendMode = BlendMode.NONE; } diff --git a/src/materials/LitMaterial.ts b/src/materials/LitMaterial.ts index 1a15c7be..ae7128ba 100644 --- a/src/materials/LitMaterial.ts +++ b/src/materials/LitMaterial.ts @@ -94,6 +94,53 @@ export class LitMaterial extends Material { return this.shader.getTexture(`aoMap`); } + public set clearCoatRoughnessMap(texture: Texture) { + this.shader.setTexture(`clearCoatRoughnessMap`, texture); + this.shader.setDefine(`USE_CLEARCOAT`, true); + this.shader.setDefine(`USE_CLEARCOAT_ROUGHNESS`, true); + } + + public get clearCoatRoughnessMap() { + return this.shader.getTexture(`clearCoatRoughnessMap`); + } + + public set clearcoatColor(value: Color) { + this.shader.setUniformColor(`clearcoatColor`, value); + this.shader.setDefine(`USE_CLEARCOAT`, true); + } + + public get clearcoatColor() { + return this.shader.getUniformColor(`clearcoatColor`); + } + + public set clearcoatWeight(value: number) { + this.shader.setUniformFloat(`clearcoatWeight`, value); + this.shader.setDefine(`USE_CLEARCOAT`, true); + } + + public get clearcoatWeight() { + return this.shader.getUniformFloat(`clearcoatWeight`); + } + + public set clearcoatFactor(value: number) { + this.shader.setUniformFloat(`clearcoatFactor`, value); + this.shader.setDefine(`USE_CLEARCOAT`, true); + } + + public get clearcoatFactor() { + return this.shader.getUniformFloat(`clearcoatFactor`); + } + + + public set clearcoatRoughnessFactor(value: number) { + this.shader.setUniformFloat(`clearcoatRoughnessFactor`, value); + this.shader.setDefine(`USE_CLEARCOAT`, true); + } + + public get clearcoatRoughnessFactor() { + return this.shader.getUniformFloat(`clearcoatRoughnessFactor`); + } + public set alphaCutoff(value: number) { this.shader.setUniform(`alphaCutoff`, value); } diff --git a/src/materials/SkyMaterial.ts b/src/materials/SkyMaterial.ts index 0bc7c7d5..f8f807fa 100644 --- a/src/materials/SkyMaterial.ts +++ b/src/materials/SkyMaterial.ts @@ -17,7 +17,7 @@ export class SkyMaterial extends Material { this.shader = new SkyShader(); this.shader.setUniformVector3(`eyesPos`, new Vector3()); this.shader.setUniformFloat(`exposure`, 1.0); - this.shader.setUniformFloat(`roughness`, 0.5); + this.shader.setUniformFloat(`roughness`, 0.0); } /** diff --git a/src/math/Color.ts b/src/math/Color.ts index db956d2d..8320908b 100644 --- a/src/math/Color.ts +++ b/src/math/Color.ts @@ -307,6 +307,22 @@ export class Color { return dst; } + /** + * lerp two color + * @param v + * @param c1 + * @param c2 + * @param target + * @returns + */ + public static lerp(v:number, c1:Color,c2:Color,target?:Color){ + let ret = target ? target : new Color(); + ret.r = (c2.r - c1.r) * v + c1.r ; + ret.g = (c2.g - c1.g) * v + c1.g ; + ret.b = (c2.b - c1.b) * v + c1.b ; + ret.a = (c2.a - c1.a) * v + c1.a ; + return target ; + } public static PRIMARY = 0x3f51b5; // diff --git a/src/math/UV.ts b/src/math/UV.ts index 06de89c0..5bbac7eb 100644 --- a/src/math/UV.ts +++ b/src/math/UV.ts @@ -1,3 +1,4 @@ +import { Vector4 } from '..'; import { Vector2 } from './Vector2'; /*** @@ -20,4 +21,12 @@ export class UV extends Vector2 { public length(): number { return 0; } + + public static getUVSheet(frame: number, countX: number, countY: number) { + let f = Math.floor(frame % (countX * countY)); + let fx = Math.floor(f / countX); + let fy = f % countX; + return new Vector4((fx / countX), (fy / countY), 1 / countX, 1 / countY); + } } + From cdea6005d60be0e1985b00df22f784a7c9e6138a Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Wed, 1 Nov 2023 13:31:12 +0800 Subject: [PATCH 02/34] chore: fix type --- src/textures/BitmapTexture2DArray.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/textures/BitmapTexture2DArray.ts b/src/textures/BitmapTexture2DArray.ts index a07c316c..f6897ae9 100644 --- a/src/textures/BitmapTexture2DArray.ts +++ b/src/textures/BitmapTexture2DArray.ts @@ -49,7 +49,7 @@ export class BitmapTexture2DArray extends Texture implements ITexture { */ public addTexture(bitmapTexture: BitmapTexture2D) { if (bitmapTexture.width != this.width || bitmapTexture.height != this.height) { - console.error("bitmap texture muse match bitmapTextureArray size!"); + console.error("bitmap texture must match bitmapTextureArray size!"); } // if (this._bitmapTextures.indexOf(bitmapTexture) == -1) { bitmapTexture.pid = this._bitmapTextures.length; From 2cf8dbf8c9dbe8e1d9f418d38dd9cab5e3ef5074 Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Wed, 1 Nov 2023 13:38:36 +0800 Subject: [PATCH 03/34] fix: fix chromaKey material fix image material fix chromaKey material --- packages/media-extention/ChromaKeyMaterial.ts | 79 ++++++++++--------- packages/media-extention/ImageMaterial.ts | 37 +++++---- 2 files changed, 63 insertions(+), 53 deletions(-) diff --git a/packages/media-extention/ChromaKeyMaterial.ts b/packages/media-extention/ChromaKeyMaterial.ts index c22c7e80..2830ff87 100644 --- a/packages/media-extention/ChromaKeyMaterial.ts +++ b/packages/media-extention/ChromaKeyMaterial.ts @@ -1,4 +1,4 @@ -import { Engine3D, ShaderLib, Vector4, Color, BlendMode, registerMaterial, Material, RenderShaderPass, Texture } from "@orillusion/core"; +import { Engine3D, ShaderLib, Vector4, Color, BlendMode, registerMaterial, Material, RenderShaderPass, Texture, Shader, PassType } from "@orillusion/core"; import { ChromaKeyShader } from "./ChromaKeyShader"; /** @@ -14,33 +14,38 @@ export class ChromaKeyMaterial extends Material { super(); ShaderLib.register("ChromaKeyShader", ChromaKeyShader); - this.defaultPass = new RenderShaderPass( + let newShader = new Shader(); + + let colorPass = new RenderShaderPass( `ChromaKeyShader`, `ChromaKeyShader` ); - this.defaultPass.setShaderEntry(`VertMain`, `FragMain`); + colorPass.setShaderEntry(`VertMain`, `FragMain`); + colorPass.passType = PassType.COLOR; - this.defaultPass.setUniformVector4( + colorPass.setUniformVector4( `transformUV1`, new Vector4(0, 0, 1, 1) ); - this.defaultPass.setUniformVector4( + colorPass.setUniformVector4( `transformUV2`, new Vector4(0, 0, 1, 1) ); - this.defaultPass.setUniformColor(`baseColor`, new Color()); - this.defaultPass.setUniformVector4(`rectClip`, new Vector4(0, 0, 0, 0)); - this.defaultPass.setUniformFloat(`alphaCutoff`, 0.5); - - this.defaultPass.setUniformColor(`keyColor`, new Color(0, 1, 0, 0)); - this.defaultPass.setUniformFloat(`colorCutoff`, 0.4); - this.defaultPass.setUniformFloat(`colorFeathering`, 0.5); - this.defaultPass.setUniformFloat(`maskFeathering`, 1); - this.defaultPass.setUniformFloat(`sharpening`, 0.5); - this.defaultPass.setUniformFloat(`despoil`, 0.6); - this.defaultPass.setUniformFloat(`despoilLuminanceAdd`, 0); - - let shaderState = this.defaultPass.shaderState; + colorPass.setUniformColor(`baseColor`, new Color()); + colorPass.setUniformVector4(`rectClip`, new Vector4(0, 0, 0, 0)); + colorPass.setUniformFloat(`alphaCutoff`, 0.5); + + colorPass.setUniformColor(`keyColor`, new Color(0, 1, 0, 0)); + colorPass.setUniformFloat(`colorCutoff`, 0.4); + colorPass.setUniformFloat(`colorFeathering`, 0.5); + colorPass.setUniformFloat(`maskFeathering`, 1); + colorPass.setUniformFloat(`sharpening`, 0.5); + colorPass.setUniformFloat(`despoil`, 0.6); + colorPass.setUniformFloat(`despoilLuminanceAdd`, 0); + + newShader.addRenderPass(colorPass); + + let shaderState = colorPass.shaderState; shaderState.acceptShadow = false; shaderState.receiveEnv = false; shaderState.acceptGI = false; @@ -50,127 +55,127 @@ export class ChromaKeyMaterial extends Material { shaderState.blendMode = BlendMode.ALPHA; // default value - this.defaultPass.setTexture(`baseMap`, Engine3D.res.whiteTexture); + this.shader.setTexture(`baseMap`, Engine3D.res.whiteTexture); } public set baseMap(value: Texture) { - this.defaultPass.setTexture(`baseMap`, value); + this.shader.setTexture(`baseMap`, value); } public get baseMap() { - return this.defaultPass.getTexture(`baseMap`); + return this.shader.getTexture(`baseMap`); } /** * Set the clip rect area */ public set rectClip(value: Vector4) { - this.defaultPass.uniforms[`rectClip`].vector4 = value; + this.shader.setUniformVector4(`rectClip`, value); } /** * Get current clip rect area */ public get rectClip(): Vector4 { - return this.defaultPass.uniforms[`rectClip`].vector4; + return this.shader.getUniformVector4(`rectClip`); } /** * Set the chromakey color */ public set keyColor(value: Color) { - this.defaultPass.uniforms[`keyColor`].color = value; + this.shader.setUniformColor(`keyColor`, value); } /** * Get the chromakey color */ public get keyColor(): Color { - return this.defaultPass.uniforms[`keyColor`].color; + return this.shader.getUniformColor(`keyColor`); } /** * Set the color cutoff factor */ public set colorCutoff(value: number) { - this.defaultPass.uniforms[`colorCutoff`].value = value; + this.shader.setUniformFloat(`colorCutoff`, value); } /** * Get the color cutoff factor */ public get colorCutoff(): number { - return this.defaultPass.uniforms[`colorCutoff`].value; + return this.shader.getUniformFloat(`colorCutoff`); } /** * Set the color feather factor */ public set colorFeathering(value: number) { - this.defaultPass.uniforms[`colorFeathering`].value = value; + this.shader.setUniformFloat(`colorFeathering`, value); } /** * Get the color feather factor */ public get colorFeathering(): number { - return this.defaultPass.uniforms[`colorFeathering`].value; + return this.shader.getUniformFloat(`colorFeathering`); } /** * Set the mask feather factor */ public set maskFeathering(value: number) { - this.defaultPass.uniforms[`maskFeathering`].value = value; + this.shader.setUniformFloat(`maskFeathering`, value); } /** * Get the mask feather factor */ public get maskFeathering(): number { - return this.defaultPass.uniforms[`maskFeathering`].value; + return this.shader.getUniformFloat(`maskFeathering`); } /** * Set the sharpen factor */ public set sharpening(value: number) { - this.defaultPass.uniforms[`sharpening`].value = value; + this.shader.setUniformFloat(`sharpening`, value); } /** * Get the sharpen factor */ public get sharpening(): number { - return this.defaultPass.uniforms[`sharpening`].value; + return this.shader.getUniformFloat(`sharpening`); } /** * Set the despoil factor */ public set despoil(value: number) { - this.defaultPass.uniforms[`despoil`].value = value; + this.shader.setUniformFloat(`despoil`, value); } /** * Get the despoil factor */ public get despoil(): number { - return this.defaultPass.uniforms[`despoil`].value; + return this.shader.getUniformFloat(`despoil`); } /** * Set the despoil luminance factor */ public set despoilLuminanceAdd(value: number) { - this.defaultPass.uniforms[`despoilLuminanceAdd`].value = value; + this.shader.setUniformFloat(`despoilLuminanceAdd`, value); } /** * Get the despoil luminance factor */ public get despoilLuminanceAdd(): number { - return this.defaultPass.uniforms[`despoilLuminanceAdd`].value; + return this.shader.getUniformFloat(`despoilLuminanceAdd`); } /** diff --git a/packages/media-extention/ImageMaterial.ts b/packages/media-extention/ImageMaterial.ts index 7c396d18..cd09b58e 100644 --- a/packages/media-extention/ImageMaterial.ts +++ b/packages/media-extention/ImageMaterial.ts @@ -1,4 +1,4 @@ -import { Engine3D, ShaderLib, Vector4, Color, Texture, Material, RenderShaderPass } from "@orillusion/core"; +import { Engine3D, ShaderLib, Vector4, Color, Texture, Material, RenderShaderPass, Shader, PassType } from "@orillusion/core"; import ImageMaterialShader from "./ImageMaterialShader.wgsl?raw"; @@ -15,60 +15,65 @@ export class ImageMaterial extends Material { constructor() { super(); ShaderLib.register("ImageMaterialShader", ImageMaterialShader); - this.defaultPass = new RenderShaderPass(`ImageMaterialShader`, `ImageMaterialShader`); - this.defaultPass.setShaderEntry(`VertMain`, `FragMain`) - this.defaultPass.setUniformVector4(`transformUV1`, new Vector4(0, 0, 1, 1)); - this.defaultPass.setUniformVector4(`transformUV2`, new Vector4(0, 0, 1, 1)); - this.defaultPass.setUniformColor(`baseColor`, new Color()); - this.defaultPass.setUniformVector4(`rectClip`, new Vector4(0, 0, 0, 0)); - this.defaultPass.setUniformFloat(`alphaCutoff`, 0.5); + let newShader = new Shader(); - let shaderState = this.defaultPass.shaderState; + let defaultPass = new RenderShaderPass(`ImageMaterialShader`, `ImageMaterialShader`); + defaultPass.passType = PassType.COLOR; + defaultPass.setShaderEntry(`VertMain`, `FragMain`) + defaultPass.setUniformVector4(`transformUV1`, new Vector4(0, 0, 1, 1)); + defaultPass.setUniformVector4(`transformUV2`, new Vector4(0, 0, 1, 1)); + defaultPass.setUniformColor(`baseColor`, new Color()); + defaultPass.setUniformVector4(`rectClip`, new Vector4(0, 0, 0, 0)); + defaultPass.setUniformFloat(`alphaCutoff`, 0.5); + newShader.addRenderPass(defaultPass); + + let shaderState = defaultPass.shaderState; shaderState.acceptShadow = false; shaderState.receiveEnv = false; shaderState.acceptGI = false; shaderState.useLight = false; shaderState.castShadow = false; shaderState.useZ = false; + this.shader = newShader; // default value - this.defaultPass.setTexture(`baseMap`, Engine3D.res.whiteTexture); + this.shader.setTexture(`baseMap`, Engine3D.res.whiteTexture); } public set baseMap(value: Texture) { - this.defaultPass.setTexture(`baseMap`, value); + this.shader.setTexture(`baseMap`, value); } public get baseMap() { - return this.defaultPass.getTexture(`baseMap`); + return this.shader.getTexture(`baseMap`); } /** * set base color (tint color) */ public set baseColor(color: Color) { - this.defaultPass.setUniformColor(`baseColor`, color); + this.shader.setUniformColor(`baseColor`, color); } /** * get base color (tint color) */ public get baseColor() { - return this.defaultPass.uniforms[`baseColor`].color; + return this.shader.getUniformColor(`baseColor`); } /** * Set the clip rect area */ public set rectClip(value: Vector4) { - this.defaultPass.uniforms[`rectClip`].vector4 = value; + this.shader.setUniformVector4(`rectClip`, value); } /** * Get the clip rect area */ public get rectClip(): Vector4 { - return this.defaultPass.uniforms[`rectClip`].vector4; + return this.shader.getUniformVector4(`rectClip`); } /** From 63a00c5ec82e59122bf722b19a909c35b1f64c1d Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Wed, 1 Nov 2023 13:42:15 +0800 Subject: [PATCH 04/34] chore: fix VideoMateial --- packages/media-extention/VideoMaterial.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/media-extention/VideoMaterial.ts b/packages/media-extention/VideoMaterial.ts index acc01e85..05e0c977 100644 --- a/packages/media-extention/VideoMaterial.ts +++ b/packages/media-extention/VideoMaterial.ts @@ -22,7 +22,6 @@ export class VideoMaterial extends Material { colorPass.passType = PassType.COLOR; colorPass.setShaderEntry(`VertMain`, `FragMain`) - colorPass.setShaderEntry(`VertMain`, `FragMain`) colorPass.setUniformVector4(`transformUV1`, new Vector4(0, 0, 1, 1)); colorPass.setUniformVector4(`transformUV2`, new Vector4(0, 0, 1, 1)); colorPass.setUniformColor(`baseColor`, new Color()); From ebafec705eb338e8ca92089f234b9fe4d0aeca81 Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Fri, 3 Nov 2023 23:48:21 +0800 Subject: [PATCH 05/34] fix: fix grass sample fix grass sample --- .../shader/GrassVertexAttributeShader.ts | 17 ++++++++-------- samples/ext/Sample_Grass.ts | 20 +++++++++---------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/effect/grass/shader/GrassVertexAttributeShader.ts b/packages/effect/grass/shader/GrassVertexAttributeShader.ts index 61269e7e..d78f5208 100644 --- a/packages/effect/grass/shader/GrassVertexAttributeShader.ts +++ b/packages/effect/grass/shader/GrassVertexAttributeShader.ts @@ -13,15 +13,16 @@ export let GrassVertexAttributeShader: string = /*wgsl*/ ` } struct VertexOutput { - @location(0) varying_UV0: vec2, - @location(1) varying_UV1: vec2, - @location(2) varying_ViewPos: vec4, - @location(3) varying_Clip: vec4, - @location(4) varying_WPos: vec4, - @location(5) varying_WNormal: vec3, - @location(6) varying_Color: vec4, + @location(0) index: f32, + @location(1) varying_UV0: vec2, + @location(2) varying_UV1: vec2, + @location(3) varying_ViewPos: vec4, + @location(4) varying_Clip: vec4, + @location(5) varying_WPos: vec4, + @location(6) varying_WNormal: vec3, + @location(7) varying_Color: vec4, #if USE_SHADOWMAPING - @location(7) varying_ShadowPos: vec4, + @location(8) varying_ShadowPos: vec4, #endif @builtin(position) member: vec4 }; diff --git a/samples/ext/Sample_Grass.ts b/samples/ext/Sample_Grass.ts index b85e6d3f..f7ae6b03 100644 --- a/samples/ext/Sample_Grass.ts +++ b/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); From f979173df2aff8fe093caf579e26147fc719495f Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Sun, 5 Nov 2023 01:54:15 +0800 Subject: [PATCH 06/34] fix: fix resize fix resize --- .../graphic/Sample_GraphicMesh_Trailing.ts | 160 ++++++++++++++++++ samples/index.ts | 4 + samples/post/Sample_FXAA.ts | 125 ++++++++++++++ samples/test/Sample_Bloom.ts | 125 ++++++++++++++ samples/test/Sample_FXAA.ts | 125 ++++++++++++++ samples/test/Sample_PointLightShadow.ts | 63 +++++++ .../core/struct/VertexAttributeIndexShader.ts | 2 + .../shader/graphic/GraphicTrailCompute.ts | 80 +++++++++ src/assets/shader/math/MathShader.ts | 1 + src/assets/shader/quad/Quad_shader.ts | 17 +- src/core/ViewQuad.ts | 17 ++ src/gfx/graphics/webGpu/Context3D.ts | 4 +- .../graphics/webGpu/core/texture/Texture.ts | 6 +- .../graphics/webGpu/shader/ComputeShader.ts | 10 +- .../passRenderer/graphic/new/Graphic3DMesh.ts | 15 ++ .../graphic/new/Graphic3DMeshRenderer.ts | 30 +++- .../graphic/new/Graphic3DTrailRenderer.ts | 154 +++++++++++++++++ .../shadow/PointLightShadowRenderer.ts | 4 +- .../shadow/ShadowMapPassRenderer.ts | 2 +- src/gfx/renderJob/post/BloomPost.ts | 77 ++++++++- src/gfx/renderJob/post/GTAOPost.ts | 21 +-- src/gfx/renderJob/post/GodRayPost.ts | 7 +- src/gfx/renderJob/post/TAAPost.ts | 17 ++ src/index.ts | 3 + src/shape/TrailGeometry.ts | 93 ++++++++++ src/textures/BitmapTexture2DArray.ts | 6 +- src/textures/BitmapTextureCube.ts | 3 +- src/textures/Depth2DTextureArray.ts | 6 +- src/textures/DepthCubeArrayTexture.ts | 6 +- src/textures/DepthCubeTexture.ts | 6 +- src/textures/ShadowTexture.ts | 2 +- src/textures/VirtualTexture.ts | 14 +- 32 files changed, 1143 insertions(+), 62 deletions(-) create mode 100644 samples/graphic/Sample_GraphicMesh_Trailing.ts create mode 100644 samples/post/Sample_FXAA.ts create mode 100644 samples/test/Sample_Bloom.ts create mode 100644 samples/test/Sample_FXAA.ts create mode 100644 samples/test/Sample_PointLightShadow.ts create mode 100644 src/assets/shader/graphic/GraphicTrailCompute.ts create mode 100644 src/gfx/renderJob/passRenderer/graphic/new/Graphic3DTrailRenderer.ts create mode 100644 src/shape/TrailGeometry.ts diff --git a/samples/graphic/Sample_GraphicMesh_Trailing.ts b/samples/graphic/Sample_GraphicMesh_Trailing.ts new file mode 100644 index 00000000..eac34b45 --- /dev/null +++ b/samples/graphic/Sample_GraphicMesh_Trailing.ts @@ -0,0 +1,160 @@ +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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT } from "@orillusion/core"; +import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Stats } from "@orillusion/stats"; + +export class Sample_GraphicMesh_Trailing { + lightObj3D: Object3D; + scene: Scene3D; + parts: Object3D[]; + width: number; + height: number; + cafe: number = 47; + frame: number = 16; + view: View3D; + + colors: Color[]; + trail3ds: Object3D[][]; + + constructor() { } + + async run() { + + Matrix4.maxCount = 500000; + Matrix4.allocCount = 500000; + + await Engine3D.init({ beforeRender: () => this.update() }); + + Engine3D.setting.render.debug = true; + Engine3D.setting.shadow.shadowBound = 5; + + this.colors = []; + + GUIHelp.init(); + + this.scene = new Scene3D(); + this.scene.addComponent(Stats); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.enable = false; + let camera = CameraUtil.createCamera3DObject(this.scene); + camera.perspective(60, Engine3D.aspect, 1, 5000.0); + + camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); + + this.view = new View3D(); + this.view.scene = this.scene; + this.view.camera = camera; + + Engine3D.startRenderView(this.view); + + GUIUtil.renderDebug(); + + let post = this.scene.addComponent(PostProcessingComponent); + let bloom = post.addPost(BloomPost); + bloom.bloomIntensity = 10.0 + GUIUtil.renderBloom(bloom); + + await this.initScene(); + + // sky.relativeTransform = this.lightObj3D.transform; + } + + async initScene() { + /******** light *******/ + { + this.lightObj3D = new Object3D(); + this.lightObj3D.rotationX = 21; + this.lightObj3D.rotationY = 108; + this.lightObj3D.rotationZ = 10; + let directLight = this.lightObj3D.addComponent(DirectLight); + directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + directLight.castShadow = false; + directLight.intensity = 10; + GUIUtil.renderDirLight(directLight); + this.scene.addChild(this.lightObj3D); + } + + let texts = []; + + // texts.push(await Engine3D.res.loadTexture("particle/fx_a_fragment_003.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/grid.jpg") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/frame.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); + + let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); + bitmapTexture2DArray.setTextures(texts); + + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = bitmapTexture2DArray; + mat.name = "LitMaterial"; + + GUIHelp.add(this, "cafe", 0.0, 100.0); + GUIHelp.add(this, "frame", 0.0, 100.0); + { + this.width = 10; + this.height = 100; + let mr = Graphic3DMesh.drawTrail("trail", this.scene, bitmapTexture2DArray, 50, this.width * this.height); + this.parts = mr.object3Ds; + this.trail3ds = mr.trail3Ds; + + mr.material.blendMode = BlendMode.ADD; + mr.material.transparent = true; + mr.material.doubleSide = true; + mr.material.depthWriteEnabled = false; + // mr.material.useBillboard = true; + + for (let i = 0; i < this.width * this.height; i++) { + mr.setTextureID(i, Math.floor(Math.random() * texts.length)); + // mr.setTextureID(i, 0); + } + + let c1 = new Color(0.65, 0.1, 0.2, 0.15); + let c2 = new Color(1.0, 1.1, 0.2, 0.65); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + } + + this.updateOnce(1000); + } + + private tmpArray: any[] = []; + update() { + } + + updateOnce(engineFrame: number) { + if (this.trail3ds && this.trail3ds.length > 0) { + let curveX = new AnimationCurve(); + let lenX = Math.floor(Math.random() * 10) + 1; + for (let pi = 0; pi < lenX; pi++) { + curveX.addKeyFrame(new Keyframe(pi / (lenX - 1), Math.random() * 1)); + } + + let curveZ = new AnimationCurve(); + let lenZ = Math.floor(Math.random() * 10) + 1; + for (let pi = 0; pi < lenZ; pi++) { + curveZ.addKeyFrame(new Keyframe(pi / (lenZ - 1), Math.random() * 1)); + } + + for (let i = 0; i < this.trail3ds.length; i++) { + const trail3d = this.trail3ds[i]; + let dir = new Vector3(Math.random() - 0.5, Math.random(), Math.random() - 0.5); + for (let j = 0; j < trail3d.length; j++) { + let p = j / (trail3d.length - 1); + let vx = curveX.getValue(p); + let vz = curveZ.getValue(p); + trail3d[j].x = vx * dir.x * 500; + trail3d[j].y = j * dir.y * 2 - 10; + trail3d[j].z = vz * dir.z * 500; + } + } + } + } + +} diff --git a/samples/index.ts b/samples/index.ts index 7558858f..b4a168a5 100644 --- a/samples/index.ts +++ b/samples/index.ts @@ -20,6 +20,7 @@ menu.innerHTML = list document.body.appendChild(menu) + // change sessionStorage.target on click, and reload iframe menu.addEventListener('click', (e: Event) => { const button = e.target as HTMLElement @@ -68,3 +69,6 @@ document.body.appendChild(iframe) } } + +// import { Sample_GraphicMesh_Trailing } from "./graphic/Sample_GraphicMesh_Trailing"; +// new Sample_GraphicMesh_Trailing().run(); \ No newline at end of file diff --git a/samples/post/Sample_FXAA.ts b/samples/post/Sample_FXAA.ts new file mode 100644 index 00000000..70043ed1 --- /dev/null +++ b/samples/post/Sample_FXAA.ts @@ -0,0 +1,125 @@ +import { + View3D, DirectLight, Engine3D, + PostProcessingComponent, LitMaterial, HoverCameraController, + KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, + CameraUtil, webGPUContext, BoxGeometry, TAAPost, AtmosphericComponent, GTAOPost, Color, BloomPost, FXAAPost +} from '@orillusion/core'; + +class Sample_Bloom { + lightObj: Object3D; + scene: Scene3D; + + async run() { + Engine3D.setting.shadow.shadowSize = 2048 + Engine3D.setting.shadow.shadowBound = 500; + + await Engine3D.init(); + + this.scene = new Scene3D(); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.sunY = 0.6; + + let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera'); + mainCamera.perspective(60, webGPUContext.aspect, 1, 5000.0); + let ctrl = mainCamera.object3D.addComponent(HoverCameraController); + ctrl.setCamera(0, -15, 500); + await this.initScene(); + sky.relativeTransform = this.lightObj.transform; + + + let view = new View3D(); + view.scene = this.scene; + view.camera = mainCamera; + Engine3D.startRenderView(view); + // 1. 必须在 startRenderView 后添加 post 才可以，否则错误 + let postProcessing = this.scene.addComponent(PostProcessingComponent); + let post = postProcessing.addPost(FXAAPost); + // 2. 有post 的情况下，render 后立即触发 canvas resize，但无法触发画面reisze，必须得等e.g 200ms+ + // document.body.querySelector('canvas').setAttribute('style', 'width:100px') + } + + async initScene() { + { + this.lightObj = new Object3D(); + this.lightObj.rotationX = 45; + this.lightObj.rotationY = 110; + this.lightObj.rotationZ = 0; + let lc = this.lightObj.addComponent(DirectLight); + lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + lc.castShadow = true; + lc.intensity = 10; + this.scene.addChild(this.lightObj); + } + + { + let mat = new LitMaterial(); + mat.roughness = 1.0; + mat.metallic = 0.1; + + let floor = new Object3D(); + let mr = floor.addComponent(MeshRenderer); + mr.geometry = new PlaneGeometry(400, 400); + mr.material = mat; + this.scene.addChild(floor); + + { + let wall = new Object3D(); + let mr = wall.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(5, 260, 320); + mr.material = mat; + wall.x = -320 * 0.5; + this.scene.addChild(wall); + } + + { + let wall = new Object3D(); + let mr = wall.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(5, 260, 320); + mr.material = mat; + wall.x = 320 * 0.5; + this.scene.addChild(wall); + } + + { + let wall = new Object3D(); + let mr = wall.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(320, 260, 5); + mr.material = mat; + wall.z = -320 * 0.5; + this.scene.addChild(wall); + } + + { + { + let litMat = new LitMaterial(); + litMat.emissiveColor = new Color(0.0, 0.0, 1.0); + litMat.emissiveIntensity = 1.8; + let sp = new Object3D(); + let mr = sp.addComponent(MeshRenderer); + mr.geometry = new SphereGeometry(15, 30, 30); + mr.material = litMat; + sp.x = 68; + sp.y = 15; + sp.z = -15; + this.scene.addChild(sp); + } + + { + let litMat = new LitMaterial(); + litMat.emissiveColor = new Color(1.0, 1.0, 0.0); + litMat.emissiveIntensity = 1.2; + let sp = new Object3D(); + let mr = sp.addComponent(MeshRenderer); + mr.geometry = new SphereGeometry(15, 30, 30); + mr.material = litMat; + sp.x = 1; + sp.y = 15; + sp.z = -8; + this.scene.addChild(sp); + } + } + } + } +} + +new Sample_Bloom().run(); diff --git a/samples/test/Sample_Bloom.ts b/samples/test/Sample_Bloom.ts new file mode 100644 index 00000000..8a29cc13 --- /dev/null +++ b/samples/test/Sample_Bloom.ts @@ -0,0 +1,125 @@ +import { + View3D, DirectLight, Engine3D, + PostProcessingComponent, LitMaterial, HoverCameraController, + KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, + CameraUtil, webGPUContext, BoxGeometry, TAAPost, AtmosphericComponent, GTAOPost, Color, BloomPost +} from '@orillusion/core'; + +class Sample_Bloom { + lightObj: Object3D; + scene: Scene3D; + + async run() { + Engine3D.setting.shadow.shadowSize = 2048 + Engine3D.setting.shadow.shadowBound = 500; + + await Engine3D.init(); + + this.scene = new Scene3D(); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.sunY = 0.6; + + let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera'); + mainCamera.perspective(60, webGPUContext.aspect, 1, 5000.0); + let ctrl = mainCamera.object3D.addComponent(HoverCameraController); + ctrl.setCamera(0, -15, 500); + await this.initScene(); + sky.relativeTransform = this.lightObj.transform; + + + let view = new View3D(); + view.scene = this.scene; + view.camera = mainCamera; + Engine3D.startRenderView(view); + // 1. 必须在 startRenderView 后添加 post 才可以，否则错误 + let postProcessing = this.scene.addComponent(PostProcessingComponent); + let post = postProcessing.addPost(BloomPost); + // 2. 有post 的情况下，render 后立即触发 canvas resize，但无法触发画面reisze，必须得等e.g 200ms+ + document.body.querySelector('canvas').setAttribute('style', 'width:500px') + } + + async initScene() { + { + this.lightObj = new Object3D(); + this.lightObj.rotationX = 45; + this.lightObj.rotationY = 110; + this.lightObj.rotationZ = 0; + let lc = this.lightObj.addComponent(DirectLight); + lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + lc.castShadow = true; + lc.intensity = 10; + this.scene.addChild(this.lightObj); + } + + { + let mat = new LitMaterial(); + mat.roughness = 1.0; + mat.metallic = 0.1; + + let floor = new Object3D(); + let mr = floor.addComponent(MeshRenderer); + mr.geometry = new PlaneGeometry(400, 400); + mr.material = mat; + this.scene.addChild(floor); + + { + let wall = new Object3D(); + let mr = wall.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(5, 260, 320); + mr.material = mat; + wall.x = -320 * 0.5; + this.scene.addChild(wall); + } + + { + let wall = new Object3D(); + let mr = wall.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(5, 260, 320); + mr.material = mat; + wall.x = 320 * 0.5; + this.scene.addChild(wall); + } + + { + let wall = new Object3D(); + let mr = wall.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(320, 260, 5); + mr.material = mat; + wall.z = -320 * 0.5; + this.scene.addChild(wall); + } + + { + { + let litMat = new LitMaterial(); + litMat.emissiveColor = new Color(0.0, 0.0, 1.0); + litMat.emissiveIntensity = 1.8; + let sp = new Object3D(); + let mr = sp.addComponent(MeshRenderer); + mr.geometry = new SphereGeometry(15, 30, 30); + mr.material = litMat; + sp.x = 68; + sp.y = 15; + sp.z = -15; + this.scene.addChild(sp); + } + + { + let litMat = new LitMaterial(); + litMat.emissiveColor = new Color(1.0, 1.0, 0.0); + litMat.emissiveIntensity = 1.2; + let sp = new Object3D(); + let mr = sp.addComponent(MeshRenderer); + mr.geometry = new SphereGeometry(15, 30, 30); + mr.material = litMat; + sp.x = 1; + sp.y = 15; + sp.z = -8; + this.scene.addChild(sp); + } + } + } + } +} + +new Sample_Bloom().run(); diff --git a/samples/test/Sample_FXAA.ts b/samples/test/Sample_FXAA.ts new file mode 100644 index 00000000..70043ed1 --- /dev/null +++ b/samples/test/Sample_FXAA.ts @@ -0,0 +1,125 @@ +import { + View3D, DirectLight, Engine3D, + PostProcessingComponent, LitMaterial, HoverCameraController, + KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, + CameraUtil, webGPUContext, BoxGeometry, TAAPost, AtmosphericComponent, GTAOPost, Color, BloomPost, FXAAPost +} from '@orillusion/core'; + +class Sample_Bloom { + lightObj: Object3D; + scene: Scene3D; + + async run() { + Engine3D.setting.shadow.shadowSize = 2048 + Engine3D.setting.shadow.shadowBound = 500; + + await Engine3D.init(); + + this.scene = new Scene3D(); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.sunY = 0.6; + + let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera'); + mainCamera.perspective(60, webGPUContext.aspect, 1, 5000.0); + let ctrl = mainCamera.object3D.addComponent(HoverCameraController); + ctrl.setCamera(0, -15, 500); + await this.initScene(); + sky.relativeTransform = this.lightObj.transform; + + + let view = new View3D(); + view.scene = this.scene; + view.camera = mainCamera; + Engine3D.startRenderView(view); + // 1. 必须在 startRenderView 后添加 post 才可以，否则错误 + let postProcessing = this.scene.addComponent(PostProcessingComponent); + let post = postProcessing.addPost(FXAAPost); + // 2. 有post 的情况下，render 后立即触发 canvas resize，但无法触发画面reisze，必须得等e.g 200ms+ + // document.body.querySelector('canvas').setAttribute('style', 'width:100px') + } + + async initScene() { + { + this.lightObj = new Object3D(); + this.lightObj.rotationX = 45; + this.lightObj.rotationY = 110; + this.lightObj.rotationZ = 0; + let lc = this.lightObj.addComponent(DirectLight); + lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + lc.castShadow = true; + lc.intensity = 10; + this.scene.addChild(this.lightObj); + } + + { + let mat = new LitMaterial(); + mat.roughness = 1.0; + mat.metallic = 0.1; + + let floor = new Object3D(); + let mr = floor.addComponent(MeshRenderer); + mr.geometry = new PlaneGeometry(400, 400); + mr.material = mat; + this.scene.addChild(floor); + + { + let wall = new Object3D(); + let mr = wall.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(5, 260, 320); + mr.material = mat; + wall.x = -320 * 0.5; + this.scene.addChild(wall); + } + + { + let wall = new Object3D(); + let mr = wall.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(5, 260, 320); + mr.material = mat; + wall.x = 320 * 0.5; + this.scene.addChild(wall); + } + + { + let wall = new Object3D(); + let mr = wall.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(320, 260, 5); + mr.material = mat; + wall.z = -320 * 0.5; + this.scene.addChild(wall); + } + + { + { + let litMat = new LitMaterial(); + litMat.emissiveColor = new Color(0.0, 0.0, 1.0); + litMat.emissiveIntensity = 1.8; + let sp = new Object3D(); + let mr = sp.addComponent(MeshRenderer); + mr.geometry = new SphereGeometry(15, 30, 30); + mr.material = litMat; + sp.x = 68; + sp.y = 15; + sp.z = -15; + this.scene.addChild(sp); + } + + { + let litMat = new LitMaterial(); + litMat.emissiveColor = new Color(1.0, 1.0, 0.0); + litMat.emissiveIntensity = 1.2; + let sp = new Object3D(); + let mr = sp.addComponent(MeshRenderer); + mr.geometry = new SphereGeometry(15, 30, 30); + mr.material = litMat; + sp.x = 1; + sp.y = 15; + sp.z = -8; + this.scene.addChild(sp); + } + } + } + } +} + +new Sample_Bloom().run(); diff --git a/samples/test/Sample_PointLightShadow.ts b/samples/test/Sample_PointLightShadow.ts new file mode 100644 index 00000000..25715fe4 --- /dev/null +++ b/samples/test/Sample_PointLightShadow.ts @@ -0,0 +1,63 @@ +import { Engine3D, Scene3D, Object3D, Camera3D, Vector3, AtmosphericComponent, View3D, LitMaterial, BoxGeometry, MeshRenderer, UnLitMaterial, SphereGeometry, DirectLight, PointLight, SpotLight, HoverCameraController, PlaneGeometry, Color } from '@orillusion/core' + +// shadow setting +Engine3D.setting.shadow.autoUpdate = true +Engine3D.setting.shadow.shadowBound = 100 +Engine3D.setting.shadow.pointShadowBias = 0.0001 +Engine3D.setting.shadow.type = 'HARD' + +await Engine3D.init({ + canvasConfig: { devicePixelRatio: 1 } +}) +let scene3D: Scene3D = new Scene3D() +let cameraObj: Object3D = new Object3D() +let camera = cameraObj.addComponent(Camera3D) +camera.perspective(60, Engine3D.aspect, 1, 5000.0) +let controller = cameraObj.addComponent(HoverCameraController) +controller.setCamera(0, -45, 150, new Vector3(0, 0, 0)) +scene3D.addChild(cameraObj) + +//PointLight +{ + let obj = new Object3D() + let light = obj.addComponent(PointLight) + scene3D.addChild(obj) + obj.x = -15 + obj.y = 30 + obj.z = -20 + obj.rotationX = 0 + obj.rotationY = 0 + obj.rotationZ = 0 + light.intensity = 15 + light.range = 100 + // enable light shadow + light.castShadow = true +} + +// create a box as shadow source +{ + let castShadowObj = new Object3D() + castShadowObj.y = 5 + let mr = castShadowObj.addComponent(MeshRenderer) + mr.geometry = new BoxGeometry(10, 10, 10) + mr.material = new LitMaterial() + mr.material.baseColor = new Color(1, 0, 0) + mr.castShadow = true + scene3D.addChild(castShadowObj) +} + +// create a plane to receive shadow +{ + let receiveShadowObj = new Object3D() + let mr = receiveShadowObj.addComponent(MeshRenderer) + mr.geometry = new BoxGeometry(2000, 1, 2000) + mr.material = new LitMaterial() + mr.receiveShadow = true + scene3D.addChild(receiveShadowObj) +} +// create a view with target scene and camera +let view = new View3D() +view.scene = scene3D +view.camera = camera +// start render +Engine3D.startRenderView(view) diff --git a/src/assets/shader/core/struct/VertexAttributeIndexShader.ts b/src/assets/shader/core/struct/VertexAttributeIndexShader.ts index 475785bf..92cb7336 100644 --- a/src/assets/shader/core/struct/VertexAttributeIndexShader.ts +++ b/src/assets/shader/core/struct/VertexAttributeIndexShader.ts @@ -9,6 +9,8 @@ export let VertexAttributeIndexShader: string = /*wgsl*/ ` @location(2) uv: vec2, @location(3) TEXCOORD_1: vec2, @location(4) vIndex: f32, + @location(5) index2: f32, + } struct VertexOutput { diff --git a/src/assets/shader/graphic/GraphicTrailCompute.ts b/src/assets/shader/graphic/GraphicTrailCompute.ts new file mode 100644 index 00000000..a9718c85 --- /dev/null +++ b/src/assets/shader/graphic/GraphicTrailCompute.ts @@ -0,0 +1,80 @@ +export let graphicTrailCompute: string = /*wgsl*/` +#include "GlobalUniform" + +struct VertexInfo{ + // position:vec3f, + px:f32, + py:f32, + pz:f32, + nx:f32, + ny:f32, + nz:f32, + uv_x:f32, + uv_y:f32, + uv2_x:f32, + uv2_y:f32, + index:f32, + index2:f32 +} + +struct TrailInfo{ + index : f32 , + segment : f32 , + visible : f32 , + width: f32, + uv: vec4f, + uvSpeed: vec2f, + smoothLine: f32, + useBillboard: f32, + ids:array +} + +@group(0) @binding(1) var vertexBuffer : array; +@group(0) @binding(2) var trailBuffer : array; +@group(0) @binding(3) var models : array>; + +@compute @workgroup_size(1) +fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(local_invocation_id) local_invocation_id : vec3){ + let indexTrail = workgroup_id.x ; + let trailInfo = trailBuffer[indexTrail]; + if(trailInfo.visible > 0.0){ + let segmentLength = u32(trailInfo.segment + 1.0); + let first = indexTrail * segmentLength ; + let len = first + segmentLength ; + let time = globalUniform.frame * 0.001; + for (var i:u32 = first ; i < len ; i += 1u) { + let i1 = i * 2u + 0u; + let i2 = i * 2u + 1u; + + let mat = models[i32(trailInfo.ids[i - first ])] ; + let right = transformVector(mat,vec3f(1.0,0.0,0.0)); + let worldPos = (mat * vec4f(0.0,0.0,0.0,1.0)).xyz ; + let leftPos = worldPos - right.xyz * trailInfo.width ; + let rightPos = worldPos + right.xyz * trailInfo.width ; + + vertexBuffer[i1].px = leftPos.x ; + vertexBuffer[i1].py = leftPos.y ; + vertexBuffer[i1].pz = leftPos.z ; + + vertexBuffer[i2].px = rightPos.x ; + vertexBuffer[i2].py = rightPos.y ; + vertexBuffer[i2].pz = rightPos.z ; + + vertexBuffer[i1].uv_x = (0.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; + vertexBuffer[i2].uv_x = (1.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; + + let v = (1.0 - f32(i-first) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; + vertexBuffer[i1].uv_y = v + time * trailInfo.uvSpeed.y ; + vertexBuffer[i2].uv_y = v + time * trailInfo.uvSpeed.y ; + } + } +} + +fn transformVector(m:mat4x4f , v: vec3f ) -> vec3f { + let x2 = v.x * m[0][0] + v.y * m[0][1] + v.z * m[0][2]; + let y2 = v.x * m[1][0] + v.y * m[1][1] + v.z * m[1][2]; + let z2 = v.x * m[2][0] + v.y * m[2][1] + v.z * m[2][2]; + return normalize(vec3f(x2,y2,z2)) ; +} + +` \ No newline at end of file diff --git a/src/assets/shader/math/MathShader.ts b/src/assets/shader/math/MathShader.ts index 20d3e8b4..4b8cbd4a 100644 --- a/src/assets/shader/math/MathShader.ts +++ b/src/assets/shader/math/MathShader.ts @@ -310,4 +310,5 @@ fn dir_to_faceId(pt:vec3) -> i32 { let yAxis = normalize(cross(zAxis, xAxis)); return mat3x3(xAxis, yAxis, zAxis); } + `; diff --git a/src/assets/shader/quad/Quad_shader.ts b/src/assets/shader/quad/Quad_shader.ts index 92c4af37..c5001f72 100644 --- a/src/assets/shader/quad/Quad_shader.ts +++ b/src/assets/shader/quad/Quad_shader.ts @@ -50,17 +50,12 @@ export let Quad_vert_wgsl: string = /*wgsl*/ ` @vertex fn main(@builtin(instance_index) index : u32,@location(0) position: vec3, @location(1) TEXCOORD_1: vec2) -> VertexOutput { - let id = u32(index) ; - let worldMatrix = models.matrix[id]; - - let windowSize = vec2(globalUniform.windowWidth,globalUniform.windowHeight) ; - + // let id = u32(index) ; + // let worldMatrix = models.matrix[id]; + // let windowSize = vec2(globalUniform.windowWidth,globalUniform.windowHeight) ; // let pos = worldMatrix[3].xy ; - - let size = vec2(worldMatrix[0].x,worldMatrix[1].y) / windowSize ; - - let uv = vec2(((TEXCOORD_1.xy * 2.0) - vec2(1.0))) ;// / windowSize * size - offset ; - + // let size = vec2(worldMatrix[0].x,worldMatrix[1].y) / windowSize ; + let uv = vec2(((TEXCOORD_1.xy * 2.0) - vec2(1.0))) ;// / windowSize * size - offset ; return VertexOutput(TEXCOORD_1, vec4(uv, 0.0, 1.0)); } ` @@ -81,7 +76,7 @@ export let Quad_frag_wgsl: string = /*wgsl*/ ` fn main(@location(0) fragUV: vec2) -> FragmentOutput { var uv = fragUV ; uv.y = 1.0 - uv.y ; - var color: vec4 = textureSample(baseMap, baseMapSampler, uv ); + var color: vec4 = textureSample(baseMap, baseMapSampler, uv ) + vec4f(0.1,0.0,0.0,1.0); return FragmentOutput(color); } diff --git a/src/core/ViewQuad.ts b/src/core/ViewQuad.ts index 0f4db71b..f271852c 100644 --- a/src/core/ViewQuad.ts +++ b/src/core/ViewQuad.ts @@ -12,6 +12,7 @@ import { PassType } from '../gfx/renderJob/passRenderer/state/RendererType'; import { View3D } from './View3D'; import { Material } from '../materials/Material'; import { QuadShader } from '../loader/parser/prefab/mats/shader/QuadShader'; +import { CResizeEvent } from '../event/CResizeEvent'; /** * @internal * @group Entity @@ -61,6 +62,22 @@ export class ViewQuad extends Object3D { usage: GPUTextureUsage.RENDER_ATTACHMENT, }) } + + webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { + this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(rtFrame, `load`); + if (multisample > 0) { + this.rendererPassState.multisample = this.quadShader.getDefaultColorShader().shaderState.multisample; + this.rendererPassState.multiTexture = webGPUContext.device.createTexture({ + size: { + width: webGPUContext.presentationSize[0], + height: webGPUContext.presentationSize[1], + }, + sampleCount: multisample, + format: renderTexture.length > 0 ? renderTexture[0].format : webGPUContext.presentationFormat, + usage: GPUTextureUsage.RENDER_ATTACHMENT, + }) + } + }, this); } /** diff --git a/src/gfx/graphics/webGpu/Context3D.ts b/src/gfx/graphics/webGpu/Context3D.ts index 8b0865df..c85b291f 100644 --- a/src/gfx/graphics/webGpu/Context3D.ts +++ b/src/gfx/graphics/webGpu/Context3D.ts @@ -116,14 +116,12 @@ class Context3D extends CEventDispatcher { let w = Math.floor(this.canvas.clientWidth * this.pixelRatio * this.super); let h = Math.floor(this.canvas.clientHeight * this.pixelRatio * this.super); if (w != this.windowWidth || h != this.windowHeight) { - // if (this.canvas.width != this.windowWidth || this.canvas.height != this.windowHeight) { this.canvas.width = this.windowWidth = w; this.canvas.height = this.windowHeight = h; this.presentationSize[0] = this.windowWidth; this.presentationSize[1] = this.windowHeight; this.aspect = this.windowWidth / this.windowHeight; - if (this.canResize) - this.dispatchEvent(new CResizeEvent(CResizeEvent.RESIZE, { width: this.windowWidth, height: this.windowHeight })); + this.dispatchEvent(new CResizeEvent(CResizeEvent.RESIZE, { width: this.windowWidth, height: this.windowHeight })); } } } diff --git a/src/gfx/graphics/webGpu/core/texture/Texture.ts b/src/gfx/graphics/webGpu/core/texture/Texture.ts index 13534184..55f5350c 100644 --- a/src/gfx/graphics/webGpu/core/texture/Texture.ts +++ b/src/gfx/graphics/webGpu/core/texture/Texture.ts @@ -32,7 +32,7 @@ export class Texture implements GPUSamplerDescriptor { /** * GPUTextureView */ - public view: GPUTextureView; // Assigned later + public view: GPUTextureView | GPUExternalTexture; // Assigned later /** * GPUSampler @@ -545,7 +545,9 @@ export class Texture implements GPUSamplerDescriptor { private static _texs: GPUTexture[] = []; public static delayDestroyTexture(tex: GPUTexture) { - this._texs.push(tex); + if (!this._texs.includes(tex)) { + this._texs.push(tex); + } } public static destroyTexture() { diff --git a/src/gfx/graphics/webGpu/shader/ComputeShader.ts b/src/gfx/graphics/webGpu/shader/ComputeShader.ts index 88b57776..80cfb4fd 100644 --- a/src/gfx/graphics/webGpu/shader/ComputeShader.ts +++ b/src/gfx/graphics/webGpu/shader/ComputeShader.ts @@ -3,7 +3,7 @@ import { webGPUContext } from '../Context3D'; import { ShaderPassBase } from './ShaderPassBase'; import { ShaderReflection, ShaderReflectionVarInfo } from './value/ShaderReflectionInfo'; import { Preprocessor } from './util/Preprocessor'; -import { Reference, Struct } from '../../../..'; +import { CResizeEvent, Reference, Struct } from '../../../..'; import { StorageGPUBuffer } from '../core/buffer/StorageGPUBuffer'; import { StructStorageGPUBuffer } from '../core/buffer/StructStorageGPUBuffer'; import { UniformGPUBuffer } from '../core/buffer/UniformGPUBuffer'; @@ -229,6 +229,14 @@ export class ComputeShader extends ShaderPassBase { this._groupsShaderReflectionVarInfos[i] = srvs; this.genGroups(i, this._groupsShaderReflectionVarInfos); } + + webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { + for (let i = 0; i < shaderReflection.groups.length; ++i) { + let srvs = shaderReflection.groups[i]; + this._groupsShaderReflectionVarInfos[i] = srvs; + this.genGroups(i, this._groupsShaderReflectionVarInfos, true); + } + }, this); } protected preCompileShader(shader: string) { diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts index 5f35d318..bacef538 100644 --- a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts @@ -1,12 +1,16 @@ import { Scene3D } from "../../../../../core/Scene3D"; import { Object3D } from "../../../../../core/entities/Object3D"; import { GeometryBase } from "../../../../../core/geometry/GeometryBase"; +import { TrailGeometry } from "../../../../../shape/TrailGeometry"; import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; import { Graphic3DMeshRenderer } from "./Graphic3DMeshRenderer"; +import { Graphic3DTrailRenderer } from "./Graphic3DTrailRenderer"; export class Graphic3DMesh { public static meshMap: Map = new Map(); public static meshDrawGroup: Map = new Map(); + public static trailMap: Map = new Map(); + public static draw(scene: Scene3D, geo: GeometryBase, texture: BitmapTexture2DArray, count: number): Graphic3DMeshRenderer { if (!this.meshMap.has(geo)) { let object = new Object3D(); @@ -17,4 +21,15 @@ export class Graphic3DMesh { return renderNode; } } + + public static drawTrail(id: string, scene: Scene3D, texture: BitmapTexture2DArray, trailSegment: number, count: number): Graphic3DTrailRenderer { + if (!this.trailMap.has(id)) { + let object = new Object3D(); + let renderNode = object.addComponent(Graphic3DTrailRenderer); + renderNode.startTrail(texture, trailSegment, count); + this.trailMap.set(id, renderNode); + scene.addChild(object); + return renderNode; + } + } } \ No newline at end of file diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer.ts index b3e56f62..b30946b1 100644 --- a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer.ts +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer.ts @@ -1,12 +1,21 @@ -import { Color, Vector4 } from "../../../../.."; +import { Vector2, mergeFunctions } from "../../../../.."; +import { graphicTrailCompute } from "../../../../../assets/shader/graphic/GraphicTrailCompute"; import { MeshRenderer } from "../../../../../components/renderer/MeshRenderer"; import { View3D } from "../../../../../core/View3D"; import { Object3D } from "../../../../../core/entities/Object3D"; import { GeometryBase } from "../../../../../core/geometry/GeometryBase"; +import { UnLitMaterial } from "../../../../../materials/UnLitMaterial"; import { UnLitTexArrayMaterial } from "../../../../../materials/UnLitTexArrayMaterial"; +import { Color } from "../../../../../math/Color"; +import { Vector4 } from "../../../../../math/Vector4"; +import { BoxGeometry } from "../../../../../shape/BoxGeometry"; +import { TrailGeometry } from "../../../../../shape/TrailGeometry"; import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; import { GeometryUtil } from "../../../../../util/GeometryUtil"; +import { GlobalBindGroup } from "../../../../graphics/webGpu/core/bindGroups/GlobalBindGroup"; import { StorageGPUBuffer } from "../../../../graphics/webGpu/core/buffer/StorageGPUBuffer"; +import { ComputeShader } from "../../../../graphics/webGpu/shader/ComputeShader"; +import { GPUContext } from "../../../GPUContext"; export class Graphic3DMeshRenderer extends MeshRenderer { public transformBuffer: StorageGPUBuffer; @@ -15,6 +24,8 @@ export class Graphic3DMeshRenderer extends MeshRenderer { public object3Ds: Object3D[]; private _onChange: boolean = false; + private _computeShader: ComputeShader; + public init(): void { super.init(); } @@ -24,8 +35,7 @@ export class Graphic3DMeshRenderer extends MeshRenderer { mat.baseMap = tex; this.material = mat; - this.transformBuffer = new StorageGPUBuffer( num * (4 * 4) , 0); - // this.transformBuffer = new StorageGPUBuffer( num * 2 , 0); + this.transformBuffer = new StorageGPUBuffer(num * (4 * 4), 0); this.material.setStorageBuffer("graphicBuffer", this.transformBuffer); this.object3Ds = []; @@ -38,15 +48,19 @@ export class Graphic3DMeshRenderer extends MeshRenderer { this.transformBuffer.setFloat("texId_" + i, 1); this.transformBuffer.setFloat("texId2_" + i, 1); this.transformBuffer.setFloat("texId3_" + i, 1); - this.transformBuffer.setColor("baseColor_" + i, new Color() ); - this.transformBuffer.setColor("emissiveColor_" + i, new Color(0,0,0,0)); - this.transformBuffer.setVector4("uvRect_" + i, new Vector4(0,0,1,1) ); + this.transformBuffer.setColor("baseColor_" + i, new Color()); + this.transformBuffer.setColor("emissiveColor_" + i, new Color(0, 0, 0, 0)); + this.transformBuffer.setVector4("uvRect_" + i, new Vector4(0, 0, 1, 1)); } this.transformBuffer.apply(); this.geometry = GeometryUtil.mergeNumber(source, num); } + public startSpark() { + + } + public setTextureID(i: number, id: number) { this.transformBuffer.setFloat("texId_" + i, id); this._onChange = true; @@ -84,4 +98,8 @@ export class Graphic3DMeshRenderer extends MeshRenderer { } } + private computeTrail(view: View3D, command: GPUCommandEncoder) { + GPUContext.computeCommand(command, [this._computeShader]); + } + } \ No newline at end of file diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DTrailRenderer.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DTrailRenderer.ts new file mode 100644 index 00000000..78b39c7b --- /dev/null +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DTrailRenderer.ts @@ -0,0 +1,154 @@ +import { graphicTrailCompute } from "../../../../../assets/shader/graphic/GraphicTrailCompute"; +import { MeshRenderer } from "../../../../../components/renderer/MeshRenderer"; +import { View3D } from "../../../../../core/View3D"; +import { Object3D } from "../../../../../core/entities/Object3D"; +import { GeometryBase } from "../../../../../core/geometry/GeometryBase"; +import { UnLitMaterial } from "../../../../../materials/UnLitMaterial"; +import { UnLitTexArrayMaterial } from "../../../../../materials/UnLitTexArrayMaterial"; +import { Color } from "../../../../../math/Color"; +import { Vector2 } from "../../../../../math/Vector2"; +import { Vector4 } from "../../../../../math/Vector4"; +import { BoxGeometry } from "../../../../../shape/BoxGeometry"; +import { TrailGeometry } from "../../../../../shape/TrailGeometry"; +import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; +import { GeometryUtil } from "../../../../../util/GeometryUtil"; +import { GlobalBindGroup } from "../../../../graphics/webGpu/core/bindGroups/GlobalBindGroup"; +import { StorageGPUBuffer } from "../../../../graphics/webGpu/core/buffer/StorageGPUBuffer"; +import { ComputeShader } from "../../../../graphics/webGpu/shader/ComputeShader"; +import { GPUContext } from "../../../GPUContext"; + +export class Graphic3DTrailRenderer extends MeshRenderer { + public transformBuffer: StorageGPUBuffer; + public sourceGeometry: GeometryBase; + public texture: BitmapTexture2DArray; + public object3Ds: Object3D[]; + public trail3Ds: Object3D[][]; + + private _onChange: boolean = false; + private _computeShader: ComputeShader; + private _trailBuffer: StorageGPUBuffer; + trailCount: number; + + public init(): void { + super.init(); + } + + public create(source: GeometryBase, tex: BitmapTexture2DArray, num: number) { + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = tex; + this.material = mat; + + this.transformBuffer = new StorageGPUBuffer(num * (4 * 4), 0); + this.material.setStorageBuffer("graphicBuffer", this.transformBuffer); + + this.object3Ds = []; + for (let i = 0; i < num; i++) { + const element = new Object3D(); + this.object3Ds.push(element); + this.object3D.addChild(element); + + this.transformBuffer.setFloat("matrix_" + i, element.transform.worldMatrix.index); + this.transformBuffer.setFloat("texId_" + i, 1); + this.transformBuffer.setFloat("texId2_" + i, 1); + this.transformBuffer.setFloat("texId3_" + i, 1); + this.transformBuffer.setColor("baseColor_" + i, new Color()); + this.transformBuffer.setColor("emissiveColor_" + i, new Color(0, 0, 0, 0)); + this.transformBuffer.setVector4("uvRect_" + i, new Vector4(0, 0, 1, 1)); + } + + this.transformBuffer.apply(); + this.geometry = GeometryUtil.mergeNumber(source, num); + } + + public startSpark() { + + } + + public startTrail(texture: BitmapTexture2DArray, trailSegment: number, count: number) { + this.trailCount = count; + this.create(new TrailGeometry(trailSegment), texture, count); + + this._computeShader = new ComputeShader(graphicTrailCompute); + this._trailBuffer = new StorageGPUBuffer(count * (4 + 4 + 2 + 2 + 128)); + + this.trail3Ds = []; + for (let i = 0; i < count; i++) { + this._trailBuffer.setFloat(`${i}_index`, i); + this._trailBuffer.setFloat(`${i}_segment`, trailSegment); + // this._trailBuffer.setFloat(`${i}_visible`, Math.random() * 2.0 > 1.0 ? 1.0 : 0.0); + this._trailBuffer.setFloat(`${i}_visible`, 1); + this._trailBuffer.setFloat(`${i}_width`, Math.random() * 10 + 2); + this._trailBuffer.setVector4(`${i}_uv`, new Vector4(0, 0, 1, Math.random() * 5)); + this._trailBuffer.setVector2(`${i}_uvSpeed`, new Vector2(0, Math.random() * 4)); + this._trailBuffer.setFloat(`${i}_smooth`, 0); + this._trailBuffer.setFloat(`${i}_useBillboard`, 0); + + this.trail3Ds[i] = []; + let arr = new Float32Array(128); + for (let j = 0; j < 128; j++) { + const element = new Object3D(); + // element.transform.x = Math.floor(i / 10) * 50 - 10 * 50 * 0.5; + // element.transform.z = (i % 10) * 50 - 10 * 50 * 0.5; + // element.transform.y = j * 2 - 128; + + this.trail3Ds[i].push(element); + this.object3D.addChild(element); + arr[j] = element.transform.worldMatrix.index; + } + this._trailBuffer.setFloat32Array(`${i}_ids`, arr); + } + this._trailBuffer.apply(); + + this.start = () => { + this._computeShader.setStorageBuffer("vertexBuffer", this.geometry.vertexBuffer.vertexGPUBuffer); + this._computeShader.setStorageBuffer("trailBuffer", this._trailBuffer); + this._computeShader.setStorageBuffer("models", GlobalBindGroup.modelMatrixBindGroup.matrixBufferDst); + this._computeShader.setStorageBuffer("globalUniform", GlobalBindGroup.getCameraGroup(this.transform.scene3D.view.camera).uniformGPUBuffer); + } + + this.onCompute = (view: View3D, command: GPUCommandEncoder) => this.computeTrail(view, command); + } + + public setTextureID(i: number, id: number) { + this.transformBuffer.setFloat("texId_" + i, id); + this._onChange = true; + } + + // public setTexture2ID(i: number, id: number) { + // this.transformBuffer.setFloat("texId_" + i, id); + // this._onChange = true; + // } + + // public setTexture3ID(i: number, id: number) { + // this.transformBuffer.setFloat("texId_" + i, id); + // this._onChange = true; + // } + + public setBaseColor(i: number, color: Color) { + this.transformBuffer.setColor("baseColor_" + i, color); + this._onChange = true; + } + + public setEmissiveColor(i: number, color: Color) { + this.transformBuffer.setColor("emissiveColor_" + i, color); + this._onChange = true; + } + + public setUVRect(i: number, v: Vector4) { + this.transformBuffer.setVector4("uvRect_" + i, v); + this._onChange = true; + } + + public onUpdate(view?: View3D) { + if (this._onChange) { + this._onChange = false; + this.transformBuffer.apply(); + } + } + + private computeTrail(view: View3D, command: GPUCommandEncoder) { + this._computeShader.workerSizeX = this.trailCount; + GPUContext.computeCommand(command, [this._computeShader]); + } + +} \ No newline at end of file diff --git a/src/gfx/renderJob/passRenderer/shadow/PointLightShadowRenderer.ts b/src/gfx/renderJob/passRenderer/shadow/PointLightShadowRenderer.ts index 8815cbaf..ef86b890 100644 --- a/src/gfx/renderJob/passRenderer/shadow/PointLightShadowRenderer.ts +++ b/src/gfx/renderJob/passRenderer/shadow/PointLightShadowRenderer.ts @@ -40,7 +40,7 @@ export class PointLightShadowRenderer extends RendererBase { private _shadowCameraDic: Map; public shadowCamera: Camera3D; public cubeArrayTexture: DepthCubeArrayTexture; - public colorTexture: VirtualTexture; + public colorTexture: ShadowTexture; public shadowSize: number = 1024; constructor() { super(); @@ -49,7 +49,7 @@ export class PointLightShadowRenderer extends RendererBase { // this.shadowSize = Engine3D.setting.shadow.pointShadowSize; this._shadowCameraDic = new Map(); this.cubeArrayTexture = new DepthCubeArrayTexture(this.shadowSize, this.shadowSize, 8); - this.colorTexture = new VirtualTexture(this.shadowSize, this.shadowSize, GPUTextureFormat.bgra8unorm, false); + this.colorTexture = new ShadowTexture(this.shadowSize, this.shadowSize, GPUTextureFormat.bgra8unorm, false); Reference.getInstance().attached(this.cubeArrayTexture, this); } diff --git a/src/gfx/renderJob/passRenderer/shadow/ShadowMapPassRenderer.ts b/src/gfx/renderJob/passRenderer/shadow/ShadowMapPassRenderer.ts index 9f2ed6bb..4d01c6f7 100644 --- a/src/gfx/renderJob/passRenderer/shadow/ShadowMapPassRenderer.ts +++ b/src/gfx/renderJob/passRenderer/shadow/ShadowMapPassRenderer.ts @@ -5,7 +5,7 @@ import { Camera3D } from "../../../../core/Camera3D"; import { View3D } from "../../../../core/View3D"; import { Vector3 } from "../../../../math/Vector3"; import { Depth2DTextureArray } from "../../../../textures/Depth2DTextureArray"; -import { VirtualTexture } from "../../../../textures/VirtualTexture"; + import { Time } from "../../../../util/Time"; import { GPUTextureFormat } from "../../../graphics/webGpu/WebGPUConst"; import { WebGPUDescriptorCreator } from "../../../graphics/webGpu/descriptor/WebGPUDescriptorCreator"; diff --git a/src/gfx/renderJob/post/BloomPost.ts b/src/gfx/renderJob/post/BloomPost.ts index e68aecb9..5f602b54 100644 --- a/src/gfx/renderJob/post/BloomPost.ts +++ b/src/gfx/renderJob/post/BloomPost.ts @@ -12,6 +12,7 @@ import { View3D } from '../../../core/View3D'; import { RTDescriptor } from '../../graphics/webGpu/descriptor/RTDescriptor'; import { RTFrame } from '../frame/RTFrame'; import { downSample, post, threshold, upSample } from '../../../assets/shader/compute/BloomEffect_cs'; +import { CResizeEvent, ShadowTexture } from '../../..'; /** * Bloom Effects @@ -142,9 +143,7 @@ export class BloomPost extends PostBase { compute.workerSizeX = Math.ceil(dstTexture.width / 8); compute.workerSizeY = Math.ceil(dstTexture.height / 8); compute.workerSizeZ = 1; - this.downSampleComputes.push(compute); - // Graphics.Blit(RT_BloomDown[i - 1], RT_BloomDown[i], new Material(Shader.Find("Shaders/downSample"))); } } @@ -211,7 +210,7 @@ export class BloomPost extends PostBase { let screenWidth = presentationSize[0]; let screenHeight = presentationSize[1]; - this.RT_threshold = new VirtualTexture(screenWidth, screenHeight, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); + this.RT_threshold = new ShadowTexture(screenWidth, screenHeight, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); const N = setting.downSampleStep; // 下采样次数 { @@ -222,7 +221,7 @@ export class BloomPost extends PostBase { for (let i = 0; i < N; i++) { let w = Math.ceil(screenWidth / downSize); let h = Math.ceil(screenHeight / downSize); - this.RT_BloomDown[i] = new VirtualTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); + this.RT_BloomDown[i] = new ShadowTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); downSize *= 2; } } @@ -233,7 +232,7 @@ export class BloomPost extends PostBase { for (let i = 0; i < N - 1; i++) { let w = this.RT_BloomDown[N - 2 - i].width; let h = this.RT_BloomDown[N - 2 - i].height; - this.RT_BloomUp[i] = new VirtualTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); + this.RT_BloomUp[i] = new ShadowTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); } } @@ -258,6 +257,32 @@ export class BloomPost extends PostBase { this.createUpSampleComputes(); this.createPostCompute(); + webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { + let presentationSize = webGPUContext.presentationSize; + let screenWidth = presentationSize[0]; + let screenHeight = presentationSize[1]; + this.RT_threshold.resize(screenWidth, screenHeight); + const N = cfg.downSampleStep; // 下采样次数 + { + let downSize = 2; + // 创建下纹理 + for (let i = 0; i < N; i++) { + let w = Math.ceil(screenWidth / downSize); + let h = Math.ceil(screenHeight / downSize); + this.RT_BloomDown[i].resize(w, h); + downSize *= 2; + } + } + + { + for (let i = 0; i < N - 1; i++) { + let w = this.RT_BloomDown[N - 2 - i].width; + let h = this.RT_BloomDown[N - 2 - i].height; + this.RT_BloomUp[i].resize(w, h); + } + } + }, this); + this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(this.rtFrame, null); this.rendererPassState.label = "Bloom"; } @@ -273,6 +298,48 @@ export class BloomPost extends PostBase { this.bloomSetting.apply(); + { + + this.thresholdCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8); + this.thresholdCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8); + this.thresholdCompute.workerSizeZ = 1; + + const N = cfg.downSampleStep; // 下采样次数 + { + for (let i = 0; i < N; i++) { + let compute = this.downSampleComputes[i]; + let dstTexture = this.RT_BloomDown[i]; + compute.workerSizeX = Math.ceil(dstTexture.width / 8); + compute.workerSizeY = Math.ceil(dstTexture.height / 8); + compute.workerSizeZ = 1; + } + } + + { + { + let dstTexture = this.RT_BloomUp[0]; + let compute = this.upSampleComputes[0]; + compute.workerSizeX = Math.ceil(dstTexture.width / 8); + compute.workerSizeY = Math.ceil(dstTexture.height / 8); + compute.workerSizeZ = 1; + } + + { + for (let i = 1; i < N - 1; i++) { + let dstTexture = this.RT_BloomUp[i]; + let compute = this.upSampleComputes[i]; + compute.workerSizeX = Math.ceil(dstTexture.width / 8); + compute.workerSizeY = Math.ceil(dstTexture.height / 8); + compute.workerSizeZ = 1; + } + } + } + + this.postCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8); + this.postCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8); + this.postCompute.workerSizeZ = 1; + } + GPUContext.computeCommand(command, [this.thresholdCompute, ...this.downSampleComputes, ...this.upSampleComputes, this.postCompute]); GPUContext.lastRenderPassState = this.rendererPassState; } diff --git a/src/gfx/renderJob/post/GTAOPost.ts b/src/gfx/renderJob/post/GTAOPost.ts index 049cb45e..2fdabbfe 100644 --- a/src/gfx/renderJob/post/GTAOPost.ts +++ b/src/gfx/renderJob/post/GTAOPost.ts @@ -17,6 +17,7 @@ import { RTDescriptor } from '../../graphics/webGpu/descriptor/RTDescriptor'; import { GBufferFrame } from '../frame/GBufferFrame'; import { RTFrame } from '../frame/RTFrame'; import { GTAO_cs } from '../../../assets/shader/compute/GTAO_cs'; +import { CResizeEvent } from '../../../event/CResizeEvent'; /** * Ground base Ambient Occlusion @@ -68,14 +69,12 @@ export class GTAOPost extends PostBase { */ onAttach(view: View3D,) { Engine3D.setting.render.postProcessing.gtao.enable = true; - this.createGUI(); } /** * @internal */Render onDetach(view: View3D,) { Engine3D.setting.render.postProcessing.gtao.enable = false; - this.removeGUI(); } public get maxDistance() { @@ -153,14 +152,6 @@ export class GTAOPost extends PostBase { setting.usePosFloat32 = value; } - private createGUI() { - - } - - private removeGUI() { - } - - private createCompute() { let setting = Engine3D.setting.render.postProcessing.gtao; @@ -180,15 +171,13 @@ export class GTAOPost extends PostBase { this.gtaoCompute.setStorageBuffer('aoBuffer', this.aoBuffer); let rtFrame = GBufferFrame.getGBufferFrame("ColorPassGBuffer"); //setting.usePosFloat32 ? RTResourceMap.getTexture(RTResourceConfig.positionBufferTex_NAME): - let posTexture = rtFrame.renderTargets[1]; + let posTexture = rtFrame.getPositionMap(); this.gtaoCompute.setSamplerTexture(`posTex`, posTexture); this.gtaoCompute.setSamplerTexture(`normalTex`, rtFrame.renderTargets[2]); this.autoSetColorTexture('inTex', this.gtaoCompute); this.gtaoCompute.setStorageTexture(`outTex`, this.gtaoTexture); - this.gtaoCompute.workerSizeX = Math.ceil(this.gtaoTexture.width / 8); - this.gtaoCompute.workerSizeY = Math.ceil(this.gtaoTexture.height / 8); - this.gtaoCompute.workerSizeZ = 1; + this.gtaoSetting = gtaoSetting; } @@ -262,6 +251,10 @@ export class GTAOPost extends PostBase { this.gtaoSetting.apply(); + this.gtaoCompute.workerSizeX = Math.ceil(this.gtaoTexture.width / 8); + this.gtaoCompute.workerSizeY = Math.ceil(this.gtaoTexture.height / 8); + this.gtaoCompute.workerSizeZ = 1; + GPUContext.computeCommand(command, [this.gtaoCompute]); GPUContext.lastRenderPassState = this.rendererPassState; } diff --git a/src/gfx/renderJob/post/GodRayPost.ts b/src/gfx/renderJob/post/GodRayPost.ts index e59cadab..783e1f45 100644 --- a/src/gfx/renderJob/post/GodRayPost.ts +++ b/src/gfx/renderJob/post/GodRayPost.ts @@ -16,6 +16,7 @@ import { GBufferFrame } from '../frame/GBufferFrame'; import { RTFrame } from '../frame/RTFrame'; import { GodRay_cs } from '../../../assets/shader/compute/GodRay_cs'; import { GUIHelp } from '@orillusion/debug/GUIHelp'; +import { ShadowTexture } from '../../..'; export class GodRayPost extends PostBase { @@ -107,7 +108,7 @@ export class GodRayPost extends PostBase { let w = presentationSize[0]; let h = presentationSize[1]; - this.godRayTexture = new VirtualTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); + this.godRayTexture = new ShadowTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); this.godRayTexture.name = 'godRayTexture'; let gtaoDec = new RTDescriptor(); gtaoDec.loadOp = `load`; @@ -153,6 +154,10 @@ export class GodRayPost extends PostBase { this.godRaySetting.apply(); + this.godRayCompute.workerSizeX = Math.ceil(this.godRayTexture.width / 8); + this.godRayCompute.workerSizeY = Math.ceil(this.godRayTexture.height / 8); + this.godRayCompute.workerSizeZ = 1; + GPUContext.computeCommand(command, [this.godRayCompute]); GPUContext.lastRenderPassState = this.rendererPassState; } diff --git a/src/gfx/renderJob/post/TAAPost.ts b/src/gfx/renderJob/post/TAAPost.ts index e395351b..10f0f0cd 100644 --- a/src/gfx/renderJob/post/TAAPost.ts +++ b/src/gfx/renderJob/post/TAAPost.ts @@ -19,6 +19,7 @@ import { View3D } from '../../../core/View3D'; import { TAA_cs } from '../../../assets/shader/compute/TAA_cs'; import { TAACopyTex_cs } from '../../../assets/shader/compute/TAACopyTex_cs'; import { TAASharpTex_cs } from '../../../assets/shader/compute/TAASharpTex_cs'; +import { CResizeEvent } from '../../../event/CResizeEvent'; /** * Temporal AA @@ -235,6 +236,10 @@ export class TAAPost extends PostBase { this.createResource(); this.createCompute(view); this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(this.rtFrame, null); + + webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { + this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(this.rtFrame, null); + }, this); } let cfg = Engine3D.setting.render.postProcessing.taa; @@ -248,6 +253,18 @@ export class TAAPost extends PostBase { this.taaSetting.setFloat('jitterY', view.camera.jitterY); this.taaSetting.apply(); + this.taaCompute.workerSizeX = Math.ceil(this.taaTexture.width / 8); + this.taaCompute.workerSizeY = Math.ceil(this.taaTexture.height / 8); + this.taaCompute.workerSizeZ = 1; + + this.copyTexCompute.workerSizeX = Math.ceil(this.taaTexture.width / 8); + this.copyTexCompute.workerSizeY = Math.ceil(this.taaTexture.height / 8); + this.copyTexCompute.workerSizeZ = 1; + + this.sharpCompute.workerSizeX = Math.ceil(this.outTexture.width / 8); + this.sharpCompute.workerSizeY = Math.ceil(this.outTexture.height / 8); + this.sharpCompute.workerSizeZ = 1; + GPUContext.computeCommand(command, [this.copyTexCompute, this.taaCompute, this.sharpCompute]); GPUContext.lastRenderPassState = this.rendererPassState; diff --git a/src/index.ts b/src/index.ts index 70fff56e..53a06f72 100644 --- a/src/index.ts +++ b/src/index.ts @@ -57,6 +57,7 @@ export * from "./assets/shader/glsl/Sky_glsl" export * from "./assets/shader/glsl/post/LUT_glsl" export * from "./assets/shader/graphic/Graphic3DShader_fs" export * from "./assets/shader/graphic/Graphic3DShader_vs" +export * from "./assets/shader/graphic/GraphicTrailCompute" export * from "./assets/shader/lighting/BRDF_frag" export * from "./assets/shader/lighting/BsDF_frag" export * from "./assets/shader/lighting/BxDF_frag" @@ -341,6 +342,7 @@ export * from "./gfx/renderJob/passRenderer/graphic/GraphicConfig" export * from "./gfx/renderJob/passRenderer/graphic/Graphics3DShape" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer" +export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DTrailRenderer" export * from "./gfx/renderJob/passRenderer/post/PostRenderer" export * from "./gfx/renderJob/passRenderer/preDepth/PreDepthPassRenderer" export * from "./gfx/renderJob/passRenderer/preDepth/ZCullingCompute" @@ -533,6 +535,7 @@ export * from "./shape/PlaneGeometry" export * from "./shape/SphereGeometry" export * from "./shape/StripeGeometry" export * from "./shape/TorusGeometry" +export * from "./shape/TrailGeometry" export * from "./textures/AtmosphericScatteringSky" export * from "./textures/BitmapTexture2D" export * from "./textures/BitmapTexture2DArray" diff --git a/src/shape/TrailGeometry.ts b/src/shape/TrailGeometry.ts new file mode 100644 index 00000000..eab501bc --- /dev/null +++ b/src/shape/TrailGeometry.ts @@ -0,0 +1,93 @@ +import { BoundingBox } from "../core/bound/BoundingBox"; +import { GeometryBase } from "../core/geometry/GeometryBase"; +import { VertexAttributeName } from "../core/geometry/VertexAttributeName"; +import { Vector3 } from "../math/Vector3"; + +/** + * Plane geometry + * @group Geometry + */ +export class TrailGeometry extends GeometryBase { + + /** + * Number of trail segments of a plane + */ + public segment: number; + private row: number = 0; + /** + * + * @constructor + */ + constructor(segment: number) { + super(); + this.segment = segment; + this.buildGeometry(); + } + + private buildGeometry(): void { + this.row = this.segment + 1; + let indices_arr = new Uint32Array(this.segment * 6); + let position_arr = new Float32Array(this.row * 3 * 2); + let normal_arr = new Float32Array(this.row * 3 * 2); + let uv_arr = new Float32Array(this.row * 2 * 2); + + for (let i = 0; i < this.row; i++) { + position_arr[i * 3 * 2 + 0] = 0; + position_arr[i * 3 * 2 + 1] = 0; + position_arr[i * 3 * 2 + 2] = 0; + + position_arr[i * 3 * 2 + 3] = 0; + position_arr[i * 3 * 2 + 4] = 0; + position_arr[i * 3 * 2 + 5] = 0; + + normal_arr[i * 3 * 2 + 0] = 0; + normal_arr[i * 3 * 2 + 1] = 0; + normal_arr[i * 3 * 2 + 2] = 1; + + normal_arr[i * 3 * 2 + 3] = 0; + normal_arr[i * 3 * 2 + 4] = 0; + normal_arr[i * 3 * 2 + 5] = 1; + + uv_arr[i * 2 * 2 + 0] = 0; + uv_arr[i * 2 * 2 + 1] = i / this.segment; + + uv_arr[i * 2 * 2 + 2] = 1; + uv_arr[i * 2 * 2 + 3] = i / this.segment; + + let c = i * 2; + let f0 = c; + let f1 = c + 1; + let f2 = c + 2; + let f3 = c + 3; + + indices_arr[i * 6 + 0] = f0; + indices_arr[i * 6 + 1] = f1; + indices_arr[i * 6 + 2] = f2; + + indices_arr[i * 6 + 3] = f1; + indices_arr[i * 6 + 4] = f3; + indices_arr[i * 6 + 5] = f2; + } + + // c = i * 2 + //c -> (c + 1) -> (c + 2) + //(c + 2) -> (c + 1) -> (c + 3) + + this.setIndices(indices_arr); + this.setAttribute(VertexAttributeName.position, position_arr); + this.setAttribute(VertexAttributeName.normal, normal_arr); + this.setAttribute(VertexAttributeName.uv, uv_arr); + this.setAttribute(VertexAttributeName.TEXCOORD_1, uv_arr); + + this.addSubGeometry({ + indexStart: 0, + indexCount: indices_arr.length, + vertexStart: 0, + vertexCount: 0, + firstStart: 0, + index: 0, + topology: 0 + }); + } + +} diff --git a/src/textures/BitmapTexture2DArray.ts b/src/textures/BitmapTexture2DArray.ts index f6897ae9..3d949698 100644 --- a/src/textures/BitmapTexture2DArray.ts +++ b/src/textures/BitmapTexture2DArray.ts @@ -117,14 +117,16 @@ export class BitmapTexture2DArray extends Texture implements ITexture { dimension: '2d', usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING, } - this.gpuTexture = webGPUContext.device.createTexture(this.textureDescriptor); + // this.gpuTexture = webGPUContext.device.createTexture(this.textureDescriptor); + this.gpuTexture = this.getGPUTexture(); } internalCreateView() { this.viewDescriptor = { dimension: `2d-array`, }; - this.view = this.gpuTexture.createView(this.viewDescriptor); + // this.view = this.gpuTexture.createView(this.viewDescriptor); + this.view = this.getGPUView(); } internalCreateSampler() { diff --git a/src/textures/BitmapTextureCube.ts b/src/textures/BitmapTextureCube.ts index c4558d19..d6b254d3 100644 --- a/src/textures/BitmapTextureCube.ts +++ b/src/textures/BitmapTextureCube.ts @@ -41,7 +41,8 @@ export class BitmapTextureCube extends TextureCube { this.textureDescriptor.size = { width: this.width, height: this.height, depthOrArrayLayers: 6 }; this.textureDescriptor.dimension = '2d'; - this.gpuTexture = device.createTexture(this.textureDescriptor); + // this.gpuTexture = device.createTexture(this.textureDescriptor); + this.gpuTexture = this.getGPUTexture(); let faceTextures: GPUTexture[] = []; let lastFaceTextures: GPUTexture[] = faceTextures; diff --git a/src/textures/Depth2DTextureArray.ts b/src/textures/Depth2DTextureArray.ts index 4b858844..bccd351d 100644 --- a/src/textures/Depth2DTextureArray.ts +++ b/src/textures/Depth2DTextureArray.ts @@ -41,14 +41,16 @@ export class Depth2DTextureArray extends Texture implements ITexture { dimension: '2d', usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING, } - this.gpuTexture = webGPUContext.device.createTexture(this.textureDescriptor); + // this.gpuTexture = webGPUContext.device.createTexture(this.textureDescriptor); + this.gpuTexture = this.getGPUTexture(); } internalCreateView() { this.viewDescriptor = { dimension: `2d-array`, }; - this.view = this.gpuTexture.createView(this.viewDescriptor); + this.view = this.getGPUView(); + // this.view = this.gpuTexture.createView(this.viewDescriptor); } internalCreateSampler() { diff --git a/src/textures/DepthCubeArrayTexture.ts b/src/textures/DepthCubeArrayTexture.ts index b0bb57fe..d1f50a63 100644 --- a/src/textures/DepthCubeArrayTexture.ts +++ b/src/textures/DepthCubeArrayTexture.ts @@ -38,14 +38,16 @@ export class DepthCubeArrayTexture extends Texture implements ITexture { dimension: '2d', usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING, } - this.gpuTexture = webGPUContext.device.createTexture(this.textureDescriptor); + // this.gpuTexture = webGPUContext.device.createTexture(this.textureDescriptor); + this.gpuTexture = this.getGPUTexture(); } internalCreateView() { this.viewDescriptor = { dimension: `cube-array`, }; - this.view = this.gpuTexture.createView(this.viewDescriptor); + this.view = this.getGPUView(); + // this.view = this.gpuTexture.createView(this.viewDescriptor); } internalCreateSampler() { diff --git a/src/textures/DepthCubeTexture.ts b/src/textures/DepthCubeTexture.ts index dd19734d..08814fb6 100644 --- a/src/textures/DepthCubeTexture.ts +++ b/src/textures/DepthCubeTexture.ts @@ -56,14 +56,16 @@ export class DepthCubeTexture extends Texture implements ITexture { dimension: '2d', usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING, } - this.gpuTexture = webGPUContext.device.createTexture(this.textureDescriptor); + // this.gpuTexture = webGPUContext.device.createTexture(this.textureDescriptor); + this.gpuTexture = this.getGPUTexture(); } public internalCreateView() { this.viewDescriptor = { dimension: `cube`, }; - this.view = this.gpuTexture.createView(this.viewDescriptor); + this.view = this.getGPUView(); + // this.view = this.gpuTexture.createView(this.viewDescriptor); } public internalCreateSampler() { diff --git a/src/textures/ShadowTexture.ts b/src/textures/ShadowTexture.ts index 2c46720c..f84331c3 100644 --- a/src/textures/ShadowTexture.ts +++ b/src/textures/ShadowTexture.ts @@ -3,7 +3,6 @@ import { GPUAddressMode, GPUTextureFormat } from '../gfx/graphics/webGpu/WebGPUC import { webGPUContext } from '../gfx/graphics/webGpu/Context3D'; import { GPUContext } from '../gfx/renderJob/GPUContext'; import { UUID } from '../util/Global'; -import { CResizeEvent } from '..'; /** * @internal * Render target texture @@ -56,6 +55,7 @@ export class ShadowTexture extends Texture { this.resize(width, height); } + public resize(width, height) { let device = webGPUContext.device; if (this.gpuTexture) { diff --git a/src/textures/VirtualTexture.ts b/src/textures/VirtualTexture.ts index 43b28807..db75e256 100644 --- a/src/textures/VirtualTexture.ts +++ b/src/textures/VirtualTexture.ts @@ -47,13 +47,13 @@ export class VirtualTexture extends Texture { this.usage = usage | GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST; } - if (this.usage & GPUTextureUsage.RENDER_ATTACHMENT || this.format == GPUTextureFormat.depth24plus || this.format == GPUTextureFormat.depth32float) { - webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { - let { width, height } = e.data; - this.resize(width, height); - }, this); - } this.resize(width, height); + + webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { + let { width, height } = e.data; + this.resize(width, height); + this._textureChange = true; + }, this); } public resize(width, height) { @@ -62,6 +62,8 @@ export class VirtualTexture extends Texture { Texture.delayDestroyTexture(this.gpuTexture); this.gpuTexture = null; this.view = null; + this.gpuSampler_comparison = null; + this.gpuSampler = null; } this.width = width; From dbc4c407ea0366345175221d9befe92da900be3e Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Sun, 5 Nov 2023 20:51:41 +0800 Subject: [PATCH 07/34] fix: fix canvas resize change gpu attachments texture fix canvas resize change gpu attachments texture --- samples/graphic/Sample_GraphicMeshWave.ts | 2 +- samples/graphic/Sample_GraphicMesh_0.ts | 2 +- samples/graphic/Sample_GraphicMesh_1.ts | 2 +- samples/graphic/Sample_GraphicMesh_2.ts | 2 +- samples/graphic/Sample_GraphicMesh_3.ts | 2 +- samples/post/Sample_GodRay.ts | 3 +- samples/test/Sample_Bloom.ts | 125 ---------------- samples/test/Sample_FXAA.ts | 125 ---------------- samples/test/Sample_PointLightShadow.ts | 63 -------- src/assets/shader/quad/Quad_shader.ts | 2 +- .../generate/convert/TextureCubeStdCreator.ts | 4 +- .../webGpu/core/buffer/GPUBufferBase.ts | 20 ++- .../webGpu/core/buffer/IndicesGPUBuffer.ts | 4 +- .../webGpu/core/buffer/VertexGPUBuffer.ts | 3 + src/gfx/renderJob/frame/GBufferFrame.ts | 6 +- src/gfx/renderJob/frame/ProbeGBufferFrame.ts | 12 +- src/gfx/renderJob/frame/RTFrame.ts | 11 +- src/gfx/renderJob/frame/RTResourceMap.ts | 23 ++- .../renderJob/passRenderer/RendererBase.ts | 8 +- .../ddgi/DDGIIrradianceComputePass.ts | 8 +- .../ddgi/DDGIIrradianceGPUBufferReader.ts | 8 +- .../passRenderer/ddgi/DDGILightingPass.ts | 6 +- .../passRenderer/ddgi/DDGIMultiBouncePass.ts | 8 +- .../passRenderer/ddgi/DDGIProbeRenderer.ts | 18 +-- .../shadow/PointLightShadowRenderer.ts | 9 +- .../shadow/ShadowMapPassRenderer.ts | 5 +- .../passRenderer/state/RendererPassState.ts | 6 +- src/gfx/renderJob/post/BloomPost.ts | 140 ++++++++---------- src/gfx/renderJob/post/GTAOPost.ts | 16 +- src/gfx/renderJob/post/GlobalFog.ts | 1 + src/gfx/renderJob/post/GodRayPost.ts | 47 +++--- src/gfx/renderJob/post/OutlinePost.ts | 107 +++++++++---- src/gfx/renderJob/post/PostBase.ts | 13 +- src/gfx/renderJob/post/TAAPost.ts | 30 ++-- src/index.ts | 2 +- .../{ShadowTexture.ts => RenderTexture.ts} | 35 +++-- src/textures/VirtualTexture.ts | 17 +-- 37 files changed, 310 insertions(+), 585 deletions(-) delete mode 100644 samples/test/Sample_Bloom.ts delete mode 100644 samples/test/Sample_FXAA.ts delete mode 100644 samples/test/Sample_PointLightShadow.ts rename src/textures/{ShadowTexture.ts => RenderTexture.ts} (90%) diff --git a/samples/graphic/Sample_GraphicMeshWave.ts b/samples/graphic/Sample_GraphicMeshWave.ts index d0bc573f..7ddc167c 100644 --- a/samples/graphic/Sample_GraphicMeshWave.ts +++ b/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"; diff --git a/samples/graphic/Sample_GraphicMesh_0.ts b/samples/graphic/Sample_GraphicMesh_0.ts index c836e4d8..f3de297f 100644 --- a/samples/graphic/Sample_GraphicMesh_0.ts +++ b/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"; diff --git a/samples/graphic/Sample_GraphicMesh_1.ts b/samples/graphic/Sample_GraphicMesh_1.ts index 8c24588e..8493975c 100644 --- a/samples/graphic/Sample_GraphicMesh_1.ts +++ b/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"; diff --git a/samples/graphic/Sample_GraphicMesh_2.ts b/samples/graphic/Sample_GraphicMesh_2.ts index a6c7945e..ca9498e0 100644 --- a/samples/graphic/Sample_GraphicMesh_2.ts +++ b/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"; diff --git a/samples/graphic/Sample_GraphicMesh_3.ts b/samples/graphic/Sample_GraphicMesh_3.ts index 4890c6b7..26284fc2 100644 --- a/samples/graphic/Sample_GraphicMesh_3.ts +++ b/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"; diff --git a/samples/post/Sample_GodRay.ts b/samples/post/Sample_GodRay.ts index fc920bec..f8e8e3c5 100644 --- a/samples/post/Sample_GodRay.ts +++ b/samples/post/Sample_GodRay.ts @@ -57,7 +57,8 @@ class Sample_GodRay { { let mat = new LitMaterial(); - + mat.roughness = 0.5; + mat.metallic = 0.2; let floor = new Object3D(); let mr = floor.addComponent(MeshRenderer); mr.geometry = new PlaneGeometry(2000, 2000); diff --git a/samples/test/Sample_Bloom.ts b/samples/test/Sample_Bloom.ts deleted file mode 100644 index 8a29cc13..00000000 --- a/samples/test/Sample_Bloom.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { - View3D, DirectLight, Engine3D, - PostProcessingComponent, LitMaterial, HoverCameraController, - KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, - CameraUtil, webGPUContext, BoxGeometry, TAAPost, AtmosphericComponent, GTAOPost, Color, BloomPost -} from '@orillusion/core'; - -class Sample_Bloom { - lightObj: Object3D; - scene: Scene3D; - - async run() { - Engine3D.setting.shadow.shadowSize = 2048 - Engine3D.setting.shadow.shadowBound = 500; - - await Engine3D.init(); - - this.scene = new Scene3D(); - let sky = this.scene.addComponent(AtmosphericComponent); - sky.sunY = 0.6; - - let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera'); - mainCamera.perspective(60, webGPUContext.aspect, 1, 5000.0); - let ctrl = mainCamera.object3D.addComponent(HoverCameraController); - ctrl.setCamera(0, -15, 500); - await this.initScene(); - sky.relativeTransform = this.lightObj.transform; - - - let view = new View3D(); - view.scene = this.scene; - view.camera = mainCamera; - Engine3D.startRenderView(view); - // 1. 必须在 startRenderView 后添加 post 才可以，否则错误 - let postProcessing = this.scene.addComponent(PostProcessingComponent); - let post = postProcessing.addPost(BloomPost); - // 2. 有post 的情况下，render 后立即触发 canvas resize，但无法触发画面reisze，必须得等e.g 200ms+ - document.body.querySelector('canvas').setAttribute('style', 'width:500px') - } - - async initScene() { - { - this.lightObj = new Object3D(); - this.lightObj.rotationX = 45; - this.lightObj.rotationY = 110; - this.lightObj.rotationZ = 0; - let lc = this.lightObj.addComponent(DirectLight); - lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355); - lc.castShadow = true; - lc.intensity = 10; - this.scene.addChild(this.lightObj); - } - - { - let mat = new LitMaterial(); - mat.roughness = 1.0; - mat.metallic = 0.1; - - let floor = new Object3D(); - let mr = floor.addComponent(MeshRenderer); - mr.geometry = new PlaneGeometry(400, 400); - mr.material = mat; - this.scene.addChild(floor); - - { - let wall = new Object3D(); - let mr = wall.addComponent(MeshRenderer); - mr.geometry = new BoxGeometry(5, 260, 320); - mr.material = mat; - wall.x = -320 * 0.5; - this.scene.addChild(wall); - } - - { - let wall = new Object3D(); - let mr = wall.addComponent(MeshRenderer); - mr.geometry = new BoxGeometry(5, 260, 320); - mr.material = mat; - wall.x = 320 * 0.5; - this.scene.addChild(wall); - } - - { - let wall = new Object3D(); - let mr = wall.addComponent(MeshRenderer); - mr.geometry = new BoxGeometry(320, 260, 5); - mr.material = mat; - wall.z = -320 * 0.5; - this.scene.addChild(wall); - } - - { - { - let litMat = new LitMaterial(); - litMat.emissiveColor = new Color(0.0, 0.0, 1.0); - litMat.emissiveIntensity = 1.8; - let sp = new Object3D(); - let mr = sp.addComponent(MeshRenderer); - mr.geometry = new SphereGeometry(15, 30, 30); - mr.material = litMat; - sp.x = 68; - sp.y = 15; - sp.z = -15; - this.scene.addChild(sp); - } - - { - let litMat = new LitMaterial(); - litMat.emissiveColor = new Color(1.0, 1.0, 0.0); - litMat.emissiveIntensity = 1.2; - let sp = new Object3D(); - let mr = sp.addComponent(MeshRenderer); - mr.geometry = new SphereGeometry(15, 30, 30); - mr.material = litMat; - sp.x = 1; - sp.y = 15; - sp.z = -8; - this.scene.addChild(sp); - } - } - } - } -} - -new Sample_Bloom().run(); diff --git a/samples/test/Sample_FXAA.ts b/samples/test/Sample_FXAA.ts deleted file mode 100644 index 70043ed1..00000000 --- a/samples/test/Sample_FXAA.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { - View3D, DirectLight, Engine3D, - PostProcessingComponent, LitMaterial, HoverCameraController, - KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, - CameraUtil, webGPUContext, BoxGeometry, TAAPost, AtmosphericComponent, GTAOPost, Color, BloomPost, FXAAPost -} from '@orillusion/core'; - -class Sample_Bloom { - lightObj: Object3D; - scene: Scene3D; - - async run() { - Engine3D.setting.shadow.shadowSize = 2048 - Engine3D.setting.shadow.shadowBound = 500; - - await Engine3D.init(); - - this.scene = new Scene3D(); - let sky = this.scene.addComponent(AtmosphericComponent); - sky.sunY = 0.6; - - let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera'); - mainCamera.perspective(60, webGPUContext.aspect, 1, 5000.0); - let ctrl = mainCamera.object3D.addComponent(HoverCameraController); - ctrl.setCamera(0, -15, 500); - await this.initScene(); - sky.relativeTransform = this.lightObj.transform; - - - let view = new View3D(); - view.scene = this.scene; - view.camera = mainCamera; - Engine3D.startRenderView(view); - // 1. 必须在 startRenderView 后添加 post 才可以，否则错误 - let postProcessing = this.scene.addComponent(PostProcessingComponent); - let post = postProcessing.addPost(FXAAPost); - // 2. 有post 的情况下，render 后立即触发 canvas resize，但无法触发画面reisze，必须得等e.g 200ms+ - // document.body.querySelector('canvas').setAttribute('style', 'width:100px') - } - - async initScene() { - { - this.lightObj = new Object3D(); - this.lightObj.rotationX = 45; - this.lightObj.rotationY = 110; - this.lightObj.rotationZ = 0; - let lc = this.lightObj.addComponent(DirectLight); - lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355); - lc.castShadow = true; - lc.intensity = 10; - this.scene.addChild(this.lightObj); - } - - { - let mat = new LitMaterial(); - mat.roughness = 1.0; - mat.metallic = 0.1; - - let floor = new Object3D(); - let mr = floor.addComponent(MeshRenderer); - mr.geometry = new PlaneGeometry(400, 400); - mr.material = mat; - this.scene.addChild(floor); - - { - let wall = new Object3D(); - let mr = wall.addComponent(MeshRenderer); - mr.geometry = new BoxGeometry(5, 260, 320); - mr.material = mat; - wall.x = -320 * 0.5; - this.scene.addChild(wall); - } - - { - let wall = new Object3D(); - let mr = wall.addComponent(MeshRenderer); - mr.geometry = new BoxGeometry(5, 260, 320); - mr.material = mat; - wall.x = 320 * 0.5; - this.scene.addChild(wall); - } - - { - let wall = new Object3D(); - let mr = wall.addComponent(MeshRenderer); - mr.geometry = new BoxGeometry(320, 260, 5); - mr.material = mat; - wall.z = -320 * 0.5; - this.scene.addChild(wall); - } - - { - { - let litMat = new LitMaterial(); - litMat.emissiveColor = new Color(0.0, 0.0, 1.0); - litMat.emissiveIntensity = 1.8; - let sp = new Object3D(); - let mr = sp.addComponent(MeshRenderer); - mr.geometry = new SphereGeometry(15, 30, 30); - mr.material = litMat; - sp.x = 68; - sp.y = 15; - sp.z = -15; - this.scene.addChild(sp); - } - - { - let litMat = new LitMaterial(); - litMat.emissiveColor = new Color(1.0, 1.0, 0.0); - litMat.emissiveIntensity = 1.2; - let sp = new Object3D(); - let mr = sp.addComponent(MeshRenderer); - mr.geometry = new SphereGeometry(15, 30, 30); - mr.material = litMat; - sp.x = 1; - sp.y = 15; - sp.z = -8; - this.scene.addChild(sp); - } - } - } - } -} - -new Sample_Bloom().run(); diff --git a/samples/test/Sample_PointLightShadow.ts b/samples/test/Sample_PointLightShadow.ts deleted file mode 100644 index 25715fe4..00000000 --- a/samples/test/Sample_PointLightShadow.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { Engine3D, Scene3D, Object3D, Camera3D, Vector3, AtmosphericComponent, View3D, LitMaterial, BoxGeometry, MeshRenderer, UnLitMaterial, SphereGeometry, DirectLight, PointLight, SpotLight, HoverCameraController, PlaneGeometry, Color } from '@orillusion/core' - -// shadow setting -Engine3D.setting.shadow.autoUpdate = true -Engine3D.setting.shadow.shadowBound = 100 -Engine3D.setting.shadow.pointShadowBias = 0.0001 -Engine3D.setting.shadow.type = 'HARD' - -await Engine3D.init({ - canvasConfig: { devicePixelRatio: 1 } -}) -let scene3D: Scene3D = new Scene3D() -let cameraObj: Object3D = new Object3D() -let camera = cameraObj.addComponent(Camera3D) -camera.perspective(60, Engine3D.aspect, 1, 5000.0) -let controller = cameraObj.addComponent(HoverCameraController) -controller.setCamera(0, -45, 150, new Vector3(0, 0, 0)) -scene3D.addChild(cameraObj) - -//PointLight -{ - let obj = new Object3D() - let light = obj.addComponent(PointLight) - scene3D.addChild(obj) - obj.x = -15 - obj.y = 30 - obj.z = -20 - obj.rotationX = 0 - obj.rotationY = 0 - obj.rotationZ = 0 - light.intensity = 15 - light.range = 100 - // enable light shadow - light.castShadow = true -} - -// create a box as shadow source -{ - let castShadowObj = new Object3D() - castShadowObj.y = 5 - let mr = castShadowObj.addComponent(MeshRenderer) - mr.geometry = new BoxGeometry(10, 10, 10) - mr.material = new LitMaterial() - mr.material.baseColor = new Color(1, 0, 0) - mr.castShadow = true - scene3D.addChild(castShadowObj) -} - -// create a plane to receive shadow -{ - let receiveShadowObj = new Object3D() - let mr = receiveShadowObj.addComponent(MeshRenderer) - mr.geometry = new BoxGeometry(2000, 1, 2000) - mr.material = new LitMaterial() - mr.receiveShadow = true - scene3D.addChild(receiveShadowObj) -} -// create a view with target scene and camera -let view = new View3D() -view.scene = scene3D -view.camera = camera -// start render -Engine3D.startRenderView(view) diff --git a/src/assets/shader/quad/Quad_shader.ts b/src/assets/shader/quad/Quad_shader.ts index c5001f72..59327de2 100644 --- a/src/assets/shader/quad/Quad_shader.ts +++ b/src/assets/shader/quad/Quad_shader.ts @@ -76,7 +76,7 @@ export let Quad_frag_wgsl: string = /*wgsl*/ ` fn main(@location(0) fragUV: vec2) -> FragmentOutput { var uv = fragUV ; uv.y = 1.0 - uv.y ; - var color: vec4 = textureSample(baseMap, baseMapSampler, uv ) + vec4f(0.1,0.0,0.0,1.0); + var color: vec4 = textureSample(baseMap, baseMapSampler, uv ); return FragmentOutput(color); } diff --git a/src/gfx/generate/convert/TextureCubeStdCreator.ts b/src/gfx/generate/convert/TextureCubeStdCreator.ts index cbad6d1e..a37d7e98 100644 --- a/src/gfx/generate/convert/TextureCubeStdCreator.ts +++ b/src/gfx/generate/convert/TextureCubeStdCreator.ts @@ -1,7 +1,7 @@ import { Texture } from '../../graphics/webGpu/core/texture/Texture'; import { webGPUContext } from '../../graphics/webGpu/Context3D'; -import { VirtualTexture } from '../../../textures/VirtualTexture'; import { GPUContext } from '../../renderJob/GPUContext'; +import { RenderTexture } from '../../../textures/RenderTexture'; /** * @internal @@ -70,7 +70,7 @@ fn samplePixel(face:i32, uv01:vec2) -> vec4 { private static blurSettingBuffer: GPUBuffer = null; private static pipeline: GPUComputePipeline; - static createFace(index: number, size: number, inTex: Texture, outTex: VirtualTexture): void { + static createFace(index: number, size: number, inTex: Texture, outTex: RenderTexture): void { const device = webGPUContext.device; if (this.pipeline == null) { this.pipeline = device.createComputePipeline({ diff --git a/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts b/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts index bb6a6d7c..036393f5 100644 --- a/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts +++ b/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts @@ -33,9 +33,9 @@ export class GPUBufferBase { constructor() { this.mapAsyncReady = []; - this.memory = new MemoryDO(); - this.memoryNodes = new Map(); - this._dataView = new Float32Array(this.memory.shareDataBuffer); + // this.memory = new MemoryDO(); + // this.memoryNodes = new Map(); + // this._dataView = new Float32Array(this.memory.shareDataBuffer); } public debug() { @@ -380,11 +380,14 @@ export class GPUBufferBase { protected createBuffer(usage: GPUBufferUsageFlags, size: number, data?: ArrayBufferData, debugLabel?: string) { let device = webGPUContext.device; - this.byteSize = size * 4; - this.usage = usage; + if (this.buffer) { this.destroy(); } + + this.byteSize = size * 4; + this.usage = usage; + this.buffer = device.createBuffer({ label: debugLabel, size: this.byteSize, @@ -392,6 +395,9 @@ export class GPUBufferBase { mappedAtCreation: false, }); + this.memory = new MemoryDO(); + this.memoryNodes = new Map(); + this._dataView = new Float32Array(this.memory.shareDataBuffer); this.memory.allocation(this.byteSize); if (data) { let m = this.memory.allocation_node(data.length * 4); @@ -400,6 +406,10 @@ export class GPUBufferBase { } } + public resizeBuffer(size: number, data?: ArrayBufferData) { + this.createBuffer(this.usage, size, data); + } + protected createNewBuffer(usage: GPUBufferUsageFlags, size: number): GPUBuffer { let device = webGPUContext.device; let tByteSize = size * 4; diff --git a/src/gfx/graphics/webGpu/core/buffer/IndicesGPUBuffer.ts b/src/gfx/graphics/webGpu/core/buffer/IndicesGPUBuffer.ts index ab6f0ea0..296a17f7 100644 --- a/src/gfx/graphics/webGpu/core/buffer/IndicesGPUBuffer.ts +++ b/src/gfx/graphics/webGpu/core/buffer/IndicesGPUBuffer.ts @@ -1,3 +1,4 @@ +import { MemoryDO } from '../../../../../core/pool/memory/MemoryDO'; import { MemoryInfo } from '../../../../../core/pool/memory/MemoryInfo'; import { webGPUContext } from '../../Context3D'; import { ArrayBufferData } from './ArrayBufferData'; @@ -32,7 +33,8 @@ export class IndicesGPUBuffer extends GPUBufferBase { mappedAtCreation: false, }); - + this.memory = new MemoryDO(); + this.memoryNodes = new Map(); this.memory.allocation(this.byteSize); if (data) { this.indicesNode = this.memory.allocation_node(data.length * 4); diff --git a/src/gfx/graphics/webGpu/core/buffer/VertexGPUBuffer.ts b/src/gfx/graphics/webGpu/core/buffer/VertexGPUBuffer.ts index c09605e4..4dcd9028 100644 --- a/src/gfx/graphics/webGpu/core/buffer/VertexGPUBuffer.ts +++ b/src/gfx/graphics/webGpu/core/buffer/VertexGPUBuffer.ts @@ -1,3 +1,4 @@ +import { MemoryDO } from '../../../../../core/pool/memory/MemoryDO'; import { MemoryInfo } from '../../../../../core/pool/memory/MemoryInfo'; import { webGPUContext } from '../../Context3D'; import { GPUBufferBase } from './GPUBufferBase'; @@ -31,6 +32,8 @@ export class VertexGPUBuffer extends GPUBufferBase { mappedAtCreation: false, }); + this.memory = new MemoryDO(); + this.memoryNodes = new Map(); this.memory.allocation(this.byteSize); this.node = this.memory.allocation_node(this.byteSize); // this.outFloat32Array = new Float32Array(size); diff --git a/src/gfx/renderJob/frame/GBufferFrame.ts b/src/gfx/renderJob/frame/GBufferFrame.ts index c6976b3e..d09fbd86 100644 --- a/src/gfx/renderJob/frame/GBufferFrame.ts +++ b/src/gfx/renderJob/frame/GBufferFrame.ts @@ -1,5 +1,5 @@ -import { Engine3D } from "../../.."; -import { VirtualTexture } from "../../../textures/VirtualTexture"; + +import { RenderTexture } from "../../../textures/RenderTexture"; import { webGPUContext } from "../../graphics/webGpu/Context3D"; import { GPUTextureFormat } from "../../graphics/webGpu/WebGPUConst"; import { RTDescriptor } from "../../graphics/webGpu/descriptor/RTDescriptor"; @@ -32,7 +32,7 @@ export class GBufferFrame extends RTFrame { let colorRTDes = new RTDescriptor(); colorRTDes.loadOp = `clear`; - let depthTexture = new VirtualTexture(rtWidth, rtHeight, GPUTextureFormat.depth24plus, false); + let depthTexture = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.depth24plus, false); depthTexture.name = `depthTexture`; let depthDec = new RTDescriptor(); depthDec.loadOp = `load`; diff --git a/src/gfx/renderJob/frame/ProbeGBufferFrame.ts b/src/gfx/renderJob/frame/ProbeGBufferFrame.ts index 9fa95d81..d84cf0e0 100644 --- a/src/gfx/renderJob/frame/ProbeGBufferFrame.ts +++ b/src/gfx/renderJob/frame/ProbeGBufferFrame.ts @@ -1,9 +1,7 @@ -import { VirtualTexture } from "../../../textures/VirtualTexture"; +import { RenderTexture } from "../../.."; import { GPUTextureFormat } from "../../graphics/webGpu/WebGPUConst"; import { RTDescriptor } from "../../graphics/webGpu/descriptor/RTDescriptor"; -import { RTResourceConfig } from "../config/RTResourceConfig"; import { RTFrame } from "./RTFrame"; -import { RTResourceMap } from "./RTResourceMap"; export class ProbeGBufferFrame extends RTFrame { @@ -15,22 +13,22 @@ export class ProbeGBufferFrame extends RTFrame { crateGBuffer(rtWidth: number, rtHeight: number) { let attachments = this.renderTargets; let rtDescriptors = this.rtDescriptors; - let positionMap = new VirtualTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false); + let positionMap = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false); positionMap.name = `positionMap`; let posDec = new RTDescriptor(); posDec.loadOp = `load`; - let normalMap = new VirtualTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false); + let normalMap = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false); normalMap.name = `normalMap`; let normalDec = new RTDescriptor(); normalDec.loadOp = `load`; - let colorMap = new VirtualTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false); + let colorMap = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false); colorMap.name = `colorMap`; let colorDec = new RTDescriptor(); colorDec.loadOp = `load`; - let depthTexture = new VirtualTexture(rtWidth, rtHeight, GPUTextureFormat.depth24plus, false); + let depthTexture = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.depth24plus, false); depthTexture.name = `depthTexture`; let depthDec = new RTDescriptor(); depthDec.loadOp = `load`; diff --git a/src/gfx/renderJob/frame/RTFrame.ts b/src/gfx/renderJob/frame/RTFrame.ts index a06bd644..9d9f20ba 100644 --- a/src/gfx/renderJob/frame/RTFrame.ts +++ b/src/gfx/renderJob/frame/RTFrame.ts @@ -1,22 +1,21 @@ -import { VirtualTexture } from "../../../textures/VirtualTexture"; -import { Texture } from "../../graphics/webGpu/core/texture/Texture"; +import { RenderTexture } from "../../../textures/RenderTexture"; import { RTDescriptor } from "../../graphics/webGpu/descriptor/RTDescriptor"; export class RTFrame { public label: string; public customSize: boolean = false; - public renderTargets: VirtualTexture[]; + public renderTargets: RenderTexture[]; public rtDescriptors: RTDescriptor[]; - public zPreTexture: VirtualTexture; - public depthTexture: VirtualTexture; + public zPreTexture: RenderTexture; + public depthTexture: RenderTexture; public depthViewIndex: number = 0; public depthCleanValue: number = 1; public depthLoadOp: GPULoadOp = `clear`; public isOutTarget: boolean = true; - constructor(attachments: VirtualTexture[], rtDescriptors: RTDescriptor[], depthTexture?: VirtualTexture, zPreTexture?: VirtualTexture, isOutTarget: boolean = true) { + constructor(attachments: RenderTexture[], rtDescriptors: RTDescriptor[], depthTexture?: RenderTexture, zPreTexture?: RenderTexture, isOutTarget: boolean = true) { this.renderTargets = attachments; this.rtDescriptors = rtDescriptors; this.depthTexture = depthTexture; diff --git a/src/gfx/renderJob/frame/RTResourceMap.ts b/src/gfx/renderJob/frame/RTResourceMap.ts index dbcaed69..8b560a3d 100644 --- a/src/gfx/renderJob/frame/RTResourceMap.ts +++ b/src/gfx/renderJob/frame/RTResourceMap.ts @@ -1,35 +1,30 @@ import { ViewQuad } from '../../../core/ViewQuad'; - -import { VirtualTexture } from '../../../textures/VirtualTexture'; -import { UniformNode } from '../../graphics/webGpu/core/uniforms/UniformNode'; import { RTDescriptor } from '../../graphics/webGpu/descriptor/RTDescriptor'; -import { GPUTextureFormat } from '../../graphics/webGpu/WebGPUConst'; -import { webGPUContext } from '../../graphics/webGpu/Context3D'; import { GPUContext } from '../GPUContext'; -import { GBufferFrame } from './GBufferFrame'; import { RTFrame } from './RTFrame'; import { RTResourceConfig } from '../config/RTResourceConfig'; +import { RenderTexture } from '../../../textures/RenderTexture'; /** * @internal * @group Post */ export class RTResourceMap { - public static rtTextureMap: Map; + public static rtTextureMap: Map; public static rtViewQuad: Map; public static init() { - this.rtTextureMap = new Map(); + this.rtTextureMap = new Map(); this.rtViewQuad = new Map(); } public static createRTTexture(name: string, rtWidth: number, rtHeight: number, format: GPUTextureFormat, useMipmap: boolean = false, sampleCount: number = 0) { - let rt: VirtualTexture = this.rtTextureMap.get(name); + let rt: RenderTexture = this.rtTextureMap.get(name); if (!rt) { if (name == RTResourceConfig.colorBufferTex_NAME) { - rt = new VirtualTexture(rtWidth, rtHeight, format, useMipmap, undefined, 1, sampleCount, false); + rt = new RenderTexture(rtWidth, rtHeight, format, useMipmap, undefined, 1, sampleCount, false); } else { - rt = new VirtualTexture(rtWidth, rtHeight, format, useMipmap, undefined, 1, sampleCount, true); + rt = new RenderTexture(rtWidth, rtHeight, format, useMipmap, undefined, 1, sampleCount, true); } rt.name = name; RTResourceMap.rtTextureMap.set(name, rt); @@ -38,16 +33,16 @@ export class RTResourceMap { } public static createRTTextureArray(name: string, rtWidth: number, rtHeight: number, format: GPUTextureFormat, length: number = 1, useMipmap: boolean = false, sampleCount: number = 0) { - let rt: VirtualTexture = this.rtTextureMap.get(name); + let rt: RenderTexture = this.rtTextureMap.get(name); if (!rt) { - rt = new VirtualTexture(rtWidth, rtHeight, format, useMipmap, undefined, length, sampleCount); + rt = new RenderTexture(rtWidth, rtHeight, format, useMipmap, undefined, length, sampleCount); rt.name = name; RTResourceMap.rtTextureMap.set(name, rt); } return rt; } - public static createViewQuad(name: string, shaderVS: string, shaderFS: string, outRtTexture: VirtualTexture, multisample: number = 0) { + public static createViewQuad(name: string, shaderVS: string, shaderFS: string, outRtTexture: RenderTexture, multisample: number = 0) { let rtFrame = new RTFrame([ outRtTexture ], diff --git a/src/gfx/renderJob/passRenderer/RendererBase.ts b/src/gfx/renderJob/passRenderer/RendererBase.ts index ae43b94a..71d53154 100644 --- a/src/gfx/renderJob/passRenderer/RendererBase.ts +++ b/src/gfx/renderJob/passRenderer/RendererBase.ts @@ -4,7 +4,6 @@ import { Scene3D } from "../../../core/Scene3D"; import { View3D } from "../../../core/View3D"; import { ViewQuad } from "../../../core/ViewQuad"; import { CEventDispatcher } from "../../../event/CEventDispatcher"; -import { VirtualTexture } from "../../../textures/VirtualTexture"; import { GPUTextureFormat } from "../../graphics/webGpu/WebGPUConst"; import { Texture } from "../../graphics/webGpu/core/texture/Texture"; import { WebGPUDescriptorCreator } from "../../graphics/webGpu/descriptor/WebGPUDescriptorCreator"; @@ -16,11 +15,8 @@ import { OcclusionSystem } from "../occlusion/OcclusionSystem"; import { RendererPassState } from "./state/RendererPassState"; import { PassType } from "./state/RendererType"; import { RenderContext } from "./RenderContext"; -import { ClusterLightingRender } from "./cluster/ClusterLightingRender"; import { ClusterLightingBuffer } from "./cluster/ClusterLightingBuffer"; -import { RTResourceMap } from "../frame/RTResourceMap"; -import { RTResourceConfig } from "../config/RTResourceConfig"; -import { webGPUContext } from "../../graphics/webGpu/Context3D"; +import { RenderTexture } from "../../.."; /** @@ -69,7 +65,7 @@ export class RendererBase extends CEventDispatcher { } - public setIrradiance(probeIrradianceMap: VirtualTexture, probeDepthMap: VirtualTexture) { + public setIrradiance(probeIrradianceMap: RenderTexture, probeDepthMap: RenderTexture) { this.rendererPassState.irradianceBuffer = [probeIrradianceMap, probeDepthMap]; } diff --git a/src/gfx/renderJob/passRenderer/ddgi/DDGIIrradianceComputePass.ts b/src/gfx/renderJob/passRenderer/ddgi/DDGIIrradianceComputePass.ts index a69acf5c..1881d27d 100644 --- a/src/gfx/renderJob/passRenderer/ddgi/DDGIIrradianceComputePass.ts +++ b/src/gfx/renderJob/passRenderer/ddgi/DDGIIrradianceComputePass.ts @@ -1,7 +1,7 @@ import { DDGIIrradiance_shader } from '../../../../assets/shader/compute/DDGIIrradiance_Cs'; import { View3D } from '../../../../core/View3D'; import { Engine3D } from '../../../../Engine3D'; -import { VirtualTexture } from '../../../../textures/VirtualTexture'; +import { RenderTexture } from '../../../../textures/RenderTexture'; import { GlobalBindGroup } from '../../../graphics/webGpu/core/bindGroups/GlobalBindGroup'; import { StorageGPUBuffer } from '../../../graphics/webGpu/core/buffer/StorageGPUBuffer'; import { ComputeShader } from '../../../graphics/webGpu/shader/ComputeShader'; @@ -17,8 +17,8 @@ import { DDGIIrradianceVolume } from './DDGIIrradianceVolume'; export class DDGIIrradianceComputePass { private irradianceBuffer: StorageGPUBuffer; private depthBuffer: StorageGPUBuffer; - private probeIrradianceMap: VirtualTexture; - private probeDepthMap: VirtualTexture; + private probeIrradianceMap: RenderTexture; + private probeDepthMap: RenderTexture; private volume: DDGIIrradianceVolume; private computeShader: ComputeShader; private depthRaysBuffer: StorageGPUBuffer; @@ -48,7 +48,7 @@ export class DDGIIrradianceComputePass { this.computeShader.setStorageBuffer("models", GlobalBindGroup.modelMatrixBindGroup.matrixBufferDst); } - public setTextures(inputs: VirtualTexture[], probeIrradianceMap: VirtualTexture, probeDepthMap: VirtualTexture) { + public setTextures(inputs: RenderTexture[], probeIrradianceMap: RenderTexture, probeDepthMap: RenderTexture) { this.probeIrradianceMap = probeIrradianceMap; this.probeDepthMap = probeDepthMap; diff --git a/src/gfx/renderJob/passRenderer/ddgi/DDGIIrradianceGPUBufferReader.ts b/src/gfx/renderJob/passRenderer/ddgi/DDGIIrradianceGPUBufferReader.ts index e302d538..b5cf0908 100644 --- a/src/gfx/renderJob/passRenderer/ddgi/DDGIIrradianceGPUBufferReader.ts +++ b/src/gfx/renderJob/passRenderer/ddgi/DDGIIrradianceGPUBufferReader.ts @@ -1,7 +1,7 @@ import { Engine3D } from "../../../../Engine3D"; import { CEvent } from "../../../../event/CEvent"; import { CEventDispatcher } from "../../../../event/CEventDispatcher"; -import { VirtualTexture } from "../../../../textures/VirtualTexture"; +import { RenderTexture } from "../../../../textures/RenderTexture"; import { webGPUContext } from "../../../graphics/webGpu/Context3D"; import { GPUContext } from "../../GPUContext"; import { DDGIProbeRenderer, GIRenderCompleteEvent, GIRenderStartEvent } from "./DDGIProbeRenderer"; @@ -12,13 +12,13 @@ export class DDGIIrradianceGPUBufferReader extends CEventDispatcher { private probeRenderer: DDGIProbeRenderer; private opColorBuffer: GPUBuffer; private opDepthBuffer: GPUBuffer; - private srcColorMap: VirtualTexture; - private srcDepthMap: VirtualTexture; + private srcColorMap: RenderTexture; + private srcDepthMap: RenderTexture; public opDepthArray: Float32Array; public opColorArray: Float32Array; - public initReader(probeRender: DDGIProbeRenderer, colorMap: VirtualTexture, depthMap: VirtualTexture) { + public initReader(probeRender: DDGIProbeRenderer, colorMap: RenderTexture, depthMap: RenderTexture) { this.probeRenderer = probeRender; this.srcColorMap = colorMap; this.srcDepthMap = depthMap; diff --git a/src/gfx/renderJob/passRenderer/ddgi/DDGILightingPass.ts b/src/gfx/renderJob/passRenderer/ddgi/DDGILightingPass.ts index eb22bf49..bb9f06ce 100644 --- a/src/gfx/renderJob/passRenderer/ddgi/DDGILightingPass.ts +++ b/src/gfx/renderJob/passRenderer/ddgi/DDGILightingPass.ts @@ -1,7 +1,7 @@ import { DDGILighting_shader } from '../../../../assets/shader/compute/DDGILighting_CSShader'; import { View3D } from '../../../../core/View3D'; import { Engine3D } from '../../../../Engine3D'; -import { VirtualTexture } from '../../../../textures/VirtualTexture'; +import { RenderTexture } from '../../../../textures/RenderTexture'; import { GlobalBindGroup } from '../../../graphics/webGpu/core/bindGroups/GlobalBindGroup'; import { Texture } from '../../../graphics/webGpu/core/texture/Texture'; import { ComputeShader } from '../../../graphics/webGpu/shader/ComputeShader'; @@ -20,10 +20,10 @@ export class DDGILightingPass { private shadowMap: Texture; private pointShadowMap: Texture; - public lightingTexture: VirtualTexture; + public lightingTexture: RenderTexture; constructor() { let giSetting = Engine3D.setting.gi; - this.lightingTexture = new VirtualTexture(giSetting.probeSourceTextureSize, giSetting.probeSourceTextureSize, GPUTextureFormat.rgba16float, false, GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING); + this.lightingTexture = new RenderTexture(giSetting.probeSourceTextureSize, giSetting.probeSourceTextureSize, GPUTextureFormat.rgba16float, false, GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING); } private create(view: View3D) { diff --git a/src/gfx/renderJob/passRenderer/ddgi/DDGIMultiBouncePass.ts b/src/gfx/renderJob/passRenderer/ddgi/DDGIMultiBouncePass.ts index f117be71..46246116 100644 --- a/src/gfx/renderJob/passRenderer/ddgi/DDGIMultiBouncePass.ts +++ b/src/gfx/renderJob/passRenderer/ddgi/DDGIMultiBouncePass.ts @@ -1,7 +1,7 @@ import { MultiBouncePass_cs } from '../../../../assets/shader/compute/MultiBouncePass_cs'; import { View3D } from '../../../../core/View3D'; import { Engine3D } from '../../../../Engine3D'; -import { VirtualTexture } from '../../../../textures/VirtualTexture'; +import { RenderTexture } from '../../../../textures/RenderTexture'; import { ComputeShader } from '../../../graphics/webGpu/shader/ComputeShader'; import { GPUTextureFormat } from '../../../graphics/webGpu/WebGPUConst'; import { GPUContext } from '../../GPUContext'; @@ -13,7 +13,7 @@ import { DDGIIrradianceVolume } from './DDGIIrradianceVolume'; * @group Post */ export class DDGIMultiBouncePass { - public blendTexture: VirtualTexture; + public blendTexture: RenderTexture; private volume: DDGIIrradianceVolume; private computerShader: ComputeShader; @@ -24,14 +24,14 @@ export class DDGIMultiBouncePass { private initPipeline() { let giSetting = Engine3D.setting.gi; - this.blendTexture = new VirtualTexture(giSetting.probeSourceTextureSize, giSetting.probeSourceTextureSize, GPUTextureFormat.rgba16float, false, GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING); + this.blendTexture = new RenderTexture(giSetting.probeSourceTextureSize, giSetting.probeSourceTextureSize, GPUTextureFormat.rgba16float, false, GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING); this.computerShader = new ComputeShader(MultiBouncePass_cs); this.computerShader.setStorageTexture("outputBuffer", this.blendTexture); this.computerShader.setUniformBuffer("uniformData", this.volume.irradianceVolumeBuffer); } - public setInputs(inputs: VirtualTexture[]) { + public setInputs(inputs: RenderTexture[]) { let worldNormalMap = inputs[0]; let colorMap = inputs[1]; let lightingMap = inputs[2]; diff --git a/src/gfx/renderJob/passRenderer/ddgi/DDGIProbeRenderer.ts b/src/gfx/renderJob/passRenderer/ddgi/DDGIProbeRenderer.ts index 201abaad..00d4a4b9 100644 --- a/src/gfx/renderJob/passRenderer/ddgi/DDGIProbeRenderer.ts +++ b/src/gfx/renderJob/passRenderer/ddgi/DDGIProbeRenderer.ts @@ -2,7 +2,7 @@ import { Camera3D } from '../../../../core/Camera3D'; import { CubeCamera } from '../../../../core/CubeCamera'; import { Engine3D } from '../../../../Engine3D'; import { CEvent } from '../../../../event/CEvent'; -import { VirtualTexture } from '../../../../textures/VirtualTexture'; +import { RenderTexture } from '../../../../textures/RenderTexture'; import { EntityCollect } from '../../collect/EntityCollect'; import { GPUContext } from '../../GPUContext'; import { ProbeGBufferFrame } from '../../frame/ProbeGBufferFrame'; @@ -43,17 +43,17 @@ export class DDGIProbeRenderer extends RendererBase { private probeRenderResult: ProbeRenderResult; private renderStatus: GlobalIrradianceStatus = 'none'; - public positionMap: VirtualTexture; - public normalMap: VirtualTexture; - public colorMap: VirtualTexture; + public positionMap: RenderTexture; + public normalMap: RenderTexture; + public colorMap: RenderTexture; public probeNext: number = 128; public sizeW: number; public sizeH: number; public lightingPass: DDGILightingPass; public bouncePass: DDGIMultiBouncePass; public irradianceComputePass: DDGIIrradianceComputePass; - public irradianceDepthMap: VirtualTexture; - public irradianceColorMap: VirtualTexture; + public irradianceDepthMap: RenderTexture; + public irradianceColorMap: RenderTexture; /** * @@ -341,9 +341,9 @@ export class DDGIProbeRenderer extends RendererBase { private initIrradianceMap(volume: DDGIIrradianceVolume): void { let setting = volume.setting; let usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST; - this.irradianceDepthMap = new VirtualTexture(setting.octRTMaxSize, setting.octRTMaxSize, GPUTextureFormat.rgba16float, false, usage); + this.irradianceDepthMap = new RenderTexture(setting.octRTMaxSize, setting.octRTMaxSize, GPUTextureFormat.rgba16float, false, usage); this.irradianceDepthMap.name = 'irradianceDepthMap'; - this.irradianceColorMap = new VirtualTexture(setting.octRTMaxSize, setting.octRTMaxSize, GPUTextureFormat.rgba16float, false, usage); + this.irradianceColorMap = new RenderTexture(setting.octRTMaxSize, setting.octRTMaxSize, GPUTextureFormat.rgba16float, false, usage); this.irradianceColorMap.name = 'irradianceColorMap'; } @@ -351,7 +351,7 @@ export class DDGIProbeRenderer extends RendererBase { * @internal * @group DDGI */ - private writeToTexture(texture: VirtualTexture, array: Float32Array, width: number, height: number) { + private writeToTexture(texture: RenderTexture, array: Float32Array, width: number, height: number) { console.log(texture.name); const buffer = webGPUContext.device.createBuffer({ size: array.byteLength, diff --git a/src/gfx/renderJob/passRenderer/shadow/PointLightShadowRenderer.ts b/src/gfx/renderJob/passRenderer/shadow/PointLightShadowRenderer.ts index ef86b890..dd595303 100644 --- a/src/gfx/renderJob/passRenderer/shadow/PointLightShadowRenderer.ts +++ b/src/gfx/renderJob/passRenderer/shadow/PointLightShadowRenderer.ts @@ -21,7 +21,6 @@ import { WebGPUDescriptorCreator } from '../../../graphics/webGpu/descriptor/Web import { RendererPassState } from '../state/RendererPassState'; import { PassType } from '../state/RendererType'; import { ILight } from '../../../../components/lights/ILight'; -import { ShadowTexture } from '../../../../textures/ShadowTexture'; import { Reference } from '../../../../util/Reference'; type CubeShadowMapInfo = { @@ -40,7 +39,7 @@ export class PointLightShadowRenderer extends RendererBase { private _shadowCameraDic: Map; public shadowCamera: Camera3D; public cubeArrayTexture: DepthCubeArrayTexture; - public colorTexture: ShadowTexture; + public colorTexture: VirtualTexture; public shadowSize: number = 1024; constructor() { super(); @@ -49,7 +48,7 @@ export class PointLightShadowRenderer extends RendererBase { // this.shadowSize = Engine3D.setting.shadow.pointShadowSize; this._shadowCameraDic = new Map(); this.cubeArrayTexture = new DepthCubeArrayTexture(this.shadowSize, this.shadowSize, 8); - this.colorTexture = new ShadowTexture(this.shadowSize, this.shadowSize, GPUTextureFormat.bgra8unorm, false); + this.colorTexture = new VirtualTexture(this.shadowSize, this.shadowSize, GPUTextureFormat.bgra8unorm, false); Reference.getInstance().attached(this.cubeArrayTexture, this); } @@ -61,11 +60,11 @@ export class PointLightShadowRenderer extends RendererBase { } else { let camera = new PointShadowCubeCamera(view.camera.near, view.camera.far, 90, true); camera.label = lightBase.name; - let depths: ShadowTexture[] = []; + let depths: VirtualTexture[] = []; let rendererPassStates: RendererPassState[] = []; for (let i = 0; i < 6; i++) { - let depthTexture = new ShadowTexture(this.shadowSize, this.shadowSize, this.cubeArrayTexture.format, false); + let depthTexture = new VirtualTexture(this.shadowSize, this.shadowSize, this.cubeArrayTexture.format, false); let rtFrame = new RTFrame([this.colorTexture], [new RTDescriptor()]); depthTexture.name = `shadowDepthTexture_` + lightBase.name + i + "_face"; rtFrame.depthTexture = depthTexture; diff --git a/src/gfx/renderJob/passRenderer/shadow/ShadowMapPassRenderer.ts b/src/gfx/renderJob/passRenderer/shadow/ShadowMapPassRenderer.ts index 4d01c6f7..2a6278ca 100644 --- a/src/gfx/renderJob/passRenderer/shadow/ShadowMapPassRenderer.ts +++ b/src/gfx/renderJob/passRenderer/shadow/ShadowMapPassRenderer.ts @@ -5,7 +5,6 @@ import { Camera3D } from "../../../../core/Camera3D"; import { View3D } from "../../../../core/View3D"; import { Vector3 } from "../../../../math/Vector3"; import { Depth2DTextureArray } from "../../../../textures/Depth2DTextureArray"; - import { Time } from "../../../../util/Time"; import { GPUTextureFormat } from "../../../graphics/webGpu/WebGPUConst"; import { WebGPUDescriptorCreator } from "../../../graphics/webGpu/descriptor/WebGPUDescriptorCreator"; @@ -21,7 +20,7 @@ import { ClusterLightingBuffer } from "../cluster/ClusterLightingBuffer"; import { Reference } from "../../../../util/Reference"; import { Texture } from "../../../graphics/webGpu/core/texture/Texture"; import { CSM } from "../../../../core/csm/CSM"; -import { ShadowTexture } from "../../../../textures/ShadowTexture"; +import { VirtualTexture } from "../../../../textures/VirtualTexture"; /** * @internal @@ -46,7 +45,7 @@ export class ShadowMapPassRenderer extends RendererBase { for (let i = 0; i < 8; i++) { let rtFrame = new RTFrame([], []); - const tex = new ShadowTexture(size, size, GPUTextureFormat.depth32float, false); + const tex = new VirtualTexture(size, size, GPUTextureFormat.depth32float, false); tex.name = `shadowDepthTexture_${i}`; rtFrame.depthTexture = tex; rtFrame.label = "shadowRender"; diff --git a/src/gfx/renderJob/passRenderer/state/RendererPassState.ts b/src/gfx/renderJob/passRenderer/state/RendererPassState.ts index 0a584154..7b9a97e1 100644 --- a/src/gfx/renderJob/passRenderer/state/RendererPassState.ts +++ b/src/gfx/renderJob/passRenderer/state/RendererPassState.ts @@ -1,7 +1,7 @@ import { Engine3D } from "../../../../Engine3D"; import { Camera3D } from "../../../../core/Camera3D"; -import { VirtualTexture } from "../../../../textures/VirtualTexture"; +import { RenderTexture } from "../../../../textures/RenderTexture"; import { Texture } from "../../../graphics/webGpu/core/texture/Texture"; import { RTDescriptor } from "../../../graphics/webGpu/descriptor/RTDescriptor"; import { RTFrame } from "../../frame/RTFrame"; @@ -13,8 +13,8 @@ export class RendererPassState { public label: string = ""; public customSize: boolean = false; - public zPreTexture: VirtualTexture = null; - public depthTexture: VirtualTexture = null; + public zPreTexture: RenderTexture = null; + public depthTexture: RenderTexture = null; public renderTargetTextures: GPUColorTargetState[]; public outColor: number = -1; public renderTargets: Texture[]; diff --git a/src/gfx/renderJob/post/BloomPost.ts b/src/gfx/renderJob/post/BloomPost.ts index 5f602b54..e1ac34c1 100644 --- a/src/gfx/renderJob/post/BloomPost.ts +++ b/src/gfx/renderJob/post/BloomPost.ts @@ -1,4 +1,3 @@ -import { VirtualTexture } from '../../../textures/VirtualTexture'; import { UniformGPUBuffer } from '../../graphics/webGpu/core/buffer/UniformGPUBuffer'; import { WebGPUDescriptorCreator } from '../../graphics/webGpu/descriptor/WebGPUDescriptorCreator'; import { ComputeShader } from '../../graphics/webGpu/shader/ComputeShader'; @@ -12,7 +11,7 @@ import { View3D } from '../../../core/View3D'; import { RTDescriptor } from '../../graphics/webGpu/descriptor/RTDescriptor'; import { RTFrame } from '../frame/RTFrame'; import { downSample, post, threshold, upSample } from '../../../assets/shader/compute/BloomEffect_cs'; -import { CResizeEvent, ShadowTexture } from '../../..'; +import { VirtualTexture } from '../../../textures/VirtualTexture'; /** * Bloom Effects @@ -81,10 +80,10 @@ export class BloomPost extends PostBase { Engine3D.setting.render.postProcessing.bloom.downSampleBlurSize = value; } - public get downSampleBlurSigma(): number { return Engine3D.setting.render.postProcessing.bloom.downSampleBlurSigma; } + public set downSampleBlurSigma(value: number) { Engine3D.setting.render.postProcessing.bloom.downSampleBlurSigma = value; } @@ -92,6 +91,7 @@ export class BloomPost extends PostBase { public get upSampleBlurSize(): number { return Engine3D.setting.render.postProcessing.bloom.upSampleBlurSize; } + public set upSampleBlurSize(value: number) { Engine3D.setting.render.postProcessing.bloom.upSampleBlurSize = value; } @@ -99,6 +99,7 @@ export class BloomPost extends PostBase { public get upSampleBlurSigma(): number { return Engine3D.setting.render.postProcessing.bloom.upSampleBlurSigma; } + public set upSampleBlurSigma(value: number) { Engine3D.setting.render.postProcessing.bloom.upSampleBlurSigma = value; } @@ -106,6 +107,7 @@ export class BloomPost extends PostBase { public get luminanceThreshole(): number { return Engine3D.setting.render.postProcessing.bloom.luminanceThreshole; } + public set luminanceThreshole(value: number) { Engine3D.setting.render.postProcessing.bloom.luminanceThreshole = value; } @@ -113,6 +115,7 @@ export class BloomPost extends PostBase { public get bloomIntensity(): number { return Engine3D.setting.render.postProcessing.bloom.bloomIntensity; } + public set bloomIntensity(value: number) { Engine3D.setting.render.postProcessing.bloom.bloomIntensity = value; } @@ -200,7 +203,6 @@ export class BloomPost extends PostBase { this.postCompute.workerSizeZ = 1; } - private createResource() { let setting = Engine3D.setting.render.postProcessing.bloom; @@ -210,7 +212,7 @@ export class BloomPost extends PostBase { let screenWidth = presentationSize[0]; let screenHeight = presentationSize[1]; - this.RT_threshold = new ShadowTexture(screenWidth, screenHeight, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); + this.RT_threshold = new VirtualTexture(screenWidth, screenHeight, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); const N = setting.downSampleStep; // 下采样次数 { @@ -221,7 +223,7 @@ export class BloomPost extends PostBase { for (let i = 0; i < N; i++) { let w = Math.ceil(screenWidth / downSize); let h = Math.ceil(screenHeight / downSize); - this.RT_BloomDown[i] = new ShadowTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); + this.RT_BloomDown[i] = new VirtualTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); downSize *= 2; } } @@ -232,16 +234,13 @@ export class BloomPost extends PostBase { for (let i = 0; i < N - 1; i++) { let w = this.RT_BloomDown[N - 2 - i].width; let h = this.RT_BloomDown[N - 2 - i].height; - this.RT_BloomUp[i] = new ShadowTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); + this.RT_BloomUp[i] = new VirtualTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); } } let bloomDesc = new RTDescriptor(); bloomDesc.loadOp = `load`; - // this.rtFrame = new RTFrame([this.RT_threshold], [bloomDesc]); - // this.rtFrame = new RTFrame([this.RT_BloomDown[4]], [bloomDesc]); - // this.rtFrame = new RTFrame([this.RT_BloomUp[5]], [bloomDesc]); this.rtFrame = new RTFrame([this.RT_threshold], [bloomDesc]); } @@ -257,32 +256,6 @@ export class BloomPost extends PostBase { this.createUpSampleComputes(); this.createPostCompute(); - webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { - let presentationSize = webGPUContext.presentationSize; - let screenWidth = presentationSize[0]; - let screenHeight = presentationSize[1]; - this.RT_threshold.resize(screenWidth, screenHeight); - const N = cfg.downSampleStep; // 下采样次数 - { - let downSize = 2; - // 创建下纹理 - for (let i = 0; i < N; i++) { - let w = Math.ceil(screenWidth / downSize); - let h = Math.ceil(screenHeight / downSize); - this.RT_BloomDown[i].resize(w, h); - downSize *= 2; - } - } - - { - for (let i = 0; i < N - 1; i++) { - let w = this.RT_BloomDown[N - 2 - i].width; - let h = this.RT_BloomDown[N - 2 - i].height; - this.RT_BloomUp[i].resize(w, h); - } - } - }, this); - this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(this.rtFrame, null); this.rendererPassState.label = "Bloom"; } @@ -298,50 +271,65 @@ export class BloomPost extends PostBase { this.bloomSetting.apply(); - { + GPUContext.computeCommand(command, [this.thresholdCompute, ...this.downSampleComputes, ...this.upSampleComputes, this.postCompute]); + GPUContext.lastRenderPassState = this.rendererPassState; + } - this.thresholdCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8); - this.thresholdCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8); - this.thresholdCompute.workerSizeZ = 1; - - const N = cfg.downSampleStep; // 下采样次数 - { - for (let i = 0; i < N; i++) { - let compute = this.downSampleComputes[i]; - let dstTexture = this.RT_BloomDown[i]; - compute.workerSizeX = Math.ceil(dstTexture.width / 8); - compute.workerSizeY = Math.ceil(dstTexture.height / 8); - compute.workerSizeZ = 1; - } - } + public onResize() { + let cfg = Engine3D.setting.render.postProcessing.bloom; - { - { - let dstTexture = this.RT_BloomUp[0]; - let compute = this.upSampleComputes[0]; - compute.workerSizeX = Math.ceil(dstTexture.width / 8); - compute.workerSizeY = Math.ceil(dstTexture.height / 8); - compute.workerSizeZ = 1; - } - - { - for (let i = 1; i < N - 1; i++) { - let dstTexture = this.RT_BloomUp[i]; - let compute = this.upSampleComputes[i]; - compute.workerSizeX = Math.ceil(dstTexture.width / 8); - compute.workerSizeY = Math.ceil(dstTexture.height / 8); - compute.workerSizeZ = 1; - } - } - } + let presentationSize = webGPUContext.presentationSize; + let screenWidth = presentationSize[0]; + let screenHeight = presentationSize[1]; + this.RT_threshold.resize(screenWidth, screenHeight); + const N = cfg.downSampleStep; // 下采样次数 + let downSize = 2; + // 创建下纹理 + for (let i = 0; i < N; i++) { + let w = Math.ceil(screenWidth / downSize); + let h = Math.ceil(screenHeight / downSize); + this.RT_BloomDown[i].resize(w, h); + downSize *= 2; + } - this.postCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8); - this.postCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8); - this.postCompute.workerSizeZ = 1; + for (let i = 0; i < N - 1; i++) { + let w = this.RT_BloomDown[N - 2 - i].width; + let h = this.RT_BloomDown[N - 2 - i].height; + this.RT_BloomUp[i].resize(w, h); } - GPUContext.computeCommand(command, [this.thresholdCompute, ...this.downSampleComputes, ...this.upSampleComputes, this.postCompute]); - GPUContext.lastRenderPassState = this.rendererPassState; - } + this.thresholdCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8); + this.thresholdCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8); + this.thresholdCompute.workerSizeZ = 1; + for (let i = 0; i < N; i++) { + let compute = this.downSampleComputes[i]; + let dstTexture = this.RT_BloomDown[i]; + compute.workerSizeX = Math.ceil(dstTexture.width / 8); + compute.workerSizeY = Math.ceil(dstTexture.height / 8); + compute.workerSizeZ = 1; + } + + { + let dstTexture = this.RT_BloomUp[0]; + let compute = this.upSampleComputes[0]; + compute.workerSizeX = Math.ceil(dstTexture.width / 8); + compute.workerSizeY = Math.ceil(dstTexture.height / 8); + compute.workerSizeZ = 1; + } + + { + for (let i = 1; i < N - 1; i++) { + let dstTexture = this.RT_BloomUp[i]; + let compute = this.upSampleComputes[i]; + compute.workerSizeX = Math.ceil(dstTexture.width / 8); + compute.workerSizeY = Math.ceil(dstTexture.height / 8); + compute.workerSizeZ = 1; + } + } + + this.postCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8); + this.postCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8); + this.postCompute.workerSizeZ = 1; + } } diff --git a/src/gfx/renderJob/post/GTAOPost.ts b/src/gfx/renderJob/post/GTAOPost.ts index 2fdabbfe..cf4c6409 100644 --- a/src/gfx/renderJob/post/GTAOPost.ts +++ b/src/gfx/renderJob/post/GTAOPost.ts @@ -177,8 +177,6 @@ export class GTAOPost extends PostBase { this.autoSetColorTexture('inTex', this.gtaoCompute); this.gtaoCompute.setStorageTexture(`outTex`, this.gtaoTexture); - - this.gtaoSetting = gtaoSetting; } @@ -224,6 +222,7 @@ export class GTAOPost extends PostBase { if (!this.gtaoCompute) { this.createResource(); this.createCompute(); + this.onResize(); this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(this.rtFrame, null); this.rendererPassState.label = "GTAO"; @@ -251,11 +250,18 @@ export class GTAOPost extends PostBase { this.gtaoSetting.apply(); + GPUContext.computeCommand(command, [this.gtaoCompute]); + GPUContext.lastRenderPassState = this.rendererPassState; + } + + public onResize() { + let presentationSize = webGPUContext.presentationSize; + let w = presentationSize[0]; + let h = presentationSize[1]; + this.gtaoTexture.resize(w, h); + this.gtaoCompute.workerSizeX = Math.ceil(this.gtaoTexture.width / 8); this.gtaoCompute.workerSizeY = Math.ceil(this.gtaoTexture.height / 8); this.gtaoCompute.workerSizeZ = 1; - - GPUContext.computeCommand(command, [this.gtaoCompute]); - GPUContext.lastRenderPassState = this.rendererPassState; } } \ No newline at end of file diff --git a/src/gfx/renderJob/post/GlobalFog.ts b/src/gfx/renderJob/post/GlobalFog.ts index 7c8c163b..16a9fe3a 100644 --- a/src/gfx/renderJob/post/GlobalFog.ts +++ b/src/gfx/renderJob/post/GlobalFog.ts @@ -215,6 +215,7 @@ export class GlobalFog extends PostBase { } return texture; } + /** * @internal */ diff --git a/src/gfx/renderJob/post/GodRayPost.ts b/src/gfx/renderJob/post/GodRayPost.ts index 783e1f45..2a2b7ed7 100644 --- a/src/gfx/renderJob/post/GodRayPost.ts +++ b/src/gfx/renderJob/post/GodRayPost.ts @@ -15,8 +15,6 @@ import { RTDescriptor } from '../../graphics/webGpu/descriptor/RTDescriptor'; import { GBufferFrame } from '../frame/GBufferFrame'; import { RTFrame } from '../frame/RTFrame'; import { GodRay_cs } from '../../../assets/shader/compute/GodRay_cs'; -import { GUIHelp } from '@orillusion/debug/GUIHelp'; -import { ShadowTexture } from '../../..'; export class GodRayPost extends PostBase { @@ -96,11 +94,9 @@ export class GodRayPost extends PostBase { let shadowRenderer = Engine3D.getRenderJob(view).shadowMapPassRenderer; this.godRayCompute.setSamplerTexture(`shadowMap`, shadowRenderer.depth2DArrayTexture); - this.godRayCompute.workerSizeX = Math.ceil(this.godRayTexture.width / 8); - this.godRayCompute.workerSizeY = Math.ceil(this.godRayTexture.height / 8); - this.godRayCompute.workerSizeZ = 1; - this.godRaySetting = godRaySetting; + + this.onResize(); } private createResource() { @@ -108,13 +104,27 @@ export class GodRayPost extends PostBase { let w = presentationSize[0]; let h = presentationSize[1]; - this.godRayTexture = new ShadowTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); + this.godRayTexture = new VirtualTexture(w, h, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); this.godRayTexture.name = 'godRayTexture'; let gtaoDec = new RTDescriptor(); gtaoDec.loadOp = `load`; this.rtFrame = new RTFrame([this.godRayTexture], [gtaoDec]); } + public onResize() { + let presentationSize = webGPUContext.presentationSize; + let w = presentationSize[0]; + let h = presentationSize[1]; + + this.godRayTexture.resize(w, h); + this.historyGodRayData.resizeBuffer(4 * this.godRayTexture.width * this.godRayTexture.height); + this.godRayCompute.setStorageBuffer('historyGodRayData', this.historyGodRayData); + + this.godRayCompute.workerSizeX = Math.ceil(this.godRayTexture.width / 8); + this.godRayCompute.workerSizeY = Math.ceil(this.godRayTexture.height / 8); + this.godRayCompute.workerSizeZ = 1; + } + /** * @internal */ @@ -132,32 +142,19 @@ export class GodRayPost extends PostBase { let globalUniform = GlobalBindGroup.getCameraGroup(view.camera); this.godRayCompute.setUniformBuffer('globalUniform', globalUniform.uniformGPUBuffer); - - GUIHelp.addFolder("GodRay"); - GUIHelp.add(this, "blendColor", 0.0, 1.0, 0.1); - GUIHelp.add(this, 'scatteringExponent', 1, 10.0, 0.1); - GUIHelp.add(this, 'rayMarchCount', 10, 30.0, 1.0); - GUIHelp.add(this, 'intensity', 0.01, 2.0, 0.01); - - GUIHelp.endFolder(); } this.godRaySetting.setFloat('intensity', this.intensity); this.godRaySetting.setFloat('rayMarchCount', this.rayMarchCount); - let camera = view.camera; - this.godRaySetting.setFloat('viewPortWidth', camera.viewPort.width); - this.godRaySetting.setFloat('viewPortHeight', camera.viewPort.height); - + let presentationSize = webGPUContext.presentationSize; + let w = presentationSize[0]; + let h = presentationSize[1]; + this.godRaySetting.setFloat('viewPortWidth', w); + this.godRaySetting.setFloat('viewPortHeight', h); this.godRaySetting.setFloat('blendColor', this.blendColor ? 1 : 0); this.godRaySetting.setFloat('scatteringExponent', this.scatteringExponent); - this.godRaySetting.apply(); - - this.godRayCompute.workerSizeX = Math.ceil(this.godRayTexture.width / 8); - this.godRayCompute.workerSizeY = Math.ceil(this.godRayTexture.height / 8); - this.godRayCompute.workerSizeZ = 1; - GPUContext.computeCommand(command, [this.godRayCompute]); GPUContext.lastRenderPassState = this.rendererPassState; } diff --git a/src/gfx/renderJob/post/OutlinePost.ts b/src/gfx/renderJob/post/OutlinePost.ts index a3b54abe..84d58c5b 100644 --- a/src/gfx/renderJob/post/OutlinePost.ts +++ b/src/gfx/renderJob/post/OutlinePost.ts @@ -25,14 +25,12 @@ import { OutlinePostSlot, outlinePostData } from '../../../io/OutlinePostData'; * post effect out line * OutlinePostManager, * ``` - * //setting - * let cfg = {@link Engine3D.setting.render.postProcessing.outline}; - * let view = new View3D(); - view.scene = this.scene; - view.camera = mainCamera; - - * - * Engine3D.startRender(renderJob); + * setting + * let cfg = {@link Engine3D.setting.render.postProcessing.outline}; + * let view = new View3D(); + * view.scene = this.scene; + * view.camera = mainCamera; + * Engine3D.startRender(renderJob); *``` * @group Post Effects */ @@ -40,40 +38,63 @@ export class OutlinePost extends PostBase { /** * @internal */ - outlineTex: VirtualTexture; - - lowTex: VirtualTexture; - + private outlineTex: VirtualTexture; + /** + * @internal + */ + private lowTex: VirtualTexture; /** * @internal */ - rendererPassState: RendererPassState; + private rendererPassState: RendererPassState; /** * @internal */ - calcWeightCompute: ComputeShader; - outlineCompute: ComputeShader; - blendCompute: ComputeShader; + private calcWeightCompute: ComputeShader; /** * @internal */ - outlineSetting: StorageGPUBuffer; - + private outlineCompute: ComputeShader; + /** + * @internal + */ + private blendCompute: ComputeShader; /** * @internal */ - slotsBuffer: StorageGPUBuffer; - slotsArray: Float32Array; - - - entitiesArray: Float32Array; - entitiesBuffer: StorageGPUBuffer; - - weightBuffer: StorageGPUBuffer; - lowTexSize: Vector2; - - oldOutlineColor: StorageGPUBuffer; - rtFrame: RTFrame; + private outlineSetting: StorageGPUBuffer; + /** + * @internal + */ + private slotsBuffer: StorageGPUBuffer; + /** + * @internal + */ + private slotsArray: Float32Array; + /** + * @internal + */ + private entitiesArray: Float32Array; + /** + * @internal + */ + private entitiesBuffer: StorageGPUBuffer; + /** + * @internal + */ + private weightBuffer: StorageGPUBuffer; + /** + * @internal + */ + private lowTexSize: Vector2; + /** + * @internal + */ + private oldOutlineColor: StorageGPUBuffer; + /** + * @internal + */ + private rtFrame: RTFrame; constructor() { super(); @@ -268,4 +289,30 @@ export class OutlinePost extends PostBase { GPUContext.computeCommand(command, this.computeList); GPUContext.lastRenderPassState = this.rendererPassState; } + + public onResize(): void { + let presentationSize = webGPUContext.presentationSize; + let w = presentationSize[0]; + let h = presentationSize[1]; + let textureScale = Engine3D.setting.render.postProcessing.outline.textureScale; + this.lowTexSize = new Vector2(Math.ceil(w * textureScale), Math.ceil(h * textureScale)); + + this.lowTex.resize(this.lowTexSize.x, this.lowTexSize.y); + this.outlineTex.resize(w, h); + + this.weightBuffer.resizeBuffer(this.lowTexSize.x * this.lowTexSize.y * 4); + this.oldOutlineColor.resizeBuffer(this.lowTexSize.x * this.lowTexSize.y * 4); + + this.calcWeightCompute.workerSizeX = Math.ceil(this.lowTex.width / 8); + this.calcWeightCompute.workerSizeY = Math.ceil(this.lowTex.height / 8); + this.calcWeightCompute.workerSizeZ = 1; + + this.outlineCompute.workerSizeX = Math.ceil(this.lowTex.width / 8); + this.outlineCompute.workerSizeY = Math.ceil(this.lowTex.height / 8); + this.outlineCompute.workerSizeZ = 1; + + this.blendCompute.workerSizeX = Math.ceil(this.outlineTex.width / 8); + this.blendCompute.workerSizeY = Math.ceil(this.outlineTex.height / 8); + this.blendCompute.workerSizeZ = 1; + } } diff --git a/src/gfx/renderJob/post/PostBase.ts b/src/gfx/renderJob/post/PostBase.ts index 7c1b9cba..660cde78 100644 --- a/src/gfx/renderJob/post/PostBase.ts +++ b/src/gfx/renderJob/post/PostBase.ts @@ -9,6 +9,8 @@ import { RTResourceConfig } from '../config/RTResourceConfig'; import { PostRenderer } from '../passRenderer/post/PostRenderer'; import { View3D } from '../../../core/View3D'; import { Reference } from '../../../util/Reference'; +import { CResizeEvent } from '../../../event/CResizeEvent'; +import { webGPUContext } from '../../graphics/webGpu/Context3D'; /** * @internal * Base class for post-processing effects @@ -23,6 +25,8 @@ export class PostBase { constructor() { this.rtViewQuad = new Map(); this.virtualTexture = new Map(); + + webGPUContext.addEventListener(CResizeEvent.RESIZE, this.onResize, this); } protected createRTTexture(name: string, rtWidth: number, rtHeight: number, format: GPUTextureFormat, useMipmap: boolean = false, sampleCount: number = 0) { @@ -57,15 +61,18 @@ export class PostBase { /** * @internal */ - public compute(view: View3D,) { } + public compute(view: View3D) { } /** * @internal */ - public onAttach(view: View3D,) { } + public onAttach(view: View3D) { } /** * @internal */ - public onDetach(view: View3D,) { } + public onDetach(view: View3D) { } + public onResize() { + + } /** * @internal */ diff --git a/src/gfx/renderJob/post/TAAPost.ts b/src/gfx/renderJob/post/TAAPost.ts index 10f0f0cd..ad4d16f3 100644 --- a/src/gfx/renderJob/post/TAAPost.ts +++ b/src/gfx/renderJob/post/TAAPost.ts @@ -236,10 +236,6 @@ export class TAAPost extends PostBase { this.createResource(); this.createCompute(view); this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(this.rtFrame, null); - - webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { - this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(this.rtFrame, null); - }, this); } let cfg = Engine3D.setting.render.postProcessing.taa; @@ -253,6 +249,23 @@ export class TAAPost extends PostBase { this.taaSetting.setFloat('jitterY', view.camera.jitterY); this.taaSetting.apply(); + GPUContext.computeCommand(command, [this.copyTexCompute, this.taaCompute, this.sharpCompute]); + GPUContext.lastRenderPassState = this.rendererPassState; + this.preProjMatrix.copyFrom(view.camera.projectionMatrix); + this.preViewMatrix.copyFrom(view.camera.viewMatrix); + } + + public onResize(): void { + let presentationSize = webGPUContext.presentationSize; + let w = presentationSize[0]; + let h = presentationSize[1]; + + this.preColorBuffer.resizeBuffer(w * h * 4); + + this.taaTexture.resize(w, h); + this.outTexture.resize(w, h); + this.preColorTex.resize(w, h); + this.taaCompute.workerSizeX = Math.ceil(this.taaTexture.width / 8); this.taaCompute.workerSizeY = Math.ceil(this.taaTexture.height / 8); this.taaCompute.workerSizeZ = 1; @@ -264,14 +277,5 @@ export class TAAPost extends PostBase { this.sharpCompute.workerSizeX = Math.ceil(this.outTexture.width / 8); this.sharpCompute.workerSizeY = Math.ceil(this.outTexture.height / 8); this.sharpCompute.workerSizeZ = 1; - - GPUContext.computeCommand(command, [this.copyTexCompute, this.taaCompute, this.sharpCompute]); - - GPUContext.lastRenderPassState = this.rendererPassState; - - this.preProjMatrix.copyFrom(view.camera.projectionMatrix); - this.preViewMatrix.copyFrom(view.camera.viewMatrix); - - // view.camera.getViewMatrix(this.preViewMatrix); } } diff --git a/src/index.ts b/src/index.ts index 53a06f72..5dbd63bb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -548,7 +548,7 @@ export * from "./textures/Float32ArrayTexture" export * from "./textures/HDRTexture" export * from "./textures/HDRTextureCube" export * from "./textures/LDRTextureCube" -export * from "./textures/ShadowTexture" +export * from "./textures/RenderTexture" export * from "./textures/SolidColorSky" export * from "./textures/TextureCubeFaceData" export * from "./textures/Uint16Texture" diff --git a/src/textures/ShadowTexture.ts b/src/textures/RenderTexture.ts similarity index 90% rename from src/textures/ShadowTexture.ts rename to src/textures/RenderTexture.ts index f84331c3..dcc028dc 100644 --- a/src/textures/ShadowTexture.ts +++ b/src/textures/RenderTexture.ts @@ -3,24 +3,16 @@ import { GPUAddressMode, GPUTextureFormat } from '../gfx/graphics/webGpu/WebGPUC import { webGPUContext } from '../gfx/graphics/webGpu/Context3D'; import { GPUContext } from '../gfx/renderJob/GPUContext'; import { UUID } from '../util/Global'; +import { CResizeEvent } from '..'; /** * @internal * Render target texture * Render what we want to render onto a texture instead of rendering it onto the screen as we usually do * @group Texture */ -export class ShadowTexture extends Texture { +export class RenderTexture extends Texture { public resolveTarget: GPUTextureView; sampleCount: number; - // storeOp: string = 'store'; - // loadOp: GPULoadOp = `load`; - // clearValue: GPUColor = [0, 0, 0, 0]; - - public clone() { - let texture = new ShadowTexture(this.width, this.height, this.format, this.useMipmap, this.usage, this.numberLayer, this.sampleCount); - texture.name = "clone_" + texture.name; - return texture; - } /** * create virtual texture @@ -46,21 +38,20 @@ export class ShadowTexture extends Texture { this.usage = usage | GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST; } - // if (this.usage & GPUTextureUsage.RENDER_ATTACHMENT || this.format == GPUTextureFormat.depth24plus || this.format == GPUTextureFormat.depth32float) { - // webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { - // let { width, height } = e.data; - // this.resize(width, height); - // }, this); - // } this.resize(width, height); - } + webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { + let { width, height } = e.data; + this.resize(width, height); + this._textureChange = true; + }, this); + } public resize(width, height) { let device = webGPUContext.device; if (this.gpuTexture) { + Texture.delayDestroyTexture(this.gpuTexture); this.gpuTexture = null; - // Texture.delayDestroyTexture(this.gpuTexture); this.view = null; } @@ -117,6 +108,8 @@ export class ShadowTexture extends Texture { // this.visibility = GPUShaderStage.FRAGMENT; this.gpuSampler = device.createSampler(this); } + + this._textureChange = true; } /** @@ -157,6 +150,12 @@ export class ShadowTexture extends Texture { GPUContext.endCommandEncoder(commandEncoder); } + public clone() { + let texture = new RenderTexture(this.width, this.height, this.format, this.useMipmap, this.usage, this.numberLayer, this.sampleCount); + texture.name = "clone_" + texture.name; + return texture; + } + public readTextureToImage() { let device = webGPUContext.device; let w = webGPUContext.windowWidth; diff --git a/src/textures/VirtualTexture.ts b/src/textures/VirtualTexture.ts index db75e256..de342f78 100644 --- a/src/textures/VirtualTexture.ts +++ b/src/textures/VirtualTexture.ts @@ -3,7 +3,6 @@ import { GPUAddressMode, GPUTextureFormat } from '../gfx/graphics/webGpu/WebGPUC import { webGPUContext } from '../gfx/graphics/webGpu/Context3D'; import { GPUContext } from '../gfx/renderJob/GPUContext'; import { UUID } from '../util/Global'; -import { CResizeEvent } from '..'; /** * @internal * Render target texture @@ -48,12 +47,6 @@ export class VirtualTexture extends Texture { } this.resize(width, height); - - webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { - let { width, height } = e.data; - this.resize(width, height); - this._textureChange = true; - }, this); } public resize(width, height) { @@ -62,19 +55,12 @@ export class VirtualTexture extends Texture { Texture.delayDestroyTexture(this.gpuTexture); this.gpuTexture = null; this.view = null; - this.gpuSampler_comparison = null; - this.gpuSampler = null; } this.width = width; this.height = height; - this.createTextureDescriptor(width, height, 1, this.format, this.usage, this.numberLayer, this.sampleCount); - // this.loadOp = clear ? `clear` : `load` - // this.loadOp = `clear` - this.useMipmap = false; - this.visibility = GPUShaderStage.COMPUTE | GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT; if (this.format == GPUTextureFormat.rgba32float) { @@ -116,9 +102,10 @@ export class VirtualTexture extends Texture { this.addressModeU = GPUAddressMode.clamp_to_edge; this.addressModeV = GPUAddressMode.clamp_to_edge; - // this.visibility = GPUShaderStage.FRAGMENT; this.gpuSampler = device.createSampler(this); } + + this._textureChange = true; } /** From 8e44f66c69644628991f602918a9f8f3a22343bf Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Sun, 5 Nov 2023 21:01:38 +0800 Subject: [PATCH 08/34] fix: fix resize events fix resize events --- src/gfx/graphics/webGpu/Context3D.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/gfx/graphics/webGpu/Context3D.ts b/src/gfx/graphics/webGpu/Context3D.ts index c85b291f..62dd86e4 100644 --- a/src/gfx/graphics/webGpu/Context3D.ts +++ b/src/gfx/graphics/webGpu/Context3D.ts @@ -1,3 +1,4 @@ +import { CEvent } from '../../..'; import { CEventDispatcher } from '../../../event/CEventDispatcher'; import { CResizeEvent } from '../../../event/CResizeEvent'; import { CanvasConfig } from './CanvasConfig'; @@ -17,7 +18,7 @@ class Context3D extends CEventDispatcher { public canvasConfig: CanvasConfig; public super: number = 1.0; private _pixelRatio: number = 1.0; - canResize: boolean = true; + private _resizeEvent: CEvent; // initSize: number[]; public get pixelRatio() { return this._pixelRatio; @@ -108,6 +109,9 @@ class Context3D extends CEventDispatcher { alphaMode: 'premultiplied', colorSpace: `srgb`, }); + + this._resizeEvent = new CResizeEvent(CResizeEvent.RESIZE, { width: this.windowWidth, height: this.windowHeight }) + this.updateSize(); return true; } @@ -121,7 +125,9 @@ class Context3D extends CEventDispatcher { this.presentationSize[0] = this.windowWidth; this.presentationSize[1] = this.windowHeight; this.aspect = this.windowWidth / this.windowHeight; - this.dispatchEvent(new CResizeEvent(CResizeEvent.RESIZE, { width: this.windowWidth, height: this.windowHeight })); + + this._resizeEvent.data = { width: this.windowWidth, height: this.windowHeight }; + this.dispatchEvent(this._resizeEvent); } } } From bb633e44dc6563ed29085ce4ef68f9751875ecb2 Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Sun, 5 Nov 2023 21:11:17 +0800 Subject: [PATCH 09/34] fix: fix sample grass fix sample grass --- samples/ext/Sample_Grass.ts | 3 --- src/components/post/PostProcessingComponent.ts | 2 -- 2 files changed, 5 deletions(-) diff --git a/samples/ext/Sample_Grass.ts b/samples/ext/Sample_Grass.ts index f7ae6b03..a2a2e594 100644 --- a/samples/ext/Sample_Grass.ts +++ b/samples/ext/Sample_Grass.ts @@ -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); } } diff --git a/src/components/post/PostProcessingComponent.ts b/src/components/post/PostProcessingComponent.ts index adc63477..58bd90cd 100644 --- a/src/components/post/PostProcessingComponent.ts +++ b/src/components/post/PostProcessingComponent.ts @@ -29,7 +29,6 @@ export class PostProcessingComponent extends ComponentBase { } private activePost() { - webGPUContext.canResize = false; let view = this.transform.view3D; let job = Engine3D.getRenderJob(view); this._postList.forEach((v) => { @@ -38,7 +37,6 @@ export class PostProcessingComponent extends ComponentBase { } private unActivePost() { - webGPUContext.canResize = true; let view = this.transform.view3D; let job = Engine3D.getRenderJob(view); this._postList.forEach((v) => { From 0096d38a1873aa53d11bf3beaef76496f628ea9a Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Sun, 5 Nov 2023 21:46:40 +0800 Subject: [PATCH 10/34] fix: resize by ResizeObserver --- src/Engine3D.ts | 20 +++++++++----------- src/gfx/graphics/webGpu/Context3D.ts | 12 +++++++++--- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/Engine3D.ts b/src/Engine3D.ts index 609c9878..ac800654 100644 --- a/src/Engine3D.ts +++ b/src/Engine3D.ts @@ -25,7 +25,6 @@ import { WasmMatrix } from '@orillusion/wasm-matrix/WasmMatrix'; import { Matrix4 } from './math/Matrix4'; import { FXAAPost } from './gfx/renderJob/post/FXAAPost'; import { PostProcessingComponent } from './components/post/PostProcessingComponent'; -import { Texture } from './gfx/graphics/webGpu/core/texture/Texture'; /** * Orillusion 3D Engine @@ -308,12 +307,15 @@ export class Engine3D { public static async init(descriptor: { canvasConfig?: CanvasConfig; beforeRender?: Function; renderLoop?: Function; lateRender?: Function, engineSetting?: EngineSetting } = {}) { console.log('Engine Version', version); - this.divB = document.createElement("div"); - this.divB.style.position = 'absolute' - this.divB.style.zIndex = '999' - this.divB.style.color = '#FFFFFF' - this.divB.style.top = '150px' - document.body.appendChild(this.divB); + // for dev debug + if(import.meta.env.DEV){ + this.divB = document.createElement("div"); + this.divB.style.position = 'absolute' + this.divB.style.zIndex = '999' + this.divB.style.color = '#FFFFFF' + this.divB.style.top = '150px' + document.body.appendChild(this.divB); + } this.setting = { ...this.setting, ...descriptor.engineSetting } @@ -431,9 +433,6 @@ export class Engine3D { * @internal */ private static render(time) { - webGPUContext.updateSize(); - Texture.destroyTexture(); - this._deltaTime = time - this._time; this._time = time; @@ -568,7 +567,6 @@ export class Engine3D { } if (this._lateRender) this._lateRender(); - } diff --git a/src/gfx/graphics/webGpu/Context3D.ts b/src/gfx/graphics/webGpu/Context3D.ts index 62dd86e4..51193c7b 100644 --- a/src/gfx/graphics/webGpu/Context3D.ts +++ b/src/gfx/graphics/webGpu/Context3D.ts @@ -1,7 +1,8 @@ -import { CEvent } from '../../..'; +import { CEvent, Texture } from '../../..'; import { CEventDispatcher } from '../../../event/CEventDispatcher'; import { CResizeEvent } from '../../../event/CResizeEvent'; import { CanvasConfig } from './CanvasConfig'; + /** * @internal */ @@ -111,7 +112,11 @@ class Context3D extends CEventDispatcher { }); this._resizeEvent = new CResizeEvent(CResizeEvent.RESIZE, { width: this.windowWidth, height: this.windowHeight }) - + const resizeObserver = new ResizeObserver(() => { + this.updateSize() + Texture.destroyTexture() + }); + resizeObserver.observe(this.canvas); this.updateSize(); return true; } @@ -126,7 +131,8 @@ class Context3D extends CEventDispatcher { this.presentationSize[1] = this.windowHeight; this.aspect = this.windowWidth / this.windowHeight; - this._resizeEvent.data = { width: this.windowWidth, height: this.windowHeight }; + this._resizeEvent.data.width = this.windowWidth; + this._resizeEvent.data.height = this.windowHeight; this.dispatchEvent(this._resizeEvent); } } From 23f996a3c0e7056531b9935e25077ca02572d1b3 Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Sun, 5 Nov 2023 21:54:44 +0800 Subject: [PATCH 11/34] add post test --- samples/post/Sample_Depth.ts | 109 ++++++++++++++++++++++++++++ samples/post/Sample_Outline.ts | 116 ++++++++++++++++++++++++++++++ samples/post/Sample_SSR.ts | 128 +++++++++++++++++++++++++++++++++ 3 files changed, 353 insertions(+) create mode 100644 samples/post/Sample_Depth.ts create mode 100644 samples/post/Sample_Outline.ts create mode 100644 samples/post/Sample_SSR.ts diff --git a/samples/post/Sample_Depth.ts b/samples/post/Sample_Depth.ts new file mode 100644 index 00000000..13711b15 --- /dev/null +++ b/samples/post/Sample_Depth.ts @@ -0,0 +1,109 @@ +import { DepthOfFieldPost, DirectLight, Engine3D, PostProcessingComponent, View3D, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, SSR_IS_Kernel, CameraUtil, webGPUContext, AtmosphericComponent } from '@orillusion/core' +import * as dat from '@orillusion/debug/dat.gui.module' + +export class Sample_DepthOfView { + lightObj: Object3D + scene: Scene3D + constructor() {} + + async run() { + Engine3D.setting.shadow.enable = true + Engine3D.setting.shadow.shadowBound = 100 + await Engine3D.init({ + canvasConfig: { + devicePixelRatio: 1 + } + }) + + this.scene = new Scene3D() + this.scene.addComponent(AtmosphericComponent).sunY = 0.6 + + let camera = CameraUtil.createCamera3DObject(this.scene) + camera.perspective(60, webGPUContext.aspect, 1, 5000.0) + let ctrl = camera.object3D.addComponent(HoverCameraController) + ctrl.setCamera(100, -15, 150) + + await this.initScene(this.scene) + + let view = new View3D() + view.scene = this.scene + view.camera = camera + Engine3D.startRenderView(view) + + let postProcessing = this.scene.addComponent(PostProcessingComponent) + let DOFPost = postProcessing.addPost(DepthOfFieldPost) + DOFPost.near = 0 + DOFPost.far = 150 + DOFPost.pixelOffset = 2 + + let GUIHelp = new dat.GUI() + GUIHelp.addFolder('Depth of Field') + GUIHelp.add(DOFPost, 'near', 0, 100, 1) + GUIHelp.add(DOFPost, 'far', 150, 300, 1) + } + + async initScene(scene: Scene3D) { + /******** light *******/ + { + this.lightObj = new Object3D() + this.lightObj.rotationX = 15 + this.lightObj.rotationY = 110 + this.lightObj.rotationZ = 0 + let lc = this.lightObj.addComponent(DirectLight) + lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355) + lc.castShadow = true + lc.intensity = 10 + scene.addChild(this.lightObj) + } + + // load a test gltf model + let minimalObj = await Engine3D.res.loadGltf('https://cdn.orillusion.com/PBR/ToyCar/ToyCar.gltf') + minimalObj.scaleX = minimalObj.scaleY = minimalObj.scaleZ = 800 + scene.addChild(minimalObj) + + this.createPlane(scene) + return true + } + + private createPlane(scene: Scene3D) { + let mat = new LitMaterial() + { + let debugGeo = new PlaneGeometry(2000, 2000) + let obj: Object3D = new Object3D() + let mr = obj.addComponent(MeshRenderer) + mr.material = mat + mr.geometry = debugGeo + scene.addChild(obj) + } + + { + let sphereGeometry = new SphereGeometry(10, 50, 50) + let obj: Object3D = new Object3D() + let mr = obj.addComponent(MeshRenderer) + mr.material = mat + mr.geometry = sphereGeometry + obj.x = 30 + obj.y = 10 + scene.addChild(obj) + } + + { + let seeds = SSR_IS_Kernel.createSeeds() + let sphereGeometry = new SphereGeometry(2, 50, 50) + for (let i = 0; i < seeds.length; i++) { + let pt = seeds[i] + let obj: Object3D = new Object3D() + let mr = obj.addComponent(MeshRenderer) + mr.material = mat + mr.geometry = sphereGeometry + + obj.y = pt.z + obj.x = pt.x + obj.z = pt.y + scene.addChild(obj) + } + } + } +} + +new Sample_DepthOfView().run() diff --git a/samples/post/Sample_Outline.ts b/samples/post/Sample_Outline.ts new file mode 100644 index 00000000..bdae3751 --- /dev/null +++ b/samples/post/Sample_Outline.ts @@ -0,0 +1,116 @@ +import { DirectLight, Engine3D, View3D, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, PostProcessingComponent, CameraUtil, webGPUContext, OutlinePost, outlinePostManager, AtmosphericComponent, Color } from '@orillusion/core' +import * as dat from '@orillusion/debug/dat.gui.module' + +export class Sample_Outline { + lightObj: Object3D + scene: Scene3D + + constructor() {} + + async run() { + Engine3D.setting.shadow.enable = false + await Engine3D.init({ + canvasConfig: { + devicePixelRatio: 1 + } + }) + + this.scene = new Scene3D() + this.scene.addComponent(AtmosphericComponent).sunY = 0.6 + + let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera') + mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0) + let ctrl = mainCamera.object3D.addComponent(HoverCameraController) + ctrl.setCamera(180, -45, 15) + + await this.initScene(this.scene) + + let view = new View3D() + view.scene = this.scene + view.camera = mainCamera + Engine3D.startRenderView(view) + + let postProcessing = this.scene.addComponent(PostProcessingComponent) + let outlinePost = postProcessing.addPost(OutlinePost) + + // const GUIHelp = new dat.GUI() + // GUIHelp.addFolder('Outline') + // GUIHelp.add(outlinePost, 'outlinePixel', 0, 5) + // GUIHelp.add(outlinePost, 'fadeOutlinePixel', 0, 5) + // GUIHelp.add( + // { + // Change: () => { + // this.selectBall() + // } + // }, + // 'Change' + // ) + this.selectBall() + } + + private selectBall(): void { + outlinePostManager.setOutlineList([[this.nextSphere()], [this.nextSphere()], [this.nextSphere()]], [new Color(1, 0.2, 0, 1), new Color(0.2, 1, 0), new Color(0.2, 0, 1)]) + } + + async initScene(scene: Scene3D) { + /******** light *******/ + { + this.lightObj = new Object3D() + this.lightObj.x = 0 + this.lightObj.y = 30 + this.lightObj.z = -40 + this.lightObj.rotationX = 45 + this.lightObj.rotationY = 0 + this.lightObj.rotationZ = 45 + let lc = this.lightObj.addComponent(DirectLight) + lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355) + lc.intensity = 10 + scene.addChild(this.lightObj) + } + this.createPlane(scene) + + return true + } + + private sphereList: Object3D[] = [] + private sphereIndex = 0 + + private nextSphere(): Object3D { + this.sphereIndex++ + if (this.sphereIndex >= this.sphereList.length) { + this.sphereIndex = 1 + } + + return this.sphereList[this.sphereIndex] + } + + private createPlane(scene: Scene3D) { + let mat = new LitMaterial() + { + let debugGeo = new PlaneGeometry(1000, 1000) + let obj: Object3D = new Object3D() + let mr = obj.addComponent(MeshRenderer) + mr.material = mat + mr.geometry = debugGeo + scene.addChild(obj) + } + + let sphereGeometry = new SphereGeometry(1, 50, 50) + for (let i = 0; i < 10; i++) { + let obj: Object3D = new Object3D() + let mr = obj.addComponent(MeshRenderer) + mr.material = mat + mr.geometry = sphereGeometry + obj.x = 2 + obj.y = 2 + + let angle = (2 * Math.PI * i) / 10 + obj.x = Math.sin(angle) * 2 + obj.z = Math.cos(angle) * 2 + scene.addChild(obj) + this.sphereList.push(obj) + } + } +} + +new Sample_Outline().run() diff --git a/samples/post/Sample_SSR.ts b/samples/post/Sample_SSR.ts new file mode 100644 index 00000000..b4bf11f3 --- /dev/null +++ b/samples/post/Sample_SSR.ts @@ -0,0 +1,128 @@ +import { DirectLight, Engine3D, View3D, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, SSRPost, Time, CameraUtil, webGPUContext, PostProcessingComponent, BloomPost, AtmosphericComponent } from '@orillusion/core' +import * as dat from '@orillusion/debug/dat.gui.module' + +export class Sample_SSR { + lightObj: Object3D + scene: Scene3D + mats: any[] + + constructor() {} + + async run() { + Engine3D.setting.shadow.enable = true + await Engine3D.init({ + canvasConfig: { + devicePixelRatio: 1 + }, + renderLoop: () => this.loop() + }) + + this.scene = new Scene3D() + this.scene.addComponent(AtmosphericComponent).sunY = 0.6 + + let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera') + mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0) + let ctrl = mainCamera.object3D.addComponent(HoverCameraController) + ctrl.setCamera(180, -5, 60) + await this.initScene(this.scene) + + let view = new View3D() + view.scene = this.scene + view.camera = mainCamera + Engine3D.startRenderView(view) + + let postProcessing = this.scene.addComponent(PostProcessingComponent) + postProcessing.addPost(SSRPost) + postProcessing.addPost(BloomPost) + } + + async initScene(scene: Scene3D) { + /******** light *******/ + { + this.lightObj = new Object3D() + this.lightObj.rotationX = 15 + this.lightObj.rotationY = 110 + this.lightObj.rotationZ = 0 + let lc = this.lightObj.addComponent(DirectLight) + lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355) + lc.castShadow = true + lc.intensity = 27 + scene.addChild(this.lightObj) + } + + // load test model + let minimalObj = await Engine3D.res.loadGltf('https://cdn.orillusion.com/PBR/ToyCar/ToyCar.gltf') + minimalObj.scaleX = minimalObj.scaleY = minimalObj.scaleZ = 1000 + scene.addChild(minimalObj) + + await this.createPlane(scene) + return true + } + + private sphere: Object3D + + private async createPlane(scene: Scene3D) { + let mat = new LitMaterial() + mat.roughness = 0.2 + mat.metallic = 0.5 + + { + let floorMaterial = new LitMaterial() + floorMaterial.roughness = 0.5 + floorMaterial.metallic = 0.5 + + let planeGeometry = new PlaneGeometry(200, 200) + let floor: Object3D = new Object3D() + let mr = floor.addComponent(MeshRenderer) + mr.material = floorMaterial + mr.geometry = planeGeometry + scene.addChild(floor) + + const GUIHelp = new dat.GUI() + GUIHelp.add(floorMaterial, 'roughness', 0, 1, 0.01) + GUIHelp.add(floorMaterial, 'metallic', 0, 1, 0.01) + } + + { + let sphereGeometry = new SphereGeometry(10, 50, 50) + let obj: Object3D = new Object3D() + let mr = obj.addComponent(MeshRenderer) + mr.material = mat + mr.geometry = sphereGeometry + obj.x = 30 + obj.y = 10 + scene.addChild(obj) + this.sphere = obj + } + + { + let sphereGeometry = new SphereGeometry(2, 50, 50) + for (let i = 0; i < 10; i += 2) { + for (let j = 0; j < 10; j += 2) { + let rmMaterial = new LitMaterial() + rmMaterial.roughness = j / 10 + rmMaterial.metallic = i / 10 + + let obj: Object3D = new Object3D() + let mr = obj.addComponent(MeshRenderer) + mr.material = rmMaterial + mr.geometry = sphereGeometry + + obj.y = j * 5 + 10 + obj.x = 50 + obj.z = i * 5 - 25 + scene.addChild(obj) + } + } + } + } + + private loop(): void { + if (this.sphere) { + this.sphere.x = Math.sin(Time.time * 0.0001) * 30 + this.sphere.z = Math.cos(Time.time * 0.0001) * 30 + } + } +} + +new Sample_SSR().run() From d04f1d52d88310f54ad3339fff99358c76b5bce0 Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Mon, 6 Nov 2023 10:43:07 +0800 Subject: [PATCH 12/34] fix: fix post sample resize bug fix post sample resize bug --- .../graphic/Sample_GraphicMesh_Trailing.ts | 8 ++++- ...{Sample_Depth.ts => Sample_DepthOfView.ts} | 7 ++-- samples/post/Sample_Outline.ts | 9 +++-- samples/post/Sample_SSR.ts | 4 +-- samples/utils/GUIUtil.ts | 11 +++++- src/assets/shader/compute/DepthOfView_cs.ts | 6 ++-- src/gfx/renderJob/post/DepthOfFieldPost.ts | 34 ++++++++++++------- src/gfx/renderJob/post/SSRPost.ts | 32 +++++++++++++++++ 8 files changed, 85 insertions(+), 26 deletions(-) rename samples/post/{Sample_Depth.ts => Sample_DepthOfView.ts} (97%) diff --git a/samples/graphic/Sample_GraphicMesh_Trailing.ts b/samples/graphic/Sample_GraphicMesh_Trailing.ts index eac34b45..a8fb879f 100644 --- a/samples/graphic/Sample_GraphicMesh_Trailing.ts +++ b/samples/graphic/Sample_GraphicMesh_Trailing.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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT } from "@orillusion/core"; +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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost } from "@orillusion/core"; import { GUIUtil } from "@samples/utils/GUIUtil"; import { Stats } from "@orillusion/stats"; @@ -50,6 +50,12 @@ export class Sample_GraphicMesh_Trailing { GUIUtil.renderDebug(); let post = this.scene.addComponent(PostProcessingComponent); + let DOFPost = post.addPost(DepthOfFieldPost) + DOFPost.near = 0 + DOFPost.far = 150 + DOFPost.pixelOffset = 2 + GUIUtil.renderDepthOfField(DOFPost); + let bloom = post.addPost(BloomPost); bloom.bloomIntensity = 10.0 GUIUtil.renderBloom(bloom); diff --git a/samples/post/Sample_Depth.ts b/samples/post/Sample_DepthOfView.ts similarity index 97% rename from samples/post/Sample_Depth.ts rename to samples/post/Sample_DepthOfView.ts index 13711b15..47b18eef 100644 --- a/samples/post/Sample_Depth.ts +++ b/samples/post/Sample_DepthOfView.ts @@ -1,10 +1,10 @@ import { DepthOfFieldPost, DirectLight, Engine3D, PostProcessingComponent, View3D, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, SSR_IS_Kernel, CameraUtil, webGPUContext, AtmosphericComponent } from '@orillusion/core' import * as dat from '@orillusion/debug/dat.gui.module' -export class Sample_DepthOfView { +class Sample_DepthOfView { lightObj: Object3D scene: Scene3D - constructor() {} + constructor() { } async run() { Engine3D.setting.shadow.enable = true @@ -40,6 +40,9 @@ export class Sample_DepthOfView { GUIHelp.addFolder('Depth of Field') GUIHelp.add(DOFPost, 'near', 0, 100, 1) GUIHelp.add(DOFPost, 'far', 150, 300, 1) + + console.log("run"); + } async initScene(scene: Scene3D) { diff --git a/samples/post/Sample_Outline.ts b/samples/post/Sample_Outline.ts index bdae3751..e68075ac 100644 --- a/samples/post/Sample_Outline.ts +++ b/samples/post/Sample_Outline.ts @@ -1,11 +1,11 @@ -import { DirectLight, Engine3D, View3D, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, PostProcessingComponent, CameraUtil, webGPUContext, OutlinePost, outlinePostManager, AtmosphericComponent, Color } from '@orillusion/core' +import { DirectLight, Engine3D, View3D, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, PostProcessingComponent, CameraUtil, webGPUContext, OutlinePost, outlinePostManager, AtmosphericComponent, Color, FXAAPost } from '@orillusion/core' import * as dat from '@orillusion/debug/dat.gui.module' -export class Sample_Outline { +class Sample_Outline { lightObj: Object3D scene: Scene3D - constructor() {} + constructor() { } async run() { Engine3D.setting.shadow.enable = false @@ -31,6 +31,7 @@ export class Sample_Outline { Engine3D.startRenderView(view) let postProcessing = this.scene.addComponent(PostProcessingComponent) + // let outlinePost = postProcessing.addPost(FXAAPost) let outlinePost = postProcessing.addPost(OutlinePost) // const GUIHelp = new dat.GUI() @@ -86,6 +87,8 @@ export class Sample_Outline { private createPlane(scene: Scene3D) { let mat = new LitMaterial() + mat.roughness = 0.5; + mat.metallic = 0.5; { let debugGeo = new PlaneGeometry(1000, 1000) let obj: Object3D = new Object3D() diff --git a/samples/post/Sample_SSR.ts b/samples/post/Sample_SSR.ts index b4bf11f3..0efa5cbd 100644 --- a/samples/post/Sample_SSR.ts +++ b/samples/post/Sample_SSR.ts @@ -1,12 +1,12 @@ import { DirectLight, Engine3D, View3D, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, SSRPost, Time, CameraUtil, webGPUContext, PostProcessingComponent, BloomPost, AtmosphericComponent } from '@orillusion/core' import * as dat from '@orillusion/debug/dat.gui.module' -export class Sample_SSR { +class Sample_SSR { lightObj: Object3D scene: Scene3D mats: any[] - constructor() {} + constructor() { } async run() { Engine3D.setting.shadow.enable = true diff --git a/samples/utils/GUIUtil.ts b/samples/utils/GUIUtil.ts index 64afaa3d..5d7fa0ac 100644 --- a/samples/utils/GUIUtil.ts +++ b/samples/utils/GUIUtil.ts @@ -1,10 +1,11 @@ import { GUIHelp } from "@orillusion/debug/GUIHelp"; -import { AnimatorComponent, AtmosphericComponent, BillboardType, BlendMode, BloomPost, Color, DirectLight, Engine3D, GPUCullMode, GTAOPost, GlobalFog, GlobalIlluminationComponent, LitMaterial, Material, MorphTargetBlender, Object3D, PointLight, SkinnedMeshRenderer2, SpotLight, Transform, UIImage, UIPanel, UIShadow, View3D } from "@orillusion/core"; +import { AnimatorComponent, AtmosphericComponent, BillboardType, BlendMode, BloomPost, Color, DepthOfFieldPost, DirectLight, Engine3D, GPUCullMode, GTAOPost, GlobalFog, GlobalIlluminationComponent, LitMaterial, Material, MorphTargetBlender, Object3D, PointLight, SkinnedMeshRenderer2, SpotLight, Transform, UIImage, UIPanel, UIShadow, View3D } from "@orillusion/core"; import { UVMoveComponent } from "@samples/material/script/UVMoveComponent"; export class GUIUtil { + public static renderShadowSetting(open: boolean = true) { GUIHelp.addFolder('ShadowSetting'); let setting = Engine3D.setting.shadow; @@ -536,4 +537,12 @@ export class GUIUtil { GUIHelp.add(post, "multiBounce"); GUIHelp.endFolder(); } + + static renderDepthOfField(post: DepthOfFieldPost) { + GUIHelp.addFolder("DOFPost"); + GUIHelp.add(post, 'near', 0, 100, 1) + GUIHelp.add(post, 'far', 150, 300, 1) + GUIHelp.add(post, 'pixelOffset', 0.0, 15, 1) + GUIHelp.endFolder(); + } } \ No newline at end of file diff --git a/src/assets/shader/compute/DepthOfView_cs.ts b/src/assets/shader/compute/DepthOfView_cs.ts index 1b8dc97e..f3b9c499 100644 --- a/src/assets/shader/compute/DepthOfView_cs.ts +++ b/src/assets/shader/compute/DepthOfView_cs.ts @@ -6,10 +6,8 @@ export let DepthOfView_cs: string = /*wgsl*/ ` far: f32, pixelOffset: f32, } - - @group(0) @binding(0) var standUniform: GlobalUniform; + @group(0) @binding(1) var blurSetting: BlurSetting; - @group(0) @binding(2) var positionBufferTex : texture_2d; @group(0) @binding(3) var normalBufferTex : texture_2d; @group(0) @binding(4) var inTexSampler : sampler; @@ -30,7 +28,7 @@ export let DepthOfView_cs: string = /*wgsl*/ ` if(fragCoord.x >= i32(texSize.x) || fragCoord.y >= i32(texSize.y)){ return; } - cameraPosition = vec3(standUniform.cameraWorldMatrix[3].xyz); + cameraPosition = globalUniform.CameraPos.xyz ; let wPosition:vec3 = textureLoad(positionBufferTex, fragCoord , 0).xyz; var distance = length(wPosition - cameraPosition); var oc:vec4 = textureLoad(inTex, fragCoord, 0); diff --git a/src/gfx/renderJob/post/DepthOfFieldPost.ts b/src/gfx/renderJob/post/DepthOfFieldPost.ts index fc92a435..67dc413b 100644 --- a/src/gfx/renderJob/post/DepthOfFieldPost.ts +++ b/src/gfx/renderJob/post/DepthOfFieldPost.ts @@ -78,10 +78,6 @@ export class DepthOfFieldPost extends PostBase { Engine3D.setting.render.postProcessing.depthOfView.enable = false; } - private createGUI() { - - } - public get pixelOffset() { let setting = Engine3D.setting.render.postProcessing.depthOfView; return setting.pixelOffset; @@ -129,8 +125,8 @@ export class DepthOfFieldPost extends PostBase { blurCompute.setUniformBuffer('blurSetting', blurSetting); let rtFrame = GBufferFrame.getGBufferFrame("ColorPassGBuffer"); - blurCompute.setSamplerTexture(RTResourceConfig.positionBufferTex_NAME, rtFrame.renderTargets[1]); - blurCompute.setSamplerTexture(RTResourceConfig.normalBufferTex_NAME, rtFrame.renderTargets[2]); + blurCompute.setSamplerTexture(RTResourceConfig.positionBufferTex_NAME, rtFrame.getPositionMap()); + blurCompute.setSamplerTexture(RTResourceConfig.normalBufferTex_NAME, rtFrame.getNormalMap()); let input = i % 2 == 0 ? this.blurTexture1 : this.blurTexture2; let output = i % 2 == 1 ? this.blurTexture1 : this.blurTexture2; @@ -177,21 +173,17 @@ export class DepthOfFieldPost extends PostBase { if (!this.blurComputes) { this.createResource(); this.createBlurCompute(); - this.createGUI(); - let standUniform = GlobalBindGroup.getCameraGroup(view.camera); for (let i = 0; i < this.blurComputes.length; i++) { const blurCompute = this.blurComputes[i]; - blurCompute.setUniformBuffer('standUniform', standUniform.uniformGPUBuffer); + blurCompute.setUniformBuffer('globalUniform', standUniform.uniformGPUBuffer); } this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(this.rtFrame, null); } - this.autoSetColorTexture('inTex', this.blurComputes[0]); let cfg = Engine3D.setting.render.postProcessing.depthOfView; cfg.far = Math.max(cfg.near, cfg.far) + 0.0001; - for (let i = 0; i < cfg.iterationCount; i++) { let blurCompute = this.blurComputes[i]; let blurSetting = this.blurSettings[i]; @@ -201,9 +193,25 @@ export class DepthOfFieldPost extends PostBase { blurSetting.apply(); blurCompute.setStorageBuffer('blurSetting', blurSetting); } - GPUContext.computeCommand(command, this.blurComputes); - GPUContext.lastRenderPassState = this.rendererPassState; } + + public onResize(): void { + let presentationSize = webGPUContext.presentationSize; + let w = presentationSize[0]; + let h = presentationSize[1]; + let cfg = Engine3D.setting.render.postProcessing.depthOfView; + cfg.far = Math.max(cfg.near, cfg.far) + 0.0001; + + this.blurTexture1.resize(w, h); + this.blurTexture2.resize(w, h); + + for (let i = 0; i < cfg.iterationCount; i++) { + let compute = this.blurComputes[i]; + compute.workerSizeX = Math.ceil(this.blurTexture1.width / 8); + compute.workerSizeY = Math.ceil(this.blurTexture1.height / 8); + compute.workerSizeZ = 1; + } + } } diff --git a/src/gfx/renderJob/post/SSRPost.ts b/src/gfx/renderJob/post/SSRPost.ts index 2746ccdb..e3e77256 100644 --- a/src/gfx/renderJob/post/SSRPost.ts +++ b/src/gfx/renderJob/post/SSRPost.ts @@ -289,6 +289,38 @@ export class SSRPost extends PostBase { GPUContext.computeCommand(command, computes); GPUContext.lastRenderPassState = this.rendererPassState; } + + public onResize(): void { + let presentationSize = webGPUContext.presentationSize; + let w = presentationSize[0]; + let h = presentationSize[1]; + let ssrWidth = Math.ceil(w * Engine3D.setting.render.postProcessing.ssr.pixelRatio); + let ssrHeight = Math.ceil(h * Engine3D.setting.render.postProcessing.ssr.pixelRatio); + + this.finalTexture.resize(w, h); + this.isRetTexture.resize(ssrWidth, ssrHeight); + + this.rayTraceData.resizeBuffer(ssrWidth * ssrHeight * 8); + this.ssrColorData.resizeBuffer(ssrWidth * ssrHeight * 4); + this.historyPosition.resizeBuffer(ssrWidth * ssrHeight * 4); + + this.ssrUniformBuffer.setFloat('ssrBufferSizeX', this.isRetTexture.width); + this.ssrUniformBuffer.setFloat('ssrBufferSizeY', this.isRetTexture.height); + this.ssrUniformBuffer.setFloat('colorMapSizeX', this.finalTexture.width); + this.ssrUniformBuffer.setFloat('colorMapSizeY', this.finalTexture.height); + + this.SSR_RayTraceCompute.workerSizeX = Math.ceil(this.isRetTexture.width / 8); + this.SSR_RayTraceCompute.workerSizeY = Math.ceil(this.isRetTexture.height / 8); + this.SSR_RayTraceCompute.workerSizeZ = 1; + + this.SSR_IS_Compute.workerSizeX = Math.ceil(this.isRetTexture.width / 8); + this.SSR_IS_Compute.workerSizeY = Math.ceil(this.isRetTexture.height / 8); + this.SSR_IS_Compute.workerSizeZ = 1; + + this.SSR_Blend_Compute.workerSizeX = Math.ceil(this.finalTexture.width / 8); + this.SSR_Blend_Compute.workerSizeY = Math.ceil(this.finalTexture.height / 8); + this.SSR_Blend_Compute.workerSizeZ = 1; + } } /** From 080ba1b746fdd9d004547c4dde9d7ec86cea675e Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Mon, 6 Nov 2023 15:44:59 +0800 Subject: [PATCH 13/34] change model url --- samples/post/Sample_DepthOfView.ts | 2 +- samples/post/Sample_Outline.ts | 24 ++++++++++++------------ samples/post/Sample_SSR.ts | 2 +- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/samples/post/Sample_DepthOfView.ts b/samples/post/Sample_DepthOfView.ts index 47b18eef..d68e072c 100644 --- a/samples/post/Sample_DepthOfView.ts +++ b/samples/post/Sample_DepthOfView.ts @@ -60,7 +60,7 @@ class Sample_DepthOfView { } // load a test gltf model - let minimalObj = await Engine3D.res.loadGltf('https://cdn.orillusion.com/PBR/ToyCar/ToyCar.gltf') + let minimalObj = await Engine3D.res.loadGltf('/PBR/ToyCar/ToyCar.gltf') minimalObj.scaleX = minimalObj.scaleY = minimalObj.scaleZ = 800 scene.addChild(minimalObj) diff --git a/samples/post/Sample_Outline.ts b/samples/post/Sample_Outline.ts index e68075ac..78917c56 100644 --- a/samples/post/Sample_Outline.ts +++ b/samples/post/Sample_Outline.ts @@ -34,18 +34,18 @@ class Sample_Outline { // let outlinePost = postProcessing.addPost(FXAAPost) let outlinePost = postProcessing.addPost(OutlinePost) - // const GUIHelp = new dat.GUI() - // GUIHelp.addFolder('Outline') - // GUIHelp.add(outlinePost, 'outlinePixel', 0, 5) - // GUIHelp.add(outlinePost, 'fadeOutlinePixel', 0, 5) - // GUIHelp.add( - // { - // Change: () => { - // this.selectBall() - // } - // }, - // 'Change' - // ) + const GUIHelp = new dat.GUI() + GUIHelp.addFolder('Outline') + GUIHelp.add(outlinePost, 'outlinePixel', 0, 5) + GUIHelp.add(outlinePost, 'fadeOutlinePixel', 0, 5) + GUIHelp.add( + { + Change: () => { + this.selectBall() + } + }, + 'Change' + ) this.selectBall() } diff --git a/samples/post/Sample_SSR.ts b/samples/post/Sample_SSR.ts index 0efa5cbd..0d08b9e7 100644 --- a/samples/post/Sample_SSR.ts +++ b/samples/post/Sample_SSR.ts @@ -51,7 +51,7 @@ class Sample_SSR { } // load test model - let minimalObj = await Engine3D.res.loadGltf('https://cdn.orillusion.com/PBR/ToyCar/ToyCar.gltf') + let minimalObj = await Engine3D.res.loadGltf('/PBR/ToyCar/ToyCar.gltf') minimalObj.scaleX = minimalObj.scaleY = minimalObj.scaleZ = 1000 scene.addChild(minimalObj) From fee3cc8fdc0dc83352e1260b814e9aaac735424a Mon Sep 17 00:00:00 2001 From: hellmor Date: Mon, 6 Nov 2023 21:25:33 +0800 Subject: [PATCH 14/34] feat: Fix csm shadow. Fix csm shadow. --- src/assets/shader/core/common/GlobalUniform.ts | 3 ++- .../graphics/webGpu/core/bindGroups/GlobalUniformGroup.ts | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/assets/shader/core/common/GlobalUniform.ts b/src/assets/shader/core/common/GlobalUniform.ts index 89750c83..825ebdf8 100644 --- a/src/assets/shader/core/common/GlobalUniform.ts +++ b/src/assets/shader/core/common/GlobalUniform.ts @@ -10,6 +10,8 @@ export let GlobalUniform: string = /*wgsl*/ ` shadowMatrix: array, 8u>, csmShadowBias: vec4, csmMatrix: array,${CSM.Cascades}>, + + shadowLights:mat4x4, CameraPos: vec3, frame: f32, @@ -49,7 +51,6 @@ export let GlobalUniform: string = /*wgsl*/ ` empty2: i32, empty3: i32, - shadowLights:mat4x4 }; @group(0) @binding(0) diff --git a/src/gfx/graphics/webGpu/core/bindGroups/GlobalUniformGroup.ts b/src/gfx/graphics/webGpu/core/bindGroups/GlobalUniformGroup.ts index 34b5d342..9904236a 100644 --- a/src/gfx/graphics/webGpu/core/bindGroups/GlobalUniformGroup.ts +++ b/src/gfx/graphics/webGpu/core/bindGroups/GlobalUniformGroup.ts @@ -111,6 +111,8 @@ export class GlobalUniformGroup { } this.uniformGPUBuffer.setFloat32Array(`csmShadowBias`, this.csmShadowBias); this.uniformGPUBuffer.setFloat32Array(`csmMatrix`, this.csmMatrixRaw); + this.uniformGPUBuffer.setFloat32Array(`shadowLights`, this.shadowLights); + this.uniformGPUBuffer.setVector3(`CameraPos`, camera.transform.worldPosition); this.uniformGPUBuffer.setFloat(`frame`, Time.frame); this.uniformGPUBuffer.setFloat(`time`, Time.frame); @@ -141,7 +143,6 @@ export class GlobalUniformGroup { this.uniformGPUBuffer.setInt32(`nDirShadowEnd`, this.dirShadowEnd); this.uniformGPUBuffer.setInt32(`nPointShadowStart`, this.pointShadowStart); this.uniformGPUBuffer.setInt32(`nPointShadowEnd`, this.pointShadowEnd); - this.uniformGPUBuffer.setFloat32Array(`shadowLights`, this.shadowLights); this.uniformGPUBuffer.apply(); } @@ -157,6 +158,8 @@ export class GlobalUniformGroup { this.uniformGPUBuffer.setFloat32Array(`shadowCamera`, this.shadowMatrixRaw); this.uniformGPUBuffer.setFloat32Array(`csmShadowBias`, this.csmShadowBias); this.uniformGPUBuffer.setFloat32Array(`csmMatrix`, this.csmMatrixRaw); + this.uniformGPUBuffer.setFloat32Array(`shadowLights`, this.shadowLights); + this.uniformGPUBuffer.setVector3(`CameraPos`, camera.transform.worldPosition); this.uniformGPUBuffer.setFloat(`frame`, Time.frame); @@ -191,7 +194,6 @@ export class GlobalUniformGroup { this.uniformGPUBuffer.setInt32(`nDirShadowEnd`, this.dirShadowEnd); this.uniformGPUBuffer.setInt32(`nPointShadowStart`, this.pointShadowStart); this.uniformGPUBuffer.setInt32(`nPointShadowEnd`, this.pointShadowEnd); - this.uniformGPUBuffer.setFloat32Array(`shadowLights`, this.shadowLights); this.uniformGPUBuffer.apply(); } From 8c9b1c8ae8a8b6e02314aebd672b35f3c148b942 Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Tue, 7 Nov 2023 09:37:33 +0800 Subject: [PATCH 15/34] chore: add sample add sample --- .../graphic/Sample_GraphicMesh_Trailing.ts | 37 ++-- .../graphic/Sample_GraphicMesh_Trailing2.ts | 161 ++++++++++++++++++ 2 files changed, 183 insertions(+), 15 deletions(-) create mode 100644 samples/graphic/Sample_GraphicMesh_Trailing2.ts diff --git a/samples/graphic/Sample_GraphicMesh_Trailing.ts b/samples/graphic/Sample_GraphicMesh_Trailing.ts index a8fb879f..ef0df4cb 100644 --- a/samples/graphic/Sample_GraphicMesh_Trailing.ts +++ b/samples/graphic/Sample_GraphicMesh_Trailing.ts @@ -50,11 +50,11 @@ export class Sample_GraphicMesh_Trailing { GUIUtil.renderDebug(); let post = this.scene.addComponent(PostProcessingComponent); - let DOFPost = post.addPost(DepthOfFieldPost) - DOFPost.near = 0 - DOFPost.far = 150 - DOFPost.pixelOffset = 2 - GUIUtil.renderDepthOfField(DOFPost); + // let DOFPost = post.addPost(DepthOfFieldPost) + // DOFPost.near = 0 + // DOFPost.far = 150 + // DOFPost.pixelOffset = 2 + // GUIUtil.renderDepthOfField(DOFPost); let bloom = post.addPost(BloomPost); bloom.bloomIntensity = 10.0 @@ -100,14 +100,14 @@ export class Sample_GraphicMesh_Trailing { GUIHelp.add(this, "cafe", 0.0, 100.0); GUIHelp.add(this, "frame", 0.0, 100.0); { - this.width = 10; - this.height = 100; - let mr = Graphic3DMesh.drawTrail("trail", this.scene, bitmapTexture2DArray, 50, this.width * this.height); + this.width = 20; + this.height = 20; + let mr = Graphic3DMesh.drawTrail("trail", this.scene, bitmapTexture2DArray, 127, this.width * this.height); this.parts = mr.object3Ds; this.trail3ds = mr.trail3Ds; mr.material.blendMode = BlendMode.ADD; - mr.material.transparent = true; + // mr.material.transparent = true; mr.material.doubleSide = true; mr.material.depthWriteEnabled = false; // mr.material.useBillboard = true; @@ -139,25 +139,32 @@ export class Sample_GraphicMesh_Trailing { let curveX = new AnimationCurve(); let lenX = Math.floor(Math.random() * 10) + 1; for (let pi = 0; pi < lenX; pi++) { - curveX.addKeyFrame(new Keyframe(pi / (lenX - 1), Math.random() * 1)); + curveX.addKeyFrame(new Keyframe(pi / (lenX - 1), Math.random() * 2 - 1)); + } + + let curveY = new AnimationCurve(); + let lenY = Math.floor(Math.random() * 10) + 1; + for (let pi = 0; pi < lenY; pi++) { + curveY.addKeyFrame(new Keyframe(pi / (lenY - 1), Math.random() * 2 - 1)); } let curveZ = new AnimationCurve(); let lenZ = Math.floor(Math.random() * 10) + 1; for (let pi = 0; pi < lenZ; pi++) { - curveZ.addKeyFrame(new Keyframe(pi / (lenZ - 1), Math.random() * 1)); + curveZ.addKeyFrame(new Keyframe(pi / (lenZ - 1), Math.random() * 2 - 1)); } for (let i = 0; i < this.trail3ds.length; i++) { const trail3d = this.trail3ds[i]; - let dir = new Vector3(Math.random() - 0.5, Math.random(), Math.random() - 0.5); + let dir = new Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1); for (let j = 0; j < trail3d.length; j++) { let p = j / (trail3d.length - 1); let vx = curveX.getValue(p); + let vy = curveY.getValue(p); let vz = curveZ.getValue(p); - trail3d[j].x = vx * dir.x * 500; - trail3d[j].y = j * dir.y * 2 - 10; - trail3d[j].z = vz * dir.z * 500; + trail3d[j].x = vx * dir.x * 100; + trail3d[j].y = vy * dir.y * 100; + trail3d[j].z = vz * dir.z * 100; } } } diff --git a/samples/graphic/Sample_GraphicMesh_Trailing2.ts b/samples/graphic/Sample_GraphicMesh_Trailing2.ts new file mode 100644 index 00000000..fda545b0 --- /dev/null +++ b/samples/graphic/Sample_GraphicMesh_Trailing2.ts @@ -0,0 +1,161 @@ +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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion } from "@orillusion/core"; +import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Stats } from "@orillusion/stats"; + +export class Sample_GraphicMesh_Trailing2 { + lightObj3D: Object3D; + scene: Scene3D; + parts: Object3D[]; + width: number; + height: number; + cafe: number = 47; + frame: number = 16; + view: View3D; + + colors: Color[]; + trail3ds: Object3D[][]; + + constructor() { } + + async run() { + + Matrix4.maxCount = 500000; + Matrix4.allocCount = 500000; + + await Engine3D.init({ beforeRender: () => this.update() }); + + Engine3D.setting.render.debug = true; + Engine3D.setting.shadow.shadowBound = 5; + + this.colors = []; + + GUIHelp.init(); + + this.scene = new Scene3D(); + this.scene.addComponent(Stats); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.enable = false; + let camera = CameraUtil.createCamera3DObject(this.scene); + camera.perspective(60, Engine3D.aspect, 1, 5000.0); + + camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); + + this.view = new View3D(); + this.view.scene = this.scene; + this.view.camera = camera; + + Engine3D.startRenderView(this.view); + + GUIUtil.renderDebug(); + + let post = this.scene.addComponent(PostProcessingComponent); + // let DOFPost = post.addPost(DepthOfFieldPost) + // DOFPost.near = 0 + // DOFPost.far = 150 + // DOFPost.pixelOffset = 2 + // GUIUtil.renderDepthOfField(DOFPost); + + let bloom = post.addPost(BloomPost); + bloom.bloomIntensity = 10.0 + GUIUtil.renderBloom(bloom); + + await this.initScene(); + + // sky.relativeTransform = this.lightObj3D.transform; + } + + async initScene() { + /******** light *******/ + { + this.lightObj3D = new Object3D(); + this.lightObj3D.rotationX = 21; + this.lightObj3D.rotationY = 108; + this.lightObj3D.rotationZ = 10; + let directLight = this.lightObj3D.addComponent(DirectLight); + directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + directLight.castShadow = false; + directLight.intensity = 10; + GUIUtil.renderDirLight(directLight); + this.scene.addChild(this.lightObj3D); + } + + let texts = []; + + // texts.push(await Engine3D.res.loadTexture("particle/fx_a_fragment_003.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/grid.jpg") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/frame.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); + + let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); + bitmapTexture2DArray.setTextures(texts); + + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = bitmapTexture2DArray; + mat.name = "LitMaterial"; + + GUIHelp.add(this, "cafe", 0.0, 100.0); + GUIHelp.add(this, "frame", 0.0, 100.0); + { + this.width = 10; + this.height = 10; + let mr = Graphic3DMesh.drawTrail("trail", this.scene, bitmapTexture2DArray, 127, this.width * this.height); + this.parts = mr.object3Ds; + this.trail3ds = mr.trail3Ds; + + mr.material.blendMode = BlendMode.ADD; + // mr.material.transparent = true; + mr.material.doubleSide = true; + mr.material.depthWriteEnabled = false; + // mr.material.useBillboard = true; + + for (let i = 0; i < this.width * this.height; i++) { + mr.setTextureID(i, Math.floor(Math.random() * texts.length)); + // mr.setTextureID(i, 0); + } + + let c1 = new Color(0.65, 0.1, 0.2, 0.15); + let c2 = new Color(1.0, 1.1, 0.2, 0.65); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + } + + this.updateOnce(1000); + } + + private tmpArray: any[] = []; + update() { + } + + updateOnce(engineFrame: number) { + if (this.trail3ds && this.trail3ds.length > 0) { + for (let i = 0; i < this.trail3ds.length; i++) { + const trail3d = this.trail3ds[i]; + let dir = new Vector3(0, 1, 0); + let lx = 10 * Math.random() + 10; + let ly = 0.1 * Math.random() + 0.1; + let lz = 10 * Math.random() + 10; + let oy = 1 * Math.random() + 1; + for (let j = 0; j < trail3d.length; j++) { + let p = j / (trail3d.length - 1); + + let q = Quaternion.HELP_0; + q.fromEulerAngles(0, p * 360 * 4, 0); + q.transformVector(Vector3.RIGHT, dir); + + trail3d[j].x = dir.x * lx * p; + trail3d[j].y = j * ly + oy; + trail3d[j].z = dir.z * lz * p; + } + } + } + } + +} From 9a492ff3413529a311b7ac9884ad051d5aac3894 Mon Sep 17 00:00:00 2001 From: hellmor Date: Tue, 7 Nov 2023 21:13:32 +0800 Subject: [PATCH 16/34] fix: Cancel automatic resizing of rendertexture in GI Cancel automatic resizing of rendertexture in GI --- src/gfx/renderJob/frame/ProbeGBufferFrame.ts | 14 ++++----- .../passRenderer/ddgi/DDGIProbeRenderer.ts | 2 +- src/textures/RenderTexture.ts | 29 +++++++++++++------ 3 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/gfx/renderJob/frame/ProbeGBufferFrame.ts b/src/gfx/renderJob/frame/ProbeGBufferFrame.ts index d84cf0e0..50f122cc 100644 --- a/src/gfx/renderJob/frame/ProbeGBufferFrame.ts +++ b/src/gfx/renderJob/frame/ProbeGBufferFrame.ts @@ -5,30 +5,30 @@ import { RTFrame } from "./RTFrame"; export class ProbeGBufferFrame extends RTFrame { - constructor(rtWidth: number, rtHeight: number) { + constructor(rtWidth: number, rtHeight: number, autoResize: boolean = true) { super([], []); - this.crateGBuffer(rtWidth, rtHeight); + this.crateGBuffer(rtWidth, rtHeight, autoResize); } - crateGBuffer(rtWidth: number, rtHeight: number) { + crateGBuffer(rtWidth: number, rtHeight: number, autoResize: boolean) { let attachments = this.renderTargets; let rtDescriptors = this.rtDescriptors; - let positionMap = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false); + let positionMap = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false, undefined, 1, 0, true, autoResize); positionMap.name = `positionMap`; let posDec = new RTDescriptor(); posDec.loadOp = `load`; - let normalMap = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false); + let normalMap = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false, undefined, 1, 0, true, autoResize); normalMap.name = `normalMap`; let normalDec = new RTDescriptor(); normalDec.loadOp = `load`; - let colorMap = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false); + let colorMap = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba16float, false, undefined, 1, 0, true, autoResize); colorMap.name = `colorMap`; let colorDec = new RTDescriptor(); colorDec.loadOp = `load`; - let depthTexture = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.depth24plus, false); + let depthTexture = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.depth24plus, false, undefined, 1, 0, true, autoResize); depthTexture.name = `depthTexture`; let depthDec = new RTDescriptor(); depthDec.loadOp = `load`; diff --git a/src/gfx/renderJob/passRenderer/ddgi/DDGIProbeRenderer.ts b/src/gfx/renderJob/passRenderer/ddgi/DDGIProbeRenderer.ts index 00d4a4b9..7dae7b77 100644 --- a/src/gfx/renderJob/passRenderer/ddgi/DDGIProbeRenderer.ts +++ b/src/gfx/renderJob/passRenderer/ddgi/DDGIProbeRenderer.ts @@ -78,7 +78,7 @@ export class DDGIProbeRenderer extends RendererBase { this.probeRenderResult = new ProbeRenderResult(); - let probeGBufferFrame = new ProbeGBufferFrame(this.sizeW, this.sizeH); + let probeGBufferFrame = new ProbeGBufferFrame(this.sizeW, this.sizeH, false); this.positionMap = probeGBufferFrame.renderTargets[0]; this.normalMap = probeGBufferFrame.renderTargets[1]; this.colorMap = probeGBufferFrame.renderTargets[2]; diff --git a/src/textures/RenderTexture.ts b/src/textures/RenderTexture.ts index dcc028dc..cffd8cb8 100644 --- a/src/textures/RenderTexture.ts +++ b/src/textures/RenderTexture.ts @@ -12,8 +12,10 @@ import { CResizeEvent } from '..'; */ export class RenderTexture extends Texture { public resolveTarget: GPUTextureView; - sampleCount: number; + sampleCount: number; + autoResize: boolean; + clear: boolean; /** * create virtual texture * @param width width of texture @@ -22,15 +24,21 @@ export class RenderTexture extends Texture { * @param useMipmap whether or not gen mipmap * @returns */ - constructor(width: number, height: number, format: GPUTextureFormat = GPUTextureFormat.rgba8unorm, useMipMap: boolean = false, usage?: GPUFlagsConstant, numberLayer: number = 1, sampleCount: number = 0, clear: boolean = true) { + constructor(width: number, height: number, + format: GPUTextureFormat = GPUTextureFormat.rgba8unorm, + useMipMap: boolean = false, usage?: GPUFlagsConstant, + numberLayer: number = 1, sampleCount: number = 0, + clear: boolean = true, autoResize: boolean = true) { + super(width, height, numberLayer); - let device = webGPUContext.device; this.name = UUID(); + this.autoResize = autoResize; this.useMipmap = useMipMap; this.sampleCount = sampleCount; this.format = format; this.numberLayer = numberLayer; + this.clear = clear; if (usage != undefined) { this.usage = usage; @@ -40,11 +48,14 @@ export class RenderTexture extends Texture { this.resize(width, height); - webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { - let { width, height } = e.data; - this.resize(width, height); - this._textureChange = true; - }, this); + if (autoResize) { + webGPUContext.addEventListener(CResizeEvent.RESIZE, (e) => { + let { width, height } = e.data; + this.resize(width, height); + this._textureChange = true; + }, this); + } + } public resize(width, height) { @@ -151,7 +162,7 @@ export class RenderTexture extends Texture { } public clone() { - let texture = new RenderTexture(this.width, this.height, this.format, this.useMipmap, this.usage, this.numberLayer, this.sampleCount); + let texture = new RenderTexture(this.width, this.height, this.format, this.useMipmap, this.usage, this.numberLayer, this.sampleCount, this.clear, this.autoResize); texture.name = "clone_" + texture.name; return texture; } From 3d6c4fee69336366f6308943ad560889bca37e9e Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Wed, 8 Nov 2023 20:05:34 +0800 Subject: [PATCH 17/34] feat: add graphic ribbon add graphic ribbon --- samples/graphic/Sample_GraphicPath.ts | 159 ++++++++++++++ ..._Trailing.ts => Sample_GraphicTrailing.ts} | 4 +- ...railing2.ts => Sample_GraphicTrailing2.ts} | 4 +- samples/graphic/Sample_GraphicTrailing3.ts | 161 ++++++++++++++ samples/index.ts | 140 +++++++------ .../shader/graphic/GraphicTrailCompute.ts | 198 +++++++++++------- .../shader/graphic/GraphicTrailComputeOld.ts | 84 ++++++++ .../shader/graphic/GraphicTrailComputeOld2.ts | 116 ++++++++++ src/assets/shader/lighting/BxDF_frag.ts | 4 + .../webGpu/core/buffer/GPUBufferBase.ts | 3 + .../passRenderer/graphic/new/Graphic3DMesh.ts | 11 +- ...Renderer.ts => Graphic3DRibbonRenderer.ts} | 99 +++++---- .../graphic/new/Graphic3DRibbonRenderer2.ts | 168 +++++++++++++++ src/index.ts | 5 +- src/util/struct/Struct.ts | 4 +- 15 files changed, 965 insertions(+), 195 deletions(-) create mode 100644 samples/graphic/Sample_GraphicPath.ts rename samples/graphic/{Sample_GraphicMesh_Trailing.ts => Sample_GraphicTrailing.ts} (97%) rename samples/graphic/{Sample_GraphicMesh_Trailing2.ts => Sample_GraphicTrailing2.ts} (97%) create mode 100644 samples/graphic/Sample_GraphicTrailing3.ts create mode 100644 src/assets/shader/graphic/GraphicTrailComputeOld.ts create mode 100644 src/assets/shader/graphic/GraphicTrailComputeOld2.ts rename src/gfx/renderJob/passRenderer/graphic/new/{Graphic3DTrailRenderer.ts => Graphic3DRibbonRenderer.ts} (65%) create mode 100644 src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts diff --git a/samples/graphic/Sample_GraphicPath.ts b/samples/graphic/Sample_GraphicPath.ts new file mode 100644 index 00000000..4c27ff21 --- /dev/null +++ b/samples/graphic/Sample_GraphicPath.ts @@ -0,0 +1,159 @@ +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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion, PingPong, Object3DUtil, GPUPrimitiveTopology } from "@orillusion/core"; +import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Stats } from "@orillusion/stats"; + +export class Sample_GraphicPath { + lightObj3D: Object3D; + scene: Scene3D; + parts: Object3D[]; + width: number; + height: number; + cafe: number = 47; + frame: number = 16; + view: View3D; + + colors: Color[]; + trail3ds: Object3D[][]; + + constructor() { } + + async run() { + + Matrix4.maxCount = 300000; + Matrix4.allocCount = 300000; + + await Engine3D.init({ beforeRender: () => this.update() }); + + Engine3D.setting.render.debug = true; + Engine3D.setting.shadow.shadowBound = 5; + + this.colors = []; + + GUIHelp.init(); + + this.scene = new Scene3D(); + this.scene.addComponent(Stats); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.enable = false; + let camera = CameraUtil.createCamera3DObject(this.scene); + camera.perspective(60, Engine3D.aspect, 1, 5000.0); + + camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); + + this.view = new View3D(); + this.view.scene = this.scene; + this.view.camera = camera; + + Engine3D.startRenderView(this.view); + + GUIUtil.renderDebug(); + + // let post = this.scene.addComponent(PostProcessingComponent); + // let bloom = post.addPost(BloomPost); + // bloom.bloomIntensity = 1.0 + // GUIUtil.renderBloom(bloom); + + await this.initScene(); + + sky.relativeTransform = this.lightObj3D.transform; + } + + async initScene() { + /******** light *******/ + { + this.lightObj3D = new Object3D(); + this.lightObj3D.rotationX = 21; + this.lightObj3D.rotationY = 108; + this.lightObj3D.rotationZ = 10; + let directLight = this.lightObj3D.addComponent(DirectLight); + directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + directLight.castShadow = false; + directLight.intensity = 10; + GUIUtil.renderDirLight(directLight); + this.scene.addChild(this.lightObj3D); + } + + + let texts = []; + // texts.push(await Engine3D.res.loadTexture("particle/fx_a_fragment_003.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/grid.jpg") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/frame.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); + + let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); + bitmapTexture2DArray.setTextures(texts); + + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = bitmapTexture2DArray; + mat.name = "LitMaterial"; + + GUIHelp.add(this, "cafe", 0.0, 100.0); + GUIHelp.add(this, "frame", 0.0, 100.0); + { + this.width = 1; + this.height = 1; + let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 255, this.width * this.height); + this.parts = mr.object3Ds; + this.trail3ds = mr.ribbon3Ds; + + mr.material.blendMode = BlendMode.SOFT_ADD; + mr.material.transparent = true; + // mr.material.doubleSide = true; + mr.material.depthWriteEnabled = false; + // mr.material.useBillboard = true; + + for (let i = 0; i < this.width * this.height; i++) { + mr.setTextureID(i, Math.floor(Math.random() * texts.length)); + // mr.setTextureID(i, 0); + } + + let c1 = new Color(0.65, 0.1, 0.2, 0.15); + let c2 = new Color(1.0, 1.1, 0.2, 0.65); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + } + + this.updateOnce(1000); + } + + private tmpArray: any[] = []; + update() { + } + + updateOnce(engineFrame: number) { + if (this.trail3ds && this.trail3ds.length > 0) { + for (let i = 0; i < this.trail3ds.length; i++) { + const trail3d = this.trail3ds[i]; + Vector3.HELP_0.x = Math.random() * 10 - 5; + Vector3.HELP_0.y = Math.random() * 2 - 1; + Vector3.HELP_0.z = Math.random() * 10 - 5; + let offsetAngle = Math.random() * 360; + for (let j = 0; j < trail3d.length; j++) { + let p = j / (trail3d.length - 1); + // trail3d[j].x = j * 0.1 + Math.cos(p * (trail3d.length / 10)) * 5; + // trail3d[j].y = Math.sin(p * (trail3d.length / 10)) * 5 + 10; + // trail3d[j].z = i * 10; + + trail3d[j].x = Math.sin(p * (trail3d.length / 15) + offsetAngle) * p * 35 + Vector3.HELP_0.x; + trail3d[j].y = j * 0.2 + Vector3.HELP_0.y; + trail3d[j].z = Math.cos(p * (trail3d.length / 10) + offsetAngle) * p * 35 + Vector3.HELP_0.z; + + // let obj = Object3DUtil.GetSingleSphere(0.1, 1, 0, 0); + // this.scene.addChild(obj); + // obj.transform.x = trail3d[j].x; + // obj.transform.y = trail3d[j].y; + // obj.transform.z = trail3d[j].z; + } + } + } + } + +} diff --git a/samples/graphic/Sample_GraphicMesh_Trailing.ts b/samples/graphic/Sample_GraphicTrailing.ts similarity index 97% rename from samples/graphic/Sample_GraphicMesh_Trailing.ts rename to samples/graphic/Sample_GraphicTrailing.ts index ef0df4cb..7269df62 100644 --- a/samples/graphic/Sample_GraphicMesh_Trailing.ts +++ b/samples/graphic/Sample_GraphicTrailing.ts @@ -102,9 +102,9 @@ export class Sample_GraphicMesh_Trailing { { this.width = 20; this.height = 20; - let mr = Graphic3DMesh.drawTrail("trail", this.scene, bitmapTexture2DArray, 127, this.width * this.height); + let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 50, this.width * this.height); this.parts = mr.object3Ds; - this.trail3ds = mr.trail3Ds; + this.trail3ds = mr.ribbon3Ds; mr.material.blendMode = BlendMode.ADD; // mr.material.transparent = true; diff --git a/samples/graphic/Sample_GraphicMesh_Trailing2.ts b/samples/graphic/Sample_GraphicTrailing2.ts similarity index 97% rename from samples/graphic/Sample_GraphicMesh_Trailing2.ts rename to samples/graphic/Sample_GraphicTrailing2.ts index fda545b0..842b5b76 100644 --- a/samples/graphic/Sample_GraphicMesh_Trailing2.ts +++ b/samples/graphic/Sample_GraphicTrailing2.ts @@ -102,9 +102,9 @@ export class Sample_GraphicMesh_Trailing2 { { this.width = 10; this.height = 10; - let mr = Graphic3DMesh.drawTrail("trail", this.scene, bitmapTexture2DArray, 127, this.width * this.height); + let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 127, this.width * this.height); this.parts = mr.object3Ds; - this.trail3ds = mr.trail3Ds; + this.trail3ds = mr.ribbon3Ds; mr.material.blendMode = BlendMode.ADD; // mr.material.transparent = true; diff --git a/samples/graphic/Sample_GraphicTrailing3.ts b/samples/graphic/Sample_GraphicTrailing3.ts new file mode 100644 index 00000000..6fde04f3 --- /dev/null +++ b/samples/graphic/Sample_GraphicTrailing3.ts @@ -0,0 +1,161 @@ +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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion } from "@orillusion/core"; +import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Stats } from "@orillusion/stats"; + +export class Sample_GraphicTrailing3 { + lightObj3D: Object3D; + scene: Scene3D; + parts: Object3D[]; + width: number; + height: number; + cafe: number = 47; + frame: number = 16; + view: View3D; + + colors: Color[]; + trail3ds: Object3D[][]; + + constructor() { } + + async run() { + + Matrix4.maxCount = 500000; + Matrix4.allocCount = 500000; + + await Engine3D.init({ beforeRender: () => this.update() }); + + Engine3D.setting.render.debug = true; + Engine3D.setting.shadow.shadowBound = 5; + + this.colors = []; + + GUIHelp.init(); + + this.scene = new Scene3D(); + this.scene.addComponent(Stats); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.enable = false; + let camera = CameraUtil.createCamera3DObject(this.scene); + camera.perspective(60, Engine3D.aspect, 1, 5000.0); + + camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); + + this.view = new View3D(); + this.view.scene = this.scene; + this.view.camera = camera; + + Engine3D.startRenderView(this.view); + + GUIUtil.renderDebug(); + + let post = this.scene.addComponent(PostProcessingComponent); + // let DOFPost = post.addPost(DepthOfFieldPost) + // DOFPost.near = 0 + // DOFPost.far = 150 + // DOFPost.pixelOffset = 2 + // GUIUtil.renderDepthOfField(DOFPost); + + let bloom = post.addPost(BloomPost); + bloom.bloomIntensity = 10.0 + GUIUtil.renderBloom(bloom); + + await this.initScene(); + + // sky.relativeTransform = this.lightObj3D.transform; + } + + async initScene() { + /******** light *******/ + { + this.lightObj3D = new Object3D(); + this.lightObj3D.rotationX = 21; + this.lightObj3D.rotationY = 108; + this.lightObj3D.rotationZ = 10; + let directLight = this.lightObj3D.addComponent(DirectLight); + directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + directLight.castShadow = false; + directLight.intensity = 10; + GUIUtil.renderDirLight(directLight); + this.scene.addChild(this.lightObj3D); + } + + let texts = []; + + // texts.push(await Engine3D.res.loadTexture("particle/fx_a_fragment_003.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/grid.jpg") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/frame.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); + + let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); + bitmapTexture2DArray.setTextures(texts); + + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = bitmapTexture2DArray; + mat.name = "LitMaterial"; + + GUIHelp.add(this, "cafe", 0.0, 100.0); + GUIHelp.add(this, "frame", 0.0, 100.0); + { + this.width = 10; + this.height = 10; + let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 127, this.width * this.height); + this.parts = mr.object3Ds; + this.trail3ds = mr.ribbon3Ds; + + mr.material.blendMode = BlendMode.ADD; + // mr.material.transparent = true; + mr.material.doubleSide = true; + mr.material.depthWriteEnabled = false; + // mr.material.useBillboard = true; + + for (let i = 0; i < this.width * this.height; i++) { + mr.setTextureID(i, Math.floor(Math.random() * texts.length)); + // mr.setTextureID(i, 0); + } + + let c1 = new Color(0.65, 0.1, 0.2, 0.15); + let c2 = new Color(1.0, 1.1, 0.2, 0.65); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + this.colors.push(c2); + } + + this.updateOnce(1000); + } + + private tmpArray: any[] = []; + update() { + } + + updateOnce(engineFrame: number) { + if (this.trail3ds && this.trail3ds.length > 0) { + for (let i = 0; i < this.trail3ds.length; i++) { + const trail3d = this.trail3ds[i]; + let dir = new Vector3(0, 1, 0); + let lx = 10 * Math.random() + 10; + let ly = 0.1 * Math.random() + 0.1; + let lz = 10 * Math.random() + 10; + let oy = 1 * Math.random() + 1; + for (let j = 0; j < trail3d.length; j++) { + let p = j / (trail3d.length - 1); + + let q = Quaternion.HELP_0; + q.fromEulerAngles(0, p * 360 * 4, 0); + q.transformVector(Vector3.RIGHT, dir); + + trail3d[j].x = dir.x * lx * p; + trail3d[j].y = j * ly + oy; + trail3d[j].z = dir.z * lz * p; + } + } + } + } + +} diff --git a/samples/index.ts b/samples/index.ts index b4a168a5..cb3a1f26 100644 --- a/samples/index.ts +++ b/samples/index.ts @@ -1,74 +1,78 @@ -/******** Load all samples in /src/sample/ ********/ -{ - // find all demos in /sample - const modules = import.meta.glob(['./*/*.ts', '!./*/_*.ts']) - // create menu - let title = '', list = `` - for (const path in modules) { - if (!path.includes('Sample_')) continue - const arr = path.split('/') - const _title = arr[1] - const _demo = arr[2].replace(/Sample_|\.ts/g, '') - if (_title != title) { - list += `

${_title}

` - title = _title - } - list += `${_demo}` - } - const menu = document.createElement('div') - menu.className = 'menu' - menu.innerHTML = list - document.body.appendChild(menu) +import { Sample_GraphicPath } from "./graphic/Sample_GraphicPath" +// /******** Load all samples in /src/sample/ ********/ +// { +// // find all demos in /sample +// const modules = import.meta.glob(['./*/*.ts', '!./*/_*.ts']) +// // create menu +// let title = '', list = `` +// for (const path in modules) { +// if (!path.includes('Sample_')) continue +// const arr = path.split('/') +// const _title = arr[1] +// const _demo = arr[2].replace(/Sample_|\.ts/g, '') +// if (_title != title) { +// list += `

${_title}

` +// title = _title +// } +// list += `${_demo}` +// } +// const menu = document.createElement('div') +// menu.className = 'menu' +// menu.innerHTML = list +// document.body.appendChild(menu) - // change sessionStorage.target on click, and reload iframe - menu.addEventListener('click', (e: Event) => { - const button = e.target as HTMLElement - if (!button.id) - return - // remove prev iframe to clear memory - document.querySelector('iframe')?.remove() - const target = button.id - if (target && modules[target]) { - addIframe() - document.querySelector('.active')?.classList.remove('active') - button.classList.add('active') - sessionStorage.top = menu.scrollTop - sessionStorage.target = target - } - }) - // load target on refresh - if (sessionStorage.target) { - const target = sessionStorage.target - const a = document.querySelector(`[id="${target}"]`) - if (a) { - addIframe() - a.classList.add('active') - menu.scrollTop = sessionStorage.top - } - } else { - document.querySelector('a')?.click() - } +// // change sessionStorage.target on click, and reload iframe +// menu.addEventListener('click', (e: Event) => { +// const button = e.target as HTMLElement +// if (!button.id) +// return +// // remove prev iframe to clear memory +// document.querySelector('iframe')?.remove() +// const target = button.id +// if (target && modules[target]) { +// addIframe() +// document.querySelector('.active')?.classList.remove('active') +// button.classList.add('active') +// sessionStorage.top = menu.scrollTop +// sessionStorage.target = target +// } +// }) - // create an iframe inside page to load sample - function addIframe() { - const iframe = document.createElement('iframe') as HTMLIFrameElement - iframe.srcdoc = ` - - ` - document.body.appendChild(iframe) - } -} +// // load target on refresh +// if (sessionStorage.target) { +// const target = sessionStorage.target +// const a = document.querySelector(`[id="${target}"]`) +// if (a) { +// addIframe() +// a.classList.add('active') +// menu.scrollTop = sessionStorage.top +// } +// } else { +// document.querySelector('a')?.click() +// } + +// // create an iframe inside page to load sample +// function addIframe() { +// const iframe = document.createElement('iframe') as HTMLIFrameElement +// iframe.srcdoc = ` +// +// ` +// document.body.appendChild(iframe) +// } +// } // import { Sample_GraphicMesh_Trailing } from "./graphic/Sample_GraphicMesh_Trailing"; -// new Sample_GraphicMesh_Trailing().run(); \ No newline at end of file +// new Sample_GraphicMesh_Trailing().run(); + +new Sample_GraphicPath().run(); \ No newline at end of file diff --git a/src/assets/shader/graphic/GraphicTrailCompute.ts b/src/assets/shader/graphic/GraphicTrailCompute.ts index a9718c85..4c2f3579 100644 --- a/src/assets/shader/graphic/GraphicTrailCompute.ts +++ b/src/assets/shader/graphic/GraphicTrailCompute.ts @@ -1,80 +1,132 @@ -export let graphicTrailCompute: string = /*wgsl*/` -#include "GlobalUniform" - -struct VertexInfo{ - // position:vec3f, - px:f32, - py:f32, - pz:f32, - nx:f32, - ny:f32, - nz:f32, - uv_x:f32, - uv_y:f32, - uv2_x:f32, - uv2_y:f32, - index:f32, - index2:f32 -} +export let graphicTrailCompute = (segmentCode: number) => { + let code = /*wgsl*/` + #include "GlobalUniform" + struct VertexInfo{ + position:vec3f, + // px:f32, + // py:f32, + // pz:f32, + nx:f32, + ny:f32, + nz:f32, + uv_x:f32, + uv_y:f32, + uv2_x:f32, + uv2_y:f32, + index:f32, + index2:f32 + } -struct TrailInfo{ - index : f32 , - segment : f32 , - visible : f32 , - width: f32, - uv: vec4f, - uvSpeed: vec2f, - smoothLine: f32, - useBillboard: f32, - ids:array -} + struct TrailInfo{ + index : f32 , + segment : f32 , + visible : f32 , + width: f32, + + uv: vec4f, + + uvSpeed: vec2f, + smoothLine: f32, + faceMode: f32, + right: vec4f, + ids:array + } -@group(0) @binding(1) var vertexBuffer : array; -@group(0) @binding(2) var trailBuffer : array; -@group(0) @binding(3) var models : array>; - -@compute @workgroup_size(1) -fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(local_invocation_id) local_invocation_id : vec3){ - let indexTrail = workgroup_id.x ; - let trailInfo = trailBuffer[indexTrail]; - if(trailInfo.visible > 0.0){ - let segmentLength = u32(trailInfo.segment + 1.0); - let first = indexTrail * segmentLength ; - let len = first + segmentLength ; - let time = globalUniform.frame * 0.001; - for (var i:u32 = first ; i < len ; i += 1u) { - let i1 = i * 2u + 0u; - let i2 = i * 2u + 1u; - - let mat = models[i32(trailInfo.ids[i - first ])] ; - let right = transformVector(mat,vec3f(1.0,0.0,0.0)); - let worldPos = (mat * vec4f(0.0,0.0,0.0,1.0)).xyz ; - let leftPos = worldPos - right.xyz * trailInfo.width ; - let rightPos = worldPos + right.xyz * trailInfo.width ; - - vertexBuffer[i1].px = leftPos.x ; - vertexBuffer[i1].py = leftPos.y ; - vertexBuffer[i1].pz = leftPos.z ; - - vertexBuffer[i2].px = rightPos.x ; - vertexBuffer[i2].py = rightPos.y ; - vertexBuffer[i2].pz = rightPos.z ; - - vertexBuffer[i1].uv_x = (0.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; - vertexBuffer[i2].uv_x = (1.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; - - let v = (1.0 - f32(i-first) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; - vertexBuffer[i1].uv_y = v + time * trailInfo.uvSpeed.y ; - vertexBuffer[i2].uv_y = v + time * trailInfo.uvSpeed.y ; + @group(0) @binding(1) var vertexBuffer : array; + @group(0) @binding(2) var trailBuffer : array; + @group(0) @binding(3) var models : array>; + + var time:f32; + var viewDir:vec3f; + + @compute @workgroup_size(256) + fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(local_invocation_id) local_invocation_id : vec3){ + let rID = workgroup_id.x ; + let trailInfo = trailBuffer[rID]; + let vLen = u32(trailInfo.segment+1.0) ; + let vID = local_invocation_id.x ; + + if(trailInfo.visible > 0.0 && vID < vLen ){ + time = globalUniform.time * 0.001; + viewDir = -normalize(globalUniform.cameraWorldMatrix[2].xyz) ; + var right:vec3f ; + + switch (u32(trailInfo.faceMode)) { + case 0u:{ + right = getBillRightRightByMode(vID,vLen,trailInfo) ; + break; + } + case 1u:{ + right = trailInfo.right.xyz; + break; + } + case 2u:{ + right = trailInfo.right.xyz; + break; + } + default:{ + break; + } + } + + writeTOBuffer(rID,vID,vLen,right,trailInfo); } } -} -fn transformVector(m:mat4x4f , v: vec3f ) -> vec3f { - let x2 = v.x * m[0][0] + v.y * m[0][1] + v.z * m[0][2]; - let y2 = v.x * m[1][0] + v.y * m[1][1] + v.z * m[1][2]; - let z2 = v.x * m[2][0] + v.y * m[2][1] + v.z * m[2][2]; - return normalize(vec3f(x2,y2,z2)) ; + fn getBillRightRightByMode( vID:u32 , vLen:u32, trailInfo:TrailInfo ) -> vec3f{ + var right:vec3f; + if(vID==0u){ + // first + let sp0 = models[i32(trailInfo.ids[ 0 ])][3].xyz ; + let sp1 = models[i32(trailInfo.ids[ 1 ])][3].xyz ; + let firstFront = normalize(sp1 - sp0) ; + right = normalize(cross(firstFront,viewDir)); + }else if( vID < (vLen-1) ){ + // body + let bp0 = models[i32(trailInfo.ids[vID-1])][3].xyz ; + let bp1 = models[i32(trailInfo.ids[vID])][3].xyz ; + let bp2 = models[i32(trailInfo.ids[vID+1])][3].xyz ; + right = getRight(bp0,bp1,bp2,viewDir) ; + }else{ + // last + let ep0 = models[i32(trailInfo.ids[u32(trailInfo.segment)-1u])][3].xyz ; + let ep1 = models[i32(trailInfo.ids[u32(trailInfo.segment)])][3].xyz ; + let endFront = normalize(ep1 - ep0) ; + right = normalize(cross(endFront,viewDir)); + } + return normalize(right) ; + } + + fn writeTOBuffer(rID:u32, vID:u32 , vLen:u32, right:vec3f , trailInfo:TrailInfo ){ + let i0 = (vID + (vLen * rID)) * 2u ; + let i1 = i0 + 0u ; + let i2 = i0 + 1u ; + + let worldPos = models[i32(trailInfo.ids[vID])][3].xyz ; + let leftPos = worldPos - right.xyz * trailInfo.width ; + let rightPos = worldPos + right.xyz * trailInfo.width ; + + vertexBuffer[i1].position = leftPos ; + vertexBuffer[i2].position = rightPos ; + + let uvS = time * trailInfo.uvSpeed ; + + vertexBuffer[i1].uv_x = (trailInfo.uv.x) + uvS.x ; + vertexBuffer[i2].uv_x = (trailInfo.uv.z + trailInfo.uv.x) + uvS.x ; + + let v = (1.0 - f32(vID) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; + vertexBuffer[i1].uv_y = v + uvS.y ; + vertexBuffer[i2].uv_y = v + uvS.y ; + } + + fn getRight(p0:vec3f,p1:vec3f,p2:vec3f,v:vec3f) -> vec3f { + let d0 = (p1 - p0) ; + let d1 = (p2 - p1) ; + let d2 = ((d0 + d1) ) ; + return (cross(d2,v)) ; + } + ` + return code; } -` \ No newline at end of file + diff --git a/src/assets/shader/graphic/GraphicTrailComputeOld.ts b/src/assets/shader/graphic/GraphicTrailComputeOld.ts new file mode 100644 index 00000000..48f97be7 --- /dev/null +++ b/src/assets/shader/graphic/GraphicTrailComputeOld.ts @@ -0,0 +1,84 @@ +// export let graphicTrailCompute: string = /*wgsl*/` +// #include "GlobalUniform" + +// struct VertexInfo{ +// // position:vec3f, +// px:f32, +// py:f32, +// pz:f32, +// nx:f32, +// ny:f32, +// nz:f32, +// uv_x:f32, +// uv_y:f32, +// uv2_x:f32, +// uv2_y:f32, +// index:f32, +// index2:f32 +// } + +// struct TrailInfo{ +// index : f32 , +// segment : f32 , +// visible : f32 , +// width: f32, +// uv: vec4f, +// uvSpeed: vec2f, +// smoothLine: f32, +// useBillboard: f32, +// ids:array +// } + +// @group(0) @binding(1) var vertexBuffer : array; +// @group(0) @binding(2) var trailBuffer : array; +// @group(0) @binding(3) var models : array>; + +// @compute @workgroup_size(1) +// fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3){ +// let indexTrail = globalInvocation_id.x ; +// let trailInfo = trailBuffer[indexTrail]; + +// if(trailInfo.visible > 0.0){ +// let segmentLength = u32(trailInfo.segment + 1.0); +// let first = indexTrail * segmentLength ; +// let len = first + segmentLength ; +// let time = globalUniform.frame * 0.001; +// for (var i:u32 = first ; i < len ; i += 1u) { +// let i1 = i * 2u + 0u; +// let i2 = i * 2u + 1u; + +// let mat = models[i32(trailInfo.ids[i - first ])] ; +// let worldPos = (mat * vec4f(0.0,0.0,0.0,1.0)).xyz ; +// let viewDir = globalUniform.cameraWorldMatrix[0].xyz ; + +// let right = viewDir ;//transformVector(mat,vec3f(viewDir)); +// // let right = transformVector(mat,vec3f(1.0,0.0,0.0)); +// let leftPos = worldPos - right.xyz * trailInfo.width ; +// let rightPos = worldPos + right.xyz * trailInfo.width ; + +// vertexBuffer[i1].px = leftPos.x ; +// vertexBuffer[i1].py = leftPos.y ; +// vertexBuffer[i1].pz = leftPos.z ; + +// vertexBuffer[i2].px = rightPos.x ; +// vertexBuffer[i2].py = rightPos.y ; +// vertexBuffer[i2].pz = rightPos.z ; + +// vertexBuffer[i1].uv_x = (0.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; +// vertexBuffer[i2].uv_x = (1.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; + +// let v = (1.0 - f32(i-first) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; +// vertexBuffer[i1].uv_y = v + time * trailInfo.uvSpeed.y ; +// vertexBuffer[i2].uv_y = v + time * trailInfo.uvSpeed.y ; +// } +// } +// } + +// fn transformVector(m:mat4x4f , v: vec3f ) -> vec3f { +// let x2 = v.x * m[0][0] + v.y * m[0][1] + v.z * m[0][2]; +// let y2 = v.x * m[1][0] + v.y * m[1][1] + v.z * m[1][2]; +// let z2 = v.x * m[2][0] + v.y * m[2][1] + v.z * m[2][2]; +// return normalize(vec3f(x2,y2,z2)) ; +// } + +// ` \ No newline at end of file diff --git a/src/assets/shader/graphic/GraphicTrailComputeOld2.ts b/src/assets/shader/graphic/GraphicTrailComputeOld2.ts new file mode 100644 index 00000000..e53aeafc --- /dev/null +++ b/src/assets/shader/graphic/GraphicTrailComputeOld2.ts @@ -0,0 +1,116 @@ +export let graphicTrailCompute: string = /*wgsl*/` +#include "GlobalUniform" + +struct VertexInfo{ + // position:vec3f, + px:f32, + py:f32, + pz:f32, + nx:f32, + ny:f32, + nz:f32, + uv_x:f32, + uv_y:f32, + uv2_x:f32, + uv2_y:f32, + index:f32, + index2:f32 +} + +struct TrailInfo{ + index : f32 , + segment : f32 , + visible : f32 , + width: f32, + + uv: vec4f, + + uvSpeed: vec2f, + smoothLine: f32, + useBillboard: f32, + + ids:array +} + +@group(0) @binding(1) var vertexBuffer : array; +@group(0) @binding(2) var trailBuffer : array; +@group(0) @binding(3) var models : array>; + +var rights:array; + +@compute @workgroup_size(1) +fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3){ + let indexTrail = globalInvocation_id.x ; + let trailInfo = trailBuffer[indexTrail]; + let viewDir = normalize(globalUniform.cameraWorldMatrix[2].xyz) ; + + if(trailInfo.visible > 0.0){ + let segmentLength = u32(trailInfo.segment + 1.0); + let first = indexTrail * segmentLength ; + let len = first + segmentLength ; + let time = globalUniform.time * 0.001; + + //**first******* + let sp0 = models[i32(trailInfo.ids[ 0 ])][3].xyz ; + let sp1 = models[i32(trailInfo.ids[ 1 ])][3].xyz ; + let firstFront = normalize(sp1 - sp0) ; + rights[0] = normalize(cross(firstFront,viewDir)); + // rights[0] = viewDir; + //************** + //**body******* + for (var i:u32 = 1; i < u32(trailInfo.segment+1.0) - 1u ; i += 1u) { + let bp0 = models[i32(trailInfo.ids[i-1])][3].xyz ; + let bp1 = models[i32(trailInfo.ids[i])][3].xyz ; + let bp2 = models[i32(trailInfo.ids[i+1])][3].xyz ; + rights[i] = getRight(bp0,bp1,bp2,viewDir) ; + } + //************** + //**end******* + let ep0 = models[i32(trailInfo.ids[u32(trailInfo.segment)-1u])][3].xyz ; + let ep1 = models[i32(trailInfo.ids[u32(trailInfo.segment)])][3].xyz ; + let endFront = normalize(ep1 - ep0) ; + rights[u32(trailInfo.segment)] = normalize(cross(endFront,viewDir)); + //************** + + for (var i:u32 = 0u ; i < segmentLength ; i += 1u) { + let i1 = ((i + (segmentLength * indexTrail)) * 2u + 0u) ; + let i2 = ((i + (segmentLength * indexTrail)) * 2u + 1u) ; + + let right = rights[i]; + let worldPos = models[i32(trailInfo.ids[i])][3].xyz ; + let leftPos = worldPos - right.xyz * trailInfo.width ; + let rightPos = worldPos + right.xyz * trailInfo.width ; + + vertexBuffer[i1].px = leftPos.x ; + vertexBuffer[i1].py = leftPos.y ; + vertexBuffer[i1].pz = leftPos.z ; + + vertexBuffer[i2].px = rightPos.x ; + vertexBuffer[i2].py = rightPos.y ; + vertexBuffer[i2].pz = rightPos.z ; + + vertexBuffer[i1].uv_x = (0.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; + vertexBuffer[i2].uv_x = (1.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; + + let v = (1.0 - f32(i) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; + vertexBuffer[i1].uv_y = v + time * trailInfo.uvSpeed.y ; + vertexBuffer[i2].uv_y = v + time * trailInfo.uvSpeed.y ; + } + } +} + +fn transformVector(m:mat4x4f , v: vec3f ) -> vec3f { + let x2 = v.x * m[0][0] + v.y * m[0][1] + v.z * m[0][2]; + let y2 = v.x * m[1][0] + v.y * m[1][1] + v.z * m[1][2]; + let z2 = v.x * m[2][0] + v.y * m[2][1] + v.z * m[2][2]; + return normalize(vec3f(x2,y2,z2)) ; +} + +fn getRight(p0:vec3f,p1:vec3f,p2:vec3f,v:vec3f) -> vec3f { + let d0 = normalize(p1 - p0) ; + let d1 = normalize(p2 - p1) ; + let d2 = normalize((d0 + d1) ) ; + return normalize(cross(d2,v)) ; +} + +` \ No newline at end of file diff --git a/src/assets/shader/lighting/BxDF_frag.ts b/src/assets/shader/lighting/BxDF_frag.ts index 5544a3b7..274b0a74 100644 --- a/src/assets/shader/lighting/BxDF_frag.ts +++ b/src/assets/shader/lighting/BxDF_frag.ts @@ -76,14 +76,18 @@ export let BxDF_frag: string = /*wgsl*/ ` switch (light.lightType) { case PointLightType: { specColor += pointLighting( fragData.Albedo.rgb,ORI_VertexVarying.vWorldPos.xyz,fragData.N,fragData.V,fragData.Roughness,fragData.Metallic,light) ; + break; } case DirectLightType: { specColor += directLighting( fragData.Albedo.rgb ,fragData.N,fragData.V,fragData.Roughness ,fragData.Metallic, light , globalUniform.shadowBias) ; + break; } case SpotLightType: { specColor += spotLighting( fragData.Albedo.rgb,ORI_VertexVarying.vWorldPos.xyz,fragData.N,fragData.V,fragData.Roughness,fragData.Metallic , light ) ; + break; } default: { + break; } } } diff --git a/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts b/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts index 036393f5..6b0705db 100644 --- a/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts +++ b/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts @@ -438,6 +438,9 @@ export class GPUBufferBase { mappedAtCreation: false, }); + this.memory = new MemoryDO(); + this.memoryNodes = new Map(); + this._dataView = new Float32Array(this.memory.shareDataBuffer); this.memory.allocation(totalLength); for (let i = 0; i < count; i++) { let name = i; diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts index bacef538..f0d844b2 100644 --- a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts @@ -1,15 +1,14 @@ import { Scene3D } from "../../../../../core/Scene3D"; import { Object3D } from "../../../../../core/entities/Object3D"; import { GeometryBase } from "../../../../../core/geometry/GeometryBase"; -import { TrailGeometry } from "../../../../../shape/TrailGeometry"; import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; import { Graphic3DMeshRenderer } from "./Graphic3DMeshRenderer"; -import { Graphic3DTrailRenderer } from "./Graphic3DTrailRenderer"; +import { Graphic3DRibbonRenderer } from "./Graphic3DRibbonRenderer"; export class Graphic3DMesh { public static meshMap: Map = new Map(); public static meshDrawGroup: Map = new Map(); - public static trailMap: Map = new Map(); + public static trailMap: Map = new Map(); public static draw(scene: Scene3D, geo: GeometryBase, texture: BitmapTexture2DArray, count: number): Graphic3DMeshRenderer { if (!this.meshMap.has(geo)) { @@ -22,11 +21,11 @@ export class Graphic3DMesh { } } - public static drawTrail(id: string, scene: Scene3D, texture: BitmapTexture2DArray, trailSegment: number, count: number): Graphic3DTrailRenderer { + public static drawRibbon(id: string, scene: Scene3D, texture: BitmapTexture2DArray, trailSegment: number, count: number): Graphic3DRibbonRenderer { if (!this.trailMap.has(id)) { let object = new Object3D(); - let renderNode = object.addComponent(Graphic3DTrailRenderer); - renderNode.startTrail(texture, trailSegment, count); + let renderNode = object.addComponent(Graphic3DRibbonRenderer); + renderNode.startRibbon(texture, trailSegment, count); this.trailMap.set(id, renderNode); scene.addChild(object); return renderNode; diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DTrailRenderer.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer.ts similarity index 65% rename from src/gfx/renderJob/passRenderer/graphic/new/Graphic3DTrailRenderer.ts rename to src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer.ts index 78b39c7b..1e812c08 100644 --- a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DTrailRenderer.ts +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer.ts @@ -1,39 +1,71 @@ +import { StructStorageGPUBuffer, Vector3 } from "../../../../.."; import { graphicTrailCompute } from "../../../../../assets/shader/graphic/GraphicTrailCompute"; import { MeshRenderer } from "../../../../../components/renderer/MeshRenderer"; import { View3D } from "../../../../../core/View3D"; import { Object3D } from "../../../../../core/entities/Object3D"; import { GeometryBase } from "../../../../../core/geometry/GeometryBase"; -import { UnLitMaterial } from "../../../../../materials/UnLitMaterial"; import { UnLitTexArrayMaterial } from "../../../../../materials/UnLitTexArrayMaterial"; import { Color } from "../../../../../math/Color"; import { Vector2 } from "../../../../../math/Vector2"; import { Vector4 } from "../../../../../math/Vector4"; -import { BoxGeometry } from "../../../../../shape/BoxGeometry"; import { TrailGeometry } from "../../../../../shape/TrailGeometry"; import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; import { GeometryUtil } from "../../../../../util/GeometryUtil"; +import { Struct } from "../../../../../util/struct/Struct"; import { GlobalBindGroup } from "../../../../graphics/webGpu/core/bindGroups/GlobalBindGroup"; import { StorageGPUBuffer } from "../../../../graphics/webGpu/core/buffer/StorageGPUBuffer"; import { ComputeShader } from "../../../../graphics/webGpu/shader/ComputeShader"; import { GPUContext } from "../../../GPUContext"; -export class Graphic3DTrailRenderer extends MeshRenderer { +export enum FaceMode { + FaceToCamera, + FaceToPath, + FaceToUp +} + +export class RibbonStruct extends Struct { + index: number = 1; + segment: number = 5; + visible: number = 1; + width: number = 1; + uv: Vector4 = new Vector4(0, 0, 1, 128); + uvSpeed: Vector2 = new Vector2(0, 0.01); + smooth: number = 0; + faceMode: number = FaceMode.FaceToCamera; + right: Vector4 = new Vector4(0, 0, 1); + ids: Float32Array = new Float32Array(Graphic3DRibbonRenderer.maxRibbonSegment); +} + +export class Graphic3DRibbonRenderer extends MeshRenderer { + public static maxRibbonSegment: number = 256; public transformBuffer: StorageGPUBuffer; public sourceGeometry: GeometryBase; public texture: BitmapTexture2DArray; public object3Ds: Object3D[]; - public trail3Ds: Object3D[][]; + public ribbon3Ds: Object3D[][]; + public ribbons: RibbonStruct[]; + public ribbonCount: number = 10; private _onChange: boolean = false; private _computeShader: ComputeShader; - private _trailBuffer: StorageGPUBuffer; - trailCount: number; - + private _ribbonBuffer: StructStorageGPUBuffer; + ribbonSegment: number; public init(): void { super.init(); } - public create(source: GeometryBase, tex: BitmapTexture2DArray, num: number) { + public create(ribbonSegment: number, tex: BitmapTexture2DArray, num: number) { + this.ribbons = []; + this.ribbonSegment = ribbonSegment; + for (let i = 0; i < num; i++) { + this.ribbons[i] = new RibbonStruct(); + this.ribbons[i].index = i; + this.ribbons[i].segment = ribbonSegment; + this.ribbons[i].width = 1.5; + this.ribbons[i].faceMode = FaceMode.FaceToCamera; + } + + let geo = new TrailGeometry(ribbonSegment) let mat = new UnLitTexArrayMaterial(); mat.baseMap = tex; this.material = mat; @@ -57,51 +89,34 @@ export class Graphic3DTrailRenderer extends MeshRenderer { } this.transformBuffer.apply(); - this.geometry = GeometryUtil.mergeNumber(source, num); + this.geometry = GeometryUtil.mergeNumber(geo, num); } - public startSpark() { + public startRibbon(texture: BitmapTexture2DArray, ribonSegment: number, count: number) { + this.ribbonCount = count; - } - - public startTrail(texture: BitmapTexture2DArray, trailSegment: number, count: number) { - this.trailCount = count; - this.create(new TrailGeometry(trailSegment), texture, count); + this.create(ribonSegment, texture, count); - this._computeShader = new ComputeShader(graphicTrailCompute); - this._trailBuffer = new StorageGPUBuffer(count * (4 + 4 + 2 + 2 + 128)); + this._computeShader = new ComputeShader(graphicTrailCompute(Graphic3DRibbonRenderer.maxRibbonSegment)); + this._ribbonBuffer = new StructStorageGPUBuffer(RibbonStruct, count); - this.trail3Ds = []; + this.ribbon3Ds = []; for (let i = 0; i < count; i++) { - this._trailBuffer.setFloat(`${i}_index`, i); - this._trailBuffer.setFloat(`${i}_segment`, trailSegment); - // this._trailBuffer.setFloat(`${i}_visible`, Math.random() * 2.0 > 1.0 ? 1.0 : 0.0); - this._trailBuffer.setFloat(`${i}_visible`, 1); - this._trailBuffer.setFloat(`${i}_width`, Math.random() * 10 + 2); - this._trailBuffer.setVector4(`${i}_uv`, new Vector4(0, 0, 1, Math.random() * 5)); - this._trailBuffer.setVector2(`${i}_uvSpeed`, new Vector2(0, Math.random() * 4)); - this._trailBuffer.setFloat(`${i}_smooth`, 0); - this._trailBuffer.setFloat(`${i}_useBillboard`, 0); - - this.trail3Ds[i] = []; - let arr = new Float32Array(128); - for (let j = 0; j < 128; j++) { + this.ribbon3Ds[i] = []; + for (let j = 0; j < Graphic3DRibbonRenderer.maxRibbonSegment; j++) { const element = new Object3D(); - // element.transform.x = Math.floor(i / 10) * 50 - 10 * 50 * 0.5; - // element.transform.z = (i % 10) * 50 - 10 * 50 * 0.5; - // element.transform.y = j * 2 - 128; - - this.trail3Ds[i].push(element); + this.ribbon3Ds[i].push(element); this.object3D.addChild(element); - arr[j] = element.transform.worldMatrix.index; + this.ribbons[i].ids[j] = element.transform.worldMatrix.index; } - this._trailBuffer.setFloat32Array(`${i}_ids`, arr); } - this._trailBuffer.apply(); + + this._ribbonBuffer.setStructArray(RibbonStruct, this.ribbons); + this._ribbonBuffer.apply(); this.start = () => { this._computeShader.setStorageBuffer("vertexBuffer", this.geometry.vertexBuffer.vertexGPUBuffer); - this._computeShader.setStorageBuffer("trailBuffer", this._trailBuffer); + this._computeShader.setStorageBuffer("trailBuffer", this._ribbonBuffer); this._computeShader.setStorageBuffer("models", GlobalBindGroup.modelMatrixBindGroup.matrixBufferDst); this._computeShader.setStorageBuffer("globalUniform", GlobalBindGroup.getCameraGroup(this.transform.scene3D.view.camera).uniformGPUBuffer); } @@ -147,7 +162,9 @@ export class Graphic3DTrailRenderer extends MeshRenderer { } private computeTrail(view: View3D, command: GPUCommandEncoder) { - this._computeShader.workerSizeX = this.trailCount; + this._computeShader.workerSizeX = this.ribbonCount; + this._computeShader.workerSizeY = Math.floor(this.ribbonSegment / Graphic3DRibbonRenderer.maxRibbonSegment); + // this._computeShader.workerSizeX = 1; GPUContext.computeCommand(command, [this._computeShader]); } diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts new file mode 100644 index 00000000..272f399c --- /dev/null +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts @@ -0,0 +1,168 @@ +// import { graphicTrailCompute } from "../../../../../assets/shader/graphic/GraphicTrailCompute"; +// import { MeshRenderer } from "../../../../../components/renderer/MeshRenderer"; +// import { View3D } from "../../../../../core/View3D"; +// import { Object3D } from "../../../../../core/entities/Object3D"; +// import { GeometryBase } from "../../../../../core/geometry/GeometryBase"; +// import { UnLitTexArrayMaterial } from "../../../../../materials/UnLitTexArrayMaterial"; +// import { Color } from "../../../../../math/Color"; +// import { Vector2 } from "../../../../../math/Vector2"; +// import { Vector4 } from "../../../../../math/Vector4"; +// import { TrailGeometry } from "../../../../../shape/TrailGeometry"; +// import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; +// import { GeometryUtil } from "../../../../../util/GeometryUtil"; +// import { Struct } from "../../../../../util/struct/Struct"; +// import { GlobalBindGroup } from "../../../../graphics/webGpu/core/bindGroups/GlobalBindGroup"; +// import { StorageGPUBuffer } from "../../../../graphics/webGpu/core/buffer/StorageGPUBuffer"; +// import { ComputeShader } from "../../../../graphics/webGpu/shader/ComputeShader"; +// import { GPUContext } from "../../../GPUContext"; + +// export class Ribbon extends Struct { +// index: number = 1; +// segment: number = 1; +// visible: number = 1; +// width: number = 1; +// uv: Vector4 = new Vector4(0, 0, 1, 1); +// uvSpeed: Vector2 = new Vector2(0, 0); +// smooth: number = 0; +// useBillboard: number = 0; + +// ids: Float32Array = new Float32Array(1024); +// } + +// export class Graphic3DRibbonRenderer extends MeshRenderer { +// public transformBuffer: StorageGPUBuffer; +// public sourceGeometry: GeometryBase; +// public texture: BitmapTexture2DArray; +// public object3Ds: Object3D[]; +// public ribbon3Ds: Object3D[][]; +// public ribbons: Ribbon[]; +// public width: number = 1; +// public ribbonCount: number = 10; +// public uSegment: number = 1; +// public vSegment: number = 1; +// private _onChange: boolean = false; +// private _computeShader: ComputeShader; +// private _ribbonBuffer: StorageGPUBuffer; +// public init(): void { +// super.init(); +// } + +// public create(source: GeometryBase, tex: BitmapTexture2DArray, num: number) { +// this.ribbons = []; +// for (let i = 0; i < this.ribbons.length; i++) { +// this.ribbons[i] = new Ribbon(); +// } + +// let mat = new UnLitTexArrayMaterial(); +// mat.baseMap = tex; +// this.material = mat; + +// this.transformBuffer = new StorageGPUBuffer(num * (4 * 4), 0); +// this.material.setStorageBuffer("graphicBuffer", this.transformBuffer); + +// this.object3Ds = []; +// for (let i = 0; i < num; i++) { +// const element = new Object3D(); +// this.object3Ds.push(element); +// this.object3D.addChild(element); + +// this.transformBuffer.setFloat("matrix_" + i, element.transform.worldMatrix.index); +// this.transformBuffer.setFloat("texId_" + i, 1); +// this.transformBuffer.setFloat("texId2_" + i, 1); +// this.transformBuffer.setFloat("texId3_" + i, 1); +// this.transformBuffer.setColor("baseColor_" + i, new Color()); +// this.transformBuffer.setColor("emissiveColor_" + i, new Color(0, 0, 0, 0)); +// this.transformBuffer.setVector4("uvRect_" + i, new Vector4(0, 0, 1, 1)); +// } + +// this.transformBuffer.apply(); +// this.geometry = GeometryUtil.mergeNumber(source, num); +// } + +// public startRibbon(texture: BitmapTexture2DArray, trailSegment: number, width: number, count: number) { +// this.ribbonCount = count; +// this.width = width; +// // this.uSegment = uSegment; +// // this.vSegment = vSegment; + +// this.create(new TrailGeometry(trailSegment), texture, count); + +// this._computeShader = new ComputeShader(graphicTrailCompute); +// this._ribbonBuffer = new StorageGPUBuffer(count * (4 + 4 + 2 + 2 + 128)); + +// this.ribbon3Ds = []; +// for (let i = 0; i < count; i++) { +// this._ribbonBuffer.setFloat(`${i}_index`, i); +// this._ribbonBuffer.setFloat(`${i}_segment`, trailSegment); +// this._ribbonBuffer.setFloat(`${i}_visible`, 1); +// this._ribbonBuffer.setFloat(`${i}_width`, this.width); +// this._ribbonBuffer.setVector4(`${i}_uv`, new Vector4(0, 0, this.uSegment, this.vSegment)); +// this._ribbonBuffer.setVector2(`${i}_uvSpeed`, new Vector2(0, Math.random() * 4)); +// this._ribbonBuffer.setFloat(`${i}_smooth`, 0); +// this._ribbonBuffer.setFloat(`${i}_useBillboard`, 0); + +// this.ribbon3Ds[i] = []; +// let arr = new Float32Array(1024); +// for (let j = 0; j < 1024; j++) { +// const element = new Object3D(); +// this.ribbon3Ds[i].push(element); +// this.object3D.addChild(element); +// arr[j] = element.transform.worldMatrix.index; +// } +// this._ribbonBuffer.setFloat32Array(`${i}_ids`, arr); +// } +// this._ribbonBuffer.apply(); + +// this.start = () => { +// this._computeShader.setStorageBuffer("vertexBuffer", this.geometry.vertexBuffer.vertexGPUBuffer); +// this._computeShader.setStorageBuffer("trailBuffer", this._ribbonBuffer); +// this._computeShader.setStorageBuffer("models", GlobalBindGroup.modelMatrixBindGroup.matrixBufferDst); +// this._computeShader.setStorageBuffer("globalUniform", GlobalBindGroup.getCameraGroup(this.transform.scene3D.view.camera).uniformGPUBuffer); +// } + +// this.onCompute = (view: View3D, command: GPUCommandEncoder) => this.computeTrail(view, command); +// } + +// public setTextureID(i: number, id: number) { +// this.transformBuffer.setFloat("texId_" + i, id); +// this._onChange = true; +// } + +// // public setTexture2ID(i: number, id: number) { +// // this.transformBuffer.setFloat("texId_" + i, id); +// // this._onChange = true; +// // } + +// // public setTexture3ID(i: number, id: number) { +// // this.transformBuffer.setFloat("texId_" + i, id); +// // this._onChange = true; +// // } + +// public setBaseColor(i: number, color: Color) { +// this.transformBuffer.setColor("baseColor_" + i, color); +// this._onChange = true; +// } + +// public setEmissiveColor(i: number, color: Color) { +// this.transformBuffer.setColor("emissiveColor_" + i, color); +// this._onChange = true; +// } + +// public setUVRect(i: number, v: Vector4) { +// this.transformBuffer.setVector4("uvRect_" + i, v); +// this._onChange = true; +// } + +// public onUpdate(view?: View3D) { +// if (this._onChange) { +// this._onChange = false; +// this.transformBuffer.apply(); +// } +// } + +// private computeTrail(view: View3D, command: GPUCommandEncoder) { +// this._computeShader.workerSizeX = this.ribbonCount; +// GPUContext.computeCommand(command, [this._computeShader]); +// } + +// } \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 5dbd63bb..0c8bba57 100644 --- a/src/index.ts +++ b/src/index.ts @@ -58,6 +58,8 @@ export * from "./assets/shader/glsl/post/LUT_glsl" export * from "./assets/shader/graphic/Graphic3DShader_fs" export * from "./assets/shader/graphic/Graphic3DShader_vs" export * from "./assets/shader/graphic/GraphicTrailCompute" +export * from "./assets/shader/graphic/GraphicTrailComputeOld" +export * from "./assets/shader/graphic/GraphicTrailComputeOld2" export * from "./assets/shader/lighting/BRDF_frag" export * from "./assets/shader/lighting/BsDF_frag" export * from "./assets/shader/lighting/BxDF_frag" @@ -342,7 +344,8 @@ export * from "./gfx/renderJob/passRenderer/graphic/GraphicConfig" export * from "./gfx/renderJob/passRenderer/graphic/Graphics3DShape" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer" -export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DTrailRenderer" +export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer" +export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2" export * from "./gfx/renderJob/passRenderer/post/PostRenderer" export * from "./gfx/renderJob/passRenderer/preDepth/PreDepthPassRenderer" export * from "./gfx/renderJob/passRenderer/preDepth/ZCullingCompute" diff --git a/src/util/struct/Struct.ts b/src/util/struct/Struct.ts index 6edb1a58..0f6e2480 100644 --- a/src/util/struct/Struct.ts +++ b/src/util/struct/Struct.ts @@ -61,13 +61,13 @@ export class Struct { return 1 * 4; case `Float32Array`: - return value.byteLength * 4; + return value.byteLength; case `Vector2`: return 2 * 4; case `Vector3`: - return 4 * 4; + return 3 * 4; case `Vector4`: return 4 * 4; From 51a38f2ef2f97acc7dedcb18b85a5695c4b93d8f Mon Sep 17 00:00:00 2001 From: hellmor Date: Wed, 8 Nov 2023 22:21:15 +0800 Subject: [PATCH 18/34] fix: Wrong offset for bloom. Fix wrong offset for bloom. --- src/assets/shader/compute/BloomEffect_cs.ts | 31 +++++++++++++++------ src/gfx/renderJob/post/BloomPost.ts | 14 ++++------ src/textures/RenderTexture.ts | 4 +-- 3 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/assets/shader/compute/BloomEffect_cs.ts b/src/assets/shader/compute/BloomEffect_cs.ts index 36b4e3d7..933a443f 100644 --- a/src/assets/shader/compute/BloomEffect_cs.ts +++ b/src/assets/shader/compute/BloomEffect_cs.ts @@ -12,6 +12,19 @@ struct BloomCfg{ } @group(0) @binding(0) var bloomCfg: BloomCfg; ` + +let CalcUV_01 = /*wgsl*/ ` + fn CalcUV_01(coord:vec2, texSize:vec2) -> vec2 + { + var uv = vec2(0.0); + uv.x = (f32(coord.x) + 0.5) / f32(texSize.x); + uv.y = (f32(coord.y) + 0.5) / f32(texSize.y); + + return uv; + } + +` + //_______________calc weight let GaussWeight2D: string = /*wgsl*/ ` @@ -106,6 +119,7 @@ var fragCoord: vec2; ${GaussWeight2D} ${GaussBlur('GaussNxN', 'inTex', 'inTexSampler')} +${CalcUV_01} @compute @workgroup_size( 8 , 8 , 1 ) fn CsMain( @builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3) @@ -116,7 +130,7 @@ fn CsMain( @builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_inv return; } var color = vec4(0.0, 0.0, 0.0, 1.0); - var uv = vec2(f32(fragCoord.x), f32(fragCoord.y)) / vec2(f32(texSize.x - 1), f32(texSize.y -1)); + var uv = CalcUV_01(fragCoord, texSize); let stride = vec2(1.0) / vec2(f32(texSize.x), f32(texSize.y)); // texel size of last level let rgb = GaussNxN(uv, i32(bloomCfg.downSampleBlurSize), stride, bloomCfg.downSampleBlurSigma); color = vec4(rgb, color.w); @@ -141,6 +155,7 @@ var fragCoord: vec2; ${GaussWeight2D} ${GaussBlur('GaussNxN_0', '_MainTex', '_MainTexSampler')} ${GaussBlur('GaussNxN_1', '_PrevMip', '_PrevMipSampler')} +${CalcUV_01} @compute @workgroup_size( 8 , 8 , 1 ) fn CsMain( @builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3) @@ -151,14 +166,15 @@ fn CsMain( @builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_inv return; } var color = vec4(0.0, 0.0, 0.0, 1.0); - var uv = vec2(f32(fragCoord.x), f32(fragCoord.y)) / vec2(f32(texSize.x - 1), f32(texSize.y -1)); + var uv = CalcUV_01(fragCoord, texSize); + // half stride let prev_stride = vec2(0.5) / vec2(f32(texSize.x), f32(texSize.y)); let curr_stride = vec2(1.0) / vec2(f32(texSize.x), f32(texSize.y)); - let rgb1 = GaussNxN_0(uv, i32(bloomCfg.upSampleBlurSize), prev_stride, bloomCfg.upSampleBlurSigma); - let rgb2 = GaussNxN_1(uv, i32(bloomCfg.upSampleBlurSize), curr_stride, bloomCfg.upSampleBlurSigma); - color = vec4(rgb1+rgb2, color.w); + let rgb1 = GaussNxN_1(uv, i32(bloomCfg.upSampleBlurSize), prev_stride, bloomCfg.upSampleBlurSigma); + let rgb2 = GaussNxN_0(uv, i32(bloomCfg.upSampleBlurSize), curr_stride, bloomCfg.upSampleBlurSigma); + color = vec4(rgb1 + rgb2, color.w); textureStore(outTex, fragCoord, color); } ` @@ -167,6 +183,7 @@ fn CsMain( @builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_inv //__________________________blend export let post = /*wgsl*/ ` ${BloomCfg} +${CalcUV_01} @group(0) @binding(1) var _MainTex : texture_2d; @group(0) @binding(2) var _BloomTex : texture_2d; @@ -198,9 +215,7 @@ fn CsMain( @builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_inv return; } var color = textureLoad(_MainTex, fragCoord, 0); - let uv = vec2(f32(fragCoord.x), f32(fragCoord.y)) / vec2(f32(texSize.x - 1), f32(texSize.y - 1)); - - // var bloom = textureLoad(_BloomTex, fragCoord, 0).xyz; + var uv = CalcUV_01(fragCoord, texSize); var bloom = textureSampleLevel(_BloomTex, _BloomTexSampler, uv, 0.0).xyz * bloomCfg.bloomIntensity; // tone map diff --git a/src/gfx/renderJob/post/BloomPost.ts b/src/gfx/renderJob/post/BloomPost.ts index e1ac34c1..e015c9cf 100644 --- a/src/gfx/renderJob/post/BloomPost.ts +++ b/src/gfx/renderJob/post/BloomPost.ts @@ -133,7 +133,7 @@ export class BloomPost extends PostBase { private createDownSampleComputes() { let setting = Engine3D.setting.render.postProcessing.bloom; - const N = setting.downSampleStep; // 下采样次数 + const N = setting.downSampleStep; this.downSampleComputes = []; for (let i = 0; i < N; i++) { @@ -153,7 +153,7 @@ export class BloomPost extends PostBase { private createUpSampleComputes() { let setting = Engine3D.setting.render.postProcessing.bloom; - const N = setting.downSampleStep; // 下采样次数 + const N = setting.downSampleStep; this.upSampleComputes = []; { let compute = new ComputeShader(upSample); @@ -189,7 +189,7 @@ export class BloomPost extends PostBase { private createPostCompute() { let setting = Engine3D.setting.render.postProcessing.bloom; - const N = setting.downSampleStep; // 融合结果 + const N = setting.downSampleStep; this.postCompute = new ComputeShader(post); @@ -214,12 +214,11 @@ export class BloomPost extends PostBase { this.RT_threshold = new VirtualTexture(screenWidth, screenHeight, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING); - const N = setting.downSampleStep; // 下采样次数 + const N = setting.downSampleStep; { let downSize = 2; this.RT_BloomDown = []; - // 创建下纹理 for (let i = 0; i < N; i++) { let w = Math.ceil(screenWidth / downSize); let h = Math.ceil(screenHeight / downSize); @@ -229,7 +228,6 @@ export class BloomPost extends PostBase { } { - // 创建上采样纹理 this.RT_BloomUp = []; for (let i = 0; i < N - 1; i++) { let w = this.RT_BloomDown[N - 2 - i].width; @@ -282,9 +280,9 @@ export class BloomPost extends PostBase { let screenWidth = presentationSize[0]; let screenHeight = presentationSize[1]; this.RT_threshold.resize(screenWidth, screenHeight); - const N = cfg.downSampleStep; // 下采样次数 + const N = cfg.downSampleStep; let downSize = 2; - // 创建下纹理 + // for (let i = 0; i < N; i++) { let w = Math.ceil(screenWidth / downSize); let h = Math.ceil(screenHeight / downSize); diff --git a/src/textures/RenderTexture.ts b/src/textures/RenderTexture.ts index cffd8cb8..26277ec6 100644 --- a/src/textures/RenderTexture.ts +++ b/src/textures/RenderTexture.ts @@ -14,8 +14,8 @@ export class RenderTexture extends Texture { public resolveTarget: GPUTextureView; sampleCount: number; - autoResize: boolean; - clear: boolean; + autoResize?: boolean; + clear?: boolean; /** * create virtual texture * @param width width of texture From 89ef8d363b2a7f7ee6285665a199274fbda10527 Mon Sep 17 00:00:00 2001 From: hellmor Date: Thu, 9 Nov 2023 14:47:02 +0800 Subject: [PATCH 19/34] perf: reduce texture sample times. Reduce texture sample times in GI lightingPass. --- src/assets/shader/compute/BloomEffect_cs.ts | 8 ++-- .../shader/compute/DDGILighting_CSShader.ts | 42 ++++++++++--------- .../shader/compute/OutLineBlendColor_cs.ts | 13 ++++-- .../shader/compute/SSR_BlendColor_cs.ts | 11 ++++- 4 files changed, 44 insertions(+), 30 deletions(-) diff --git a/src/assets/shader/compute/BloomEffect_cs.ts b/src/assets/shader/compute/BloomEffect_cs.ts index 933a443f..e5029fa0 100644 --- a/src/assets/shader/compute/BloomEffect_cs.ts +++ b/src/assets/shader/compute/BloomEffect_cs.ts @@ -16,11 +16,9 @@ struct BloomCfg{ let CalcUV_01 = /*wgsl*/ ` fn CalcUV_01(coord:vec2, texSize:vec2) -> vec2 { - var uv = vec2(0.0); - uv.x = (f32(coord.x) + 0.5) / f32(texSize.x); - uv.y = (f32(coord.y) + 0.5) / f32(texSize.y); - - return uv; + let u = (f32(coord.x) + 0.5) / f32(texSize.x); + let v = (f32(coord.y) + 0.5) / f32(texSize.y); + return vec2(u, v); } ` diff --git a/src/assets/shader/compute/DDGILighting_CSShader.ts b/src/assets/shader/compute/DDGILighting_CSShader.ts index e650ee67..585e4b3e 100644 --- a/src/assets/shader/compute/DDGILighting_CSShader.ts +++ b/src/assets/shader/compute/DDGILighting_CSShader.ts @@ -82,24 +82,19 @@ var wNormal:vec3; const LUMEN = 10.764; -fn samplePosition(uv:vec2) -> vec4 +fn samplePosition(uv:vec2) -> vec4 { - var oc1:vec4 = textureSampleLevel(positionMap, positionMapSampler, vec2(0.0), 0.0); - var oc:vec4 = textureLoad(positionMap, uv, 0) ; - return oc; + return textureSampleLevel(positionMap, positionMapSampler,uv, 0.0); } -fn sampleNormal(uv:vec2) -> vec4 +fn sampleNormal(uv:vec2) -> vec4 { - var oc1:vec4 = textureSampleLevel(normalMap, normalMapSampler, vec2(0.0), 0.0); - var oc:vec4 = textureLoad(normalMap, uv, 0); - return oc; + return textureSampleLevel(normalMap, normalMapSampler, uv, 0.0); } -fn sampleColor(uv:vec2) -> vec4 +fn sampleColor(uv:vec2) -> vec4 { - var oc1:vec4 = textureSampleLevel(colorMap, colorMapSampler, vec2(0.0), 0.0); - var oc:vec4 = textureLoad(colorMap, uv, 0); + var oc:vec4 = textureSampleLevel(colorMap, colorMapSampler, uv, 0.0); ulitColor = vec3(oc.xyz); return oc; } @@ -245,14 +240,21 @@ fn spotLight( albedo:vec3,WP:vec3, N:vec3, V:vec3, light:Lig return color ; } -fn coordFun(fragCoord:vec2)-> vec4{ - var uv = vec2(i32(fragCoord.x), i32(fragCoord.y)) ; - var pos = samplePosition(uv); +fn CalcUV_01(coord:vec2, texSize:vec2) -> vec2 +{ + let u = (f32(coord.x) + 0.5) / f32(texSize.x); + let v = (f32(coord.y) + 0.5) / f32(texSize.y); + return vec2(u, v); +} + +fn coordFun(fragCoord:vec2)-> vec4{ + let uv_01 = CalcUV_01(fragCoord, texSize); + var pos = samplePosition(uv_01); - var normalMap = sampleNormal(uv); + var normalMap = sampleNormal(uv_01); var normal = normalize( normalMap.xyz * 2.0 - 1.0 ); - var color = sampleColor(uv); + var color = sampleColor(uv_01); var emissive = vec4(pos.a,normalMap.a,color.a,0.0) * 1.0 ; if(pos.w + 1.0 > 10000.0){ return vec4(color); @@ -305,14 +307,16 @@ fn coordFun(fragCoord:vec2)-> vec4{ // return fragPosition; // } +var texSize: vec2; + @compute @workgroup_size( 8 , 8 , 1 ) fn CsMain( @builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3) { - var fragCoord = vec2( globalInvocation_id.x, globalInvocation_id.y); + var fragCoord = vec2(globalInvocation_id.xy); + texSize = textureDimensions(colorMap).xy; var color = coordFun(fragCoord); - // color = vec4(pow(color.rgb,vec3(1.0/2.4)),1.0); - textureStore(outputBuffer, vec2(fragCoord),color); + textureStore(outputBuffer, fragCoord, color); } ` \ No newline at end of file diff --git a/src/assets/shader/compute/OutLineBlendColor_cs.ts b/src/assets/shader/compute/OutLineBlendColor_cs.ts index 117734e7..4661a55d 100644 --- a/src/assets/shader/compute/OutLineBlendColor_cs.ts +++ b/src/assets/shader/compute/OutLineBlendColor_cs.ts @@ -19,6 +19,14 @@ export let OutLineBlendColor_cs: string = /*wgsl*/ ` var texSize: vec2; var fragCoord: vec2; + + fn CalcUV_01(coord:vec2, texSize:vec2) -> vec2 + { + let u = (f32(coord.x) + 0.5) / f32(texSize.x); + let v = (f32(coord.y) + 0.5) / f32(texSize.y); + return vec2(u, v); + } + @compute @workgroup_size( 8 , 8 , 1 ) fn CsMain( @builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3) { @@ -28,10 +36,7 @@ export let OutLineBlendColor_cs: string = /*wgsl*/ ` return; } - var uv01 = vec2(fragCoord) / (vec2(texSize) - 1.0); - var offset = vec2(texSize) / vec2(outlineSetting.lowTexWidth, outlineSetting.lowTexHeight); - offset = 0.5 * offset / (vec2(texSize) - 1.0); - uv01 += offset; + let uv01 = CalcUV_01(fragCoord, texSize); var outLineColor = textureSampleLevel(lowTex, lowTexSampler, uv01, 0.0); outLineColor.x *= outlineSetting.strength; diff --git a/src/assets/shader/compute/SSR_BlendColor_cs.ts b/src/assets/shader/compute/SSR_BlendColor_cs.ts index d66af8b2..cd1b6340 100644 --- a/src/assets/shader/compute/SSR_BlendColor_cs.ts +++ b/src/assets/shader/compute/SSR_BlendColor_cs.ts @@ -18,6 +18,14 @@ export let SSR_BlendColor_cs: string = /*wgsl*/ ` alpha:f32, fresnel:f32, } + + fn CalcUV_01(coord:vec2, texSize:vec2) -> vec2 + { + let u = (f32(coord.x) + 0.5) / f32(texSize.x); + let v = (f32(coord.y) + 0.5) / f32(texSize.y); + return vec2(u, v); + } + @compute @workgroup_size( 8 , 8 , 1 ) fn CsMain( @builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3) @@ -33,8 +41,7 @@ export let SSR_BlendColor_cs: string = /*wgsl*/ ` let index = ssrCoord.x + ssrCoord.y * i32(ssrTexSize.x); let hitData = rayTraceBuffer[index]; var color = textureLoad(colorMap, fragCoord , 0); - var uv01 = vec2(f32(fragCoord.x), f32(fragCoord.y)); - uv01 = uv01 / vec2(colorTexSize - 1); + var uv01 = CalcUV_01(fragCoord, colorTexSize); var ssrColor = textureSampleLevel(ssrMap, ssrMapSampler, uv01, 0.0); var tc = mix(color, ssrColor, hitData.fresnel) ; From febdf23949d8e1d4f4099062378310478fbd41be Mon Sep 17 00:00:00 2001 From: hellmor Date: Fri, 10 Nov 2023 22:20:29 +0800 Subject: [PATCH 20/34] feat: fix issues #304 fix: texture Count Exceeded the maximum limit of 7 --- samples/gui/Sample_UIMultipleTextures.ts | 53 +++++++ samples/index.ts | 138 +++++++++--------- samples/pick/Sample_PixelPick.ts | 8 +- src/components/gui/core/GUIGeometry.ts | 47 ++++-- src/components/gui/core/GUIGeometryRebuild.ts | 72 +++++---- src/components/gui/core/GUIMaterial.ts | 9 +- src/components/gui/core/GUIRenderer.ts | 6 +- src/components/gui/core/GUIShader.ts | 6 +- src/components/gui/uiComponents/UIPanel.ts | 42 ++++-- src/components/gui/uiComponents/WorldPanel.ts | 5 +- src/components/renderer/RenderNode.ts | 29 ++-- src/core/geometry/GeometryBase.ts | 3 +- src/gfx/renderJob/jobs/RendererJob.ts | 1 - 13 files changed, 262 insertions(+), 157 deletions(-) create mode 100644 samples/gui/Sample_UIMultipleTextures.ts diff --git a/samples/gui/Sample_UIMultipleTextures.ts b/samples/gui/Sample_UIMultipleTextures.ts new file mode 100644 index 00000000..e7c4afd2 --- /dev/null +++ b/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() diff --git a/samples/index.ts b/samples/index.ts index cb3a1f26..86d3a212 100644 --- a/samples/index.ts +++ b/samples/index.ts @@ -1,78 +1,78 @@ -import { Sample_GraphicPath } from "./graphic/Sample_GraphicPath" +// import { Sample_GraphicPath } from "./graphic/Sample_GraphicPath" -// /******** Load all samples in /src/sample/ ********/ -// { -// // find all demos in /sample -// const modules = import.meta.glob(['./*/*.ts', '!./*/_*.ts']) -// // create menu -// let title = '', list = `` -// for (const path in modules) { -// if (!path.includes('Sample_')) continue -// const arr = path.split('/') -// const _title = arr[1] -// const _demo = arr[2].replace(/Sample_|\.ts/g, '') -// if (_title != title) { -// list += `

${_title}

` -// title = _title -// } -// list += `${_demo}` -// } -// const menu = document.createElement('div') -// menu.className = 'menu' -// menu.innerHTML = list -// document.body.appendChild(menu) +/******** Load all samples in /src/sample/ ********/ +{ + // find all demos in /sample + const modules = import.meta.glob(['./*/*.ts', '!./*/_*.ts']) + // create menu + let title = '', list = `` + for (const path in modules) { + if (!path.includes('Sample_')) continue + const arr = path.split('/') + const _title = arr[1] + const _demo = arr[2].replace(/Sample_|\.ts/g, '') + if (_title != title) { + list += `

${_title}

` + title = _title + } + list += `${_demo}` + } + const menu = document.createElement('div') + menu.className = 'menu' + menu.innerHTML = list + document.body.appendChild(menu) -// // change sessionStorage.target on click, and reload iframe -// menu.addEventListener('click', (e: Event) => { -// const button = e.target as HTMLElement -// if (!button.id) -// return -// // remove prev iframe to clear memory -// document.querySelector('iframe')?.remove() -// const target = button.id -// if (target && modules[target]) { -// addIframe() -// document.querySelector('.active')?.classList.remove('active') -// button.classList.add('active') -// sessionStorage.top = menu.scrollTop -// sessionStorage.target = target -// } -// }) + // change sessionStorage.target on click, and reload iframe + menu.addEventListener('click', (e: Event) => { + const button = e.target as HTMLElement + if (!button.id) + return + // remove prev iframe to clear memory + document.querySelector('iframe')?.remove() + const target = button.id + if (target && modules[target]) { + addIframe() + document.querySelector('.active')?.classList.remove('active') + button.classList.add('active') + sessionStorage.top = menu.scrollTop + sessionStorage.target = target + } + }) -// // load target on refresh -// if (sessionStorage.target) { -// const target = sessionStorage.target -// const a = document.querySelector(`[id="${target}"]`) -// if (a) { -// addIframe() -// a.classList.add('active') -// menu.scrollTop = sessionStorage.top -// } -// } else { -// document.querySelector('a')?.click() -// } + // load target on refresh + if (sessionStorage.target) { + const target = sessionStorage.target + const a = document.querySelector(`[id="${target}"]`) + if (a) { + addIframe() + a.classList.add('active') + menu.scrollTop = sessionStorage.top + } + } else { + document.querySelector('a')?.click() + } -// // create an iframe inside page to load sample -// function addIframe() { -// const iframe = document.createElement('iframe') as HTMLIFrameElement -// iframe.srcdoc = ` -// -// ` -// document.body.appendChild(iframe) -// } -// } + // create an iframe inside page to load sample + function addIframe() { + const iframe = document.createElement('iframe') as HTMLIFrameElement + iframe.srcdoc = ` + + ` + document.body.appendChild(iframe) + } +} // import { Sample_GraphicMesh_Trailing } from "./graphic/Sample_GraphicMesh_Trailing"; // new Sample_GraphicMesh_Trailing().run(); -new Sample_GraphicPath().run(); \ No newline at end of file +// new Sample_GraphicPath().run(); \ No newline at end of file diff --git a/samples/pick/Sample_PixelPick.ts b/samples/pick/Sample_PixelPick.ts index 5c23a384..40cbfb71 100644 --- a/samples/pick/Sample_PixelPick.ts +++ b/samples/pick/Sample_PixelPick.ts @@ -92,7 +92,7 @@ class Sample_PixelPick { let obj = this.getPickObject(e); if (obj) { let msc = obj.getComponent(MaterialStateComponent); - msc.changeColor(new Color(2, 0, 0, 1), 120); + msc.changeColor(new Color(1.2, 0, 0, 1), 120); } } @@ -100,7 +100,7 @@ class Sample_PixelPick { let obj = this.getPickObject(e); if (obj) { let msc = obj.getComponent(MaterialStateComponent); - msc.changeColor(new Color(2, 2, 0, 1), 120); + msc.changeColor(new Color(1, 1.2, 0, 1), 120); } } @@ -108,7 +108,7 @@ class Sample_PixelPick { let obj = this.getPickObject(e); if (obj) { let msc = obj.getComponent(MaterialStateComponent); - msc.changeColor(new Color(2, 0, 0, 1), 120); + msc.changeColor(new Color(1.2, 0, 0.5, 1), 120); } } @@ -116,7 +116,7 @@ class Sample_PixelPick { let obj = this.getPickObject(e); if (obj) { let msc = obj.getComponent(MaterialStateComponent); - msc.changeColor(new Color(1, 0.64, 0.8, 2.5), 100); + msc.changeColor(new Color(1, 0.64, 0.8, 1.5), 100); } } diff --git a/src/components/gui/core/GUIGeometry.ts b/src/components/gui/core/GUIGeometry.ts index f8bec48a..09680922 100644 --- a/src/components/gui/core/GUIGeometry.ts +++ b/src/components/gui/core/GUIGeometry.ts @@ -47,6 +47,36 @@ export class GUIGeometry extends GeometryBase { this.maxQuadCount = max; } + updateSubGeometry(index: number, start: number, count: number) { + let geom = this.subGeometries[index]; + if (geom) { + let desc = geom.lodLevels[0]; + desc.indexStart = start; + desc.indexCount = count; + desc.index = index; + } else { + geom = this.addSubGeometry({ + indexStart: start, + indexCount: count, + vertexStart: 0, + vertexCount: 0, + firstStart: 0, + index: index, + topology: 0, + }); + } + return geom; + } + + resetSubGeometries() { + for (let item of this.subGeometries) { + let desc = item.lodLevels[0]; + desc.indexStart = 0; + desc.indexCount = 0; + desc.index = 0; + } + } + /** * the bounds will be set to infinity * @returns GUIGeometry @@ -59,7 +89,7 @@ export class GUIGeometry extends GeometryBase { return this; } - public get vPositionBuffer(): StorageGPUBuffer { + public getPositionBuffer(): StorageGPUBuffer { if (this._onPositionChange) { this._posAttribute.buffer.apply(); this._onPositionChange = false; @@ -67,7 +97,7 @@ export class GUIGeometry extends GeometryBase { return this._posAttribute.buffer; } - public get vSpriteBuffer(): StorageGPUBuffer { + public getSpriteBuffer(): StorageGPUBuffer { if (this._onSpriteChange) { this._spriteAttribute.buffer.apply(); this._onSpriteChange = false; @@ -75,7 +105,7 @@ export class GUIGeometry extends GeometryBase { return this._spriteAttribute.buffer; } - public get vColorBuffer(): StorageGPUBuffer { + public getColorBuffer(): StorageGPUBuffer { if (this._onColorChange) { this._colorAttribute.buffer.apply(); this._onColorChange = false; @@ -120,15 +150,8 @@ export class GUIGeometry extends GeometryBase { this.setAttribute(VertexAttributeName.uv, this._attributeUV); this.setAttribute(VertexAttributeName.vIndex, this._attributeVIndex); - this.addSubGeometry({ - indexStart: 0, - indexCount: this._faceIndexes.length, - vertexStart: 0, - vertexCount: 0, - firstStart: 0, - index: 0, - topology: 0, - }); + this.updateSubGeometry(0, 0, this._faceIndexes.length); + return this; } diff --git a/src/components/gui/core/GUIGeometryRebuild.ts b/src/components/gui/core/GUIGeometryRebuild.ts index 8407b2c2..32d7cb80 100644 --- a/src/components/gui/core/GUIGeometryRebuild.ts +++ b/src/components/gui/core/GUIGeometryRebuild.ts @@ -1,9 +1,12 @@ -import { GUIQuadAttrEnum, Object3D, UIPanel } from "../../.."; import { Texture } from "../../../gfx/graphics/webGpu/core/texture/Texture"; import { UITransform } from "../uiComponents/UITransform"; import { UIRenderAble } from "../uiComponents/UIRenderAble"; import { GUIQuad } from "./GUIQuad"; import { GUITexture } from "./GUITexture"; +import { UIPanel } from "../uiComponents/UIPanel"; +import { GUIQuadAttrEnum } from "./GUIDefine"; +import { Object3D } from "../../../core/entities/Object3D"; +import { GUIMaterial } from "./GUIMaterial"; /** * This class is responsible for performing the Geometry reconstruction work of the GUI @@ -22,33 +25,57 @@ export class GUIGeometryRebuild { * @returns Return the build result (the maximum number of textures supported by GUIMaterials for a single UIPanel is limited and cannot exceed the limit) */ public build(transforms: UITransform[], panel: UIPanel, forceUpdate: boolean): boolean { + let geometry = panel['_geometry']; + geometry.resetSubGeometries(); + let quadIndex = -1; - let texIndex = -1; + let texIndex = 0; + + let indexStart = 0; + let indexCount = 0; + let geometryIndex = 0; - this._textureMap.clear(); - this._textureList.length = 0; + let textureList = this._textureList; + let textureMap = this._textureMap; - let collectQuads = []; + function flushPanel() { + if (indexCount > 0) { + panel.updateDrawCallSegment(geometryIndex, indexStart, indexCount); + let material: GUIMaterial = panel['_uiRenderer']['materials'][geometryIndex] as any; + material.setTextures(textureList); + textureMap.clear(); + textureList.length = 0; + geometryIndex++; + indexStart += indexCount; + indexCount = 0; + texIndex = 0; + } + } + + textureMap.clear(); + textureList.length = 0; + + let collectQuads: GUIQuad[] = []; let zMax: number = panel.quadMaxCount - 1; - let needBreak: boolean; + for (let transform of transforms) { let needUpdateQuads = transform.needUpdateQuads; collectQuads.length = 0; const quads = this.collectQuads(transform.object3D, collectQuads); for (let quad of quads) { - quad.z = ++quadIndex; let textureSource = quad.sprite.guiTexture; - if (!this._textureMap.has(textureSource.staticId)) { - ++texIndex; - this._textureMap.set(textureSource.staticId, textureSource); + + if (!textureMap.has(textureSource.staticId)) { + if (texIndex == 7) flushPanel(); + + textureMap.set(textureSource.staticId, textureSource); textureSource.dynamicId = texIndex; - this._textureList[texIndex] = textureSource.texture; - if (texIndex > 7) { - console.warn('texture Count Exceeded the maximum limit of 7'); - break; - } + textureList[texIndex] = textureSource.texture; + texIndex += 1; } + quad.z = ++quadIndex; + indexCount += 6; if (quad.cacheTextureId != textureSource.dynamicId) { quad.dirtyAttributes = GUIQuadAttrEnum.MAX; quad.cacheTextureId = textureSource.dynamicId; @@ -62,21 +89,16 @@ export class GUIGeometryRebuild { quad.applyTransform(transform); } if (quad.dirtyAttributes) { - quad.writeToGeometry(panel['_geometry'], transform); + quad.writeToGeometry(geometry, transform); } if (quadIndex == zMax) { - needBreak = true; - break; + flushPanel(); + return true; } } - if (needBreak) { - break; - } } - - panel['_uiMaterial'].setTextures(this._textureList); - panel['_limitVertexCount'] = (quadIndex + 1) * 4; - return !needBreak; + flushPanel(); + return false; } private collectQuads(object3D: Object3D, list?: GUIQuad[]): GUIQuad[] { diff --git a/src/components/gui/core/GUIMaterial.ts b/src/components/gui/core/GUIMaterial.ts index ecf81945..24870765 100644 --- a/src/components/gui/core/GUIMaterial.ts +++ b/src/components/gui/core/GUIMaterial.ts @@ -37,8 +37,8 @@ export class GUIMaterial extends Material { colorPass.setUniformVector4('scissorRect', new Vector4()); colorPass.setUniformFloat('scissorCornerRadius', 0.0); colorPass.setUniformFloat('scissorFadeOutSize', 0.0); - colorPass.setUniformFloat('limitVertex', 0); colorPass.setUniformFloat('pixelRatio', 1); + colorPass.setUniformFloat('empty', 0); let shaderState = colorPass.shaderState; // shaderState.useZ = false; @@ -53,13 +53,6 @@ export class GUIMaterial extends Material { this.shader = newShader; } - /** - * Write effective vertex count (vertex index < vertexCount) - */ - public setLimitVertex(vertexCount: number) { - this.shader.setUniformFloat('limitVertex', vertexCount); - } - public setGUISolution(value: Vector2, pixelRatio: number) { this.shader.setUniformVector2('guiSolution', value); this.shader.setUniformFloat('pixelRatio', pixelRatio); diff --git a/src/components/gui/core/GUIRenderer.ts b/src/components/gui/core/GUIRenderer.ts index b53c5ca0..f6889570 100644 --- a/src/components/gui/core/GUIRenderer.ts +++ b/src/components/gui/core/GUIRenderer.ts @@ -52,9 +52,9 @@ export class GUIRenderer extends MeshRenderer { for (let i = 0; i < this.materials.length; i++) { const material = this.materials[i]; let passes = material.getPass(rendererType); - let vPosition = this._guiGeometry.vPositionBuffer; - let vSprite = this._guiGeometry.vSpriteBuffer; - let vColor = this._guiGeometry.vColorBuffer; + let vPosition = this._guiGeometry.getPositionBuffer(); + let vSprite = this._guiGeometry.getSpriteBuffer(); + let vColor = this._guiGeometry.getColorBuffer(); if (passes) { for (let j = 0; j < passes.length; j++) { const renderShader = passes[j]; diff --git a/src/components/gui/core/GUIShader.ts b/src/components/gui/core/GUIShader.ts index aa44dd20..3d80d3d4 100644 --- a/src/components/gui/core/GUIShader.ts +++ b/src/components/gui/core/GUIShader.ts @@ -181,8 +181,8 @@ export class GUIShader { scissorCornerRadius:f32, scissorFadeOutSize:f32, - limitVertex:f32, pixelRatio:f32, + empty:f32, } struct VertexOutput { @@ -247,7 +247,7 @@ export class GUIShader { var vSpriteData = vSpriteBuffer[quadIndex]; var op = vec2(0.0001); - let isValidVertex = vSpriteData.vVisible > 0.5 && vertexIndex < materialUniform.limitVertex; + let isValidVertex = vSpriteData.vVisible > 0.5; if(isValidVertex){ op = 2.0 * vertexPosition * materialUniform.pixelRatio / materialUniform.screenSize; } @@ -281,7 +281,7 @@ export class GUIShader { var op = vec4(0.0001); var vSpriteData = vSpriteBuffer[quadIndex]; - let isValidVertex = vSpriteData.vVisible > 0.5 && vertexIndex < materialUniform.limitVertex; + let isValidVertex = vSpriteData.vVisible > 0.5; if(isValidVertex){ op = globalUniform.projMat * globalUniform.viewMat * modelMatrix * localPos ; } diff --git a/src/components/gui/uiComponents/UIPanel.ts b/src/components/gui/uiComponents/UIPanel.ts index 0b8b062e..8f8f78c1 100644 --- a/src/components/gui/uiComponents/UIPanel.ts +++ b/src/components/gui/uiComponents/UIPanel.ts @@ -29,9 +29,7 @@ export class UIPanel extends UIImage { public scissorFadeOutSize: number = 0; protected _uiRenderer: GUIRenderer; - protected _uiMaterial: GUIMaterial; protected _geometry: GUIGeometry; - protected _limitVertexCount: number = 0; protected _maxCount: number = 128; public readonly isUIPanel = true; @@ -61,11 +59,25 @@ export class UIPanel extends UIImage { this.visible = false; } + public updateDrawCallSegment(index: number, indexStart: number, indexCount: number) { + this._geometry.updateSubGeometry(index, indexStart, indexCount); + let firstMaterial = this._uiRenderer.material; + let newMaterial: GUIMaterial = this._uiRenderer.materials[index] as GUIMaterial; + if (!newMaterial) { + newMaterial = new GUIMaterial(this.space); + let newMaterials = this._uiRenderer.materials.slice(); + newMaterials.push(newMaterial); + this._uiRenderer.materials = newMaterials; + newMaterial.cullMode = firstMaterial.cullMode; + newMaterial.depthCompare = firstMaterial.depthCompare; + } + } + private create(space: GUISpace) { this._maxCount = this.space == GUISpace.World ? GUIConfig.quadMaxCountForWorld : GUIConfig.quadMaxCountForView; this._uiRenderer = this.object3D.addComponent(GUIRenderer); this._geometry = this._uiRenderer.geometry = new GUIGeometry(this._maxCount).create(); - this._uiMaterial = this._uiRenderer.material = new GUIMaterial(space); + this._uiRenderer.material = new GUIMaterial(space); this._uiRenderer.renderOrder = GUIConfig.SortOrderStartWorld; this._rebuild = new GUIGeometryRebuild(); @@ -100,7 +112,9 @@ export class UIPanel extends UIImage { public set cullMode(value: GPUCullMode) { if (this.space == GUISpace.World) { - this._uiRenderer.material.cullMode = value; + for (let item of this._uiRenderer.materials) { + item.cullMode = value; + } } else { console.warn('Cannot change cullMode in view space'); } @@ -139,17 +153,19 @@ export class UIPanel extends UIImage { panel._uiRenderer.needSortOnCameraZ = panel.needSortOnCameraZ; //update material - let material = panel._uiMaterial; - material.setGUISolution(GUIConfig.solution, GUIConfig.pixelRatio); - material.setScreenSize(webGPUContext.canvas.clientWidth, webGPUContext.canvas.clientHeight); - material.setLimitVertex(panel._limitVertexCount); - material.setScissorEnable(panel.scissorEnable); - if (panel.scissorEnable) { - let maskQuad = panel.mainQuads[0]; - material.setScissorRect(maskQuad.left, maskQuad.bottom, maskQuad.right, maskQuad.top); - material.setScissorCorner(panel.scissorCornerRadius, panel.scissorFadeOutSize); + for (let item of panel['_uiRenderer'].materials) { + let material = item as GUIMaterial; + material.setGUISolution(GUIConfig.solution, GUIConfig.pixelRatio); + material.setScreenSize(webGPUContext.canvas.clientWidth, webGPUContext.canvas.clientHeight); + material.setScissorEnable(panel.scissorEnable); + if (panel.scissorEnable) { + let maskQuad = panel.mainQuads[0]; + material.setScissorRect(maskQuad.left, maskQuad.bottom, maskQuad.right, maskQuad.top); + material.setScissorCorner(panel.scissorCornerRadius, panel.scissorFadeOutSize); + } } + //clear flag panel.needUpdateGeometry = false; } diff --git a/src/components/gui/uiComponents/WorldPanel.ts b/src/components/gui/uiComponents/WorldPanel.ts index 82e58a8c..4c540127 100644 --- a/src/components/gui/uiComponents/WorldPanel.ts +++ b/src/components/gui/uiComponents/WorldPanel.ts @@ -35,7 +35,10 @@ export class WorldPanel extends UIPanel { if (this._depthTest != value) { this._depthTest = value; let compare = this.depthTest ? GPUCompareFunction.less_equal : GPUCompareFunction.always; - this._uiRenderer.material.depthCompare = compare; + for (let item of this._uiRenderer.materials) { + item.depthCompare = compare; + } + } } diff --git a/src/components/renderer/RenderNode.ts b/src/components/renderer/RenderNode.ts index 8e7b519f..d2fb4519 100644 --- a/src/components/renderer/RenderNode.ts +++ b/src/components/renderer/RenderNode.ts @@ -396,17 +396,14 @@ export class RenderNode extends ComponentBase { GPUContext.bindGeometryBuffer(renderContext.encoder, renderNode._geometry); } GPUContext.bindPipeline(renderContext.encoder, renderShader); - let subGeometries = renderNode._geometry.subGeometries; - for (let k = 0; k < subGeometries.length; k++) { - const subGeometry = subGeometries[k]; - let lodInfos = subGeometry.lodLevels; - let lodInfo = lodInfos[renderNode.lodLevel]; - - if (renderNode.instanceCount > 0) { - GPUContext.drawIndexed(renderContext.encoder, lodInfo.indexCount, renderNode.instanceCount, lodInfo.indexStart, 0, 0); - } else { - GPUContext.drawIndexed(renderContext.encoder, lodInfo.indexCount, 1, lodInfo.indexStart, 0, worldMatrix.index); - } + let subGeometry = renderNode._geometry.subGeometries[i]; + let lodInfos = subGeometry.lodLevels; + let lodInfo = lodInfos[renderNode.lodLevel]; + + if (renderNode.instanceCount > 0) { + GPUContext.drawIndexed(renderContext.encoder, lodInfo.indexCount, renderNode.instanceCount, lodInfo.indexStart, 0, 0); + } else { + GPUContext.drawIndexed(renderContext.encoder, lodInfo.indexCount, 1, lodInfo.indexStart, 0, worldMatrix.index); } } } @@ -452,12 +449,10 @@ export class RenderNode extends ComponentBase { if (matPass.pipeline) { GPUContext.bindPipeline(encoder, matPass); let subGeometries = node._geometry.subGeometries; - for (let k = 0; k < subGeometries.length; k++) { - const subGeometry = subGeometries[k]; - let lodInfos = subGeometry.lodLevels; - let lodInfo = lodInfos[node.lodLevel]; - GPUContext.drawIndexed(encoder, lodInfo.indexCount, 1, lodInfo.indexStart, 0, worldMatrix.index); - } + const subGeometry = subGeometries[i]; + let lodInfos = subGeometry.lodLevels; + let lodInfo = lodInfos[node.lodLevel]; + GPUContext.drawIndexed(encoder, lodInfo.indexCount, 1, lodInfo.indexStart, 0, worldMatrix.index); } } } diff --git a/src/core/geometry/GeometryBase.ts b/src/core/geometry/GeometryBase.ts index 54962f05..fc07e05c 100644 --- a/src/core/geometry/GeometryBase.ts +++ b/src/core/geometry/GeometryBase.ts @@ -139,10 +139,11 @@ export class GeometryBase { * add subGeometry from lod level * @param lodLevels @see LODDescriptor */ - public addSubGeometry(...lodLevels: LODDescriptor[]) { + public addSubGeometry(...lodLevels: LODDescriptor[]): SubGeometry { let sub = new SubGeometry(); sub.lodLevels = lodLevels; this.subGeometries.push(sub); + return sub; } /** diff --git a/src/gfx/renderJob/jobs/RendererJob.ts b/src/gfx/renderJob/jobs/RendererJob.ts index ec8f2fdd..c477566a 100644 --- a/src/gfx/renderJob/jobs/RendererJob.ts +++ b/src/gfx/renderJob/jobs/RendererJob.ts @@ -17,7 +17,6 @@ import { PostBase } from '../post/PostBase'; import { RendererBase } from '../passRenderer/RendererBase'; import { Ctor } from '../../../util/Global'; import { DDGIProbeRenderer } from '../passRenderer/ddgi/DDGIProbeRenderer'; -import { Texture } from '../../graphics/webGpu/core/texture/Texture'; /** * render jobs From acfb2b4d4cc2d70aab55e304619efc3a8b72a872 Mon Sep 17 00:00:00 2001 From: hellmor Date: Mon, 13 Nov 2023 17:36:10 +0800 Subject: [PATCH 21/34] chore: move GodRay setting from post file to engine setting Move GodRay setting from post file to engine setting. --- samples/post/Sample_GodRay.ts | 5 ++-- samples/utils/GUIUtil.ts | 14 +++++++++- src/Engine3D.ts | 12 ++++++--- src/gfx/renderJob/post/GodRayPost.ts | 38 +++++++++++++++++++++++----- src/index.ts | 1 + src/setting/RenderSetting.ts | 2 ++ src/setting/post/GodRaySetting.ts | 12 +++++++++ 7 files changed, 71 insertions(+), 13 deletions(-) create mode 100644 src/setting/post/GodRaySetting.ts diff --git a/samples/post/Sample_GodRay.ts b/samples/post/Sample_GodRay.ts index f8e8e3c5..f8bdebbb 100644 --- a/samples/post/Sample_GodRay.ts +++ b/samples/post/Sample_GodRay.ts @@ -36,10 +36,11 @@ class Sample_GodRay { Engine3D.startRenderView(view); let postProcessing = this.scene.addComponent(PostProcessingComponent); - postProcessing.addPost(GodRayPost); + let godRay = postProcessing.addPost(GodRayPost); postProcessing.addPost(BloomPost); GUIUtil.renderAtmosphericSky(sky, false); + GUIUtil.renderGodRay(godRay); } async initScene() { { @@ -52,7 +53,7 @@ class Sample_GodRay { lc.castShadow = true; lc.intensity = 20; this.scene.addChild(this.lightObj); - GUIUtil.renderDirLight(lc); + GUIUtil.renderDirLight(lc, false); } { diff --git a/samples/utils/GUIUtil.ts b/samples/utils/GUIUtil.ts index 5d7fa0ac..cb0b56c3 100644 --- a/samples/utils/GUIUtil.ts +++ b/samples/utils/GUIUtil.ts @@ -1,11 +1,12 @@ import { GUIHelp } from "@orillusion/debug/GUIHelp"; -import { AnimatorComponent, AtmosphericComponent, BillboardType, BlendMode, BloomPost, Color, DepthOfFieldPost, DirectLight, Engine3D, GPUCullMode, GTAOPost, GlobalFog, GlobalIlluminationComponent, LitMaterial, Material, MorphTargetBlender, Object3D, PointLight, SkinnedMeshRenderer2, SpotLight, Transform, UIImage, UIPanel, UIShadow, View3D } from "@orillusion/core"; +import { AnimatorComponent, AtmosphericComponent, BillboardType, BlendMode, BloomPost, Color, DepthOfFieldPost, DirectLight, Engine3D, GPUCullMode, GTAOPost, GlobalFog, GlobalIlluminationComponent, GodRayPost, LitMaterial, Material, MorphTargetBlender, Object3D, PointLight, SkinnedMeshRenderer2, SpotLight, Transform, UIImage, UIPanel, UIShadow, View3D } from "@orillusion/core"; import { UVMoveComponent } from "@samples/material/script/UVMoveComponent"; export class GUIUtil { + public static renderShadowSetting(open: boolean = true) { GUIHelp.addFolder('ShadowSetting'); let setting = Engine3D.setting.shadow; @@ -90,6 +91,17 @@ export class GUIUtil { GUIHelp.endFolder(); } + static renderGodRay(godRay: GodRayPost, open: boolean = true, name?: string) { + name ||= 'GodRay'; + GUIHelp.addFolder(name); + GUIHelp.add(godRay, 'blendColor'); + GUIHelp.add(godRay, 'rayMarchCount', 8, 20, 1); + GUIHelp.add(godRay, 'scatteringExponent', 1, 40, 1); + GUIHelp.add(godRay, 'intensity', 0.01, 5, 0.001); + open && GUIHelp.open(); + GUIHelp.endFolder(); + } + public static renderVector3(obj: Object3D, open: boolean = true, name?: string) { name ||= 'Vector3'; GUIHelp.addFolder(name); diff --git a/src/Engine3D.ts b/src/Engine3D.ts index ac800654..d04f92e6 100644 --- a/src/Engine3D.ts +++ b/src/Engine3D.ts @@ -168,6 +168,12 @@ export class Engine3D { scatteringExponent: 2.7, dirHeightLine: 10.0, }, + godRay: { + blendColor: true, + rayMarchCount: 16, + scatteringExponent: 5, + intensity: 0.5 + }, ssao: { enable: false, radius: 0.15, @@ -308,7 +314,7 @@ export class Engine3D { console.log('Engine Version', version); // for dev debug - if(import.meta.env.DEV){ + if (import.meta.env.DEV) { this.divB = document.createElement("div"); this.divB.style.position = 'absolute' this.divB.style.zIndex = '999' @@ -357,11 +363,11 @@ export class Engine3D { this.renderJobs.set(view, renderJob); let presentationSize = webGPUContext.presentationSize; // RTResourceMap.createRTTexture(RTResourceConfig.colorBufferTex_NAME, presentationSize[0], presentationSize[1], GPUTextureFormat.rgba16float, false); - + if (this.setting.pick.mode == `pixel`) { let postProcessing = view.scene.getOrAddComponent(PostProcessingComponent); postProcessing.addPost(FXAAPost); - + } else { } diff --git a/src/gfx/renderJob/post/GodRayPost.ts b/src/gfx/renderJob/post/GodRayPost.ts index 2a2b7ed7..2d1b9146 100644 --- a/src/gfx/renderJob/post/GodRayPost.ts +++ b/src/gfx/renderJob/post/GodRayPost.ts @@ -15,6 +15,7 @@ import { RTDescriptor } from '../../graphics/webGpu/descriptor/RTDescriptor'; import { GBufferFrame } from '../frame/GBufferFrame'; import { RTFrame } from '../frame/RTFrame'; import { GodRay_cs } from '../../../assets/shader/compute/GodRay_cs'; +import { clamp } from '../../../math/MathUtil'; export class GodRayPost extends PostBase { @@ -49,21 +50,44 @@ export class GodRayPost extends PostBase { * @internal */ onAttach(view: View3D,) { - // Engine3D.setting.render.postProcessing.gtao.enable = true; + Engine3D.setting.render.postProcessing.godRay.enable = true; this.createGUI(); } /** * @internal */Render onDetach(view: View3D,) { - // Engine3D.setting.render.postProcessing.gtao.enable = false; + Engine3D.setting.render.postProcessing.godRay.enable = false; this.removeGUI(); } - public blendColor: boolean = true; - public rayMarchCount: number = 16; - public scatteringExponent: number = 5; - public intensity: number = 0.5; + public get blendColor(): boolean { + return Engine3D.setting.render.postProcessing.godRay.blendColor; + } + public set blendColor(value: boolean) { + Engine3D.setting.render.postProcessing.godRay.blendColor = value; + } + public get rayMarchCount(): number { + return Engine3D.setting.render.postProcessing.godRay.rayMarchCount; + } + public set rayMarchCount(value: number) { + value = clamp(value, 8, 20); + Engine3D.setting.render.postProcessing.godRay.rayMarchCount = value; + } + public get scatteringExponent(): number { + return Engine3D.setting.render.postProcessing.godRay.scatteringExponent; + } + public set scatteringExponent(value: number) { + value = clamp(value, 1, 40); + Engine3D.setting.render.postProcessing.godRay.scatteringExponent = value; + } + public get intensity(): number { + return Engine3D.setting.render.postProcessing.godRay.intensity; + } + public set intensity(value: number) { + value = clamp(value, 0.01, 5); + Engine3D.setting.render.postProcessing.godRay.intensity = value; + } private createGUI() { @@ -74,7 +98,7 @@ export class GodRayPost extends PostBase { private createCompute(view: View3D) { - let setting = Engine3D.setting.render.postProcessing.gtao; + let setting = Engine3D.setting.render.postProcessing.godRay; this.godRayCompute = new ComputeShader(GodRay_cs); diff --git a/src/index.ts b/src/index.ts index 0c8bba57..2682abd5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -529,6 +529,7 @@ export * from "./setting/post/BloomSetting" export * from "./setting/post/DepthOfViewSetting" export * from "./setting/post/GTAOSetting" export * from "./setting/post/GlobalFogSetting" +export * from "./setting/post/GodRaySetting" export * from "./setting/post/OutlineSetting" export * from "./setting/post/SSRSetting" export * from "./setting/post/TAASetting" diff --git a/src/setting/RenderSetting.ts b/src/setting/RenderSetting.ts index f050347a..d86f95a7 100644 --- a/src/setting/RenderSetting.ts +++ b/src/setting/RenderSetting.ts @@ -5,6 +5,7 @@ import { OutlineSetting } from "./post/OutlineSetting"; import { SSRSetting } from "./post/SSRSetting"; import { TAASetting } from "./post/TAASetting"; import { BloomSetting } from "./post/BloomSetting"; +import { GodRaySetting } from "./post/GodRaySetting"; export type RenderSetting = { debug: boolean; @@ -43,6 +44,7 @@ export type RenderSetting = { gtao?: GTAOSetting; outline?: OutlineSetting; globalFog?: GlobalFogSetting; + godRay?: GodRaySetting; fxaa?: { enable: boolean; }; diff --git a/src/setting/post/GodRaySetting.ts b/src/setting/post/GodRaySetting.ts new file mode 100644 index 00000000..4b23bcd4 --- /dev/null +++ b/src/setting/post/GodRaySetting.ts @@ -0,0 +1,12 @@ + +/** + * GodRay + * @group Setting + */ +export type GodRaySetting = { + enable?: boolean, + blendColor: boolean, + rayMarchCount: number, + scatteringExponent: number, + intensity: number +}; \ No newline at end of file From fc99f78b9c91a546a83612d87723958fb9756c09 Mon Sep 17 00:00:00 2001 From: hellmor Date: Mon, 13 Nov 2023 18:04:55 +0800 Subject: [PATCH 22/34] chore: get param from setting. Get param from setting. --- src/gfx/renderJob/post/GodRayPost.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/gfx/renderJob/post/GodRayPost.ts b/src/gfx/renderJob/post/GodRayPost.ts index 2d1b9146..38a5e314 100644 --- a/src/gfx/renderJob/post/GodRayPost.ts +++ b/src/gfx/renderJob/post/GodRayPost.ts @@ -168,16 +168,18 @@ export class GodRayPost extends PostBase { this.godRayCompute.setUniformBuffer('globalUniform', globalUniform.uniformGPUBuffer); } - this.godRaySetting.setFloat('intensity', this.intensity); - this.godRaySetting.setFloat('rayMarchCount', this.rayMarchCount); + let setting = Engine3D.setting.render.postProcessing.godRay; + + this.godRaySetting.setFloat('intensity', setting.intensity); + this.godRaySetting.setFloat('rayMarchCount', setting.rayMarchCount); let presentationSize = webGPUContext.presentationSize; let w = presentationSize[0]; let h = presentationSize[1]; this.godRaySetting.setFloat('viewPortWidth', w); this.godRaySetting.setFloat('viewPortHeight', h); - this.godRaySetting.setFloat('blendColor', this.blendColor ? 1 : 0); - this.godRaySetting.setFloat('scatteringExponent', this.scatteringExponent); + this.godRaySetting.setFloat('blendColor', setting.blendColor ? 1 : 0); + this.godRaySetting.setFloat('scatteringExponent', setting.scatteringExponent); this.godRaySetting.apply(); GPUContext.computeCommand(command, [this.godRayCompute]); GPUContext.lastRenderPassState = this.rendererPassState; From 6e40eab7723ae190dbb1708bc6b688b376a2ebd2 Mon Sep 17 00:00:00 2001 From: OldGentleMan Date: Tue, 14 Nov 2023 14:34:05 +0800 Subject: [PATCH 23/34] feat: add new graphic face add new graphic face --- samples/graphic/Sample_GraphicPath.ts | 30 +- samples/graphic/Sample_GraphicPath2.ts | 173 +++++++++ samples/graphic/Sample_GraphicPath3.ts | 157 ++++++++ samples/graphic/Sample_GraphicShape.ts | 137 +++++++ samples/index.ts | 16 +- .../shader/graphic/GraphicFaceComput2.ts | 247 +++++++++++++ .../shader/graphic/GraphicFaceCompute.ts | 342 ++++++++++++++++++ .../shader/graphic/GraphicFaceCompute3.ts | 259 +++++++++++++ .../shader/graphic/GraphicTrailCompute.ts | 113 ++++-- src/core/geometry/GeometryVertexBuffer.ts | 1 - .../webGpu/core/buffer/GPUBufferBase.ts | 55 +-- .../graphic/new/Float32ArrayUtil.ts | 11 + .../graphic/new/Graphic3DFaceRenderer.ts | 172 +++++++++ .../passRenderer/graphic/new/Graphic3DMesh.ts | 19 +- .../graphic/new/Graphic3DRibbonRenderer.ts | 36 +- src/index.ts | 6 + src/shape/TriGeometry.ts | 62 ++++ src/util/SerializeDecoration.ts | 2 +- src/util/struct/Struct.ts | 7 +- 19 files changed, 1741 insertions(+), 104 deletions(-) create mode 100644 samples/graphic/Sample_GraphicPath2.ts create mode 100644 samples/graphic/Sample_GraphicPath3.ts create mode 100644 samples/graphic/Sample_GraphicShape.ts create mode 100644 src/assets/shader/graphic/GraphicFaceComput2.ts create mode 100644 src/assets/shader/graphic/GraphicFaceCompute.ts create mode 100644 src/assets/shader/graphic/GraphicFaceCompute3.ts create mode 100644 src/gfx/renderJob/passRenderer/graphic/new/Float32ArrayUtil.ts create mode 100644 src/gfx/renderJob/passRenderer/graphic/new/Graphic3DFaceRenderer.ts create mode 100644 src/shape/TriGeometry.ts diff --git a/samples/graphic/Sample_GraphicPath.ts b/samples/graphic/Sample_GraphicPath.ts index 4c27ff21..2a694c06 100644 --- a/samples/graphic/Sample_GraphicPath.ts +++ b/samples/graphic/Sample_GraphicPath.ts @@ -76,9 +76,11 @@ export class Sample_GraphicPath { let texts = []; + texts.push(await Engine3D.res.loadTexture("textures/frame64.png") as BitmapTexture2D); + texts.push(await Engine3D.res.loadTexture("textures/line_001064.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("particle/fx_a_fragment_003.png") as BitmapTexture2D); // texts.push(await Engine3D.res.loadTexture("textures/grid.jpg") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/frame.png") as BitmapTexture2D); // texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); // texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); @@ -94,12 +96,14 @@ export class Sample_GraphicPath { GUIHelp.add(this, "cafe", 0.0, 100.0); GUIHelp.add(this, "frame", 0.0, 100.0); { - this.width = 1; + this.width = 40; this.height = 1; let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 255, this.width * this.height); this.parts = mr.object3Ds; - this.trail3ds = mr.ribbon3Ds; + + + mr.material.blendMode = BlendMode.SOFT_ADD; mr.material.transparent = true; // mr.material.doubleSide = true; @@ -126,25 +130,25 @@ export class Sample_GraphicPath { private tmpArray: any[] = []; update() { + this.updateOnce(Time.frame); } updateOnce(engineFrame: number) { if (this.trail3ds && this.trail3ds.length > 0) { + // Vector3.HELP_0.x = Math.random() * 10 - 5; + // Vector3.HELP_0.y = Math.random() * 2 - 1; + // Vector3.HELP_0.z = Math.random() * 10 - 5; + Vector3.HELP_0.set(0, 0, 0); + // let offsetAngle = Math.random() * 360; for (let i = 0; i < this.trail3ds.length; i++) { const trail3d = this.trail3ds[i]; - Vector3.HELP_0.x = Math.random() * 10 - 5; - Vector3.HELP_0.y = Math.random() * 2 - 1; - Vector3.HELP_0.z = Math.random() * 10 - 5; - let offsetAngle = Math.random() * 360; + let offsetAngle = i * 2.0; + for (let j = 0; j < trail3d.length; j++) { let p = j / (trail3d.length - 1); - // trail3d[j].x = j * 0.1 + Math.cos(p * (trail3d.length / 10)) * 5; - // trail3d[j].y = Math.sin(p * (trail3d.length / 10)) * 5 + 10; - // trail3d[j].z = i * 10; - - trail3d[j].x = Math.sin(p * (trail3d.length / 15) + offsetAngle) * p * 35 + Vector3.HELP_0.x; + trail3d[j].x = Math.sin(p * (trail3d.length / 15) + offsetAngle + engineFrame * 0.001) * p * 35 + Vector3.HELP_0.x; trail3d[j].y = j * 0.2 + Vector3.HELP_0.y; - trail3d[j].z = Math.cos(p * (trail3d.length / 10) + offsetAngle) * p * 35 + Vector3.HELP_0.z; + trail3d[j].z = Math.cos(p * (trail3d.length / 10) + offsetAngle + engineFrame * 0.001) * p * 35 + Vector3.HELP_0.z; // let obj = Object3DUtil.GetSingleSphere(0.1, 1, 0, 0); // this.scene.addChild(obj); diff --git a/samples/graphic/Sample_GraphicPath2.ts b/samples/graphic/Sample_GraphicPath2.ts new file mode 100644 index 00000000..2752464b --- /dev/null +++ b/samples/graphic/Sample_GraphicPath2.ts @@ -0,0 +1,173 @@ +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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion, PingPong, Object3DUtil, GPUPrimitiveTopology, RibbonStruct } from "@orillusion/core"; +import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Stats } from "@orillusion/stats"; + +export class Sample_GraphicPath2 { + lightObj3D: Object3D; + scene: Scene3D; + parts: Object3D[]; + width: number; + height: number; + cafe: number = 47; + frame: number = 16; + view: View3D; + + colors: Color[]; + cubeArray: Object3D[]; + ribbons: RibbonStruct[]; + + constructor() { } + + async run() { + + Matrix4.maxCount = 300000; + Matrix4.allocCount = 300000; + + await Engine3D.init({ beforeRender: () => this.update() }); + + Engine3D.setting.render.debug = true; + Engine3D.setting.shadow.shadowBound = 80; + + this.colors = []; + + GUIHelp.init(); + + this.scene = new Scene3D(); + this.scene.addComponent(Stats); + let sky = this.scene.addComponent(AtmosphericComponent); + // sky.enable = false; + let camera = CameraUtil.createCamera3DObject(this.scene); + camera.perspective(60, Engine3D.aspect, 1, 1000.0); + + camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 35); + + this.view = new View3D(); + this.view.scene = this.scene; + this.view.camera = camera; + + Engine3D.startRenderView(this.view); + + GUIUtil.renderDebug(); + + let post = this.scene.addComponent(PostProcessingComponent); + let bloom = post.addPost(BloomPost); + bloom.bloomIntensity = 1.0 + GUIUtil.renderBloom(bloom); + + await this.initScene(); + + sky.relativeTransform = this.lightObj3D.transform; + } + + async initScene() { + /******** light *******/ + { + this.lightObj3D = new Object3D(); + this.lightObj3D.rotationX = 21; + this.lightObj3D.rotationY = 108; + this.lightObj3D.rotationZ = 10; + let directLight = this.lightObj3D.addComponent(DirectLight); + directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + directLight.castShadow = true; + directLight.intensity = 10; + GUIUtil.renderDirLight(directLight); + this.scene.addChild(this.lightObj3D); + } + { + let floorObj = Object3DUtil.GetCube(); + floorObj.scaleX = 500; + floorObj.scaleY = 0.1; + floorObj.scaleZ = 500; + this.scene.addChild(floorObj); + + let o1 = Object3DUtil.GetCube(); + o1.x = 10; + o1.y = 0.5; + o1.z = 0; + this.scene.addChild(o1); + + let o2 = Object3DUtil.GetCube(); + o2.x = 10; + o2.y = 0.5; + o2.z = 5; + this.scene.addChild(o2); + + let o3 = Object3DUtil.GetCube(); + o3.x = 20; + o3.y = 0.5; + o3.z = 5; + this.scene.addChild(o3); + + let o4 = Object3DUtil.GetCube(); + o4.x = 20; + o4.y = 0.5; + o4.z = 25; + this.scene.addChild(o4); + + let o5 = Object3DUtil.GetCube(); + o5.x = 5; + o5.y = 0.5; + o5.z = 25; + this.scene.addChild(o5); + + let o6 = Object3DUtil.GetCube(); + o6.x = 5; + o6.y = 0.5; + o6.z = 5; + this.scene.addChild(o6); + + this.cubeArray = []; + this.cubeArray.push(o1); + this.cubeArray.push(o2); + this.cubeArray.push(o3); + this.cubeArray.push(o4); + this.cubeArray.push(o5); + this.cubeArray.push(o6); + } + + + let texts = []; + texts.push(await Engine3D.res.loadTexture("textures/line_001064.png") as BitmapTexture2D); + + let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); + bitmapTexture2DArray.setTextures(texts); + + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = bitmapTexture2DArray; + mat.name = "LitMaterial"; + + { + this.width = 1; + this.height = 1; + let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 5, this.width * this.height); + this.parts = mr.object3Ds; + this.ribbons = mr.ribbons; + + mr.material.blendMode = BlendMode.SOFT_ADD; + mr.material.transparent = true; + mr.material.depthWriteEnabled = false; + mr.material.doubleSide = true; + + for (let i = 0; i < this.width * this.height; i++) { + mr.setTextureID(i, Math.floor(Math.random() * texts.length)); + } + + let c2 = new Color(1.0, 1.1, 0.2, 0.65); + this.colors.push(c2); + } + + for (let i = 0; i < this.cubeArray.length; i++) { + const element = this.cubeArray[i]; + this.ribbons[0].ribbonPoint[i].localPosition = element.transform.worldPosition; + } + } + + update() { + } + + updateOnce(engineFrame: number) { + + } + +} diff --git a/samples/graphic/Sample_GraphicPath3.ts b/samples/graphic/Sample_GraphicPath3.ts new file mode 100644 index 00000000..fddbc442 --- /dev/null +++ b/samples/graphic/Sample_GraphicPath3.ts @@ -0,0 +1,157 @@ +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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion, PingPong, Object3DUtil, GPUPrimitiveTopology, RibbonStruct } from "@orillusion/core"; +import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Stats } from "@orillusion/stats"; + +export class Sample_GraphicPath3 { + lightObj3D: Object3D; + scene: Scene3D; + parts: Object3D[]; + width: number; + height: number; + view: View3D; + colors: Color[]; + cubeArray: Object3D[]; + ribbons: RibbonStruct[]; + count: number = 10; + + constructor() { } + + async run() { + + Matrix4.maxCount = 300000; + Matrix4.allocCount = 300000; + + await Engine3D.init({ beforeRender: () => this.update() }); + + Engine3D.setting.render.debug = true; + Engine3D.setting.shadow.shadowBound = 80; + + this.colors = []; + + GUIHelp.init(); + + this.scene = new Scene3D(); + this.scene.addComponent(Stats); + let sky = this.scene.addComponent(AtmosphericComponent); + // sky.enable = false; + let camera = CameraUtil.createCamera3DObject(this.scene); + camera.perspective(60, Engine3D.aspect, 1, 1000.0); + + camera.object3D.addComponent(HoverCameraController).setCamera(30, -60, 35); + + this.view = new View3D(); + this.view.scene = this.scene; + this.view.camera = camera; + + Engine3D.startRenderView(this.view); + + GUIUtil.renderDebug(); + + let post = this.scene.addComponent(PostProcessingComponent); + let bloom = post.addPost(BloomPost); + bloom.bloomIntensity = 1.0 + GUIUtil.renderBloom(bloom); + + await this.initScene(); + + sky.relativeTransform = this.lightObj3D.transform; + } + + async initScene() { + /******** light *******/ + { + this.lightObj3D = new Object3D(); + this.lightObj3D.rotationX = 21; + this.lightObj3D.rotationY = 108; + this.lightObj3D.rotationZ = 10; + let directLight = this.lightObj3D.addComponent(DirectLight); + directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + directLight.castShadow = true; + directLight.intensity = 10; + GUIUtil.renderDirLight(directLight); + this.scene.addChild(this.lightObj3D); + } + { + let floorObj = Object3DUtil.GetCube(); + floorObj.scaleX = 500; + floorObj.scaleY = 0.1; + floorObj.scaleZ = 500; + this.scene.addChild(floorObj); + + this.cubeArray = []; + let dirs = [ + Vector3.FORWARD, + Vector3.RIGHT, + Vector3.BACK, + Vector3.LEFT, + ]; + + let lastPos: Vector3 = Vector3.ZERO; + for (let i = 0; i < this.count; i++) { + let space = Math.random() * 10 + 2; + let dirIndex = Math.floor(Math.random() / 0.25); + let pos = dirs[dirIndex].clone().scaleBy(space); + let o1 = Object3DUtil.GetCube(); + o1.x = lastPos.x + pos.x; + o1.y = 0.5; + o1.z = lastPos.z + pos.z; + lastPos.set(o1.x, o1.y, o1.z); + this.scene.addChild(o1); + o1.transform.enable = false; + this.cubeArray.push(o1); + } + } + + + let texts = []; + texts.push(await Engine3D.res.loadTexture("textures/line_001064.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/frame64.png") as BitmapTexture2D); + + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); + + let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); + bitmapTexture2DArray.setTextures(texts); + + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = bitmapTexture2DArray; + mat.baseColor = new Color(2.0, 2.0, 2.0, 1.0) + mat.name = "LitMaterial"; + + { + this.width = 1; + this.height = 1; + let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, this.count - 1, this.width * this.height); + this.parts = mr.object3Ds; + this.ribbons = mr.ribbons; + + mr.material.blendMode = BlendMode.SOFT_ADD; + mr.material.transparent = true; + mr.material.depthWriteEnabled = false; + mr.material.doubleSide = true; + + for (let i = 0; i < this.width * this.height; i++) { + mr.setTextureID(i, Math.floor(Math.random() * texts.length)); + } + + let c2 = new Color(1.0, 1.1, 0.2, 0.65); + this.colors.push(c2); + } + + for (let i = 0; i < this.cubeArray.length; i++) { + const element = this.cubeArray[i]; + this.ribbons[0].ribbonPoint[i].localPosition = element.transform.worldPosition; + } + } + + update() { + } + + updateOnce(engineFrame: number) { + + } + +} diff --git a/samples/graphic/Sample_GraphicShape.ts b/samples/graphic/Sample_GraphicShape.ts new file mode 100644 index 00000000..7351d466 --- /dev/null +++ b/samples/graphic/Sample_GraphicShape.ts @@ -0,0 +1,137 @@ +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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion, PingPong, Object3DUtil, GPUPrimitiveTopology, Float32ArrayUtil, Vector4 } from "@orillusion/core"; +import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Stats } from "@orillusion/stats"; + +export class Sample_GraphicShape { + lightObj3D: Object3D; + scene: Scene3D; + parts: Object3D[]; + width: number; + height: number; + cafe: number = 47; + frame: number = 16; + view: View3D; + + colors: Color[]; + trail3ds: Object3D[][]; + + constructor() { } + + async run() { + + Matrix4.maxCount = 300000; + Matrix4.allocCount = 300000; + + await Engine3D.init({ beforeRender: () => this.update() }); + + Engine3D.setting.render.debug = true; + Engine3D.setting.shadow.shadowBound = 5; + + this.colors = []; + + GUIHelp.init(); + + this.scene = new Scene3D(); + this.scene.addComponent(Stats); + let sky = this.scene.addComponent(AtmosphericComponent); + sky.enable = false; + let camera = CameraUtil.createCamera3DObject(this.scene); + camera.perspective(60, Engine3D.aspect, 1, 5000.0); + + camera.object3D.addComponent(HoverCameraController).setCamera(30, -60, 25); + + this.view = new View3D(); + this.view.scene = this.scene; + this.view.camera = camera; + + Engine3D.startRenderView(this.view); + + // GUIUtil.renderDebug(); + + // let post = this.scene.addComponent(PostProcessingComponent); + // let bloom = post.addPost(BloomPost); + // bloom.bloomIntensity = 1.0 + // GUIUtil.renderBloom(bloom); + + await this.initScene(); + + sky.relativeTransform = this.lightObj3D.transform; + } + + async initScene() { + /******** light *******/ + { + this.lightObj3D = new Object3D(); + this.lightObj3D.rotationX = 21; + this.lightObj3D.rotationY = 108; + this.lightObj3D.rotationZ = 10; + let directLight = this.lightObj3D.addComponent(DirectLight); + directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); + directLight.castShadow = false; + directLight.intensity = 10; + // GUIUtil.renderDirLight(directLight); + this.scene.addChild(this.lightObj3D); + } + + + let texts = []; + texts.push(await Engine3D.res.loadTexture("textures/frame64.png") as BitmapTexture2D); + // texts.push(await Engine3D.res.loadTexture("textures/line_001064.png") as BitmapTexture2D); + + let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); + bitmapTexture2DArray.setTextures(texts); + + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = bitmapTexture2DArray; + mat.name = "LitMaterial"; + + GUIHelp.add(this, "cafe", 0.0, 100.0); + GUIHelp.add(this, "frame", 0.0, 100.0); + { + this.width = 1; + this.height = 1; + let mr = Graphic3DMesh.drawShape("s1", this.scene, bitmapTexture2DArray); + this.parts = mr.object3Ds; + mr.material.blendMode = BlendMode.SOFT_ADD; + for (let i = 0; i < this.width * this.height; i++) { + mr.setTextureID(i, Math.floor(Math.random() * texts.length)); + } + + mr.shapes[0].shapeType = 3; + mr.shapes[0].pathCount = 4; + mr.shapes[0].width = 0.5; + mr.shapes[0].vSpeed = 10; + + let neg = false; + if (neg) { + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 0, new Vector4(0, 0, -10, 0)); + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 1, new Vector4(0, 0, 0, 0)); + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 2, new Vector4(10, 0, -10, 0)); + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 3, new Vector4(10, 0, 10, 0)); + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 4, new Vector4(10, 0, -20, 0)); + } else { + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 0, new Vector4(10, 0, -10, 0)); + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 1, new Vector4(0, 0, 0, 0)); + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 2, new Vector4(0, 0, -10, 0)); + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 3, new Vector4(10, 0, 10, 0)); + Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 4, new Vector4(-10, 0, 20, 0)); + } + + // let pos = Vector4.ZERO; + // let space = 15; + // for (let i = 0; i < mr.shapes[0].pathCount + 1; i++) { + // let newPos = new Vector4(); + // newPos.x = pos.x + Math.random() * space + Math.random() * space - space * 0.5; + // newPos.y = pos.y + 0; + // newPos.z = pos.z + Math.random() * space + Math.random() * space - space * 0.5; + // pos.copyFrom(newPos); + // Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, i, newPos); + // } + mr.updateShape(0, mr.shapes[0]); + } + } + + update() { + } +} diff --git a/samples/index.ts b/samples/index.ts index 86d3a212..a7aa9a55 100644 --- a/samples/index.ts +++ b/samples/index.ts @@ -1,4 +1,11 @@ +<<<<<<< Updated upstream // import { Sample_GraphicPath } from "./graphic/Sample_GraphicPath" +======= +import { Sample_GraphicPath } from "./graphic/Sample_GraphicPath" +import { Sample_GraphicPath2 } from "./graphic/Sample_GraphicPath2"; +import { Sample_GraphicPath3 } from "./graphic/Sample_GraphicPath3"; +import { Sample_GraphicShape } from "./graphic/Sample_GraphicShape"; +>>>>>>> Stashed changes /******** Load all samples in /src/sample/ ********/ { @@ -75,4 +82,11 @@ // import { Sample_GraphicMesh_Trailing } from "./graphic/Sample_GraphicMesh_Trailing"; // new Sample_GraphicMesh_Trailing().run(); -// new Sample_GraphicPath().run(); \ No newline at end of file +<<<<<<< Updated upstream +// new Sample_GraphicPath().run(); +======= +// new Sample_GraphicPath().run(); +// new Sample_GraphicPath2().run(); +// new Sample_GraphicPath3().run(); +new Sample_GraphicShape().run(); +>>>>>>> Stashed changes diff --git a/src/assets/shader/graphic/GraphicFaceComput2.ts b/src/assets/shader/graphic/GraphicFaceComput2.ts new file mode 100644 index 00000000..31a9191e --- /dev/null +++ b/src/assets/shader/graphic/GraphicFaceComput2.ts @@ -0,0 +1,247 @@ +export let graphicFaceCompute2 = (segmentCode: number) => { + let code = /*wgsl*/` + #include "GlobalUniform" + struct VertexInfo{ + position:vec3f, + nx:f32, + ny:f32, + nz:f32, + uv_x:f32, + uv_y:f32, + uv2_x:f32, + uv2_y:f32, + index:f32, + index2:f32 + } + + struct GeometryInfo{ + index : u32 , + faceStart : u32 , + faceEnd : u32 , + faceCount : u32 , + } + + struct ShapeInfo{ + shapeIndex:f32, //face,poly,rectangle,line,cycle,,box,sphere + shapeType:f32, + width:f32, + height:f32, + pathCount:f32, + uSpeed:f32, + vSpeed:f32, + radiu:f32, + paths:array + } + + @group(0) @binding(1) var vertexBuffer : array; + // @group(0) @binding(2) var geometryInfoBuffer : array; + @group(0) @binding(2) var shapeBuffer : array; + // @group(0) @binding(3) var models : array>; + var shapeIndex:u32 ; + var segIndex:u32 ; + var segCount:u32 ; + var time:f32 ; + var shape:ShapeInfo ; + @compute @workgroup_size(256) + fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) global_invocation_id : vec3){ + shapeIndex = workgroup_id.x ; + segIndex = workgroup_id.y * 256u + global_invocation_id.x ; + shape = shapeBuffer[shapeIndex]; + segCount = u32(shape.pathCount -1.0); + // segIndex = 3u ; + if( segIndex < segCount ){ + time = globalUniform.time * 0.001; + let uv = vec2f(0.0,0.0); + // geometryInfoBuffer[0].index = 0; + switch (u32(shape.shapeType)) { + case 0u:{ + // drawFace(0u,shape.paths[0].xyz,shape.paths[1].xyz,shape.paths[2].xyz,uv,uv,uv); + break; + } + case 1u:{ + // drawFace(0u,shape.paths[0].xyz,shape.paths[1].xyz,shape.paths[2].xyz,uv,uv,uv); + // drawFace(1u,shape.paths[2].xyz,shape.paths[3].xyz,shape.paths[0].xyz,uv,uv,uv); + break; + } + case 2u:{ + // drawFace(0u,shape.paths[0].xyz,shape.paths[1].xyz,shape.paths[2].xyz,uv,uv,uv); + // drawFace(1u,shape.paths[2].xyz,shape.paths[3].xyz,shape.paths[0].xyz,uv,uv,uv); + break; + } + case 3u:{ + // if(segIndex < u32(shape.pathCount)){ + drawLine(segIndex,shape,vec3f(0.0,1.0,0.0)); + // } + break; + } + default: + { + break; + } + } + } + } + + fn drawLine(segi:u32,shapeInfo:ShapeInfo,up:vec3f){ + if(segCount == 1u){ + drawPolyStartEnd(segi,shapeInfo,up); + }else{ + if(segi == 0u){ + let l0 = segi ; + let l1 = segi + 1u; + let l2 = segi + 2u; + genDir(l0,l1,l2,shapeInfo,up); + }else if(segi == (segCount -1u)){ + let l0 = segi - 1u; + let l1 = segi ; + let l2 = segi + 1u; + genDir2(l0,l1,l2,shapeInfo,up); + } + } + } + + fn genDir(l0:u32,l1:u32,l2:u32,shapeInfo:ShapeInfo,up:vec3f){ + let p0 = shapeInfo.paths[l0].xyz; + let p1 = shapeInfo.paths[l1].xyz; + let p2 = shapeInfo.paths[l2].xyz; + + let d0 = normalize(p1 - p0) ; + let d1 = normalize(p2 - p1) ; + let dc = normalize(d1 - d0) ; + + let sOe = dot(d0,dc); + let neg = dirNeg(sOe) ; + + let angle = acos(sOe) ; + let lc = shapeInfo.width / sin(angle) ; + + let right = cross( normalize(d0) , up ); + let first_l = -right * shapeInfo.width + p0; + let first_r = right * shapeInfo.width + p0; + + let end_l = lc * dc + p1 ; + // let end_l = -right * shapeInfo.width + p1; + let end_r = right * shapeInfo.width + p1; + // let end_r = lc * dc * 2.0 + p1; + + let uScale = 1.0 ; + let lVScale = length(end_l - first_l); + let rVScale = length(end_r - first_r); + + let u0 = vec2f(0.0,0.0) ;//* + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0) ;//* + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,rVScale) ;//* + vec2f(0.0,1.0) /* vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,lVScale) ;//* + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + drawFace(l0 * 2u + 0u,first_l,first_r,end_l,u0,u1,u3); + drawFace(l0 * 2u + 1u,first_r,end_r,end_l,u1,u2,u3); + } + + + fn genDir2(l0:u32,l1:u32,l2:u32,shapeInfo:ShapeInfo,up:vec3f){ + let p0 = shapeInfo.paths[l0].xyz; + let p1 = shapeInfo.paths[l1].xyz; + let p2 = shapeInfo.paths[l2].xyz; + + let d0 = normalize(p1 - p0) ; + let d1 = normalize(p2 - p1) ; + let dc = normalize(d1 - d0) ; + + let sOe = dot(d0,dc); + let neg = dirNeg(sOe) ; + + let angle = acos(sOe) ; + let lc = shapeInfo.width / sin(angle) ; + let offsetV = shapeInfo.width / tan(angle) * neg; + + let right = cross( normalize(d1) , up ); + let first_l = lc * dc + p1; + let first_r = right * shapeInfo.width + p1; + + let end_l = -right * shapeInfo.width + p2; + let end_r = right * shapeInfo.width + p2; + + let uScale = 1.0 ; + let lVScale = length(end_l - first_l) ; + let rVScale = length(end_r - first_r) ; + + let u0 = vec2f(0.0,0.0) ;//* + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0 - offsetV) ;//* + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,rVScale - offsetV) ;//* + vec2f(0.0,1.0) /* vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,lVScale) ;//* + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + drawFace(l1 * 2u + 0u,first_l,first_r,end_l,u0,u1,u3); + drawFace(l1 * 2u + 1u,first_r,end_r,end_l,u1,u2,u3); + } + + fn drawPolyStartEnd(segi:u32,shapeInfo:ShapeInfo,up:vec3f){ + let firstSegi = segi ; + let endSegi = segi + 1u; + let nextSegi = segi + 2u; + + let p0 = shapeInfo.paths[firstSegi].xyz; + let p1 = shapeInfo.paths[endSegi].xyz; + // let p2 = shapeInfo.paths[nextSegi].xyz; + + let dir = p1 - p0 ; + let right = cross( normalize(dir) , up ); + let first_l = -right * shapeInfo.width + p0; + let first_r = right * shapeInfo.width + p0; + + let end_l = -right * shapeInfo.width + p1; + let end_r = right * shapeInfo.width + p1; + + let uScale = 1.0 ; + let vScale = length(dir); + + let u0 = vec2f(0.0,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,vScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,vScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + drawFace(segi * 2u + 0u,first_l,first_r,end_l,u0,u1,u3); + drawFace(segi * 2u + 1u,first_r,end_r,end_l,u1,u2,u3); + } + + fn drawFace( fID:u32, v1:vec3f , v2:vec3f , v3:vec3f , u1:vec2f , u2:vec2f, u3:vec2f){ + let uv2 = vec2f(0.0,0.0); + let n = getNormal(v1,v2,v3); + writeVertexBuffer(fID*3u+0u,v1,n,u1,uv2); + writeVertexBuffer(fID*3u+1u,v2,n,u2,uv2); + writeVertexBuffer(fID*3u+2u,v3,n,u3,uv2); + } + + fn getNormal(v1:vec3f , v2:vec3f , v3:vec3f) -> vec3f{ + let p0 = v2 - v1 ; + let p1 = v3 - v2 ; + let n = cross(p0,p1); + return normalize(n); + } + + fn writeVertexBuffer( vID:u32 , pos:vec3f , normal:vec3f , uv:vec2f, uv2:vec2f ){ + vertexBuffer[vID].position = pos; + vertexBuffer[vID].nx = normal.x ; + vertexBuffer[vID].ny = normal.y ; + vertexBuffer[vID].nz = normal.z ; + vertexBuffer[vID].uv_x = uv.x ; + vertexBuffer[vID].uv_y = uv.y ; + vertexBuffer[vID].uv2_x = uv2.x ; + vertexBuffer[vID].uv2_y = uv2.y ; + vertexBuffer[vID].index = f32(0) ; + } + + fn dirNeg(cosO:f32) -> f32{ + var neg = 1.0 ; + if(cosO == 0.0){ + neg = 0.0 ; + }else if(cosO < 0.0){ + neg = -1.0 ; + } + return neg ; + } + + ` + return code; +} + + diff --git a/src/assets/shader/graphic/GraphicFaceCompute.ts b/src/assets/shader/graphic/GraphicFaceCompute.ts new file mode 100644 index 00000000..721bdc00 --- /dev/null +++ b/src/assets/shader/graphic/GraphicFaceCompute.ts @@ -0,0 +1,342 @@ +export let graphicFaceCompute = (segmentCode: number) => { + let code = /*wgsl*/` + #include "GlobalUniform" + struct VertexInfo{ + position:vec3f, + nx:f32, + ny:f32, + nz:f32, + uv_x:f32, + uv_y:f32, + uv2_x:f32, + uv2_y:f32, + index:f32, + index2:f32 + } + + struct GeometryInfo{ + index : u32 , + faceStart : u32 , + faceEnd : u32 , + faceCount : u32 , + } + + struct ShapeInfo{ + shapeIndex:f32, //face,poly,rectangle,line,cycle,,box,sphere + shapeType:f32, + width:f32, + height:f32, + pathCount:f32, + uSpeed:f32, + vSpeed:f32, + radiu:f32, + paths:array + } + + @group(0) @binding(1) var vertexBuffer : array; + // @group(0) @binding(2) var geometryInfoBuffer : array; + @group(0) @binding(2) var shapeBuffer : array; + // @group(0) @binding(3) var models : array>; + var shapeIndex:u32 ; + var segIndex:u32 ; + var segCount:u32 ; + var time:f32 ; + var shape:ShapeInfo ; + @compute @workgroup_size(256) + fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) global_invocation_id : vec3){ + shapeIndex = workgroup_id.x ; + segIndex = workgroup_id.y * 256u + global_invocation_id.x ; + shape = shapeBuffer[shapeIndex]; + segCount = u32(shape.pathCount -1.0); + // segIndex = 3u ; + if( segIndex < segCount ){ + time = globalUniform.time * 0.001; + let uv = vec2f(0.0,0.0); + // geometryInfoBuffer[0].index = 0; + switch (u32(shape.shapeType)) { + case 0u:{ + // drawFace(0u,shape.paths[0].xyz,shape.paths[1].xyz,shape.paths[2].xyz,uv,uv,uv); + break; + } + case 1u:{ + // drawFace(0u,shape.paths[0].xyz,shape.paths[1].xyz,shape.paths[2].xyz,uv,uv,uv); + // drawFace(1u,shape.paths[2].xyz,shape.paths[3].xyz,shape.paths[0].xyz,uv,uv,uv); + break; + } + case 2u:{ + // drawFace(0u,shape.paths[0].xyz,shape.paths[1].xyz,shape.paths[2].xyz,uv,uv,uv); + // drawFace(1u,shape.paths[2].xyz,shape.paths[3].xyz,shape.paths[0].xyz,uv,uv,uv); + break; + } + case 3u:{ + // if(segIndex < u32(shape.pathCount)){ + drawLine(segIndex,shape,vec3f(0.0,1.0,0.0)); + // } + break; + } + default: + { + break; + } + } + } + } + + fn drawLine(segi:u32,shapeInfo:ShapeInfo,up:vec3f){ + if(segCount == 1u){ + drawPolyStartEnd(segi,shapeInfo,up); + }else{ + if(segi == (segCount -1u)){ + let l0 = segi - 1u; + let l1 = segi ; + let l2 = segi + 1u; + drawLineEnd(l0,l1,l2,shapeInfo,up); + }else if(segi == 0u){ + let l0 = segi ; + let l1 = segi + 1u; + let l2 = segi + 2u; + drawLineStart(l0,l1,l2,shapeInfo,up); + }else{ + let l0 = segi - 1u; + let l1 = segi ; + let l2 = segi + 1u; + let l3 = segi + 2u; + drawLineBody(l0,l1,l2,l3,shapeInfo,up); + } + } + } + + fn drawLineBody(l0:u32,l1:u32,l2:u32,l3:u32,shapeInfo:ShapeInfo,up:vec3f){ + let p0 = shapeInfo.paths[l0].xyz; + let p1 = shapeInfo.paths[l1].xyz; + let p2 = shapeInfo.paths[l2].xyz; + let p3 = shapeInfo.paths[l3].xyz; + + let d0 = normalize(p1 - p0) ; + let d1 = normalize(p2 - p1) ; + let d2 = normalize(p3 - p2) ; + + let right0 = cross(d0 , d1) ; + let right1 = cross(d2 , d1) ; + + let dir0 = normalize(d1 - d0) ; + let dir1 = normalize(d2 - d1) ; + + // let lOr0 = dot(d0 , d3); + // let lOr1 = dot(d1 , d4); + + var angle0 = acos(dot(d0,dir0)) ; + var angle1 = acos(dot(d1,dir1)) ; + + if(angle0<0.0){ + angle0 *= -1.0 ; + } + if(angle1<0.0){ + angle1 *= -1.0 ; + } + + let lc0 = shapeInfo.width / sin(angle0) ; + let lc1 = shapeInfo.width / sin(angle1) ; + + var newP0 : vec3f ; + var newP1 : vec3f ; + var newP2 : vec3f ; + var newP3 : vec3f ; + var newP4 : vec3f ; + var newP5 : vec3f ; + + let d1Right = cross(d1,up); + let d2Right = cross(d2,up); + + newP0 = dir0 * lc0 + p1 ; + newP1 = -dir0 * lc0 + p1 ; + newP2 = dir1 * lc1 + p2 ; + newP3 = -dir1 * lc1 + p2 ; + + newP4 = -d2Right * shapeInfo.width + p2 ; + newP5 = -lc1 * dir1 + p2 ; + + let uScale = 1.0 ; + let lVScale = length(newP2 - newP0); + let rVScale = length(newP3 - newP1); + + let u0 = vec2f(0.0,0.0) - vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0) - vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,rVScale)- vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,lVScale)- vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + drawFace(l1 * 4u + 0u,newP0,newP1,newP2,u0,u1,u3); + // drawFace(l1 * 4u + 1u,newP0,newP2,newP3,u0,u1,u3); + + // drawFace(l1 * 4u + 2u,newP2,newP4,newP3,u1,u2,u3); + // drawFace(l1 * 4u + 3u,newP3,newP4,newP5,u1,u2,u3); + } + + fn drawLineStart(l0:u32,l1:u32,l2:u32,shapeInfo:ShapeInfo,up:vec3f){ + let p0 = shapeInfo.paths[l0].xyz; + let p1 = shapeInfo.paths[l1].xyz; + let p2 = shapeInfo.paths[l2].xyz; + + let d0 = normalize(p1 - p0) ; + let d1 = normalize(p2 - p1) ; + let dc = normalize(d1 - d0) ; + + let lOr = cross(d0 , d1).y; + let angle = acos(dot(d0,dc)) ; + let lc = shapeInfo.width / sin(angle) ; + + let nextRight = cross( normalize(d1) , up ); + let right = cross( normalize(d0) , up ); + let first_l = -right * shapeInfo.width + p0; + let first_r = right * shapeInfo.width + p0; + + var end_l:vec3f; + var end_r:vec3f; + var next:vec3f; + var outer:vec3f = p1 - lc * dc; + + if(lOr < 0.0){ + end_l = -right * shapeInfo.width + p1; + end_r = lc * dc + p1 ; + next = -nextRight * shapeInfo.width + p1 ; + }else{ + end_l = lc * dc + p1 ; + end_r = right * shapeInfo.width + p1 ; + next = nextRight * shapeInfo.width + p1 ; + } + + let uScale = 1.0 ; + let lVScale = length(end_l - first_l); + let rVScale = length(end_r - first_r); + + let u0 = vec2f(0.0,0.0) - vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0) - vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,rVScale)- vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,lVScale)- vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + drawFace(l0 * 4u + 0u,end_l,end_r,next,u0,u1,u3); + + if(lOr < 0.0){ + drawFace(l0 * 4u + 1u,outer,end_l,next,u0,u1,u3); + }else{ + drawFace(l0 * 4u + 1u,next,end_r,outer,u0,u1,u3); + } + + drawFace(l0 * 4u + 2u,first_l,first_r,end_l,u0,u1,u3); + drawFace(l0 * 4u + 3u,first_r,end_r,end_l,u1,u2,u3); + } + + fn drawLineEnd(l0:u32,l1:u32,l2:u32,shapeInfo:ShapeInfo,up:vec3f){ + let p0 = shapeInfo.paths[l0].xyz; + let p1 = shapeInfo.paths[l1].xyz; + let p2 = shapeInfo.paths[l2].xyz; + + let d0 = normalize(p1 - p0) ; + let d1 = normalize(p2 - p1) ; + let dc = normalize(d1 - d0) ; + + let lOr = cross(d0 , d1).y; + let angle = acos(dot(d0,dc)); + let lc = shapeInfo.width / sin(angle) ; + let offsetV = shapeInfo.width / tan(angle) * (-lOr) ; + + let right = cross( normalize(d1) , up ); + + var first_l:vec3f; + var first_r:vec3f; + if(lOr<0.0){ + first_l = -right * shapeInfo.width + p1; + first_r = lc * dc + p1; + }else{ + first_l = lc * dc + p1; + first_r = right * shapeInfo.width + p1; + } + + let end_l = -right * shapeInfo.width + p2; + let end_r = right * shapeInfo.width + p2; + + let uScale = 1.0 ; + let lVScale = length(end_l - first_l) ; + let rVScale = length(end_r - first_r) ; + + let u0 = vec2f(0.0,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0 - offsetV) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,rVScale - offsetV) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,lVScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + // drawFace(l2 * 3u + 0u,p1,first_r,first_l,u0,u1,u3); + drawFace(l2 * 4u + 1u,first_l,first_r,end_l,u0,u1,u3); + drawFace(l2 * 4u + 2u,first_r,end_r,end_l,u1,u2,u3); + } + + fn drawPolyStartEnd(segi:u32,shapeInfo:ShapeInfo,up:vec3f){ + let firstSegi = segi ; + let endSegi = segi + 1u; + let nextSegi = segi + 2u; + + let p0 = shapeInfo.paths[firstSegi].xyz; + let p1 = shapeInfo.paths[endSegi].xyz; + // let p2 = shapeInfo.paths[nextSegi].xyz; + + let dir = p1 - p0 ; + let right = cross( normalize(dir) , up ); + let first_l = -right * shapeInfo.width + p0; + let first_r = right * shapeInfo.width + p0; + + let end_l = -right * shapeInfo.width + p1; + let end_r = right * shapeInfo.width + p1; + + let uScale = 1.0 ; + let vScale = length(dir); + + let u0 = vec2f(0.0,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,vScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,vScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + drawFace(segi * 2u + 0u,first_l,first_r,end_l,u0,u1,u3); + drawFace(segi * 2u + 1u,first_r,end_r,end_l,u1,u2,u3); + } + + fn drawFace(fID:u32, v1:vec3f , v2:vec3f , v3:vec3f , u1:vec2f , u2:vec2f, u3:vec2f){ + let uv2 = vec2f(0.0,0.0); + let n = getNormal(v1,v2,v3); + writeVertexBuffer(fID*3u+0u,v1,n,u1,uv2); + writeVertexBuffer(fID*3u+1u,v2,n,u2,uv2); + writeVertexBuffer(fID*3u+2u,v3,n,u3,uv2); + } + + fn getNormal(v1:vec3f , v2:vec3f , v3:vec3f) -> vec3f{ + let p0 = v2 - v1 ; + let p1 = v3 - v2 ; + let n = cross(p0,p1); + return normalize(n); + } + + fn writeVertexBuffer( vID:u32 , pos:vec3f , normal:vec3f , uv:vec2f, uv2:vec2f ){ + vertexBuffer[vID].position = pos; + vertexBuffer[vID].nx = normal.x ; + vertexBuffer[vID].ny = normal.y ; + vertexBuffer[vID].nz = normal.z ; + vertexBuffer[vID].uv_x = uv.x ; + vertexBuffer[vID].uv_y = uv.y ; + vertexBuffer[vID].uv2_x = uv2.x ; + vertexBuffer[vID].uv2_y = uv2.y ; + vertexBuffer[vID].index = f32(0) ; + } + + fn dirNeg(cosO:f32) -> f32{ + var neg = 1.0 ; + if(cosO == 0.0){ + neg = 0.0 ; + }else if(cosO < 0.0){ + neg = -1.0 ; + } + return neg ; + } + + ` + return code; +} + + diff --git a/src/assets/shader/graphic/GraphicFaceCompute3.ts b/src/assets/shader/graphic/GraphicFaceCompute3.ts new file mode 100644 index 00000000..04de8d71 --- /dev/null +++ b/src/assets/shader/graphic/GraphicFaceCompute3.ts @@ -0,0 +1,259 @@ +export let GraphicFaceCompute3 = (segmentCode: number) => { + let code = /*wgsl*/` + #include "GlobalUniform" + struct VertexInfo{ + position:vec3f, + nx:f32, + ny:f32, + nz:f32, + uv_x:f32, + uv_y:f32, + uv2_x:f32, + uv2_y:f32, + index:f32, + index2:f32 + } + + struct GeometryInfo{ + index : u32 , + faceStart : u32 , + faceEnd : u32 , + faceCount : u32 , + } + + struct ShapeInfo{ + shapeIndex:f32, //face,poly,rectangle,line,cycle,,box,sphere + shapeType:f32, + width:f32, + height:f32, + pathCount:f32, + uSpeed:f32, + vSpeed:f32, + radiu:f32, + paths:array + } + + @group(0) @binding(1) var vertexBuffer : array; + // @group(0) @binding(2) var geometryInfoBuffer : array; + @group(0) @binding(2) var shapeBuffer : array; + // @group(0) @binding(3) var models : array>; + var shapeIndex:u32 ; + var segIndex:u32 ; + var segCount:u32 ; + var time:f32 ; + var shape:ShapeInfo ; + @compute @workgroup_size(256) + fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) global_invocation_id : vec3){ + shapeIndex = workgroup_id.x ; + segIndex = workgroup_id.y * 256u + global_invocation_id.x ; + shape = shapeBuffer[shapeIndex]; + segCount = u32(shape.pathCount -1.0); + // segIndex = 3u ; + if( segIndex < segCount ){ + time = globalUniform.time * 0.001; + let uv = vec2f(0.0,0.0); + // geometryInfoBuffer[0].index = 0; + switch (u32(shape.shapeType)) { + case 0u:{ + // drawFace(0u,shape.paths[0].xyz,shape.paths[1].xyz,shape.paths[2].xyz,uv,uv,uv); + break; + } + case 1u:{ + // drawFace(0u,shape.paths[0].xyz,shape.paths[1].xyz,shape.paths[2].xyz,uv,uv,uv); + // drawFace(1u,shape.paths[2].xyz,shape.paths[3].xyz,shape.paths[0].xyz,uv,uv,uv); + break; + } + case 2u:{ + // drawFace(0u,shape.paths[0].xyz,shape.paths[1].xyz,shape.paths[2].xyz,uv,uv,uv); + // drawFace(1u,shape.paths[2].xyz,shape.paths[3].xyz,shape.paths[0].xyz,uv,uv,uv); + break; + } + case 3u:{ + // if(segIndex < u32(shape.pathCount)){ + drawLine(segIndex,shape,vec3f(0.0,1.0,0.0)); + // } + break; + } + default: + { + break; + } + } + } + } + + fn drawLine(segi:u32,shapeInfo:ShapeInfo,up:vec3f){ + if(segCount == 1u){ + drawPolyStartEnd(segi,shapeInfo,up); + }else{ + if(segi == 0u){ + let l0 = segi ; + let l1 = segi + 1u; + let l2 = segi + 2u; + drawLineStart(l0,l1,l2,shapeInfo,up); + }else if(segi == (segCount -1u)){ + let l0 = segi - 1u; + let l1 = segi ; + let l2 = segi + 1u; + drawLineEnd(l0,l1,l2,shapeInfo,up); + } + } + } + + fn drawLineStart(l0:u32,l1:u32,l2:u32,shapeInfo:ShapeInfo,up:vec3f){ + let p0 = shapeInfo.paths[l0].xyz; + let p1 = shapeInfo.paths[l1].xyz; + let p2 = shapeInfo.paths[l2].xyz; + + let d0 = normalize(p1 - p0) ; + let d1 = normalize(p2 - p1) ; + let dc = normalize(d1 - d0) ; + + let lOr = dirNeg(p2.x - p0.x); + let angle = acos(dot(d0,dc)) ; + let lc = shapeInfo.width / sin(angle) ; + + let right = cross( normalize(d0) , up ); + let first_l = -right * shapeInfo.width + p0; + let first_r = right * shapeInfo.width + p0; + + var end_l:vec3f; + var end_r:vec3f; + + if(lOr<0.0){ + end_l = -right * shapeInfo.width + p1; + end_r = lc * dc + p1 ; + }else{ + end_l = lc * dc + p1 ; + end_r = right * shapeInfo.width + p1 ; + } + + let uScale = 1.0 ; + let lVScale = length(end_l - first_l); + let rVScale = length(end_r - first_r); + + let u0 = vec2f(0.0,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,rVScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,lVScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + drawFace(l0 * 3u + 0u,end_l,end_r,p1,u0,u1,u3); + drawFace(l0 * 3u + 1u,first_l,first_r,end_l,u0,u1,u3); + drawFace(l0 * 3u + 2u,first_r,end_r,end_l,u1,u2,u3); + } + + fn drawLineEnd(l0:u32,l1:u32,l2:u32,shapeInfo:ShapeInfo,up:vec3f){ + let p0 = shapeInfo.paths[l0].xyz; + let p1 = shapeInfo.paths[l1].xyz; + let p2 = shapeInfo.paths[l2].xyz; + + let d0 = normalize(p1 - p0) ; + let d1 = normalize(p2 - p1) ; + let dc = normalize(d1 - d0) ; + + let lOr = dirNeg(p2.x - p0.x); + + let angle = acos(dot(d0,dc)); + let lc = shapeInfo.width / sin(angle) ; + let offsetV = shapeInfo.width / tan(angle) * (-lOr) ; + + let right = cross( normalize(d1) , up ); + + var first_l:vec3f; + var first_r:vec3f; + if(lOr<0.0){ + first_l = -right * shapeInfo.width + p1; + first_r = lc * dc + p1; + }else{ + first_l = lc * dc + p1; + first_r = right * shapeInfo.width + p1; + } + + let end_l = -right * shapeInfo.width + p2; + let end_r = right * shapeInfo.width + p2; + + let uScale = 1.0 ; + let lVScale = length(end_l - first_l) ; + let rVScale = length(end_r - first_r) ; + + let u0 = vec2f(0.0,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0 - offsetV) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,rVScale - offsetV) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,lVScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + drawFace(l2 * 3u + 0u,p1,first_r,first_l,u0,u1,u3); + drawFace(l2 * 3u + 1u,first_l,first_r,end_l,u0,u1,u3); + drawFace(l2 * 3u + 2u,first_r,end_r,end_l,u1,u2,u3); + } + + fn drawPolyStartEnd(segi:u32,shapeInfo:ShapeInfo,up:vec3f){ + let firstSegi = segi ; + let endSegi = segi + 1u; + let nextSegi = segi + 2u; + + let p0 = shapeInfo.paths[firstSegi].xyz; + let p1 = shapeInfo.paths[endSegi].xyz; + // let p2 = shapeInfo.paths[nextSegi].xyz; + + let dir = p1 - p0 ; + let right = cross( normalize(dir) , up ); + let first_l = -right * shapeInfo.width + p0; + let first_r = right * shapeInfo.width + p0; + + let end_l = -right * shapeInfo.width + p1; + let end_r = right * shapeInfo.width + p1; + + let uScale = 1.0 ; + let vScale = length(dir); + + let u0 = vec2f(0.0,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + let u1 = vec2f(uScale,0.0) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u2 = vec2f(uScale,vScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time; + let u3 = vec2f(0.0,vScale) + vec2f(0.0,1.0) * vec2f(shapeInfo.uSpeed,shapeInfo.vSpeed) * time ; + + drawFace(segi * 2u + 0u,first_l,first_r,end_l,u0,u1,u3); + drawFace(segi * 2u + 1u,first_r,end_r,end_l,u1,u2,u3); + } + + fn drawFace(fID:u32, v1:vec3f , v2:vec3f , v3:vec3f , u1:vec2f , u2:vec2f, u3:vec2f){ + let uv2 = vec2f(0.0,0.0); + let n = getNormal(v1,v2,v3); + writeVertexBuffer(fID*3u+0u,v1,n,u1,uv2); + writeVertexBuffer(fID*3u+1u,v2,n,u2,uv2); + writeVertexBuffer(fID*3u+2u,v3,n,u3,uv2); + } + + fn getNormal(v1:vec3f , v2:vec3f , v3:vec3f) -> vec3f{ + let p0 = v2 - v1 ; + let p1 = v3 - v2 ; + let n = cross(p0,p1); + return normalize(n); + } + + fn writeVertexBuffer( vID:u32 , pos:vec3f , normal:vec3f , uv:vec2f, uv2:vec2f ){ + vertexBuffer[vID].position = pos; + vertexBuffer[vID].nx = normal.x ; + vertexBuffer[vID].ny = normal.y ; + vertexBuffer[vID].nz = normal.z ; + vertexBuffer[vID].uv_x = uv.x ; + vertexBuffer[vID].uv_y = uv.y ; + vertexBuffer[vID].uv2_x = uv2.x ; + vertexBuffer[vID].uv2_y = uv2.y ; + vertexBuffer[vID].index = f32(0) ; + } + + fn dirNeg(cosO:f32) -> f32{ + var neg = 1.0 ; + if(cosO == 0.0){ + neg = 0.0 ; + }else if(cosO < 0.0){ + neg = -1.0 ; + } + return neg ; + } + + ` + return code; +} + + diff --git a/src/assets/shader/graphic/GraphicTrailCompute.ts b/src/assets/shader/graphic/GraphicTrailCompute.ts index 4c2f3579..4bb75805 100644 --- a/src/assets/shader/graphic/GraphicTrailCompute.ts +++ b/src/assets/shader/graphic/GraphicTrailCompute.ts @@ -28,7 +28,7 @@ export let graphicTrailCompute = (segmentCode: number) => { uvSpeed: vec2f, smoothLine: f32, faceMode: f32, - right: vec4f, + up: vec4f, ids:array } @@ -40,91 +40,124 @@ export let graphicTrailCompute = (segmentCode: number) => { var viewDir:vec3f; @compute @workgroup_size(256) - fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(local_invocation_id) local_invocation_id : vec3){ + fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) global_invocation_id : vec3){ let rID = workgroup_id.x ; let trailInfo = trailBuffer[rID]; let vLen = u32(trailInfo.segment+1.0) ; - let vID = local_invocation_id.x ; + let vID = global_invocation_id.x ; - if(trailInfo.visible > 0.0 && vID < vLen ){ + // if(vID < vLen ){ time = globalUniform.time * 0.001; - viewDir = -normalize(globalUniform.cameraWorldMatrix[2].xyz) ; var right:vec3f ; switch (u32(trailInfo.faceMode)) { case 0u:{ - right = getBillRightRightByMode(vID,vLen,trailInfo) ; + right = getRightByMode(vID,vLen,viewDir,trailInfo) ; break; } case 1u:{ - right = trailInfo.right.xyz; + right = vec3f(0.0,0.0,1.0) ; break; } case 2u:{ - right = trailInfo.right.xyz; + right = getRightByMode(vID,vLen,trailInfo.up.xyz,trailInfo) ; break; } default:{ break; } } - writeTOBuffer(rID,vID,vLen,right,trailInfo); - } + // } + } + + + + fn writeTOBuffer(rID:u32, vID:u32 , vLen:u32, right:vec3f , trailInfo:TrailInfo ){ + let i0 = (vID + (vLen * rID)) * 2u ; + let li = i0 + 0u ; + let ri = i0 + 1u ; + + let worldPos = models[i32(trailInfo.ids[vID])][3].xyz ; + let leftPos = worldPos - right.xyz * trailInfo.width ; + let rightPos = worldPos + right.xyz * trailInfo.width ; + + vertexBuffer[li].position = leftPos ; + vertexBuffer[ri].position = rightPos ; + + let uvS = time * trailInfo.uvSpeed ; + + vertexBuffer[li].uv_x = (trailInfo.uv.x) + uvS.x ; + vertexBuffer[ri].uv_x = (trailInfo.uv.z + trailInfo.uv.x) + uvS.x ; + + // var ld = 0.0 ; + // var rd = 0.0 ; + // if(vID>0u){ + // let vid0 = getVID(vID,vLen,rID); + // let vid1 = getVID(vID-1u,vLen,rID); + + // ld = distance( vertexBuffer[li].position , vertexBuffer[vid1.x].position ) ; + // rd = distance( vertexBuffer[ri].position , vertexBuffer[vid1.y].position ) ; + + // vertexBuffer[li].uv_y = vertexBuffer[vid1.x].uv_y + 1.0 / ld * 100.0 ;//+ uvS.y ; + // vertexBuffer[ri].uv_y = vertexBuffer[vid1.y].uv_y + 1.0 / rd * 100.0 ;//+ uvS.y ; + // }else{ + let v = (1.0 - f32(vID) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; + vertexBuffer[li].uv_y = v + uvS.y ; + vertexBuffer[ri].uv_y = v + uvS.y ; + // } + } + + fn getRight(p0:vec3f,p1:vec3f,p2:vec3f,up:vec3f) -> vec3f { + let d0 = normalize(p1 - p0) ; + let d1 = normalize(p2 - p1) ; + // var a = dot(d0,d1) ; + // var ep = 0.0 ; + // if(a<0.0){ + // a = -a ; + // ep = 1.0/sin(a*0.25) ; + // }else if(a == 0.0){ + // ep = 1.414 ; + // }else{ + // ep = 1.0 ; + // } + let forward = normalize((d0 + d1)+ vec3f(0.000001,0.000001,0.000001)) ; + return normalize(cross(forward,up)) ;//* ep ; } - fn getBillRightRightByMode( vID:u32 , vLen:u32, trailInfo:TrailInfo ) -> vec3f{ + fn getVID(vID:u32,vLen:u32,rID:u32) -> vec2 { + let i0 = (vID + (vLen * rID)) * 2u ; + let li = i0 + 0u ; + let ri = i0 + 1u ; + return vec2(li,ri); + } + + fn getRightByMode( vID:u32 , vLen:u32, up:vec3f, trailInfo:TrailInfo ) -> vec3f{ var right:vec3f; if(vID==0u){ // first let sp0 = models[i32(trailInfo.ids[ 0 ])][3].xyz ; let sp1 = models[i32(trailInfo.ids[ 1 ])][3].xyz ; let firstFront = normalize(sp1 - sp0) ; + viewDir = -normalize(globalUniform.CameraPos.xyz - sp0) ; right = normalize(cross(firstFront,viewDir)); }else if( vID < (vLen-1) ){ // body let bp0 = models[i32(trailInfo.ids[vID-1])][3].xyz ; let bp1 = models[i32(trailInfo.ids[vID])][3].xyz ; let bp2 = models[i32(trailInfo.ids[vID+1])][3].xyz ; + viewDir = -normalize(globalUniform.CameraPos.xyz - bp1) ; right = getRight(bp0,bp1,bp2,viewDir) ; }else{ // last let ep0 = models[i32(trailInfo.ids[u32(trailInfo.segment)-1u])][3].xyz ; let ep1 = models[i32(trailInfo.ids[u32(trailInfo.segment)])][3].xyz ; let endFront = normalize(ep1 - ep0) ; + viewDir = -normalize(globalUniform.CameraPos.xyz - ep1) ; right = normalize(cross(endFront,viewDir)); } return normalize(right) ; } - - fn writeTOBuffer(rID:u32, vID:u32 , vLen:u32, right:vec3f , trailInfo:TrailInfo ){ - let i0 = (vID + (vLen * rID)) * 2u ; - let i1 = i0 + 0u ; - let i2 = i0 + 1u ; - - let worldPos = models[i32(trailInfo.ids[vID])][3].xyz ; - let leftPos = worldPos - right.xyz * trailInfo.width ; - let rightPos = worldPos + right.xyz * trailInfo.width ; - - vertexBuffer[i1].position = leftPos ; - vertexBuffer[i2].position = rightPos ; - - let uvS = time * trailInfo.uvSpeed ; - - vertexBuffer[i1].uv_x = (trailInfo.uv.x) + uvS.x ; - vertexBuffer[i2].uv_x = (trailInfo.uv.z + trailInfo.uv.x) + uvS.x ; - - let v = (1.0 - f32(vID) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; - vertexBuffer[i1].uv_y = v + uvS.y ; - vertexBuffer[i2].uv_y = v + uvS.y ; - } - - fn getRight(p0:vec3f,p1:vec3f,p2:vec3f,v:vec3f) -> vec3f { - let d0 = (p1 - p0) ; - let d1 = (p2 - p1) ; - let d2 = ((d0 + d1) ) ; - return (cross(d2,v)) ; - } ` return code; } diff --git a/src/core/geometry/GeometryVertexBuffer.ts b/src/core/geometry/GeometryVertexBuffer.ts index 23bef450..bb2add73 100644 --- a/src/core/geometry/GeometryVertexBuffer.ts +++ b/src/core/geometry/GeometryVertexBuffer.ts @@ -73,7 +73,6 @@ export class GeometryVertexBuffer { } this.vertexCount = len; - this._vertexBufferLayouts[attributeInfo.location] = { name: attributeInfo.name, arrayStride: attributeInfo.size * 4, diff --git a/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts b/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts index 6b0705db..2ab41af2 100644 --- a/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts +++ b/src/gfx/graphics/webGpu/core/buffer/GPUBufferBase.ts @@ -249,40 +249,43 @@ export class GPUBufferBase { for (let i = 0; i < ref.length; i++) { const att = ref[i]; let value = obj[att.name]; + this.writeValue(node, att, value); + } + } - switch (att.type) { - case `Boolean`: - node.writeFloat(value); - break; + private writeValue(node: MemoryInfo, att: { name: string, type: string }, value: any) { + switch (att.type) { + case `Boolean`: + node.writeFloat(value); + break; - case `Number`: - node.writeFloat(value); - break; + case `Number`: + node.writeFloat(value); + break; - case `Float32Array`: - node.writeFloat32Array(value); - break; + case `Float32Array`: + node.writeFloat32Array(value); + break; - case `Vector2`: - node.writeVector2(value); - break; + case `Vector2`: + node.writeVector2(value); + break; - case `Vector3`: - node.writeVector3(value); - break; + case `Vector3`: + node.writeVector3(value); + break; - case `Vector4`: - node.writeVector4(value); - break; + case `Vector4`: + node.writeVector4(value); + break; - case `Color`: - node.writeRGBColor(value); - break; + case `Color`: + node.writeRGBColor(value); + break; - case `Array`: - node.writeArray(value); - break; - } + case `Array`: + node.writeArray(value); + break; } } diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Float32ArrayUtil.ts b/src/gfx/renderJob/passRenderer/graphic/new/Float32ArrayUtil.ts new file mode 100644 index 00000000..88d59170 --- /dev/null +++ b/src/gfx/renderJob/passRenderer/graphic/new/Float32ArrayUtil.ts @@ -0,0 +1,11 @@ +import { Vector4 } from "../../../../.."; + +export class Float32ArrayUtil { + + public static wirteVec4(array: Float32Array, index: number, value: Vector4) { + array[index * 4 + 0] = value.x; + array[index * 4 + 1] = value.y; + array[index * 4 + 2] = value.z; + array[index * 4 + 3] = value.w; + } +} \ No newline at end of file diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DFaceRenderer.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DFaceRenderer.ts new file mode 100644 index 00000000..ba29519f --- /dev/null +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DFaceRenderer.ts @@ -0,0 +1,172 @@ +import { graphicFaceCompute } from "../../../../../assets/shader/graphic/GraphicFaceCompute"; +import { graphicTrailCompute } from "../../../../../assets/shader/graphic/GraphicTrailCompute"; +import { MeshRenderer } from "../../../../../components/renderer/MeshRenderer"; +import { View3D } from "../../../../../core/View3D"; +import { Object3D } from "../../../../../core/entities/Object3D"; +import { UnLitTexArrayMaterial } from "../../../../../materials/UnLitTexArrayMaterial"; +import { Color } from "../../../../../math/Color"; +import { Vector3 } from "../../../../../math/Vector3"; +import { Vector4 } from "../../../../../math/Vector4"; +import { TriGeometry } from "../../../../../shape/TriGeometry"; +import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; +import { GeometryUtil } from "../../../../../util/GeometryUtil"; +import { Struct } from "../../../../../util/struct/Struct"; +import { GlobalBindGroup } from "../../../../graphics/webGpu/core/bindGroups/GlobalBindGroup"; +import { StorageGPUBuffer } from "../../../../graphics/webGpu/core/buffer/StorageGPUBuffer"; +import { StructStorageGPUBuffer } from "../../../../graphics/webGpu/core/buffer/StructStorageGPUBuffer"; +import { ComputeShader } from "../../../../graphics/webGpu/shader/ComputeShader"; +import { GPUContext } from "../../../GPUContext"; +import { Float32ArrayUtil } from "./Float32ArrayUtil"; + +export class GeometryInfo extends Struct { + public index: number = 0; + public faceStart: number = 0; + public faceEnd: number = 0; + public faceCount: number = 0; +} + +export class ShapeInfo extends Struct { + public shapeIndex: number = 0;; //face,poly,line,cycle,rectangle,box,sphere + public shapeType: number = 0; + public width: number = 0; + public height: number = 0; + public pathCount: number = 0; + public uSpeed: number = 0; + public vSpeed: number = 0; + public radiu: number = 0; + public paths: Float32Array = new Float32Array(Graphic3DFaceRenderer.maxPathPointCount * 4); +} + +export class Graphic3DFaceRenderer extends MeshRenderer { + public static maxFaceCount: number = 50000; + public static maxGeometryCount: number = 1; + public static maxShapeCount: number = 1; + public static maxPathPointCount: number = 50; + public texture: BitmapTexture2DArray; + public transformBuffer: StorageGPUBuffer; + + private _onChange: boolean = false; + private _computeGeoShader: ComputeShader; + + public geometryInfoBuffer: StructStorageGPUBuffer; + public shapeBuffer: StructStorageGPUBuffer; + + object3Ds: any[]; + shapes: ShapeInfo[]; + public init(): void { + super.init(); + } + + public create(tex: BitmapTexture2DArray, num: number) { + this._computeGeoShader = new ComputeShader(graphicFaceCompute(Graphic3DFaceRenderer.maxPathPointCount)); + this.geometryInfoBuffer = new StructStorageGPUBuffer(GeometryInfo, Graphic3DFaceRenderer.maxGeometryCount); + this.shapeBuffer = new StructStorageGPUBuffer(ShapeInfo, Graphic3DFaceRenderer.maxShapeCount); + + let geo = new TriGeometry(Graphic3DFaceRenderer.maxFaceCount) + let mat = new UnLitTexArrayMaterial(); + mat.baseMap = tex; + this.material = mat; + + this.transformBuffer = new StorageGPUBuffer(num * (4 * 4), 0); + this.material.setStorageBuffer("graphicBuffer", this.transformBuffer); + + this.object3Ds = []; + for (let i = 0; i < num; i++) { + const element = new Object3D(); + this.object3Ds.push(element); + this.object3D.addChild(element); + this.transformBuffer.setFloat("matrix_" + i, element.transform.worldMatrix.index); + this.transformBuffer.setFloat("texId_" + i, 1); + this.transformBuffer.setFloat("texId2_" + i, 1); + this.transformBuffer.setFloat("texId3_" + i, 1); + this.transformBuffer.setColor("baseColor_" + i, new Color()); + this.transformBuffer.setColor("emissiveColor_" + i, new Color(0, 0, 0, 0)); + this.transformBuffer.setVector4("uvRect_" + i, new Vector4(0, 0, 1, 1)); + } + + this.transformBuffer.apply(); + this.geometry = geo; + } + + public startShape(texture: BitmapTexture2DArray) { + this.create(texture, Graphic3DFaceRenderer.maxGeometryCount); + + let geos = []; + for (let i = 0; i < Graphic3DFaceRenderer.maxGeometryCount; i++) { + const geometryInfo = new GeometryInfo(); + geos.push(geometryInfo); + } + this.shapeBuffer.setStructArray(GeometryInfo, geos); + this.geometryInfoBuffer.apply(); + + this.shapes = []; + for (let i = 0; i < Graphic3DFaceRenderer.maxShapeCount; i++) { + const shapeInfo = new ShapeInfo(); + this.shapes.push(shapeInfo); + } + this.shapeBuffer.setStructArray(ShapeInfo, this.shapes); + this.shapeBuffer.apply(); + + this.start = () => { + this._computeGeoShader.setStorageBuffer("vertexBuffer", this.geometry.vertexBuffer.vertexGPUBuffer); + this._computeGeoShader.setStructStorageBuffer("geometryInfoBuffer", this.geometryInfoBuffer); + this._computeGeoShader.setStructStorageBuffer("shapeBuffer", this.shapeBuffer); + // this._computeGeoShader.setStorageBuffer("models", GlobalBindGroup.modelMatrixBindGroup.matrixBufferDst); + this._computeGeoShader.setStorageBuffer("globalUniform", GlobalBindGroup.getCameraGroup(this.transform.scene3D.view.camera).uniformGPUBuffer); + } + + this.onCompute = (view: View3D, command: GPUCommandEncoder) => this.computeTrail(view, command); + } + + public updateShape(index: number, shape: ShapeInfo) { + this.shapeBuffer.setStruct(ShapeInfo, index, shape); + this.shapeBuffer.apply(); + } + + public setTextureID(i: number, id: number) { + this.transformBuffer.setFloat("texId_" + i, id); + this._onChange = true; + } + + // public setTexture2ID(i: number, id: number) { + // this.transformBuffer.setFloat("texId_" + i, id); + // this._onChange = true; + // } + + // public setTexture3ID(i: number, id: number) { + // this.transformBuffer.setFloat("texId_" + i, id); + // this._onChange = true; + // } + + public setBaseColor(i: number, color: Color) { + this.transformBuffer.setColor("baseColor_" + i, color); + this._onChange = true; + } + + public setEmissiveColor(i: number, color: Color) { + this.transformBuffer.setColor("emissiveColor_" + i, color); + this._onChange = true; + } + + public setUVRect(i: number, v: Vector4) { + this.transformBuffer.setVector4("uvRect_" + i, v); + this._onChange = true; + } + + public onUpdate(view?: View3D) { + if (this._onChange) { + this._onChange = false; + this.transformBuffer.apply(); + } + } + + private computeTrail(view: View3D, command: GPUCommandEncoder) { + // this._computeShader.workerSizeX = this.ribbonCount; + this._computeGeoShader.workerSizeX = 1;// Math.floor(this.ribbonSegment / Graphic3DRibbonRenderer.maxRibbonSegment); + this._computeGeoShader.workerSizeY = 4;// Math.floor(this.ribbonSegment / Graphic3DRibbonRenderer.maxRibbonSegment); + // this._computeShader.workerSizeY = 1;// Math.floor(this.ribbonSegment / Graphic3DRibbonRenderer.maxRibbonSegment); + // this._computeShader.workerSizeX = 1; + GPUContext.computeCommand(command, [this._computeGeoShader]); + } + +} \ No newline at end of file diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts index f0d844b2..8b0f082a 100644 --- a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh.ts @@ -4,11 +4,13 @@ import { GeometryBase } from "../../../../../core/geometry/GeometryBase"; import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; import { Graphic3DMeshRenderer } from "./Graphic3DMeshRenderer"; import { Graphic3DRibbonRenderer } from "./Graphic3DRibbonRenderer"; +import { Graphic3DFaceRenderer } from "./Graphic3DFaceRenderer"; export class Graphic3DMesh { public static meshMap: Map = new Map(); public static meshDrawGroup: Map = new Map(); - public static trailMap: Map = new Map(); + public static ribbonMap: Map = new Map(); + public static faceMap: Map = new Map(); public static draw(scene: Scene3D, geo: GeometryBase, texture: BitmapTexture2DArray, count: number): Graphic3DMeshRenderer { if (!this.meshMap.has(geo)) { @@ -22,11 +24,22 @@ export class Graphic3DMesh { } public static drawRibbon(id: string, scene: Scene3D, texture: BitmapTexture2DArray, trailSegment: number, count: number): Graphic3DRibbonRenderer { - if (!this.trailMap.has(id)) { + if (!this.ribbonMap.has(id)) { let object = new Object3D(); let renderNode = object.addComponent(Graphic3DRibbonRenderer); renderNode.startRibbon(texture, trailSegment, count); - this.trailMap.set(id, renderNode); + this.ribbonMap.set(id, renderNode); + scene.addChild(object); + return renderNode; + } + } + + public static drawShape(id: string, scene: Scene3D, texture: BitmapTexture2DArray): Graphic3DFaceRenderer { + if (!this.ribbonMap.has(id)) { + let object = new Object3D(); + let renderNode = object.addComponent(Graphic3DFaceRenderer); + renderNode.startShape(texture); + this.faceMap.set(id, renderNode); scene.addChild(object); return renderNode; } diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer.ts index 1e812c08..137bd279 100644 --- a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer.ts +++ b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer.ts @@ -1,4 +1,4 @@ -import { StructStorageGPUBuffer, Vector3 } from "../../../../.."; +import { NonSerialize, StructStorageGPUBuffer, Vector3 } from "../../../../.."; import { graphicTrailCompute } from "../../../../../assets/shader/graphic/GraphicTrailCompute"; import { MeshRenderer } from "../../../../../components/renderer/MeshRenderer"; import { View3D } from "../../../../../core/View3D"; @@ -24,16 +24,19 @@ export enum FaceMode { } export class RibbonStruct extends Struct { - index: number = 1; - segment: number = 5; - visible: number = 1; - width: number = 1; - uv: Vector4 = new Vector4(0, 0, 1, 128); - uvSpeed: Vector2 = new Vector2(0, 0.01); - smooth: number = 0; - faceMode: number = FaceMode.FaceToCamera; - right: Vector4 = new Vector4(0, 0, 1); - ids: Float32Array = new Float32Array(Graphic3DRibbonRenderer.maxRibbonSegment); + public index: number = 1; + public segment: number = 5; + public visible: number = 1; + public width: number = 0.25; + public uv: Vector4 = new Vector4(0, 0, 1, 30); + public uvSpeed: Vector2 = new Vector2(0, 2.1); + public smooth: number = 0; + public faceMode: number = FaceMode.FaceToCamera; + public up: Vector4 = new Vector4(0, 1, 0); + public ids: Float32Array = new Float32Array(Graphic3DRibbonRenderer.maxRibbonSegment); + + @NonSerialize + public ribbonPoint: Object3D[] = []; } export class Graphic3DRibbonRenderer extends MeshRenderer { @@ -42,7 +45,7 @@ export class Graphic3DRibbonRenderer extends MeshRenderer { public sourceGeometry: GeometryBase; public texture: BitmapTexture2DArray; public object3Ds: Object3D[]; - public ribbon3Ds: Object3D[][]; + // public ribbon3Ds: Object3D[][]; public ribbons: RibbonStruct[]; public ribbonCount: number = 10; @@ -61,7 +64,7 @@ export class Graphic3DRibbonRenderer extends MeshRenderer { this.ribbons[i] = new RibbonStruct(); this.ribbons[i].index = i; this.ribbons[i].segment = ribbonSegment; - this.ribbons[i].width = 1.5; + this.ribbons[i].width = 0.5; this.ribbons[i].faceMode = FaceMode.FaceToCamera; } @@ -100,13 +103,12 @@ export class Graphic3DRibbonRenderer extends MeshRenderer { this._computeShader = new ComputeShader(graphicTrailCompute(Graphic3DRibbonRenderer.maxRibbonSegment)); this._ribbonBuffer = new StructStorageGPUBuffer(RibbonStruct, count); - this.ribbon3Ds = []; for (let i = 0; i < count; i++) { - this.ribbon3Ds[i] = []; + this.ribbons[i].ribbonPoint = []; for (let j = 0; j < Graphic3DRibbonRenderer.maxRibbonSegment; j++) { const element = new Object3D(); - this.ribbon3Ds[i].push(element); this.object3D.addChild(element); + this.ribbons[i].ribbonPoint[j] = element; this.ribbons[i].ids[j] = element.transform.worldMatrix.index; } } @@ -163,7 +165,7 @@ export class Graphic3DRibbonRenderer extends MeshRenderer { private computeTrail(view: View3D, command: GPUCommandEncoder) { this._computeShader.workerSizeX = this.ribbonCount; - this._computeShader.workerSizeY = Math.floor(this.ribbonSegment / Graphic3DRibbonRenderer.maxRibbonSegment); + this._computeShader.workerSizeY = 1;// Math.floor(this.ribbonSegment / Graphic3DRibbonRenderer.maxRibbonSegment); // this._computeShader.workerSizeX = 1; GPUContext.computeCommand(command, [this._computeShader]); } diff --git a/src/index.ts b/src/index.ts index 2682abd5..972d21ca 100644 --- a/src/index.ts +++ b/src/index.ts @@ -57,6 +57,9 @@ export * from "./assets/shader/glsl/Sky_glsl" export * from "./assets/shader/glsl/post/LUT_glsl" export * from "./assets/shader/graphic/Graphic3DShader_fs" export * from "./assets/shader/graphic/Graphic3DShader_vs" +export * from "./assets/shader/graphic/GraphicFaceComput2" +export * from "./assets/shader/graphic/GraphicFaceCompute" +export * from "./assets/shader/graphic/GraphicFaceCompute3" export * from "./assets/shader/graphic/GraphicTrailCompute" export * from "./assets/shader/graphic/GraphicTrailComputeOld" export * from "./assets/shader/graphic/GraphicTrailComputeOld2" @@ -342,6 +345,8 @@ export * from "./gfx/renderJob/passRenderer/graphic/Graphic3DLineBatchRenderer" export * from "./gfx/renderJob/passRenderer/graphic/Graphic3DRender" export * from "./gfx/renderJob/passRenderer/graphic/GraphicConfig" export * from "./gfx/renderJob/passRenderer/graphic/Graphics3DShape" +export * from "./gfx/renderJob/passRenderer/graphic/new/Float32ArrayUtil" +export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DFaceRenderer" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer" @@ -540,6 +545,7 @@ export * from "./shape/SphereGeometry" export * from "./shape/StripeGeometry" export * from "./shape/TorusGeometry" export * from "./shape/TrailGeometry" +export * from "./shape/TriGeometry" export * from "./textures/AtmosphericScatteringSky" export * from "./textures/BitmapTexture2D" export * from "./textures/BitmapTexture2DArray" diff --git a/src/shape/TriGeometry.ts b/src/shape/TriGeometry.ts new file mode 100644 index 00000000..e8b5af55 --- /dev/null +++ b/src/shape/TriGeometry.ts @@ -0,0 +1,62 @@ +import { GeometryBase } from "../core/geometry/GeometryBase"; +import { VertexAttributeName } from "../core/geometry/VertexAttributeName"; + +/** + * Plane geometry + * @group Geometry + */ +export class TriGeometry extends GeometryBase { + + + private faceCount: number = 0; + /** + * + * @constructor + */ + constructor(count: number) { + super(); + this.faceCount = count; + this.buildGeometry(); + } + + private buildGeometry(): void { + let indices_arr = new Uint32Array(this.faceCount * 3); + let position_arr = new Float32Array(this.faceCount * 3 * 3); + let normal_arr = new Float32Array(this.faceCount * 3 * 3); + let uv_arr = new Float32Array(this.faceCount * 3 * 2); + let meshIndexList = new Float32Array(this.faceCount * 3 * 1); + + // for (let index = 0; index < this.faceCount * 3; index++) { + // position_arr[index * 3 + 0] = Math.random() * 100; + // position_arr[index * 3 + 1] = Math.random() * 100; + // position_arr[index * 3 + 2] = Math.random() * 100; + // } + + for (let index = 0; index < this.faceCount; index++) { + let i1 = index * 3 + 0; + let i2 = index * 3 + 1; + let i3 = index * 3 + 2; + indices_arr[i1] = i1; + indices_arr[i2] = i2; + indices_arr[i3] = i3; + } + + this.setIndices(indices_arr); + this.setAttribute(VertexAttributeName.position, position_arr); + this.setAttribute(VertexAttributeName.normal, normal_arr); + this.setAttribute(VertexAttributeName.uv, uv_arr); + this.setAttribute(VertexAttributeName.TEXCOORD_1, uv_arr); + this.setAttribute(VertexAttributeName.vIndex, meshIndexList); + + this.addSubGeometry({ + indexStart: 0, + indexCount: indices_arr.length, + vertexStart: 0, + vertexCount: 0, + firstStart: 0, + index: 0, + topology: 0 + }); + } + +} diff --git a/src/util/SerializeDecoration.ts b/src/util/SerializeDecoration.ts index 398b8b0d..839f2289 100644 --- a/src/util/SerializeDecoration.ts +++ b/src/util/SerializeDecoration.ts @@ -11,7 +11,7 @@ export function NonSerialize(cls, key): any { dic[key] = true; } -export function IsNonSerialize(instance: T, key: keyof T): boolean { +export function IsNonSerialize(instance: T, key: string): boolean { let noSerializeDic; while (instance) { instance = instance['__proto__']; diff --git a/src/util/struct/Struct.ts b/src/util/struct/Struct.ts index 0f6e2480..3060c586 100644 --- a/src/util/struct/Struct.ts +++ b/src/util/struct/Struct.ts @@ -6,13 +6,16 @@ * @group Util */ import { Ctor } from "../Global"; +import { EditorInspector, IsNonSerialize, NonSerialize } from "../SerializeDecoration"; export class Struct { + @NonSerialize private __refection: { name: string; type: string; }[]; + @NonSerialize private __size: number = 0; /** @@ -24,7 +27,7 @@ export class Struct { let self = this; this.__refection = []; for (const key in self) { - if (!key.includes(`__`)) { + if (!IsNonSerialize(this, key)) { const element = self[key]; let att = { name: key, @@ -110,7 +113,7 @@ export class Struct { let struct = this.Get(c); if (struct.__size == 0) { for (const key in struct) { - if (key.indexOf(`__`) == -1) { + if (!IsNonSerialize(struct, key)) { const element = struct[key]; struct.__size += Struct.getValueSize(element); } From d60137889805cb0bf3c13b78c872dc8d710d9556 Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Tue, 14 Nov 2023 15:25:24 +0800 Subject: [PATCH 24/34] fix index.ts --- samples/index.ts | 24 +----------------------- 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/samples/index.ts b/samples/index.ts index a7aa9a55..01af358a 100644 --- a/samples/index.ts +++ b/samples/index.ts @@ -1,12 +1,3 @@ -<<<<<<< Updated upstream -// import { Sample_GraphicPath } from "./graphic/Sample_GraphicPath" -======= -import { Sample_GraphicPath } from "./graphic/Sample_GraphicPath" -import { Sample_GraphicPath2 } from "./graphic/Sample_GraphicPath2"; -import { Sample_GraphicPath3 } from "./graphic/Sample_GraphicPath3"; -import { Sample_GraphicShape } from "./graphic/Sample_GraphicShape"; ->>>>>>> Stashed changes - /******** Load all samples in /src/sample/ ********/ { // find all demos in /sample @@ -29,7 +20,6 @@ import { Sample_GraphicShape } from "./graphic/Sample_GraphicShape"; menu.innerHTML = list document.body.appendChild(menu) - // change sessionStorage.target on click, and reload iframe menu.addEventListener('click', (e: Event) => { const button = e.target as HTMLElement @@ -77,16 +67,4 @@ import { Sample_GraphicShape } from "./graphic/Sample_GraphicShape"; ` document.body.appendChild(iframe) } -} - -// import { Sample_GraphicMesh_Trailing } from "./graphic/Sample_GraphicMesh_Trailing"; -// new Sample_GraphicMesh_Trailing().run(); - -<<<<<<< Updated upstream -// new Sample_GraphicPath().run(); -======= -// new Sample_GraphicPath().run(); -// new Sample_GraphicPath2().run(); -// new Sample_GraphicPath3().run(); -new Sample_GraphicShape().run(); ->>>>>>> Stashed changes +} \ No newline at end of file From 5deb703117ac10a1853601def7866c92841640c5 Mon Sep 17 00:00:00 2001 From: Codeboy-cn Date: Tue, 14 Nov 2023 15:41:54 +0800 Subject: [PATCH 25/34] chore: Hide light debug line --- src/components/lights/PointLight.ts | 16 +++++----- src/components/lights/SpotLight.ts | 46 ++++++++++++++--------------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/lights/PointLight.ts b/src/components/lights/PointLight.ts index 5e3cfe81..13c57a74 100644 --- a/src/components/lights/PointLight.ts +++ b/src/components/lights/PointLight.ts @@ -108,14 +108,14 @@ export class PointLight extends LightBase { } public onGraphic(view?: View3D): void { - let custom = view.graphic3D.createCustomShape( - `PointLight_${this.object3D.instanceID}`, - this.transform, - ); - custom.buildAxis(); - custom.buildCircle(Vector3.ZERO, this.range, 32, Vector3.X_AXIS); - custom.buildCircle(Vector3.ZERO, this.range, 32, Vector3.Y_AXIS); - custom.buildCircle(Vector3.ZERO, this.range, 32, Vector3.Z_AXIS); + // let custom = view.graphic3D.createCustomShape( + // `PointLight_${this.object3D.instanceID}`, + // this.transform, + // ); + // custom.buildAxis(); + // custom.buildCircle(Vector3.ZERO, this.range, 32, Vector3.X_AXIS); + // custom.buildCircle(Vector3.ZERO, this.range, 32, Vector3.Y_AXIS); + // custom.buildCircle(Vector3.ZERO, this.range, 32, Vector3.Z_AXIS); } /** diff --git a/src/components/lights/SpotLight.ts b/src/components/lights/SpotLight.ts index a8060dc2..b1f0b8d0 100644 --- a/src/components/lights/SpotLight.ts +++ b/src/components/lights/SpotLight.ts @@ -124,29 +124,29 @@ export class SpotLight extends LightBase { } public onGraphic(view: View3D) { - let custom = view.graphic3D.createCustomShape( - `SpotLight_${this.object3D.instanceID}`, - this.transform, - ); - - const range = this.range; - const outerAngle = this.outerAngle / 2.0; - custom.buildAxis(); - - let angle = (90 - outerAngle) * DEGREES_TO_RADIANS; - let v0 = range * Math.cos(angle); - let v1 = range * Math.sin(angle); - custom.buildLines([Vector3.ZERO, new Vector3(0, v0, v1)]); - custom.buildLines([Vector3.ZERO, new Vector3(v0, 0, v1)]); - - angle = (90 + outerAngle) * DEGREES_TO_RADIANS; - v0 = range * Math.cos(angle); - v1 = range * Math.sin(angle); - custom.buildLines([Vector3.ZERO, new Vector3(0, v0, v1)]); - custom.buildLines([Vector3.ZERO, new Vector3(v0, 0, v1)]); - custom.buildArcLine(Vector3.ZERO, range, 90 - outerAngle, 90 + outerAngle, 16, Vector3.X_AXIS); - custom.buildArcLine(Vector3.ZERO, range, 90 - outerAngle, 90 + outerAngle, 16, Vector3.Y_AXIS); - custom.buildCircle(new Vector3(0, 0, range * Math.sin(angle)), range * Math.cos(angle), 32, Vector3.Z_AXIS); + // let custom = view.graphic3D.createCustomShape( + // `SpotLight_${this.object3D.instanceID}`, + // this.transform, + // ); + + // const range = this.range; + // const outerAngle = this.outerAngle / 2.0; + // custom.buildAxis(); + + // let angle = (90 - outerAngle) * DEGREES_TO_RADIANS; + // let v0 = range * Math.cos(angle); + // let v1 = range * Math.sin(angle); + // custom.buildLines([Vector3.ZERO, new Vector3(0, v0, v1)]); + // custom.buildLines([Vector3.ZERO, new Vector3(v0, 0, v1)]); + + // angle = (90 + outerAngle) * DEGREES_TO_RADIANS; + // v0 = range * Math.cos(angle); + // v1 = range * Math.sin(angle); + // custom.buildLines([Vector3.ZERO, new Vector3(0, v0, v1)]); + // custom.buildLines([Vector3.ZERO, new Vector3(v0, 0, v1)]); + // custom.buildArcLine(Vector3.ZERO, range, 90 - outerAngle, 90 + outerAngle, 16, Vector3.X_AXIS); + // custom.buildArcLine(Vector3.ZERO, range, 90 - outerAngle, 90 + outerAngle, 16, Vector3.Y_AXIS); + // custom.buildCircle(new Vector3(0, 0, range * Math.sin(angle)), range * Math.cos(angle), 32, Vector3.Z_AXIS); } /** From a0d8ea114893f71c0bbbb333429ed1a15a62cb14 Mon Sep 17 00:00:00 2001 From: Codeboy-cn Date: Tue, 14 Nov 2023 15:43:07 +0800 Subject: [PATCH 26/34] chore: Remove sample GraphicTrailing --- samples/graphic/Sample_GraphicTrailing.ts | 173 --------------------- samples/graphic/Sample_GraphicTrailing2.ts | 161 ------------------- samples/graphic/Sample_GraphicTrailing3.ts | 161 ------------------- 3 files changed, 495 deletions(-) delete mode 100644 samples/graphic/Sample_GraphicTrailing.ts delete mode 100644 samples/graphic/Sample_GraphicTrailing2.ts delete mode 100644 samples/graphic/Sample_GraphicTrailing3.ts diff --git a/samples/graphic/Sample_GraphicTrailing.ts b/samples/graphic/Sample_GraphicTrailing.ts deleted file mode 100644 index 7269df62..00000000 --- a/samples/graphic/Sample_GraphicTrailing.ts +++ /dev/null @@ -1,173 +0,0 @@ -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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost } from "@orillusion/core"; -import { GUIUtil } from "@samples/utils/GUIUtil"; -import { Stats } from "@orillusion/stats"; - -export class Sample_GraphicMesh_Trailing { - lightObj3D: Object3D; - scene: Scene3D; - parts: Object3D[]; - width: number; - height: number; - cafe: number = 47; - frame: number = 16; - view: View3D; - - colors: Color[]; - trail3ds: Object3D[][]; - - constructor() { } - - async run() { - - Matrix4.maxCount = 500000; - Matrix4.allocCount = 500000; - - await Engine3D.init({ beforeRender: () => this.update() }); - - Engine3D.setting.render.debug = true; - Engine3D.setting.shadow.shadowBound = 5; - - this.colors = []; - - GUIHelp.init(); - - this.scene = new Scene3D(); - this.scene.addComponent(Stats); - let sky = this.scene.addComponent(AtmosphericComponent); - sky.enable = false; - let camera = CameraUtil.createCamera3DObject(this.scene); - camera.perspective(60, Engine3D.aspect, 1, 5000.0); - - camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); - - this.view = new View3D(); - this.view.scene = this.scene; - this.view.camera = camera; - - Engine3D.startRenderView(this.view); - - GUIUtil.renderDebug(); - - let post = this.scene.addComponent(PostProcessingComponent); - // let DOFPost = post.addPost(DepthOfFieldPost) - // DOFPost.near = 0 - // DOFPost.far = 150 - // DOFPost.pixelOffset = 2 - // GUIUtil.renderDepthOfField(DOFPost); - - let bloom = post.addPost(BloomPost); - bloom.bloomIntensity = 10.0 - GUIUtil.renderBloom(bloom); - - await this.initScene(); - - // sky.relativeTransform = this.lightObj3D.transform; - } - - async initScene() { - /******** light *******/ - { - this.lightObj3D = new Object3D(); - this.lightObj3D.rotationX = 21; - this.lightObj3D.rotationY = 108; - this.lightObj3D.rotationZ = 10; - let directLight = this.lightObj3D.addComponent(DirectLight); - directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); - directLight.castShadow = false; - directLight.intensity = 10; - GUIUtil.renderDirLight(directLight); - this.scene.addChild(this.lightObj3D); - } - - let texts = []; - - // texts.push(await Engine3D.res.loadTexture("particle/fx_a_fragment_003.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/grid.jpg") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/frame.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); - - let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); - bitmapTexture2DArray.setTextures(texts); - - let mat = new UnLitTexArrayMaterial(); - mat.baseMap = bitmapTexture2DArray; - mat.name = "LitMaterial"; - - GUIHelp.add(this, "cafe", 0.0, 100.0); - GUIHelp.add(this, "frame", 0.0, 100.0); - { - this.width = 20; - this.height = 20; - let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 50, this.width * this.height); - this.parts = mr.object3Ds; - this.trail3ds = mr.ribbon3Ds; - - mr.material.blendMode = BlendMode.ADD; - // mr.material.transparent = true; - mr.material.doubleSide = true; - mr.material.depthWriteEnabled = false; - // mr.material.useBillboard = true; - - for (let i = 0; i < this.width * this.height; i++) { - mr.setTextureID(i, Math.floor(Math.random() * texts.length)); - // mr.setTextureID(i, 0); - } - - let c1 = new Color(0.65, 0.1, 0.2, 0.15); - let c2 = new Color(1.0, 1.1, 0.2, 0.65); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - } - - this.updateOnce(1000); - } - - private tmpArray: any[] = []; - update() { - } - - updateOnce(engineFrame: number) { - if (this.trail3ds && this.trail3ds.length > 0) { - let curveX = new AnimationCurve(); - let lenX = Math.floor(Math.random() * 10) + 1; - for (let pi = 0; pi < lenX; pi++) { - curveX.addKeyFrame(new Keyframe(pi / (lenX - 1), Math.random() * 2 - 1)); - } - - let curveY = new AnimationCurve(); - let lenY = Math.floor(Math.random() * 10) + 1; - for (let pi = 0; pi < lenY; pi++) { - curveY.addKeyFrame(new Keyframe(pi / (lenY - 1), Math.random() * 2 - 1)); - } - - let curveZ = new AnimationCurve(); - let lenZ = Math.floor(Math.random() * 10) + 1; - for (let pi = 0; pi < lenZ; pi++) { - curveZ.addKeyFrame(new Keyframe(pi / (lenZ - 1), Math.random() * 2 - 1)); - } - - for (let i = 0; i < this.trail3ds.length; i++) { - const trail3d = this.trail3ds[i]; - let dir = new Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1); - for (let j = 0; j < trail3d.length; j++) { - let p = j / (trail3d.length - 1); - let vx = curveX.getValue(p); - let vy = curveY.getValue(p); - let vz = curveZ.getValue(p); - trail3d[j].x = vx * dir.x * 100; - trail3d[j].y = vy * dir.y * 100; - trail3d[j].z = vz * dir.z * 100; - } - } - } - } - -} diff --git a/samples/graphic/Sample_GraphicTrailing2.ts b/samples/graphic/Sample_GraphicTrailing2.ts deleted file mode 100644 index 842b5b76..00000000 --- a/samples/graphic/Sample_GraphicTrailing2.ts +++ /dev/null @@ -1,161 +0,0 @@ -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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion } from "@orillusion/core"; -import { GUIUtil } from "@samples/utils/GUIUtil"; -import { Stats } from "@orillusion/stats"; - -export class Sample_GraphicMesh_Trailing2 { - lightObj3D: Object3D; - scene: Scene3D; - parts: Object3D[]; - width: number; - height: number; - cafe: number = 47; - frame: number = 16; - view: View3D; - - colors: Color[]; - trail3ds: Object3D[][]; - - constructor() { } - - async run() { - - Matrix4.maxCount = 500000; - Matrix4.allocCount = 500000; - - await Engine3D.init({ beforeRender: () => this.update() }); - - Engine3D.setting.render.debug = true; - Engine3D.setting.shadow.shadowBound = 5; - - this.colors = []; - - GUIHelp.init(); - - this.scene = new Scene3D(); - this.scene.addComponent(Stats); - let sky = this.scene.addComponent(AtmosphericComponent); - sky.enable = false; - let camera = CameraUtil.createCamera3DObject(this.scene); - camera.perspective(60, Engine3D.aspect, 1, 5000.0); - - camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); - - this.view = new View3D(); - this.view.scene = this.scene; - this.view.camera = camera; - - Engine3D.startRenderView(this.view); - - GUIUtil.renderDebug(); - - let post = this.scene.addComponent(PostProcessingComponent); - // let DOFPost = post.addPost(DepthOfFieldPost) - // DOFPost.near = 0 - // DOFPost.far = 150 - // DOFPost.pixelOffset = 2 - // GUIUtil.renderDepthOfField(DOFPost); - - let bloom = post.addPost(BloomPost); - bloom.bloomIntensity = 10.0 - GUIUtil.renderBloom(bloom); - - await this.initScene(); - - // sky.relativeTransform = this.lightObj3D.transform; - } - - async initScene() { - /******** light *******/ - { - this.lightObj3D = new Object3D(); - this.lightObj3D.rotationX = 21; - this.lightObj3D.rotationY = 108; - this.lightObj3D.rotationZ = 10; - let directLight = this.lightObj3D.addComponent(DirectLight); - directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); - directLight.castShadow = false; - directLight.intensity = 10; - GUIUtil.renderDirLight(directLight); - this.scene.addChild(this.lightObj3D); - } - - let texts = []; - - // texts.push(await Engine3D.res.loadTexture("particle/fx_a_fragment_003.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/grid.jpg") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/frame.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); - - let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); - bitmapTexture2DArray.setTextures(texts); - - let mat = new UnLitTexArrayMaterial(); - mat.baseMap = bitmapTexture2DArray; - mat.name = "LitMaterial"; - - GUIHelp.add(this, "cafe", 0.0, 100.0); - GUIHelp.add(this, "frame", 0.0, 100.0); - { - this.width = 10; - this.height = 10; - let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 127, this.width * this.height); - this.parts = mr.object3Ds; - this.trail3ds = mr.ribbon3Ds; - - mr.material.blendMode = BlendMode.ADD; - // mr.material.transparent = true; - mr.material.doubleSide = true; - mr.material.depthWriteEnabled = false; - // mr.material.useBillboard = true; - - for (let i = 0; i < this.width * this.height; i++) { - mr.setTextureID(i, Math.floor(Math.random() * texts.length)); - // mr.setTextureID(i, 0); - } - - let c1 = new Color(0.65, 0.1, 0.2, 0.15); - let c2 = new Color(1.0, 1.1, 0.2, 0.65); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - } - - this.updateOnce(1000); - } - - private tmpArray: any[] = []; - update() { - } - - updateOnce(engineFrame: number) { - if (this.trail3ds && this.trail3ds.length > 0) { - for (let i = 0; i < this.trail3ds.length; i++) { - const trail3d = this.trail3ds[i]; - let dir = new Vector3(0, 1, 0); - let lx = 10 * Math.random() + 10; - let ly = 0.1 * Math.random() + 0.1; - let lz = 10 * Math.random() + 10; - let oy = 1 * Math.random() + 1; - for (let j = 0; j < trail3d.length; j++) { - let p = j / (trail3d.length - 1); - - let q = Quaternion.HELP_0; - q.fromEulerAngles(0, p * 360 * 4, 0); - q.transformVector(Vector3.RIGHT, dir); - - trail3d[j].x = dir.x * lx * p; - trail3d[j].y = j * ly + oy; - trail3d[j].z = dir.z * lz * p; - } - } - } - } - -} diff --git a/samples/graphic/Sample_GraphicTrailing3.ts b/samples/graphic/Sample_GraphicTrailing3.ts deleted file mode 100644 index 6fde04f3..00000000 --- a/samples/graphic/Sample_GraphicTrailing3.ts +++ /dev/null @@ -1,161 +0,0 @@ -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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion } from "@orillusion/core"; -import { GUIUtil } from "@samples/utils/GUIUtil"; -import { Stats } from "@orillusion/stats"; - -export class Sample_GraphicTrailing3 { - lightObj3D: Object3D; - scene: Scene3D; - parts: Object3D[]; - width: number; - height: number; - cafe: number = 47; - frame: number = 16; - view: View3D; - - colors: Color[]; - trail3ds: Object3D[][]; - - constructor() { } - - async run() { - - Matrix4.maxCount = 500000; - Matrix4.allocCount = 500000; - - await Engine3D.init({ beforeRender: () => this.update() }); - - Engine3D.setting.render.debug = true; - Engine3D.setting.shadow.shadowBound = 5; - - this.colors = []; - - GUIHelp.init(); - - this.scene = new Scene3D(); - this.scene.addComponent(Stats); - let sky = this.scene.addComponent(AtmosphericComponent); - sky.enable = false; - let camera = CameraUtil.createCamera3DObject(this.scene); - camera.perspective(60, Engine3D.aspect, 1, 5000.0); - - camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); - - this.view = new View3D(); - this.view.scene = this.scene; - this.view.camera = camera; - - Engine3D.startRenderView(this.view); - - GUIUtil.renderDebug(); - - let post = this.scene.addComponent(PostProcessingComponent); - // let DOFPost = post.addPost(DepthOfFieldPost) - // DOFPost.near = 0 - // DOFPost.far = 150 - // DOFPost.pixelOffset = 2 - // GUIUtil.renderDepthOfField(DOFPost); - - let bloom = post.addPost(BloomPost); - bloom.bloomIntensity = 10.0 - GUIUtil.renderBloom(bloom); - - await this.initScene(); - - // sky.relativeTransform = this.lightObj3D.transform; - } - - async initScene() { - /******** light *******/ - { - this.lightObj3D = new Object3D(); - this.lightObj3D.rotationX = 21; - this.lightObj3D.rotationY = 108; - this.lightObj3D.rotationZ = 10; - let directLight = this.lightObj3D.addComponent(DirectLight); - directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); - directLight.castShadow = false; - directLight.intensity = 10; - GUIUtil.renderDirLight(directLight); - this.scene.addChild(this.lightObj3D); - } - - let texts = []; - - // texts.push(await Engine3D.res.loadTexture("particle/fx_a_fragment_003.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/grid.jpg") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/frame.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); - - let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); - bitmapTexture2DArray.setTextures(texts); - - let mat = new UnLitTexArrayMaterial(); - mat.baseMap = bitmapTexture2DArray; - mat.name = "LitMaterial"; - - GUIHelp.add(this, "cafe", 0.0, 100.0); - GUIHelp.add(this, "frame", 0.0, 100.0); - { - this.width = 10; - this.height = 10; - let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 127, this.width * this.height); - this.parts = mr.object3Ds; - this.trail3ds = mr.ribbon3Ds; - - mr.material.blendMode = BlendMode.ADD; - // mr.material.transparent = true; - mr.material.doubleSide = true; - mr.material.depthWriteEnabled = false; - // mr.material.useBillboard = true; - - for (let i = 0; i < this.width * this.height; i++) { - mr.setTextureID(i, Math.floor(Math.random() * texts.length)); - // mr.setTextureID(i, 0); - } - - let c1 = new Color(0.65, 0.1, 0.2, 0.15); - let c2 = new Color(1.0, 1.1, 0.2, 0.65); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - } - - this.updateOnce(1000); - } - - private tmpArray: any[] = []; - update() { - } - - updateOnce(engineFrame: number) { - if (this.trail3ds && this.trail3ds.length > 0) { - for (let i = 0; i < this.trail3ds.length; i++) { - const trail3d = this.trail3ds[i]; - let dir = new Vector3(0, 1, 0); - let lx = 10 * Math.random() + 10; - let ly = 0.1 * Math.random() + 0.1; - let lz = 10 * Math.random() + 10; - let oy = 1 * Math.random() + 1; - for (let j = 0; j < trail3d.length; j++) { - let p = j / (trail3d.length - 1); - - let q = Quaternion.HELP_0; - q.fromEulerAngles(0, p * 360 * 4, 0); - q.transformVector(Vector3.RIGHT, dir); - - trail3d[j].x = dir.x * lx * p; - trail3d[j].y = j * ly + oy; - trail3d[j].z = dir.z * lz * p; - } - } - } - } - -} From ed8d2f5b5a4beebb105aa7a65172eedd5bb3f8b8 Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Tue, 14 Nov 2023 15:53:09 +0800 Subject: [PATCH 27/34] update physics car sample --- samples/physics/Sample_PhysicsCar.ts | 692 ++++++++++++++------------- 1 file changed, 354 insertions(+), 338 deletions(-) diff --git a/samples/physics/Sample_PhysicsCar.ts b/samples/physics/Sample_PhysicsCar.ts index abd75aaf..b17337fa 100644 --- a/samples/physics/Sample_PhysicsCar.ts +++ b/samples/physics/Sample_PhysicsCar.ts @@ -1,14 +1,17 @@ import { GUIHelp } from "@orillusion/debug/GUIHelp"; import { Ammo, Physics, Rigidbody } from "@orillusion/physics"; import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene"; -import { Scene3D, Object3D, LitMaterial, Engine3D, BoxGeometry, MeshRenderer, ColliderComponent, BoxColliderShape, Vector3, PlaneGeometry, Color, ComponentBase, KeyCode, KeyEvent, Quaternion, CylinderGeometry } from "@orillusion/core"; -import { GUIUtil } from "@samples/utils/GUIUtil"; +import { Scene3D, Object3D, Engine3D, ColliderComponent, BoxColliderShape, Vector3, ComponentBase, KeyCode, KeyEvent, Quaternion, BoundUtil, Camera3D, Vector3Ex, MeshRenderer, LitMaterial, Color, BoxGeometry } from "@orillusion/core"; class Sample_PhysicsCar { private scene: Scene3D; - private materials: LitMaterial[]; - private boxGeometry: BoxGeometry; + private car: Object3D; + private boxes: Object3D[]; + private road: Object3D; + private camera: Camera3D; + private controller: fixedCameraController + public score = { Score: 0 } async run() { Engine3D.setting.shadow.autoUpdate = true; Engine3D.setting.shadow.updateFrameRate = 1; @@ -19,357 +22,370 @@ class Sample_PhysicsCar { await Engine3D.init({ renderLoop: () => this.loop() }); let sceneParam = createSceneParam(); - sceneParam.camera.distance = 50; let exampleScene = createExampleScene(sceneParam); - - GUIHelp.init(); - GUIUtil.renderDirLight(exampleScene.light, false); - + this.camera = exampleScene.camera; this.scene = exampleScene.scene; await this.initScene(this.scene); Engine3D.startRenderView(exampleScene.view); + + GUIHelp.init(); + GUIHelp.open(); + GUIHelp.add(this.controller, 'enable').name('Fix Camera'); + GUIHelp.add(this.score, 'Score').listen(); + GUIHelp.addButton('Reset', () => { + location.reload() + }) } async initScene(scene: Scene3D) { - this.createGround(); - } - - private createGround() { - let floorMat = new LitMaterial(); - floorMat.baseMap = Engine3D.res.grayTexture; - floorMat.roughness = 0.85; - floorMat.metallic = 0.01; - floorMat.envIntensity = 0.01; - - let floor = new Object3D(); - let renderer = floor.addComponent(MeshRenderer); - - renderer.castShadow = true; - renderer.receiveShadow = true; - renderer.geometry = new PlaneGeometry(200, 200, 1, 1); - renderer.material = floorMat; - - let rigidBody = floor.addComponent(Rigidbody); - rigidBody.mass = 0; - rigidBody.friction = 2; - // rigidBody.restitution = 0.1; - - let collider = floor.addComponent(ColliderComponent); - collider.shape = new BoxColliderShape(); - collider.shape.size = new Vector3(200, 1, 200); - this.scene.addChild(floor); - - class CarController extends ComponentBase { - actions = {}; - syncList = []; - keysActions = { - KeyUp: 'acceleration', - KeyDown: 'braking', - KeyLeft: 'left', - KeyRight: 'right', - }; - start() { - Engine3D.inputSystem.addEventListener(KeyEvent.KEY_UP, this.keyUp, this); - Engine3D.inputSystem.addEventListener(KeyEvent.KEY_DOWN, this.keyDown, this); - } - - stop() { - Engine3D.inputSystem.removeEventListener(KeyEvent.KEY_UP, this.keyUp, this); - Engine3D.inputSystem.removeEventListener(KeyEvent.KEY_DOWN, this.keyDown, this); - } - - destroy(force) { - Engine3D.inputSystem.removeEventListener(KeyEvent.KEY_UP, this.keyUp, this); - Engine3D.inputSystem.removeEventListener(KeyEvent.KEY_DOWN, this.keyDown, this); - } - - keyUp(e) { - switch (e.keyCode) { - case KeyCode.Key_Up: - this.actions[this.keysActions['KeyUp']] = false; - break; - case KeyCode.Key_Down: - this.actions[this.keysActions['KeyDown']] = false; - break; - case KeyCode.Key_Left: - this.actions[this.keysActions['KeyLeft']] = false; - break; - case KeyCode.Key_Right: - this.actions[this.keysActions['KeyRight']] = false; - break; - } + // load a car model + { + this.car = await Engine3D.res.loadGltf( + "https://cdn.orillusion.com/gltfs/glb/vevhicle.glb" + ); + this.car.y = 2 + let collider = this.car.addComponent(ColliderComponent); + collider.shape = new BoxColliderShape(); + collider.shape.size = BoundUtil.genMeshBounds(this.car).size.clone(); + scene.addChild(this.car); + // add keyboard controller to the car + this.car.addComponent(VehicleKeyboardController); + // fix the camera to the car + this.controller = this.camera.object3D.addComponent( + fixedCameraController + ); + this.controller.target = this.car; + this.controller.distance = 50; + } + // add a plane as road + { + this.road = new Object3D(); + let mr = this.road.addComponent(MeshRenderer); + mr.geometry = new BoxGeometry(200, 0.1, 40); + let mat = (mr.material = new LitMaterial()); + mat.roughness = 1; + mat.metallic = 0; + mat.baseMap = await Engine3D.res.loadTexture("data:image/webp;base64,UklGRqAAAABXRUJQVlA4TJMAAAAvV8INER8gEEhxXGstIEmxu7qVgCTF7upWAgFCiv8qJwJXoF8wimQrDiiLCnCG0KzXL4DlRKoj+j8BtSxpW5XY2teypI3/+I//+I//+I//+I//+I//+I//+I//+I//+G8vkFO/Yzuj24P/flBy6nds0+Q//uM//uM//uM//uM//uM//uM//uM//uM//gOwL9Z0FwUA"); + let collider = this.road.addComponent(ColliderComponent); + collider.shape = new BoxColliderShape(); + collider.shape.size = BoundUtil.genMeshBounds( + this.road + ).size.clone(); + console.log(collider.shape.size) + this.road.rotationY = -90; + let rigidbody = this.road.addComponent(Rigidbody); + rigidbody.mass = 0; + scene.addChild(this.road); + } + // add boxes + { + let geometry = new BoxGeometry(1,1,1) + let mat = new LitMaterial(); + mat.baseColor = Color.random() + this.boxes = []; + for (let i = 0; i < 20; i++) { + this.boxes[i] = new Object3D() + let mr = this.boxes[i].addComponent(MeshRenderer) + mr.geometry = geometry; + mr.material = mat; + this.boxes[i].x = Math.random() * 30 - 15; + this.boxes[i].y = Math.random() * 2; + this.boxes[i].z = Math.random() * 200 - 100; + let rigidbody = this.boxes[i].addComponent(Rigidbody); + rigidbody.mass = 1; + let collider = this.boxes[i].addComponent(ColliderComponent); + collider.shape = new BoxColliderShape(); + collider.shape.size = BoundUtil.genMeshBounds( + this.boxes[i] + ).size.clone(); + scene.addChild(this.boxes[i]); } + } + } - keyDown(e) { - // console.log(e.keyCode); - switch (e.keyCode) { - case KeyCode.Key_Up: - this.actions[this.keysActions['KeyUp']] = true; - break; - case KeyCode.Key_Down: - this.actions[this.keysActions['KeyDown']] = true; - break; - case KeyCode.Key_Left: - this.actions[this.keysActions['KeyLeft']] = true; - break; - case KeyCode.Key_Right: - this.actions[this.keysActions['KeyRight']] = true; - break; - } + private loop() { + Physics.update(); + this.boxes.map((box, index) => { + if (box.y < -5) { + this.score.Score++; + this.scene.removeChild(box); + this.boxes.splice(index, 1); } + }); + } +} - onUpdate(view) { - if (Physics.isInited) { - for (let i = 0; i < this.syncList.length; i++) { - this.syncList[i](16); - } - } +enum VehicleControlType { + acceleration, + braking, + left, + right, +} +/** + * Keyboard controller for the car + */ +class VehicleKeyboardController extends ComponentBase { + protected mBody: Object3D; + protected mWheels: Object3D[]; + protected mEngineForce = 0; + protected mBreakingForce = 0; + protected mVehicleSteering = 0; + protected mAmmoVehicle; + protected mVehicleArgs = { + bodyMass: 800, + friction: 1000, + suspensionStiffness: 20.0, + suspensionDamping: 2.3, + suspensionCompression: 4.4, + suspensionRestLength: 0.6, + rollInfluence: 0.2, + steeringIncrement: 0.04, + steeringClamp: 0.5, + maxEngineForce: 1500, + maxBreakingForce: 500 + } + protected mVehicleControlState = [false, false, false, false]; + async start() { + this.mBody = this.object3D; + let w1 = this.object3D.getChildByName("wheel_1"); + let w2 = this.object3D.getChildByName("wheel_2"); + let w3 = this.object3D.getChildByName("wheel_3"); + let w4 = this.object3D.getChildByName("wheel_4"); + this.mWheels = [w1, w2, w3, w4]; + this.initController(); + } + initController() { + let bound = BoundUtil.genMeshBounds(this.mBody); + this.mBody.entityChildren[0].transform.y = -bound.size.y / 2 - 0.05; + let geometry = new Ammo.btBoxShape( + new Ammo.btVector3( + bound.size.x / 2, + bound.size.y / 2, + bound.size.z / 2 + ) + ); + let transform = new Ammo.btTransform(); + transform.setIdentity(); + transform.setOrigin( + new Ammo.btVector3( + this.mBody.transform.worldPosition.z, + this.mBody.transform.worldPosition.y, + this.mBody.transform.worldPosition.z + ) + ); + transform.setRotation(new Ammo.btQuaternion(0, 0, 0, 1)); + let motionState = new Ammo.btDefaultMotionState(transform); + let localInertia = new Ammo.btVector3(0, 0, 0); + geometry.calculateLocalInertia( + this.mVehicleArgs.bodyMass, + localInertia + ); + let bodyRb = new Ammo.btRigidBody( + new Ammo.btRigidBodyConstructionInfo( + this.mVehicleArgs.bodyMass, + motionState, + geometry, + localInertia + ) + ); + bodyRb.setActivationState(4); + Physics.world.addRigidBody(bodyRb); + //raycast Vehicle + let tuning = new Ammo.btVehicleTuning(); + let rayCaster = new Ammo.btDefaultVehicleRaycaster(Physics.world); + let vehicle = new Ammo.btRaycastVehicle(tuning, bodyRb, rayCaster); + vehicle.setCoordinateSystem(0, 1, 2); + this.mAmmoVehicle = vehicle; + Physics.world.addAction(vehicle); + let wheelDirectCS0 = new Ammo.btVector3(0, -1, 0); + let wheelAxleCS = new Ammo.btVector3(-1, 0, 0); + let addWheel = (isFront:boolean, x:number, y:number, z:number, radius:number) => { + let pos = new Ammo.btVector3(x, y, z); + let wheelInfo = vehicle.addWheel( + pos, + wheelDirectCS0, + wheelAxleCS, + this.mVehicleArgs.suspensionRestLength, + radius, + tuning, + isFront + ); + wheelInfo.set_m_suspensionStiffness(this.mVehicleArgs.suspensionStiffness); + wheelInfo.set_m_wheelsDampingRelaxation(this.mVehicleArgs.suspensionDamping); + wheelInfo.set_m_wheelsDampingCompression(this.mVehicleArgs.suspensionCompression); + wheelInfo.set_m_frictionSlip(this.mVehicleArgs.friction); + wheelInfo.set_m_rollInfluence(this.mVehicleArgs.rollInfluence); + }; + + const r = BoundUtil.genMeshBounds(this.mWheels[0]).size.y / 2; + const x =this.mWheels[0].transform.worldPosition.x - this.mBody.transform.worldPosition.x; + const y = BoundUtil.genMeshBounds(this.mWheels[0]).size.y - r + 0.1; + const z = this.mWheels[0].transform.worldPosition.z - this.mBody.transform.worldPosition.z; + addWheel(true, -x, -y, z, r); + addWheel(true, x, -y, z, r); + addWheel(false, -x, -y, -z, r); + addWheel(false, x, -y, -z, r); + } + onEnable() { + Engine3D.inputSystem.addEventListener(KeyEvent.KEY_UP, this.onKeyUp, this); + Engine3D.inputSystem.addEventListener(KeyEvent.KEY_DOWN, this.onKeyDown, this); + } + onDisable() { + Engine3D.inputSystem.addEventListener(KeyEvent.KEY_UP, this.onKeyUp, this); + Engine3D.inputSystem.addEventListener(KeyEvent.KEY_DOWN, this.onKeyDown, this); + } + onUpdate() { + if (!this.mAmmoVehicle) return; + const vehicle = this.mAmmoVehicle; + const speed = vehicle.getCurrentSpeedKmHour(); + this.mBreakingForce = 0; + this.mEngineForce = 0; + if (this.mVehicleControlState[VehicleControlType.acceleration]) { + if (speed < -1) + this.mBreakingForce = Math.min(this.mVehicleArgs.maxEngineForce / 3, 1000); + else this.mEngineForce = this.mVehicleArgs.maxEngineForce; + } + if (this.mVehicleControlState[VehicleControlType.braking]) { + if (speed > 1) + this.mBreakingForce = Math.min(this.mVehicleArgs.maxEngineForce / 3, 1000); + else this.mEngineForce = -this.mVehicleArgs.maxEngineForce / 2; + } + if (this.mVehicleControlState[VehicleControlType.left]) { + if (this.mVehicleSteering < this.mVehicleArgs.steeringClamp) + this.mVehicleSteering += this.mVehicleArgs.steeringIncrement; + } else if (this.mVehicleControlState[VehicleControlType.right]) { + if (this.mVehicleSteering > -this.mVehicleArgs.steeringClamp) + this.mVehicleSteering -= this.mVehicleArgs.steeringIncrement; + } else { + if (this.mVehicleSteering < -this.mVehicleArgs.steeringIncrement) { + this.mVehicleSteering += this.mVehicleArgs.steeringIncrement; + } else { + if (this.mVehicleSteering > this.mVehicleArgs.steeringIncrement) + this.mVehicleSteering -= + this.mVehicleArgs.steeringIncrement; + else this.mVehicleSteering = 0; } } - - let url = "gltfs/pbrCar/pbrCar.glb" - Engine3D.res.loadGltf(url).then((e) => { - let body = e.getChildByName("Exoplanet-Rover_Exoplanet-Rover_0") as Object3D; - let scene = this.scene; - let bodyMass = 1300; - - - var chassisWidth = 2.8; - var chassisHeight = .6; - var chassisLength = 4; - var massVehicle = 800; - - var wheelAxisPositionBack = -1.3; - var wheelAxisHeightBack = .3; - var wheelRadiusBack = .4; - var wheelWidthBack = .4; - var wheelHalfTrackBack = 1.2; - - var wheelAxisFrontPosition = 1.7; - var wheelAxisHeightFront = .3; - var wheelRadiusFront = .4; - var wheelWidthFront = .4; - var wheelHalfTrackFront = 1.2; - - var friction = 1000; - var suspensionStiffness = 10.0; - var suspensionDamping = 6.3; - var suspensionCompression = 2.4; - var suspensionRestLength = 0.45; - var rollInfluence = 0.1; - - var steeringIncrement = .04; - var steeringClamp = .5; - var maxEngineForce = 2000; - var maxBreakingForce = 100; - - let bodyObj = new Object3D(); - let bodyMat = new LitMaterial(); - bodyMat.baseMap = Engine3D.res.whiteTexture; - bodyMat.normalMap = Engine3D.res.normalTexture; - bodyMat.aoMap = Engine3D.res.whiteTexture; - bodyMat.maskMap = Engine3D.res.whiteTexture; - bodyMat.emissiveMap = Engine3D.res.blackTexture; - let bodyMr = bodyObj.addComponent(MeshRenderer); - let carController = bodyObj.addComponent(CarController); - bodyMr.geometry = new BoxGeometry(chassisWidth * 0.5, chassisHeight * 0.5, chassisLength * 0.5); - bodyMr.material = bodyMat; - var geometry = new Ammo.btBoxShape(new Ammo.btVector3(chassisWidth * 0.5, chassisHeight * 0.5, chassisLength * 0.5)); - var transform = new Ammo.btTransform(); - transform.setIdentity(); - transform.setOrigin(new Ammo.btVector3(bodyObj.x, bodyObj.y, bodyObj.z)); - transform.setRotation(new Ammo.btQuaternion(0, 0, 0, 1)); - var motionState = new Ammo.btDefaultMotionState(transform); - var localInertia = new Ammo.btVector3(0, 0, 0); - geometry.calculateLocalInertia(bodyMass, localInertia); - var bodyRb = new Ammo.btRigidBody(new Ammo.btRigidBodyConstructionInfo(bodyMass, motionState, geometry, localInertia)); - bodyRb.setActivationState(4); - Physics.world.addRigidBody(bodyRb); - - body.scaleX = 0.0055; - body.scaleY = 0.0055; - body.scaleZ = 0.0055; - body.rotationX = 0; - body.y = -1.1; - body.z = -0.15 - bodyObj.addChild(body); - - bodyObj.y = 10 - scene.addChild(bodyObj); - - //raycast Vehicle - let engineForce = 0; - let vehicleSteering = 0; - let breakingForce = 0; - let tuning = new Ammo.btVehicleTuning(); - let rayCaster = new Ammo.btDefaultVehicleRaycaster(Physics.world); - let vehicle = new Ammo.btRaycastVehicle(tuning, bodyRb, rayCaster); - vehicle.setCoordinateSystem(0, 1, 2); - Physics.world.addAction(vehicle); - - //create wheels - - const FRONT_LEFT = 0; - const FRONT_RIGHT = 1; - const BACK_LEFT = 2; - const BACK_RIGHT = 3; - - let wheelMeshes = []; - let wheelDirectCS0 = new Ammo.btVector3(0, -1, 0); - let wheelAxleCS = new Ammo.btVector3(-1, 0, 0); - - let addWheel = (name, isFront, pos, radius, width, index) => { - let wheelInfo = vehicle.addWheel(pos, wheelDirectCS0, wheelAxleCS, suspensionRestLength, radius, tuning, isFront); - wheelInfo.set_m_suspensionStiffness(suspensionStiffness); - wheelInfo.set_m_wheelsDampingRelaxation(suspensionDamping); - wheelInfo.set_m_wheelsDampingCompression(suspensionCompression); - wheelInfo.set_m_frictionSlip(friction); - wheelInfo.set_m_rollInfluence(rollInfluence); - wheelMeshes[index] = this.createWheelObject(name, radius, width, e); - }; - - addWheel("ExoRov_FrontWheel_L_ExoRov_Wheels_0", true, new Ammo.btVector3(wheelHalfTrackFront, wheelAxisHeightFront, wheelAxisFrontPosition), wheelRadiusFront, wheelWidthFront, FRONT_LEFT); - addWheel("ExoRov_FrontWheel_R_ExoRov_Wheels_0", true, new Ammo.btVector3(-wheelHalfTrackFront, wheelAxisHeightFront, wheelAxisFrontPosition), wheelRadiusFront, wheelWidthFront, FRONT_RIGHT); - addWheel("ExoRov_BackWheel_L_ExoRov_Wheels_0", false, new Ammo.btVector3(-wheelHalfTrackBack, wheelAxisHeightBack, wheelAxisPositionBack), wheelRadiusBack, wheelWidthBack, BACK_LEFT); - addWheel("ExoRov_BackWheel_R_ExoRov_Wheels_0", false, new Ammo.btVector3(wheelHalfTrackBack, wheelAxisHeightBack, wheelAxisPositionBack), wheelRadiusBack, wheelWidthBack, BACK_RIGHT); - - let syncList = carController.syncList; - let actions = carController.actions; - function sync(dt) { - var speed = vehicle.getCurrentSpeedKmHour(); - - breakingForce = 0; - engineForce = 0; - // console.log(actions); - if (actions['acceleration']) { - if (speed < -1) breakingForce = maxBreakingForce; - else engineForce = maxEngineForce; - } - if (actions[`braking`]) { - if (speed > 1) breakingForce = maxBreakingForce; - else engineForce = -maxEngineForce / 2; - } - if (actions[`left`]) { - if (vehicleSteering < steeringClamp) vehicleSteering += steeringIncrement; - } else { - if (actions[`right`]) { - if (vehicleSteering > -steeringClamp) vehicleSteering -= steeringIncrement; - } else { - if (vehicleSteering < -steeringIncrement) vehicleSteering += steeringIncrement; - else { - if (vehicleSteering > steeringIncrement) vehicleSteering -= steeringIncrement; - else { - vehicleSteering = 0; - } - } - } - } - - vehicle.applyEngineForce(engineForce, BACK_LEFT); - vehicle.applyEngineForce(engineForce, BACK_RIGHT); - - vehicle.setBrake(breakingForce / 2, FRONT_LEFT); - vehicle.setBrake(breakingForce / 2, FRONT_RIGHT); - vehicle.setBrake(breakingForce, BACK_LEFT); - vehicle.setBrake(breakingForce, BACK_RIGHT); - - vehicle.setSteeringValue(vehicleSteering, FRONT_LEFT); - vehicle.setSteeringValue(vehicleSteering, FRONT_RIGHT); - - var tm, p, q, i; - var n = vehicle.getNumWheels(); - - // console.log("getNumWheels",n); - // console.log("engineForce",engineForce); - // console.log("breakingForce",breakingForce); - - for (i = 0; i < n; i++) { - vehicle.updateWheelTransform(i, true); - tm = vehicle.getWheelTransformWS(i); - p = tm.getOrigin(); - q = tm.getRotation(); - let obj = wheelMeshes[i]; - obj.transform.x = p.x(); - obj.transform.y = p.y(); - obj.transform.z = p.z(); - let qua = Quaternion.HELP_0; - - qua.set(q.x(), q.y(), q.z(), q.w()); - obj.transform.localRotQuat = qua; - } - - tm = vehicle.getChassisWorldTransform(); - p = tm.getOrigin(); - let q2 = tm.getRotation(); - bodyObj.x = p.x(); - bodyObj.y = p.y(); - bodyObj.z = p.z(); - let qua = Quaternion.HELP_0; - // q. - qua.set(q2.x(), q2.y(), q2.z(), q2.w()); - // qua. - bodyObj.transform.localRotQuat = qua; + const FRONT_LEFT = 0; + const FRONT_RIGHT = 1; + const BACK_LEFT = 2; + const BACK_RIGHT = 3; + vehicle.applyEngineForce(this.mEngineForce, BACK_LEFT); + vehicle.applyEngineForce(this.mEngineForce, BACK_RIGHT); + vehicle.setBrake(this.mBreakingForce / 2, FRONT_LEFT); + vehicle.setBrake(this.mBreakingForce / 2, FRONT_RIGHT); + vehicle.setBrake(this.mBreakingForce, BACK_LEFT); + vehicle.setBrake(this.mBreakingForce, BACK_RIGHT); + vehicle.setSteeringValue(this.mVehicleSteering, FRONT_LEFT); + vehicle.setSteeringValue(this.mVehicleSteering, FRONT_RIGHT); + + // update wheel rotation + const n = vehicle.getNumWheels(); + const angle = 40; + for (let i = 0; i < n; i++) { + let wheel = this.mWheels[i] + wheel.rotationX += speed; + if (i < 2) { + let offset = wheel.rotationZ; + this.mVehicleSteering === 0 + ? (wheel.rotationZ-= offset / 5) + : (wheel.rotationZ = offset - this.mVehicleSteering * 10); + if (wheel.rotationZ < -angle) + wheel.rotationZ = -angle; + else if (wheel.rotationZ > angle) + wheel.rotationZ = angle; } - - syncList.push(sync); - - let wheelMat = new LitMaterial(); - wheelMat.baseMap = Engine3D.res.whiteTexture; - wheelMat.normalMap = Engine3D.res.normalTexture; - wheelMat.aoMap = Engine3D.res.whiteTexture; - wheelMat.maskMap = Engine3D.res.whiteTexture; - wheelMat.emissiveMap = Engine3D.res.blackTexture; - wheelMat.roughness = 0.85; - wheelMat.metallic = 0.01; - wheelMat.envIntensity = 0.01; - }) + } + // update body position + let tm, p, q, qua = Quaternion.HELP_0; + tm = vehicle.getChassisWorldTransform(); + p = tm.getOrigin(); + this.mBody.x = p.x() + this.mBody.y = p.y() + this.mBody.z = p.z() + q = tm.getRotation(); + qua.set(q.x(), q.y(), q.z(), q.w()); + this.mBody.transform.localRotQuat = qua; } - - private loop() { - Physics.update(); + onKeyUp(e:KeyEvent) { + this.updateControlState(e.keyCode, false); } + onKeyDown(e:KeyEvent) { + this.updateControlState(e.keyCode, true); + } + updateControlState(keyCode:number, state:boolean) { + switch (keyCode) { + case KeyCode.Key_W: + this.mVehicleControlState[VehicleControlType.acceleration] = + state; + break; + case KeyCode.Key_Up: + this.mVehicleControlState[VehicleControlType.acceleration] = + state; + break; + case KeyCode.Key_S: + this.mVehicleControlState[VehicleControlType.braking] = state; + break; + case KeyCode.Key_Down: + this.mVehicleControlState[VehicleControlType.braking] = state; + break; + case KeyCode.Key_A: + this.mVehicleControlState[VehicleControlType.left] = state; + break; + case KeyCode.Key_Left: + this.mVehicleControlState[VehicleControlType.left] = state; + break; + case KeyCode.Key_D: + this.mVehicleControlState[VehicleControlType.right] = state; + break; + case KeyCode.Key_Right: + this.mVehicleControlState[VehicleControlType.right] = state; + break; + } + } +} - private createWheelObject(name: string, radius: number, width: number, skin: Object3D) { - - let wheelMat = new LitMaterial(); - wheelMat.baseMap = Engine3D.res.redTexture; - wheelMat.normalMap = Engine3D.res.normalTexture; - wheelMat.aoMap = Engine3D.res.whiteTexture; - wheelMat.maskMap = Engine3D.res.whiteTexture; - wheelMat.emissiveMap = Engine3D.res.blackTexture; - // wheelMat.blendMode = BlendMode.NORMAL; - wheelMat.roughness = 0.85; - wheelMat.metallic = 0.01; - wheelMat.envIntensity = 0.01; - wheelMat.doubleSide = true; - - let wheel = new Object3D(); - // let leftFrontWheel = new Object3D(); - let mr = wheel.addComponent(MeshRenderer); - - mr.geometry = new CylinderGeometry(radius * 2, radius * 2, width, 24, 1); - mr.materials = [wheelMat, wheelMat, wheelMat]; - let q = Quaternion.HELP_0; - q.fromEulerAngles(0, 0, 90); - wheel.transform.localRotQuat = q.clone(); - var p = new Object3D(); - p.addChild(wheel); - this.scene.addChild(p); - - var wheelSkin = skin.getChildByName(name) as Object3D; - wheelSkin.scaleX = 0.005; - wheelSkin.scaleY = 0.005; - wheelSkin.scaleZ = 0.005; - wheelSkin.x = 0; - wheelSkin.y = 0; - wheelSkin.z = 0; - wheelSkin.rotationX = 0; - wheelSkin.rotationY = 0; - wheelSkin.rotationZ = 0; - p.addChild(wheelSkin); - - return p; +/** + * Fix camera to a target + */ +class fixedCameraController extends ComponentBase { + private camera: Camera3D; + public distance = 50; // distance to target + public pitch = 30; // camera pitch angle + private _tempDir: Vector3; + private _tempPos: Vector3; + private _target: Object3D; + start() { + this._tempDir = new Vector3(); + this._tempPos = new Vector3(); + this.camera = this.object3D.getComponent(Camera3D); + } + get target() { + return this._target; + } + set target(obj) { + this._target = obj; + } + onUpdate() { + if (!this._target) return; + this._tempDir.set(0, 0, -1); + const q = Quaternion.HELP_0; + q.fromEulerAngles(this.pitch, 0, 0.0); + this._tempDir.applyQuaternion(q); + this._tempDir = this._target.transform.worldMatrix.transformVector( + this._tempDir, + this._tempDir + ); + this._tempDir.normalize(); + let position = this._target.transform.worldPosition; + this._tempPos = Vector3Ex.mulScale( + this._tempDir, + this.distance, + this._tempPos + ); + this._tempPos = position.add(this._tempPos, this._tempPos); + this.camera.lookAt(this._tempPos, this._target.transform.worldPosition); } } -new Sample_PhysicsCar().run(); \ No newline at end of file +new Sample_PhysicsCar().run(); From d372e85fb509c8e240f42ad84c1b5b6d57ff02ba Mon Sep 17 00:00:00 2001 From: Codeboy-cn Date: Tue, 14 Nov 2023 15:57:10 +0800 Subject: [PATCH 28/34] chore: modify error information --- src/core/entities/Entity.ts | 8 ++++---- src/loader/parser/prefab/mats/MaterialUtilities.ts | 3 +-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/core/entities/Entity.ts b/src/core/entities/Entity.ts index ff6df208..3c17bae1 100644 --- a/src/core/entities/Entity.ts +++ b/src/core/entities/Entity.ts @@ -126,10 +126,10 @@ export class Entity extends CEventDispatcher { */ public addChild(child: Entity): Entity { if (child == null) { - return new console.error('child is null!'); + throw new Error('child is null!'); } if (child === this) { - return new console.error('child is self!'); + throw new Error('child is self!'); } let index = this.entityChildren.indexOf(child); @@ -149,8 +149,8 @@ export class Entity extends CEventDispatcher { * @param child Removed objects */ public removeChild(child: Entity) { - if (child === null) return new console.error('remove child is null!'); - if (child === this) return new console.error('add child is self!'); + if (child === null) return; // throw new Error('remove child is null!'); + if (child === this) throw new Error('add child is self!'); let index = this.entityChildren.indexOf(child); if (index != -1) { this.entityChildren.splice(index, 1); diff --git a/src/loader/parser/prefab/mats/MaterialUtilities.ts b/src/loader/parser/prefab/mats/MaterialUtilities.ts index ecea5dcd..b178e50a 100644 --- a/src/loader/parser/prefab/mats/MaterialUtilities.ts +++ b/src/loader/parser/prefab/mats/MaterialUtilities.ts @@ -22,8 +22,7 @@ export class MaterialUtilities { material.shader = new shader(); return material; } else { - throw new console.error("not found shader, shader name is " + name); - + throw new Error("not found shader, shader name is " + name); } } From 0939b29d40e17e5ff74212b7dccf2fc7862990e9 Mon Sep 17 00:00:00 2001 From: Codeboy-cn Date: Tue, 14 Nov 2023 16:07:17 +0800 Subject: [PATCH 29/34] fix: Sample LoadGLB --- samples/loader/Sample_LoadGLB.ts | 38 ++++++++++++++++---------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/samples/loader/Sample_LoadGLB.ts b/samples/loader/Sample_LoadGLB.ts index d24ac932..34ddd532 100644 --- a/samples/loader/Sample_LoadGLB.ts +++ b/samples/loader/Sample_LoadGLB.ts @@ -100,32 +100,32 @@ export class Sample_LoadGLB { } ) - let model: Object3D; let { url, scale, offset, rotation } = JSON.parse(list[`HIE-Hand-Armor`]); - this.loadGLB(model, url, offset, scale, rotation); + this.loadGLB(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); + 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 model: Object3D; + 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; - this.scene.addChild(model); - model.x = offset[0]; - model.y = offset[1]; - model.z = offset[2]; - - model.scaleX = scale; - model.scaleY = scale; - model.scaleZ = scale; - - model.rotationX = rotation[0]; - model.rotationY = rotation[1]; - model.rotationZ = rotation[2]; + this.model = (await Engine3D.res.loadGltf(url, { onProgress: (e) => this.onLoadProgress(e), onComplete: (e) => this.onComplete(e) })) as Object3D; + this.scene.addChild(this.model); + this.model.x = offset[0]; + this.model.y = offset[1]; + this.model.z = offset[2]; + + this.model.scaleX = scale; + this.model.scaleY = scale; + this.model.scaleZ = scale; + + this.model.rotationX = rotation[0]; + this.model.rotationY = rotation[1]; + this.model.rotationZ = rotation[2]; } onLoadProgress(e) { From 7f23ef02e1ad63e7327202ebbcf2d36707743c40 Mon Sep 17 00:00:00 2001 From: Codeboy-cn Date: Tue, 14 Nov 2023 16:26:55 +0800 Subject: [PATCH 30/34] chore: Remove sample GraphicPath --- samples/graphic/Sample_GraphicPath.ts | 163 ----------------------- samples/graphic/Sample_GraphicPath2.ts | 173 ------------------------- samples/graphic/Sample_GraphicPath3.ts | 157 ---------------------- samples/graphic/Sample_GraphicShape.ts | 137 -------------------- 4 files changed, 630 deletions(-) delete mode 100644 samples/graphic/Sample_GraphicPath.ts delete mode 100644 samples/graphic/Sample_GraphicPath2.ts delete mode 100644 samples/graphic/Sample_GraphicPath3.ts delete mode 100644 samples/graphic/Sample_GraphicShape.ts diff --git a/samples/graphic/Sample_GraphicPath.ts b/samples/graphic/Sample_GraphicPath.ts deleted file mode 100644 index 2a694c06..00000000 --- a/samples/graphic/Sample_GraphicPath.ts +++ /dev/null @@ -1,163 +0,0 @@ -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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion, PingPong, Object3DUtil, GPUPrimitiveTopology } from "@orillusion/core"; -import { GUIUtil } from "@samples/utils/GUIUtil"; -import { Stats } from "@orillusion/stats"; - -export class Sample_GraphicPath { - lightObj3D: Object3D; - scene: Scene3D; - parts: Object3D[]; - width: number; - height: number; - cafe: number = 47; - frame: number = 16; - view: View3D; - - colors: Color[]; - trail3ds: Object3D[][]; - - constructor() { } - - async run() { - - Matrix4.maxCount = 300000; - Matrix4.allocCount = 300000; - - await Engine3D.init({ beforeRender: () => this.update() }); - - Engine3D.setting.render.debug = true; - Engine3D.setting.shadow.shadowBound = 5; - - this.colors = []; - - GUIHelp.init(); - - this.scene = new Scene3D(); - this.scene.addComponent(Stats); - let sky = this.scene.addComponent(AtmosphericComponent); - sky.enable = false; - let camera = CameraUtil.createCamera3DObject(this.scene); - camera.perspective(60, Engine3D.aspect, 1, 5000.0); - - camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 120); - - this.view = new View3D(); - this.view.scene = this.scene; - this.view.camera = camera; - - Engine3D.startRenderView(this.view); - - GUIUtil.renderDebug(); - - // let post = this.scene.addComponent(PostProcessingComponent); - // let bloom = post.addPost(BloomPost); - // bloom.bloomIntensity = 1.0 - // GUIUtil.renderBloom(bloom); - - await this.initScene(); - - sky.relativeTransform = this.lightObj3D.transform; - } - - async initScene() { - /******** light *******/ - { - this.lightObj3D = new Object3D(); - this.lightObj3D.rotationX = 21; - this.lightObj3D.rotationY = 108; - this.lightObj3D.rotationZ = 10; - let directLight = this.lightObj3D.addComponent(DirectLight); - directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); - directLight.castShadow = false; - directLight.intensity = 10; - GUIUtil.renderDirLight(directLight); - this.scene.addChild(this.lightObj3D); - } - - - let texts = []; - texts.push(await Engine3D.res.loadTexture("textures/frame64.png") as BitmapTexture2D); - texts.push(await Engine3D.res.loadTexture("textures/line_001064.png") as BitmapTexture2D); - - // texts.push(await Engine3D.res.loadTexture("particle/fx_a_fragment_003.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/grid.jpg") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); - - let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); - bitmapTexture2DArray.setTextures(texts); - - let mat = new UnLitTexArrayMaterial(); - mat.baseMap = bitmapTexture2DArray; - mat.name = "LitMaterial"; - - GUIHelp.add(this, "cafe", 0.0, 100.0); - GUIHelp.add(this, "frame", 0.0, 100.0); - { - this.width = 40; - this.height = 1; - let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 255, this.width * this.height); - this.parts = mr.object3Ds; - - - - - mr.material.blendMode = BlendMode.SOFT_ADD; - mr.material.transparent = true; - // mr.material.doubleSide = true; - mr.material.depthWriteEnabled = false; - // mr.material.useBillboard = true; - - for (let i = 0; i < this.width * this.height; i++) { - mr.setTextureID(i, Math.floor(Math.random() * texts.length)); - // mr.setTextureID(i, 0); - } - - let c1 = new Color(0.65, 0.1, 0.2, 0.15); - let c2 = new Color(1.0, 1.1, 0.2, 0.65); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - this.colors.push(c2); - } - - this.updateOnce(1000); - } - - private tmpArray: any[] = []; - update() { - this.updateOnce(Time.frame); - } - - updateOnce(engineFrame: number) { - if (this.trail3ds && this.trail3ds.length > 0) { - // Vector3.HELP_0.x = Math.random() * 10 - 5; - // Vector3.HELP_0.y = Math.random() * 2 - 1; - // Vector3.HELP_0.z = Math.random() * 10 - 5; - Vector3.HELP_0.set(0, 0, 0); - // let offsetAngle = Math.random() * 360; - for (let i = 0; i < this.trail3ds.length; i++) { - const trail3d = this.trail3ds[i]; - let offsetAngle = i * 2.0; - - for (let j = 0; j < trail3d.length; j++) { - let p = j / (trail3d.length - 1); - trail3d[j].x = Math.sin(p * (trail3d.length / 15) + offsetAngle + engineFrame * 0.001) * p * 35 + Vector3.HELP_0.x; - trail3d[j].y = j * 0.2 + Vector3.HELP_0.y; - trail3d[j].z = Math.cos(p * (trail3d.length / 10) + offsetAngle + engineFrame * 0.001) * p * 35 + Vector3.HELP_0.z; - - // let obj = Object3DUtil.GetSingleSphere(0.1, 1, 0, 0); - // this.scene.addChild(obj); - // obj.transform.x = trail3d[j].x; - // obj.transform.y = trail3d[j].y; - // obj.transform.z = trail3d[j].z; - } - } - } - } - -} diff --git a/samples/graphic/Sample_GraphicPath2.ts b/samples/graphic/Sample_GraphicPath2.ts deleted file mode 100644 index 2752464b..00000000 --- a/samples/graphic/Sample_GraphicPath2.ts +++ /dev/null @@ -1,173 +0,0 @@ -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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion, PingPong, Object3DUtil, GPUPrimitiveTopology, RibbonStruct } from "@orillusion/core"; -import { GUIUtil } from "@samples/utils/GUIUtil"; -import { Stats } from "@orillusion/stats"; - -export class Sample_GraphicPath2 { - lightObj3D: Object3D; - scene: Scene3D; - parts: Object3D[]; - width: number; - height: number; - cafe: number = 47; - frame: number = 16; - view: View3D; - - colors: Color[]; - cubeArray: Object3D[]; - ribbons: RibbonStruct[]; - - constructor() { } - - async run() { - - Matrix4.maxCount = 300000; - Matrix4.allocCount = 300000; - - await Engine3D.init({ beforeRender: () => this.update() }); - - Engine3D.setting.render.debug = true; - Engine3D.setting.shadow.shadowBound = 80; - - this.colors = []; - - GUIHelp.init(); - - this.scene = new Scene3D(); - this.scene.addComponent(Stats); - let sky = this.scene.addComponent(AtmosphericComponent); - // sky.enable = false; - let camera = CameraUtil.createCamera3DObject(this.scene); - camera.perspective(60, Engine3D.aspect, 1, 1000.0); - - camera.object3D.addComponent(HoverCameraController).setCamera(30, 0, 35); - - this.view = new View3D(); - this.view.scene = this.scene; - this.view.camera = camera; - - Engine3D.startRenderView(this.view); - - GUIUtil.renderDebug(); - - let post = this.scene.addComponent(PostProcessingComponent); - let bloom = post.addPost(BloomPost); - bloom.bloomIntensity = 1.0 - GUIUtil.renderBloom(bloom); - - await this.initScene(); - - sky.relativeTransform = this.lightObj3D.transform; - } - - async initScene() { - /******** light *******/ - { - this.lightObj3D = new Object3D(); - this.lightObj3D.rotationX = 21; - this.lightObj3D.rotationY = 108; - this.lightObj3D.rotationZ = 10; - let directLight = this.lightObj3D.addComponent(DirectLight); - directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); - directLight.castShadow = true; - directLight.intensity = 10; - GUIUtil.renderDirLight(directLight); - this.scene.addChild(this.lightObj3D); - } - { - let floorObj = Object3DUtil.GetCube(); - floorObj.scaleX = 500; - floorObj.scaleY = 0.1; - floorObj.scaleZ = 500; - this.scene.addChild(floorObj); - - let o1 = Object3DUtil.GetCube(); - o1.x = 10; - o1.y = 0.5; - o1.z = 0; - this.scene.addChild(o1); - - let o2 = Object3DUtil.GetCube(); - o2.x = 10; - o2.y = 0.5; - o2.z = 5; - this.scene.addChild(o2); - - let o3 = Object3DUtil.GetCube(); - o3.x = 20; - o3.y = 0.5; - o3.z = 5; - this.scene.addChild(o3); - - let o4 = Object3DUtil.GetCube(); - o4.x = 20; - o4.y = 0.5; - o4.z = 25; - this.scene.addChild(o4); - - let o5 = Object3DUtil.GetCube(); - o5.x = 5; - o5.y = 0.5; - o5.z = 25; - this.scene.addChild(o5); - - let o6 = Object3DUtil.GetCube(); - o6.x = 5; - o6.y = 0.5; - o6.z = 5; - this.scene.addChild(o6); - - this.cubeArray = []; - this.cubeArray.push(o1); - this.cubeArray.push(o2); - this.cubeArray.push(o3); - this.cubeArray.push(o4); - this.cubeArray.push(o5); - this.cubeArray.push(o6); - } - - - let texts = []; - texts.push(await Engine3D.res.loadTexture("textures/line_001064.png") as BitmapTexture2D); - - let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); - bitmapTexture2DArray.setTextures(texts); - - let mat = new UnLitTexArrayMaterial(); - mat.baseMap = bitmapTexture2DArray; - mat.name = "LitMaterial"; - - { - this.width = 1; - this.height = 1; - let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, 5, this.width * this.height); - this.parts = mr.object3Ds; - this.ribbons = mr.ribbons; - - mr.material.blendMode = BlendMode.SOFT_ADD; - mr.material.transparent = true; - mr.material.depthWriteEnabled = false; - mr.material.doubleSide = true; - - for (let i = 0; i < this.width * this.height; i++) { - mr.setTextureID(i, Math.floor(Math.random() * texts.length)); - } - - let c2 = new Color(1.0, 1.1, 0.2, 0.65); - this.colors.push(c2); - } - - for (let i = 0; i < this.cubeArray.length; i++) { - const element = this.cubeArray[i]; - this.ribbons[0].ribbonPoint[i].localPosition = element.transform.worldPosition; - } - } - - update() { - } - - updateOnce(engineFrame: number) { - - } - -} diff --git a/samples/graphic/Sample_GraphicPath3.ts b/samples/graphic/Sample_GraphicPath3.ts deleted file mode 100644 index fddbc442..00000000 --- a/samples/graphic/Sample_GraphicPath3.ts +++ /dev/null @@ -1,157 +0,0 @@ -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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion, PingPong, Object3DUtil, GPUPrimitiveTopology, RibbonStruct } from "@orillusion/core"; -import { GUIUtil } from "@samples/utils/GUIUtil"; -import { Stats } from "@orillusion/stats"; - -export class Sample_GraphicPath3 { - lightObj3D: Object3D; - scene: Scene3D; - parts: Object3D[]; - width: number; - height: number; - view: View3D; - colors: Color[]; - cubeArray: Object3D[]; - ribbons: RibbonStruct[]; - count: number = 10; - - constructor() { } - - async run() { - - Matrix4.maxCount = 300000; - Matrix4.allocCount = 300000; - - await Engine3D.init({ beforeRender: () => this.update() }); - - Engine3D.setting.render.debug = true; - Engine3D.setting.shadow.shadowBound = 80; - - this.colors = []; - - GUIHelp.init(); - - this.scene = new Scene3D(); - this.scene.addComponent(Stats); - let sky = this.scene.addComponent(AtmosphericComponent); - // sky.enable = false; - let camera = CameraUtil.createCamera3DObject(this.scene); - camera.perspective(60, Engine3D.aspect, 1, 1000.0); - - camera.object3D.addComponent(HoverCameraController).setCamera(30, -60, 35); - - this.view = new View3D(); - this.view.scene = this.scene; - this.view.camera = camera; - - Engine3D.startRenderView(this.view); - - GUIUtil.renderDebug(); - - let post = this.scene.addComponent(PostProcessingComponent); - let bloom = post.addPost(BloomPost); - bloom.bloomIntensity = 1.0 - GUIUtil.renderBloom(bloom); - - await this.initScene(); - - sky.relativeTransform = this.lightObj3D.transform; - } - - async initScene() { - /******** light *******/ - { - this.lightObj3D = new Object3D(); - this.lightObj3D.rotationX = 21; - this.lightObj3D.rotationY = 108; - this.lightObj3D.rotationZ = 10; - let directLight = this.lightObj3D.addComponent(DirectLight); - directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); - directLight.castShadow = true; - directLight.intensity = 10; - GUIUtil.renderDirLight(directLight); - this.scene.addChild(this.lightObj3D); - } - { - let floorObj = Object3DUtil.GetCube(); - floorObj.scaleX = 500; - floorObj.scaleY = 0.1; - floorObj.scaleZ = 500; - this.scene.addChild(floorObj); - - this.cubeArray = []; - let dirs = [ - Vector3.FORWARD, - Vector3.RIGHT, - Vector3.BACK, - Vector3.LEFT, - ]; - - let lastPos: Vector3 = Vector3.ZERO; - for (let i = 0; i < this.count; i++) { - let space = Math.random() * 10 + 2; - let dirIndex = Math.floor(Math.random() / 0.25); - let pos = dirs[dirIndex].clone().scaleBy(space); - let o1 = Object3DUtil.GetCube(); - o1.x = lastPos.x + pos.x; - o1.y = 0.5; - o1.z = lastPos.z + pos.z; - lastPos.set(o1.x, o1.y, o1.z); - this.scene.addChild(o1); - o1.transform.enable = false; - this.cubeArray.push(o1); - } - } - - - let texts = []; - texts.push(await Engine3D.res.loadTexture("textures/line_001064.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/frame64.png") as BitmapTexture2D); - - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0001.PNG") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0010.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0013.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/128/line_0017.png") as BitmapTexture2D); - - let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); - bitmapTexture2DArray.setTextures(texts); - - let mat = new UnLitTexArrayMaterial(); - mat.baseMap = bitmapTexture2DArray; - mat.baseColor = new Color(2.0, 2.0, 2.0, 1.0) - mat.name = "LitMaterial"; - - { - this.width = 1; - this.height = 1; - let mr = Graphic3DMesh.drawRibbon("trail", this.scene, bitmapTexture2DArray, this.count - 1, this.width * this.height); - this.parts = mr.object3Ds; - this.ribbons = mr.ribbons; - - mr.material.blendMode = BlendMode.SOFT_ADD; - mr.material.transparent = true; - mr.material.depthWriteEnabled = false; - mr.material.doubleSide = true; - - for (let i = 0; i < this.width * this.height; i++) { - mr.setTextureID(i, Math.floor(Math.random() * texts.length)); - } - - let c2 = new Color(1.0, 1.1, 0.2, 0.65); - this.colors.push(c2); - } - - for (let i = 0; i < this.cubeArray.length; i++) { - const element = this.cubeArray[i]; - this.ribbons[0].ribbonPoint[i].localPosition = element.transform.worldPosition; - } - } - - update() { - } - - updateOnce(engineFrame: number) { - - } - -} diff --git a/samples/graphic/Sample_GraphicShape.ts b/samples/graphic/Sample_GraphicShape.ts deleted file mode 100644 index 7351d466..00000000 --- a/samples/graphic/Sample_GraphicShape.ts +++ /dev/null @@ -1,137 +0,0 @@ -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, PostProcessingComponent, BloomPost, TrailGeometry, AnimationCurve, Keyframe, AnimationCurveT, KeyframeT, DepthOfFieldPost, Quaternion, PingPong, Object3DUtil, GPUPrimitiveTopology, Float32ArrayUtil, Vector4 } from "@orillusion/core"; -import { GUIUtil } from "@samples/utils/GUIUtil"; -import { Stats } from "@orillusion/stats"; - -export class Sample_GraphicShape { - lightObj3D: Object3D; - scene: Scene3D; - parts: Object3D[]; - width: number; - height: number; - cafe: number = 47; - frame: number = 16; - view: View3D; - - colors: Color[]; - trail3ds: Object3D[][]; - - constructor() { } - - async run() { - - Matrix4.maxCount = 300000; - Matrix4.allocCount = 300000; - - await Engine3D.init({ beforeRender: () => this.update() }); - - Engine3D.setting.render.debug = true; - Engine3D.setting.shadow.shadowBound = 5; - - this.colors = []; - - GUIHelp.init(); - - this.scene = new Scene3D(); - this.scene.addComponent(Stats); - let sky = this.scene.addComponent(AtmosphericComponent); - sky.enable = false; - let camera = CameraUtil.createCamera3DObject(this.scene); - camera.perspective(60, Engine3D.aspect, 1, 5000.0); - - camera.object3D.addComponent(HoverCameraController).setCamera(30, -60, 25); - - this.view = new View3D(); - this.view.scene = this.scene; - this.view.camera = camera; - - Engine3D.startRenderView(this.view); - - // GUIUtil.renderDebug(); - - // let post = this.scene.addComponent(PostProcessingComponent); - // let bloom = post.addPost(BloomPost); - // bloom.bloomIntensity = 1.0 - // GUIUtil.renderBloom(bloom); - - await this.initScene(); - - sky.relativeTransform = this.lightObj3D.transform; - } - - async initScene() { - /******** light *******/ - { - this.lightObj3D = new Object3D(); - this.lightObj3D.rotationX = 21; - this.lightObj3D.rotationY = 108; - this.lightObj3D.rotationZ = 10; - let directLight = this.lightObj3D.addComponent(DirectLight); - directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355); - directLight.castShadow = false; - directLight.intensity = 10; - // GUIUtil.renderDirLight(directLight); - this.scene.addChild(this.lightObj3D); - } - - - let texts = []; - texts.push(await Engine3D.res.loadTexture("textures/frame64.png") as BitmapTexture2D); - // texts.push(await Engine3D.res.loadTexture("textures/line_001064.png") as BitmapTexture2D); - - let bitmapTexture2DArray = new BitmapTexture2DArray(texts[0].width, texts[0].height, texts.length); - bitmapTexture2DArray.setTextures(texts); - - let mat = new UnLitTexArrayMaterial(); - mat.baseMap = bitmapTexture2DArray; - mat.name = "LitMaterial"; - - GUIHelp.add(this, "cafe", 0.0, 100.0); - GUIHelp.add(this, "frame", 0.0, 100.0); - { - this.width = 1; - this.height = 1; - let mr = Graphic3DMesh.drawShape("s1", this.scene, bitmapTexture2DArray); - this.parts = mr.object3Ds; - mr.material.blendMode = BlendMode.SOFT_ADD; - for (let i = 0; i < this.width * this.height; i++) { - mr.setTextureID(i, Math.floor(Math.random() * texts.length)); - } - - mr.shapes[0].shapeType = 3; - mr.shapes[0].pathCount = 4; - mr.shapes[0].width = 0.5; - mr.shapes[0].vSpeed = 10; - - let neg = false; - if (neg) { - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 0, new Vector4(0, 0, -10, 0)); - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 1, new Vector4(0, 0, 0, 0)); - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 2, new Vector4(10, 0, -10, 0)); - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 3, new Vector4(10, 0, 10, 0)); - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 4, new Vector4(10, 0, -20, 0)); - } else { - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 0, new Vector4(10, 0, -10, 0)); - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 1, new Vector4(0, 0, 0, 0)); - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 2, new Vector4(0, 0, -10, 0)); - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 3, new Vector4(10, 0, 10, 0)); - Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, 4, new Vector4(-10, 0, 20, 0)); - } - - // let pos = Vector4.ZERO; - // let space = 15; - // for (let i = 0; i < mr.shapes[0].pathCount + 1; i++) { - // let newPos = new Vector4(); - // newPos.x = pos.x + Math.random() * space + Math.random() * space - space * 0.5; - // newPos.y = pos.y + 0; - // newPos.z = pos.z + Math.random() * space + Math.random() * space - space * 0.5; - // pos.copyFrom(newPos); - // Float32ArrayUtil.wirteVec4(mr.shapes[0].paths, i, newPos); - // } - mr.updateShape(0, mr.shapes[0]); - } - } - - update() { - } -} From 74c4c7c6e4d324dcb5bbedade58d0e9ce4effa98 Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Tue, 14 Nov 2023 16:36:04 +0800 Subject: [PATCH 31/34] update public assets --- public | 2 +- samples/loader/Sample_LoadGLB.ts | 80 ++++++++++++++------------------ 2 files changed, 36 insertions(+), 46 deletions(-) diff --git a/public b/public index 5f32b408..8ea93857 160000 --- a/public +++ b/public @@ -1 +1 @@ -Subproject commit 5f32b408d1314243ece38c4fd47c871206cd7996 +Subproject commit 8ea938570bbc64594439cb1b0a89a51b91f70bba diff --git a/samples/loader/Sample_LoadGLB.ts b/samples/loader/Sample_LoadGLB.ts index 34ddd532..e68ee1c8 100644 --- a/samples/loader/Sample_LoadGLB.ts +++ b/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,91 +50,80 @@ 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 { url, scale, offset, rotation } = JSON.parse(list[`HIE-Hand-Armor`]); - this.loadGLB(url, offset, scale, rotation); - GUIHelp.add({ Model: `HIE-Hand-Armor` }, 'Model', list).onChange(async (v) => { - let { url, scale, offset, rotation } = JSON.parse(v); + + 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 model: Object3D; private async loadGLB(url: string, offset: number[], scale: number, rotation: number[]) { if (this.model) { this.scene.removeChild(this.model); } - this.model = (await Engine3D.res.loadGltf(url, { onProgress: (e) => this.onLoadProgress(e), onComplete: (e) => this.onComplete(e) })) as Object3D; - this.scene.addChild(this.model); - this.model.x = offset[0]; - this.model.y = offset[1]; - this.model.z = offset[2]; - - this.model.scaleX = scale; - this.model.scaleY = scale; - this.model.scaleZ = scale; - - this.model.rotationX = rotation[0]; - this.model.rotationY = rotation[1]; - this.model.rotationZ = rotation[2]; + 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]; + model.z = offset[2]; + + model.scaleX = scale; + model.scaleY = scale; + model.scaleZ = scale; + + model.rotationX = rotation[0]; + model.rotationY = rotation[1]; + model.rotationZ = rotation[2]; } onLoadProgress(e) { - console.log(e); + console.log('[loading]', e); } onComplete(e) { - console.log(e); + console.log('[compelete]', e); } } From cfbb5490de8c7d4cd4754e1324e6e22a0cb1ed61 Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Tue, 14 Nov 2023 17:23:24 +0800 Subject: [PATCH 32/34] fix index import --- public | 2 +- .../shader/graphic/GraphicTrailComputeOld.ts | 84 --------- .../shader/graphic/GraphicTrailComputeOld2.ts | 116 ------------ .../graphic/new/Graphic3DRibbonRenderer2.ts | 168 ------------------ src/index.ts | 3 - 5 files changed, 1 insertion(+), 372 deletions(-) delete mode 100644 src/assets/shader/graphic/GraphicTrailComputeOld.ts delete mode 100644 src/assets/shader/graphic/GraphicTrailComputeOld2.ts delete mode 100644 src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts diff --git a/public b/public index 8ea93857..82b77d26 160000 --- a/public +++ b/public @@ -1 +1 @@ -Subproject commit 8ea938570bbc64594439cb1b0a89a51b91f70bba +Subproject commit 82b77d26e6b6e2cd43b470faf55d1b5f99d30c58 diff --git a/src/assets/shader/graphic/GraphicTrailComputeOld.ts b/src/assets/shader/graphic/GraphicTrailComputeOld.ts deleted file mode 100644 index 48f97be7..00000000 --- a/src/assets/shader/graphic/GraphicTrailComputeOld.ts +++ /dev/null @@ -1,84 +0,0 @@ -// export let graphicTrailCompute: string = /*wgsl*/` -// #include "GlobalUniform" - -// struct VertexInfo{ -// // position:vec3f, -// px:f32, -// py:f32, -// pz:f32, -// nx:f32, -// ny:f32, -// nz:f32, -// uv_x:f32, -// uv_y:f32, -// uv2_x:f32, -// uv2_y:f32, -// index:f32, -// index2:f32 -// } - -// struct TrailInfo{ -// index : f32 , -// segment : f32 , -// visible : f32 , -// width: f32, -// uv: vec4f, -// uvSpeed: vec2f, -// smoothLine: f32, -// useBillboard: f32, -// ids:array -// } - -// @group(0) @binding(1) var vertexBuffer : array; -// @group(0) @binding(2) var trailBuffer : array; -// @group(0) @binding(3) var models : array>; - -// @compute @workgroup_size(1) -// fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3){ -// let indexTrail = globalInvocation_id.x ; -// let trailInfo = trailBuffer[indexTrail]; - -// if(trailInfo.visible > 0.0){ -// let segmentLength = u32(trailInfo.segment + 1.0); -// let first = indexTrail * segmentLength ; -// let len = first + segmentLength ; -// let time = globalUniform.frame * 0.001; -// for (var i:u32 = first ; i < len ; i += 1u) { -// let i1 = i * 2u + 0u; -// let i2 = i * 2u + 1u; - -// let mat = models[i32(trailInfo.ids[i - first ])] ; -// let worldPos = (mat * vec4f(0.0,0.0,0.0,1.0)).xyz ; -// let viewDir = globalUniform.cameraWorldMatrix[0].xyz ; - -// let right = viewDir ;//transformVector(mat,vec3f(viewDir)); -// // let right = transformVector(mat,vec3f(1.0,0.0,0.0)); -// let leftPos = worldPos - right.xyz * trailInfo.width ; -// let rightPos = worldPos + right.xyz * trailInfo.width ; - -// vertexBuffer[i1].px = leftPos.x ; -// vertexBuffer[i1].py = leftPos.y ; -// vertexBuffer[i1].pz = leftPos.z ; - -// vertexBuffer[i2].px = rightPos.x ; -// vertexBuffer[i2].py = rightPos.y ; -// vertexBuffer[i2].pz = rightPos.z ; - -// vertexBuffer[i1].uv_x = (0.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; -// vertexBuffer[i2].uv_x = (1.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; - -// let v = (1.0 - f32(i-first) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; -// vertexBuffer[i1].uv_y = v + time * trailInfo.uvSpeed.y ; -// vertexBuffer[i2].uv_y = v + time * trailInfo.uvSpeed.y ; -// } -// } -// } - -// fn transformVector(m:mat4x4f , v: vec3f ) -> vec3f { -// let x2 = v.x * m[0][0] + v.y * m[0][1] + v.z * m[0][2]; -// let y2 = v.x * m[1][0] + v.y * m[1][1] + v.z * m[1][2]; -// let z2 = v.x * m[2][0] + v.y * m[2][1] + v.z * m[2][2]; -// return normalize(vec3f(x2,y2,z2)) ; -// } - -// ` \ No newline at end of file diff --git a/src/assets/shader/graphic/GraphicTrailComputeOld2.ts b/src/assets/shader/graphic/GraphicTrailComputeOld2.ts deleted file mode 100644 index e53aeafc..00000000 --- a/src/assets/shader/graphic/GraphicTrailComputeOld2.ts +++ /dev/null @@ -1,116 +0,0 @@ -export let graphicTrailCompute: string = /*wgsl*/` -#include "GlobalUniform" - -struct VertexInfo{ - // position:vec3f, - px:f32, - py:f32, - pz:f32, - nx:f32, - ny:f32, - nz:f32, - uv_x:f32, - uv_y:f32, - uv2_x:f32, - uv2_y:f32, - index:f32, - index2:f32 -} - -struct TrailInfo{ - index : f32 , - segment : f32 , - visible : f32 , - width: f32, - - uv: vec4f, - - uvSpeed: vec2f, - smoothLine: f32, - useBillboard: f32, - - ids:array -} - -@group(0) @binding(1) var vertexBuffer : array; -@group(0) @binding(2) var trailBuffer : array; -@group(0) @binding(3) var models : array>; - -var rights:array; - -@compute @workgroup_size(1) -fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3){ - let indexTrail = globalInvocation_id.x ; - let trailInfo = trailBuffer[indexTrail]; - let viewDir = normalize(globalUniform.cameraWorldMatrix[2].xyz) ; - - if(trailInfo.visible > 0.0){ - let segmentLength = u32(trailInfo.segment + 1.0); - let first = indexTrail * segmentLength ; - let len = first + segmentLength ; - let time = globalUniform.time * 0.001; - - //**first******* - let sp0 = models[i32(trailInfo.ids[ 0 ])][3].xyz ; - let sp1 = models[i32(trailInfo.ids[ 1 ])][3].xyz ; - let firstFront = normalize(sp1 - sp0) ; - rights[0] = normalize(cross(firstFront,viewDir)); - // rights[0] = viewDir; - //************** - //**body******* - for (var i:u32 = 1; i < u32(trailInfo.segment+1.0) - 1u ; i += 1u) { - let bp0 = models[i32(trailInfo.ids[i-1])][3].xyz ; - let bp1 = models[i32(trailInfo.ids[i])][3].xyz ; - let bp2 = models[i32(trailInfo.ids[i+1])][3].xyz ; - rights[i] = getRight(bp0,bp1,bp2,viewDir) ; - } - //************** - //**end******* - let ep0 = models[i32(trailInfo.ids[u32(trailInfo.segment)-1u])][3].xyz ; - let ep1 = models[i32(trailInfo.ids[u32(trailInfo.segment)])][3].xyz ; - let endFront = normalize(ep1 - ep0) ; - rights[u32(trailInfo.segment)] = normalize(cross(endFront,viewDir)); - //************** - - for (var i:u32 = 0u ; i < segmentLength ; i += 1u) { - let i1 = ((i + (segmentLength * indexTrail)) * 2u + 0u) ; - let i2 = ((i + (segmentLength * indexTrail)) * 2u + 1u) ; - - let right = rights[i]; - let worldPos = models[i32(trailInfo.ids[i])][3].xyz ; - let leftPos = worldPos - right.xyz * trailInfo.width ; - let rightPos = worldPos + right.xyz * trailInfo.width ; - - vertexBuffer[i1].px = leftPos.x ; - vertexBuffer[i1].py = leftPos.y ; - vertexBuffer[i1].pz = leftPos.z ; - - vertexBuffer[i2].px = rightPos.x ; - vertexBuffer[i2].py = rightPos.y ; - vertexBuffer[i2].pz = rightPos.z ; - - vertexBuffer[i1].uv_x = (0.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; - vertexBuffer[i2].uv_x = (1.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; - - let v = (1.0 - f32(i) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; - vertexBuffer[i1].uv_y = v + time * trailInfo.uvSpeed.y ; - vertexBuffer[i2].uv_y = v + time * trailInfo.uvSpeed.y ; - } - } -} - -fn transformVector(m:mat4x4f , v: vec3f ) -> vec3f { - let x2 = v.x * m[0][0] + v.y * m[0][1] + v.z * m[0][2]; - let y2 = v.x * m[1][0] + v.y * m[1][1] + v.z * m[1][2]; - let z2 = v.x * m[2][0] + v.y * m[2][1] + v.z * m[2][2]; - return normalize(vec3f(x2,y2,z2)) ; -} - -fn getRight(p0:vec3f,p1:vec3f,p2:vec3f,v:vec3f) -> vec3f { - let d0 = normalize(p1 - p0) ; - let d1 = normalize(p2 - p1) ; - let d2 = normalize((d0 + d1) ) ; - return normalize(cross(d2,v)) ; -} - -` \ No newline at end of file diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts deleted file mode 100644 index 272f399c..00000000 --- a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts +++ /dev/null @@ -1,168 +0,0 @@ -// import { graphicTrailCompute } from "../../../../../assets/shader/graphic/GraphicTrailCompute"; -// import { MeshRenderer } from "../../../../../components/renderer/MeshRenderer"; -// import { View3D } from "../../../../../core/View3D"; -// import { Object3D } from "../../../../../core/entities/Object3D"; -// import { GeometryBase } from "../../../../../core/geometry/GeometryBase"; -// import { UnLitTexArrayMaterial } from "../../../../../materials/UnLitTexArrayMaterial"; -// import { Color } from "../../../../../math/Color"; -// import { Vector2 } from "../../../../../math/Vector2"; -// import { Vector4 } from "../../../../../math/Vector4"; -// import { TrailGeometry } from "../../../../../shape/TrailGeometry"; -// import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; -// import { GeometryUtil } from "../../../../../util/GeometryUtil"; -// import { Struct } from "../../../../../util/struct/Struct"; -// import { GlobalBindGroup } from "../../../../graphics/webGpu/core/bindGroups/GlobalBindGroup"; -// import { StorageGPUBuffer } from "../../../../graphics/webGpu/core/buffer/StorageGPUBuffer"; -// import { ComputeShader } from "../../../../graphics/webGpu/shader/ComputeShader"; -// import { GPUContext } from "../../../GPUContext"; - -// export class Ribbon extends Struct { -// index: number = 1; -// segment: number = 1; -// visible: number = 1; -// width: number = 1; -// uv: Vector4 = new Vector4(0, 0, 1, 1); -// uvSpeed: Vector2 = new Vector2(0, 0); -// smooth: number = 0; -// useBillboard: number = 0; - -// ids: Float32Array = new Float32Array(1024); -// } - -// export class Graphic3DRibbonRenderer extends MeshRenderer { -// public transformBuffer: StorageGPUBuffer; -// public sourceGeometry: GeometryBase; -// public texture: BitmapTexture2DArray; -// public object3Ds: Object3D[]; -// public ribbon3Ds: Object3D[][]; -// public ribbons: Ribbon[]; -// public width: number = 1; -// public ribbonCount: number = 10; -// public uSegment: number = 1; -// public vSegment: number = 1; -// private _onChange: boolean = false; -// private _computeShader: ComputeShader; -// private _ribbonBuffer: StorageGPUBuffer; -// public init(): void { -// super.init(); -// } - -// public create(source: GeometryBase, tex: BitmapTexture2DArray, num: number) { -// this.ribbons = []; -// for (let i = 0; i < this.ribbons.length; i++) { -// this.ribbons[i] = new Ribbon(); -// } - -// let mat = new UnLitTexArrayMaterial(); -// mat.baseMap = tex; -// this.material = mat; - -// this.transformBuffer = new StorageGPUBuffer(num * (4 * 4), 0); -// this.material.setStorageBuffer("graphicBuffer", this.transformBuffer); - -// this.object3Ds = []; -// for (let i = 0; i < num; i++) { -// const element = new Object3D(); -// this.object3Ds.push(element); -// this.object3D.addChild(element); - -// this.transformBuffer.setFloat("matrix_" + i, element.transform.worldMatrix.index); -// this.transformBuffer.setFloat("texId_" + i, 1); -// this.transformBuffer.setFloat("texId2_" + i, 1); -// this.transformBuffer.setFloat("texId3_" + i, 1); -// this.transformBuffer.setColor("baseColor_" + i, new Color()); -// this.transformBuffer.setColor("emissiveColor_" + i, new Color(0, 0, 0, 0)); -// this.transformBuffer.setVector4("uvRect_" + i, new Vector4(0, 0, 1, 1)); -// } - -// this.transformBuffer.apply(); -// this.geometry = GeometryUtil.mergeNumber(source, num); -// } - -// public startRibbon(texture: BitmapTexture2DArray, trailSegment: number, width: number, count: number) { -// this.ribbonCount = count; -// this.width = width; -// // this.uSegment = uSegment; -// // this.vSegment = vSegment; - -// this.create(new TrailGeometry(trailSegment), texture, count); - -// this._computeShader = new ComputeShader(graphicTrailCompute); -// this._ribbonBuffer = new StorageGPUBuffer(count * (4 + 4 + 2 + 2 + 128)); - -// this.ribbon3Ds = []; -// for (let i = 0; i < count; i++) { -// this._ribbonBuffer.setFloat(`${i}_index`, i); -// this._ribbonBuffer.setFloat(`${i}_segment`, trailSegment); -// this._ribbonBuffer.setFloat(`${i}_visible`, 1); -// this._ribbonBuffer.setFloat(`${i}_width`, this.width); -// this._ribbonBuffer.setVector4(`${i}_uv`, new Vector4(0, 0, this.uSegment, this.vSegment)); -// this._ribbonBuffer.setVector2(`${i}_uvSpeed`, new Vector2(0, Math.random() * 4)); -// this._ribbonBuffer.setFloat(`${i}_smooth`, 0); -// this._ribbonBuffer.setFloat(`${i}_useBillboard`, 0); - -// this.ribbon3Ds[i] = []; -// let arr = new Float32Array(1024); -// for (let j = 0; j < 1024; j++) { -// const element = new Object3D(); -// this.ribbon3Ds[i].push(element); -// this.object3D.addChild(element); -// arr[j] = element.transform.worldMatrix.index; -// } -// this._ribbonBuffer.setFloat32Array(`${i}_ids`, arr); -// } -// this._ribbonBuffer.apply(); - -// this.start = () => { -// this._computeShader.setStorageBuffer("vertexBuffer", this.geometry.vertexBuffer.vertexGPUBuffer); -// this._computeShader.setStorageBuffer("trailBuffer", this._ribbonBuffer); -// this._computeShader.setStorageBuffer("models", GlobalBindGroup.modelMatrixBindGroup.matrixBufferDst); -// this._computeShader.setStorageBuffer("globalUniform", GlobalBindGroup.getCameraGroup(this.transform.scene3D.view.camera).uniformGPUBuffer); -// } - -// this.onCompute = (view: View3D, command: GPUCommandEncoder) => this.computeTrail(view, command); -// } - -// public setTextureID(i: number, id: number) { -// this.transformBuffer.setFloat("texId_" + i, id); -// this._onChange = true; -// } - -// // public setTexture2ID(i: number, id: number) { -// // this.transformBuffer.setFloat("texId_" + i, id); -// // this._onChange = true; -// // } - -// // public setTexture3ID(i: number, id: number) { -// // this.transformBuffer.setFloat("texId_" + i, id); -// // this._onChange = true; -// // } - -// public setBaseColor(i: number, color: Color) { -// this.transformBuffer.setColor("baseColor_" + i, color); -// this._onChange = true; -// } - -// public setEmissiveColor(i: number, color: Color) { -// this.transformBuffer.setColor("emissiveColor_" + i, color); -// this._onChange = true; -// } - -// public setUVRect(i: number, v: Vector4) { -// this.transformBuffer.setVector4("uvRect_" + i, v); -// this._onChange = true; -// } - -// public onUpdate(view?: View3D) { -// if (this._onChange) { -// this._onChange = false; -// this.transformBuffer.apply(); -// } -// } - -// private computeTrail(view: View3D, command: GPUCommandEncoder) { -// this._computeShader.workerSizeX = this.ribbonCount; -// GPUContext.computeCommand(command, [this._computeShader]); -// } - -// } \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 972d21ca..dddf5952 100644 --- a/src/index.ts +++ b/src/index.ts @@ -61,8 +61,6 @@ export * from "./assets/shader/graphic/GraphicFaceComput2" export * from "./assets/shader/graphic/GraphicFaceCompute" export * from "./assets/shader/graphic/GraphicFaceCompute3" export * from "./assets/shader/graphic/GraphicTrailCompute" -export * from "./assets/shader/graphic/GraphicTrailComputeOld" -export * from "./assets/shader/graphic/GraphicTrailComputeOld2" export * from "./assets/shader/lighting/BRDF_frag" export * from "./assets/shader/lighting/BsDF_frag" export * from "./assets/shader/lighting/BxDF_frag" @@ -350,7 +348,6 @@ export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DFaceRenderer" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer" -export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2" export * from "./gfx/renderJob/passRenderer/post/PostRenderer" export * from "./gfx/renderJob/passRenderer/preDepth/PreDepthPassRenderer" export * from "./gfx/renderJob/passRenderer/preDepth/ZCullingCompute" From 19ef2884b056933ac1f955eb4b450df8a885d8a2 Mon Sep 17 00:00:00 2001 From: Codeboy-cn Date: Tue, 14 Nov 2023 21:18:48 +0800 Subject: [PATCH 33/34] fix: class name register error --- .../shader/graphic/GraphicTrailComputeOld.ts | 84 --------- .../shader/graphic/GraphicTrailComputeOld2.ts | 116 ------------ src/components/SkeletonAnimationComponent.ts | 2 +- src/components/anim/AnimatorComponent.ts | 2 +- src/components/lights/DirectLight.ts | 2 +- src/components/lights/Light.ts | 2 +- src/components/lights/PointLight.ts | 2 +- src/components/lights/SpotLight.ts | 2 +- .../post/PostProcessingComponent.ts | 4 +- src/components/renderer/MeshFilter.ts | 2 +- src/components/renderer/MeshRenderer.ts | 2 +- .../renderer/SkinnedMeshRenderer.ts | 2 +- .../renderer/SkinnedMeshRenderer2.ts | 2 +- .../graphic/new/Graphic3DRibbonRenderer2.ts | 168 ------------------ src/index.ts | 3 - src/loader/parser/prefab/prefabData/APatch.ts | 2 +- src/util/SerializeDecoration.ts | 4 +- 17 files changed, 15 insertions(+), 386 deletions(-) delete mode 100644 src/assets/shader/graphic/GraphicTrailComputeOld.ts delete mode 100644 src/assets/shader/graphic/GraphicTrailComputeOld2.ts delete mode 100644 src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts diff --git a/src/assets/shader/graphic/GraphicTrailComputeOld.ts b/src/assets/shader/graphic/GraphicTrailComputeOld.ts deleted file mode 100644 index 48f97be7..00000000 --- a/src/assets/shader/graphic/GraphicTrailComputeOld.ts +++ /dev/null @@ -1,84 +0,0 @@ -// export let graphicTrailCompute: string = /*wgsl*/` -// #include "GlobalUniform" - -// struct VertexInfo{ -// // position:vec3f, -// px:f32, -// py:f32, -// pz:f32, -// nx:f32, -// ny:f32, -// nz:f32, -// uv_x:f32, -// uv_y:f32, -// uv2_x:f32, -// uv2_y:f32, -// index:f32, -// index2:f32 -// } - -// struct TrailInfo{ -// index : f32 , -// segment : f32 , -// visible : f32 , -// width: f32, -// uv: vec4f, -// uvSpeed: vec2f, -// smoothLine: f32, -// useBillboard: f32, -// ids:array -// } - -// @group(0) @binding(1) var vertexBuffer : array; -// @group(0) @binding(2) var trailBuffer : array; -// @group(0) @binding(3) var models : array>; - -// @compute @workgroup_size(1) -// fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3){ -// let indexTrail = globalInvocation_id.x ; -// let trailInfo = trailBuffer[indexTrail]; - -// if(trailInfo.visible > 0.0){ -// let segmentLength = u32(trailInfo.segment + 1.0); -// let first = indexTrail * segmentLength ; -// let len = first + segmentLength ; -// let time = globalUniform.frame * 0.001; -// for (var i:u32 = first ; i < len ; i += 1u) { -// let i1 = i * 2u + 0u; -// let i2 = i * 2u + 1u; - -// let mat = models[i32(trailInfo.ids[i - first ])] ; -// let worldPos = (mat * vec4f(0.0,0.0,0.0,1.0)).xyz ; -// let viewDir = globalUniform.cameraWorldMatrix[0].xyz ; - -// let right = viewDir ;//transformVector(mat,vec3f(viewDir)); -// // let right = transformVector(mat,vec3f(1.0,0.0,0.0)); -// let leftPos = worldPos - right.xyz * trailInfo.width ; -// let rightPos = worldPos + right.xyz * trailInfo.width ; - -// vertexBuffer[i1].px = leftPos.x ; -// vertexBuffer[i1].py = leftPos.y ; -// vertexBuffer[i1].pz = leftPos.z ; - -// vertexBuffer[i2].px = rightPos.x ; -// vertexBuffer[i2].py = rightPos.y ; -// vertexBuffer[i2].pz = rightPos.z ; - -// vertexBuffer[i1].uv_x = (0.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; -// vertexBuffer[i2].uv_x = (1.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; - -// let v = (1.0 - f32(i-first) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; -// vertexBuffer[i1].uv_y = v + time * trailInfo.uvSpeed.y ; -// vertexBuffer[i2].uv_y = v + time * trailInfo.uvSpeed.y ; -// } -// } -// } - -// fn transformVector(m:mat4x4f , v: vec3f ) -> vec3f { -// let x2 = v.x * m[0][0] + v.y * m[0][1] + v.z * m[0][2]; -// let y2 = v.x * m[1][0] + v.y * m[1][1] + v.z * m[1][2]; -// let z2 = v.x * m[2][0] + v.y * m[2][1] + v.z * m[2][2]; -// return normalize(vec3f(x2,y2,z2)) ; -// } - -// ` \ No newline at end of file diff --git a/src/assets/shader/graphic/GraphicTrailComputeOld2.ts b/src/assets/shader/graphic/GraphicTrailComputeOld2.ts deleted file mode 100644 index e53aeafc..00000000 --- a/src/assets/shader/graphic/GraphicTrailComputeOld2.ts +++ /dev/null @@ -1,116 +0,0 @@ -export let graphicTrailCompute: string = /*wgsl*/` -#include "GlobalUniform" - -struct VertexInfo{ - // position:vec3f, - px:f32, - py:f32, - pz:f32, - nx:f32, - ny:f32, - nz:f32, - uv_x:f32, - uv_y:f32, - uv2_x:f32, - uv2_y:f32, - index:f32, - index2:f32 -} - -struct TrailInfo{ - index : f32 , - segment : f32 , - visible : f32 , - width: f32, - - uv: vec4f, - - uvSpeed: vec2f, - smoothLine: f32, - useBillboard: f32, - - ids:array -} - -@group(0) @binding(1) var vertexBuffer : array; -@group(0) @binding(2) var trailBuffer : array; -@group(0) @binding(3) var models : array>; - -var rights:array; - -@compute @workgroup_size(1) -fn CsMain(@builtin(workgroup_id) workgroup_id : vec3 , @builtin(global_invocation_id) globalInvocation_id : vec3){ - let indexTrail = globalInvocation_id.x ; - let trailInfo = trailBuffer[indexTrail]; - let viewDir = normalize(globalUniform.cameraWorldMatrix[2].xyz) ; - - if(trailInfo.visible > 0.0){ - let segmentLength = u32(trailInfo.segment + 1.0); - let first = indexTrail * segmentLength ; - let len = first + segmentLength ; - let time = globalUniform.time * 0.001; - - //**first******* - let sp0 = models[i32(trailInfo.ids[ 0 ])][3].xyz ; - let sp1 = models[i32(trailInfo.ids[ 1 ])][3].xyz ; - let firstFront = normalize(sp1 - sp0) ; - rights[0] = normalize(cross(firstFront,viewDir)); - // rights[0] = viewDir; - //************** - //**body******* - for (var i:u32 = 1; i < u32(trailInfo.segment+1.0) - 1u ; i += 1u) { - let bp0 = models[i32(trailInfo.ids[i-1])][3].xyz ; - let bp1 = models[i32(trailInfo.ids[i])][3].xyz ; - let bp2 = models[i32(trailInfo.ids[i+1])][3].xyz ; - rights[i] = getRight(bp0,bp1,bp2,viewDir) ; - } - //************** - //**end******* - let ep0 = models[i32(trailInfo.ids[u32(trailInfo.segment)-1u])][3].xyz ; - let ep1 = models[i32(trailInfo.ids[u32(trailInfo.segment)])][3].xyz ; - let endFront = normalize(ep1 - ep0) ; - rights[u32(trailInfo.segment)] = normalize(cross(endFront,viewDir)); - //************** - - for (var i:u32 = 0u ; i < segmentLength ; i += 1u) { - let i1 = ((i + (segmentLength * indexTrail)) * 2u + 0u) ; - let i2 = ((i + (segmentLength * indexTrail)) * 2u + 1u) ; - - let right = rights[i]; - let worldPos = models[i32(trailInfo.ids[i])][3].xyz ; - let leftPos = worldPos - right.xyz * trailInfo.width ; - let rightPos = worldPos + right.xyz * trailInfo.width ; - - vertexBuffer[i1].px = leftPos.x ; - vertexBuffer[i1].py = leftPos.y ; - vertexBuffer[i1].pz = leftPos.z ; - - vertexBuffer[i2].px = rightPos.x ; - vertexBuffer[i2].py = rightPos.y ; - vertexBuffer[i2].pz = rightPos.z ; - - vertexBuffer[i1].uv_x = (0.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; - vertexBuffer[i2].uv_x = (1.0 * trailInfo.uv.z + trailInfo.uv.x) + time * trailInfo.uvSpeed.x ; - - let v = (1.0 - f32(i) / trailInfo.segment) * trailInfo.uv.w + trailInfo.uv.y; - vertexBuffer[i1].uv_y = v + time * trailInfo.uvSpeed.y ; - vertexBuffer[i2].uv_y = v + time * trailInfo.uvSpeed.y ; - } - } -} - -fn transformVector(m:mat4x4f , v: vec3f ) -> vec3f { - let x2 = v.x * m[0][0] + v.y * m[0][1] + v.z * m[0][2]; - let y2 = v.x * m[1][0] + v.y * m[1][1] + v.z * m[1][2]; - let z2 = v.x * m[2][0] + v.y * m[2][1] + v.z * m[2][2]; - return normalize(vec3f(x2,y2,z2)) ; -} - -fn getRight(p0:vec3f,p1:vec3f,p2:vec3f,v:vec3f) -> vec3f { - let d0 = normalize(p1 - p0) ; - let d1 = normalize(p2 - p1) ; - let d2 = normalize((d0 + d1) ) ; - return normalize(cross(d2,v)) ; -} - -` \ No newline at end of file diff --git a/src/components/SkeletonAnimationComponent.ts b/src/components/SkeletonAnimationComponent.ts index d30e6b5f..3d8d63b0 100644 --- a/src/components/SkeletonAnimationComponent.ts +++ b/src/components/SkeletonAnimationComponent.ts @@ -12,7 +12,7 @@ import { SkeletonPose } from "./anim/skeletonAnim/SkeletonPose"; * skeleton animation * @group Animation */ -@RegisterComponent +@RegisterComponent(SkeletonAnimationComponent, 'SkeletonAnimationComponent') export class SkeletonAnimationComponent extends ComponentBase { /** * Whether it is playing diff --git a/src/components/anim/AnimatorComponent.ts b/src/components/anim/AnimatorComponent.ts index d03ae871..ce6f563b 100644 --- a/src/components/anim/AnimatorComponent.ts +++ b/src/components/anim/AnimatorComponent.ts @@ -4,7 +4,7 @@ import { PropertyAnimationClip } from "../../math/AnimationCurveClip"; import { RegisterComponent } from "../../util/SerializeDecoration"; import { ComponentBase } from "../ComponentBase"; -@RegisterComponent +@RegisterComponent(AnimatorComponent, 'AnimatorComponent') export class AnimatorComponent extends ComponentBase { public jointMatrixIndexTableBuffer: StorageGPUBuffer; public playBlendShapeLoop: boolean = false; diff --git a/src/components/lights/DirectLight.ts b/src/components/lights/DirectLight.ts index 848cb8e2..fa17563e 100644 --- a/src/components/lights/DirectLight.ts +++ b/src/components/lights/DirectLight.ts @@ -9,7 +9,7 @@ import { LightType } from './LightData'; *The light of this light source is parallel, for example, sunlight. This light source can generate shadows. * @group Lights */ -@RegisterComponent +@RegisterComponent(DirectLight, 'DirectLight') export class DirectLight extends LightBase { public shadowCamera: Camera3D; diff --git a/src/components/lights/Light.ts b/src/components/lights/Light.ts index f1d1c1e4..98c37489 100644 --- a/src/components/lights/Light.ts +++ b/src/components/lights/Light.ts @@ -11,7 +11,7 @@ import { LightType } from './LightData'; *A common example is to simulate the light emitted by a light bulb, where a point light source cannot create shadows. * @group Lights */ -@RegisterComponent +@RegisterComponent(Light, 'Light') export class Light extends LightBase { constructor() { diff --git a/src/components/lights/PointLight.ts b/src/components/lights/PointLight.ts index 13c57a74..51a97899 100644 --- a/src/components/lights/PointLight.ts +++ b/src/components/lights/PointLight.ts @@ -10,7 +10,7 @@ import { LightType } from './LightData'; *A common example is to simulate the light emitted by a light bulb, where a point light source cannot create shadows. * @group Lights */ -@RegisterComponent +@RegisterComponent(PointLight, 'PointLight') export class PointLight extends LightBase { constructor() { diff --git a/src/components/lights/SpotLight.ts b/src/components/lights/SpotLight.ts index b1f0b8d0..fb63c999 100644 --- a/src/components/lights/SpotLight.ts +++ b/src/components/lights/SpotLight.ts @@ -13,7 +13,7 @@ import { LightType } from './LightData'; * Similar to a desk lamp, chandelier, or flashlight, this light source can produce shadows. * @group Lights */ -@RegisterComponent +@RegisterComponent(SpotLight, 'SpotLight') export class SpotLight extends LightBase { constructor() { super(); diff --git a/src/components/post/PostProcessingComponent.ts b/src/components/post/PostProcessingComponent.ts index 58bd90cd..36bd33e9 100644 --- a/src/components/post/PostProcessingComponent.ts +++ b/src/components/post/PostProcessingComponent.ts @@ -46,12 +46,12 @@ export class PostProcessingComponent extends ComponentBase { public addPost(c: Ctor): T { if (this._postList.has(c.name)) return; - if (!this._postList.has("FXAAPost")) { + if (!this._postList.has(FXAAPost.name)) { let post = new FXAAPost(); this._postList.set(post.constructor.name, post); if (this._enable) this.activePost(); - if (c.name == "FXAAPost") { + if (c.name === FXAAPost.name) { return post as T; } } diff --git a/src/components/renderer/MeshFilter.ts b/src/components/renderer/MeshFilter.ts index 56e067af..4e60213e 100644 --- a/src/components/renderer/MeshFilter.ts +++ b/src/components/renderer/MeshFilter.ts @@ -7,7 +7,7 @@ import { MeshRenderer } from './MeshRenderer'; * The mesh renderer component is a component used to render the mesh * @group Components */ -@RegisterComponent +@RegisterComponent(MeshFilter, 'MeshFilter') export class MeshFilter extends MeshRenderer { constructor() { super(); diff --git a/src/components/renderer/MeshRenderer.ts b/src/components/renderer/MeshRenderer.ts index b028fe6f..62519b13 100644 --- a/src/components/renderer/MeshRenderer.ts +++ b/src/components/renderer/MeshRenderer.ts @@ -14,7 +14,7 @@ import { Color, Material, mergeFunctions } from '../..'; * The mesh renderer component is a component used to render the mesh * @group Components */ -@RegisterComponent +@RegisterComponent(MeshRenderer, 'MeshRenderer') export class MeshRenderer extends RenderNode { /** * Enabling this option allows the grid to display any shadows cast on the grid. diff --git a/src/components/renderer/SkinnedMeshRenderer.ts b/src/components/renderer/SkinnedMeshRenderer.ts index 704fc397..0ded5c18 100644 --- a/src/components/renderer/SkinnedMeshRenderer.ts +++ b/src/components/renderer/SkinnedMeshRenderer.ts @@ -16,7 +16,7 @@ import { GeometryBase, Matrix4, RegisterComponent } from "../.."; * meshes with mixed shapes, and meshes running cloth simulations. * @group Components */ -@RegisterComponent +@RegisterComponent(SkinnedMeshRenderer, 'SkinnedMeshRenderer') export class SkinnedMeshRenderer extends MeshRenderer { public skinJointsName: Array; protected mInverseBindMatrixData: Array; diff --git a/src/components/renderer/SkinnedMeshRenderer2.ts b/src/components/renderer/SkinnedMeshRenderer2.ts index 469fcbde..dba19a12 100644 --- a/src/components/renderer/SkinnedMeshRenderer2.ts +++ b/src/components/renderer/SkinnedMeshRenderer2.ts @@ -15,7 +15,7 @@ import { AnimatorComponent, GeometryBase, LitMaterial, Matrix4, RegisterComponen * meshes with mixed shapes, and meshes running cloth simulations. * @group Components */ -@RegisterComponent +@RegisterComponent(SkinnedMeshRenderer2, 'SkinnedMeshRenderer2') export class SkinnedMeshRenderer2 extends MeshRenderer { public skinJointsName: Array; protected mInverseBindMatrixData: Array; diff --git a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts b/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts deleted file mode 100644 index 272f399c..00000000 --- a/src/gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2.ts +++ /dev/null @@ -1,168 +0,0 @@ -// import { graphicTrailCompute } from "../../../../../assets/shader/graphic/GraphicTrailCompute"; -// import { MeshRenderer } from "../../../../../components/renderer/MeshRenderer"; -// import { View3D } from "../../../../../core/View3D"; -// import { Object3D } from "../../../../../core/entities/Object3D"; -// import { GeometryBase } from "../../../../../core/geometry/GeometryBase"; -// import { UnLitTexArrayMaterial } from "../../../../../materials/UnLitTexArrayMaterial"; -// import { Color } from "../../../../../math/Color"; -// import { Vector2 } from "../../../../../math/Vector2"; -// import { Vector4 } from "../../../../../math/Vector4"; -// import { TrailGeometry } from "../../../../../shape/TrailGeometry"; -// import { BitmapTexture2DArray } from "../../../../../textures/BitmapTexture2DArray"; -// import { GeometryUtil } from "../../../../../util/GeometryUtil"; -// import { Struct } from "../../../../../util/struct/Struct"; -// import { GlobalBindGroup } from "../../../../graphics/webGpu/core/bindGroups/GlobalBindGroup"; -// import { StorageGPUBuffer } from "../../../../graphics/webGpu/core/buffer/StorageGPUBuffer"; -// import { ComputeShader } from "../../../../graphics/webGpu/shader/ComputeShader"; -// import { GPUContext } from "../../../GPUContext"; - -// export class Ribbon extends Struct { -// index: number = 1; -// segment: number = 1; -// visible: number = 1; -// width: number = 1; -// uv: Vector4 = new Vector4(0, 0, 1, 1); -// uvSpeed: Vector2 = new Vector2(0, 0); -// smooth: number = 0; -// useBillboard: number = 0; - -// ids: Float32Array = new Float32Array(1024); -// } - -// export class Graphic3DRibbonRenderer extends MeshRenderer { -// public transformBuffer: StorageGPUBuffer; -// public sourceGeometry: GeometryBase; -// public texture: BitmapTexture2DArray; -// public object3Ds: Object3D[]; -// public ribbon3Ds: Object3D[][]; -// public ribbons: Ribbon[]; -// public width: number = 1; -// public ribbonCount: number = 10; -// public uSegment: number = 1; -// public vSegment: number = 1; -// private _onChange: boolean = false; -// private _computeShader: ComputeShader; -// private _ribbonBuffer: StorageGPUBuffer; -// public init(): void { -// super.init(); -// } - -// public create(source: GeometryBase, tex: BitmapTexture2DArray, num: number) { -// this.ribbons = []; -// for (let i = 0; i < this.ribbons.length; i++) { -// this.ribbons[i] = new Ribbon(); -// } - -// let mat = new UnLitTexArrayMaterial(); -// mat.baseMap = tex; -// this.material = mat; - -// this.transformBuffer = new StorageGPUBuffer(num * (4 * 4), 0); -// this.material.setStorageBuffer("graphicBuffer", this.transformBuffer); - -// this.object3Ds = []; -// for (let i = 0; i < num; i++) { -// const element = new Object3D(); -// this.object3Ds.push(element); -// this.object3D.addChild(element); - -// this.transformBuffer.setFloat("matrix_" + i, element.transform.worldMatrix.index); -// this.transformBuffer.setFloat("texId_" + i, 1); -// this.transformBuffer.setFloat("texId2_" + i, 1); -// this.transformBuffer.setFloat("texId3_" + i, 1); -// this.transformBuffer.setColor("baseColor_" + i, new Color()); -// this.transformBuffer.setColor("emissiveColor_" + i, new Color(0, 0, 0, 0)); -// this.transformBuffer.setVector4("uvRect_" + i, new Vector4(0, 0, 1, 1)); -// } - -// this.transformBuffer.apply(); -// this.geometry = GeometryUtil.mergeNumber(source, num); -// } - -// public startRibbon(texture: BitmapTexture2DArray, trailSegment: number, width: number, count: number) { -// this.ribbonCount = count; -// this.width = width; -// // this.uSegment = uSegment; -// // this.vSegment = vSegment; - -// this.create(new TrailGeometry(trailSegment), texture, count); - -// this._computeShader = new ComputeShader(graphicTrailCompute); -// this._ribbonBuffer = new StorageGPUBuffer(count * (4 + 4 + 2 + 2 + 128)); - -// this.ribbon3Ds = []; -// for (let i = 0; i < count; i++) { -// this._ribbonBuffer.setFloat(`${i}_index`, i); -// this._ribbonBuffer.setFloat(`${i}_segment`, trailSegment); -// this._ribbonBuffer.setFloat(`${i}_visible`, 1); -// this._ribbonBuffer.setFloat(`${i}_width`, this.width); -// this._ribbonBuffer.setVector4(`${i}_uv`, new Vector4(0, 0, this.uSegment, this.vSegment)); -// this._ribbonBuffer.setVector2(`${i}_uvSpeed`, new Vector2(0, Math.random() * 4)); -// this._ribbonBuffer.setFloat(`${i}_smooth`, 0); -// this._ribbonBuffer.setFloat(`${i}_useBillboard`, 0); - -// this.ribbon3Ds[i] = []; -// let arr = new Float32Array(1024); -// for (let j = 0; j < 1024; j++) { -// const element = new Object3D(); -// this.ribbon3Ds[i].push(element); -// this.object3D.addChild(element); -// arr[j] = element.transform.worldMatrix.index; -// } -// this._ribbonBuffer.setFloat32Array(`${i}_ids`, arr); -// } -// this._ribbonBuffer.apply(); - -// this.start = () => { -// this._computeShader.setStorageBuffer("vertexBuffer", this.geometry.vertexBuffer.vertexGPUBuffer); -// this._computeShader.setStorageBuffer("trailBuffer", this._ribbonBuffer); -// this._computeShader.setStorageBuffer("models", GlobalBindGroup.modelMatrixBindGroup.matrixBufferDst); -// this._computeShader.setStorageBuffer("globalUniform", GlobalBindGroup.getCameraGroup(this.transform.scene3D.view.camera).uniformGPUBuffer); -// } - -// this.onCompute = (view: View3D, command: GPUCommandEncoder) => this.computeTrail(view, command); -// } - -// public setTextureID(i: number, id: number) { -// this.transformBuffer.setFloat("texId_" + i, id); -// this._onChange = true; -// } - -// // public setTexture2ID(i: number, id: number) { -// // this.transformBuffer.setFloat("texId_" + i, id); -// // this._onChange = true; -// // } - -// // public setTexture3ID(i: number, id: number) { -// // this.transformBuffer.setFloat("texId_" + i, id); -// // this._onChange = true; -// // } - -// public setBaseColor(i: number, color: Color) { -// this.transformBuffer.setColor("baseColor_" + i, color); -// this._onChange = true; -// } - -// public setEmissiveColor(i: number, color: Color) { -// this.transformBuffer.setColor("emissiveColor_" + i, color); -// this._onChange = true; -// } - -// public setUVRect(i: number, v: Vector4) { -// this.transformBuffer.setVector4("uvRect_" + i, v); -// this._onChange = true; -// } - -// public onUpdate(view?: View3D) { -// if (this._onChange) { -// this._onChange = false; -// this.transformBuffer.apply(); -// } -// } - -// private computeTrail(view: View3D, command: GPUCommandEncoder) { -// this._computeShader.workerSizeX = this.ribbonCount; -// GPUContext.computeCommand(command, [this._computeShader]); -// } - -// } \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 972d21ca..dddf5952 100644 --- a/src/index.ts +++ b/src/index.ts @@ -61,8 +61,6 @@ export * from "./assets/shader/graphic/GraphicFaceComput2" export * from "./assets/shader/graphic/GraphicFaceCompute" export * from "./assets/shader/graphic/GraphicFaceCompute3" export * from "./assets/shader/graphic/GraphicTrailCompute" -export * from "./assets/shader/graphic/GraphicTrailComputeOld" -export * from "./assets/shader/graphic/GraphicTrailComputeOld2" export * from "./assets/shader/lighting/BRDF_frag" export * from "./assets/shader/lighting/BsDF_frag" export * from "./assets/shader/lighting/BxDF_frag" @@ -350,7 +348,6 @@ export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DFaceRenderer" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMesh" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DMeshRenderer" export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer" -export * from "./gfx/renderJob/passRenderer/graphic/new/Graphic3DRibbonRenderer2" export * from "./gfx/renderJob/passRenderer/post/PostRenderer" export * from "./gfx/renderJob/passRenderer/preDepth/PreDepthPassRenderer" export * from "./gfx/renderJob/passRenderer/preDepth/ZCullingCompute" diff --git a/src/loader/parser/prefab/prefabData/APatch.ts b/src/loader/parser/prefab/prefabData/APatch.ts index 3c91b196..f55bee6f 100644 --- a/src/loader/parser/prefab/prefabData/APatch.ts +++ b/src/loader/parser/prefab/prefabData/APatch.ts @@ -4,7 +4,7 @@ import { Color } from "../../../../math/Color"; import { Vector2 } from "../../../../math/Vector2"; import { RegisterComponent } from "../../../../util/SerializeDecoration"; -@RegisterComponent +@RegisterComponent(APatch, 'APatch') export class APatch extends ComponentBase { public size: Vector2; public blockSize: number; diff --git a/src/util/SerializeDecoration.ts b/src/util/SerializeDecoration.ts index 839f2289..a457a36e 100644 --- a/src/util/SerializeDecoration.ts +++ b/src/util/SerializeDecoration.ts @@ -84,7 +84,7 @@ export function RegisterComponent(cls, key, p1?, p2?, p3?): any { if (!dic) { dic = window['__Component__'] = {}; } - dic[cls.name] = cls; + dic[key] = cls; } export function GetComponentClass(name: string) { @@ -100,7 +100,7 @@ export function RegisterShader(cls, key, p1?, p2?, p3?): any { if (!dic) { dic = window['__shader__'] = {}; } - dic[cls.name] = cls; + dic[key] = cls; } export function GetShader(name: string) { From 6f3bbe73422b76a2e47828405b2174b2149a1cb6 Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Tue, 14 Nov 2023 21:20:40 +0800 Subject: [PATCH 34/34] fix: Auto sort transparent renderers. (#318) --- src/gfx/renderJob/collect/EntityCollect.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/gfx/renderJob/collect/EntityCollect.ts b/src/gfx/renderJob/collect/EntityCollect.ts index e1afaa4d..24ff83bf 100644 --- a/src/gfx/renderJob/collect/EntityCollect.ts +++ b/src/gfx/renderJob/collect/EntityCollect.ts @@ -261,6 +261,7 @@ export class EntityCollect { public getRenderNodes(scene: Scene3D, camera: Camera3D): CollectInfo { + this.autoSortRenderNodes(scene); this._collectInfo.clean(); this._collectInfo.sky = this.sky;