From 9dc1b134f616b79914a585b27edc1baa29bf7bd6 Mon Sep 17 00:00:00 2001
From: Vegan Cat <mmostafavi247@gmail.com>
Date: Mon, 25 Mar 2024 01:20:50 +0330
Subject: [PATCH 1/4] Update Texture.tsx

Extend the <Texture /> Effect to support opacity
---
 src/effects/Texture.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/effects/Texture.tsx b/src/effects/Texture.tsx
index e9e0666..afa8291 100644
--- a/src/effects/Texture.tsx
+++ b/src/effects/Texture.tsx
@@ -5,10 +5,12 @@ import { TextureLoader, RepeatWrapping } from 'three'
 
 type TextureProps = ConstructorParameters<typeof TextureEffect>[0] & {
   textureSrc: string
+  /** opacity of provided texture */
+  opacity?: number
 }
 
 export const Texture = forwardRef<TextureEffect, TextureProps>(function Texture(
-  { textureSrc, texture, ...props }: TextureProps,
+  { textureSrc, texture, opacity, ...props }: TextureProps,
   ref: Ref<TextureEffect>
 ) {
   const t = useLoader(TextureLoader, textureSrc)
@@ -20,5 +22,12 @@ export const Texture = forwardRef<TextureEffect, TextureProps>(function Texture(
     t.wrapS = t.wrapT = RepeatWrapping
   }, [t])
   const effect = useMemo(() => new TextureEffect({ ...props, texture: t || texture }), [props, t, texture])
+  const effect = useMemo(() => {
+    let tEffect = new TextureEffect({ ...props, texture: t || texture });
+    if (opacity) {
+      tEffect.blendMode.opacity.value = opacity;
+    }
+    return tEffect;
+  }, [props, t, texture, opacity])
   return <primitive ref={ref} object={effect} dispose={null} />
 })

From 0c54c2f98b95f96c7db4303a21289467ae40e848 Mon Sep 17 00:00:00 2001
From: Vegan Cat <mmostafavi247@gmail.com>
Date: Mon, 25 Mar 2024 01:54:17 +0330
Subject: [PATCH 2/4] Update Texture.tsx

fix the way we check for availability of opacity.

* edge case: opacity==0 would be considered absent in previous method
---
 src/effects/Texture.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/effects/Texture.tsx b/src/effects/Texture.tsx
index afa8291..3fc674d 100644
--- a/src/effects/Texture.tsx
+++ b/src/effects/Texture.tsx
@@ -24,7 +24,7 @@ export const Texture = forwardRef<TextureEffect, TextureProps>(function Texture(
   const effect = useMemo(() => new TextureEffect({ ...props, texture: t || texture }), [props, t, texture])
   const effect = useMemo(() => {
     let tEffect = new TextureEffect({ ...props, texture: t || texture });
-    if (opacity) {
+    if (typeof opacity === "number") {
       tEffect.blendMode.opacity.value = opacity;
     }
     return tEffect;

From aadb15f6093e5379580c4c3381fdecafaae41b08 Mon Sep 17 00:00:00 2001
From: Vegan Cat <mmostafavi247@gmail.com>
Date: Mon, 25 Mar 2024 13:59:49 +0330
Subject: [PATCH 3/4] Update Texture.tsx

Update the way opacity is applied

* instead of recreating an effect every time opacity changes we feed it to the final primitive
---
 src/effects/Texture.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/effects/Texture.tsx b/src/effects/Texture.tsx
index 3fc674d..cf3c920 100644
--- a/src/effects/Texture.tsx
+++ b/src/effects/Texture.tsx
@@ -21,13 +21,8 @@ export const Texture = forwardRef<TextureEffect, TextureProps>(function Texture(
     else t.colorSpace = 'srgb'
     t.wrapS = t.wrapT = RepeatWrapping
   }, [t])
-  const effect = useMemo(() => new TextureEffect({ ...props, texture: t || texture }), [props, t, texture])
   const effect = useMemo(() => {
-    let tEffect = new TextureEffect({ ...props, texture: t || texture });
-    if (typeof opacity === "number") {
-      tEffect.blendMode.opacity.value = opacity;
-    }
-    return tEffect;
-  }, [props, t, texture, opacity])
-  return <primitive ref={ref} object={effect} dispose={null} />
+    return new TextureEffect({ ...props, texture: t || texture });
+  }, [props, t, texture])
+  return <primitive ref={ref} object={effect} blendMode-opacity-value={opacity ?? 1} dispose={null} />
 })

From 788e0dce51eef2fb10f5d725e87ab6530c15723a Mon Sep 17 00:00:00 2001
From: Cody Bennett <hi@codyb.co>
Date: Sat, 18 Jan 2025 15:23:37 -0600
Subject: [PATCH 4/4] chore: cleanup

---
 src/effects/Texture.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/effects/Texture.tsx b/src/effects/Texture.tsx
index cf3c920..d51d04d 100644
--- a/src/effects/Texture.tsx
+++ b/src/effects/Texture.tsx
@@ -10,7 +10,7 @@ type TextureProps = ConstructorParameters<typeof TextureEffect>[0] & {
 }
 
 export const Texture = forwardRef<TextureEffect, TextureProps>(function Texture(
-  { textureSrc, texture, opacity, ...props }: TextureProps,
+  { textureSrc, texture, opacity = 1, ...props }: TextureProps,
   ref: Ref<TextureEffect>
 ) {
   const t = useLoader(TextureLoader, textureSrc)
@@ -21,8 +21,6 @@ export const Texture = forwardRef<TextureEffect, TextureProps>(function Texture(
     else t.colorSpace = 'srgb'
     t.wrapS = t.wrapT = RepeatWrapping
   }, [t])
-  const effect = useMemo(() => {
-    return new TextureEffect({ ...props, texture: t || texture });
-  }, [props, t, texture])
-  return <primitive ref={ref} object={effect} blendMode-opacity-value={opacity ?? 1} dispose={null} />
+  const effect = useMemo(() => new TextureEffect({ ...props, texture: t || texture }), [props, t, texture])
+  return <primitive ref={ref} object={effect} blendMode-opacity-value={opacity} dispose={null} />
 })