runnable fragment

001GianlucaFirstShader

gianluca-shader-gallery generative glsl runnable fragment MIT
code snippet
precision mediump float;

uniform vec2 iResolution; // viewport resolution (in pixels)
uniform float iTime; // shader playback time (in seconds)
uniform vec2 iMouse; // mouse pixel coords. xy: current (if MLB down), zw: click

vec3 palette(float t) {
    //https://iquilezles.org/articles/palettes/
    vec3 a = vec3(0.1, 0.1, 0.1);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.0, 0.33, 0.67);

    return a + b * cos(6.28318 * (c * t + d));
runnable fragment

002GianlucaExperiment

gianluca-shader-gallery generative glsl runnable fragment MIT
code snippet
precision mediump float;

uniform vec2 iResolution; // viewport resolution (in pixels)
uniform float iTime; // shader playback time (in seconds)
uniform vec2 iMouse; // mouse pixel coords. xy: current (if MLB down), zw: click

vec3 palette(float t) {
    //https://iquilezles.org/articles/palettes/
    vec3 a = vec3(0.1, 0.1, 0.1);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.0, 0.33, 0.67);

    return a + b * cos(1.28318 * (c * t + d));
runnable fragment

004PunchDrunk

gianluca-shader-gallery generative glsl runnable fragment MIT
code snippet
precision mediump float;

uniform vec2 iResolution;
uniform float iTime;
uniform vec2 iMouse;

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;

    // Create two fractionings of coordinate space
    vec2 uv1 = fract(uv * 3.);
    vec2 uv2 = fract((uv - 0.5) * 10. * sin(0.5*iTime+.5)*0.5+0.5);

    // Create 1d vertical noise lines
runnable fragment

005ThirtyFRB

gianluca-shader-gallery generative glsl runnable fragment MIT
code snippet
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
precision highp int;
#else
precision mediump float;
precision mediump int;
#endif

// Twin-prime midpoints: 4, 6, 12, 18, 30, 42, 60, ...
// We met at 18. Now we're at 30. 
// Happy Birthday, FRB! Here's to (infinitely?) many more!

uniform vec2 iResolution; // viewport resolution (in pixels)
uniform float iTime; // shader playback time (in seconds)
runnable fragment

Frag Dla

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Texture with the particle profile
uniform sampler2D u_texture;

// Varying with the aggregation information
varying float v_aggregation;

/*
 * The main program
 */
void main() {
    // Use a different color for aggregated and non-aggregated particles
    vec3 particleColor = v_aggregation < 0.0 ? vec3(1.0) : vec3(0.5);
runnable fragment

Frag Dots

webgl-shader-examples pattern glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

// Common varyings
varying vec3 v_position;
varying vec3 v_normal;

/*
 * Returns a value between 1 and 0 that indicates if the pixel is inside the circle
runnable fragment

Frag Noise

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

/*
 * GLSL textureless classic 2D noise "cnoise",
 * with an RSL-style periodic variant "pnoise".
 * Author:  Stefan Gustavson (stefan.gustavson@liu.se)
 * Version: 2011-08-22
 *
runnable fragment

Frag Random

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

/*
 * Random number generator with a vec2 seed
 *
 * Credits:
 * http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0
 * https://github.com/mattdesl/glsl-random
runnable fragment

Frag Sim

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Texture with the particle profile
uniform sampler2D u_texture;

/*
 * The main program
 */
void main() {
    // Get the particle alpha value from the texture
    float alpha = texture2D(u_texture, gl_PointCoord).a;

    // Fragment shader output
    gl_FragColor = vec4(vec3(1.0), alpha);
runnable fragment

Frag Stripes

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

// Common varyings
varying vec3 v_position;
varying vec3 v_normal;

/*
 *  Calculates the diffuse factor produced by the light illumination
runnable fragment

Frag Tile

webgl-shader-examples pattern glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

/*
 * Returns a value between 1 and 0 that indicates if the pixel is inside the square
 */
float square(vec2 pixel, vec2 bottom_left, float side) {
    vec2 top_right = bottom_left + side;
runnable fragment

Frag Toon

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

// Common varyings
varying vec3 v_position;
varying vec3 v_normal;

/*
 *  Calculates the diffuse factor produced by the light illumination
runnable fragment

Frag Wave

webgl-shader-examples pattern glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

// Common varyings
varying vec3 v_position;
varying vec3 v_normal;

/*
 *  Calculates the diffuse factor produced by the light illumination