Attachment 138227 Details for Bug 105629 – Standalone HTML file for reproduction

Standalone HTML file for reproduction

multi-rose.html (text/html), 15.09 KB, created by Hugues Evrard on 2018-03-20 17:31:29 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Hugues Evrard

Created: 2018-03-20 17:31:29 UTC

Size: 15.09 KB

patch

obsolete

><!doctype html>
><html>
><head>
>  <meta charset="utf-8">
>    <title>MultiViewer WebGL</title>
>
>  <style>
>      #opengl-canvas {
>      border: black solid 1px;
>      }
>
>      .log {
>      width: 622px;
>      height: 200px;
>      float: left;
>      clear: both;
>      }
>
>      button {
>      width: 200px;
>      margin: 2px;
>      float: left;
>      clear: both;
>      }
>
>      .cell {
>      display: table-cell;
>      vertical-align: top;
>      }
>  </style>
>
>  <script>
>//======================================================================
>
>// Fragment shaders data (to be populated)
>
>var globalShaderList = ["../shaders/rose_pre"] ;
>
>var globalShaders = {
>  "../shaders/rose_pre": {
>    "uniforms": {
>      "time": {
>        "func": "glUniform1f",
>        "args": [
>          0.0
>        ]
>      },
>      "mouse": {
>        "func": "glUniform2f",
>        "args": [
>          16.0,
>          6.0
>        ]
>      },
>      "resolution": {
>        "func": "glUniform2f",
>        "args": [
>          256.0,
>          256.0
>        ]
>      }
>    },
>    "source": "#version 300 es\n\n#ifdef GL_ES\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\nprecision highp int;\n#else\nprecision mediump float;\nprecision mediump int;\n#endif\n#endif\n\n// END OF GENERATED HEADER\n\nlayout(location = 0) out vec4 _GLF_color;\n\n\nuniform float time;\nuniform vec2 mouse;\nuniform vec2 resolution;\n\n\n\n\n\nvec3 sunLight = normalize( vec3( .8, .7, -0.5 ) );\nfloat gTime = 0.0;\nvec2 coord;\n\n\nfloat Hash(vec2 p)\n{\n vec3 p3 = fract(vec3(p.xyx) * vec3(.1143,.12369,.13787));\n    p3 += dot(p3, p3.yzx + 19.19);\n    return fract(p3.x * p3.y * p3.z);\n}\n\n\nfloat HashWrap(in vec2 p)\n{\n p.x = mod(p.x, 10.0);\n vec3 p3 = fract(vec3(p.xyx) * vec3(.1143,.12369,.13787));\n    p3 += dot(p3, p3.yzx + 19.19);\n    return fract(p3.x * p3.y * p3.z);\n}\n\n\nfloat Noise(in vec2 p)\n{\n vec2 f = fract(p);\n    p = floor(p);\n    f = f*f*(3.0-2.0*f);\n    float res = mix(mix(Hash(p),\n      Hash(p + vec2(1.0, 0.0)), f.x),\n     mix(Hash(p + vec2(0.0, 1.0)),\n      Hash(p + vec2(1.0, 1.0)), f.x), f.y);\n    return res;\n}\n\n\nfloat NoiseWrap(in vec2 p)\n{\n vec2 f = fract(p);\n    p = floor(p);\n    f = f*f*(3.0-2.0*f);\n    float res = mix(mix(HashWrap(p),\n      HashWrap(p + vec2(1.0, 0.0)), f.x),\n     mix(HashWrap(p + vec2(0.0, 1.0)),\n      HashWrap(p + vec2(1.0, 1.0)), f.x), f.y);\n    return res;\n}\n\n\nfloat Cylinder( vec3 p, vec2 h )\n{\n  return max( length(p.xz)-h.x, abs(p.y)-h.y );\n}\n\n\nvec2 Rotate2D( vec2 p, float a)\n{\n float si = sin(a);\n float co = cos(a);\n return mat2(co, si, -si, co) * p;\n}\n\n\nvec2 Map(in vec3 p)\n{\n vec2 a;\n float mat = 0.0;\n float anim = min(sqrt(time*.1+0.01) +.2, 1.);\n\n\n float t = -.9+smoothstep(-50.0, -400.0, p.y*2.2);\n p.zy = Rotate2D(p.zy, t);\n float f = length(p*vec3(1.0, 2.5, 1.0))-50.0;\n\n\n float l = dot(p.xz, p.xz) * .0162+.5;\n t = sqrt(50.0 / (l+.5));\n p.xz = Rotate2D(p.xz, t*anim*anim);\n\n\n a.x = (atan(p.x, p.z)+3.14159265359)/ (2.0 * 3.14159265359) * 10.0;\n a.y = pow(l, .35)*11.3;\n a.y *= smoothstep(15.0/(anim*anim), 0.0, (p.y*.2+2.3)*anim);\n    float n = NoiseWrap(a)*40.0-23.0;\n n = n * smoothstep(85.0, 50.0, l);\n f = f + n;\n f = mix(dot(p, p)-2380.0, f, pow(anim, .05));\n\n\n n = Cylinder(p-vec3(0.0, -100, 0.0), vec2(4.0, 100.0));\n if (n < f)\n {\n  mat = 1.0;\n  f = n;\n }\n return vec2(f, mat);\n}\n\n\nvec3 GetSky(in vec3 rd)\n{\n float a = pow(1.0-max(rd.y, 0.0), 2.0);\n vec3 c1 = mix(vec3(0.52, .65, .65),vec3(.8), a);\n vec3 c2 = vec3(.26, .29, .24);\n float f = Noise(rd.xy*4.0)*.3 + Noise(rd.xy*10.0)*.1;\n float r = smoothstep(-0.1, .1, -rd.y-f+.2);\n return mix(c1, c2, clamp(r, 0.0, 1.0));\n}\n\n\nfloat Shadow(in vec3 ro, in vec3 rd)\n{\n float res = 1.0;\n    float t = 2.0;\n float h = 0.0;\n\n for (int i = 0; i < 20; i++)\n {\n  h = Map(ro + rd * t).x;\n  res = min(h / t, res);\n  t += h*.02+.35;\n }\n\n    return clamp(res, 0.0, 1.0);\n}\n\n\nvec3 Normal(in vec3 pos, in float t)\n{\n vec2 eps = vec2(.25,0.0);\n vec3 nor = vec3(Map(pos+eps.xyy).x - Map(pos-eps.xyy).x,\n     Map(pos+eps.yxy).x - Map(pos-eps.yxy).x,\n     Map(pos+eps.yyx).x - Map(pos-eps.yyx).x);\n return normalize(nor);\n}\n\n\nvec3 DoLighting(in vec3 pos, in vec3 ray, in vec3 nor, in vec2 t)\n{\n float sha = Shadow(pos, sunLight)*.9 + .1;\n vec3 mat;\n if (t.y < 0.5)\n {\n\n  float anim = min(sqrt(time*.1+0.01) +.2, 1.);\n  mat = vec3(.8, .0, .0);\n  float t = -.9+smoothstep(-50.0, -400.0, pos.y*2.2);\n  pos.zy = Rotate2D(pos.zy, t);\n  float l = dot(pos.xz, pos.xz) * .0162+14.5;\n  t = (50.0 / (l+.5));\n  pos.xz = Rotate2D(pos.xz, t*anim);\n  pos /= pow(anim, 1.0);\n  mat += vec3(.3,.3,.3)*Noise(pos.xz*1.5) * anim*anim * .35;\n  mat += vec3(.8,.5,.3)*Noise(pos.xz*.25) * clamp(l*.2-13., 0.0, 1.0);\n\n }else\n {\n  mat = mix(vec3(.1, .4, .05), vec3(.0,.2, 0.0), Noise(pos.xy*vec2(1.0, .3)));\n }\n\n vec3 col = mat * max(dot(sunLight, nor), 0.0) * sha + mat*.05;\n vec3 ref = reflect(ray, nor);\n float spec = pow(max(dot(sunLight, ref), 0.0), 10.0);\n col += vec3(.3, 0.15, .05) * spec * sha;\n return clamp(col, 0.0, 1.0);\n}\n\n\nvec2 RayMarch( in vec3 ro, in vec3 rd )\n{\n    float h;\n    float t = 53.0 - 3.5* Hash(coord * time);\n vec2 res = vec2(200.0, -1.0);\n bool hit = false;\n\n for( int i = 0; i < 220; i++ )\n    {\n  if (!hit && t < 220.0)\n  {\n   vec2 h = Map(ro + rd * t);\n   if (h.x < 0.0)\n   {\n    res = vec2(t, h.y);\n    hit = true;\n   }\n   t += h.x * .036 + t * .001;\n  }\n    }\n    return res;\n}\n\n\nvec3 CameraPath( float t )\n{\n    vec2 p = vec2(200.0 * sin(3.54*t), 200.0 * cos(2.0*t) );\n return vec3(p.x+420.0, 0.0, -655.0+p.y);\n}\n\n\nvec3 PostEffects(vec3 rgb, vec2 xy)\n{\n\n rgb = pow(rgb, vec3(0.45));\n\n rgb = clamp(mix( vec3(dot(vec3(.2125, .7154, .0721), rgb)), rgb, 1.3), 0.0, 1.0);\n\n\n rgb *= .4+0.4*pow(60.0*xy.x*xy.y*(1.0-xy.x)*(1.0-xy.y), 0.3 );\n return rgb;\n}\n\n\nvoid main()\n{\n float gTime = -time-2.3;\n     vec2 xy = gl_FragCoord.xy / resolution.xy;\n vec2 uv = (-1.0 + 2.0 * xy) * vec2(resolution.x/resolution.y,1.0);\n coord = gl_FragCoord.xy;\n\n float hTime = mod(gTime+1.85, 2.0);\n\n vec3 camPos = vec3(sin(gTime*.3)*50.0, -10.0, -102.0);\n vec3 camTar = vec3(0.0, -10.0, 0.0);\n\n float roll = .2*sin(gTime*.13+1.2);\n vec3 cw = normalize(camTar-camPos);\n vec3 cp = vec3(sin(roll), cos(roll),0.0);\n vec3 cu = cross(cw,cp);\n vec3 cv = cross(cu,cw);\n vec3 ray = normalize(uv.x*cu + uv.y*cv + 1.3*cw);\n\n vec3 col;\n\n vec2 t = RayMarch(camPos, ray);\n if(t.y >= 0.0)\n {\n  vec3 pos = camPos + t.x * ray;\n  vec3 nor = Normal(pos, t.x);\n  col = DoLighting(pos, ray, nor, t);\n }else\n {\n  col = GetSky(ray);\n }\n\n col = PostEffects(col, xy);\n\n _GLF_color=vec4(col,1.0);\n}\n"
>  }
>} ;
>
>//======================================================================
>// Global variables
>
>// WebGL
>var gl = null;
>var vertexShader = null;
>
>var Pause = false;
>var nextFrag = false;
>var fragIndex = 0;
>
>//======================================================================
>// Functions
>
>function initWebGL() {
>    if (gl != null) {
>        throw "initWebGL() called multiple times? (global 'gl' is non-null)"
>    }
>
>    var canvas = document.getElementById("opengl-canvas");
>    gl = canvas.getContext("webgl2");
>
>    // vertex shader
>    var vertexShaderSource =
>        "#version 300 es\n" +
>        "in vec2 aVertexPosition;\n" +
>        "void main(void) { gl_Position = vec4(aVertexPosition, 0.0, 1.0); }";
>
>    vertexShader = gl.createShader(gl.VERTEX_SHADER);
>    console.log("call gl.shaderSource(vertexShader, vertexShaderSource)");
>    gl.shaderSource(vertexShader, vertexShaderSource);
>    gl.compileShader(vertexShader);
>    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
>        throw "Failed to compile vertex shader.\n" + gl.getShaderInfoLog(vertexShader);
>    }
>
>    // Data buffers
>    var vertices = [
>        -1.0,  1.0,
>        -1.0, -1.0,
>        1.0, -1.0,
>        1.0,  1.0
>    ];
>
>    var indices = [
>        0, 1, 2,
>        2, 3, 0
>    ];
>
>    var verticesBuffer = gl.createBuffer();
>    gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
>    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
>
>    var indicesBuffer = gl.createBuffer();
>    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
>    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
>}
>
>//======================================================================
>
>function updateFragment(fragName) {
>    try {
>        doUpdateFragment(fragName)
>    } catch (e) {
>        document.getElementById("log").value +=
>            "Error when updating to fragment: " + fragName + "\n" +
>            "====================\n" +
>            e +
>            "====================\n" +
>	    "Skipping fragment, moving on to the next\n";
>	nextFrag = true;
>	// Do not pause here, since some fragment may just lead to
>	// compilation errors that are not worth stopping the whole
>	// script
>    }
>}
>
>//======================================================================
>
>function doUpdateFragment(fragName) {
>
>    document.getElementById("log").value += "Update to fragment: " + fragName + "\n";
>
>    var fragmentShaderSource = globalShaders[fragName]["source"];
>    var uniformsJSON = globalShaders[fragName]["uniforms"];
>
>    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
>    console.log("call gl.shaderSource(fragmentShader, fragmentShaderSource)");
>    gl.shaderSource(fragmentShader, fragmentShaderSource);
>    gl.compileShader(fragmentShader);
>    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
>        throw "Failed to compile fragment shader.\n" + gl.getShaderInfoLog(fragmentShader);
>    }
>
>    // shader program
>    var shaderProgram = gl.createProgram();
>    gl.attachShader(shaderProgram, vertexShader);
>    gl.attachShader(shaderProgram, fragmentShader);
>    gl.linkProgram(shaderProgram);
>    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
>        throw "Failed to link shader program.\n" + gl.getProgramInfoLog(shaderProgram);
>    }
>    gl.useProgram(shaderProgram);
>
>    var vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
>    gl.enableVertexAttribArray(vertexPositionAttribute);
>    gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
>
>    for (uniformName in uniformsJSON) {
>        // TODO: need to do additional error checking, e.g. checking that args has right length.
>        var uniformInfo = uniformsJSON[uniformName];
>        if (uniformInfo.func == null) {
>            throw "'func' must be provided for uniform '" + uniformName + "'";
>        }
>        if (uniformInfo.args == null) {
>            throw "'args' must be provided for uniform '" + uniformName + "'";
>        }
>        trySetUniform(gl, shaderProgram, uniformName, uniformInfo.func, uniformInfo.args)
>    }
>}
>
>//======================================================================
>
>function trySetUniform(gl, shaderProgram, name, uniformFunc, args) {
>  var loc = gl.getUniformLocation(shaderProgram, name);
>  if (loc == null) {
>    return;
>  }
>
>  if (uniformFunc === "glUniform1f") {
>    gl.uniform1f(loc, args[0]);
>  } else if (uniformFunc === "glUniform2f") {
>    gl.uniform2f(loc, args[0], args[1]);
>  } else if (uniformFunc === "glUniform3f") {
>    gl.uniform3f(loc, args[0], args[1], args[2]);
>  } else if (uniformFunc === "glUniform4f") {
>    gl.uniform4f(loc, args[0], args[1], args[2], args[3]);
>  } else if (uniformFunc === "glUniform1fv") {
>    gl.uniform1fv(loc, args);
>  } else if (uniformFunc === "glUniform2fv") {
>    gl.uniform2fv(loc, args);
>  } else if (uniformFunc === "glUniform3fv") {
>    gl.uniform3fv(loc, args);
>  } else if (uniformFunc === "glUniform4fv") {
>    gl.uniform4fv(loc, args);
>  } else if (uniformFunc === "glUniform1i") {
>    gl.uniform1i(loc, args[0]);
>  } else if (uniformFunc === "glUniform2i") {
>    gl.uniform2i(loc, args[0], args[1]);
>  } else if (uniformFunc === "glUniform3i") {
>    gl.uniform3i(loc, args[0], args[1], args[2]);
>  } else if (uniformFunc === "glUniform4i") {
>    gl.uniform4i(loc, args[0], args[1], args[2], args[3]);
>  } else if (uniformFunc === "glUniform1iv") {
>    gl.uniform1iv(loc, args);
>  } else {
>      errmsg = "Do not know how to set uniform via function " + uniformFunc + " and args " + args;
>      console.log(errmsg);
>      throw errmsg;
>  }
>}
>
>//======================================================================
>
>var drawFunction = function(now) {
>
>    if (Pause) {
>        return;
>    }
>
>    if (nextFrag) {
>        // move to next fragment shader
>        nextFrag = false;
>        fragIndex += 1;
>        if (fragIndex >= globalShaderList.length) {
>            fragIndex = 0;
>        }
>        var fragName = globalShaderList[fragIndex];
>        updateFragment(fragName);
>    }
>
>
>    try {
>	gl.clearColor(0.0, 0.0, 0.0, 1.0);
>	gl.clear(gl.COLOR_BUFFER_BIT);
>	gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
>    } catch (e) {
>        document.getElementById("log").value +=
>            "Error when updating frame:\n" +
>            "====================\n" +
>            e +
>            "====================\n";
>	Pause = true;
>    }
>
>    requestAnimationFrame(drawFunction);
>}
>
>//======================================================================
>
>function pause() {
>    document.getElementById("log").value += "pause\n";
>    Pause = true;
>}
>
>//======================================================================
>
>function resume() {
>    Pause = false;
>    document.getElementById("log").value += "resume\n";
>    requestAnimationFrame(drawFunction);
>    setTimeout(fragRoundRobin, 500);
>}
>
>//======================================================================
>
>function fragRoundRobin() {
>
>    if (Pause) {
>        return;
>    }
>
>    nextFrag = true;
>    setTimeout(fragRoundRobin, 500);
>}
>
>//======================================================================
>// Main
>
>function main() {
>
>    try {
>        initWebGL();
>    } catch (e) {
>        document.getElementById("log").value +=
>            "Error when initializing WebGL\n" +
>            "====================\n" +
>            e +
>            "====================\n";
>        return;
>    }
>
>    // Sanity check
>    if (globalShaderList.length <= 0) {
>        throw "Empty shader list!";
>    }
>
>    for (var i in globalShaderList) {
>        var fragName = globalShaderList[i];
>        if (! globalShaders.hasOwnProperty(fragName)) {
>            throw "No matching fragment shader for name: " + fragName;
>        }
>    }
>
>    // Initiate first shader
>    updateFragment(globalShaderList[0]);
>    requestAnimationFrame(drawFunction);
>    setTimeout(fragRoundRobin, 500);
>}
>
>//======================================================================
>  </script>
></head>
><body onload="main()">
><div class="grid">
>
>  <div class="row">
>
>    <div class="cell">
>      <canvas id="opengl-canvas" width="256" height="256"></canvas>
>    </div>
>
>  </div>
>
>  <div class="row">
>    <div class="cell">
>        <button id="pause" title="Pause" onclick="pause()">Pause</button>
>        <button id="resume" title="Resume" onclick="resume()">Resume</button
>    </div>
>  </div>
>
>  <div class="row">
>      <div class="cell">
>      <p>Log of rendered shaders, errors, etc:</p>
>          <textarea id="log" class="log" placeholder="Log" readonly></textarea>
>      </div>
>  </div>
>
></div>
></body>
></html>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
    <title>MultiViewer WebGL</title>

  <style>
      #opengl-canvas {
      border: black solid 1px;
      }

      .log {
      width: 622px;
      height: 200px;
      float: left;
      clear: both;
      }

      button {
      width: 200px;
      margin: 2px;
      float: left;
      clear: both;
      }

      .cell {
      display: table-cell;
      vertical-align: top;
      }
  </style>

  <script>
//======================================================================

// Fragment shaders data (to be populated)

var globalShaderList = ["../shaders/rose_pre"] ;

var globalShaders = {
  "../shaders/rose_pre": {
    "uniforms": {
      "time": {
        "func": "glUniform1f",
        "args": [
          0.0
        ]
      },
      "mouse": {
        "func": "glUniform2f",
        "args": [
          16.0,
          6.0
        ]
      },
      "resolution": {
        "func": "glUniform2f",
        "args": [
          256.0,
          256.0
        ]
      }
    },
    "source": "#version 300 es\n\n#ifdef GL_ES\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\nprecision highp int;\n#else\nprecision mediump float;\nprecision mediump int;\n#endif\n#endif\n\n// END OF GENERATED HEADER\n\nlayout(location = 0) out vec4 _GLF_color;\n\n\nuniform float time;\nuniform vec2 mouse;\nuniform vec2 resolution;\n\n\n\n\n\nvec3 sunLight = normalize( vec3( .8, .7, -0.5 ) );\nfloat gTime = 0.0;\nvec2 coord;\n\n\nfloat Hash(vec2 p)\n{\n vec3 p3 = fract(vec3(p.xyx) * vec3(.1143,.12369,.13787));\n    p3 += dot(p3, p3.yzx + 19.19);\n    return fract(p3.x * p3.y * p3.z);\n}\n\n\nfloat HashWrap(in vec2 p)\n{\n p.x = mod(p.x, 10.0);\n vec3 p3 = fract(vec3(p.xyx) * vec3(.1143,.12369,.13787));\n    p3 += dot(p3, p3.yzx + 19.19);\n    return fract(p3.x * p3.y * p3.z);\n}\n\n\nfloat Noise(in vec2 p)\n{\n vec2 f = fract(p);\n    p = floor(p);\n    f = f*f*(3.0-2.0*f);\n    float res = mix(mix(Hash(p),\n      Hash(p + vec2(1.0, 0.0)), f.x),\n     mix(Hash(p + vec2(0.0, 1.0)),\n      Hash(p + vec2(1.0, 1.0)), f.x), f.y);\n    return res;\n}\n\n\nfloat NoiseWrap(in vec2 p)\n{\n vec2 f = fract(p);\n    p = floor(p);\n    f = f*f*(3.0-2.0*f);\n    float res = mix(mix(HashWrap(p),\n      HashWrap(p + vec2(1.0, 0.0)), f.x),\n     mix(HashWrap(p + vec2(0.0, 1.0)),\n      HashWrap(p + vec2(1.0, 1.0)), f.x), f.y);\n    return res;\n}\n\n\nfloat Cylinder( vec3 p, vec2 h )\n{\n  return max( length(p.xz)-h.x, abs(p.y)-h.y );\n}\n\n\nvec2 Rotate2D( vec2 p, float a)\n{\n float si = sin(a);\n float co = cos(a);\n return mat2(co, si, -si, co) * p;\n}\n\n\nvec2 Map(in vec3 p)\n{\n vec2 a;\n float mat = 0.0;\n float anim = min(sqrt(time*.1+0.01) +.2, 1.);\n\n\n float t = -.9+smoothstep(-50.0, -400.0, p.y*2.2);\n p.zy = Rotate2D(p.zy, t);\n float f = length(p*vec3(1.0, 2.5, 1.0))-50.0;\n\n\n float l = dot(p.xz, p.xz) * .0162+.5;\n t = sqrt(50.0 / (l+.5));\n p.xz = Rotate2D(p.xz, t*anim*anim);\n\n\n a.x = (atan(p.x, p.z)+3.14159265359)/ (2.0 * 3.14159265359) * 10.0;\n a.y = pow(l, .35)*11.3;\n a.y *= smoothstep(15.0/(anim*anim), 0.0, (p.y*.2+2.3)*anim);\n    float n = NoiseWrap(a)*40.0-23.0;\n n = n * smoothstep(85.0, 50.0, l);\n f = f + n;\n f = mix(dot(p, p)-2380.0, f, pow(anim, .05));\n\n\n n = Cylinder(p-vec3(0.0, -100, 0.0), vec2(4.0, 100.0));\n if (n < f)\n {\n  mat = 1.0;\n  f = n;\n }\n return vec2(f, mat);\n}\n\n\nvec3 GetSky(in vec3 rd)\n{\n float a = pow(1.0-max(rd.y, 0.0), 2.0);\n vec3 c1 = mix(vec3(0.52, .65, .65),vec3(.8), a);\n vec3 c2 = vec3(.26, .29, .24);\n float f = Noise(rd.xy*4.0)*.3 + Noise(rd.xy*10.0)*.1;\n float r = smoothstep(-0.1, .1, -rd.y-f+.2);\n return mix(c1, c2, clamp(r, 0.0, 1.0));\n}\n\n\nfloat Shadow(in vec3 ro, in vec3 rd)\n{\n float res = 1.0;\n    float t = 2.0;\n float h = 0.0;\n\n for (int i = 0; i < 20; i++)\n {\n  h = Map(ro + rd * t).x;\n  res = min(h / t, res);\n  t += h*.02+.35;\n }\n\n    return clamp(res, 0.0, 1.0);\n}\n\n\nvec3 Normal(in vec3 pos, in float t)\n{\n vec2 eps = vec2(.25,0.0);\n vec3 nor = vec3(Map(pos+eps.xyy).x - Map(pos-eps.xyy).x,\n     Map(pos+eps.yxy).x - Map(pos-eps.yxy).x,\n     Map(pos+eps.yyx).x - Map(pos-eps.yyx).x);\n return normalize(nor);\n}\n\n\nvec3 DoLighting(in vec3 pos, in vec3 ray, in vec3 nor, in vec2 t)\n{\n float sha = Shadow(pos, sunLight)*.9 + .1;\n vec3 mat;\n if (t.y < 0.5)\n {\n\n  float anim = min(sqrt(time*.1+0.01) +.2, 1.);\n  mat = vec3(.8, .0, .0);\n  float t = -.9+smoothstep(-50.0, -400.0, pos.y*2.2);\n  pos.zy = Rotate2D(pos.zy, t);\n  float l = dot(pos.xz, pos.xz) * .0162+14.5;\n  t = (50.0 / (l+.5));\n  pos.xz = Rotate2D(pos.xz, t*anim);\n  pos /= pow(anim, 1.0);\n  mat += vec3(.3,.3,.3)*Noise(pos.xz*1.5) * anim*anim * .35;\n  mat += vec3(.8,.5,.3)*Noise(pos.xz*.25) * clamp(l*.2-13., 0.0, 1.0);\n\n }else\n {\n  mat = mix(vec3(.1, .4, .05), vec3(.0,.2, 0.0), Noise(pos.xy*vec2(1.0, .3)));\n }\n\n vec3 col = mat * max(dot(sunLight, nor), 0.0) * sha + mat*.05;\n vec3 ref = reflect(ray, nor);\n float spec = pow(max(dot(sunLight, ref), 0.0), 10.0);\n col += vec3(.3, 0.15, .05) * spec * sha;\n return clamp(col, 0.0, 1.0);\n}\n\n\nvec2 RayMarch( in vec3 ro, in vec3 rd )\n{\n    float h;\n    float t = 53.0 - 3.5* Hash(coord * time);\n vec2 res = vec2(200.0, -1.0);\n bool hit = false;\n\n for( int i = 0; i < 220; i++ )\n    {\n  if (!hit && t < 220.0)\n  {\n   vec2 h = Map(ro + rd * t);\n   if (h.x < 0.0)\n   {\n    res = vec2(t, h.y);\n    hit = true;\n   }\n   t += h.x * .036 + t * .001;\n  }\n    }\n    return res;\n}\n\n\nvec3 CameraPath( float t )\n{\n    vec2 p = vec2(200.0 * sin(3.54*t), 200.0 * cos(2.0*t) );\n return vec3(p.x+420.0, 0.0, -655.0+p.y);\n}\n\n\nvec3 PostEffects(vec3 rgb, vec2 xy)\n{\n\n rgb = pow(rgb, vec3(0.45));\n\n rgb = clamp(mix( vec3(dot(vec3(.2125, .7154, .0721), rgb)), rgb, 1.3), 0.0, 1.0);\n\n\n rgb *= .4+0.4*pow(60.0*xy.x*xy.y*(1.0-xy.x)*(1.0-xy.y), 0.3 );\n return rgb;\n}\n\n\nvoid main()\n{\n float gTime = -time-2.3;\n     vec2 xy = gl_FragCoord.xy / resolution.xy;\n vec2 uv = (-1.0 + 2.0 * xy) * vec2(resolution.x/resolution.y,1.0);\n coord = gl_FragCoord.xy;\n\n float hTime = mod(gTime+1.85, 2.0);\n\n vec3 camPos = vec3(sin(gTime*.3)*50.0, -10.0, -102.0);\n vec3 camTar = vec3(0.0, -10.0, 0.0);\n\n float roll = .2*sin(gTime*.13+1.2);\n vec3 cw = normalize(camTar-camPos);\n vec3 cp = vec3(sin(roll), cos(roll),0.0);\n vec3 cu = cross(cw,cp);\n vec3 cv = cross(cu,cw);\n vec3 ray = normalize(uv.x*cu + uv.y*cv + 1.3*cw);\n\n vec3 col;\n\n vec2 t = RayMarch(camPos, ray);\n if(t.y >= 0.0)\n {\n  vec3 pos = camPos + t.x * ray;\n  vec3 nor = Normal(pos, t.x);\n  col = DoLighting(pos, ray, nor, t);\n }else\n {\n  col = GetSky(ray);\n }\n\n col = PostEffects(col, xy);\n\n _GLF_color=vec4(col,1.0);\n}\n"
  }
} ;

//======================================================================
// Global variables

// WebGL
var gl = null;
var vertexShader = null;

var Pause = false;
var nextFrag = false;
var fragIndex = 0;

//======================================================================
// Functions

function initWebGL() {
    if (gl != null) {
        throw "initWebGL() called multiple times? (global 'gl' is non-null)"
    }

    var canvas = document.getElementById("opengl-canvas");
    gl = canvas.getContext("webgl2");

    // vertex shader
    var vertexShaderSource =
        "#version 300 es\n" +
        "in vec2 aVertexPosition;\n" +
        "void main(void) { gl_Position = vec4(aVertexPosition, 0.0, 1.0); }";

    vertexShader = gl.createShader(gl.VERTEX_SHADER);
    console.log("call gl.shaderSource(vertexShader, vertexShaderSource)");
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
        throw "Failed to compile vertex shader.\n" + gl.getShaderInfoLog(vertexShader);
    }

    // Data buffers
    var vertices = [
        -1.0,  1.0,
        -1.0, -1.0,
        1.0, -1.0,
        1.0,  1.0
    ];

    var indices = [
        0, 1, 2,
        2, 3, 0
    ];

    var verticesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    var indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
}

//======================================================================

function updateFragment(fragName) {
    try {
        doUpdateFragment(fragName)
    } catch (e) {
        document.getElementById("log").value +=
            "Error when updating to fragment: " + fragName + "\n" +
            "====================\n" +
            e +
            "====================\n" +
	    "Skipping fragment, moving on to the next\n";
	nextFrag = true;
	// Do not pause here, since some fragment may just lead to
	// compilation errors that are not worth stopping the whole
	// script
    }
}

//======================================================================

function doUpdateFragment(fragName) {

    document.getElementById("log").value += "Update to fragment: " + fragName + "\n";

    var fragmentShaderSource = globalShaders[fragName]["source"];
    var uniformsJSON = globalShaders[fragName]["uniforms"];

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    console.log("call gl.shaderSource(fragmentShader, fragmentShaderSource)");
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(fragmentShader);
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
        throw "Failed to compile fragment shader.\n" + gl.getShaderInfoLog(fragmentShader);
    }

    // shader program
    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        throw "Failed to link shader program.\n" + gl.getProgramInfoLog(shaderProgram);
    }
    gl.useProgram(shaderProgram);

    var vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(vertexPositionAttribute);
    gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);

    for (uniformName in uniformsJSON) {
        // TODO: need to do additional error checking, e.g. checking that args has right length.
        var uniformInfo = uniformsJSON[uniformName];
        if (uniformInfo.func == null) {
            throw "'func' must be provided for uniform '" + uniformName + "'";
        }
        if (uniformInfo.args == null) {
            throw "'args' must be provided for uniform '" + uniformName + "'";
        }
        trySetUniform(gl, shaderProgram, uniformName, uniformInfo.func, uniformInfo.args)
    }
}

//======================================================================

function trySetUniform(gl, shaderProgram, name, uniformFunc, args) {
  var loc = gl.getUniformLocation(shaderProgram, name);
  if (loc == null) {
    return;
  }

  if (uniformFunc === "glUniform1f") {
    gl.uniform1f(loc, args[0]);
  } else if (uniformFunc === "glUniform2f") {
    gl.uniform2f(loc, args[0], args[1]);
  } else if (uniformFunc === "glUniform3f") {
    gl.uniform3f(loc, args[0], args[1], args[2]);
  } else if (uniformFunc === "glUniform4f") {
    gl.uniform4f(loc, args[0], args[1], args[2], args[3]);
  } else if (uniformFunc === "glUniform1fv") {
    gl.uniform1fv(loc, args);
  } else if (uniformFunc === "glUniform2fv") {
    gl.uniform2fv(loc, args);
  } else if (uniformFunc === "glUniform3fv") {
    gl.uniform3fv(loc, args);
  } else if (uniformFunc === "glUniform4fv") {
    gl.uniform4fv(loc, args);
  } else if (uniformFunc === "glUniform1i") {
    gl.uniform1i(loc, args[0]);
  } else if (uniformFunc === "glUniform2i") {
    gl.uniform2i(loc, args[0], args[1]);
  } else if (uniformFunc === "glUniform3i") {
    gl.uniform3i(loc, args[0], args[1], args[2]);
  } else if (uniformFunc === "glUniform4i") {
    gl.uniform4i(loc, args[0], args[1], args[2], args[3]);
  } else if (uniformFunc === "glUniform1iv") {
    gl.uniform1iv(loc, args);
  } else {
      errmsg = "Do not know how to set uniform via function " + uniformFunc + " and args " + args;
      console.log(errmsg);
      throw errmsg;
  }
}

//======================================================================

var drawFunction = function(now) {

    if (Pause) {
        return;
    }

    if (nextFrag) {
        // move to next fragment shader
        nextFrag = false;
        fragIndex += 1;
        if (fragIndex >= globalShaderList.length) {
            fragIndex = 0;
        }
        var fragName = globalShaderList[fragIndex];
        updateFragment(fragName);
    }


    try {
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
    } catch (e) {
        document.getElementById("log").value +=
            "Error when updating frame:\n" +
            "====================\n" +
            e +
            "====================\n";
	Pause = true;
    }

    requestAnimationFrame(drawFunction);
}

//======================================================================

function pause() {
    document.getElementById("log").value += "pause\n";
    Pause = true;
}

//======================================================================

function resume() {
    Pause = false;
    document.getElementById("log").value += "resume\n";
    requestAnimationFrame(drawFunction);
    setTimeout(fragRoundRobin, 500);
}

//======================================================================

function fragRoundRobin() {

    if (Pause) {
        return;
    }

    nextFrag = true;
    setTimeout(fragRoundRobin, 500);
}

//======================================================================
// Main

function main() {

    try {
        initWebGL();
    } catch (e) {
        document.getElementById("log").value +=
            "Error when initializing WebGL\n" +
            "====================\n" +
            e +
            "====================\n";
        return;
    }

    // Sanity check
    if (globalShaderList.length <= 0) {
        throw "Empty shader list!";
    }

    for (var i in globalShaderList) {
        var fragName = globalShaderList[i];
        if (! globalShaders.hasOwnProperty(fragName)) {
            throw "No matching fragment shader for name: " + fragName;
        }
    }

    // Initiate first shader
    updateFragment(globalShaderList[0]);
    requestAnimationFrame(drawFunction);
    setTimeout(fragRoundRobin, 500);
}

//======================================================================
  </script>
</head>
<body onload="main()">
<div class="grid">

  <div class="row">

    <div class="cell">
      <canvas id="opengl-canvas" width="256" height="256"></canvas>
    </div>

  </div>

  <div class="row">
    <div class="cell">
        <button id="pause" title="Pause" onclick="pause()">Pause</button>
        <button id="resume" title="Resume" onclick="resume()">Resume</button
    </div>
  </div>

  <div class="row">
      <div class="cell">
      <p>Log of rendered shaders, errors, etc:</p>
          <textarea id="log" class="log" placeholder="Log" readonly></textarea>
      </div>
  </div>

</div>
</body>
</html>

Actions: View

Attachments on bug 105629: 138227 | 138228 | 138308

Use of freedesktop.org services, including Bugzilla, is subject to our Code of Conduct. How we collect and use information is described in our Privacy Policy.