fix: set r159 update ranges (#1744)

Author: CodyJasonBennett

src/core/Cloud.tsx

@@ -16,6 +16,7 @@ import {
 import { MaterialNode, extend, applyProps, useFrame, ReactThreeFiber } from '@react-three/fiber'
 import { useTexture } from './useTexture'
 import { v4 } from 'uuid'
+import { setUpdateRange } from '../helpers/deprecated'
 
 declare global {
   namespace JSX {
@@ -175,11 +176,13 @@ export const Clouds = /* @__PURE__ */ React.forwardRef<Group, CloudsProps>(
     })
 
     React.useLayoutEffect(() => {
-      const updateRange = Math.min(limit, range !== undefined ? range : limit, clouds.current.length)
-      instance.current.count = updateRange
-      instance.current.instanceMatrix.updateRange.count = updateRange * 16
-      if (instance.current.instanceColor) instance.current.instanceColor.updateRange.count = updateRange * 3
-      ;(instance.current.geometry.attributes.opacity as BufferAttribute).updateRange.count = updateRange
+      const count = Math.min(limit, range !== undefined ? range : limit, clouds.current.length)
+      instance.current.count = count
+      setUpdateRange(instance.current.instanceMatrix, { offset: 0, count: count * 16 })
+      if (instance.current.instanceColor) {
+        setUpdateRange(instance.current.instanceColor, { offset: 0, count: count * 3 })
+      }
+      setUpdateRange(instance.current.geometry.attributes.opacity as BufferAttribute, { offset: 0, count: count })
     })
 
     let imageBounds = [cloudTexture!.image.width ?? 1, cloudTexture!.image.height ?? 1]

src/core/Instances.tsx

@@ -4,6 +4,7 @@ import { ReactThreeFiber, extend, useFrame } from '@react-three/fiber'
 import mergeRefs from 'react-merge-refs'
 import Composer from 'react-composer'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { setUpdateRange } from '../helpers/deprecated'
 
 declare global {
   namespace JSX {
@@ -129,18 +130,18 @@ export const Instances: ForwardRefComponent<InstancesProps, InstancedMesh> = /*
     parentRef.current.instanceMatrix.needsUpdate = true
   })
 
+  let iterations = 0
   let count = 0
-  let updateRange = 0
   useFrame(() => {
-    if (frames === Infinity || count < frames) {
+    if (frames === Infinity || iterations < frames) {
       parentRef.current.updateMatrix()
       parentRef.current.updateMatrixWorld()
       parentMatrix.copy(parentRef.current.matrixWorld).invert()
 
-      updateRange = Math.min(limit, range !== undefined ? range : limit, instances.length)
-      parentRef.current.count = updateRange
-      parentRef.current.instanceMatrix.updateRange.count = updateRange * 16
-      parentRef.current.instanceColor.updateRange.count = updateRange * 3
+      count = Math.min(limit, range !== undefined ? range : limit, instances.length)
+      parentRef.current.count = count
+      setUpdateRange(parentRef.current.instanceMatrix, { offset: 0, count: count * 16 })
+      setUpdateRange(parentRef.current.instanceColor, { offset: 0, count: count * 3 })
 
       for (let i = 0; i < instances.length; i++) {
         const instance = instances[i].current
@@ -153,7 +154,7 @@ export const Instances: ForwardRefComponent<InstancesProps, InstancedMesh> = /*
         instance.color.toArray(colors, i * 3)
         parentRef.current.instanceColor.needsUpdate = true
       }
-      count++
+      iterations++
     }
   })
 

src/helpers/deprecated.ts

@@ -0,0 +1,15 @@
+/**
+ * Sets `BufferAttribute.updateRange` since r159.
+ */
+export const setUpdateRange = (
+  attribute: THREE.BufferAttribute,
+  updateRange: { offset: number; count: number }
+): void => {
+  if ('updateRanges' in attribute) {
+    // r159
+    // @ts-ignore
+    attribute.updateRanges[0] = updateRange
+  } else {
+    attribute.updateRange = updateRange
+  }
+}