From e860d6103407ac991e33fac279ccf2c06cf2bcd5 Mon Sep 17 00:00:00 2001 From: cx20 Date: Thu, 5 Sep 2024 04:29:36 +0900 Subject: [PATCH] [WIP] Update Khronos glTF Sample Viewer from v1.0 to v2.0 --- examples/khronos-gltf-rv/index.html | 17 +++++--- examples/khronos-gltf-rv/index.js | 67 ++++++++++++++++++++++++++--- examples/khronos-gltf-rv/styles.css | 32 +------------- 3 files changed, 75 insertions(+), 41 deletions(-) diff --git a/examples/khronos-gltf-rv/index.html b/examples/khronos-gltf-rv/index.html index d1def0e60..cdc97c9c9 100644 --- a/examples/khronos-gltf-rv/index.html +++ b/examples/khronos-gltf-rv/index.html @@ -14,15 +14,20 @@ - - - + + + -
-No Canvas! - +No Canvas! + diff --git a/examples/khronos-gltf-rv/index.js b/examples/khronos-gltf-rv/index.js index 43ebf3055..3c22f6d27 100644 --- 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 index 96b945e9d..c338afd6f 100644 --- 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); } -} +*/