fix: update three and other dependencies and fix typescript errors (#89)

* chore: update @types/three and three dependencies to latest versions

* fix: update renderer type to WebGLRenderer in pcss and Pass classes

* fix: simplify FBOSettings and improve useFBO function structure

* fix: cast texture properties to any for compatibility in Splat functions

* fix: rename depth property to depthBuffer in NORMALPROPS to follow updated useFBO params

Author: vis-prime

.eslintrc.json

@@ -5,12 +5,7 @@
     "es6": true,
     "node": true
   },
-  "extends": [
-    "prettier",
-    "plugin:prettier/recommended",    
-    "plugin:import/errors",
-    "plugin:import/warnings"
-  ],
+  "extends": ["prettier", "plugin:prettier/recommended", "plugin:import/errors", "plugin:import/warnings"],
   "plugins": ["@typescript-eslint", "prettier", "import"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

package.json

@@ -43,14 +43,14 @@
     }
   },
   "scripts": {
-    "prebuild": "rimraf dist && npm run typegen",
-    "build": "rollup -c && npm run copy",
-    "prepare": "npm run build && husky install",
+    "prebuild": "rimraf dist && yarn typegen",
+    "build": "rollup -c && yarn copy",
+    "prepare": "yarn build && husky",
     "eslint": "eslint --fix .",
     "eslint:ci": "eslint .",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write .",
-    "test": "npm run eslint:ci && npm run prettier",
+    "test": "yarn eslint:ci && yarn prettier",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly",
     "copy": "copyfiles package.json README.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.husky=undefined; this.prettier=undefined; this.jest=undefined; this['lint-staged']=undefined;\"",
@@ -62,12 +62,12 @@
     "glsl-noise": "^0.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.14.0",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/preset-typescript": "^7.10.4",
-    "@babel/runtime": "^7.11.2",
+    "@babel/core": "^7.28.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-typescript": "^7.27.1",
+    "@babel/runtime": "^7.28.2",
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
     "@rollup/plugin-babel": "^5.3.0",
@@ -84,8 +84,8 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@types/jest": "^26.0.10",
-    "@types/lodash-es": "^4.17.3",
-    "@types/three": "^0.166.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/three": "^0.179.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "babel-eslint": "^10.1.0",
@@ -99,22 +99,22 @@
     "husky": "^6.0.0",
     "jest": "^26.4.1",
     "json": "^11.0.0",
-    "lil-gui": "^0.19.2",
+    "lil-gui": "^0.20.0",
     "prettier": "^2.4.1",
-    "pretty-quick": "^3.1.0",
+    "pretty-quick": "^4.2.2",
     "raw-loader": "^4.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.1",
-    "rollup-plugin-glslify": "^1.3.0",
-    "rollup-plugin-multi-input": "^1.3.1",
+    "rollup-plugin-glslify": "^1.3.1",
+    "rollup-plugin-multi-input": "^1.5.0",
     "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^20.1.1",
-    "three": "^0.166.1",
+    "three": "^0.179.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
-    "yarn": "^1.22.17"
+    "yarn": "^1.22.22"
   },
   "peerDependencies": {
     "three": ">=0.137"

src/core/Caustics.ts

@@ -252,7 +252,7 @@ export const CausticsMaterial = shaderMaterial<CausticsMaterialType>(
 )
 
 const NORMALPROPS = {
-  depth: true,
+  depthBuffer: true,
   minFilter: THREE.LinearFilter,
   magFilter: THREE.LinearFilter,
   type: THREE.UnsignedByteType,

src/core/Splat.ts

@@ -473,8 +473,8 @@ function connect(shared: SharedState, target: TargetMesh) {
 
   async function wait() {
     while (true) {
-      const centerAndScaleTextureProperties = shared.gl.properties.get(shared.centerAndScaleTexture)
-      const covAndColorTextureProperties = shared.gl.properties.get(shared.covAndColorTexture)
+      const centerAndScaleTextureProperties = shared.gl.properties.get(shared.centerAndScaleTexture) as any
+      const covAndColorTextureProperties = shared.gl.properties.get(shared.covAndColorTexture) as any
       if (
         centerAndScaleTextureProperties?.__webglTexture &&
         covAndColorTextureProperties?.__webglTexture &&
@@ -577,7 +577,7 @@ function pushDataBuffer(shared: SharedState, buffer: ArrayBufferLike, vertexCoun
       height = 1
     }
 
-    const centerAndScaleTextureProperties = shared.gl.properties.get(shared.centerAndScaleTexture)
+    const centerAndScaleTextureProperties = shared.gl.properties.get(shared.centerAndScaleTexture) as any
     context.bindTexture(context.TEXTURE_2D, centerAndScaleTextureProperties.__webglTexture)
     context.texSubImage2D(
       context.TEXTURE_2D,
@@ -592,7 +592,7 @@ function pushDataBuffer(shared: SharedState, buffer: ArrayBufferLike, vertexCoun
       shared.loadedVertexCount * 4
     )
 
-    const covAndColorTextureProperties = shared.gl.properties.get(shared.covAndColorTexture)
+    const covAndColorTextureProperties = shared.gl.properties.get(shared.covAndColorTexture) as any
     context.bindTexture(context.TEXTURE_2D, covAndColorTextureProperties.__webglTexture)
     context.texSubImage2D(
       context.TEXTURE_2D,

src/core/pcss.ts

@@ -153,7 +153,7 @@ export const pcss = ({ focus = 0, size = 25, samples = 10 }: SoftShadowsProps =
       '#if defined( SHADOWMAP_TYPE_PCF )',
       '\nreturn mix( 1.0, PCSS(shadowMap, shadowCoord), shadowIntensity );\n#if defined( SHADOWMAP_TYPE_PCF )'
     )
-  return (gl: THREE.Renderer, scene: THREE.Scene, camera: THREE.Camera) => {
+  return (gl: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera) => {
     THREE.ShaderChunk.shadowmap_pars_fragment = original
     reset(gl, scene, camera)
   }

src/core/useFBO.ts

@@ -1,9 +1,7 @@
 import * as THREE from 'three'
 
 type FBOSettings = {
-  /** Defines the count of MSAA samples. Can only be used with WebGL 2. Default: 0 */
-  samples?: number
-  /** If set, the scene depth will be rendered into buffer.depthTexture. Default: false */
+  /** @deprecated use `depthBuffer` instead. If set, the scene depth will be rendered into buffer.depthTexture. Default: false */
   depth?: boolean
 } & THREE.RenderTargetOptions
 
@@ -13,33 +11,23 @@ function useFBO(
   /** Height in pixels */
   height = 1024,
   /**Settings */
-  settings: FBOSettings = {
-    samples: 0,
-    depth: false,
-  }
+  settings?: FBOSettings
 ): THREE.WebGLRenderTarget {
   var _width = width
   var _height = height
-  var _settings = settings
-  var samples = _settings.samples || 0
-  var depth = _settings.depth
-  var targetSettings = Object.assign({}, _settings)
-  delete targetSettings.samples
-  delete targetSettings.depth
-  var target = new THREE.WebGLRenderTarget(
-    _width,
-    _height,
-    Object.assign(
-      {
-        minFilter: THREE.LinearFilter,
-        magFilter: THREE.LinearFilter,
-        type: THREE.HalfFloatType,
-      },
-      targetSettings
-    )
-  )
-
-  if (depth) {
+  var _settings = settings || {}
+  const { samples = 0, depth, ...targetSettings } = _settings
+
+  const depthBuffer = depth ?? _settings.depthBuffer // backwards compatibility for deprecated `depth` prop
+
+  var target = new THREE.WebGLRenderTarget(_width, _height, {
+    minFilter: THREE.LinearFilter,
+    magFilter: THREE.LinearFilter,
+    type: THREE.HalfFloatType,
+    ...targetSettings,
+  })
+
+  if (depthBuffer) {
     target.depthTexture = new THREE.DepthTexture(_width, _height, THREE.FloatType)
   }
 

src/helpers/Pass.ts

@@ -1,4 +1,4 @@
-import { OrthographicCamera, PlaneGeometry, Mesh, Material, Renderer, WebGLRenderer, WebGLRenderTarget } from 'three'
+import { OrthographicCamera, PlaneGeometry, Mesh, Material, WebGLRenderer, WebGLRenderTarget } from 'three'
 
 class Pass {
   // if set to true, the pass is processed by the composer
@@ -50,7 +50,7 @@ class FullScreenQuad<TMaterial extends Material = Material> {
     this.mesh.geometry.dispose()
   }
 
-  public render(renderer: Renderer): void {
+  public render(renderer: WebGLRenderer): void {
     renderer.render(this.mesh, this.camera)
   }
 }