Skip to content

fix(MeshReflectorMaterial): avoid updates when possible #2372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(MeshReflectorMaterial): avoid updates when possible #2372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
"@storybook/theming": "^8.4.4",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"@types/three": "^0.159.0",
"@types/three": "^0.168.0",
"@typescript-eslint/eslint-plugin": "^8.15.0",
"@typescript-eslint/parser": "^8.15.0",
"@vitejs/plugin-react": "^4.3.3",
Expand All @@ -122,7 +122,7 @@
"semantic-release": "^24.2.0",
"serve": "^14.2.4",
"storybook": "^8.4.4",
"three": "^0.159.0",
"three": "^0.168.0",
"ts-node": "^10.9.2",
"typescript": "^5.6.3",
"vite": "^5.4.11",
Expand Down
15 changes: 9 additions & 6 deletions src/core/MeshReflectorMaterial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,9 @@ export const MeshReflectorMaterial: ForwardRefComponent<MeshReflectorMaterialPro
const [q] = React.useState(() => new Vector4())
const [textureMatrix] = React.useState(() => new Matrix4())
const [virtualCamera] = React.useState(() => new PerspectiveCamera())
const shouldUpdate = React.useRef(true)

const beforeRender = React.useCallback(() => {
const parent = (materialRef.current as any).parent || (materialRef.current as any)?.__r3f.parent?.object
if (!parent) return

const beforeRender = React.useCallback((parent) => {
reflectorWorldPosition.setFromMatrixPosition(parent.matrixWorld)
cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld)
rotationMatrix.extractRotation(parent.matrixWorld)
Expand Down Expand Up @@ -194,12 +192,12 @@ export const MeshReflectorMaterial: ForwardRefComponent<MeshReflectorMaterialPro

useFrame(() => {
const parent = (materialRef.current as any).parent || (materialRef.current as any)?.__r3f.parent?.object
if (!parent) return
if (!parent || !materialRef.current.visible || !parent.visible || !shouldUpdate.current) return
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used shouldUpdate to avoid unnecessary instructions in useFrame which is called unconditionally.

Three's onBeforeRender instead is called only when the renderer needs it (EG: it shouldn't be called if the mesh isn't part of the scene being rendered).


parent.visible = false
const currentXrEnabled = gl.xr.enabled
const currentShadowAutoUpdate = gl.shadowMap.autoUpdate
beforeRender()
beforeRender(parent)
gl.xr.enabled = false
gl.shadowMap.autoUpdate = false
gl.setRenderTarget(fbo1)
Expand All @@ -211,6 +209,8 @@ export const MeshReflectorMaterial: ForwardRefComponent<MeshReflectorMaterialPro
gl.shadowMap.autoUpdate = currentShadowAutoUpdate
parent.visible = true
gl.setRenderTarget(null)

shouldUpdate.current = false
})

return (
Expand All @@ -224,6 +224,9 @@ export const MeshReflectorMaterial: ForwardRefComponent<MeshReflectorMaterialPro
reflectorProps['defines-USE_DISTORTION']
}
ref={materialRef}
onBeforeRender={() => {
shouldUpdate.current = true
}}
{...reflectorProps}
{...props}
/>
Expand Down
45 changes: 27 additions & 18 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2788,7 +2788,7 @@ __metadata:
"@storybook/theming": "npm:^8.4.4"
"@types/react": "npm:^19.0.2"
"@types/react-dom": "npm:^19.0.2"
"@types/three": "npm:^0.159.0"
"@types/three": "npm:^0.168.0"
"@typescript-eslint/eslint-plugin": "npm:^8.15.0"
"@typescript-eslint/parser": "npm:^8.15.0"
"@use-gesture/react": "npm:^10.3.1"
Expand Down Expand Up @@ -2825,7 +2825,7 @@ __metadata:
stats.js: "npm:^0.17.0"
storybook: "npm:^8.4.4"
suspend-react: "npm:^0.1.3"
three: "npm:^0.159.0"
three: "npm:^0.168.0"
three-mesh-bvh: "npm:^0.8.3"
three-stdlib: "npm:^2.35.6"
troika-three-text: "npm:^0.52.0"
Expand Down Expand Up @@ -3662,7 +3662,7 @@ __metadata:
languageName: node
linkType: hard

"@tweenjs/tween.js@npm:~23.1.1":
"@tweenjs/tween.js@npm:~23.1.1, @tweenjs/tween.js@npm:~23.1.3":
version: 23.1.3
resolution: "@tweenjs/tween.js@npm:23.1.3"
checksum: 10c0/811b30f5f0e7409fb41833401c501c2d6f600eb5f43039dd9067a7f70aff6dad5f5ce1233848e13f0b33a269a160d9c133f344d986cbff4f1f6b72ddecd06c89
Expand Down Expand Up @@ -3863,28 +3863,30 @@ __metadata:
languageName: node
linkType: hard

"@types/three@npm:^0.159.0":
version: 0.159.0
resolution: "@types/three@npm:0.159.0"
"@types/three@npm:^0.163.0":
version: 0.163.0
resolution: "@types/three@npm:0.163.0"
dependencies:
"@tweenjs/tween.js": "npm:~23.1.1"
"@types/stats.js": "npm:*"
"@types/webxr": "npm:*"
fflate: "npm:~0.6.10"
fflate: "npm:~0.8.2"
meshoptimizer: "npm:~0.18.1"
checksum: 10c0/c5ec776ba213d148f0ebcce07b7a31514b8676d20e3d19458ba46d286c87c9d95224ee9225872d18c771110563c712f0237ec5d2264ad7ab7b47f2d4c1fd93a9
checksum: 10c0/715406a709bdcf567ba844c598c73dac07b679df942f85c578e82a33d00ae3ac67e8f6a3e030ec75ba0f639d33c65fb7ec6237c11a4a501c98569d99bc67a5b6
languageName: node
linkType: hard

"@types/three@npm:^0.163.0":
version: 0.163.0
resolution: "@types/three@npm:0.163.0"
"@types/three@npm:^0.168.0":
version: 0.168.0
resolution: "@types/three@npm:0.168.0"
dependencies:
"@tweenjs/tween.js": "npm:~23.1.1"
"@tweenjs/tween.js": "npm:~23.1.3"
"@types/stats.js": "npm:*"
"@types/webxr": "npm:*"
"@webgpu/types": "npm:*"
fflate: "npm:~0.8.2"
meshoptimizer: "npm:~0.18.1"
checksum: 10c0/715406a709bdcf567ba844c598c73dac07b679df942f85c578e82a33d00ae3ac67e8f6a3e030ec75ba0f639d33c65fb7ec6237c11a4a501c98569d99bc67a5b6
checksum: 10c0/59c5a8985df9f296802653c5878d9f3926257da959bca12bf255eaa19dad5bf1244a7c81634a5773de9e1729aba13b185fcb334f46cb02a7b7d47582ae41600a
languageName: node
linkType: hard

Expand Down Expand Up @@ -4116,6 +4118,13 @@ __metadata:
languageName: node
linkType: hard

"@webgpu/types@npm:*":
version: 0.1.54
resolution: "@webgpu/types@npm:0.1.54"
checksum: 10c0/79060d567e6b0030b036515f1db04d36dffb5329bdeb2b6e232d3a5bef82157f07fd1df1ec7ee7a760e891cea8da1fc3a4f99f302af66f661db2b3eb94a60a64
languageName: node
linkType: hard

"@zeit/schemas@npm:2.36.0":
version: 2.36.0
resolution: "@zeit/schemas@npm:2.36.0"
Expand Down Expand Up @@ -6604,7 +6613,7 @@ __metadata:
languageName: node
linkType: hard

"fflate@npm:^0.6.9, fflate@npm:~0.6.10":
"fflate@npm:^0.6.9":
version: 0.6.10
resolution: "fflate@npm:0.6.10"
checksum: 10c0/c452f720e4cb404b300fceb8ef0bdf345f18fbfd3f57f7d0974dce5f5e2ac0e8dd4b6ff4bb7061ae74fd919b9c707172f9dbd44d91149b1137199b8c705768f1
Expand Down Expand Up @@ -12103,10 +12112,10 @@ __metadata:
languageName: node
linkType: hard

"three@npm:^0.159.0":
version: 0.159.0
resolution: "three@npm:0.159.0"
checksum: 10c0/e5250da9e5c5dab340c8ce68aae812d00e12a238e0f6f581c5dbec399aae30f35f7eec02953147a83365f8cdf58174e39b36c8dc1c26089b141ebdd5b86b9a9b
"three@npm:^0.168.0":
version: 0.168.0
resolution: "three@npm:0.168.0"
checksum: 10c0/04aa53e64a61f31edd9631e57fe697752c9d358bd96e1344206d05e981507a6dae5c9da4e3b8d9ec7c6c8fc49732fd3f23d3675d126fe9bc1936894bbee6cc98
languageName: node
linkType: hard

Expand Down
Loading