diff --git a/Source Files/Mocks/README.md b/Source Files/Mocks/README.md index 8898e9e357..ecb4e02db3 100644 --- a/Source Files/Mocks/README.md +++ b/Source Files/Mocks/README.md @@ -1,7 +1,4 @@ # TODO -* Fix SCSS integration -* Fix Photoswipe shortcode * 3D Model - * Fix distortion on 3D Model * Try to remove top level await diff --git a/Source Files/Mocks/package.json b/Source Files/Mocks/package.json index b0a8073b7e..396a04d66e 100644 --- a/Source Files/Mocks/package.json +++ b/Source Files/Mocks/package.json @@ -3,7 +3,7 @@ "dev": "vite", "build": "vite build", "preview": "vite preview", - "eslint": "eslint . -c eslint.config.mjs --report-unused-disable-directives --max-warnings 0", + "lint": "eslint . -c eslint.config.mjs --report-unused-disable-directives --max-warnings 0", "stylelint": "stylelint '**/*.scss'", "model": "obj2gltf -i webgpu/public/model/3DModel.obj -o webgpu/public/model/uranium.glb" }, diff --git a/Source Files/Mocks/webgpu/assets/scss/base.scss b/Source Files/Mocks/webgpu/assets/scss/base.scss index 30bbcc4c64..69771c2940 100644 --- a/Source Files/Mocks/webgpu/assets/scss/base.scss +++ b/Source Files/Mocks/webgpu/assets/scss/base.scss @@ -1,5 +1,7 @@ -.canvas { - #renderer { +.renderer-canvas { + min-height: 50vh; + + canvas { background: black; } diff --git a/Source Files/Mocks/webgpu/index.html b/Source Files/Mocks/webgpu/index.html index 563c870ecf..a385eff211 100644 --- a/Source Files/Mocks/webgpu/index.html +++ b/Source Files/Mocks/webgpu/index.html @@ -18,7 +18,7 @@

HDR webGPU

-
+
diff --git a/assets/js/hdr-model.js b/assets/js/hdr-model.js index 17e8e0c907..6df696df5d 100644 --- a/assets/js/hdr-model.js +++ b/assets/js/hdr-model.js @@ -16,7 +16,7 @@ function render() { camera.lookAt(model.position); controls.update(); - camera.aspect = canvas.parentNode.clientWidth / canvas.parentNode.clientHeight; + camera.aspect = renderer.domElement.parentNode.clientWidth / renderer.domElement.parentNode.clientHeight; camera.updateProjectionMatrix(); renderer.renderAsync(scene, camera); @@ -67,19 +67,26 @@ export function initModel(canvas, modelUrl, replacements) { } ); - camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20); - camera.position.set(0, 0, 5); + // Add alpha: true for transparency renderer = new HDRWebGPURenderer({canvas: canvas, antialias: true}); - const ratio = window.devicePixelRatio || 1; - renderer.setPixelRatio(ratio); const parentWidth = renderer.domElement.parentNode.clientWidth; const parentHeight = renderer.domElement.parentNode.clientHeight; + + //camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20); + camera = new THREE.PerspectiveCamera(45, parentWidth / parentHeight, 0.25, 20); + camera.position.set(0, 0, 5); + + const ratio = window.devicePixelRatio || 1; + renderer.setPixelRatio(ratio); + renderer.setSize(parentWidth, parentHeight); - renderer.setAnimationLoop( animate ); + renderer.setAnimationLoop(animate); renderer.setClearColor(0x000000, 0); - controls = new OrbitControls( camera, renderer.domElement ); + controls = new OrbitControls(camera, renderer.domElement); + controls.minPolarAngle = 0; + controls.maxPolarAngle = Math.PI * 0.5; window.addEventListener("resize", () => { camera.aspect = canvas.parentNode.clientWidth / canvas.parentNode.clientHeight; @@ -98,14 +105,15 @@ function animate() { renderer.render(scene, camera); } +/* function getImageDataFromImg(img) { const colorSpace = 'rec2100-hlg'; const offscreen = new OffscreenCanvas(img.width, img.height); -// offscreen.configureHighDynamicRange({mode:'extended'}); const loadCtx = offscreen.getContext("2d", {colorSpace: colorSpace, pixelFormat:'float16'}); loadCtx.drawImage(img, 0, 0); const imData = loadCtx.getImageData(0, 0, img.width, img.height); return imData; } +*/ window.initModel = initModel;