d/d

WebGL & shaders

GLSL Water Shader Generator

Shader Water Generator is a live Three.js editor for shaping an animated GLSL ocean surface. Start with the height, direction, frequency, and speed of the large waves, then add smaller procedural noise to break up the mesh. Depth color, surface color, opacity, shininess, Fresnel response, and contrast control the final material. The current setup exports as a standalone HTML scene.

What it does

  • Preview an animated water plane in real time and inspect it with damped orbit controls.
  • Control large-wave elevation, speed, and independent X and Z frequencies.
  • Add small-wave detail with coherent noise elevation, frequency, and speed.
  • Blend depth and surface colors according to the displaced elevation.
  • Tune opacity, specular shininess, Fresnel power, color offset, and color contrast.
  • Download the current shader settings as a standalone Three.js HTML scene.

How to use Shader Water Generator

  1. Shape the base waves

    Set the large-wave elevation, speed, and X and Z frequencies while watching the plane update.

  2. Add surface detail

    Use noise elevation, frequency, and speed to break up the repeating pattern of the larger waves.

  3. Tune the material

    Choose depth and surface colors, then refine opacity, shininess, Fresnel power, offset, and contrast.

  4. Export the scene

    Download water-shader.html with the current uniform values, GLSL stages, Three.js scene, camera, and orbit controls.

Formats, compatibility, and limits

Inputs

  • Numeric controls for base-wave elevation, two-axis frequency, and speed.
  • Numeric controls for small-wave noise elevation, frequency, and speed.
  • Depth and surface colors plus opacity, shininess, Fresnel, offset, and contrast values.

Outputs

  • A standalone water-shader.html file containing the current vertex shader, fragment shader, uniforms, Three.js scene, and animation loop.

Compatibility

  • The editor renders with Three.js WebGLRenderer and works best on a device with hardware-accelerated WebGL.
  • Pointer or trackpad input can rotate and zoom the camera through OrbitControls.
  • The controls collapse into a bottom panel on smaller screens.

Known limits

  • The exported HTML references Three.js and OrbitControls from CDNs, so it is not fully offline.
  • The mesh size, 512 × 512 segment density, four small-noise iterations, light position, and camera defaults are fixed by the generator.
  • The export is an interactive HTML scene; there is no built-in PNG, video, raw shader-file, or project-bundle export.
  • High mesh density may render slowly on lower-powered GPUs.

Privacy and processing

  • The tool does not accept a media file or upload shader settings.
  • Shader edits, rendering, and HTML generation happen in the browser.
  • The generated download uses a temporary local Blob URL.

How the ocean surface shader works

The vertex shader starts with a densely subdivided plane and moves its vertices. Two multiplied sine waves create the broad directional motion. Four octaves of three-dimensional coherent noise subtract smaller, less regular details. By sampling nearby displaced positions, the shader can approximate a surface normal. In the fragment stage, elevation mixes the depth and surface colors. That reconstructed normal, together with the fixed light and camera direction, produces a Blinn-style highlight and a Fresnel edge response. Three.js handles the camera, matrices, clock, renderer, and orbit controls. Editing a value updates the shader uniforms without rebuilding the scene.

Questions about Shader Water Generator

What does Shader Water Generator export?

It downloads one HTML file containing the configured GLSL shaders, uniform values, Three.js scene setup, camera, orbit controls, and animation loop.

Does the exported water shader work offline?

Not without a small change. The generated HTML loads Three.js and OrbitControls from external CDNs, so it needs network access unless you replace those script references with local files.

Can I export a PNG or video?

No. The current export path produces an interactive HTML scene only.

How are the small waves generated?

The vertex shader layers four iterations of coherent three-dimensional noise over the large sine-wave displacement, reducing each iteration's contribution.