[WIP] Update Khronos glTF Sample Viewer from v1.0 to v2.0

cx20 · Sep 4, 2024 · e860d61 · e860d61
1 parent bf631f2
commit e860d61
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 41 deletions.
diff --git a/examples/khronos-gltf-rv/index.html b/examples/khronos-gltf-rv/index.html
@@ -14,15 +14,20 @@
 
 <link rel="stylesheet" href="styles.css">
 
-<script src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Viewer/4ba26a4a985bdcc7bf6ec2ef81ceaa11de43812d/libs/dat.gui.min.js"></script>
-<script src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Viewer/4ba26a4a985bdcc7bf6ec2ef81ceaa11de43812d/libs/stats.min.js"></script>
-<script src="../../libs/khronos-gltf-rv/1.0.0/gltf-reference-viewer.umd.js"></script>
+<script src="https://www.gstatic.com/draco/v1/decoders/draco_decoder_gltf.js"></script>
+<script src="https://github.khronos.org/glTF-Sample-Viewer-Release/libs/libktx.js"></script>
+<script type="importmap">
+{
+    "imports": {
+        "gltf-viewer": "https://unpkg.com/@khronosgroup/[email protected]/dist/gltf-viewer.module.js"
+    }
+}
+</script>
 </head>
 
 <body>
-<div id="gltf-rv-model-spinner"> </div>
-<canvas id="canvas">No Canvas!</canvas>
-<script src="index.js"></script>
+<canvas id="canvas" width="768" height="768">No Canvas!</canvas>
+<script type="module" src="index.js"></script>
 </body>
 
 </html>
diff --git a/examples/khronos-gltf-rv/index.js b/examples/khronos-gltf-rv/index.js
@@ -27,8 +27,65 @@ if(modelInfo.url) {
     url = modelInfo.url;
 }
 
-var viewer = gltf_rv.gltf_rv("canvas");
-viewer.basePath = "https://github.khronos.org/glTF-Sample-Viewer/";
-viewer.renderingParameters.usePunctual = true;
-viewer.renderingParameters.environmentName = "Papermill Ruins E";
-viewer.loadFromPath(url);
+import { GltfView } from "gltf-viewer";
+
+const canvas = document.getElementById('canvas');
+const context = canvas.getContext('webgl2', {
+    alpha: false,
+    antialias: true
+});
+
+const view = new GltfView(context);
+const resourceLoader = view.createResourceLoader();
+const state = view.createState();
+
+const hdrFile = 'https://cx20.github.io/gltf-test/textures/hdr/papermill.hdr';
+const lurFile = {lut_sheen_E_file: 'https://github.khronos.org/glTF-Sample-Viewer-Release/assets/images/lut_sheen_E.png'};
+await resourceLoader
+    .loadEnvironment(hdrFile, lurFile)
+    .then((environment) => {
+        console.log('environment loaded');
+        state.environment = environment;
+    });
+
+await resourceLoader
+    .loadGltf(
+        //'https://cx20.github.io/gltf-test/sampleModels/Duck/glTF/Duck.gltf'
+        url
+    )
+    .then((gltf) => {
+
+        console.log('model loaded');
+        state.gltf = gltf;
+        const defaultScene = state.gltf.scene;
+        state.sceneIndex = defaultScene === undefined ? 0 : defaultScene;
+        state.cameraIndex = undefined;
+        if (state.gltf.scenes.length != 0) {
+            if (state.sceneIndex > state.gltf.scenes.length - 1) {
+                state.sceneIndex = 0;
+            }
+            const scene = state.gltf.scenes[state.sceneIndex];
+            scene.applyTransformHierarchy(state.gltf);
+            state.userCamera.aspectRatio = canvas.width / canvas.height;
+            state.userCamera.fitViewToScene(state.gltf, state.sceneIndex);
+
+            state.animationIndices = [];
+            for (let i = 0; i < gltf.animations.length; i++) {
+                if (
+                    !gltf
+                        .nonDisjointAnimations(state.animationIndices)
+                        .includes(i)
+                ) {
+                    state.animationIndices.push(i);
+                }
+            }
+            state.animationTimer.start();
+        }
+    });
+
+const update = () => {
+    view.renderFrame(state, canvas.clientWidth, canvas.clientHeight);
+    window.requestAnimationFrame(update);
+};
+window.requestAnimationFrame(update);
+
diff --git a/examples/khronos-gltf-rv/styles.css b/examples/khronos-gltf-rv/styles.css
@@ -6,39 +6,11 @@ html, body {
     overflow: hidden;
     background: rgb(51, 51, 51);
 }
-
+/*
 #canvas {
     width:  100%;
     margin:  0px;
     height: 100%;
     background: rgb(51, 51, 51);
 }
-
-.dg li.gui-stats:not(.folder) {
-    height: 48px;
-}
-
-select {
-    width: 169px;
-}
-
-#gltf-rv-model-spinner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    border: 16px solid #f3f3f3;
-    pointer-events: none;
-    border-top: 16px solid #86C540;
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
+*/