Change the shaders to the *.wgsl file suffix, except for the template…

… type (#18) * refactor(shader): 提取 attribute 的着色器 * refactor(shader): 修改 common 的 shader * refactor(shader): 修改 instance 的 shader * refactor(shader): 修改 normal 的 shader * refactor(shader): 修改 pbr 的 shader * refactor(shader): 修改 phong 的 shader * refactor(shader): 修改 skin 的 shader * refactor(shader): 修改 struct 的 shader * refactor(shader): 修改 shadow 的 shader * refactor(shader): 修改 shadow 的引用路径 * refactor(shader): 修改 postProcess 的 shader * refactor(shader): 修改 material 的部分 shader * fix(shader): fix import light/pbr wgsl file bug * format code * format code --------- Co-authored-by: junwei.gu <junwei.gu@jiduauto.com>
GEngine-js · Jul 31, 2023 · cf9fdcb · cf9fdcb
1 parent 3802c28
commit cf9fdcb
Show file tree

Hide file tree

Showing 114 changed files with 2,075 additions and 2,446 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,3 +1,8 @@
 {
-	"recommendations": ["PolyMeilex.wgsl", "ritwickdey.LiveServer", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+	"recommendations": [
+		"clonecode.clonecode-wgsl",
+		"ritwickdey.LiveServer",
+		"esbenp.prettier-vscode",
+		"dbaeumer.vscode-eslint"
+	]
 }
diff --git a/build/@rollup/plugin-wgsl/index.js b/build/@rollup/plugin-wgsl/index.js
@@ -3,7 +3,7 @@ import { readFile } from "node:fs/promises";
 
 export default function wgsl(options) {
 	options = {
-		...{ fileTypes: ["frag", "vert", "wgsl", "glsl"] },
+		...{ fileTypes: ["wgsl", "glsl"] }, //["frag", "vert", "wgsl", "glsl"]
 		...options
 	};
 

diff --git a/example/loader/gltf-loader.html b/example/loader/gltf-loader.html
@@ -1,128 +1,129 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta
-			http-equiv="origin-trial"
-			content="Atzk/dTch1Tt8qYq/UwLn6aWawymlc3xOKy3xiuwsaj1HBK6eCTBb+EGOnv7LK+oSQ8Fr1l/qykGHhK64mAn+w4AAABjeyJvcmlnaW4iOiJodHRwczovL2hwdWdpcy5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OSwiaXNTdWJkb21haW4iOnRydWV9"
-		/>
-		<title>gltf</title>
-		<!-- <link rel="stylesheet" href="./index.scss" /> -->
-		<style>
-			* {
-				box-sizing: border-box;
-			}
 
-			html {
-				background: linear-gradient(316deg, #43a066, #2450e2);
-				width: 100%;
-				height: 100%;
-			}
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta http-equiv="origin-trial"
+		content="Atzk/dTch1Tt8qYq/UwLn6aWawymlc3xOKy3xiuwsaj1HBK6eCTBb+EGOnv7LK+oSQ8Fr1l/qykGHhK64mAn+w4AAABjeyJvcmlnaW4iOiJodHRwczovL2hwdWdpcy5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OSwiaXNTdWJkb21haW4iOnRydWV9" />
+	<title>gltf</title>
+	<!-- <link rel="stylesheet" href="./index.scss" /> -->
+	<style>
+		* {
+			box-sizing: border-box;
+		}
 
-			body {
-				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-				overflow: hidden;
-				width: 100%;
-				height: 100%;
-				margin: 0;
-				padding: 0;
-			}
+		html {
+			background: linear-gradient(316deg, #43a066, #2450e2);
+			width: 100%;
+			height: 100%;
+		}
 
-			#app {
-				height: 100%;
-				width: 100%;
-			}
-		</style>
-	</head>
+		body {
+			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+			overflow: hidden;
+			width: 100%;
+			height: 100%;
+			margin: 0;
+			padding: 0;
+		}
 
-	<body>
-		<div id="app"></div>
-		<script type="module">
-			// import { captureFrame } from './webgpu-debugger.js';
-			import {
-				PerspectiveCamera,
-				Scene,
-				Vector3,
-				Color,
-				SkyBox,
-				CubeTextureLoader,
-				loadGLTF,
-				OrbitControl,
-				AmbientLight,
-				DirectionalLight,
-				Axes
-			} from "../../dist/index.js";
+		#app {
+			height: 100%;
+			width: 100%;
+		}
+	</style>
+</head>
 
-			const init = async () => {
-				const scene = new Scene({
-					container: "app"
-				});
-				scene.background = {
-					value: new Color().set("#1E1E20"),
-					opacity: 0.0
-				};
+<body>
+	<div id="app"></div>
+	<script type="module">
+		// import { captureFrame } from './webgpu-debugger.js';
+		import {
+			PerspectiveCamera,
+			Scene,
+			Vector3,
+			Color,
+			SkyBox,
+			CubeTextureLoader,
+			loadGLTF,
+			OrbitControl,
+			AmbientLight,
+			DirectionalLight,
+			Axes
+		} from "../../dist/index.js";
 
-				const gltf = await loadGLTF(
-					//'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/VC/glTF/VC.gltf'
-					//"https://raw.githubusercontent.com/shrekshao/minimal-gltf-loader/store-drone-model/glTFs/glTF_version_2/buster_drone/scene.gltf"
-					//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf"
-					//"../asset/model/dragon.glb"
-					// "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBoxWithAxes/glTF/BoomBoxWithAxes.gltf"
-					//'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMan/glTF/CesiumMan.gltf'
-					//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BrainStem/glTF-Binary/BrainStem.glb"
-					//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Corset/glTF/Corset.gltf"
-					//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf"
-					//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/WaterBottle/glTF/WaterBottle.gltf"
-					//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BarramundiFish/glTF/BarramundiFish.gltf"
-					"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf"
-					//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf"
-				);
-				gltf.scenes.map((nodes) => {
-					nodes.map((node) => {
-						scene.add(node);
-					});
-				});
-				const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
-				camera.position.set(2, 0, 2);
-				camera.lookAt(0, 0, 0);
-				const ambientLight = new AmbientLight(new Vector3(1.0, 1.0, 1.0), 0.8);
-				scene.add(ambientLight);
-				const control = new OrbitControl(camera, document.getElementById("app"));
-				const urls = [
-					`../textures/royal_esplanade_1k/px.png`,
-					`../textures/royal_esplanade_1k/nx.png`,
-					`../textures/royal_esplanade_1k/py.png`,
-					`../textures/royal_esplanade_1k/ny.png`,
-					`../textures/royal_esplanade_1k/pz.png`,
-					`../textures/royal_esplanade_1k/nz.png`
-				];
-				const skybox = new SkyBox(urls);
-				skybox.visibility = false;
-				window.addEventListener("resize", onWindowResize);
-				scene.add(skybox);
-				scene.setCamera(camera);
-				const axes = new Axes();
-				// scene.add(axes)
-				// scene.add(directionalLight)
-				var timeStampZero = performance.now();
-				var timeParameter = 0;
-				function animate(timestamp) {
-					timeParameter = (timestamp - timeStampZero) * 0.001;
-					requestAnimationFrame(animate);
-					// gltf?.animations?.map?.((animation) => {
-					// 	animation.play(timeParameter);
-					// });
-					control.update();
-					scene.render();
-				}
-				function onWindowResize() {
-					camera.aspect = window.innerWidth / window.innerHeight;
-					scene.resize(window.innerWidth, window.innerHeight);
-				}
-				animate();
+		const init = async () => {
+			const scene = new Scene({
+				container: "app"
+			});
+			scene.background = {
+				value: new Color().set("#1E1E20"),
+				opacity: 0.0
 			};
-			init();
-		</script>
-	</body>
-</html>
+
+			const gltf = await loadGLTF(
+				// 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/VC/glTF/VC.gltf'
+				// "https://raw.githubusercontent.com/shrekshao/minimal-gltf-loader/store-drone-model/glTFs/glTF_version_2/buster_drone/scene.gltf"
+				// "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf"
+				//"../asset/model/dragon.glb"
+				// "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBoxWithAxes/glTF/BoomBoxWithAxes.gltf"
+				// 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMan/glTF/CesiumMan.gltf'
+				// "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BrainStem/glTF-Binary/BrainStem.glb"
+				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Corset/glTF/Corset.gltf"
+				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf"
+				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/WaterBottle/glTF/WaterBottle.gltf"
+				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BarramundiFish/glTF/BarramundiFish.gltf"
+				// "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf"
+				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf"
+				"https://minedata.cn/nce-static/support/demo/js-3d-ultra/zh/assets/DamagedHelmet/glTF/DamagedHelmet.gltf"
+			);
+			gltf.scenes.map((nodes) => {
+				nodes.map((node) => {
+					scene.add(node);
+				});
+			});
+			const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
+			camera.position.set(2, 0, 2);
+			camera.lookAt(0, 0, 0);
+			const ambientLight = new AmbientLight(new Vector3(1.0, 1.0, 1.0), 0.8);
+			scene.add(ambientLight);
+			const control = new OrbitControl(camera, document.getElementById("app"));
+			const urls = [
+				`../textures/royal_esplanade_1k/px.png`,
+				`../textures/royal_esplanade_1k/nx.png`,
+				`../textures/royal_esplanade_1k/py.png`,
+				`../textures/royal_esplanade_1k/ny.png`,
+				`../textures/royal_esplanade_1k/pz.png`,
+				`../textures/royal_esplanade_1k/nz.png`
+			];
+			const skybox = new SkyBox(urls);
+			skybox.visibility = false;
+			window.addEventListener("resize", onWindowResize);
+			scene.add(skybox);
+			scene.setCamera(camera);
+			const axes = new Axes();
+			// scene.add(axes)
+			// scene.add(directionalLight)
+			var timeStampZero = performance.now();
+			var timeParameter = 0;
+			function animate(timestamp) {
+				timeParameter = (timestamp - timeStampZero) * 0.001;
+				requestAnimationFrame(animate);
+				// gltf?.animations?.map?.((animation) => {
+				// 	animation.play(timeParameter);
+				// });
+				control.update();
+				scene.render();
+			}
+			function onWindowResize() {
+				camera.aspect = window.innerWidth / window.innerHeight;
+				scene.resize(window.innerWidth, window.innerHeight);
+			}
+			animate();
+		};
+		init();
+	</script>
+</body>
+
+</html>
diff --git a/src/shader/Shaders.ts b/src/shader/Shaders.ts
@@ -1,28 +1,33 @@
-// import colorFrag from "./material/colorFrag";
 import colorFrag from "./material/colorFrag.wgsl";
-import colorVert from "./material/colorVert";
-import pbr_fs from "./material/pbr_fs";
-import pbr_vs from "./material/pbr_vs";
+import colorVert from "./material/colorVert.wgsl";
+
+import pbr_fs from "./material/pbr_fs.wgsl";
+import pbr_vs from "./material/pbr_vs.wgsl";
 import pbrFrag from "./material/pbrFrag";
 import pbrVert from "./material/pbrVert";
-import phongFrag from "./material/phongFrag";
-import phongVert from "./material/phongVert";
-import { point_fs } from "./material/point_fs";
-import { point_vs } from "./material/point_vs";
-import quadFrag from "./material/quadFrag";
-import quadVert from "./material/quadVert";
-import skyBoxFrag from "./material/skyBoxFrag";
-import skyBoxVert from "./material/skyBoxVert";
-import { sprite_fs } from "./material/sprite_fs";
-import { sprite_vs } from "./material/sprite_vs";
-import blendFrag from "./postProcess/blend/blendFrag";
-import Blur from "./postProcess/bloom/Blur";
-import LuminosityHigh from "./postProcess/bloom/LuminosityHigh";
+
+import phongFrag from "./material/phongFrag.wgsl";
+import phongVert from "./material/phongVert.wgsl";
+import point_fs from "./material/point_fs.wgsl";
+import point_vs from "./material/point_vs.wgsl";
+import quadFrag from "./material/quadFrag.wgsl";
+import quadVert from "./material/quadVert.wgsl";
+import skyBoxFrag from "./material/skyBoxFrag.wgsl";
+import skyBoxVert from "./material/skyBoxVert.wgsl";
+import sprite_fs from "./material/sprite_fs.wgsl";
+import sprite_vs from "./material/sprite_vs.wgsl";
+
+import blendFrag from "./postProcess/blend/blendFrag.wgsl";
+import Blur from "./postProcess/bloom/Blur.wgsl";
+import LuminosityHigh from "./postProcess/bloom/LuminosityHigh.wgsl";
+
 import ShaderChunk from "./shaderChunk/ShaderChunk";
-import shadowMapDebuggerFrag from "./shaderChunk/shadow/shadowMapDebuggerFrag";
-import shadowMapDebuggerVert from "./shaderChunk/shadow/shadowMapDebuggerVert";
-import shadowMapFrag from "./shaderChunk/shadow/shadowMapFrag";
-import shadowMapVert from "./shaderChunk/shadow/shadowMapVert";
+
+import shadowMapDebuggerFrag from "./shadow/shadowMapDebuggerFrag.wgsl";
+import shadowMapDebuggerVert from "./shadow/shadowMapDebuggerVert.wgsl";
+import shadowMapFrag from "./shadow/shadowMapFrag.wgsl";
+import shadowMapVert from "./shadow/shadowMapVert.wgsl";
+
 import { WGSLParseDefines } from "./WGSLParseDefines";
 
 function reduceComma(shader) {

diff --git a/src/shader/material/colorFrag.ts b/src/shader/material/colorFrag.ts
diff --git a/src/shader/material/colorFrag.wgsl b/src/shader/material/colorFrag.wgsl
@@ -1,9 +1,9 @@
 struct VertexOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) color: vec4<f32>,
+  @builtin(position) position : vec4 <f32>,
+  @location(0) color : vec4 <f32>,
 };
 
 @fragment
-fn main(input:VertexOutput) -> @location(0) vec4<f32> {
+fn main(input : VertexOutput) -> @location(0) vec4 <f32> {
   return input.color;
-}
+}
diff --git a/src/shader/material/colorVert.ts b/src/shader/material/colorVert.ts