From 5c60a9904fa67ef166e05cd09290bf0fe0b9ee08 Mon Sep 17 00:00:00 2001 From: VishaL <119810373+vis-prime@users.noreply.github.com> Date: Mon, 11 Sep 2023 00:24:28 +0530 Subject: [PATCH] fix: fix webgl warnings & update three (#42) --- .../stories/AccumulativeShadows.stories.ts | 2 +- .storybook/stories/Billboard.stories.ts | 2 +- .../stories/MeshReflectorMaterial.stories.ts | 2 +- .storybook/stories/Outlines.stories.ts | 2 +- .storybook/stories/PCSS.stories.ts | 2 +- .storybook/stories/Text.stories.ts | 6 +- .storybook/stories/shaderMaterial.stories.ts | 4 +- .../stories/volumetricSpotlight.stories.ts | 5 +- package.json | 4 +- src/materials/ConvolutionMaterial.ts | 4 +- src/materials/SpotLightMaterial.ts | 4 +- yarn.lock | 84 +++++-------------- 12 files changed, 40 insertions(+), 81 deletions(-) diff --git a/.storybook/stories/AccumulativeShadows.stories.ts b/.storybook/stories/AccumulativeShadows.stories.ts index 51d035a..ebba827 100644 --- a/.storybook/stories/AccumulativeShadows.stories.ts +++ b/.storybook/stories/AccumulativeShadows.stories.ts @@ -62,7 +62,7 @@ const lightParams = { amount: 8, /** Light intensity */ - intensity: 1, + intensity: parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 155 ? Math.PI : 1, /** Ambient occlusion, lower values mean less AO, hight more, you can mix AO and directional light */ ambient: 0.5, diff --git a/.storybook/stories/Billboard.stories.ts b/.storybook/stories/Billboard.stories.ts index 0efacbc..23beaa8 100644 --- a/.storybook/stories/Billboard.stories.ts +++ b/.storybook/stories/Billboard.stories.ts @@ -26,7 +26,7 @@ const getTorusMesh = () => { } const setupLight = () => { - const dirLight = new THREE.DirectionalLight(0xabcdef, 5) + const dirLight = new THREE.DirectionalLight(0xabcdef, 12) dirLight.position.set(15, 15, 15) dirLight.castShadow = true dirLight.shadow.mapSize.width = 1024 diff --git a/.storybook/stories/MeshReflectorMaterial.stories.ts b/.storybook/stories/MeshReflectorMaterial.stories.ts index 19d7c61..4874f31 100644 --- a/.storybook/stories/MeshReflectorMaterial.stories.ts +++ b/.storybook/stories/MeshReflectorMaterial.stories.ts @@ -32,7 +32,7 @@ const MRMParams = { } const params = { - color: new THREE.Color('#151515'), + color: new THREE.Color('#333333'), useRoughnessMap: false, roughness: 1, metalness: 0.6, diff --git a/.storybook/stories/Outlines.stories.ts b/.storybook/stories/Outlines.stories.ts index dd1b62a..40a1f18 100644 --- a/.storybook/stories/Outlines.stories.ts +++ b/.storybook/stories/Outlines.stories.ts @@ -62,7 +62,7 @@ const setupBox = () => { } const setupLight = () => { - const dirLight = new THREE.DirectionalLight(0xffffff, 1) + const dirLight = new THREE.DirectionalLight(0xffffff, 3) dirLight.position.set(15, 15, 15) dirLight.castShadow = true dirLight.shadow.mapSize.width = 1024 diff --git a/.storybook/stories/PCSS.stories.ts b/.storybook/stories/PCSS.stories.ts index 7a5e720..f38cc94 100644 --- a/.storybook/stories/PCSS.stories.ts +++ b/.storybook/stories/PCSS.stories.ts @@ -55,7 +55,7 @@ export const PcssStory = async () => { scene.add(new AmbientLight(0x666666)) - const light = new DirectionalLight(0xdfebff, 1.75) + const light = new DirectionalLight(0xdfebff, 5) light.position.set(2, 8, 4) light.castShadow = true diff --git a/.storybook/stories/Text.stories.ts b/.storybook/stories/Text.stories.ts index bce6a02..01294d5 100644 --- a/.storybook/stories/Text.stories.ts +++ b/.storybook/stories/Text.stories.ts @@ -1,6 +1,6 @@ import { Setup } from '../Setup' import { Meta } from '@storybook/html' -import { OrbitControls } from 'three-stdlib' +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { GUI } from 'lil-gui' import { Text, TextProps, TextType } from '../../src/core/Text' @@ -59,12 +59,12 @@ export const TextStory = async () => { if (runtimeParams.animate) textMesh.rotation.y += 0.01 }) - addOutlineGui() + addTextGui() } TextStory.storyName = 'Default' -const addOutlineGui = () => { +const addTextGui = () => { const params = Object.assign({}, textParams) const folder = gui.addFolder('T E X T') folder.open().onChange(() => { diff --git a/.storybook/stories/shaderMaterial.stories.ts b/.storybook/stories/shaderMaterial.stories.ts index e8ea88c..a81d430 100644 --- a/.storybook/stories/shaderMaterial.stories.ts +++ b/.storybook/stories/shaderMaterial.stories.ts @@ -1,4 +1,4 @@ -import { BoxGeometry, Mesh, Texture, TextureLoader } from 'three' +import { BoxGeometry, Mesh, Texture, TextureLoader, REVISION } from 'three' import { shaderMaterial } from '../../src/core/shaderMaterial' import { Setup } from '../Setup' import { Meta } from '@storybook/html' @@ -43,7 +43,7 @@ const MyMaterial = shaderMaterial( gl_FragColor = vec4(color, 1.0); #include - #include + #include <${parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}> } ` ) diff --git a/.storybook/stories/volumetricSpotlight.stories.ts b/.storybook/stories/volumetricSpotlight.stories.ts index e622ec6..7bdaf16 100644 --- a/.storybook/stories/volumetricSpotlight.stories.ts +++ b/.storybook/stories/volumetricSpotlight.stories.ts @@ -74,7 +74,7 @@ export const VolumetricSpotlightStory = async () => { * Setup a volumetric spotlight */ function setupSpotlight() { - spotLight = new SpotLight(0xabcdef, 10) + spotLight = new SpotLight(0xabcdef, 500) spotLight.position.set(1, 4, 1) spotLight.angle = Math.PI / 6 spotLight.distance = 10 @@ -142,7 +142,6 @@ function updateDepthTargets() { depthTarget = new WebGLRenderTarget(volumeParams.depthResolution, volumeParams.depthResolution, { minFilter: LinearFilter, magFilter: LinearFilter, - encoding: renderer.outputEncoding, type: HalfFloatType, depthTexture, samples: 0, @@ -238,7 +237,7 @@ function addSpotLightGui(gui: GUI) { spotLightHelper.visible = v }) - folder.add(spotLight, 'intensity', 0, 50) + folder.add(spotLight, 'intensity', 0, 2000) folder.add(spotLight, 'penumbra', 0, 1) diff --git a/package.json b/package.json index f2e7d87..e005373 100644 --- a/package.json +++ b/package.json @@ -108,8 +108,8 @@ "rollup-plugin-multi-input": "^1.3.1", "rollup-plugin-terser": "^7.0.2", "semantic-release": "^20.1.1", - "three": "0.152.0", - "three-stdlib": "^2.21.8", + "three": "^0.156.1", + "three-stdlib": "^2.25.1", "troika-three-text": "0.47.2", "ts-node": "^10.9.1", "typescript": "^4.7.4", diff --git a/src/materials/ConvolutionMaterial.ts b/src/materials/ConvolutionMaterial.ts index 62a3104..474aceb 100644 --- a/src/materials/ConvolutionMaterial.ts +++ b/src/materials/ConvolutionMaterial.ts @@ -1,4 +1,4 @@ -import { NoBlending, ShaderMaterial, Uniform, Vector2 } from 'three' +import { NoBlending, ShaderMaterial, Uniform, Vector2, REVISION } from 'three' export class ConvolutionMaterial extends ShaderMaterial { readonly kernel: Float32Array @@ -53,7 +53,7 @@ export class ConvolutionMaterial extends ShaderMaterial { #include #include - #include + #include <${parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}> }`, vertexShader: `uniform vec2 texelSize; uniform vec2 halfTexelSize; diff --git a/src/materials/SpotLightMaterial.ts b/src/materials/SpotLightMaterial.ts index 9c72ef8..dbc3c56 100644 --- a/src/materials/SpotLightMaterial.ts +++ b/src/materials/SpotLightMaterial.ts @@ -1,4 +1,4 @@ -import { Color, Vector2, Vector3, type Texture } from 'three' +import { Color, Vector2, Vector3, REVISION, type Texture } from 'three' import { shaderMaterial } from '../core/shaderMaterial' type SpotLightMaterialProps = { @@ -92,6 +92,6 @@ export const SpotLightMaterial = shaderMaterial( gl_FragColor = vec4(lightColor, intensity * opacity); #include - #include + #include <${parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}> }` ) diff --git a/yarn.lock b/yarn.lock index f2e866f..912837e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1071,7 +1071,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.8", "@babel/runtime@^7.5.0", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.5.0", "@babel/runtime@^7.8.4": version "7.17.8" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz" integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA== @@ -1124,33 +1124,6 @@ resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@chevrotain/cst-dts-gen@^10.1.2": - version "10.1.2" - resolved "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-10.1.2.tgz" - integrity sha512-E/XrL0QlzExycPzwhOEZGVOheJ/Clr5uNv3oCds88MiNqEmg3UU1iauZk7DhjsUo3jgEW4lf0I5HRl7/HC5ZkQ== - dependencies: - "@chevrotain/gast" "^10.1.2" - "@chevrotain/types" "^10.1.2" - lodash "4.17.21" - -"@chevrotain/gast@^10.1.2": - version "10.1.2" - resolved "https://registry.npmjs.org/@chevrotain/gast/-/gast-10.1.2.tgz" - integrity sha512-er+TcxUOMuGOPoiOq8CJsRm92zGE4YPIYtyxJfxoVwVgtj4AMrPNCmrHvYaK/bsbt2DaDuFdcbbAfM9bcBXW6Q== - dependencies: - "@chevrotain/types" "^10.1.2" - lodash "4.17.21" - -"@chevrotain/types@^10.1.2": - version "10.1.2" - resolved "https://registry.npmjs.org/@chevrotain/types/-/types-10.1.2.tgz" - integrity sha512-4qF9SmmWKv8AIG/3d+71VFuqLumNCQTP5GoL0CW6x7Ay2OdXm6FUgWFLTMneGUjYUk2C+MSCf7etQfdq3LEr1A== - -"@chevrotain/utils@^10.1.2": - version "10.1.2" - resolved "https://registry.npmjs.org/@chevrotain/utils/-/utils-10.1.2.tgz" - integrity sha512-bbZIpW6fdyf7FMaeDmw3cBbkTqsecxEkwlVKgVfqqXWBPLH6azxhPA2V9F7OhoZSVrsnMYw7QuyK6qutXPjEew== - "@choojs/findup@^0.2.0": version "0.2.1" resolved "https://registry.npmjs.org/@choojs/findup/-/findup-0.2.1.tgz" @@ -3197,6 +3170,11 @@ dependencies: "@babel/types" "^7.3.0" +"@types/draco3d@^1.4.0": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@types/draco3d/-/draco3d-1.4.2.tgz#7faccb809db2a5e19b9efb97c5f2eb9d64d527ea" + integrity sha512-goh23EGr6CLV6aKPwN1p8kBD/7tT5V/bLpToSbarKrwVejqNrspVrv8DhliteYkkhZYrlq/fwKZRRUzH4XN88w== + "@types/eslint-scope@^3.7.3": version "3.7.4" resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz" @@ -3482,6 +3460,11 @@ resolved "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.1.tgz" integrity sha512-xlFXPfgJR5vIuDefhaHuUM9uUgvPaXB6GKdXy2gdEh8gBWQZ2ul24AJz3foUd8NNKlSTQuWYJpCb1/pL81m1KQ== +"@types/webxr@^0.5.2": + version "0.5.4" + resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.4.tgz#3d55a6427f9281d456843d754c99bf7804657fe3" + integrity sha512-41gfGLTtqXZhcmoDlLDHqMJDuwAMwhHwXf9Q2job3TUBsvkNfPNI/3IWVEtLH4tyY1ElWtfwIaoNeqeEX238/Q== + "@types/yargs-parser@*": version "21.0.0" resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz" @@ -3847,11 +3830,6 @@ "@webassemblyjs/wast-parser" "1.9.0" "@xtuc/long" "4.2.2" -"@webgpu/glslang@^0.0.15": - version "0.0.15" - resolved "https://registry.npmjs.org/@webgpu/glslang/-/glslang-0.0.15.tgz" - integrity sha512-niT+Prh3Aff8Uf1MVBVUsaNjFj9rJAKDXuoHIKiQbB+6IUP/3J3JIhBNyZ7lDhytvXxw6ppgnwKZdDJ08UMj4Q== - "@xtuc/ieee754@^1.2.0": version "1.2.0" resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz" @@ -5124,18 +5102,6 @@ character-reference-invalid@^1.0.0: resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz" integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg== -chevrotain@^10.1.2: - version "10.1.2" - resolved "https://registry.npmjs.org/chevrotain/-/chevrotain-10.1.2.tgz" - integrity sha512-hvRiQuhhTZxkPMGD/dke+s1EGo8AkKDBU05CcufBO278qgAQSwIC4QyLdHz0CFHVtqVYWjlAS5D1KwvBbaHT+w== - dependencies: - "@chevrotain/cst-dts-gen" "^10.1.2" - "@chevrotain/gast" "^10.1.2" - "@chevrotain/types" "^10.1.2" - "@chevrotain/utils" "^10.1.2" - lodash "4.17.21" - regexp-to-ast "0.5.0" - chokidar@^2.1.8: version "2.1.8" resolved "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz" @@ -9875,7 +9841,7 @@ lodash.uniqby@^4.7.0: resolved "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz" integrity sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww== -lodash@4.17.21, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0: +lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0: version "4.17.21" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -12443,11 +12409,6 @@ regex-not@^1.0.0, regex-not@^1.0.2: extend-shallow "^3.0.2" safe-regex "^1.1.0" -regexp-to-ast@0.5.0: - version "0.5.0" - resolved "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz" - integrity sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw== - regexp.prototype.flags@^1.4.3: version "1.4.3" resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz" @@ -13886,15 +13847,14 @@ text-table@^0.2.0, text-table@~0.2.0: resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz" integrity "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" -three-stdlib@^2.21.8: - version "2.21.8" - resolved "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.21.8.tgz" - integrity sha512-kqisiKvO4mSy59v5vWqBQSH8famLxp7Z51LxpMJI9GwDxqODaW02rhIwmjYDEzZWNFpjZpoDHVGbdpeHf8h3SA== +three-stdlib@^2.25.1: + version "2.25.1" + resolved "https://registry.yarnpkg.com/three-stdlib/-/three-stdlib-2.25.1.tgz#46c6b8bd18659d9d3695237cd92b3d5baee309b4" + integrity sha512-cFlxaTJjlSM10NGoUVEoQkMRpSOftuAh3OCpSKiLTsUfA7/HuhpoBJy3StiOor/LZm5M+onegqsbr5UBCCYYjQ== dependencies: - "@babel/runtime" "^7.16.7" + "@types/draco3d" "^1.4.0" "@types/offscreencanvas" "^2019.6.4" - "@webgpu/glslang" "^0.0.15" - chevrotain "^10.1.2" + "@types/webxr" "^0.5.2" draco3d "^1.4.1" fflate "^0.6.9" ktx-parse "^0.4.5" @@ -13903,10 +13863,10 @@ three-stdlib@^2.21.8: potpack "^1.0.1" zstddec "^0.0.2" -three@0.152.0: - version "0.152.0" - resolved "https://registry.yarnpkg.com/three/-/three-0.152.0.tgz#a50034af675c636322135b6bb829d6e7e3a6213d" - integrity sha512-uvKoYo4b2bnqzsR4RJFuWecxwMKcgT1nFNmiWooCNr6AxZLCtfkj/xcfFgoi5mFopSVorh7bnvTHPfeW8DINGg== +three@^0.156.1: + version "0.156.1" + resolved "https://registry.yarnpkg.com/three/-/three-0.156.1.tgz#bab4fec121a5b3975eb4f4d227d9c912171eb399" + integrity sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ== throat@^5.0.0: version "5.0.0"