fix: clouds rename conficting attribute (#2080)

pmndrs · Aug 30, 2024 · 53a7b32 · 53a7b32
1 parent 7974930
commit 53a7b32
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/src/core/Cloud.tsx b/src/core/Cloud.tsx
@@ -112,13 +112,13 @@ export const Clouds = /* @__PURE__ */ React.forwardRef<Group, CloudsProps>(
           const opaque_fragment = parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment'
           this.onBeforeCompile = (shader) => {
             shader.vertexShader =
-              `attribute float opacity;
+              `attribute float cloudOpacity;
                varying float vOpacity;
               ` +
               shader.vertexShader.replace(
                 '#include <fog_vertex>',
                 `#include <fog_vertex>
-                 vOpacity = opacity;
+                 vOpacity = cloudOpacity;
                 `
               )
             shader.fragmentShader =
@@ -175,7 +175,7 @@ export const Clouds = /* @__PURE__ */ React.forwardRef<Group, CloudsProps>(
       }
 
       // Update instance
-      instance.current.geometry.attributes.opacity.needsUpdate = true
+      instance.current.geometry.attributes.cloudOpacity.needsUpdate = true
       instance.current.instanceMatrix.needsUpdate = true
       if (instance.current.instanceColor) instance.current.instanceColor.needsUpdate = true
     })
@@ -187,11 +187,11 @@ export const Clouds = /* @__PURE__ */ React.forwardRef<Group, CloudsProps>(
       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 })
+      setUpdateRange(instance.current.geometry.attributes.cloudOpacity as BufferAttribute, { offset: 0, count: count })
     })
 
     let imageBounds = [cloudTexture!.image.width ?? 1, cloudTexture!.image.height ?? 1]
-    let max = Math.max(imageBounds[0], imageBounds[1])
+    const max = Math.max(imageBounds[0], imageBounds[1])
     imageBounds = [imageBounds[0] / max, imageBounds[1] / max]
 
     return (
@@ -206,7 +206,11 @@ export const Clouds = /* @__PURE__ */ React.forwardRef<Group, CloudsProps>(
           >
             <instancedBufferAttribute usage={DynamicDrawUsage} attach="instanceColor" args={[colors, 3]} />
             <planeGeometry args={[...imageBounds] as any}>
-              <instancedBufferAttribute usage={DynamicDrawUsage} attach="attributes-opacity" args={[opacities, 1]} />
+              <instancedBufferAttribute
+                usage={DynamicDrawUsage}
+                attach="attributes-cloudOpacity"
+                args={[opacities, 1]}
+              />
             </planeGeometry>
             <cloudMaterial key={material.name} map={cloudTexture} transparent depthWrite={false} />
           </instancedMesh>
@@ -278,7 +282,7 @@ export const CloudInstance = /* @__PURE__ */ React.forwardRef<Group, CloudProps>
 
         const distributed = distribute?.(cloud, index)
 
-        if (distributed || segments > 1)
+        if (distributed || segments > 1) {
           cloud.position.copy(cloud.bounds).multiply(
             distributed?.point ??
               ({
@@ -287,6 +291,7 @@ export const CloudInstance = /* @__PURE__ */ React.forwardRef<Group, CloudProps>
                 z: random() * 2 - 1,
               } as Vector3)
           )
+        }
         const xDiff = Math.abs(cloud.position.x)
         const yDiff = Math.abs(cloud.position.y)
         const zDiff = Math.abs(cloud.position.z)
@@ -321,10 +326,9 @@ export const CloudInstance = /* @__PURE__ */ React.forwardRef<Group, CloudProps>
 export const Cloud = /* @__PURE__ */ React.forwardRef<Group, CloudProps>((props, fref) => {
   const parent = React.useContext(context)
   if (parent) return <CloudInstance ref={fref} {...props} />
-  else
-    return (
-      <Clouds>
-        <CloudInstance ref={fref} {...props} />
-      </Clouds>
-    )
+  return (
+    <Clouds>
+      <CloudInstance ref={fref} {...props} />
+    </Clouds>
+  )
 })