Merge pull request #806 from cx20/add_redcube_webgpu_version

Added WebGPU version of RedCube
cx20 · Nov 23, 2024 · 841d56a · 841d56a
2 parents 9c7eb23 + fe1d7ee
commit 841d56a
Show file tree

Hide file tree

Showing 15 changed files with 147 additions and 1 deletion.
diff --git a/examples/redcube/index.html b/examples/redcube/index.html
@@ -16,7 +16,7 @@
 </head>
 <body>
 <!-- redcube.js -->
-<script src="../../libs/redcube/3.3.0/redcube.js"></script>
+<script src="../../libs/redcube/4.0.0/redcube.js"></script>
 
 <!-- dat.gui.js -->
 <script src="../../libs/common/dat.gui.js"></script>

diff --git a/examples/redcube_webgpu/glslang.wasm b/examples/redcube_webgpu/glslang.wasm
diff --git a/examples/redcube_webgpu/index.html b/examples/redcube_webgpu/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<link rel="stylesheet" type="text/css" media="screen,print" href="style.css" />
+<link rel="stylesheet" type="text/css" media="screen,print" href="../../libs/common/dat.gui.css" />
+<title>[WebGPU] RedCube.js</title>
+<script src="../../sampleModels/model-index.js"></script>
+<script src="../../tutorialModels/model-index.js"></script>
+<script src="../../tutorialModels/pbr-model-index.js"></script>
+<script src="../../tutorialModels/further-pbr-model-index.js"></script>
+<script src="../../tutorialModels/feature-test-model-index.js"></script>
+<script src="../../tutorialModels/compare-pbr-model-index.js"></script>
+<script src="../../tutorialModels/extension-test-model-index.js"></script>
+<script src="../../tutorialModels/wip-extension-test-model-index.js"></script>
+</head>
+<body>
+<!-- redcube.js -->
+<script src="../../libs/redcube/4.0.0/redcube.webgpu.js"></script>
+
+<!-- dat.gui.js -->
+<script src="../../libs/common/dat.gui.js"></script>
+
+<canvas id="canvas"></canvas>
+
+<script src="index.js"></script>
+</body>
+</html>
diff --git a/examples/redcube_webgpu/index.js b/examples/redcube_webgpu/index.js
@@ -0,0 +1,96 @@
+let modelInfo = ModelIndex.getCurrentModel();
+if (!modelInfo) {
+    modelInfo = TutorialModelIndex.getCurrentModel();
+}
+if (!modelInfo) {
+    modelInfo = TutorialPbrModelIndex.getCurrentModel();
+}
+if (!modelInfo) {
+    modelInfo = TutorialFurtherPbrModelIndex.getCurrentModel();
+}
+if (!modelInfo) {
+    modelInfo = TutorialFeatureTestModelIndex.getCurrentModel();
+}
+if (!modelInfo) {
+    modelInfo = TutorialComparePbrModelIndex.getCurrentModel();
+}
+if (!modelInfo) {
+    modelInfo = TutorialExtensionTestModelIndex.getCurrentModel();
+}
+if (!modelInfo) {
+    modelInfo = TutorialWipExtensionTestModelIndex.getCurrentModel();
+}
+if (!modelInfo) {
+    document.getElementById('container').innerHTML = 'Please specify a model to load';
+    throw new Error('Model not specified or not found in list.');
+}
+
+// GUI
+let gui = new dat.GUI();
+var CAMERA = "";
+var VARIANT = "";
+var IBL = true;
+var LIGHTS = false; // The default is to use IBL instead of lights
+let guiCameras  = null;
+let guiVariants = null;
+let guiIbl      = null;
+let guiLights   = null;
+
+const name = localStorage.getItem('sample') || 'DamagedHelmet';
+const canvas = document.getElementById('canvas');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+let url = "../../" + modelInfo.category + "/" + modelInfo.path;
+if(modelInfo.url) {
+    url = modelInfo.url;
+}
+
+const renderer = new redcube.RedCube(
+    url,
+    canvas,
+    [],
+    //'../../textures/hdr/pisa.hdr'
+    '../../textures/hdr/papermill.hdr'
+);
+
+renderer.init(() => {
+    cameras = {};
+    renderer.parse.cameras.forEach((it,i) => {
+        cameras[it.name] = i;
+    });
+    variants = {};
+    renderer.scene.variants.forEach((it,i) => {
+        variants[it.name] = i;
+    });
+    guiCameras  = gui.add(window, 'CAMERA', cameras).name("Camera");
+    guiVariants = gui.add(window, 'VARIANT', variants).name("Variant");
+    guiIbl      = gui.add(window, 'IBL').name('IBL');
+    guiLights   = gui.add(window, 'LIGHTS').name('Lights');
+
+    guiCameras.onChange(function (value) {
+        renderer.ioc._updateDep('camera', renderer.parse.cameras.find((it) => { 
+            return Number(value) === cameras[it.name]; 
+        }));
+        renderer.renderer.needUpdateView = true;
+        renderer.draw();
+    });
+
+    guiVariants.onChange(function (value) {
+        renderer.setVariant(value);
+    });
+
+    guiIbl.onChange(function (value) {
+        renderer.isIBL = value;
+        renderer.draw();
+    });
+
+    guiLights.onChange(function (value) {
+        renderer.isDefaultLight = value;
+        renderer.draw();
+    });
+
+    renderer.isIBL = IBL;
+    renderer.isDefaultLight = LIGHTS;
+    renderer.draw();
+});
diff --git a/examples/redcube_webgpu/style.css b/examples/redcube_webgpu/style.css
@@ -0,0 +1,16 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+}
+
+body {
+  background: #000;
+}
+
+canvas {
+    width: 100%;
+    height: 100vh;
+    vertical-align: top;
+}
diff --git a/examples/redcube_webgpu/twgsl.wasm b/examples/redcube_webgpu/twgsl.wasm
diff --git a/libs/redcube/4.0.0/assets/Sheen_E.hdr b/libs/redcube/4.0.0/assets/Sheen_E.hdr
diff --git a/libs/redcube/4.0.0/libs/draco3d.js b/libs/redcube/4.0.0/libs/draco3d.js
diff --git a/libs/redcube/4.0.0/libs/draco_decoder.wasm b/libs/redcube/4.0.0/libs/draco_decoder.wasm
diff --git a/libs/redcube/4.0.0/libs/glslang.js b/libs/redcube/4.0.0/libs/glslang.js
diff --git a/libs/redcube/4.0.0/libs/libktx.js b/libs/redcube/4.0.0/libs/libktx.js
diff --git a/libs/redcube/4.0.0/libs/libktx.wasm b/libs/redcube/4.0.0/libs/libktx.wasm
diff --git a/libs/redcube/4.0.0/libs/twgsl.js b/libs/redcube/4.0.0/libs/twgsl.js
diff --git a/libs/redcube/4.0.0/redcube.js b/libs/redcube/4.0.0/redcube.js
diff --git a/libs/redcube/4.0.0/redcube.webgpu.js b/libs/redcube/4.0.0/redcube.webgpu.js