From 5490f73973d9808938f49a867a388700f54b6ba4 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Fri, 10 Nov 2023 15:30:29 -0300
Subject: [PATCH 1/3] docs: add tresjs (vue) to docs

---
 package/README.md | 60 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/package/README.md b/package/README.md
index d46bae9..c5b22c0 100644
--- a/package/README.md
+++ b/package/README.md
@@ -100,6 +100,29 @@ function Cube() {
 }
 ```
 
+</details>
+<details>
+  <summary>Show Vue (Tresjs) example</summary>
+
+```vue
+<script setup>
+import { CustomShaderMaterial } from '@tresjs/cientos'
+
+</script>
+<template>
+  <TresMesh>
+    <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
+    <CustomShaderMaterial
+      :baseMaterial="THREE.MeshPhysicalMaterial"
+      :vertexShader="yourGLSLVertex"
+      :fragmentShader="yourGLSLFragment"
+      :uniforms="yourUniforms"
+      silent
+    />
+  </TresMesh>
+</template>
+```
+
 </details>
 
 ## Installation
@@ -222,6 +245,43 @@ function Cube() {
 
 </details>
 
+<details >
+  <summary>Show Vue (Tresjs) example</summary>
+
+```vue
+<script setup>
+import {ref } from 'vue'
+import { CustomShaderMaterial } from '@tresjs/cientos'
+
+const materialBase = ref()
+</script>
+
+<template>
+  <TresMesh>
+    <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
+    <CustomShaderMaterial
+        ref="materialBase"
+        :baseMaterial="THREE.MeshPhysicalMaterial"
+        :vertexShader="yourGLSLVertex"
+        :fragmentShader="yourGLSLFragment"
+        :uniforms="yourUniforms"
+        silent
+        />
+  </TresMesh>
+
+  <TresMesh v-if="materialBase">
+    <TresSphereGeometry :args="[0.5, 16, 16]" />
+    <CustomShaderMaterial
+      :base-material="new CustomShaderMaterialImpl({
+        baseMaterial: materialBase.value,
+      })"
+    />
+  </TresMesh>
+</template>
+```
+
+  </details
+
 ### Gotchas
 
 - When extending already extended material, variables, uniforms, attributes, varyings and functions are **NOT** scoped to the material they are defined in. Thus, you **WILL** get redefinition errors if you do not manually scope these identifiers.

From f6823d0f47151b238f79bc2494f0854306190343 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Fri, 17 Nov 2023 16:36:08 -0300
Subject: [PATCH 2/3] docs: add requirement for cientos

---
 package/README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/package/README.md b/package/README.md
index c5b22c0..d656a5e 100644
--- a/package/README.md
+++ b/package/README.md
@@ -104,6 +104,8 @@ function Cube() {
 <details>
   <summary>Show Vue (Tresjs) example</summary>
 
+*You need to have installed [Cientos](https://cientos.tresjs.org/) pkg to use this component.*
+
 ```vue
 <script setup>
 import { CustomShaderMaterial } from '@tresjs/cientos'
@@ -280,8 +282,8 @@ const materialBase = ref()
 </template>
 ```
 
-  </details
-
+  </details>
+ 
 ### Gotchas
 
 - When extending already extended material, variables, uniforms, attributes, varyings and functions are **NOT** scoped to the material they are defined in. Thus, you **WILL** get redefinition errors if you do not manually scope these identifiers.

From 321cded910f30b7d97d311ac7f9e83b738f08225 Mon Sep 17 00:00:00 2001
From: Faraz Shaikh <farazzshaikh@gmail.com>
Date: Sat, 18 Nov 2023 20:21:37 +0400
Subject: [PATCH 3/3] Update README.md

---
 package/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/package/README.md b/package/README.md
index d656a5e..c6cb331 100644
--- a/package/README.md
+++ b/package/README.md
@@ -322,6 +322,10 @@ CSM has a non-negligible startup cost, i.e it does take more milliseconds than a
 
   You can provide your own cache key function via the `cacheKey` prop.
 
+> Note: CSM will only rebuild if the **reference** to the above props change, for example, in React, doing `uniforms={{...}}` means that the uniforms object is unstable, i.e. it is re-created, with a **new** reference every render. Instead, condsider memoizing the uniforms prop `const uniforms = useMemo(() -> ({...}));`. The uniforms object will then have the same refrence on every render. 
+
+> If the uniforms are memoized, changing their value by doing `uniforms.foo.value = ...` will not cause CSM to rebuild, as the refrence of `uniforms` does not change.
+
 ## Development
 
 ```sh