加载应用…
云澜 Clyune Clyune Component Gallery · 中文

WebGL / Shaders

Native WebGL full-screen fragment shaders: procedural noise, plasma and raymarching, all computed live on the GPU.

Tech: WebGL 1, GLSL, fragment shader, raymarching

  • Noise Fluid Background — FBM Fractal Noise + Domain Distorted Movement Background.
  • Plasma — A colour plasma with multiple sines.
  • Raymarched Metaballs — SDF light-lined integration sphere and light.
  • Voronoi — Volonoy colours: each pixel looks for the nearest seed point to it, colours it above the distance, and forms a cell-shaped piece.
  • Domain Warping — You push the coordinates by noise, then draw stripes on the distorted coordinates / On board, the rule pattern becomes a flow of ripples.
  • Spiral — Change pixels to angles θ And Radius r,Brightness sin(Arms · θ − Density · r + t),Just get the spiral arm.
  • Warped Checkerboard — floor(x)+floor(y) puppets decide black and white; first twist coordinates with sin and the grids fluctuate like fabric.
  • Tunnel — Use; to make use of; to employ 1/r Depth z、Angle θ As the circle coordinates, z Over time, it's like flying forward in a pipe.
  • Ripples — Each wave source sends round waves sin (range) / A CWC
  • Starfield — Cut the image into a grid, each with a single star randomly placed by Hash; multi- Production grids vary at different speeds to form a vision, with large and fast stars close.
  • Lava — Several groups floating up and down, each contributing r²/d² The "fields", the fields and the areas above the threshold, are connected, and clusters will merge when they approach.
  • Perspective Grid — Use 1 below the horizon / |y| The depth of vision, which increases over time, allows the grid to roll over to you; above it is a round of suns with stripes.
  • Kaleidoscope — The entire plane is copied by a small sector of n petal symmetry.
  • HSV Rotation — Angle = colour H, distance from centre = saturation S, overall brightness = visibility V.
  • Scanlines — Light strips are cleaned up from the bottom, leaving behind them a residual of index decay; the background is a scanning grid with equal spacing.
  • Twin Metaballs — Every ball produces 1/d In the field, the sum of the field is greater than the threshold, even if it is "the inner sphere of the sphere", so the borders are smoothly linked when the ball approaches.
  • Volumetric Fog — Multiple layers of noise float and collide along the wind at different speeds, deepening downwards; the pointer lights the fog like a flashlight.
  • Light Stripes — Rotates the coordinates to the stripe direction and cuts them in width into a strip, each of which takes one of the n colours by serial number; ADMINISTRATIVE stripes close to the pointer bend.
  • SDF Circle — Each pixel records the distance to the circle boundary, negative inside, Externally positive.
  • Water Surface — Multiple directions, The frequency sine wave superheaves into water surface heights, where the peak area forms a bright focal-dispersed spot; the pointer moves the phase.
  • CRT Screen — The image is quantified by pixels, followed by a horizontal scan, RGB Three-channel error (colour differential) and four-angle dark corner, simulation of old television.
  • Julia Fractal — Every pixel as a complex number z,Repeatedly z = z² + c,After how many steps? |z| Surpass 2(Run away.
  • Snowfall — Each layer cuts the picture into a grid, each with a randomly shifting snowflake and moves downwards; the next layer is larger and faster, and wind forces the snowflakes down.
  • Oil-paint Noise — The coordinates are "rotation + noise deflected" over and over, and the more complex the pattern each time, the more the paint flows on the water; the rainbow film simulates the interference colour of soap bubbles.