<canvas id="webgl-contents"></canvas>
<script id="vs" type="x-shader/x-vertex">
  precision highp float;

  attribute vec3 position;

  void main(void) {
    gl_Position = vec4(position, 1.0);
  }
</script>
<script id="fs" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable

  precision highp float;

  uniform float time;
  uniform vec2 mouse;
  uniform vec2 resolution;

  const float PI = 3.14159265;
  const float angle = 60.0;
  const float fov = angle * 0.5 * PI / 180.0;

  const vec3 lightDir = vec3(0.577, -0.577, 0.577);

  vec3 hsv2rgb(vec3 c){
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
  }

  float smin(float d1, float d2, float k){
    float h = exp(-k * d1) + exp(-k * d2);
    return -log(h) / k;
  }

  float dSphere(vec3 p, float r) {
    return length(p) - r;
  }

  float dBox(vec3 p, vec3 size) {
    return length(max(abs(p) - size, 0.0));
  }

  float dTorus(vec3 p, vec2 t) {
    vec2 q = vec2(length(p.xz) - t.x, p.y);
    return length(q) - t.y;
  }

  float dCapsule(vec3 p, vec3 a, vec3 b, float r) {
    vec3 pa = p - a, ba = b - a;
    float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
    return length( pa - ba*h ) - r;
  }

  vec3 sphericalPolarCoord(float radius, float radian1, float radian2) {
    return vec3(
      radius * sin(radian1) * cos(radian2),
      radius * sin(radian1) * sin(radian2),
      radius * cos(radian1)
    );
  }

  vec3 rotateX(vec3 p, float radian) {
    mat3 m = mat3(
      1.0, 0.0, 0.0,
      0.0, cos(radian), -sin(radian),
      0.0, sin(radian), cos(radian)
    );
    return m * p;
  }

  vec3 rotateY(vec3 p, float radian) {
    mat3 m = mat3(
      cos(radian), 0.0, sin(radian),
      0.0, 1.0, 0.0,
      -sin(radian), 0.0, cos(radian)
    );
    return m * p;
  }

  vec3 rotateZ(vec3 p, float radian) {
    mat3 m = mat3(
      cos(radian), -sin(radian), 0.0,
      sin(radian), cos(radian), 0.0,
      0.0, 0.0, 1.0
    );
    return m * p;
  }

  vec3 rotate(vec3 p, float radian_x, float radian_y, float radian_z) {
    mat3 mx = mat3(
      1.0, 0.0, 0.0,
      0.0, cos(radian_x), -sin(radian_x),
      0.0, sin(radian_x), cos(radian_x)
    );
    mat3 my = mat3(
      cos(radian_y), 0.0, sin(radian_y),
      0.0, 1.0, 0.0,
      -sin(radian_y), 0.0, cos(radian_y)
    );
    mat3 mz = mat3(
      cos(radian_z), -sin(radian_z), 0.0,
      sin(radian_z), cos(radian_z), 0.0,
      0.0, 0.0, 1.0
    );
    return mx * my * mz * p;
  }

  float distanceFunc(vec3 p) {
    vec3 p11 = rotate(p, radians(-time), radians(time), radians(time));
    vec3 p12 = sphericalPolarCoord(2.0, radians(time), radians(time));
    float d1 = dBox(p11 + p12, vec3(1.0));

    vec3 p21 = rotate(p, radians(time), radians(-time), radians(time));
    vec3 p22 = sphericalPolarCoord(2.0, radians(-time), radians(time));
    float d2 = dTorus(p21 + p22, vec2(2.0, 0.3));

    vec3 p31 = rotate(p, radians(time * 2.0), radians(time * 2.0), radians(time * -2.0));
    vec3 p32 = sphericalPolarCoord(2.0, radians(time), radians(-time));
    float d3 = dCapsule(p31 + p32, vec3(1.0), vec3(-1.0), 0.4);

    vec3 p4 = sphericalPolarCoord(2.0, radians(-time), radians(-time));
    float d4 = dSphere(p + p4, 1.0);

    return smin(smin(d1, d2, 2.0), smin(d3, d4, 2.0), 2.0);
  }

  vec3 getNormal(vec3 p) {
    const float d = 0.0001;
    return normalize(vec3(
      distanceFunc(p + vec3(d, 0.0, 0.0)) - distanceFunc(p + vec3(-d, 0.0, 0.0)),
      distanceFunc(p + vec3(0.0, d, 0.0)) - distanceFunc(p + vec3(0.0, -d, 0.0)),
      distanceFunc(p + vec3(0.0, 0.0, d)) - distanceFunc(p + vec3(0.0, 0.0, -d))
    ));
  }

  void main() {
    vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);

    vec3 cPos = vec3(0.0, 0.0, 10.0);
    vec3 cDir = vec3(0.0, 0.0, -1.0);
    vec3 cUp  = vec3(0.0, 1.0, 0.0);
    vec3 cSide = cross(cDir, cUp);
    float targetDepth = 1.8;

    vec3 ray = normalize(cSide * p.x + cUp * p.y + cDir * targetDepth);

    float distance = 0.0;
    float rLen = 0.0;
    vec3 rPos = cPos;
    for(int i = 0; i < 64; i++){
        distance = distanceFunc(rPos);
        rLen += distance;
        rPos = cPos + ray * rLen;
    }

    vec3 normal = getNormal(rPos);
    if(abs(distance) < 0.001){
      gl_FragColor = vec4(hsv2rgb(vec3(dot(normal, cUp) / 4.0, 0.5, 0.9)), 1.0);
    }else{
      gl_FragColor = vec4(0.0);
    }
  }
</script>