# Adding a shaderKit to an object in my project

**URL:** <https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228>\
**Category:** Technical Support\
**Created:** [September 3, 2025, 4:55pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228 "2025-09-03T16:55:38Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 4:55pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/1 "2025-09-03T16:55:38Z")

</div>

I cant seem to add the holographic shader to an asset in my project. Im not that hot on this so I don’t know if its even possible.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [September 3, 2025, 6:29pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/2 "2025-09-03T18:29:08Z")

</div>

Hi Tommy!

I was curious so I went ahead and tried this myself. Here’s the result of creating a Hologram shader and applying it to my 3D model.

```auto
import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'Hologram Shader',
  schema: {},
  schemaDefaults: {},
  data: {},
  stateMachine: ({world, eid}) => {
    const {THREE} = window as any
    let material = null

    ecs.defineState('default')
      .initial()
      .listen(eid, ecs.events.GLTF_MODEL_LOADED, () => {
        ecs.Material.remove(world, eid)
        const object = world.three.entityToObject.get(eid)

        material = new THREE.ShaderMaterial({
          uniforms: {
            time: {value: 0},
            baseColor: {value: new THREE.Color(0x3ec3ff)}, // hologram tint
            opacity: {value: 0.8}, // overall opacity
            scanFreq: {value: 160.0}, // scanline frequency
            scanSpeed: {value: 1.8}, // scanline speed
            glitchIntensity: {value: 0.008}, // UV wobble
          },
          transparent: true,
          depthWrite: false,
          blending: THREE.AdditiveBlending,
          side: THREE.DoubleSide,
          vertexShader: `
            varying vec2 vUv;
            varying vec3 vWorldPos;
            varying vec3 vWorldNormal;
            varying vec3 vViewDir;

            void main() {
              vUv = uv;
              vec4 worldPos = modelMatrix * vec4(position, 1.0);
              vWorldPos = worldPos.xyz;

              // world-space normal
              vWorldNormal = normalize(mat3(modelMatrix) * normal);

              // view direction in world space (cameraPosition is provided by three.js)
              vViewDir = normalize(cameraPosition - vWorldPos);

              gl_Position = projectionMatrix * viewMatrix * worldPos;
            }
          `,
          fragmentShader: `
            uniform float time;
            uniform vec3 baseColor;
            uniform float opacity;
            uniform float scanFreq;
            uniform float scanSpeed;
            uniform float glitchIntensity;

            varying vec2 vUv;
            varying vec3 vWorldPos;
            varying vec3 vWorldNormal;
            varying vec3 vViewDir;

            // hash-based noise
            float hash(vec2 p) {
              p = vec2(dot(p, vec2(127.1, 311.7)),
                       dot(p, vec2(269.5, 183.3)));
              return fract(sin(p.x + p.y) * 43758.5453123);
            }

            // small pseudo-random flicker
            float flicker(float t) {
              return 0.5 + 0.5 * sin(t * 6.2831 * 0.83 + sin(t * 2.1));
            }

            void main() {
              // Fresnel rim glow
              float fres = pow(1.0 - max(dot(normalize(vWorldNormal), normalize(vViewDir)), 0.0), 2.0);

              // Horizontal scanlines that move upward
              float scan = sin(vWorldPos.y * scanFreq + time * 6.2831 * scanSpeed) * 0.5 + 0.5;
              scan = smoothstep(0.45, 0.55, scan); // thin bright lines

              // Subtle UV glitch/wobble driven by world pos & time
              float n1 = hash(vWorldPos.xz * 3.7 + time);
              float n2 = hash(vWorldPos.zy * 4.1 - time * 0.7);
              vec2 uv = vUv;
              uv.x += (n1 - 0.5) * glitchIntensity;
              uv.y += (n2 - 0.5) * glitchIntensity * 0.6;

              // Channel offset shimmer
              float rShift = (hash(uv * 120.0 + time * 0.8) - 0.5) * 0.01;
              float gShift = (hash(uv * 140.0 - time * 0.6) - 0.5) * 0.01;
              float bShift = (hash(uv * 160.0 + time * 0.9) - 0.5) * 0.01;

              // Base emission color with slight per-channel offsets
              vec3 col = vec3(
                baseColor.r * (0.65 + 0.35 * fres) + rShift,
                baseColor.g * (0.65 + 0.35 * fres) + gShift,
                baseColor.b * (0.85 + 0.55 * fres) + bShift
              );

              // Layer in scanlines & flicker
              float glow = 0.25 + 1.25 * fres + 0.75 * scan;
              glow *= 0.85 + 0.15 * flicker(time + vWorldPos.y * 0.1);

              vec3 finalColor = col * glow;

              // Alpha shaped by fresnel + scanlines, then clipped for a crisp hologram edge
              float a = opacity * clamp(0.15 + 0.85 * (0.6 * fres + 0.4 * scan), 0.0, 1.0);

              // subtle dithering to reduce banding (screen-door style)
              float dither = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);
              a -= (dither - 0.5) * 0.03;

              if (a < 0.03) discard;

              gl_FragColor = vec4(finalColor, a);
            }
          `,
        })

        object.traverse((node: any) => {
          if (node.isMesh) {
            node.material = material
          }
        })
      })
      .onTick(() => {
        if (material) {
          material.uniforms.time.value = world.time.elapsed * 0.001
        }
      })
  },
})

```

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 6:49pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/3 "2025-09-03T18:49:44Z")

</div>

Woah you did it?! This is exactly what I want to do, and you did it that easily. Hats off!  
So I create a new component and then copy this in, then add the component to the object but it doesn’t seem to work? Am I doing this wrong?

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [September 3, 2025, 6:50pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/4 "2025-09-03T18:50:23Z")

</div>

Are you putting the component on the model itself? I can take a look if you land your changes.

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 7:17pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/5 "2025-09-03T19:17:15Z")

</div>

Yeah so I created a component and named it Hologram-Shader then pasted this  
_// This is a component file. You can use this file to define a custom component for your project._

_// This component will appear as a custom component in the editor._

import \* as ecs from ‘[@8thwall](https://forum.8thwall.com/groups/8thwall)/ecs’ _// This is how you access the ecs library._

ecs.registerComponent({

name: ‘Hologram-Shader’,

schema: {},

schemaDefaults: {},

data: {},

stateMachine: ({world, eid}) =\> {

const {THREE} = window as any

let material = null

ecs.defineState(‘default’)

.initial()

.listen(eid, ecs.events.GLTF\_MODEL\_LOADED, () =\> {

ecs.Material.remove(world, eid)

const object = world.three.entityToObject.get(eid)

material = new THREE.ShaderMaterial({

```
      uniforms: {

        time: {value: 0},

        baseColor: {value: new THREE.Color(0x3ec3ff)}, *// hologram tint*

        opacity: {value: 0.8}, *// overall opacity*

        scanFreq: {value: 160.0}, *// scanline frequency*

        scanSpeed: {value: 1.8}, *// scanline speed*

        glitchIntensity: {value: 0.008}, *// UV wobble*

      },

      transparent: true,

      depthWrite: false,

      blending: THREE.AdditiveBlending,

      side: THREE.DoubleSide,

      vertexShader: \`

        varying vec2 vUv;

        varying vec3 vWorldPos;

        varying vec3 vWorldNormal;

        varying vec3 vViewDir;

        void main() {

          vUv = uv;

          vec4 worldPos = modelMatrix \* vec4(position, 1.0);

          vWorldPos = worldPos.xyz;

          // world-space normal

          vWorldNormal = normalize(mat3(modelMatrix) \* normal);

          // view direction in world space (cameraPosition is provided by three.js)

          vViewDir = normalize(cameraPosition - vWorldPos);

          gl_Position = projectionMatrix \* viewMatrix \* worldPos;

        }

      \`,

      fragmentShader: \`

        uniform float time;

        uniform vec3 baseColor;

        uniform float opacity;

        uniform float scanFreq;

        uniform float scanSpeed;

        uniform float glitchIntensity;

        varying vec2 vUv;

        varying vec3 vWorldPos;

        varying vec3 vWorldNormal;

        varying vec3 vViewDir;

        // hash-based noise

        float hash(vec2 p) {

          p = vec2(dot(p, vec2(127.1, 311.7)),

                   dot(p, vec2(269.5, 183.3)));

          return fract(sin(p.x + p.y) \* 43758.5453123);

        }

        // small pseudo-random flicker

        float flicker(float t) {

          return 0.5 + 0.5 \* sin(t \* 6.2831 \* 0.83 + sin(t \* 2.1));

        }

        void main() {

          // Fresnel rim glow

          float fres = pow(1.0 - max(dot(normalize(vWorldNormal), normalize(vViewDir)), 0.0), 2.0);

          // Horizontal scanlines that move upward

          float scan = sin(vWorldPos.y \* scanFreq + time \* 6.2831 \* scanSpeed) \* 0.5 + 0.5;

          scan = smoothstep(0.45, 0.55, scan); // thin bright lines

          // Subtle UV glitch/wobble driven by world pos & time

          float n1 = hash(vWorldPos.xz \* 3.7 + time);

          float n2 = hash(vWorldPos.zy \* 4.1 - time \* 0.7);

          vec2 uv = vUv;

          uv.x += (n1 - 0.5) \* glitchIntensity;

          uv.y += (n2 - 0.5) \* glitchIntensity \* 0.6;

          // Channel offset shimmer

          float rShift = (hash(uv \* 120.0 + time \* 0.8) - 0.5) \* 0.01;

          float gShift = (hash(uv \* 140.0 - time \* 0.6) - 0.5) \* 0.01;

          float bShift = (hash(uv \* 160.0 + time \* 0.9) - 0.5) \* 0.01;

          // Base emission color with slight per-channel offsets

          vec3 col = vec3(

            baseColor.r \* (0.65 + 0.35 \* fres) + rShift,

            baseColor.g \* (0.65 + 0.35 \* fres) + gShift,

            baseColor.b \* (0.85 + 0.55 \* fres) + bShift

          );

          // Layer in scanlines & flicker

          float glow = 0.25 + 1.25 \* fres + 0.75 \* scan;

          glow \*= 0.85 + 0.15 \* flicker(time + vWorldPos.y \* 0.1);

          vec3 finalColor = col \* glow;

          // Alpha shaped by fresnel + scanlines, then clipped for a crisp hologram edge

          float a = opacity \* clamp(0.15 + 0.85 \* (0.6 \* fres + 0.4 \* scan), 0.0, 1.0);

          // subtle dithering to reduce banding (screen-door style)

          float dither = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) \* 43758.5453);

          a -= (dither - 0.5) \* 0.03;

          if (a < 0.03) discard;

          gl_FragColor = vec4(finalColor, a);

        }

      \`,

    })

```

object.traverse((node: any) =\> {

if (node.isMesh) {

node.material = material

```
      }

    })

  })

```

.onTick(() =\> {

if (material) {

material.uniforms.time.value = world.time.elapsed \* 0.001

```
    }

  })

```

},

})

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 7:17pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/6 "2025-09-03T19:17:54Z")

</div>

Then I added the component to the object

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 7:19pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/7 "2025-09-03T19:19:07Z")

</div>

![Screenshot 2025-09-03 at 20.18.36](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/6/645564d1b349a884904740a7e9f3858818dec9c1.jpeg)

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 7:27pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/8 "2025-09-03T19:27:23Z")

</div>

> _// This is a component file. You can use this file to define a custom component for your project._
> 
> _// This component will appear as a custom component in the editor._
> 
> import \* as ecs from ‘[@8thwall](https://forum.8thwall.com/groups/8thwall)/ecs’ _// This is how you access the ecs library._
> 
> ecs.registerComponent({
> 
> name: ‘Hologram-Shader’,
> 
> schema: {},
> 
> schemaDefaults: {},
> 
> data: {},
> 
> stateMachine: ({world, eid}) =\> {
> 
> const {THREE} = window as any
> 
> let material = null
> 
> ecs.defineState(‘default’)
> 
> .initial()
> 
> .listen(eid, ecs.events.GLTF\_MODEL\_LOADED, () =\> {
> 
> ecs.Material.remove(world, eid)
> 
> const object = world.three.entityToObject.get(eid)
> 
> material = new THREE.ShaderMaterial({
> 
> ```
> uniforms: {
> 
> time: {value: 0},
> 
> baseColor: {value: new THREE.Color(0x3ec3ff)}, *// hologram tint*
> 
> opacity: {value: 0.8}, *// overall opacity*
> 
> scanFreq: {value: 160.0}, *// scanline frequency*
> 
> scanSpeed: {value: 1.8}, *// scanline speed*
> 
> glitchIntensity: {value: 0.008}, *// UV wobble*
> 
> },
> 
> transparent: true,
> 
> depthWrite: false,
> 
> blending: THREE.AdditiveBlending,
> 
> side: THREE.DoubleSide,
> 
> vertexShader: \`
> 
> varying vec2 vUv;
> 
> varying vec3 vWorldPos;
> 
> varying vec3 vWorldNormal;
> 
> varying vec3 vViewDir;
> 
> void main() {
> 
> vUv = uv;
> 
> vec4 worldPos = modelMatrix \* vec4(position, 1.0);
> 
> vWorldPos = worldPos.xyz;
> 
> // world-space normal
> 
> vWorldNormal = normalize(mat3(modelMatrix) \* normal);
> 
> // view direction in world space (cameraPosition is provided by three.js)
> 
> vViewDir = normalize(cameraPosition - vWorldPos);
> 
> gl_Position = projectionMatrix \* viewMatrix \* worldPos;
> 
> }
> 
> \`,
> 
> fragmentShader: \`
> 
> uniform float time;
> 
> uniform vec3 baseColor;
> 
> uniform float opacity;
> 
> uniform float scanFreq;
> 
> uniform float scanSpeed;
> 
> uniform float glitchIntensity;
> 
> varying vec2 vUv;
> 
> varying vec3 vWorldPos;
> 
> varying vec3 vWorldNormal;
> 
> varying vec3 vViewDir;
> 
> // hash-based noise
> 
> float hash(vec2 p) {
> 
> p = vec2(dot(p, vec2(127.1, 311.7)),
> 
> dot(p, vec2(269.5, 183.3)));
> 
> return fract(sin(p.x + p.y) \* 43758.5453123);
> 
> }
> 
> // small pseudo-random flicker
> 
> float flicker(float t) {
> 
> return 0.5 + 0.5 \* sin(t \* 6.2831 \* 0.83 + sin(t \* 2.1));
> 
> }
> 
> void main() {
> 
> // Fresnel rim glow
> 
> float fres = pow(1.0 - max(dot(normalize(vWorldNormal), normalize(vViewDir)), 0.0), 2.0);
> 
> // Horizontal scanlines that move upward
> 
> float scan = sin(vWorldPos.y \* scanFreq + time \* 6.2831 \* scanSpeed) \* 0.5 + 0.5;
> 
> scan = smoothstep(0.45, 0.55, scan); // thin bright lines
> 
> // Subtle UV glitch/wobble driven by world pos & time
> 
> float n1 = hash(vWorldPos.xz \* 3.7 + time);
> 
> float n2 = hash(vWorldPos.zy \* 4.1 - time \* 0.7);
> 
> vec2 uv = vUv;
> 
> uv.x += (n1 - 0.5) \* glitchIntensity;
> 
> uv.y += (n2 - 0.5) \* glitchIntensity \* 0.6;
> 
> // Channel offset shimmer
> 
> float rShift = (hash(uv \* 120.0 + time \* 0.8) - 0.5) \* 0.01;
> 
> float gShift = (hash(uv \* 140.0 - time \* 0.6) - 0.5) \* 0.01;
> 
> float bShift = (hash(uv \* 160.0 + time \* 0.9) - 0.5) \* 0.01;
> 
> // Base emission color with slight per-channel offsets
> 
> vec3 col = vec3(
> 
> baseColor.r \* (0.65 + 0.35 \* fres) + rShift,
> 
> baseColor.g \* (0.65 + 0.35 \* fres) + gShift,
> 
> baseColor.b \* (0.85 + 0.55 \* fres) + bShift
> 
> );
> 
> // Layer in scanlines & flicker
> 
> float glow = 0.25 + 1.25 \* fres + 0.75 \* scan;
> 
> glow \*= 0.85 + 0.15 \* flicker(time + vWorldPos.y \* 0.1);
> 
> vec3 finalColor = col \* glow;
> 
> // Alpha shaped by fresnel + scanlines, then clipped for a crisp hologram edge
> 
> float a = opacity \* clamp(0.15 + 0.85 \* (0.6 \* fres + 0.4 \* scan), 0.0, 1.0);
> 
> // subtle dithering to reduce banding (screen-door style)
> 
> float dither = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) \* 43758.5453);
> 
> a -= (dither - 0.5) \* 0.03;
> 
> if (a < 0.03) discard;
> 
> gl_FragColor = vec4(finalColor, a);
> 
> }
> 
> \`,
> 
> })
> 
> ```
> 
> object.traverse((node: any) =\> {
> 
> if (node.isMesh) {
> 
> node.material = material
> 
> ```
> }
> 
> })
> 
> })
> 
> ```
> 
> .onTick(() =\> {
> 
> if (material) {
> 
> material.uniforms.time.value = world.time.elapsed \* 0.001
> 
> ```
> }
> 
> })
> 
> ```
> 
> },
> 
> })

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 7:27pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/9 "2025-09-03T19:27:58Z")

</div>

I shouldve put it into a block quote, apologies

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 7:35pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/10 "2025-09-03T19:35:11Z")

</div>

I have checked and can’t see any reason why it wont do anything though

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [September 3, 2025, 7:57pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/11 "2025-09-03T19:57:56Z")

</div>

Hmm, I think I have an idea. Let me try it.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [September 3, 2025, 9:33pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/12 "2025-09-03T21:33:08Z")

</div>

Looks like the Shader didn’t work with scaled SkinnedMeshes. I’ve gone ahead and updated it and landed the change in your LIZO project. 🙂

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 10:35pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/13 "2025-09-03T22:35:43Z")

</div>

> [@GeorgeButler](#):
>
> ```auto
> schema: {},
> schemaDefaults: {},
> data: {},
> stateMachine: ({world, eid}) => {
> const {THREE} = window as any
> let material = null
> 
> ecs.defineState('default')
> .initial()
> .listen(eid, ecs.events.GLTF_MODEL_LOADED, () => {
> ecs.Material.remove(world, eid)
> const object = world.three.entityToObject.get(eid)
> 
> material = new THREE.ShaderMaterial({
> uniforms: {
> time: {value: 0},
> baseColor: {value: new THREE.Color(0x3ec3ff)}, // hologram tint
> opacity: {value: 0.8}, // overall opacity
> scanFreq: {value: 160.0}, // scanline frequency
> scanSpeed: {value: 1.8}, // scanline speed
> glitchIntensity: {value: 0.008}, // UV wobble
> },
> transparent: true,
> depthWrite: false,
> blending: THREE.AdditiveBlending,
> side: THREE.DoubleSide,
> vertexShader: `
> varying vec2 vUv;
> varying vec3 vWorldPos;
> varying vec3 vWorldNormal;
> varying vec3 vViewDir;
> 
> void main() {
> vUv = uv;
> vec4 worldPos = modelMatrix * vec4(position, 1.0);
> vWorldPos = worldPos.xyz;
> 
> // world-space normal
> vWorldNormal = normalize(mat3(modelMatrix) * normal);
> 
> // view direction in world space (cameraPosition is provided by three.js)
> vViewDir = normalize(cameraPosition - vWorldPos);
> 
> gl_Position = projectionMatrix * viewMatrix * worldPos;
> }
> `,
> fragmentShader: `
> uniform float time;
> uniform vec3 baseColor;
> uniform float opacity;
> uniform float scanFreq;
> uniform float scanSpeed;
> uniform float glitchIntensity;
> 
> varying vec2 vUv;
> varying vec3 vWorldPos;
> varying vec3 vWorldNormal;
> varying vec3 vViewDir;
> 
> // hash-based noise
> float hash(vec2 p) {
> p = vec2(dot(p, vec2(127.1, 311.7)),
> dot(p, vec2(269.5, 183.3)));
> return fract(sin(p.x + p.y) * 43758.5453123);
> }
> 
> // small pseudo-random flicker
> float flicker(float t) {
> return 0.5 + 0.5 * sin(t * 6.2831 * 0.83 + sin(t * 2.1));
> }
> 
> void main() {
> // Fresnel rim glow
> float fres = pow(1.0 - max(dot(normalize(vWorldNormal), normalize(vViewDir)), 0.0), 2.0);
> 
> // Horizontal scanlines that move upward
> float scan = sin(vWorldPos.y * scanFreq + time * 6.2831 * scanSpeed) * 0.5 + 0.5;
> scan = smoothstep(0.45, 0.55, scan); // thin bright lines
> 
> // Subtle UV glitch/wobble driven by world pos & time
> float n1 = hash(vWorldPos.xz * 3.7 + time);
> float n2 = hash(vWorldPos.zy * 4.1 - time * 0.7);
> vec2 uv = vUv;
> uv.x += (n1 - 0.5) * glitchIntensity;
> uv.y += (n2 - 0.5) * glitchIntensity * 0.6;
> 
> // Channel offset shimmer
> float rShift = (hash(uv * 120.0 + time * 0.8) - 0.5) * 0.01;
> float gShift = (hash(uv * 140.0 - time * 0.6) - 0.5) * 0.01;
> float bShift = (hash(uv * 160.0 + time * 0.9) - 0.5) * 0.01;
> 
> // Base emission color with slight per-channel offsets
> vec3 col = vec3(
> baseColor.r * (0.65 + 0.35 * fres) + rShift,
> baseColor.g * (0.65 + 0.35 * fres) + gShift,
> baseColor.b * (0.85 + 0.55 * fres) + bShift
> );
> 
> // Layer in scanlines & flicker
> float glow = 0.25 + 1.25 * fres + 0.75 * scan;
> glow *= 0.85 + 0.15 * flicker(time + vWorldPos.y * 0.1);
> 
> vec3 finalColor = col * glow;
> 
> // Alpha shaped by fresnel + scanlines, then clipped for a crisp hologram edge
> float a = opacity * clamp(0.15 + 0.85 * (0.6 * fres + 0.4 * scan), 0.0, 1.0);
> 
> // subtle dithering to reduce banding (screen-door style)
> float dither = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);
> a -= (dither - 0.5) * 0.03;
> 
> if (a < 0.03) discard;
> 
> gl_FragColor = vec4(finalColor, a);
> }
> `,
> })
> 
> object.traverse((node: any) => {
> if (node.isMesh) {
> node.material = material
> }
> })
> })
> .onTick(() => {
> if (material) {
> material.uniforms.time.value = world.time.elapsed * 0.001
> }
> })
> },
> })
> 
> ```

Thanks for this George, I synced but it said it failed and when I add the component it doesnt work so I doent know if something happened in the sync. Im really sorry about ahhhhh

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [September 3, 2025, 11:00pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/14 "2025-09-03T23:00:12Z")

</div>

I’ve already attached it for you, looks like it’s working correctly on my end. Are you seeing something else?

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 11:18pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/15 "2025-09-03T23:18:37Z")

</div>

Ah, no thats just because I had change the colour and opacity before I started working on it to try and get the effect. Ill change it back…  
Basically the hologram component isnt changing it, just the green tint and opacity.

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 3, 2025, 11:19pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/16 "2025-09-03T23:19:21Z")

</div>

Ah no, wait are we working on the same… Ill record mine wait there

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 10, 2025, 4:23pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/17 "2025-09-10T16:23:28Z")

</div>

![Screenshot 2025-09-04 at 00.21.56](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/b/b1742803aad15b4fa8b3594198cc64ca8308c3e0.jpeg)

---

<div class="post-metadata">

**Author:** ![Tommy\_Chavannes\_Chav](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@Tommy\_Chavannes\_Chav](https://forum.8thwall.com/u/Tommy_Chavannes_Chav)\
**Post date:** [September 10, 2025, 4:37pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/18 "2025-09-10T16:37:03Z")

</div>

So I think the issue is that I cant seem to get my simulator to work. It just wont load. I have tried to restart my browser and computer several times and I am using chrome but no joy. I am right in thinking that the shader would only become clear in the simulator once it has been found while i am testing it?

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [September 10, 2025, 5:04pm UTC](https://forum.8thwall.com/t/adding-a-shaderkit-to-an-object-in-my-project/8228/19 "2025-09-10T17:04:28Z")

</div>

That’s correct, the shader would only become visible once the component is mounted at runtime so you wouldn’t see it in action in the viewport.