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 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 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 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;