Plasma 3D

What this code does

- Mathematical Plasma: multiple layered sine waves create classic plasma patterns.
- Color Cycling: HSV color space rotation creates smooth rainbow transitions.
- Wave Parameters: frequency, amplitude, and phase controls for pattern customization.
- Demoscene Heritage: recreates 1980s computer demo effects in modern WebGL.
- Real-time Animation: time-based wave evolution with speed controls.
- Preset Variations: classic, psychedelic, slow waves, and high-frequency modes.

JavaScript (plain)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.z = 2
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

document.querySelector('#app').appendChild(renderer.domElement)

// Plasma shader
const plasmaShader = {
  uniforms: {
    u_time: { value: 0.0 },
    u_resolution: { value: new THREE.Vector2(width, height) }
  },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
      `,
  fragmentShader: `
    uniform float u_time;
    uniform vec2 u_resolution;

    void main() {
      vec2 uv = gl_FragCoord.xy / u_resolution.xy;
      float plasma = sin(uv.x * 10.0 + u_time) *
                     sin(uv.y * 10.0 + u_time) *
                     sin((uv.x + uv.y) * 10.0 + u_time);
      vec3 color = 0.5 + 0.5 * cos(u_time + plasma + vec3(0,2,4));
      gl_FragColor = vec4(color, 1.0);
    }
      `
}

const geometry = new THREE.PlaneGeometry(4, 4)
const material = new THREE.ShaderMaterial(plasmaShader)
const plane = new THREE.Mesh(geometry, material)
scene.add(plane)

function animate() {
  requestAnimationFrame(animate)
  material.uniforms.u_time.value += 0.016
  renderer.render(scene, camera)
}
animate()