From 621aad9bb8ea811fd17b6a88382a924bbf8ae416 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Mon, 17 Jul 2023 19:15:44 -0400
Subject: [PATCH 01/14] feat: add reflector

---
 playground/components.d.ts                  |   1 +
 playground/src/components/ReflectorDemo.vue |  31 ++++++
 playground/src/pages/index.vue              |   2 +-
 src/core/materials/Reflector.vue            | 101 ++++++++++++++++++++
 src/core/materials/index.ts                 |   3 +-
 5 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 playground/src/components/ReflectorDemo.vue
 create mode 100644 src/core/materials/Reflector.vue

diff --git a/playground/components.d.ts b/playground/components.d.ts
index 45ebd25d..3aa330dc 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     LeviosoDemo: typeof import('./src/components/LeviosoDemo.vue')['default']
     MapControlsDemo: typeof import('./src/components/MapControlsDemo.vue')['default']
     ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
+    ReflectorDemo: typeof import('./src/components/ReflectorDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollDemo: typeof import('./src/components/ScrollDemo.vue')['default']
diff --git a/playground/src/components/ReflectorDemo.vue b/playground/src/components/ReflectorDemo.vue
new file mode 100644
index 00000000..8caa10d5
--- /dev/null
+++ b/playground/src/components/ReflectorDemo.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, MeshWobbleMaterial, Reflector, Stars } from '@tresjs/cientos'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+const gl = {
+  clearColor: '#111',
+  shadows: false,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" ref="context">
+    <TresPerspectiveCamera :position="[3, 3, 6]" :look-at="[0, 0, 0]" />
+    <Stars />
+    <TresMesh v-log>
+      <TresTorusGeometry />
+      <MeshWobbleMaterial color="orange" :speed="1" :factor="2" />
+    </TresMesh>
+    <Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" :color="'#fff'">
+      <!-- <TresSphereGeometry :args="[1, 16, 16]" /> -->
+      <TresCircleGeometry :args="[10, 10]" />
+    </Reflector>
+    <TresAmbientLight :intensity="1" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index 1e653a12..2304813f 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
 </script>
 <template>
-    <BackdropDemo/>
+    <ReflectorDemo />
 </template>
diff --git a/src/core/materials/Reflector.vue b/src/core/materials/Reflector.vue
new file mode 100644
index 00000000..6f019aa7
--- /dev/null
+++ b/src/core/materials/Reflector.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { shallowRef, watch, reactive, toRefs } from 'vue'
+import { TresColor } from '@tresjs/core'
+import { useCientos } from '../../core/useCientos'
+import { Reflector } from 'three/addons/objects/Reflector'
+import { PlaneGeometry } from 'three'
+
+export interface ReflectorProps {
+  /**
+   * The color of the reflector.
+   *
+   * @default '#000000'
+   * @type {TresColor}
+   * @memberof ReflectorProps
+   *
+   */
+  color?: TresColor
+  /**
+   * The textureWidth of the internal WebGLRenderTarget.
+   *
+   * @default window.innerWidth
+   * @type {number}
+   * @memberof ReflectorProps
+   *
+   */
+  textureWidth?: number
+  /**
+   * The textureHeight of the internal WebGLRenderTarget.
+   *
+   * @default window.innerHeight
+   * @type {number}
+   * @memberof ReflectorProps
+   *
+   */
+  textureHeight?: number
+  /**
+   * The clipBias.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof ReflectorProps
+   *
+   */
+  clipBias?: number
+  /**
+   * The number of samples to render.
+   *
+   * @default 4
+   * @type {number}
+   * @memberof ReflectorProps
+   *
+   */
+  multisample?: number
+  /**
+   * The number of samples to render.
+   *
+   * @default Reflector.ReflectorShader
+   * @type {string}
+   * @memberof ReflectorProps
+   *
+   */
+  shader?: string
+}
+
+const props = withDefaults(defineProps<ReflectorProps>(), {
+  color: '#000000',
+  textureWidth: window.innerWidth,
+  textureHeight: window.innerHeight,
+  clipBias: 0,
+  multisample: 4,
+  shader: Reflector.ReflectorShader,
+})
+
+const reflector = shallowRef<Reflector>()
+
+const { extend } = useCientos()
+
+extend({ Reflector })
+
+const { color, textureWidth, textureHeight, clipBias, multisample, shader } = toRefs(props)
+
+const options = reactive({
+  color: color.value,
+  textureWidth: textureWidth.value,
+  textureHeight: textureHeight.value,
+  clipBias: clipBias.value,
+  multisample: multisample.value,
+  shader: shader.value,
+})
+watch(clipBias, value => {
+    options.clipBias = value
+})
+</script>
+
+<template>
+  <TresReflector ref="reflector" :args="[new PlaneGeometry(), options]">
+    <slot>
+      <TresPlaneGeometry />
+    </slot>
+  </TresReflector>
+</template>
diff --git a/src/core/materials/index.ts b/src/core/materials/index.ts
index 3d35419e..d544ba0c 100644
--- a/src/core/materials/index.ts
+++ b/src/core/materials/index.ts
@@ -1,3 +1,4 @@
 import MeshWobbleMaterial from './meshWobbleMaterial/index.vue'
+import Reflector from './Reflector.vue'
 
-export { MeshWobbleMaterial }
+export { MeshWobbleMaterial, Reflector }

From 307a6c427635ee51eea7762b4c3528b7f9038d40 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Tue, 18 Jul 2023 11:30:15 -0400
Subject: [PATCH 02/14] docs: add docs for Reflector

---
 docs/.vitepress/config.ts         |   5 +-
 docs/guide/materials/reflector.md | 117 ++++++++++++++++++++++++++++++
 2 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 docs/guide/materials/reflector.md

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b2d64e16..7c2930d5 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -63,7 +63,10 @@ export default defineConfig({
       {
         text: 'Materials',
         collapsed: true,
-        items: [{ text: 'WobbleMaterial', link: '/guide/materials/wobble-material' }],
+        items: [
+          { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
+          { text: 'Reflector', link: '/guide/materials/reflector' }
+        ],
       },
       {
         text: 'Shapes',
diff --git a/docs/guide/materials/reflector.md b/docs/guide/materials/reflector.md
new file mode 100644
index 00000000..09375f58
--- /dev/null
+++ b/docs/guide/materials/reflector.md
@@ -0,0 +1,117 @@
+# Reflector
+
+The `cientos` package provides an abstraction of the Reflector class, which creates a reflector material in real time of your scene `<Reflector >` component that makes a geometry as an argument to create a mirror. This Mesh extends from `Mesh` so all the default props can be passed as well:
+
+- `color` The base color that's combine with the mirror effect
+- `textureWidth` the width of the texture to render on the mirror
+- `textureHeight` the height of the texture to render on the mirror
+- `clipBias` to use the clipBias property
+- `multisample` how many samplers will be render (default is 4)
+
+## Usage
+
+```html
+<Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" color="#fff">
+  <TresCircleGeometry :args="[10, 10]" />
+</Reflector>
+```
+
+## Custom mirror effect
+
+For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:
+
+```vue{3}
+<script setup lang="ts" >
+import vertexShader from "MyCustomvertexShader.glsl"
+
+const customShader = {
+  vertexShader
+}
+<script>
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :position="[0, 0, 3]" />
+    ...
+    <Reflector :rotation="[-Math.PI * 0.5, 0, 0]" 
+    :position-y="-2" 
+    color="#fff"
+    :shader="customShader"
+    >
+      <TresCircleGeometry :args="[10, 10]" />
+    </Reflector>
+...
+  </TresCanvas>
+</template>
+```
+
+## The Reflector shader use the following object:
+
+You can extend, modify or just play with them
+
+### Uniforms
+
+```js
+	uniforms: {
+		color: {
+			value: null
+		},
+		tDiffuse: {
+			value: null
+		},
+		textureMatrix: {
+			value: null
+		}
+	},
+```
+### VertexShader
+```glsl
+	vertexShader: /* glsl */`
+		uniform mat4 textureMatrix;
+		varying vec4 vUv;
+
+		#include <common>
+		#include <logdepthbuf_pars_vertex>
+
+		void main() {
+
+			vUv = textureMatrix * vec4( position, 1.0 );
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+			#include <logdepthbuf_vertex>
+
+		}`
+```
+### FragmentShader
+```glsl
+	fragmentShader: /* glsl */`
+		uniform vec3 color;
+		uniform sampler2D tDiffuse;
+		varying vec4 vUv;
+
+		#include <logdepthbuf_pars_fragment>
+
+		float blendOverlay( float base, float blend ) {
+
+			return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
+
+		}
+
+		vec3 blendOverlay( vec3 base, vec3 blend ) {
+
+			return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
+
+		}
+
+		void main() {
+
+			#include <logdepthbuf_fragment>
+
+			vec4 base = texture2DProj( tDiffuse, vUv );
+			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
+
+			#include <tonemapping_fragment>
+			#include <colorspace_fragment>
+
+		}`
+```

From 7b0c86c57b0ca4ae66e73525ab491dcfe0221d8d Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Tue, 18 Jul 2023 11:31:12 -0400
Subject: [PATCH 03/14] chore: details on component

---
 playground/src/components/ReflectorDemo.vue | 58 +++++++++++++++++++--
 src/core/materials/Reflector.vue            | 23 ++++----
 2 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/playground/src/components/ReflectorDemo.vue b/playground/src/components/ReflectorDemo.vue
index 8caa10d5..595d6ab5 100644
--- a/playground/src/components/ReflectorDemo.vue
+++ b/playground/src/components/ReflectorDemo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, MeshWobbleMaterial, Reflector, Stars } from '@tresjs/cientos'
+import { OrbitControls, MeshWobbleMaterial, Reflector, Stars, useTweakPane } from '@tresjs/cientos'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
 const gl = {
@@ -11,18 +12,67 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
+
+const customShader = {
+  name: 'customShader',
+
+  fragmentShader: /* glsl */ `
+		uniform vec3 color;
+		uniform sampler2D tDiffuse;
+		varying vec4 vUv;
+
+		#include <logdepthbuf_pars_fragment>
+
+		float blendOverlay( float base, float blend ) {
+
+			return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
+
+		}
+
+		vec3 blendOverlay( vec3 base, vec3 blend ) {
+
+			return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
+
+		}
+
+		void main() {
+
+			#include <logdepthbuf_fragment>
+
+			vec4 base = texture2DProj( tDiffuse, vUv );
+			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
+
+			#include <tonemapping_fragment>
+			#include <colorspace_fragment>
+
+		}`,
+}
+
+const options = reactive({
+  color: '#f7f7f7',
+  clipBias: 0.003,
+  textureWidth: 1024,
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(options, 'color', { label: 'MirrorColor' })
+
 </script>
 
 <template>
   <TresCanvas v-bind="gl" ref="context">
     <TresPerspectiveCamera :position="[3, 3, 6]" :look-at="[0, 0, 0]" />
     <Stars />
-    <TresMesh v-log>
+    <TresMesh >
       <TresTorusGeometry />
       <MeshWobbleMaterial color="orange" :speed="1" :factor="2" />
     </TresMesh>
-    <Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" :color="'#fff'">
-      <!-- <TresSphereGeometry :args="[1, 16, 16]" /> -->
+    <Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" :color="options.color" :shader="customShader"
+    :clip-bias="options.clipBias"
+    :texture-width="options.textureWidth"
+    >
+      <!-- <TresBoxGeometry :args="[10, 10]" /> -->
       <TresCircleGeometry :args="[10, 10]" />
     </Reflector>
     <TresAmbientLight :intensity="1" />
diff --git a/src/core/materials/Reflector.vue b/src/core/materials/Reflector.vue
index 6f019aa7..b7d5693c 100644
--- a/src/core/materials/Reflector.vue
+++ b/src/core/materials/Reflector.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { shallowRef, watch, reactive, toRefs } from 'vue'
+import { shallowRef, reactive, toRefs } from 'vue'
 import { TresColor } from '@tresjs/core'
 import { useCientos } from '../../core/useCientos'
 import { Reflector } from 'three/addons/objects/Reflector'
@@ -55,23 +55,23 @@ export interface ReflectorProps {
    * The number of samples to render.
    *
    * @default Reflector.ReflectorShader
-   * @type {string}
+   * @type {object}
    * @memberof ReflectorProps
    *
    */
-  shader?: string
+  shader?: object
 }
 
 const props = withDefaults(defineProps<ReflectorProps>(), {
-  color: '#000000',
-  textureWidth: window.innerWidth,
-  textureHeight: window.innerHeight,
+  color: '#333',
+  textureWidth: 512,
+  textureHeight: 512,
   clipBias: 0,
   multisample: 4,
   shader: Reflector.ReflectorShader,
 })
 
-const reflector = shallowRef<Reflector>()
+const reflectorRef = shallowRef<Reflector>()
 
 const { extend } = useCientos()
 
@@ -85,15 +85,16 @@ const options = reactive({
   textureHeight: textureHeight.value,
   clipBias: clipBias.value,
   multisample: multisample.value,
-  shader: shader.value,
+  shader: {...Reflector.ReflectorShader,...shader.value },
 })
-watch(clipBias, value => {
-    options.clipBias = value
+
+defineExpose({
+  value: reflectorRef,
 })
 </script>
 
 <template>
-  <TresReflector ref="reflector" :args="[new PlaneGeometry(), options]">
+  <TresReflector ref="reflectorRef" :args="[new PlaneGeometry(), options]" :material-uniforms-color-value="color">
     <slot>
       <TresPlaneGeometry />
     </slot>

From 7da001dd2fc05cf9aec4d810a65d013a9fb88416 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Sat, 22 Jul 2023 14:20:48 -0400
Subject: [PATCH 04/14] chore: update reflector position, no reactive props yet

---
 docs/.vitepress/config.ts                     |  2 +-
 .../{materials => abstractions}/reflector.md  | 34 +++++++++++++------
 playground/src/components/ReflectorDemo.vue   |  3 +-
 .../{materials => abstractions}/Reflector.vue | 10 +++++-
 src/core/abstractions/index.ts                |  4 +--
 src/core/materials/index.ts                   |  3 +-
 6 files changed, 39 insertions(+), 17 deletions(-)
 rename docs/guide/{materials => abstractions}/reflector.md (68%)
 rename src/core/{materials => abstractions}/Reflector.vue (87%)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 7c2930d5..e667fd13 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -37,6 +37,7 @@ export default defineConfig({
           { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
           { text: 'Contact Shadows', link: '/guide/abstractions/contact-shadows' },
           { text: 'Precipitation', link: '/guide/abstractions/precipitation' },
+          { text: 'Reflector', link: '/guide/abstractions/reflector' }
         ],
       },
       {
@@ -65,7 +66,6 @@ export default defineConfig({
         collapsed: true,
         items: [
           { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
-          { text: 'Reflector', link: '/guide/materials/reflector' }
         ],
       },
       {
diff --git a/docs/guide/materials/reflector.md b/docs/guide/abstractions/reflector.md
similarity index 68%
rename from docs/guide/materials/reflector.md
rename to docs/guide/abstractions/reflector.md
index 09375f58..d5c0a6f1 100644
--- a/docs/guide/materials/reflector.md
+++ b/docs/guide/abstractions/reflector.md
@@ -2,16 +2,10 @@
 
 The `cientos` package provides an abstraction of the Reflector class, which creates a reflector material in real time of your scene `<Reflector >` component that makes a geometry as an argument to create a mirror. This Mesh extends from `Mesh` so all the default props can be passed as well:
 
-- `color` The base color that's combine with the mirror effect
-- `textureWidth` the width of the texture to render on the mirror
-- `textureHeight` the height of the texture to render on the mirror
-- `clipBias` to use the clipBias property
-- `multisample` how many samplers will be render (default is 4)
-
 ## Usage
 
 ```html
-<Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" color="#fff">
+<Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" color="#F7F7F7">
   <TresCircleGeometry :args="[10, 10]" />
 </Reflector>
 ```
@@ -32,8 +26,8 @@ const customShader = {
   <TresCanvas shadows alpha>
     <TresPerspectiveCamera :position="[0, 0, 3]" />
     ...
-    <Reflector :rotation="[-Math.PI * 0.5, 0, 0]" 
-    :position-y="-2" 
+    <Reflector :rotation="[-Math.PI * 0.5, 0, 0]"
+    :position-y="-2"
     color="#fff"
     :shader="customShader"
     >
@@ -44,10 +38,26 @@ const customShader = {
 </template>
 ```
 
-## The Reflector shader use the following object:
+| Prop              | Description                                          | Default                   |
+| :---------------- | :--------------------------------------------------- | ------------------------- |
+| **color**         | The base color that's combine with the mirror effect | '#000000'                 |
+| **textureWidth**  | the width of the texture to render on the mirror     | 512                       |
+| **textureHeight** | the height of the texture to render on the mirror    | 512                       |
+| **clipBias**      | to use the clipBias property                         | 0                         |
+| **multisample**   | how many samplers will be render                     | 4                         |
+| **shader**        | The texture of the smoke.                            | Reflector.ReflectorShader |
+
+
+## The Reflector shader use the following configuration by default:
 
 You can extend, modify or just play with them
 
+### name
+
+```js
+	name:"ReflectorShader"
+```
+
 ### Uniforms
 
 ```js
@@ -63,7 +73,9 @@ You can extend, modify or just play with them
 		}
 	},
 ```
+
 ### VertexShader
+
 ```glsl
 	vertexShader: /* glsl */`
 		uniform mat4 textureMatrix;
@@ -82,7 +94,9 @@ You can extend, modify or just play with them
 
 		}`
 ```
+
 ### FragmentShader
+
 ```glsl
 	fragmentShader: /* glsl */`
 		uniform vec3 color;
diff --git a/playground/src/components/ReflectorDemo.vue b/playground/src/components/ReflectorDemo.vue
index 595d6ab5..49a2e30a 100644
--- a/playground/src/components/ReflectorDemo.vue
+++ b/playground/src/components/ReflectorDemo.vue
@@ -50,13 +50,14 @@ const customShader = {
 
 const options = reactive({
   color: '#f7f7f7',
-  clipBias: 0.003,
+  clipBias: 1,
   textureWidth: 1024,
 })
 
 const { pane } = useTweakPane()
 
 pane.addInput(options, 'color', { label: 'MirrorColor' })
+pane.addInput(options, 'clipBias', { label: 'clipBias', min: 0, max:1, step: 0.001 })
 
 </script>
 
diff --git a/src/core/materials/Reflector.vue b/src/core/abstractions/Reflector.vue
similarity index 87%
rename from src/core/materials/Reflector.vue
rename to src/core/abstractions/Reflector.vue
index b7d5693c..7db8c9b4 100644
--- a/src/core/materials/Reflector.vue
+++ b/src/core/abstractions/Reflector.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { shallowRef, reactive, toRefs } from 'vue'
+import { shallowRef, reactive, toRefs, watchEffect } from 'vue'
 import { TresColor } from '@tresjs/core'
 import { useCientos } from '../../core/useCientos'
 import { Reflector } from 'three/addons/objects/Reflector'
@@ -88,6 +88,14 @@ const options = reactive({
   shader: {...Reflector.ReflectorShader,...shader.value },
 })
 
+watchEffect(() =>{
+  if(!reflectorRef?.value) return
+  if (clipBias.value) options.clipBias = clipBias.value
+  const currentGeo =  reflectorRef.value.geometry
+  reflectorRef.value.dispose()
+  reflectorRef.value = new Reflector(currentGeo, options)
+})
+
 defineExpose({
   value: reflectorRef,
 })
diff --git a/src/core/abstractions/index.ts b/src/core/abstractions/index.ts
index 699f267d..f0d388fe 100644
--- a/src/core/abstractions/index.ts
+++ b/src/core/abstractions/index.ts
@@ -1,12 +1,12 @@
 import Text3D from './Text3D.vue'
 import { useAnimations } from './useAnimations'
 import { Environment } from './useEnvironment/component'
-// import { MouseParallax } from './mouseParallax'
 import Stars from './Stars.vue'
 import Precipitation from './Precipitation.vue'
 import Smoke from './Smoke.vue'
 import Levioso from './Levioso.vue'
 import ContactShadows from './ContactShadows.vue'
+import Reflector from './Reflector.vue'
 
 export * from './mouseParallax'
 export * from './useEnvironment'
@@ -14,10 +14,10 @@ export {
   Text3D,
   useAnimations,
   Environment,
-  // MouseParallax,
   Stars,
   Smoke,
   Levioso,
   ContactShadows,
   Precipitation,
+  Reflector
 }
diff --git a/src/core/materials/index.ts b/src/core/materials/index.ts
index d544ba0c..3d35419e 100644
--- a/src/core/materials/index.ts
+++ b/src/core/materials/index.ts
@@ -1,4 +1,3 @@
 import MeshWobbleMaterial from './meshWobbleMaterial/index.vue'
-import Reflector from './Reflector.vue'
 
-export { MeshWobbleMaterial, Reflector }
+export { MeshWobbleMaterial }

From 47ba9054299b5715f4c0823dffbe7475ab8438c1 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Tue, 5 Sep 2023 16:05:26 -0300
Subject: [PATCH 05/14] chore: broke component

---
 .../{components => pages}/ReflectorDemo.vue   | 61 ++++++++++++++-----
 playground/src/router.ts                      |  5 ++
 src/core/abstractions/Reflector.vue           | 31 ++++++----
 3 files changed, 71 insertions(+), 26 deletions(-)
 rename playground/src/{components => pages}/ReflectorDemo.vue (52%)

diff --git a/playground/src/components/ReflectorDemo.vue b/playground/src/pages/ReflectorDemo.vue
similarity index 52%
rename from playground/src/components/ReflectorDemo.vue
rename to playground/src/pages/ReflectorDemo.vue
index 49a2e30a..1ff97efc 100644
--- a/playground/src/components/ReflectorDemo.vue
+++ b/playground/src/pages/ReflectorDemo.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { shallowRef, reactive, watch } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, MeshWobbleMaterial, Reflector, Stars, useTweakPane } from '@tresjs/cientos'
+import {
+  OrbitControls,
+  MeshWobbleMaterial,
+  Reflector,
+  Stars,
+  useTweakPane,
+} from '@tresjs/cientos'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
 const gl = {
@@ -13,6 +19,11 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
+const reflectorRef = shallowRef()
+
+watch(reflectorRef, (value) => {
+  console.log(value)
+})
 const customShader = {
   name: 'customShader',
 
@@ -31,7 +42,9 @@ const customShader = {
 
 		vec3 blendOverlay( vec3 base, vec3 blend ) {
 
-			return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
+			return vec3(
+                blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) 
+                );
 
 		}
 
@@ -54,28 +67,46 @@ const options = reactive({
   textureWidth: 1024,
 })
 
-const { pane } = useTweakPane()
-
-pane.addInput(options, 'color', { label: 'MirrorColor' })
-pane.addInput(options, 'clipBias', { label: 'clipBias', min: 0, max:1, step: 0.001 })
+// const { pane } = useTweakPane()
 
+// pane.addInput(options, 'color', { label: 'MirrorColor' })
+// pane.addInput(options, 'clipBias', {
+//   label: 'clipBias',
+//   min: 0,
+//   max: 1,
+//   step: 0.001,
+// })
 </script>
 
 <template>
-  <TresCanvas v-bind="gl" ref="context">
-    <TresPerspectiveCamera :position="[3, 3, 6]" :look-at="[0, 0, 0]" />
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[3, 3, 6]"
+      :look-at="[0, 0, 0]"
+    />
     <Stars />
-    <TresMesh >
+    <TresMesh>
       <TresTorusGeometry />
-      <MeshWobbleMaterial color="orange" :speed="1" :factor="2" />
+      <MeshWobbleMaterial
+        color="orange"
+        :speed="1"
+        :factor="2"
+      />
     </TresMesh>
-    <Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" :color="options.color" :shader="customShader"
-    :clip-bias="options.clipBias"
-    :texture-width="options.textureWidth"
+    <Reflector
+      ref="reflectorRef"
+      :rotation="[-Math.PI * 0.5, 0, 0]"
+      :position="[0, -2, 0]"
+      :color="options.color"
+      :shader="customShader"
+      :clip-bias="options.clipBias"
+      :texture-width="options.textureWidth"
     >
-      <!-- <TresBoxGeometry :args="[10, 10]" /> -->
       <TresCircleGeometry :args="[10, 10]" />
     </Reflector>
+    <!-- <TresBoxGeometry :args="[10, 10]" /> -->
     <TresAmbientLight :intensity="1" />
     <OrbitControls />
   </TresCanvas>
diff --git a/playground/src/router.ts b/playground/src/router.ts
index 23d98c51..3e8814ae 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -51,6 +51,11 @@ const routes = [
     name: 'Stars',
     component: () => import('./pages/StarsDemo.vue'),
   },
+  {
+    path: '/abstractions/reflector',
+    name: 'Stars',
+    component: () => import('./pages/ReflectorDemo.vue'),
+  },
   {
     path: '/abstractions/text-3d',
     name: 'Text3D',
diff --git a/src/core/abstractions/Reflector.vue b/src/core/abstractions/Reflector.vue
index fb253ed9..9535e29f 100644
--- a/src/core/abstractions/Reflector.vue
+++ b/src/core/abstractions/Reflector.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { shallowRef, reactive, toRefs, watchEffect } from 'vue'
-import { TresColor } from '@tresjs/core'
+import { shallowRef, reactive, toRefs, watchEffect, useSlots } from 'vue'
 import { useTresContext } from '@tresjs/core'
+import type { TresColor } from '@tresjs/core'
 import { Reflector } from 'three/addons/objects/Reflector'
 import { PlaneGeometry } from 'three'
 
@@ -71,13 +71,18 @@ const props = withDefaults(defineProps<ReflectorProps>(), {
   shader: Reflector.ReflectorShader,
 })
 
-const reflectorRef = shallowRef<Reflector>()
-
 const { extend } = useTresContext()
 
+const reflectorRef = shallowRef<Reflector>()
+
 extend({ Reflector })
 
-const { color, textureWidth, textureHeight, clipBias, multisample, shader } = toRefs(props)
+const slots = useSlots()
+const currentGeo = slots.default()[0]
+console.log('jaime ~ slots:', currentGeo)
+
+const { color, textureWidth, textureHeight, clipBias, multisample, shader }
+  = toRefs(props)
 
 const options = reactive({
   color: color.value,
@@ -85,24 +90,28 @@ const options = reactive({
   textureHeight: textureHeight.value,
   clipBias: clipBias.value,
   multisample: multisample.value,
-  shader: {...Reflector.ReflectorShader,...shader.value },
+  shader: { ...Reflector.ReflectorShader, ...shader.value },
 })
 
-watchEffect(() =>{
-  if(!reflectorRef?.value) return
+watchEffect(() => {
+  if (!reflectorRef?.value) return
   if (clipBias.value) options.clipBias = clipBias.value
-  const currentGeo =  reflectorRef.value.geometry
+  const currentGeo = reflectorRef.value.geometry
   reflectorRef.value.dispose()
   reflectorRef.value = new Reflector(currentGeo, options)
 })
 
 defineExpose({
-  value: reflectorRef,
+  reflectorRef,
 })
 </script>
 
 <template>
-  <TresReflector ref="reflectorRef" :args="[new PlaneGeometry(), options]" :material-uniforms-color-value="color">
+  <TresReflector
+    ref="reflectorRef"
+    :args="[new PlaneGeometry(), options]"
+    :material-uniforms-color-value="color"
+  >
     <slot>
       <TresPlaneGeometry />
     </slot>

From 8fef75e91bc66c0296b40f4ddf38157cb12bce0a Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Sun, 24 Sep 2023 15:56:00 -0300
Subject: [PATCH 06/14] chore: fix routes

---
 .../ReflectorMeshDemo.vue}                                   | 0
 playground/src/router/routes/abstractions.ts                 | 5 +++++
 2 files changed, 5 insertions(+)
 rename playground/src/pages/{ReflectorDemo.vue => abstractions/ReflectorMeshDemo.vue} (100%)

diff --git a/playground/src/pages/ReflectorDemo.vue b/playground/src/pages/abstractions/ReflectorMeshDemo.vue
similarity index 100%
rename from playground/src/pages/ReflectorDemo.vue
rename to playground/src/pages/abstractions/ReflectorMeshDemo.vue
diff --git a/playground/src/router/routes/abstractions.ts b/playground/src/router/routes/abstractions.ts
index cb1225d0..0f92a7f5 100644
--- a/playground/src/router/routes/abstractions.ts
+++ b/playground/src/router/routes/abstractions.ts
@@ -19,4 +19,9 @@ export const abstractionsRoutes = [
     name: 'Lensflare',
     component: () => import('../../pages/abstractions/LensflareDemo.vue'),
   },
+  {
+    path: '/abstractions/reflector-mesh',
+    name: 'ReflectorMeshDemo',
+    component: () => import('../../pages/abstractions/ReflectorMeshDemo.vue'),
+  },
 ]
\ No newline at end of file

From 2552649f35b0c63be31485e833a89a09ec11240e Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Tue, 26 Sep 2023 09:11:46 -0300
Subject: [PATCH 07/14] chore: internal refactor

---
 .../pages/abstractions/ReflectorMeshDemo.vue  | 67 ++++++++-----------
 src/core/abstractions/Reflector.vue           | 38 ++++-------
 src/core/abstractions/index.ts                |  2 -
 3 files changed, 42 insertions(+), 65 deletions(-)

diff --git a/playground/src/pages/abstractions/ReflectorMeshDemo.vue b/playground/src/pages/abstractions/ReflectorMeshDemo.vue
index 1ff97efc..ea5bfb56 100644
--- a/playground/src/pages/abstractions/ReflectorMeshDemo.vue
+++ b/playground/src/pages/abstractions/ReflectorMeshDemo.vue
@@ -24,58 +24,49 @@ const reflectorRef = shallowRef()
 watch(reflectorRef, (value) => {
   console.log(value)
 })
-const customShader = {
-  name: 'customShader',
+// const customShader = {
+//   name: 'customShader',
 
-  fragmentShader: /* glsl */ `
-		uniform vec3 color;
-		uniform sampler2D tDiffuse;
-		varying vec4 vUv;
+//   fragmentShader: /* glsl */ `
+// 		uniform vec3 color;
+// 		uniform sampler2D tDiffuse;
+// 		varying vec4 vUv;
 
-		#include <logdepthbuf_pars_fragment>
+// 		#include <logdepthbuf_pars_fragment>
 
-		float blendOverlay( float base, float blend ) {
+// 		float blendOverlay( float base, float blend ) {
 
-			return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
+// 			return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
 
-		}
+// 		}
 
-		vec3 blendOverlay( vec3 base, vec3 blend ) {
+// 		vec3 blendOverlay( vec3 base, vec3 blend ) {
 
-			return vec3(
-                blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) 
-                );
+// 			return vec3(
+//                 blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) 
+//                 );
 
-		}
+// 		}
 
-		void main() {
+// 		void main() {
 
-			#include <logdepthbuf_fragment>
+// 			#include <logdepthbuf_fragment>
 
-			vec4 base = texture2DProj( tDiffuse, vUv );
-			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
+// 			vec4 base = texture2DProj( tDiffuse, vUv );
+// 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
-			#include <tonemapping_fragment>
-			#include <colorspace_fragment>
+// 			#include <tonemapping_fragment>
+// 			#include <colorspace_fragment>
 
-		}`,
-}
+// 		}`,
+// }
 
-const options = reactive({
+const options = {
   color: '#f7f7f7',
-  clipBias: 1,
+  clipBias: 0,
   textureWidth: 1024,
-})
-
-// const { pane } = useTweakPane()
-
-// pane.addInput(options, 'color', { label: 'MirrorColor' })
-// pane.addInput(options, 'clipBias', {
-//   label: 'clipBias',
-//   min: 0,
-//   max: 1,
-//   step: 0.001,
-// })
+  textureHeight: 1024,
+}
 </script>
 
 <template>
@@ -100,11 +91,11 @@ const options = reactive({
       :rotation="[-Math.PI * 0.5, 0, 0]"
       :position="[0, -2, 0]"
       :color="options.color"
-      :shader="customShader"
       :clip-bias="options.clipBias"
       :texture-width="options.textureWidth"
+      :texture-height="options.textureHeight"
     >
-      <TresCircleGeometry :args="[10, 10]" />
+      <TresBoxGeometry :args="[10, 10, 1]" />
     </Reflector>
     <!-- <TresBoxGeometry :args="[10, 10]" /> -->
     <TresAmbientLight :intensity="1" />
diff --git a/src/core/abstractions/Reflector.vue b/src/core/abstractions/Reflector.vue
index 9535e29f..41772ca5 100644
--- a/src/core/abstractions/Reflector.vue
+++ b/src/core/abstractions/Reflector.vue
@@ -1,11 +1,20 @@
 <script lang="ts" setup>
-import { shallowRef, reactive, toRefs, watchEffect, useSlots } from 'vue'
+import { shallowRef, toRefs } from 'vue'
 import { useTresContext } from '@tresjs/core'
 import type { TresColor } from '@tresjs/core'
+import type { Geometry } from 'three'
 import { Reflector } from 'three/addons/objects/Reflector'
-import { PlaneGeometry } from 'three'
 
 export interface ReflectorProps {
+  /**
+   * The color of the reflector.
+   *
+   * @default
+   * @type {Geometry}
+   * @memberof ReflectorProps
+   *
+   */
+  geometry?: Geometry
   /**
    * The color of the reflector.
    *
@@ -77,30 +86,9 @@ const reflectorRef = shallowRef<Reflector>()
 
 extend({ Reflector })
 
-const slots = useSlots()
-const currentGeo = slots.default()[0]
-console.log('jaime ~ slots:', currentGeo)
-
-const { color, textureWidth, textureHeight, clipBias, multisample, shader }
+const { geometry, color, textureWidth, textureHeight, clipBias, multisample, shader }
   = toRefs(props)
 
-const options = reactive({
-  color: color.value,
-  textureWidth: textureWidth.value,
-  textureHeight: textureHeight.value,
-  clipBias: clipBias.value,
-  multisample: multisample.value,
-  shader: { ...Reflector.ReflectorShader, ...shader.value },
-})
-
-watchEffect(() => {
-  if (!reflectorRef?.value) return
-  if (clipBias.value) options.clipBias = clipBias.value
-  const currentGeo = reflectorRef.value.geometry
-  reflectorRef.value.dispose()
-  reflectorRef.value = new Reflector(currentGeo, options)
-})
-
 defineExpose({
   reflectorRef,
 })
@@ -109,7 +97,7 @@ defineExpose({
 <template>
   <TresReflector
     ref="reflectorRef"
-    :args="[new PlaneGeometry(), options]"
+    :args="[geometry, { textureWidth, textureHeight, clipBias, multisample, shader }]"
     :material-uniforms-color-value="color"
   >
     <slot>
diff --git a/src/core/abstractions/index.ts b/src/core/abstractions/index.ts
index 85e94e4e..ecf205ed 100644
--- a/src/core/abstractions/index.ts
+++ b/src/core/abstractions/index.ts
@@ -1,7 +1,6 @@
 import Text3D from './Text3D.vue'
 import { useAnimations } from './useAnimations'
 import Levioso from './Levioso.vue'
-import ContactShadows from './ContactShadows.vue'
 import Reflector from './Reflector.vue'
 import MouseParallax from './MouseParallax.vue'
 import Lensflare from './Lensflare/component.vue'
@@ -12,7 +11,6 @@ export {
   useAnimations,
   MouseParallax,
   Levioso,
-  ContactShadows,
   Reflector,
   Lensflare,
 }

From 0897b690b09c55568d30e28d3f9058f5f2f66fb6 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Tue, 26 Sep 2023 11:37:46 -0300
Subject: [PATCH 08/14] docs: update docs, props no reactive

---
 docs/components.d.ts                 |  6 ------
 docs/guide/abstractions/reflector.md | 30 +++++++++++++++-------------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/docs/components.d.ts b/docs/components.d.ts
index e506ec20..eeb190ad 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -10,14 +10,10 @@ declare module 'vue' {
     BackdropDemo: typeof import('./.vitepress/theme/components/BackdropDemo.vue')['default']
     CameraControlsDemo: typeof import('./.vitepress/theme/components/CameraControlsDemo.vue')['default']
     ContactShadowDemo: typeof import('./.vitepress/theme/components/ContactShadowDemo.vue')['default']
-    copy: typeof import('./.vitepress/theme/components/GLTFModelDemo copy.vue')['default']
-    DocDemo: typeof import('./.vitepress/theme/components/DocDemo.vue')['default']
     DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
     FBXModelDemo: typeof import('./.vitepress/theme/components/FBXModelDemo.vue')['default']
     Feather: typeof import('./.vitepress/theme/components/Feather.vue')['default']
     GlassMaterialDemo: typeof import('./.vitepress/theme/components/GlassMaterialDemo.vue')['default']
-    GltfDemo: typeof import('./.vitepress/theme/components/GltfDemo.vue')['default']
-    GltfModelDemo: typeof import('./.vitepress/theme/components/GltfModelDemo.vue')['default']
     GLTFModelDemo: typeof import('./.vitepress/theme/components/GLTFModelDemo.vue')['default']
     LeviosoDemo: typeof import('./.vitepress/theme/components/LeviosoDemo.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
@@ -30,10 +26,8 @@ declare module 'vue' {
     ScrollControlsDemo: typeof import('./.vitepress/theme/components/ScrollControlsDemo.vue')['default']
     SmokeDemo: typeof import('./.vitepress/theme/components/SmokeDemo.vue')['default']
     StarsDemo: typeof import('./.vitepress/theme/components/StarsDemo.vue')['default']
-    StatsGlDemo: typeof import('./.vitepress/theme/components/StatsGlDemo.vue')['default']
     Text3Demo: typeof import('./.vitepress/theme/components/Text3Demo.vue')['default']
     TransformControlsDemo: typeof import('./.vitepress/theme/components/TransformControlsDemo.vue')['default']
-    VideoTexture: typeof import('./.vitepress/theme/components/VideoTexture.vue')['default']
     VideoTextureDemo: typeof import('./.vitepress/theme/components/VideoTextureDemo.vue')['default']
     WobbleMaterialDemo: typeof import('./.vitepress/theme/components/WobbleMaterialDemo.vue')['default']
   }
diff --git a/docs/guide/abstractions/reflector.md b/docs/guide/abstractions/reflector.md
index d5c0a6f1..f7fdf1de 100644
--- a/docs/guide/abstractions/reflector.md
+++ b/docs/guide/abstractions/reflector.md
@@ -10,13 +10,26 @@ The `cientos` package provides an abstraction of the Reflector class, which crea
 </Reflector>
 ```
 
+| Prop              | Description                                          | Default                   |
+| :---------------- | :--------------------------------------------------- | ------------------------- |
+| **color**         | The base color that's combine with the mirror effect | '#333'                 |
+| **textureWidth** ⚠️  | the width of the texture to render on the mirror     | 512                       |
+| **textureHeight** ⚠️ | the height of the texture to render on the mirror    | 512                       |
+| **clipBias**   ⚠️    | to use the clipBias property                         | 0                         |
+| **multisample**  ⚠️  | how many samplers will be render                     | 4                         |
+| **shader**    ⚠️     | The texture of the smoke.                            | Reflector.ReflectorShader |
+
+::: warning
+All the props with the ⚠️ symbol are not reactive
+:::
+
 ## Custom mirror effect
 
 For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:
 
 ```vue{3}
 <script setup lang="ts" >
-import vertexShader from "MyCustomvertexShader.glsl"
+import vertexShader from "MyCustomVertexShader.glsl"
 
 const customShader = {
   vertexShader
@@ -37,25 +50,14 @@ const customShader = {
   </TresCanvas>
 </template>
 ```
-
-| Prop              | Description                                          | Default                   |
-| :---------------- | :--------------------------------------------------- | ------------------------- |
-| **color**         | The base color that's combine with the mirror effect | '#000000'                 |
-| **textureWidth**  | the width of the texture to render on the mirror     | 512                       |
-| **textureHeight** | the height of the texture to render on the mirror    | 512                       |
-| **clipBias**      | to use the clipBias property                         | 0                         |
-| **multisample**   | how many samplers will be render                     | 4                         |
-| **shader**        | The texture of the smoke.                            | Reflector.ReflectorShader |
-
-
-## The Reflector shader use the following configuration by default:
+The Reflector shader use the following configuration by default:
 
 You can extend, modify or just play with them
 
 ### name
 
 ```js
-	name:"ReflectorShader"
+name:'ReflectorShader'
 ```
 
 ### Uniforms

From fc6d6294715f7ccd8d97192d4c6c39a228a5d1ea Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Tue, 26 Sep 2023 11:43:41 -0300
Subject: [PATCH 09/14] chore: remove unnecessary undefined

---
 docs/guide/abstractions/reflector.md           |  4 ++--
 .../pages/abstractions/ReflectorMeshDemo.vue   | 10 ++++------
 src/core/abstractions/Reflector.vue            | 18 ++++--------------
 3 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/docs/guide/abstractions/reflector.md b/docs/guide/abstractions/reflector.md
index f7fdf1de..c7bfaefc 100644
--- a/docs/guide/abstractions/reflector.md
+++ b/docs/guide/abstractions/reflector.md
@@ -4,7 +4,7 @@ The `cientos` package provides an abstraction of the Reflector class, which crea
 
 ## Usage
 
-```html
+```html{2}
 <Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" color="#F7F7F7">
   <TresCircleGeometry :args="[10, 10]" />
 </Reflector>
@@ -27,7 +27,7 @@ All the props with the ⚠️ symbol are not reactive
 
 For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:
 
-```vue{3}
+```vue{2,4-6,15}
 <script setup lang="ts" >
 import vertexShader from "MyCustomVertexShader.glsl"
 
diff --git a/playground/src/pages/abstractions/ReflectorMeshDemo.vue b/playground/src/pages/abstractions/ReflectorMeshDemo.vue
index ea5bfb56..6630cdd4 100644
--- a/playground/src/pages/abstractions/ReflectorMeshDemo.vue
+++ b/playground/src/pages/abstractions/ReflectorMeshDemo.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { shallowRef, reactive, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import {
   OrbitControls,
   MeshWobbleMaterial,
   Reflector,
   Stars,
-  useTweakPane,
 } from '@tresjs/cientos'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping, PlaneGeometry } from 'three'
 
 const gl = {
   clearColor: '#111',
@@ -94,9 +93,8 @@ const options = {
       :clip-bias="options.clipBias"
       :texture-width="options.textureWidth"
       :texture-height="options.textureHeight"
-    >
-      <TresBoxGeometry :args="[10, 10, 1]" />
-    </Reflector>
+    />
+    <!-- <TresBoxGeometry :args="[10, 10, 1]" /> -->
     <!-- <TresBoxGeometry :args="[10, 10]" /> -->
     <TresAmbientLight :intensity="1" />
     <OrbitControls />
diff --git a/src/core/abstractions/Reflector.vue b/src/core/abstractions/Reflector.vue
index 41772ca5..2013fcd1 100644
--- a/src/core/abstractions/Reflector.vue
+++ b/src/core/abstractions/Reflector.vue
@@ -2,23 +2,13 @@
 import { shallowRef, toRefs } from 'vue'
 import { useTresContext } from '@tresjs/core'
 import type { TresColor } from '@tresjs/core'
-import type { Geometry } from 'three'
 import { Reflector } from 'three/addons/objects/Reflector'
 
 export interface ReflectorProps {
   /**
    * The color of the reflector.
    *
-   * @default
-   * @type {Geometry}
-   * @memberof ReflectorProps
-   *
-   */
-  geometry?: Geometry
-  /**
-   * The color of the reflector.
-   *
-   * @default '#000000'
+   * @default '#333'
    * @type {TresColor}
    * @memberof ReflectorProps
    *
@@ -86,7 +76,7 @@ const reflectorRef = shallowRef<Reflector>()
 
 extend({ Reflector })
 
-const { geometry, color, textureWidth, textureHeight, clipBias, multisample, shader }
+const { color, textureWidth, textureHeight, clipBias, multisample, shader }
   = toRefs(props)
 
 defineExpose({
@@ -97,11 +87,11 @@ defineExpose({
 <template>
   <TresReflector
     ref="reflectorRef"
-    :args="[geometry, { textureWidth, textureHeight, clipBias, multisample, shader }]"
+    :args="[undefined, { textureWidth, textureHeight, clipBias, multisample, shader }]"
     :material-uniforms-color-value="color"
   >
     <slot>
-      <TresPlaneGeometry />
+      <TresPlaneGeometry :args="[5, 5]" />
     </slot>
   </TresReflector>
 </template>

From 754f67cd6ef49304c52a9880bbd44768b30d1581 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Tue, 26 Sep 2023 11:50:09 -0300
Subject: [PATCH 10/14] chore: componets.d.ts?

---
 playground/components.d.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/playground/components.d.ts b/playground/components.d.ts
index a7e5595f..1940059c 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -8,10 +8,8 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AkuAku: typeof import('./src/components/AkuAku.vue')['default']
-    DirectivesDemo: typeof import('./src/components/DirectivesDemo.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
     ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
-    ReflectorDemo: typeof import('./src/components/ReflectorDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

From c94e2c602884f136f8fbbaa7a7be518098f4a206 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Wed, 27 Sep 2023 15:13:20 -0300
Subject: [PATCH 11/14] docs: update docs

---
 docs/.vitepress/config.ts            |  1 +
 docs/guide/abstractions/reflector.md | 43 +++++++++++-----------------
 2 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 57ff11cc..be9dc6d5 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -69,6 +69,7 @@ export default defineConfig({
         collapsed: true,
         items: [
           { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
+          { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
         ],
       },
       {
diff --git a/docs/guide/abstractions/reflector.md b/docs/guide/abstractions/reflector.md
index c7bfaefc..9fbdcfd0 100644
--- a/docs/guide/abstractions/reflector.md
+++ b/docs/guide/abstractions/reflector.md
@@ -1,26 +1,27 @@
 # Reflector
 
-The `cientos` package provides an abstraction of the Reflector class, which creates a reflector material in real time of your scene `<Reflector >` component that makes a geometry as an argument to create a mirror. This Mesh extends from `Mesh` so all the default props can be passed as well:
+The `cientos` package provides an abstraction of the [Reflector class](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js), which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from `Mesh` so all the default props can be passed as well:
 
 ## Usage
 
-```html{2}
+```vue{2}
 <Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" color="#F7F7F7">
   <TresCircleGeometry :args="[10, 10]" />
 </Reflector>
 ```
+## Props
 
 | Prop              | Description                                          | Default                   |
 | :---------------- | :--------------------------------------------------- | ------------------------- |
 | **color**         | The base color that's combine with the mirror effect | '#333'                 |
-| **textureWidth** ⚠️  | the width of the texture to render on the mirror     | 512                       |
-| **textureHeight** ⚠️ | the height of the texture to render on the mirror    | 512                       |
-| **clipBias**   ⚠️    | to use the clipBias property                         | 0                         |
-| **multisample**  ⚠️  | how many samplers will be render                     | 4                         |
-| **shader**    ⚠️     | The texture of the smoke.                            | Reflector.ReflectorShader |
+| **textureWidth**  | the width of the texture to render on the mirror     | 512                       |
+| **textureHeight** | the height of the texture to render on the mirror    | 512                       |
+| **clipBias**      | to use the clipBias property                         | 0                         |
+| **multisample**   | how many samplers will be render                     | 4                         |
+| **shader**        | The texture of the smoke.                            | Reflector.ReflectorShader |
 
 ::: warning
-All the props with the ⚠️ symbol are not reactive
+All the props except the `color`, are not reactive
 :::
 
 ## Custom mirror effect
@@ -54,15 +55,11 @@ The Reflector shader use the following configuration by default:
 
 You can extend, modify or just play with them
 
-### name
-
-```js
-name:'ReflectorShader'
-```
-
-### Uniforms
+### Default shader
 
 ```js
+{
+	name:'ReflectorShader',
 	uniforms: {
 		color: {
 			value: null
@@ -74,11 +71,6 @@ name:'ReflectorShader'
 			value: null
 		}
 	},
-```
-
-### VertexShader
-
-```glsl
 	vertexShader: /* glsl */`
 		uniform mat4 textureMatrix;
 		varying vec4 vUv;
@@ -94,12 +86,7 @@ name:'ReflectorShader'
 
 			#include <logdepthbuf_vertex>
 
-		}`
-```
-
-### FragmentShader
-
-```glsl
+		}`,
 	fragmentShader: /* glsl */`
 		uniform vec3 color;
 		uniform sampler2D tDiffuse;
@@ -130,4 +117,6 @@ name:'ReflectorShader'
 			#include <colorspace_fragment>
 
 		}`
-```
+
+}
+```
\ No newline at end of file

From 77a4f184cf9f1b3449b22102c074a46b43336ad0 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Wed, 27 Sep 2023 15:14:51 -0300
Subject: [PATCH 12/14] chore: change import from addons to examples

---
 src/core/abstractions/Reflector.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/abstractions/Reflector.vue b/src/core/abstractions/Reflector.vue
index 2013fcd1..8a1c05b6 100644
--- a/src/core/abstractions/Reflector.vue
+++ b/src/core/abstractions/Reflector.vue
@@ -2,7 +2,7 @@
 import { shallowRef, toRefs } from 'vue'
 import { useTresContext } from '@tresjs/core'
 import type { TresColor } from '@tresjs/core'
-import { Reflector } from 'three/addons/objects/Reflector'
+import { Reflector } from 'three/examples/jsm/objects/Reflector.js'
 
 export interface ReflectorProps {
   /**
@@ -42,7 +42,7 @@ export interface ReflectorProps {
    */
   clipBias?: number
   /**
-   * The number of samples to render.
+   * The multisample.
    *
    * @default 4
    * @type {number}
@@ -51,7 +51,7 @@ export interface ReflectorProps {
    */
   multisample?: number
   /**
-   * The number of samples to render.
+   * Custom shader.
    *
    * @default Reflector.ReflectorShader
    * @type {object}

From 97c733b0bfc5255e8419fecc7f128479f32d904e Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Wed, 27 Sep 2023 15:16:42 -0300
Subject: [PATCH 13/14] chore: remove comments in demo

---
 .../pages/abstractions/ReflectorMeshDemo.vue  | 38 -------------------
 1 file changed, 38 deletions(-)

diff --git a/playground/src/pages/abstractions/ReflectorMeshDemo.vue b/playground/src/pages/abstractions/ReflectorMeshDemo.vue
index 6630cdd4..db0fdf7c 100644
--- a/playground/src/pages/abstractions/ReflectorMeshDemo.vue
+++ b/playground/src/pages/abstractions/ReflectorMeshDemo.vue
@@ -23,42 +23,6 @@ const reflectorRef = shallowRef()
 watch(reflectorRef, (value) => {
   console.log(value)
 })
-// const customShader = {
-//   name: 'customShader',
-
-//   fragmentShader: /* glsl */ `
-// 		uniform vec3 color;
-// 		uniform sampler2D tDiffuse;
-// 		varying vec4 vUv;
-
-// 		#include <logdepthbuf_pars_fragment>
-
-// 		float blendOverlay( float base, float blend ) {
-
-// 			return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
-
-// 		}
-
-// 		vec3 blendOverlay( vec3 base, vec3 blend ) {
-
-// 			return vec3(
-//                 blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) 
-//                 );
-
-// 		}
-
-// 		void main() {
-
-// 			#include <logdepthbuf_fragment>
-
-// 			vec4 base = texture2DProj( tDiffuse, vUv );
-// 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
-
-// 			#include <tonemapping_fragment>
-// 			#include <colorspace_fragment>
-
-// 		}`,
-// }
 
 const options = {
   color: '#f7f7f7',
@@ -94,8 +58,6 @@ const options = {
       :texture-width="options.textureWidth"
       :texture-height="options.textureHeight"
     />
-    <!-- <TresBoxGeometry :args="[10, 10, 1]" /> -->
-    <!-- <TresBoxGeometry :args="[10, 10]" /> -->
     <TresAmbientLight :intensity="1" />
     <OrbitControls />
   </TresCanvas>

From 994d35e953e8c9e5521d6867ca86e51968824b28 Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Tue, 14 Nov 2023 15:14:51 -0300
Subject: [PATCH 14/14] docs: add demo to docs

---
 .../theme/components/ReflectorDemo.vue        | 36 +++++++++++++++++++
 docs/guide/abstractions/reflector.md          | 11 +++---
 2 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/ReflectorDemo.vue

diff --git a/docs/.vitepress/theme/components/ReflectorDemo.vue b/docs/.vitepress/theme/components/ReflectorDemo.vue
new file mode 100644
index 00000000..8d4a1d9d
--- /dev/null
+++ b/docs/.vitepress/theme/components/ReflectorDemo.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import {
+  OrbitControls,
+  MeshWobbleMaterial,
+  Reflector,
+  Stars,
+} from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas clear-color="#111">
+    <TresPerspectiveCamera
+      :position="[3, 2, 6]"
+      :look-at="[0, 0, 0]"
+    />
+    <Stars />
+    <TresMesh>
+      <TresTorusGeometry />
+      <MeshWobbleMaterial
+        color="orange"
+        :speed="1"
+        :factor="2"
+      />
+    </TresMesh>
+    <Reflector
+      :rotation="[-Math.PI * 0.5, 0, 0]"
+      :position="[0, -2, 0]"
+      color="#f7f7f7"
+    >
+      <TresCircleGeometry :args="[10, 32]" />
+    </Reflector>
+    <TresAmbientLight :intensity="1" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
diff --git a/docs/guide/abstractions/reflector.md b/docs/guide/abstractions/reflector.md
index 9fbdcfd0..84636cff 100644
--- a/docs/guide/abstractions/reflector.md
+++ b/docs/guide/abstractions/reflector.md
@@ -1,14 +1,15 @@
 # Reflector
 
+<DocsDemo>
+  <ReflectorDemo />
+</DocsDemo>
+
 The `cientos` package provides an abstraction of the [Reflector class](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js), which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from `Mesh` so all the default props can be passed as well:
 
 ## Usage
 
-```vue{2}
-<Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" color="#F7F7F7">
-  <TresCircleGeometry :args="[10, 10]" />
-</Reflector>
-```
+<<< @/.vitepress/theme/components/ReflectorDemo.vue{6,26-32}
+
 ## Props
 
 | Prop              | Description                                          | Default                   |