canvas/webglshaders/distancefield9.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>Circles of Hell</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="480" height="300"></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 sunDir;
uniform vec3 sunColour;
uniform vec3 diffuse;
uniform float ambient;
uniform bool ao;
uniform bool shadows;
uniform bool postEffects;
uniform float seed;
uniform bool fog;
uniform float fogC;
uniform float fogB;
uniform int aapass;
uniform sampler2D texture0;

#define GAMMA 0.8
#define CONTRAST 1.2
#define SATURATION 1.4
#define BRIGHTNESS 1.4
#define RAY_DEPTH 200
#define MAX_DEPTH 256.0
#define SHADOW_RAY_DEPTH 48
#define AO_SAMPLES 4
#define FRACT_NOISE_DEPTH 6
#define DISTANCE_MIN 0.005
#define PI 3.14159265

const vec2 delta = vec2(DISTANCE_MIN, 0.);

float NoiseL(in vec2 x)
{
return texture2D(texture0,(x+vec2(0.5,0.5))/512.0,-100.0).x;
}

vec4 mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x)
{
return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}

vec2 fade(vec2 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}

// Classic Perlin noise
float NoiseT(vec2 P)
{
vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
Pi = mod289(Pi); // To avoid truncation effects in permutation
vec4 ix = Pi.xzxz;
vec4 iy = Pi.yyww;
vec4 fx = Pf.xzxz;
vec4 fy = Pf.yyww;

vec4 i = permute(permute(ix) + iy);

vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;
vec4 gy = abs(gx) - 0.5 ;
vec4 tx = floor(gx + 0.5);
gx = gx - tx;

vec2 g00 = vec2(gx.x,gy.x);
vec2 g10 = vec2(gx.y,gy.y);
vec2 g01 = vec2(gx.z,gy.z);
vec2 g11 = vec2(gx.w,gy.w);

vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
g00 *= norm.x;  
g01 *= norm.y;  
g10 *= norm.z;  
g11 *= norm.w;  

float n00 = dot(g00, vec2(fx.x, fy.x));
float n10 = dot(g10, vec2(fx.y, fy.y));
float n01 = dot(g01, vec2(fx.z, fy.z));
float n11 = dot(g11, vec2(fx.w, fy.w));

vec2 fade_xy = fade(Pf.xy);
vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
return 2.3 * n_xy;
}

float Noise(in vec2 x)
{
vec2 p = floor(x);
vec2 f = fract(x);
f = f*f*(3.0-2.0*f);
float n = p.x + p.y*57.0;
float res = mix(mix( texture2D(texture0,(n+vec2(0.5,0.5))/512.0,-100.0).x, texture2D(texture0,(n+1.0+vec2(0.5,0.5))/512.0,-100.0).x,f.x),
                mix( texture2D(texture0,(n+57.0+vec2(0.5,0.5))/512.0,-100.0).x, texture2D(texture0,(n+58.0+vec2(0.5,0.5))/512.0,-100.0).x,f.x),f.y);
return res;
}

float FractalNoise(in vec2 xy)
{
float w = 0.7;
float f = 0.0;
for (int i = 0; i < FRACT_NOISE_DEPTH - 2 - 2; i++)
{
   f += Noise(xy) * w;
   w *= 0.5;
   xy *= 2.333;
}
return f;
}

float FractalNoiseM(in vec2 xy)
{
float w = 0.7;
float f = 0.0;
for (int i = 0; i < FRACT_NOISE_DEPTH - 2; i++)
{
   f += NoiseT(xy) * w;
   w *= 0.5;
   xy *= 2.333;
}
return f;
}

float FractalNoiseH(in vec2 xy)
{
float w = 0.7;
float f = 0.0;
for (int i = 0; i < FRACT_NOISE_DEPTH; i++)
{
   f += NoiseT(xy) * w;
   w *= 0.5;
   xy *= 2.333;
}
return f;
}

float Terrain(vec2 pos)
{
return Noise(pos.xy*0.899)*.5335 - FractalNoiseH(pos.yx*0.271)*1.593 - Noise(cos(pos.yx*1.673)+sin(pos.xy*0.615));
}

float TerrainM(vec2 pos)
{
return Noise(pos.xy*0.899)*.5335 - FractalNoiseM(pos.yx*0.271)*1.593 - Noise(cos(pos.yx*1.673)+sin(pos.xy*0.615));
}

// This should return continuous positive values when outside and negative values inside,
// which roughly indicate the distance of the nearest surface.
// NOTE! for increased performance, but lower Shadow/AO/intersect accuracy, change Terrain() to TerrainM() here
float Dist(vec3 pos)
{
return //min(
      pos.y - TerrainM(pos.xz);
      //dot(pos-vec3(0.0,WATER_HEIGHT-Noise(pos.zx*50.0)*0.0005,0.0), vec3(0.0,1.0,0.0))
   //);
}

float DistN(vec3 pos)
{
return //min(
      pos.y - Terrain(pos.xz);
      //dot(pos-vec3(0.0,WATER_HEIGHT-Noise(pos.zx*50.0)*0.0005,0.0), vec3(0.0,1.0,0.0))
   //);
}

vec3 GetNormal(vec3 pos)
{
vec3 n;
n.x = DistN( pos + delta.xyy ) - DistN( pos - delta.xyy );
n.y = DistN( pos + delta.yxy ) - DistN( pos - delta.yxy );
n.z = DistN( pos + delta.yyx ) - DistN( pos - delta.yyx );

return normalize(n);
}

const vec3 skyColour = vec3(2.75, 0.75, 0.65);

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

return clamp(sky, 0.0, 1.0);
}

vec3 DepthFog(in vec3 rgb, in float distance, in vec3 rd, in vec3 ro)
{
float fogAmount = 0.0;
if (fog) fogAmount = fogC * exp(-ro.y*fogB) * (1.0-exp(-distance*rd.y*fogB))/rd.y;
return mix(rgb, Sky(rd), clamp(fogAmount, 0.0, 1.0));
}

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

// Based on original code by IQ
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.2;
   r += w * (d0 - Dist(p + n * d0));
   w *= 0.5;
}
return 1.0 - clamp(r,0.0,1.0);
}

// "Natural light" shading - main sun light with soft shadows, sky light with AO and indirect sun bounce light with AO
// see http://iquilezles.org/www/articles/outdoorslighting/outdoorslighting.htm
const float specularHardness = 64.0;
const float specular = 0.25;  
const vec3 bassColor = vec3(1.0, 0.4, 0.1);
const vec3 grassColor = vec3(0.2, 0.0, 0.0);
const vec3 rockColour = vec3(1.0, 0.6, 0.6);
vec3 Shading(vec3 pos, vec3 rd, vec3 norm, vec3 ro)
{
float sun = clamp(dot(norm, sunDir), 0.0, 1.0);

// start with rock colour, add in snow on peaks and grass in valleys
float spec = 0.0;
float dif = diffuse.x;
float snow = Noise(norm.yz*2.111) - 0.5;
float grass = NoiseL(norm.xy*0.973) - 0.2;
float bass = NoiseL(norm.xy*0.666) + 0.2;
vec3 heading = normalize(-rd + sunDir);
vec3 colour = rockColour;

// apply norm.y so right angled surfaces receive less snow colour
float mixSnow = clamp(pos.y - snow + norm.y, 0.0, 1.0);
// blend snow colour and also the other lighting components such as specular by the snow coverage amount
colour = mix(colour, vec3(1.0, 0.9, 0.1), mixSnow);
spec = mix(0.0, pow(max(0.0, dot(heading, norm)), specularHardness), mixSnow);

colour = mix(colour, grassColor, 1.0 - clamp(pos.y + grass, 0.0, 1.0));

colour = mix(colour, bassColor, 1.0 - clamp(pos.y + bass, 0.0, 1.0));

vec3 light = sun * sunColour * dif + (spec * specular);
if (shadows) {
   // colorize penumbras
   light *= pow(vec3(SoftShadow(pos, sunDir)), vec3(1.0, 1.2, 1.5));
}

// sky light with AO
float occ = 0.0;
if (ao) {
   occ = CalcAO(pos, norm) * ambient;
}
float sky = clamp(0.5 + 0.5 * norm.y, 0.0, 1.0);
light += sky * vec3(0.25, 0.15, 0.05) * occ;

// indirect light with AO
float ind = clamp(dot(norm, normalize(sunDir * vec3(-1.0,0.0,-1.0))), 0.0, 1.0);
light += ind * colour*0.2 * occ;

colour *= light;

return DepthFog(colour, length(ro-pos), rd, ro);
}

// Original method by David Hoskins
vec3 PostEffects(vec3 rgb, vec2 xy)
{
rgb = pow(rgb, vec3(GAMMA));
rgb = mix(vec3(.5), mix(vec3(dot(vec3(.2125, .7154, .0721), rgb*BRIGHTNESS)), rgb*BRIGHTNESS, SATURATION), CONTRAST);
rgb *= .4+0.5*pow(40.0*xy.x*xy.y*(1.0-xy.x)*(1.0-xy.y), 0.2 ); 
return rgb;
}

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

vec3 March(in vec3 ro, in 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)
   {
      vec3 norm = GetNormal(p);
      return Shading(p, rd, norm, ro);
   }
   t += d * 0.33;
   if (t >= MAX_DEPTH) break;
}
return Sky(rd);
}

void main()
{
vec3 off = vec3(0.0);
off.z -= time*1.0;
off.y += cos(time*0.5)*0.5;

// march ray
// NOTE: see a number of tweaks here compared to my standard ray march loops:
//       1. using d<DISTANCE_MIN - i.e. removed the abs(d) to avoid holes in the fractal noise terrain
//       2. d * 0.75 to ensure small steps towards the terrain - avoids losing accuracy near terrain peaks (causing 'warping' of noise texture)
//       3. DISTANCE_MIN can be larger using the above changes, BUT higher RAY_DEPTH is needed to avoid missing distant features
//       4. still need MAX_DEPTH to avoid painful framerate
vec2 p = vec2(gl_FragCoord.x / resolution.x, gl_FragCoord.y / resolution.y);
vec3 ro = cameraPos + off;
vec3 rd = normalize(GetRay((cameraLookat-off)-cameraPos+off, p));
vec3 res = March(ro, rd);

if (postEffects) res = PostEffects(res, p);

gl_FragColor = vec4(res.rgb, 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: 6.0, z: 0.0
      },
      lookat: {
         x: 25.0, y: -45.0, z: -65.0
      },
      sunDir: {
         x: 4.8, y: 1.3, z: -4.0
      },
      sunColour: {
         r: 2.0, g: 0.8, b: 0.2
      },
      surface: {
         diffuse: 0.6,
         ambient: 0.3
      },
      global: {
         ao: true,
         shadows: true,
         postEffects: true,
         seed: 153,
         aapass: 0,
         fog: true,
         fogB: 0.60,
         fogC: 0.15
      }
   };

   function init() {
      var img = new Image();
      img.onload = function () {
         initGL([img]);
      };
      img.src = "./noise512.png";
   }

   var aspect, gl;
   function initGL(images) {
      var pause = false;
      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(-256).max(256).step(0.1);
      panel.add(config.camera, "y").min(-100).max(100).step(0.1);
      panel.add(config.camera, "z").min(-100).max(100).step(0.1);
      //panel.open();
      panel = gui.addFolder('Camera LookAt');
      panel.add(config.lookat, "x").min(-256).max(256).step(0.1);
      panel.add(config.lookat, "y").min(-100).max(100).step(0.1);
      panel.add(config.lookat, "z").min(-100).max(100).step(0.1);
      if (!mobile) panel.open();
      panel = gui.addFolder('Sun Direction');
      panel.add(config.sunDir, "x").min(-10).max(10).step(0.1);
      panel.add(config.sunDir, "y").min(-10).max(10).step(0.1);
      panel.add(config.sunDir, "z").min(-10).max(10).step(0.1);
      if (!mobile) panel.open();
      panel = gui.addFolder('Sun Colour');
      panel.add(config.sunColour, "r").min(0).max(3).step(0.1);
      panel.add(config.sunColour, "g").min(0).max(3).step(0.1);
      panel.add(config.sunColour, "b").min(0).max(3).step(0.1);
      if (!mobile) panel.open();
      panel = gui.addFolder('Surface');
      panel.add(config.surface, "diffuse").min(0).max(1).step(0.05);
      panel.add(config.surface, "ambient").min(0).max(1).step(0.05);
      //panel.open();
      panel = gui.addFolder('Global');
      panel.add(config.global, "shadows").name("Shadows");
      panel.add(config.global, "ao").name("Ambient Occlusion");
      panel.add(config.global, "postEffects").name("Post Effects");
      panel.add(config.global, "seed").name("Seed").min(0).max(100000).step(1);
      panel.add(config.global, "aapass").name("AA Pass").min(0).max(7).step(1);
      panel.add(config.global, "fog").name("Fog");
      panel.add(config.global, "fogB").min(0.01).max(1).step(0.01);
      panel.add(config.global, "fogC").min(0.01).max(1).step(0.01);
      if (!mobile) panel.open();

      var stats = new Stats();
      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);

      // textures
      var noiseTexture = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, noiseTexture);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, images[0]);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
      gl.generateMipmap(gl.TEXTURE_2D);
      gl.bindTexture(gl.TEXTURE_2D, null);

      // 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.sunDir = gl.getUniformLocation(program, "sunDir");
            // pre normalise light dir
            var x = config.sunDir.x, y = config.sunDir.y, z = config.sunDir.z;
            var len = x * x + y * y + z * z;
            len = 1.0 / Math.sqrt(len);
            gl.uniform3f(program.sunDir, config.sunDir.x * len, config.sunDir.y * len, config.sunDir.z * len);

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

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

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

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

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

            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.fog = gl.getUniformLocation(program, "fog");
            gl.uniform1f(program.fog, config.global.fog);

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

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

            program.aapass = gl.getUniformLocation(program, "aapass");
            gl.uniform1i(program.aapass, config.global.aapass);

            gl.bindTexture(gl.TEXTURE_2D, noiseTexture);
            gl.uniform1i(gl.getUniformLocation(program, "texture0"), 0);

            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();
         }
         requestAnimationFrame(f);
      })();
   }
</script>
<script src="js/utils.js"></script>

</html>