canvas/webglshaders/polyhedra2.html

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Polyhedra Playground 2 </title>
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/page.css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
</head>

<body onload="init()">
   <canvas id="canvas" width="640" height="640"></canvas>
   <a href="#" id="fullscreen">Toggle Full Screen</a>

</body>
<script src="js/dat.gui.min.js"></script>
<script src="js/stats.min.js"></script>
<script id="vertex" type="x-shader">
attribute vec2 aVertexPosition;

void main()
{
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
   </script>
<script id="fragment" type="x-shader">
#ifdef GL_ES
precision highp float;
#endif

uniform float time;
uniform vec2 resolution;
uniform vec3 cameraPos;
uniform vec3 cameraLookat;
uniform vec3 lightDir;
uniform vec3 lightColour;
uniform float specular;
uniform float specularHardness;
uniform vec3 diffuse;
uniform float ambientFactor;
uniform bool ao;
uniform bool shadows;
uniform bool rotateWorld;
uniform bool antialias;
uniform bool dof;

uniform int Iterations;
uniform float Scale;
uniform float Size;
uniform vec3 plnormal;
uniform vec3 Offset;
uniform float Angle1;
uniform vec3 Rot1;
uniform float Angle2;
uniform vec3 Rot2;

#define Phi (.5*(1.+sqrt(5.)))

vec3 n1 = normalize(vec3(-Phi,Phi-1.0,1.0));
vec3 n2 = normalize(vec3(1.0,-Phi,Phi+1.0));
vec3 n3 = normalize(vec3(0.0,0.0,-1.0));
mat4 M;

#define BAILOUT 1000.0
#define AO_SAMPLES 4
#define RAY_DEPTH 128
#define MAX_DEPTH 100.0
#define SHADOW_RAY_DEPTH 32
#define DISTANCE_MIN 0.0001
#define PI 3.14159265

const vec2 delta = vec2(DISTANCE_MIN/10.0, 0.0);


vec3 RotateY(vec3 p, float a)
{
float c,s;
vec3 q=p;
c = cos(a);
s = sin(a);
p.x = c * q.x + s * q.z;
p.z = -s * q.x + c * q.z;
return p;
}

// Icosahedral polyhedra Distance Estimator (Knighty 2011 some of the code is from Syntopia)
// Original DE can be found here: https://github.com/Syntopia/Fragmentarium/blob/master/Fragmentarium-Source/Examples/Knighty%20Collection/Icosahedral_polyhedra_iterated_20.frag
float Dist(vec3 z)
{
if (rotateWorld) z = RotateY(z, sin(time*0.05)*PI);

// this version combines DEs to given interesting but complicated combinations...
float s=1.;
float t;
// Folds.
//Dodecahedral.. you can use other sets of foldings!
z = abs(z);
t=dot(z,n1); if (t>0.0) { z-=2.0*t*n1; }
t=dot(z,n2); if (t>0.0) { z-=2.0*t*n2; }
z = abs(z);
t=dot(z,n1); if (t>0.0) { z-=2.0*t*n1; }
t=dot(z,n2); if (t>0.0) { z-=2.0*t*n2; }
z = abs(z);
//combine DEs... explore different combinations
float dmin=dot(z-vec3(Size,0.,0.),plnormal);

for (int i=0; i<4; i++)
{
   // Rotate, scale, rotate (we need to cast to a 4-component vector).
   z = (M*vec4(z,1.0)).xyz;
   s /= Scale;
   
   // Folds.
   //Dodecahedral.. you can use other sets of foldings!
   z = abs(z);
   t=dot(z,n1); if (t>0.0) { z-=2.0*t*n1; }
   t=dot(z,n2); if (t>0.0) { z-=2.0*t*n2; }
   z = abs(z);
   t=dot(z,n1); if (t>0.0) { z-=2.0*t*n1; }
   t=dot(z,n2); if (t>0.0) { z-=2.0*t*n2; }
   z = abs(z);
   
   //combine DEs... explore different combinations ;)
   //the base DE is the distance to the plane going through vec3(Size,0.,0.) and which normal is plnormal
   dmin=max(dmin,s*dot(z-vec3(Size,0.,0.),plnormal));
   
   if (i == Iterations - 1) break;
}
return abs(dmin);
}

// Based on original by IQ - optimized to remove a divide
float CalcAO(vec3 p, vec3 n)
{
float r = 0.0;
float w = 1.0;
for (int i=1; i<=AO_SAMPLES; i++)
{
   float d0 = float(i) * 0.3;
   r += w * (d0 - Dist(p + n * d0));
   w *= 0.5;
}
return 1.0 - clamp(r,0.0,1.0);
}

// Based on original code by IQ
float SoftShadow(vec3 ro, vec3 rd, float k)
{
float res = 1.0;
float t = 0.01;          // min-t see http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm
for (int i=0; i<SHADOW_RAY_DEPTH; i++)
{
   float h = Dist(ro + rd * t);
   res = min(res, k*h/t);
   t += h;
   if (t > 10.0) break; // max-t
}
return res;
}

vec3 GetNormal(vec3 pos, float s)
{
vec3 n;
// optimized normal calculation - based on final distance to surface see 704 demo
n.x = s - Dist(pos - delta.xyy);
n.y = s - Dist(pos - delta.yxy);
n.z = s - Dist(pos - delta.yyx);
//n.x = Dist( pos + delta.xyy ) - Dist( pos - delta.xyy );
//n.y = Dist( pos + delta.yxy ) - Dist( pos - delta.yxy );
//n.z = Dist( pos + delta.yyx ) - Dist( pos - delta.yyx );

return normalize(n);
}

// Based on a shading method by Ben Weston. Added AO and SoftShadows to original.
vec4 Shading(vec3 pos, vec3 rd, vec3 norm)
{
vec3 light = lightColour * max(0.0, dot(norm, lightDir));
vec3 heading = normalize(-rd + lightDir);

float spec = pow(max(0.0, dot(heading, norm)), specularHardness);
light = (diffuse * light) + (spec * specular * lightColour);
if (shadows) light *= SoftShadow(pos, lightDir, 64.0);
if (ao) light += CalcAO(pos, norm) * ambientFactor;

return vec4(light, 1.0);
}

// Original method by David Hoskins
vec3 Sky(in vec3 rd)
{
float sunAmount = max(dot(rd, lightDir), 0.0);
float v = pow(1.0 - max(rd.y,0.0),6.);
vec3 sky = mix(vec3(.1, .2, .3), vec3(.32, .32, .32), v);
sky += lightColour * sunAmount * sunAmount * .25 + lightColour * min(pow(sunAmount, 800.0)*1.5, .3);

return clamp(sky, 0.0, 1.0);
}

// Camera function by TekF
// Compute ray from camera parameters
vec3 GetRay(vec3 dir, vec2 pos)
{
pos = pos - 0.5;
pos.x *= resolution.x/resolution.y;

dir = normalize(dir);
vec3 right = normalize(cross(vec3(0.,1.,0.),dir));
vec3 up = normalize(cross(dir,right));

return dir + right*pos.x + up*pos.y;
}

vec4 March(vec3 ro, vec3 rd)
{
float t = 0.0;
float d = 1.0;
for (int i=0; i<RAY_DEPTH; i++)
{
   vec3 p = ro + rd * t;
   d = Dist(p);
   if (d < DISTANCE_MIN)
   {
      return vec4(p, d);
   }
   t += d*.85;
   if (t >= MAX_DEPTH) break;
}
return vec4(0.0);
}

mat4 rotationMatrix(vec3 v, float angle)
{
float c = cos(radians(angle));
float s = sin(radians(angle));

return mat4(c + (1.0 - c) * v.x * v.x, (1.0 - c) * v.x * v.y - s * v.z, (1.0 - c) * v.x * v.z + s * v.y, 0.0,
   (1.0 - c) * v.x * v.y + s * v.z, c + (1.0 - c) * v.y * v.y, (1.0 - c) * v.y * v.z - s * v.x, 0.0,
   (1.0 - c) * v.x * v.z - s * v.y, (1.0 - c) * v.y * v.z + s * v.x, c + (1.0 - c) * v.z * v.z, 0.0,
   0.0, 0.0, 0.0, 1.0);
}

mat4 translate(vec3 v) {
return mat4(1.0,0.0,0.0,0.0,
   0.0,1.0,0.0,0.0,
   0.0,0.0,1.0,0.0,
   v.x,v.y,v.z,1.0);
}

mat4 scale4(float s) {
return mat4(s,0.0,0.0,0.0,
   0.0,s,0.0,0.0,
   0.0,0.0,s,0.0,
   0.0,0.0,0.0,1.0);
}

void main()
{
const int ANTIALIAS_SAMPLES = 4;
const int DOF_SAMPLES = 8;

// precalc - once...
mat4 fracRotation2 = rotationMatrix(normalize(Rot2), Angle2);
mat4 fracRotation1 = rotationMatrix(normalize(Rot1), Angle1);
M = fracRotation2 * translate(Offset) * scale4(Scale) * translate(-Offset) * fracRotation1;

vec4 res = vec4(0.0);

if (antialias)
{
   float d_ang = 2.*PI / float(ANTIALIAS_SAMPLES);
   float ang = d_ang * 0.33333;
   float r = 0.3;
   for (int i = 0; i < ANTIALIAS_SAMPLES; i++)
   {
      vec2 p = vec2((gl_FragCoord.x + cos(ang)*r) / resolution.x, (gl_FragCoord.y + sin(ang)*r) / resolution.y);
      vec3 ro = cameraPos;
      vec3 rd = normalize(GetRay(cameraLookat-cameraPos, p));
      vec4 _res = March(ro, rd);
      if (_res.a != 0.0) res.xyz += clamp(Shading(_res.xyz, rd, GetNormal(_res.xyz, _res.a)).xyz, 0.0, 1.0);
      else res.xyz += Sky(rd);
      ang += d_ang;
   }
   res.xyz /= float(ANTIALIAS_SAMPLES);
}
else if (dof)
{
   vec2 p = gl_FragCoord.xy / resolution.xy;
   vec3 ro = cameraPos;
   vec3 rd = normalize(GetRay(cameraLookat-cameraPos, p));
   vec4 _res = March(ro, rd);
   
   float d_ang = 2.*PI / float(DOF_SAMPLES);
   float ang = d_ang * 0.33333;
   // cheap DOF!
   float r = abs(cameraLookat.z - _res.z) * 3.0;
   for (int i = 0; i < DOF_SAMPLES; i++)
   {
      p = vec2((gl_FragCoord.x + cos(ang)*r) / resolution.x, (gl_FragCoord.y + sin(ang)*r) / resolution.y);
      ro = cameraPos;
      rd = normalize(GetRay(cameraLookat-cameraPos, p));
      _res = March(ro, rd);
      if (_res.a != 0.0) res.xyz += clamp(Shading(_res.xyz, rd, GetNormal(_res.xyz, _res.a)).xyz, 0.0, 1.0);
      else res.xyz += Sky(rd);
      ang += d_ang;
   }
   res.xyz /= float(DOF_SAMPLES);
}
else
{
   vec2 p = gl_FragCoord.xy / resolution.xy;
   vec3 ro = cameraPos;
   vec3 rd = normalize(GetRay(cameraLookat-cameraPos, p));
   res = March(ro, rd);
   if (res.a != 0.0) res.xyz = clamp(Shading(res.xyz, rd, GetNormal(res.xyz, res.a)).xyz, 0.0, 1.0);
   else res.xyz = Sky(rd);
}

gl_FragColor = vec4(res.xyz, 1.0);
}
   </script>

<script type="text/javascript">
   var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||
      function (c) { window.setTimeout(c, 15) };
   var config = {
      camera: {
         //x: 0.0, y: 0.0, z: 2.5
         x: 1.0, y: 0.0, z: 2.0
      },
      lookat: {
         x: 0.0, y: 0.0, z: 0.0
      },
      lightDir: {
         x: -14.0, y: 1.5, z: 15.0
      },
      lightColour: {
         r: 1.2, g: 0.7, b: 0.2
      },
      surface: {
         specular: 64.0,
         specularHardness: 48.0,
         diffuse: 0.85,
         ambientFactor: 0.35
      },
      global: {
         ao: true,
         shadows: true,
         rotateWorld: true,
         antialias: "None"// None|Classic|DOF
      },
      polyhedra: {
         /*iterations: 2,
         scale: 3.75,
         size: .65,
         angle1: 25,
         angle2: 75*/
         iterations: 2,
         scale: 3.33,
         size: .42,
         angle1: 62,
         angle2: -53
      }
   };

   var pause = false;
   var stats = new Stats();
   var aspect, gl;
   function init() {
      document.addEventListener('keydown', function (e) {
         switch (e.keyCode) {
            case 27: // ESC
               pause = !pause;
               break;
         }
      }, false);

      // add GUI controls
      var mobile = (navigator.userAgent.indexOf("Android") !== -1);
      var gui = new dat.GUI();
      var panel = gui.addFolder('Camera Position');
      panel.add(config.camera, "x").min(-16.0).max(16.0).step(0.1);
      panel.add(config.camera, "y").min(-16.0).max(16.0).step(0.1);
      panel.add(config.camera, "z").min(-64.0).max(64.0).step(0.1);
      if (!mobile) panel.open();
      panel = gui.addFolder('Camera LookAt');
      panel.add(config.lookat, "x").min(-16.0).max(16.0).step(0.1);
      panel.add(config.lookat, "y").min(-16.0).max(16.0).step(0.1);
      panel.add(config.lookat, "z").min(-16.0).max(16.0).step(0.1);
      panel = gui.addFolder('Light Direction');
      panel.add(config.lightDir, "x").min(-16.0).max(16.0).step(0.1);
      panel.add(config.lightDir, "y").min(-16.0).max(16.0).step(0.1);
      panel.add(config.lightDir, "z").min(-16.0).max(16.0).step(0.1);
      panel = gui.addFolder('Light Colour');
      panel.add(config.lightColour, "r").min(0.0).max(3.0).step(0.1);
      panel.add(config.lightColour, "g").min(0.0).max(3.0).step(0.1);
      panel.add(config.lightColour, "b").min(0.0).max(3.0).step(0.1);
      panel = gui.addFolder('Surface');
      panel.add(config.surface, "specular").min(0).max(64);
      panel.add(config.surface, "specularHardness").min(16).max(1024).step(16);
      panel.add(config.surface, "diffuse").min(0).max(1).step(0.05);
      panel.add(config.surface, "ambientFactor").min(0).max(1).step(0.05);
      panel = gui.addFolder('Global');
      panel.add(config.global, "antialias", ["None", "Classic", "DOF"]).name("Anti Alias");
      panel.add(config.global, "shadows").name("Shadows");
      panel.add(config.global, "ao").name("Ambient Occlusion");
      panel.add(config.global, "rotateWorld").name("Rotate World");
      if (!mobile) panel.open();
      panel = gui.addFolder('Polyhedra');
      panel.add(config.polyhedra, "iterations").min(1).max(4).step(1);
      panel.add(config.polyhedra, "scale").min(0).max(5);
      panel.add(config.polyhedra, "size").min(0).max(2);
      //vec3 plnormal 
      //vec3 offset
      panel.add(config.polyhedra, "angle1").min(-180).max(180).step(1);
      //panel.add(config.polyhedra, "rot1").min(-180).max(180).step(1);
      panel.add(config.polyhedra, "angle2").min(-180).max(180).step(1);
      //panel.add(config.polyhedra, "rot2").min(-180).max(180).step(1);

      if (!mobile) panel.open();

      document.body.appendChild(stats.domElement);

      // create webgl context on the canvas element
      var canvas = document.getElementById("canvas");
      aspect = canvas.width / canvas.height;
      try {
         gl = canvas.getContext("experimental-webgl");
      }
      catch (e) {
         document.write("Whoops! No useful WEB-GL impl available. Shame on you and your browser vendor.<br>" + e.message);
         return;
      }
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);

      // get the vertex and fragment shader source
      var v = document.getElementById("vertex").firstChild.nodeValue;
      var f = document.getElementById("fragment").firstChild.nodeValue;

      // compile and link the shaders
      var vs = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vs, v);
      gl.compileShader(vs);

      var fs = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fs, f);
      gl.compileShader(fs);

      var program = gl.createProgram();
      gl.attachShader(program, vs);
      gl.attachShader(program, fs);
      gl.linkProgram(program);

      // debug shader compile status
      var error = false;
      if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
         error = true;
         console.log(gl.getShaderInfoLog(vs));
      }

      if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
         error = true;
         console.log(gl.getShaderInfoLog(fs));
      }

      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
         error = true;
         console.log(gl.getProgramInfoLog(program));
      }
      if (error) return;

      var firstTime = Date.now();
      (f = function () {
         if (!pause) {
            stats.begin();

            // create vertices to fill the canvas with a single quad 
            var vertices = new Float32Array(
               [
                  -1, 1 * aspect, 1, 1 * aspect, 1, -1 * aspect,
                  -1, 1 * aspect, 1, -1 * aspect, -1, -1 * aspect
               ]);

            var vbuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            var triCount = 2,
               numItems = vertices.length / triCount;

            gl.useProgram(program);

            var time = (Date.now() - firstTime) / 1000.0;
            program.time = gl.getUniformLocation(program, "time");
            gl.uniform1f(program.time, time);

            program.resolution = gl.getUniformLocation(program, "resolution");
            gl.uniform2f(program.resolution, canvas.width, canvas.height);

            program.cameraPos = gl.getUniformLocation(program, "cameraPos");
            gl.uniform3f(program.cameraPos, config.camera.x, config.camera.y, config.camera.z);

            program.cameraLookat = gl.getUniformLocation(program, "cameraLookat");
            gl.uniform3f(program.cameraLookat, config.lookat.x, config.lookat.y, config.lookat.z);

            program.lightDir = gl.getUniformLocation(program, "lightDir");
            // pre normalise light dir
            var x = config.lightDir.x, y = config.lightDir.y, z = config.lightDir.z;
            var len = x * x + y * y + z * z;
            len = 1.0 / Math.sqrt(len);
            gl.uniform3f(program.lightDir, config.lightDir.x * len, config.lightDir.y * len, config.lightDir.z * len);

            program.lightColour = gl.getUniformLocation(program, "lightColour");
            gl.uniform3f(program.lightColour, config.lightColour.r, config.lightColour.g, config.lightColour.b);

            program.specular = gl.getUniformLocation(program, "specular");
            gl.uniform1f(program.specular, config.surface.specular);

            program.specularHardness = gl.getUniformLocation(program, "specularHardness");
            gl.uniform1f(program.specularHardness, config.surface.specularHardness);

            program.diffuse = gl.getUniformLocation(program, "diffuse");
            gl.uniform3f(program.diffuse, config.surface.diffuse, config.surface.diffuse, config.surface.diffuse);

            program.ambientFactor = gl.getUniformLocation(program, "ambientFactor");
            gl.uniform1f(program.ambientFactor, config.surface.ambientFactor);

            program.rotateWorld = gl.getUniformLocation(program, "rotateWorld");
            gl.uniform1f(program.rotateWorld, config.global.rotateWorld);

            program.ao = gl.getUniformLocation(program, "ao");
            gl.uniform1f(program.ao, config.global.ao);

            program.shadows = gl.getUniformLocation(program, "shadows");
            gl.uniform1f(program.shadows, config.global.shadows);

            program.antialias = gl.getUniformLocation(program, "antialias");
            gl.uniform1f(program.antialias, (config.global.antialias === "Classic"));
            program.dof = gl.getUniformLocation(program, "dof");
            gl.uniform1f(program.dof, (config.global.antialias === "DOF"));

            program.Iterations = gl.getUniformLocation(program, "Iterations");
            gl.uniform1i(program.Iterations, config.polyhedra.iterations);

            program.Size = gl.getUniformLocation(program, "Size");
            gl.uniform1f(program.Size, config.polyhedra.size);

            program.plnormal = gl.getUniformLocation(program, "plnormal");
            gl.uniform3f(program.plnormal, 1, 0, 0); // NOTE: must be normalised!

            program.Offset = gl.getUniformLocation(program, "Offset");
            gl.uniform3f(program.Offset, 0.850650808, 0.525731112, 0.0);

            program.Scale = gl.getUniformLocation(program, "Scale");
            gl.uniform1f(program.Scale, config.polyhedra.scale);

            program.Angle1 = gl.getUniformLocation(program, "Angle1");
            gl.uniform1f(program.Angle1, config.polyhedra.angle1);

            program.Rot1 = gl.getUniformLocation(program, "Rot1");
            gl.uniform3f(program.Rot1, 1, 1, 1);

            program.Angle2 = gl.getUniformLocation(program, "Angle2");
            gl.uniform1f(program.Angle2, config.polyhedra.angle2);

            program.Rot2 = gl.getUniformLocation(program, "Rot2");
            gl.uniform3f(program.Rot2, 1, 1, 1);

            program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
            gl.enableVertexAttribArray(program.aVertexPosition);
            gl.vertexAttribPointer(program.aVertexPosition, triCount, gl.FLOAT, false, 0, 0);

            gl.drawArrays(gl.TRIANGLES, 0, numItems);

            stats.end();
            //pause = true;
         }
         requestAnimationFrame(f);
      })();
   }
</script>
<script src="js/utils.js"></script>

</html>