From 336e8e4c4786300323240e103d7241e9f139511b Mon Sep 17 00:00:00 2001 From: hexzii Date: Thu, 30 Jul 2026 00:08:36 +0800 Subject: [PATCH] Update Three.js to 0.185.1 and use modern color management API --- package-lock.json | 106 +++++++++++++++++++++++++++++----------------- package.json | 4 +- src/viewer.ts | 12 +++++- 3 files changed, 80 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0a03fdd1..8a053228 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,9 @@ "version": "3.4.2", "license": "MIT", "dependencies": { - "@types/three": "^0.156.0", + "@types/three": "^0.185.1", "skinview-utils": "^0.7.1", - "three": "^0.156.0" + "three": "^0.185.1" }, "devDependencies": { "@rollup/plugin-node-resolve": "^15.0.2", @@ -45,6 +45,12 @@ "node": ">=12.17" } }, + "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/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -1309,6 +1315,12 @@ "node": ">= 6" } }, + "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/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -1334,20 +1346,24 @@ "integrity": "sha512-OgfYE1x2w1jRUXzzKABX+kOdwz2y9PE0uSwnZabkWfJTWOzm7Pvfm4JI2xqRE0q2nwUe2jZLWcrcnhd9lQU63w==" }, "node_modules/@types/three": { - "version": "0.156.0", - "resolved": "https://registry.npmjs.org/@types/three/-/three-0.156.0.tgz", - "integrity": "sha512-733bXDSRdlrxqOmQuOmfC1UBRuJ2pREPk8sWnx9MtIJEVDQMx8U0NQO5MVVaOrjzDPyLI+cFPim2X/ss9v0+LQ==", + "version": "0.185.1", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.185.1.tgz", + "integrity": "sha512-db1xTb+EgYF2didW+eudSvVPtn75zo+fGsY8ShQrJY/B5ZBmC2Fiaykv3aImHAlCNEGuMPkPGXBJGLwzu5mC7A==", + "license": "MIT", "dependencies": { + "@dimforge/rapier3d-compat": "~0.12.0", + "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", - "@types/webxr": "*", - "fflate": "~0.6.10", - "meshoptimizer": "~0.18.1" + "@types/webxr": ">=0.5.17", + "fflate": "~0.8.2", + "meshoptimizer": "~1.1.1" } }, "node_modules/@types/webxr": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.4.0.tgz", - "integrity": "sha512-LQvrACV3Pj17GpkwHwXuTd733gfY+D7b9mKdrTmLdO7vo7P/o6209Qqtk63y/FCv/lspdmi0pWz6Qe/ull9kQg==" + "version": "0.5.24", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz", + "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==", + "license": "MIT" }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.31.1", @@ -3212,9 +3228,10 @@ } }, "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.3", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz", + "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==", + "license": "MIT" }, "node_modules/file-entry-cache": { "version": "8.0.0", @@ -4673,9 +4690,10 @@ } }, "node_modules/meshoptimizer": { - "version": "0.18.1", - "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz", - "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz", + "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==", + "license": "MIT" }, "node_modules/methods": { "version": "1.1.2", @@ -6163,9 +6181,9 @@ } }, "node_modules/three": { - "version": "0.156.1", - "resolved": "https://registry.npmjs.org/three/-/three-0.156.1.tgz", - "integrity": "sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ==", + "version": "0.185.1", + "resolved": "https://registry.npmjs.org/three/-/three-0.185.1.tgz", + "integrity": "sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==", "license": "MIT" }, "node_modules/through": { @@ -6624,6 +6642,11 @@ "typical": "^7.1.1" } }, + "@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==" + }, "@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -7322,6 +7345,11 @@ "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==", "dev": true }, + "@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==" + }, "@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -7346,20 +7374,22 @@ "integrity": "sha512-OgfYE1x2w1jRUXzzKABX+kOdwz2y9PE0uSwnZabkWfJTWOzm7Pvfm4JI2xqRE0q2nwUe2jZLWcrcnhd9lQU63w==" }, "@types/three": { - "version": "0.156.0", - "resolved": "https://registry.npmjs.org/@types/three/-/three-0.156.0.tgz", - "integrity": "sha512-733bXDSRdlrxqOmQuOmfC1UBRuJ2pREPk8sWnx9MtIJEVDQMx8U0NQO5MVVaOrjzDPyLI+cFPim2X/ss9v0+LQ==", + "version": "0.185.1", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.185.1.tgz", + "integrity": "sha512-db1xTb+EgYF2didW+eudSvVPtn75zo+fGsY8ShQrJY/B5ZBmC2Fiaykv3aImHAlCNEGuMPkPGXBJGLwzu5mC7A==", "requires": { + "@dimforge/rapier3d-compat": "~0.12.0", + "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", - "@types/webxr": "*", - "fflate": "~0.6.10", - "meshoptimizer": "~0.18.1" + "@types/webxr": ">=0.5.17", + "fflate": "~0.8.2", + "meshoptimizer": "~1.1.1" } }, "@types/webxr": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.4.0.tgz", - "integrity": "sha512-LQvrACV3Pj17GpkwHwXuTd733gfY+D7b9mKdrTmLdO7vo7P/o6209Qqtk63y/FCv/lspdmi0pWz6Qe/ull9kQg==" + "version": "0.5.24", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz", + "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==" }, "@typescript-eslint/eslint-plugin": { "version": "8.31.1", @@ -8667,9 +8697,9 @@ } }, "fflate": { - "version": "0.6.10", - "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz", - "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==" + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz", + "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==" }, "file-entry-cache": { "version": "8.0.0", @@ -9775,9 +9805,9 @@ "dev": true }, "meshoptimizer": { - "version": "0.18.1", - "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz", - "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz", + "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==" }, "methods": { "version": "1.1.2", @@ -10859,9 +10889,9 @@ } }, "three": { - "version": "0.156.1", - "resolved": "https://registry.npmjs.org/three/-/three-0.156.1.tgz", - "integrity": "sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ==" + "version": "0.185.1", + "resolved": "https://registry.npmjs.org/three/-/three-0.185.1.tgz", + "integrity": "sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==" }, "through": { "version": "2.3.8", diff --git a/package.json b/package.json index 2c91fa42..f6c39d9e 100644 --- a/package.json +++ b/package.json @@ -42,11 +42,11 @@ "assets" ], "dependencies": { - "@types/three": "^0.156.0", "skinview-utils": "^0.7.1", - "three": "^0.156.0" + "three": "^0.185.1" }, "devDependencies": { + "@types/three": "^0.185.1", "@rollup/plugin-node-resolve": "^15.0.2", "@swc/core": "^1.3.53", "@typescript-eslint/eslint-plugin": "^8.31.1", diff --git a/src/viewer.ts b/src/viewer.ts index eb3af670..d31d9eda 100644 --- a/src/viewer.ts +++ b/src/viewer.ts @@ -31,7 +31,8 @@ import { DepthTexture, Clock, Object3D, - ColorManagement, + + SRGBColorSpace, } from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"; @@ -39,6 +40,7 @@ import { FullScreenQuad } from "three/examples/jsm/postprocessing/Pass.js"; import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"; import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js"; import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js"; +import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js"; import { PlayerAnimation } from "./animation.js"; import { type BackEquipment, PlayerObject } from "./model.js"; import { NameTagObject } from "./nametag.js"; @@ -343,13 +345,14 @@ export class SkinViewer { this.camera.add(this.cameraLight); this.scene.add(this.camera); this.scene.add(this.globalLight); - ColorManagement.enabled = false; this.renderer = new WebGLRenderer({ canvas: this.canvas, preserveDrawingBuffer: options.preserveDrawingBuffer === true, // default: false }); + this.renderer.outputColorSpace = SRGBColorSpace; + this.onDevicePixelRatioChange = () => { this.renderer.setPixelRatio(window.devicePixelRatio); this.updateComposerSize(); @@ -385,6 +388,7 @@ export class SkinViewer { this.fxaaPass = new ShaderPass(FXAAShader); this.composer.addPass(this.renderPass); this.composer.addPass(this.fxaaPass); + this.composer.addPass(new OutputPass()); this.playerObject = new PlayerObject(); this.playerObject.name = "player"; @@ -510,6 +514,7 @@ export class SkinViewer { this.skinTexture.dispose(); } this.skinTexture = new CanvasTexture(this.skinCanvas); + this.skinTexture.colorSpace = SRGBColorSpace; this.skinTexture.magFilter = NearestFilter; this.skinTexture.minFilter = NearestFilter; this.playerObject.skin.map = this.skinTexture; @@ -520,6 +525,7 @@ export class SkinViewer { this.capeTexture.dispose(); } this.capeTexture = new CanvasTexture(this.capeCanvas); + this.capeTexture.colorSpace = SRGBColorSpace; this.capeTexture.magFilter = NearestFilter; this.capeTexture.minFilter = NearestFilter; this.playerObject.cape.map = this.capeTexture; @@ -531,6 +537,7 @@ export class SkinViewer { this.earsTexture.dispose(); } this.earsTexture = new CanvasTexture(this.earsCanvas); + this.earsTexture.colorSpace = SRGBColorSpace; this.earsTexture.magFilter = NearestFilter; this.earsTexture.minFilter = NearestFilter; this.playerObject.ears.map = this.earsTexture; @@ -676,6 +683,7 @@ export class SkinViewer { if (mapping !== undefined) { this.backgroundTexture.mapping = mapping; } + this.backgroundTexture.colorSpace = SRGBColorSpace; this.backgroundTexture.needsUpdate = true; this.scene.background = this.backgroundTexture; } else {