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 @@
-
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;