Holographic Material

A simple to use holographic material for TresJS

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.

Usage

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { HolographicMaterial, Sphere } from '@tresjs/cientos'

</script>
<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at=[0,0,0] />
    <Sphere :scale="0.5">
      <HolographicMaterial />
    </Sphere>
    <TresAmbientLight />
  </TresCanvas>
</template>

WebGPU

Import HolographicMaterial from @tresjs/cientos/webgpu on a TresCanvas from @tresjs/core/webgpu. That version uses a TSL node material and has the same props. See WebGPU.

import { HolographicMaterial } from '@tresjs/cientos/webgpu'

With additive blending, overlapping parts look a little darker than with WebGLRenderer, and so does the hologram on a light background. WebGPURenderer adds colors in linear color space, and WebGLRenderer adds them in sRGB. On a black background, one layer looks the same with both renderers.

Props