Procedural Noise Texture

What this code does

- Fractal Noise: combines multiple octaves of simplex noise for complex patterns.
- Vertex Displacement: noise modifies geometry vertices for 3D surface effects.
- Color Modes: grayscale, rainbow HSL cycling, and fire color palettes.
- Octave Control: layered noise frequencies with persistence and lacunarity parameters.
- Real-time Animation: time-based noise evolution creates flowing organic patterns.
- Noise Presets: clouds, turbulence, marble, and electric effect configurations.

JavaScript (plain)

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

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

// Noise shader
const noiseShader = {
  uniforms: {
    u_time: { value: 0.0 },
    u_scale: { value: 5.0 },
    u_speed: { value: 1.0 }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
      `,
  fragmentShader: `
    uniform float u_time;
    uniform float u_scale;
    uniform float u_speed;
    varying vec2 vUv;

    float noise(vec2 p) {
      return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
    }

    void main() {
      vec2 pos = vUv * u_scale + u_time * u_speed;
      float n = noise(pos);
      vec3 color = vec3(n);
      gl_FragColor = vec4(color, 1.0);
    }
      `
}

const geometry = new THREE.PlaneGeometry(4, 4)
const material = new THREE.ShaderMaterial(noiseShader)
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()