Hologram Shader Collection

A collection of WebGL/GLSL shaders designed to create holographic and atmospheric visual effects. This project includes both vertex and fragment shaders that work together to produce dynamic, animated 3D holographic appearances.

Features

• Holographic Vertex Displacement: Creates unstable, wavey geometry distortion
• Dark Purple Fragment Shader: Rich purple color palette with animated highlights
• Scan Line Effects: High-frequency displacement mimicking holographic interference
• Glitch Animation: Random displacement spikes for digital artifact effects
• Edge Glow: Rim lighting effects for enhanced holographic appearance
• Pulsing Animation: Breathing effects and color shifting over time

Shader Files

Vertex Shader (hologram.vert)

• Wavey geometric distortion
• Scan line displacement
• Glitching effects
• Pulsing scale animation
• Exports displacement and flicker data to fragment shader

Fragment Shader (hologram.frag)

• Dark purple color palette
• Animated wave patterns
• Edge glow effects
• Depth-based shading
• Color pulsing animation

Usage

Three.js Implementation

// Load shaders
const vertexShader = /* load hologram.vert */;
const fragmentShader = /* load hologram.frag */;

// Create shader material
const material = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  uniforms: {
    time: { value: 0.0 }
  },
  transparent: true,
  side: THREE.DoubleSide
});

// Update time uniform in animation loop
function animate() {
  material.uniforms.time.value = performance.now() * 0.001;
  // ... render scene
}

Required Uniforms

• time (float): Animation time in seconds

Vertex Shader Attributes

• position (vec3): Vertex positions
• normal (vec3): Vertex normals
• uv (vec2): UV coordinates

Varying Variables

• vUv (vec2): UV coordinates passed to fragment shader
• vPosition (vec3): World position passed to fragment shader
• vNormal (vec3): Normal vector passed to fragment shader
• vDisplacement (float): Displacement amount for fragment effects
• vFlicker (float): Flicker intensity for fragment effects

Customization

Adjusting Hologram Intensity

Modify the displacement multipliers in the vertex shader:

float wave1 = sin(position.y * 8.0 + time * 2.0) * 0.01; // Change 0.01 for intensity

Changing Color Palette

Update the color definitions in the fragment shader:

vec3 darkPurple = vec3(0.15, 0.05, 0.25);    // Base color
vec3 mediumPurple = vec3(0.35, 0.15, 0.55);  // Mid-tone
vec3 brightPurple = vec3(0.6, 0.3, 0.8);     // Highlights

Animation Speed

Adjust time multipliers throughout both shaders:

float wave1 = sin(position.y * 8.0 + time * 2.0); // Change 2.0 for speed

Performance Notes

• The vertex shader uses multiple sine/cosine calculations per vertex
• Fragment shader includes several conditional operations
• Consider LOD (Level of Detail) for complex geometries
• Suitable for medium-complexity meshes (1k-10k vertices)

Browser Compatibility

• Requires WebGL 1.0 support
• Tested on modern browsers (Chrome 90+, Firefox 88+, Safari 14+)
• Mobile performance may vary depending on GPU capabilities

License

This project is open source. Feel free to modify and use in your projects.

Contributing

Feel free to submit improvements, bug fixes, or additional shader variations through pull requests.