The Tor Browser: browser/devtools/shadereditor/test/doc

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     1 <!-- Any copyright is dedicated to the Public Domain.

     2      http://creativecommons.org/publicdomain/zero/1.0/ -->

     3 <!doctype html>

     5 <html>

     6   <head>

     7     <meta charset="utf-8"/>

     8     <title>WebGL editor test page</title>

    10     <script id="shader-vs" type="x-shader/x-vertex">

    11       precision lowp float;

    12       attribute vec3 aVertexPosition;

    14       void main(void) {

    15         gl_Position = vec4(aVertexPosition, 1);

    16       }

    17     </script>

    19     <script id="shader-fs" type="x-shader/x-fragment">

    20       precision lowp float;

    21       uniform vec3 uColor;

    23       void main(void) {

    24         gl_FragColor = vec4(uColor, 1);

    25       }

    26     </script>

    27   </head>

    29   <body>

    30     <canvas id="canvas1" width="128" height="128"></canvas>

    31     <canvas id="canvas2" width="128" height="128"></canvas>

    33     <script type="text/javascript;version=1.8">

    34       "use strict";

    36       let canvas = [], gl = [];

    37       let program = [];

    38       let squareVerticesPositionBuffer = [];

    39       let vertexPositionAttribute = [];

    40       let colorUniform = [];

    42       window.onload = function() {

    43         for (let i = 0; i < 2; i++) {

    44           canvas[i] = document.querySelector("#canvas" + (i + 1));

    45           gl[i] = canvas[i].getContext("webgl", { preserveDrawingBuffer: true });

    46           gl[i].clearColor(0.0, 0.0, 0.0, 1.0);

    48           initProgram(i);

    49           initBuffers(i);

    50           drawScene(i);

    51         }

    52       }

    54       function initProgram(i) {

    55         let vertexShader = getShader(gl[i], "shader-vs");

    56         let fragmentShader = getShader(gl[i], "shader-fs");

    58         program[i] = gl[i].createProgram();

    59         gl[i].attachShader(program[i], vertexShader);

    60         gl[i].attachShader(program[i], fragmentShader);

    61         gl[i].linkProgram(program[i]);

    63         vertexPositionAttribute[i] = gl[i].getAttribLocation(program[i], "aVertexPosition");

    64         gl[i].enableVertexAttribArray(vertexPositionAttribute[i]);

    66         colorUniform[i] = gl[i].getUniformLocation(program[i], "uColor");

    67       }

    69       function getShader(gl, id) {

    70         let script = document.getElementById(id);

    71         let source = script.textContent;

    72         let shader;

    74         if (script.type == "x-shader/x-fragment") {

    75           shader = gl.createShader(gl.FRAGMENT_SHADER);

    76         } else if (script.type == "x-shader/x-vertex") {

    77           shader = gl.createShader(gl.VERTEX_SHADER);

    78         }

    80         gl.shaderSource(shader, source);

    81         gl.compileShader(shader);

    83         return shader;

    84       }

    86       function initBuffers(i) {

    87         squareVerticesPositionBuffer[i] = gl[i].createBuffer();

    88         gl[i].bindBuffer(gl[i].ARRAY_BUFFER, squareVerticesPositionBuffer[i]);

    89         gl[i].bufferData(gl[i].ARRAY_BUFFER, new Float32Array([

    90            1.0,  1.0, 0.0,

    91           -1.0,  1.0, 0.0,

    92            1.0, -1.0, 0.0,

    93           -1.0, -1.0, 0.0

    94         ]), gl[i].STATIC_DRAW);

    95       }

    97       function drawScene(i) {

    98         gl[i].clear(gl[i].COLOR_BUFFER_BIT);

   100         gl[i].bindBuffer(gl[i].ARRAY_BUFFER, squareVerticesPositionBuffer[i]);

   101         gl[i].vertexAttribPointer(vertexPositionAttribute[i], 3, gl[i].FLOAT, false, 0, 0);

   103         gl[i].useProgram(program[i]);

   104         gl[i].uniform3fv(colorUniform[i], i == 0 ? [1, 1, 0] : [0, 1, 1]);

   105         gl[i].drawArrays(gl[i].TRIANGLE_STRIP, 0, 4);

   107         window.requestAnimationFrame(() => drawScene(i));

   108       }

   109     </script>

   110   </body>

   112 </html>

The Tor Browser / file revision