AHK03/WEB_GL_MANDELBROT.HTML

<!DOCTYPE HTML >
<html lang="en">

<!-- XXXXXXXX EDIT ONLY THIS SECTION! XXXXXXXX -->
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<script id="VERT_SHADER" type="NOT_JAVASCRIPT">
  precision highp float;

  attribute vec2 a_position;
  void main() {
    gl_Position = vec4(a_position, 0, 1);
  }
</script>


<script id="FRAG_SHADER" type="NOT_JAVASCRIPT">
  #define NUM_STEPS   50
  #define ZOOM_FACTOR 2.0
  #define X_OFFSET    0.5

  #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
  #else
    precision mediump float;
  #endif
  precision mediump int;

  void main() {
    vec2 z;
    float x,y;
    int steps;
    float normalizedX = (gl_FragCoord.x - 320.0) / 640.0 * ZOOM_FACTOR *
                        (640.0 / 480.0) - X_OFFSET;
    float normalizedY = (gl_FragCoord.y - 240.0) / 480.0 * ZOOM_FACTOR;

    z.x = normalizedX;
    z.y = normalizedY;

    for (int i=0;i<NUM_STEPS;i++) {

    steps = i;

        x = (z.x * z.x - z.y * z.y) + normalizedX;
        y = (z.y * z.x + z.x * z.y) + normalizedY;

        if((x * x + y * y) > 4.0) {
          break;
        }

        z.x = x;
        z.y = y;

    }

    if (steps == NUM_STEPS-1) {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    } else {
      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
  }
</script>
<!-- XXXXXXXX END OF EDITABLE SECTION XXXXXXXX -->
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->

<head>
<!-- BASED ON:                                 -->
<!-- URL[                                      -->
<!--     https://blog.mayflower.de/4584-       -->
<!--     Playing-around-with-pixel-shaders-    -->
<!--     in-WebGL.html                         -->
<!--    ];                                     -->

<title>  TRY_0004  </title>
</head>
<body onload="ON_LOADED_FUNCTION()" >
<!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB -->

    <canvas id="glCanvas"></canvas>

<!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB -->
</body>

<script id="BOILER_PLATE_CODE">
    function ON_LOADED_FUNCTION(){
        main();
    }

    //: No "var" prefix, making them global:
    function initGlobals(){
        canvas = document.querySelector("#glCanvas");
        gl = canvas.getContext("webgl");

        //These dimensions are hard-coded into
        //fragment shader code, so be careful
        //about changing them:
        canvas.width = 640;
        canvas.height= 480;

        buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([
          -1.0, -1.0,
           1.0, -1.0,
          -1.0,  1.0,
          -1.0,  1.0,
           1.0, -1.0,
           1.0,  1.0]),
        gl.STATIC_DRAW
        );
    }

    function main(){

      initGlobals();


      // Only continue if WebGL is
      // available and working
      if (!gl) {
        var msg = "";
        msg += "[Unable to initialize WebGL.]";
        msg += "[your browser or machine may]";
        msg +=  "[not support it.]"
        alert( msg );
        return;
      }

      gl.viewport(0,0,gl.drawingBufferWidth, gl.drawingBufferHeight);

      setup();
      render();


    }

    function setup(){
        var frag_dom = document.getElementById("FRAG_SHADER");
        var frag_src = frag_dom.text;
        console.log( frag_src );

        F = createShader(
            gl,gl.FRAGMENT_SHADER, frag_src
        );

        var vert_dom = document.getElementById("VERT_SHADER");
        var vert_src = vert_dom.text;
        console.log( vert_src );

        V = createShader(
            gl, gl.VERTEX_SHADER, vert_src
        );

        //**** MAKE "program" a GLOBAL VAR  ****//
        program = createProgram(gl,V,F);
        gl.useProgram( program );

        if(!program){
            throw("PROGRAM_IS_NULL");
        }
    }

    function render(){
      window.requestAnimationFrame(render,canvas);

      // Set clear color to black, fully opaque
      gl.clearColor(0.0, 0.0, 0.5, 1.0);

      // Clear the color buffer with specified clear color
      gl.clear(gl.COLOR_BUFFER_BIT);

      //Directly before call to gl.drawArrays:
      positionLocation = gl.getAttribLocation(program, "a_position");
      gl.enableVertexAttribArray( positionLocation );
      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);


      gl.drawArrays(gl.TRIANGLES, 0, 6);
    }

    function createShader(gl,type,source){
        //:Error Check For Bad Inputs:
        if(!gl    ){throw("[NULL_GL]");}
        if(!type  ){throw("[NULL_TY]");}
        if(!source){throw("[NULL_SR]");}

        var shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        var res = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if( res ){
            console.log("[SHADER_COMPILED!]");
            return shader;
        }

        console.log(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        throw("[FAILED_TO_COMPILE_SHADER]");
    }

    //:gl  : openGL context :
    //:vert: vertex shader  :
    //:frag: fragment shader:
    function createProgram(gl,vert, frag){
        var program = gl.createProgram();
        gl.attachShader(program, vert);
        gl.attachShader(program, frag);
        gl.linkProgram (program);
        var res = gl.getProgramParameter(program, gl.LINK_STATUS);
        if( res ){
            console.log("[PROGRAM_CREATED!]");
            return program;
        }

        console.log(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
    }

</script>

</html>