From 97cf006641167dc10d2034d8fbb2d8bf9b65988f Mon Sep 17 00:00:00 2001 From: Bjorn Stromberg Date: Thu, 7 Mar 2024 16:11:00 +0800 Subject: [PATCH] feat: update three to r151 (#1850) --- package.json | 4 ++-- src/core/Caustics.tsx | 16 ++++++++-------- src/core/Effects.tsx | 6 +++--- src/core/Sampler.tsx | 2 +- src/core/Stats.tsx | 2 +- src/materials/BlurPass.tsx | 1 + src/web/Html.tsx | 14 ++++++++------ yarn.lock | 31 ++++++++++++++++++++++--------- 8 files changed, 46 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 2295c1a68..b6ab3971f 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "@types/jest": "^26.0.10", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", - "@types/three": "^0.149.0", + "@types/three": "^0.151.0", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "babel-eslint": "^10.1.0", @@ -135,7 +135,7 @@ "semantic-release": "^21.0.6", "serve": "^14.2.0", "storybook": "^7.0.12", - "three": "^0.149.0", + "three": "^0.151.0", "ts-node": "^10.9.1", "typescript": "^4.7.4", "vite": "^4.3.6", diff --git a/src/core/Caustics.tsx b/src/core/Caustics.tsx index e75b36c10..1c21c4a7a 100644 --- a/src/core/Caustics.tsx +++ b/src/core/Caustics.tsx @@ -81,7 +81,7 @@ declare global { } } -function createNormalMaterial(side = THREE.FrontSide) { +function createNormalMaterial(side: THREE.Side = THREE.FrontSide) { const viewMatrix = { value: new THREE.Matrix4() } return Object.assign(new THREE.MeshNormalMaterial({ side }) as CausticsProjectionMaterialType, { viewMatrix, @@ -108,7 +108,7 @@ const CausticsProjectionMaterial = /* @__PURE__ */ shaderMaterial( lightProjMatrix: /* @__PURE__ */ new THREE.Matrix4(), lightViewMatrix: /* @__PURE__ */ new THREE.Matrix4(), }, - `varying vec3 vWorldPosition; + `varying vec3 vWorldPosition; void main() { gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.); vec4 worldPosition = modelMatrix * vec4(position, 1.); @@ -116,15 +116,15 @@ const CausticsProjectionMaterial = /* @__PURE__ */ shaderMaterial( }`, `varying vec3 vWorldPosition; uniform vec3 color; - uniform sampler2D causticsTexture; - uniform sampler2D causticsTextureB; + uniform sampler2D causticsTexture; + uniform sampler2D causticsTextureB; uniform mat4 lightProjMatrix; uniform mat4 lightViewMatrix; void main() { - // Apply caustics + // Apply caustics vec4 lightSpacePos = lightProjMatrix * lightViewMatrix * vec4(vWorldPosition, 1.0); lightSpacePos.xyz /= lightSpacePos.w; - lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5; + lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5; vec3 front = texture2D(causticsTexture, lightSpacePos.xy).rgb; vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb; gl_FragColor = vec4((front + back) * color, 1.0); @@ -158,7 +158,7 @@ const CausticsMaterial = /* @__PURE__ */ shaderMaterial( vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, - /* glsl */ ` + /* glsl */ ` uniform mat4 cameraMatrixWorld; uniform mat4 cameraProjectionMatrixInv; uniform vec3 lightDir; @@ -186,7 +186,7 @@ const CausticsMaterial = /* @__PURE__ */ shaderMaterial( viewSpacePosition /= viewSpacePosition.w; vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition; return worldSpacePosition.xyz; - } + } float sdPlane( vec3 p, vec3 n, float h ) { // n must be normalized return dot(p,n) + h; diff --git a/src/core/Effects.tsx b/src/core/Effects.tsx index a22d10ba2..bc92f6865 100644 --- a/src/core/Effects.tsx +++ b/src/core/Effects.tsx @@ -1,13 +1,13 @@ import * as React from 'react' -import { RGBAFormat, HalfFloatType, WebGLRenderTarget, UnsignedByteType } from 'three' +import { RGBAFormat, HalfFloatType, WebGLRenderTarget, UnsignedByteType, TextureDataType, TextureEncoding } from 'three' import { ReactThreeFiber, extend, useThree, useFrame } from '@react-three/fiber' import { EffectComposer, RenderPass, ShaderPass, GammaCorrectionShader } from 'three-stdlib' import { ForwardRefComponent } from '../helpers/ts-utils' type Props = ReactThreeFiber.Node & { multisamping?: number - encoding?: number - type?: number + encoding?: TextureEncoding + type?: TextureDataType renderIndex?: number disableGamma?: boolean disableRenderPass?: boolean diff --git a/src/core/Sampler.tsx b/src/core/Sampler.tsx index 9cda51fc6..1f3ea3f9a 100644 --- a/src/core/Sampler.tsx +++ b/src/core/Sampler.tsx @@ -140,7 +140,7 @@ export function useSurfaceSampler( buffer.needsUpdate = true - setBuffer(buffer.clone()) + setBuffer(new InstancedBufferAttribute(buffer.array, buffer.itemSize).copy(buffer)) }, [mesh, instanceMesh, weight, count, transform]) return buffer diff --git a/src/core/Stats.tsx b/src/core/Stats.tsx index ed30fc642..f13cbfa3b 100644 --- a/src/core/Stats.tsx +++ b/src/core/Stats.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { addEffect, addAfterEffect } from '@react-three/fiber' -import StatsImpl from 'stats.js' +import * as StatsImpl from 'stats.js' import { useEffectfulState } from '../helpers/useEffectfulState' type Props = { diff --git a/src/materials/BlurPass.tsx b/src/materials/BlurPass.tsx index 50943c4e0..cc9b00b7b 100644 --- a/src/materials/BlurPass.tsx +++ b/src/materials/BlurPass.tsx @@ -55,6 +55,7 @@ export class BlurPass { this.convolutionMaterial.setTexelSize(1.0 / width, 1.0 / height) this.convolutionMaterial.setResolution(new Vector2(width, height)) this.scene = new Scene() + // @ts-expect-error fixed in r154 this.camera = new Camera() this.convolutionMaterial.uniforms.minDepthThreshold.value = minDepthThreshold this.convolutionMaterial.uniforms.maxDepthThreshold.value = maxDepthThreshold diff --git a/src/web/Html.tsx b/src/web/Html.tsx index c3bcdb252..689c8022d 100644 --- a/src/web/Html.tsx +++ b/src/web/Html.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import * as ReactDOM from 'react-dom/client' import { + Vector2, Vector3, Group, Object3D, @@ -11,15 +12,15 @@ import { Raycaster, DoubleSide, Mesh, - Material, } from 'three' import { Assign } from 'utility-types' -import { MaterialProps, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber' +import { ReactThreeFiber, useFrame, useThree } from '@react-three/fiber' import { ForwardRefComponent } from '../helpers/ts-utils' const v1 = /* @__PURE__ */ new Vector3() const v2 = /* @__PURE__ */ new Vector3() const v3 = /* @__PURE__ */ new Vector3() +const v4 = /* @__PURE__ */ new Vector2() function defaultCalculatePosition(el: Object3D, camera: Camera, size: { width: number; height: number }) { const objectPos = v1.setFromMatrixPosition(el.matrixWorld) @@ -43,7 +44,8 @@ function isObjectVisible(el: Object3D, camera: Camera, raycaster: Raycaster, occ const elPos = v1.setFromMatrixPosition(el.matrixWorld) const screenPos = elPos.clone() screenPos.project(camera) - raycaster.setFromCamera(screenPos, camera) + v4.set(screenPos.x, screenPos.y) + raycaster.setFromCamera(v4, camera) const intersects = raycaster.intersectObjects(occlude, true) if (intersects.length) { const intersectionDistance = intersects[0].distance @@ -409,15 +411,15 @@ export const Html: ForwardRefComponent = /* @__PURE__ /* This shader is from the THREE's SpriteMaterial. We need to turn the backing plane into a Sprite - (make it always face the camera) if "transfrom" - is false. + (make it always face the camera) if "transfrom" + is false. */ #include void main() { vec2 center = vec2(0., 1.); float rotation = 0.0; - + // This is somewhat arbitrary, but it seems to work well // Need to figure out how to derive this dynamically if it even matters float size = 0.03; diff --git a/yarn.lock b/yarn.lock index 99f309f82..b7c954a80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3984,12 +3984,20 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== -"@types/three@^0.149.0": - version "0.149.0" - resolved "https://registry.yarnpkg.com/@types/three/-/three-0.149.0.tgz#f48c03ffcf35b2d196f3532b51bc845e96f6090e" - integrity sha512-fgNBm9LWc65ER/W0cvoXdC0iMy7Ke9e2CONmEr6Jt8sDSY3sw4DgOubZfmdZ747dkPhbQrgRQAWwDEr2S/7IEg== +"@types/stats.js@*": + version "0.17.3" + resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.3.tgz#705446e12ce0fad618557dd88236f51148b7a935" + integrity sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ== + +"@types/three@^0.151.0": + version "0.151.0" + resolved "https://registry.yarnpkg.com/@types/three/-/three-0.151.0.tgz#ed2f5a9f6716a80ab284435aad056641b98ec695" + integrity sha512-hwOyN4szaikHsNzqbYLBfGvXi+TA/1TIKvK3ujJi+cQXzYzE5ZymzlDnOA6/cTSozY1juPFE3u5agToVQKb9TQ== dependencies: + "@types/stats.js" "*" "@types/webxr" "*" + fflate "~0.6.9" + lil-gui "~0.17.0" "@types/unist@^2.0.0": version "2.0.8" @@ -6945,7 +6953,7 @@ fetch-retry@^5.0.2: resolved "https://registry.yarnpkg.com/fetch-retry/-/fetch-retry-5.0.6.tgz#17d0bc90423405b7a88b74355bf364acd2a7fa56" integrity sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ== -fflate@^0.6.9: +fflate@^0.6.9, fflate@~0.6.9: version "0.6.10" resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43" integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg== @@ -9386,6 +9394,11 @@ libnpmversion@^4.0.2: proc-log "^3.0.0" semver "^7.3.7" +lil-gui@~0.17.0: + version "0.17.0" + resolved "https://registry.yarnpkg.com/lil-gui/-/lil-gui-0.17.0.tgz#b41ae55d0023fcd9185f7395a218db0f58189663" + integrity sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ== + lines-and-columns@^1.1.6: version "1.2.4" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" @@ -13027,10 +13040,10 @@ three-stdlib@^2.29.4: fflate "^0.6.9" potpack "^1.0.1" -three@^0.149.0: - version "0.149.0" - resolved "https://registry.yarnpkg.com/three/-/three-0.149.0.tgz#a9cf78b17d02f063ffe6dfca1e300eff2eab2927" - integrity sha512-tohpUxPDht0qExRLDTM8sjRLc5d9STURNrdnK3w9A+V4pxaTBfKWWT/IqtiLfg23Vfc3Z+ImNfvRw1/0CtxrkQ== +three@^0.151.0: + version "0.151.3" + resolved "https://registry.yarnpkg.com/three/-/three-0.151.3.tgz#0b3c7de4b070d5b66b15217f42465d67cbfa6004" + integrity sha512-+vbuqxFy8kzLeO5MgpBHUvP/EAiecaDwDuOPPDe6SbrZr96kccF0ktLngXc7xA7bzyd3N0t2f6mw3Z9y6JCojQ== through2@^0.6.3: version "0.6.5"