runnable fragment

Fragment

zero-x7444ff-shader-art material glsl runnable fragment MIT
code snippet
precision mediump float;
uniform sampler2D uTexture;
uniform float uTextureFrequency;
uniform float u_time;
uniform float uHslTimeFrequency;
uniform float uHslHue;
uniform float uHslHueOffset;
uniform float uHslHueFrequency; 
uniform float uHslLightness; 
uniform float uHslLightnessVariation; 
uniform float uHslLightnessFrequency; 
uniform float uTextureOffset; 

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

Nebula Dust Cloud

stronghold-curated generative glsl runnable fragment MIT
code snippet
precision mediump float;
uniform vec2 resolution;
uniform float time;
float hash(vec2 p){return fract(sin(dot(p,vec2(31.7,91.1)))*43758.5453);} 
float noise(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*(3.0-2.0*f);return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),mix(hash(i+vec2(0,1)),hash(i+1.0),f.x),f.y);} 
float fbm(vec2 p){float v=0.0,a=0.5;for(int i=0;i<6;i++){v+=a*noise(p);p*=2.03+0.05*sin(time);a*=0.52;}return v;}
void main(){
 vec2 uv=(gl_FragCoord.xy-0.5*resolution.xy)/min(resolution.x,resolution.y);
 float n=fbm(uv*2.2+vec2(time*0.025,-time*0.015));
 float d=smoothstep(0.78,0.2,length(uv));
 vec3 col=mix(vec3(0.03,0.02,0.08), vec3(0.85,0.18,0.65), n);
 col=mix(col, vec3(0.12,0.55,1.0), smoothstep(0.45,0.85,fbm(uv*4.0-time*0.02)));
 gl_FragColor=vec4(col*n*d,1.0);
}
runnable fragment

Piano

suboptimal-shader-tutorials generative glsl runnable fragment MIT
code snippet
precision mediump float;

// #extension GL_GOOGLE_include_directive : enable
#include "../common/functions.glsl"

// shapes
float sdRoundBox(vec3 p, vec3 b, float r);
// space
float opUnion(float d1, float d2);
vec3 opBend(in vec3 p, float bendFactor);
vec3 opSpaceRepetition(in vec3 p, in vec3 s, inout vec3 id);
// lighting
vec3 calcNormal(vec3 p);
vec3 calcLighting(vec3 ro, vec3 n);
runnable fragment

Shader

suboptimal-shader-tutorials generative glsl runnable fragment MIT
code snippet
precision mediump float;

uniform vec2 u_resolution;
uniform sampler2D u_texture_0;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  uv.x = uv.x * u_resolution.x / u_resolution.y;

  vec3 color = vec3(0.0);
  color = vec3(uv, 0.0);

  // note: add this to VS Code settings.json when using the glsl canvas extension
  // "glsl-canvas.textures": {
runnable fragment

Shader

suboptimal-shader-tutorials generative glsl runnable fragment MIT
code snippet
// Helful Resources
// ----------------
// Ray Marching Blog Post by Michael Walczyk
// https://michaelwalczyk.com/blog-ray-marching.html
// Inigo Quilez SDF Functions
// https://iquilezles.org/articles/distfunctions/

precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;

const float NUM_OF_STEPS = 128.0;
const float MIN_DIST_TO_SDF = 0.001;
runnable fragment

Shader

suboptimal-shader-tutorials generative glsl runnable fragment MIT
code snippet
precision lowp float;

varying vec4 v_normal;

void main() {
  // ambient lighting (global illuminance)
  vec3 ambient = vec3(0.5, 0.5, 0.5); // color - grey

  // diffuse (lambertian) lighting
  // lightColor, lightSource, normal, diffuseStrength
  vec3 normal = normalize(v_normal.xyz);
  vec3 lightColor = vec3(1.0, 1.0, 1.0); // color - white
  vec3 lightSource = vec3(1.0, 1.0, 1.0); // coord - (1, 0, 0)
  float diffuseStrength = max(0.0, dot(lightSource, normal));
runnable fragment

Shader

suboptimal-shader-tutorials generative glsl runnable fragment MIT
code snippet
precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;

vec2 randomGradient(vec2 p) {
  float x = dot(p, vec2(123.4, 234.5));
  float y = dot(p, vec2(234.5, 345.6));
  vec2 gradient = vec2(x, y);
  gradient = sin(gradient);
  gradient = gradient * 43758.5453;
  // gradient = sin(gradient);
  gradient = sin(gradient + u_time);
  return gradient;
runnable fragment

Slow Shader

suboptimal-shader-tutorials pattern glsl runnable fragment MIT
code snippet
precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;

// reference: https://iquilezles.org/articles/distfunctions2d/
float sdBox(in vec2 p, in vec2 b) {
  vec2 d = abs(p) - b;
  return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
}

void main() {
  vec2 uv = 2.0 * gl_FragCoord.xy / u_resolution - 1.0;
  uv.x = uv.x * u_resolution.x / u_resolution.y;