diff --git a/js/lib/libs.ts b/js/lib/libs.ts index 57f9ebbf6..3bd818df4 100644 --- a/js/lib/libs.ts +++ b/js/lib/libs.ts @@ -19,6 +19,7 @@ Vue.directive('sortable', { } }) +threejs.ColorManagement.enabled = false; const THREE = Object.assign({}, threejs); export { diff --git a/js/preview/preview.js b/js/preview/preview.js index 6ea58f9d9..88700c901 100644 --- a/js/preview/preview.js +++ b/js/preview/preview.js @@ -284,6 +284,7 @@ export class Preview { alpha: true, preserveDrawingBuffer: true }); + this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace; } catch (err) { let error_element = document.querySelector('#loading_error_detail') error_element.innerHTML = `Error creating WebGL context. Try to update your graphics drivers.` @@ -2244,13 +2245,20 @@ export function updateShading() { if (Canvas.material_light) { Canvas.scene.remove(Canvas.material_light); } - Texture.all.forEach(tex => { - let material = tex.getMaterial(); + function updateShaderMaterial(material) { if (!material.uniforms) return; material.uniforms.SHADE.value = settings.shading.value; material.uniforms.LIGHTCOLOR.value.copy(Canvas.global_light_color).multiplyScalar(settings.brightness.value / 50); material.uniforms.LIGHTSIDE.value = Canvas.global_light_side; + } + Texture.all.forEach(tex => { + let material = tex.getMaterial(); + updateShaderMaterial(material); }) + for (let id in PreviewModel.models) { + let model = PreviewModel.models[id]; + if (model.material) updateShaderMaterial(model.material); + } Canvas.emptyMaterials.forEach(material => { material.uniforms.SHADE.value = settings.shading.value; material.uniforms.BRIGHTNESS.value = settings.brightness.value / 50; diff --git a/js/preview/preview_scenes.js b/js/preview/preview_scenes.js index 72964bae8..b61a63494 100644 --- a/js/preview/preview_scenes.js +++ b/js/preview/preview_scenes.js @@ -1,4 +1,8 @@ import { toSnakeCase } from "../util/util"; +import { THREE } from "../lib/libs"; +import VertShader from './../shaders/texture.vert.glsl'; +import FragShader from './../shaders/texture.frag.glsl'; +import { prepareShader } from "../shaders/shader"; export class PreviewScene { constructor(id, data = 0) { @@ -44,7 +48,7 @@ export class PreviewScene { Canvas.updateShading(); } }); - texture_cube.colorSpace = THREE.SRGBColorSpace; + texture_cube.colorSpace = THREE.NoColorSpace; texture_cube.mapping = THREE.CubeRefractionMapping; this.cubemap = texture_cube; } @@ -219,6 +223,7 @@ export class PreviewModel { let img = new Image(); img.src = this.build_data.texture; tex = new THREE.Texture(img); + //tex.colorSpace = THREE.NoColorSpace; tex.magFilter = THREE.NearestFilter; tex.minFilter = THREE.NearestFilter; tex.wrapS = THREE.RepeatWrapping; @@ -228,11 +233,17 @@ export class PreviewModel { tex.needsUpdate = true; } } - this.material = new (this.shading ? THREE.MeshLambertMaterial : THREE.MeshBasicMaterial)({ - color: this.color, - map: tex, - side: this.render_side, - alphaTest: 0.05 + this.material = new THREE.ShaderMaterial({ + uniforms: { + map: {type: 't', value: tex}, + SHADE: {type: 'bool', value: this.shading}, + LIGHTCOLOR: {type: 'vec3', value: new THREE.Color().copy(Canvas.global_light_color).multiplyScalar(settings.brightness.value / 50)}, + LIGHTSIDE: {type: 'int', value: Canvas.global_light_side}, + EMISSIVE: {type: 'bool', value: false} + }, + vertexShader: prepareShader(VertShader), + fragmentShader: prepareShader(FragShader), + side: this.render_side }); if (typeof this.color == 'object') { this.material.color.copy(this.color); diff --git a/package-lock.json b/package-lock.json index 725f65a6d..b034bdf4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@electron/remote": "^2.1.2", "@types/jquery": "^3.5.32", "@types/spectrum": "^1.8.7", - "@types/three": "^0.150.0", + "@types/three": "^0.174.0", "@types/tinycolor2": "^1.4.6", "dompurify": "^3.2.5", "electron-color-picker": "^0.2.0", @@ -26,7 +26,7 @@ "molangjs": "^1.6.5", "peerjs": "^1.5.4", "prismjs": "^1.29.0", - "three": "^0.150.0", + "three": "^0.174.0", "tinycolor2": "^1.6.0", "vue": "^2.7.16", "vue-sortable": "^0.1.3", @@ -1740,6 +1740,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@dimforge/rapier3d-compat": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz", + "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==", + "license": "Apache-2.0" + }, "node_modules/@electron/asar": { "version": "3.2.18", "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.18.tgz", @@ -3197,6 +3203,12 @@ "node": ">= 10" } }, + "node_modules/@tweenjs/tween.js": { + "version": "23.1.3", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz", + "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==", + "license": "MIT" + }, "node_modules/@types/cacheable-request": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz", @@ -3322,21 +3334,24 @@ } }, "node_modules/@types/stats.js": { - "version": "0.17.3", - "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz", - "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==", + "version": "0.17.4", + "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz", + "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==", "license": "MIT" }, "node_modules/@types/three": { - "version": "0.150.2", - "resolved": "https://registry.npmjs.org/@types/three/-/three-0.150.2.tgz", - "integrity": "sha512-cvcz/81Mmj4oiAA+uxzwaRK3t8lYw8WxejXKqIBfu6PqvwSAEEiCi3VfCiVY18UflBqL0LDX/za85+sfqjMoIw==", + "version": "0.180.0", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.180.0.tgz", + "integrity": "sha512-ykFtgCqNnY0IPvDro7h+9ZeLY+qjgUWv+qEvUt84grhenO60Hqd4hScHE7VTB9nOQ/3QM8lkbNE+4vKjEpUxKg==", "license": "MIT", "dependencies": { + "@dimforge/rapier3d-compat": "~0.12.0", + "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", "@types/webxr": "*", - "fflate": "~0.6.9", - "lil-gui": "~0.17.0" + "@webgpu/types": "*", + "fflate": "~0.8.2", + "meshoptimizer": "~0.22.0" } }, "node_modules/@types/tinycolor2": { @@ -3368,9 +3383,9 @@ "optional": true }, "node_modules/@types/webxr": { - "version": "0.5.21", - "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.21.tgz", - "integrity": "sha512-geZIAtLzjGmgY2JUi6VxXdCrTb99A7yP49lxLr2Nm/uIK0PkkxcEi4OGhoGDO4pxCf3JwGz2GiJL2Ej4K2bKaA==", + "version": "0.5.23", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.23.tgz", + "integrity": "sha512-GPe4AsfOSpqWd3xA/0gwoKod13ChcfV67trvxaW2krUbgb9gxQjnCx8zGshzMl8LSHZlNH5gQ8LNScsDuc7nGQ==", "license": "MIT" }, "node_modules/@types/yauzl": { @@ -3482,6 +3497,12 @@ "dev": true, "license": "ISC" }, + "node_modules/@webgpu/types": { + "version": "0.1.64", + "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.64.tgz", + "integrity": "sha512-84kRIAGV46LJTlJZWxShiOrNL30A+9KokD7RB3dRCIqODFjodS5tCD5yyiZ8kIReGVZSDfA3XkkwyyOIF6K62A==", + "license": "BSD-3-Clause" + }, "node_modules/@xmldom/xmldom": { "version": "0.8.10", "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz", @@ -5738,9 +5759,9 @@ } }, "node_modules/fflate": { - "version": "0.6.10", - "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz", - "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==", + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", "license": "MIT" }, "node_modules/file-saver": { @@ -7100,12 +7121,6 @@ "immediate": "~3.0.5" } }, - "node_modules/lil-gui": { - "version": "0.17.0", - "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.17.0.tgz", - "integrity": "sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==", - "license": "MIT" - }, "node_modules/linkify-it": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", @@ -7341,6 +7356,12 @@ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", "dev": true }, + "node_modules/meshoptimizer": { + "version": "0.22.0", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz", + "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==", + "license": "MIT" + }, "node_modules/micromatch": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", @@ -9465,9 +9486,9 @@ } }, "node_modules/three": { - "version": "0.150.1", - "resolved": "https://registry.npmjs.org/three/-/three-0.150.1.tgz", - "integrity": "sha512-5C1MqKUWaHYo13BX0Q64qcdwImgnnjSOFgBscOzAo8MYCzEtqfQqorEKMcajnA3FHy1yVlIe9AmaMQ0OQracNA==", + "version": "0.174.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.174.0.tgz", + "integrity": "sha512-p+WG3W6Ov74alh3geCMkGK9NWuT62ee21cV3jEnun201zodVF4tCE5aZa2U122/mkLRmhJJUQmLLW1BH00uQJQ==", "license": "MIT" }, "node_modules/tiny-typed-emitter": { @@ -9942,6 +9963,12 @@ "tinycolor2": "^1.4.2" } }, + "node_modules/wintersky/node_modules/three": { + "version": "0.129.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.129.0.tgz", + "integrity": "sha512-wiWio1yVRg2Oj6WEWsTHQo5eSzYpEwSBtPSi3OofNpvFbf26HFfb9kw4FZJNjII4qxzp0b1xLB11+tKkBGB1ZA==", + "license": "MIT" + }, "node_modules/with": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz", diff --git a/package.json b/package.json index 2f497759f..cbca05645 100644 --- a/package.json +++ b/package.json @@ -161,7 +161,7 @@ "@electron/remote": "^2.1.2", "@types/jquery": "^3.5.32", "@types/spectrum": "^1.8.7", - "@types/three": "^0.150.0", + "@types/three": "^0.174.0", "@types/tinycolor2": "^1.4.6", "dompurify": "^3.2.5", "electron-color-picker": "^0.2.0", @@ -175,7 +175,7 @@ "molangjs": "^1.6.5", "peerjs": "^1.5.4", "prismjs": "^1.29.0", - "three": "^0.150.0", + "three": "^0.174.0", "tinycolor2": "^1.6.0", "vue": "^2.7.16", "vue-sortable": "^0.1.3",