feat(app): Add holographic material to cientos

docs/.vitepress/config.ts

@@ -98,6 +98,7 @@ export default defineConfig({
           { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
           { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
           { text: 'CustomShaderMaterial', link: '/guide/materials/custom-shader-material' },
+          { text: 'HolographicMaterial', link: '/guide/materials/holographic-material' },
         ],
       },
       {

docs/.vitepress/theme/components/HolographicMaterialDemo.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { HolographicMaterial, OrbitControls, useGLTF, Sphere } from '@tresjs/cientos'
+
+const path = 'https://raw.githubusercontent.com/'
++ 'Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf'
+const { scene } = await useGLTF(path)
+
+const holographicMaterialRef = shallowRef()
+
+watch(holographicMaterialRef, (value) => {
+  scene.traverse((child) => {
+    if (child.isMesh) {
+      child.material.dispose()
+      child.material = value.root
+    }
+  })
+})
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera
+      :position="[0, 0, 10]"
+      :look-at="[0, 5, 0]"
+    />
+    <primitive :object="scene" />
+    <Sphere :visible="false">
+      <HolographicMaterial ref="holographicMaterialRef" />
+    </Sphere>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[2, 2, 2]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>

docs/guide/materials/holographic-material.md

@@ -0,0 +1,55 @@
+# HolographicMaterial
+
+<DocsDemo>
+  <HolographicMaterialDemo />
+</DocsDemo>
+
+A simple to use holographic material for threejs
+
+Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for vanilla three.js. This enchanting three.js material brings your virtual reality experiences to life, infusing them with a burst of vibrant colors, dynamic scanlines, and a touch of futuristic brilliance.
+
+While this material operates independently of any post-processing, it achieves an enhanced visual appeal when coupled with bloom effects. The utilization of bloom proves particularly effective in rendering a captivating glow effect, especially in areas where overexposure is prevalent.
+
+:::info
+This is an integration of the Anderson Mancini [threejs-vanilla-holographic-material](https://github.com/ektogamat/threejs-vanilla-holographic-material). All credits for him.
+:::
+
+## Usage
+
+```vue{3,10}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { HolographicMaterial, Sphere } from '@tresjs/cientos'
+
+</script>
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <Sphere :scale="0.5">
+      <HolographicMaterial />
+    </Sphere>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+### You can also replace the material of an existing mesh like this:
+
+<<< @/.vitepress/theme/components/GlassMaterialDemo.vue{3,9-12}
+
+## props
+
+| Prop                   | Description                                                         | Type                                                | default   |
+| :--------------------- | :------------------------------------------------------------------ | --------------------------------------------------- | --------- |
+| **fresnelAmount**      | Controls the value of the Fresnel effect. Ranges from 0.0 to 1.0.   | `Number`                                            | 0.45      |
+| **fresnelOpacity**     | Controls the opacity of the Fresnel effect. Ranges from 0.0 to 1.0. | `Number`                                            | 1.0       |
+| **scanlineSize**       | Controls the size of the scanlines. Ranges from 1 to 15.            | `Number`                                            | 8.0       |
+| **hologramBrightness** | Controls the brightness of the hologram. Ranges from 0.0 to 2.0.    | `Number`                                            | 1.2       |
+| **signalSpeed**        | Controls the speed of the signal effect. Ranges from 0.0 to 2.0.    | `Number`                                            | 0.45      |
+| **hologramColor**      | Specifies the color of the hologram.                                | `String`                                            | "#00d5ff" |
+| **enableBlinking**     | Enables or disables the blinking effect.                            | `Boolean`                                           | true      |
+| **hologramOpacity**    | Specifies the opacity of the hologram.                              | `Number`                                            | 1.0       |
+| **enableBlinking**     | Enables or disables the blinking effect.                            | `Boolean`                                           | true      |
+| **blinkFresnelOnly**   | Enables or disables the blinking effect for the Fresnel only.       | `Boolean`                                           | true      |
+| **enableAdditive**     | Enables or disables the Additive Blend Mode.                        | `Boolean`                                           | true      |
+| **side**               | Specifies side for the material, as String.                         | `THREE.FrontSide, THREE.BackSide, THREE.DoubleSide` | FrontSide |

playground/src/pages/materials/HolographicMaterialDemo.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref, shallowRef, watch } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, HolographicMaterial, Box, Sphere } from '@tresjs/cientos'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping, FrontSide } from 'three'
+
+const gl = {
+  clearColor: '#333',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+const holographicMaterialRef = shallowRef()
+
+watch(holographicMaterialRef, (value) => {
+  console.log('jaime ~ watch ~ value:', value)
+})
+</script>
+
+<template>
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <Sphere :scale="0.5">
+      <HolographicMaterial
+        ref="holographicMaterialRef"
+        :fresnel-amount="0.8"
+        :enable-blinking="true"
+        :blink-fresnel-only="true"
+        :hologram-brightness="0.17"
+      />
+      <!-- 
+        :fresnel-opacity="0.15"
+        :scanline-size="6"
+        :signal-speed="2.3"
+        hologram-color="#ff0000"
+        :hologram-opacity="1."
+        :enable-additive="true"
+        :side="FrontSide" -->
+    </Sphere>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :intensity="1"
+      :position="[2, 2, 2]"
+    />
+    <OrbitControls />
+  </TresCanvas>
+</template>

playground/src/router/routes/materials.ts

@@ -19,4 +19,9 @@ export const materialsRoutes = [
     name: 'ReflectionMaterial',
     component: () => import('../../pages/materials/ReflectionMaterial.vue'),
   },
+  {
+    path: '/materials/holographic-material',
+    name: 'HolographicMaterial',
+    component: () => import('../../pages/materials/HolographicMaterialDemo.vue'),
+  },
 ]

src/core/materials/holographicMaterial/index.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { useRenderLoop, useTresContext } from '@tresjs/core'
+import type { TresColor } from '@tresjs/core'
+import { FrontSide } from 'three'
+import type { Side } from 'three'
+
+import HolographicMaterial from './material'
+
+const props = withDefaults(
+  defineProps<{
+    fresnelAmount?: number
+    fresnelOpacity?: number
+    blinkFresnelOnly?: boolean
+    enableBlinking?: boolean
+    enableAdditive?: boolean
+    hologramBrightness?: number
+    scanlineSize?: number
+    signalSpeed?: number
+    hologramOpacity?: number
+    hologramColor?: TresColor
+    side?: Side
+  }>(),
+  {
+    fresnelAmount: 0.45,
+    fresnelOpacity: 1.0,
+    blinkFresnelOnly: true,
+    enableBlinking: true,
+    enableAdditive: true,
+    hologramBrightness: 0.7,
+    scanlineSize: 8.0,
+    signalSpeed: 0.45,
+    hologramOpacity: 1.,
+    hologramColor: '#00d5ff',
+    side: FrontSide,
+  },
+)
+
+const MeshHolographicMaterialClass = shallowRef()
+
+const { extend } = useTresContext()
+
+extend({ HolographicMaterial })
+
+defineExpose({ root: MeshHolographicMaterialClass, constructor: HolographicMaterial })
+
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  MeshHolographicMaterialClass.value?.update()
+})
+</script>
+
+<template>
+  <TresHolographicMaterial
+    ref="MeshHolographicMaterialClass"
+    :uniforms-fresnelAmount-value="props.fresnelAmount"
+    :uniforms-enableBlinking-value="props.enableBlinking"
+    :uniforms-fresnelOpacity-value="props.fresnelOpacity"
+    :uniforms-hologramBrightness-value="props.hologramBrightness"
+    :uniforms-scanlineSize-value="props.scanlineSize"
+    :uniforms-signalSpeed-value="props.signalSpeed"
+    :uniforms-hologramColor-value="props.hologramColor"
+    :uniforms-hologramOpacity-value="props.hologramOpacity"
+    :uniforms-blinkFresnelOnly-value="props.blinkFresnelOnly"
+    :enableAdditive="props.enableAdditive"
+    :side="props.side"
+  />
+</template>