fix: fix webgl warnings & update three (#42)

.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,

.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

.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,

.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

.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

.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(() => {

.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 <tonemapping_fragment>
-      #include <encodings_fragment>
+      #include <${parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
     }
   `
 )

.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)
 

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",

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 <dithering_fragment>
           #include <tonemapping_fragment>
-          #include <encodings_fragment>
+          #include <${parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
         }`,
       vertexShader: `uniform vec2 texelSize;
         uniform vec2 halfTexelSize;

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<SpotLightMaterialProps>(
     gl_FragColor = vec4(lightColor, intensity * opacity);
 
     #include <tonemapping_fragment>
-    #include <encodings_fragment>
+    #include <${parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
   }`
 )

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"