pixelated.html | Explore in Territory

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css" media="screen">
      canvas {
        width: 100px;
        height: 100px;
        image-rendering: pixelated;
      }
      #canvas2 {
        image-rendering: auto;
      }
    </style>
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 vPosition;

      void main() {
         gl_Position = vPosition;
      }
    </script>

    <script id="fragmentShader" type="x-shader/x-fragment">
      void main() {
          gl_FragColor = vec4(0.0, 0.5, 0.0, 1.0);
      }
    </script>
    <script>
    function draw(gl) {
        var vertices = [ 0.0, 0.8, 0.0,
                        -0.8, -0.8, 0.0,
                         0.8, -0.8, 0.0 ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data
        gl.enableVertexAttribArray(0);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
        gl.flush();
    }

    function getFragmentShader(gl) {
        var shaderNode = document.getElementById("fragmentShader"); // fragmentShader has been defined at the top
        var shaderSource = getShaderSource(shaderNode);

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

        return shader;
    }

    function getShaderSource(shaderNode) {
        var shaderSource = "";
        var node = shaderNode.firstChild;
        while (node) {
            if (node.nodeType == 3) // Node.TEXT_NODE
                shaderSource += node.textContent;
            node = node.nextSibling;
        }

        return shaderSource;
    }

    function getVertexShader(gl) {
        var shaderNode = document.getElementById("vertexShader");
        var shaderSource = getShaderSource(shaderNode);

        var shader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(shader, shaderSource);
        gl.compileShader(shader);

        return shader;
    }

    function initialize(gl) {
        var vertexShader = getVertexShader(gl);
        var fragmentShader = getFragmentShader(gl);

        var shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPosition has been defined at the top
        gl.linkProgram(shaderProgram);

        gl.useProgram(shaderProgram);

        var buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    }

    function drawCanvas(canvas) {
        var gl = canvas.getContext("webgl");
        initialize(gl);
        draw(gl);
    }

    function drawAll() {
        drawCanvas(document.getElementById("canvas0"));
        drawCanvas(document.getElementById("canvas1"));
        drawCanvas(document.getElementById("canvas2"));

        document.getElementById("canvas1").style.imageRendering = "auto";
        document.getElementById("canvas2").style.imageRendering = "pixelated";
    }
    </script>
  </head>
  <body onload="drawAll()">
    <canvas id="canvas0" width="20" height="20"></canvas>
    <canvas id="canvas1" width="20" height="20"></canvas>
    <canvas id="canvas2" width="20" height="20"></canvas>
  </body>
</html>
chromium/third_party/blink/web_tests/fast/webgl/pixelated.html
