The Tor Browser: content/canvas/test/webgl-conformance/extra/big-fbos-example.html@6474c204b198

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

     1 <!--

     2 Copyright (c) 2009 The Chromium Authors. All rights reserved.

     3 Use of this source code is governed by a BSD-style license that can be

     4 found in the LICENSE file.

     5  -->

     6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

     7   "http://www.w3.org/TR/html4/loose.dtd">

     8 <html>

     9 <head>

    10 <meta charset="utf-8">

    11 <title>WebGL Big FBO Test</title>

    12 <link rel="stylesheet" href="../resources/js-test-style.css"/>

    13 <script src="../resources/desktop-gl-constants.js" type="text/javascript"></script>

    14 <script src="../../debug/webgl-debug.js"></script>

    15 <script src="../resources/js-test-pre.js"></script>

    16 <script src="../conformance/resources/webgl-test.js"></script>

    17 </head>

    18 <body>

    19 <div id="description"></div>

    20 <div id="console"></div>

    21 <script id="vshader" type="x-shader/x-vertex">

    22 attribute vec4 vPosition;

    23 attribute vec2 texCoord0;

    24 uniform mat4 world;

    25 varying vec2 texCoord;

    26 void main()

    27 {

    28     gl_Position = vPosition * world;

    29     texCoord = texCoord0;

    30 }

    31 </script>

    33 <script id="fshader" type="x-shader/x-fragment">

    34 precision mediump float;

    35 uniform sampler2D tex;

    36 varying vec2 texCoord;

    37 void main()

    38 {

    39     gl_FragColor = texture2D(tex, texCoord);

    40 }

    41 </script>

    42 <canvas id="canvas" width="1024" height="1024"> </canvas>

    43 <script>

    44 window.onload = init;

    45 debug("Tests the performance of using lots of large FBOs");

    47 function init() {

    48   if (confirm(

    49       "after clicking ok your machine may be come unresponsive or crash")) {

    50     main();

    51   } else {

    52     debug("cancelled");

    53   }

    54 }

    56 function main() {

    57   debug("");

    58   debug("Canvas.getContext");

    59   var g_worldLoc;

    60   var g_texLoc;

    61   var g_textures = [];

    62   gl = initWebGL("canvas", "vshader", "fshader", [ "vPosition", "texCoord0"], [ 0, 0, 0, 1 ], 1);

    63   if (!gl) {

    64     testFailed("context does not exist");

    65   } else {

    66     testPassed("context exists");

    68     debug("");

    69     debug("Checking for out of memory handling.");

    71     var size = gl.getParameter(gl.MAX_RENDERBUFFER_SIZE);

    72     debug("max render buffer size: " + size);

    73     size = size / 2;

    74     debug("size used: " + size);

    76     var allocateFramebuffers = true;

    77     var intervalId = 0;

    78     var count = 0;

    80     WebGLDebugUtils.init(gl);

    82     function createFBO() {

    83       var tex = gl.createTexture();

    84       gl.bindTexture(gl.TEXTURE_2D, tex);

    85       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

    86       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    87       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

    88       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    89       gl.texImage2D(gl.TEXTURE_2D,

    90                     0,                 // level

    91                     gl.RGBA,           // internalFormat

    92                     size,              // width

    93                     size,              // height

    94                     0,                 // border

    95                     gl.RGBA,           // format

    96                     gl.UNSIGNED_BYTE,  // type

    97                     null);             // data

    98       var fb = gl.createFramebuffer();

    99       gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

   100       gl.framebufferTexture2D(

   101           gl.FRAMEBUFFER,

   102           gl.COLOR_ATTACHMENT0,

   103           gl.TEXTURE_2D,

   104           tex,

   105           0);

   106       var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);

   107       if (status != gl.FRAMEBUFFER_COMPLETE) {

   108         testFailed("gl.checkFramebufferStatus() returned " + WebGLDebugUtils.glEnumToString(status));

   109         return;

   110       }

   111       var err = gl.getError();

   112       if (err != gl.NO_ERROR) {

   113         if (err != gl.OUT_OF_MEMORY) {

   114           testFailed("gl.getError returned " + err);

   115         }

   116         return;

   117       }

   118       return { fb: fb, tex: tex };

   119     }

   121     gl.disable(gl.DEPTH_TEST);

   123     var maxFBOs = 2;

   124     for (var ii = 0; ii < maxFBOs; ++ii) {

   125       createFBO();

   126       var t = createFBO();

   127       if (!t) {

   128         break;

   129       }

   130       tex = t.tex;

   131       fb = t.fb;

   133       gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

   134       gl.scissor(0, 0, size, size);

   135       gl.clearColor(0, ii / maxFBOs, 1 - ii / maxFBOs, 1);

   136       gl.clear(gl.COLOR_BUFFER_BIT);

   137       g_textures.push(tex);

   138     }

   140     debug("fbos allocated:" + g_textures.length);

   141     gl.scissor(0, 0, 1024, 1024);

   142     gl.bindFramebuffer(gl.FRAMEBUFFER, null);

   144     var vertexObject = gl.createBuffer();

   145     gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);

   146     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([

   147        -1,1,0, 1,1,0, -1,-1,0,

   148        -1,-1,0, 1,1,0, 1,-1,0

   149      ]), gl.STATIC_DRAW);

   150     gl.enableVertexAttribArray(0);

   151     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

   153     var vertexObject = gl.createBuffer();

   154     gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);

   155     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0, 1,0, 0,1,

   156        0,1, 1,0, 1,1

   157      ]), gl.STATIC_DRAW);

   158     gl.enableVertexAttribArray(1);

   159     gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);

   161     g_texLoc = gl.getUniformLocation(gl.program, "tex");

   162     gl.uniform1i(g_texLoc, 0);

   163     g_worldLoc = gl.getUniformLocation(gl.program, "world");

   164     gl.uniformMatrix4fv(g_worldLoc, false, [

   165        0, 0, 0, 0,

   166        0, 0, 0, 0,

   167        0, 0, 1, 0,

   168        0, 0, 0, 1]);

   170     setInterval(render, 1000/60);

   171   }

   173   var g_angle = 0;

   174   var g_texIndex = 0;

   175   function render() {

   176     g_angle += 0.1;

   177     g_texIndex++;

   178     if (g_texIndex >= g_textures.length) {

   179       g_texIndex = 0;

   180     }

   181     gl.bindTexture(gl.TEXTURE_2D, g_textures[g_texIndex]);

   182     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

   183     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

   184     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

   185     gl.uniformMatrix4fv(g_worldLoc, false, rotationZ(g_angle));

   186     gl.clearColor(1,0,0,1);

   187     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

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

   189   }

   190 }

   192 /**

   193  * Creates a 4-by-4 matrix which rotates around the z-axis by the given angle.

   194  * @param {number} angle The angle by which to rotate (in radians).

   195  * @return {!o3djs.math.Matrix4} The rotation matrix.

   196  */

   197 function rotationZ(angle) {

   198   var c = Math.cos(angle);

   199   var s = Math.sin(angle);

   201   return [

   202     c, s, 0, 0,

   203     -s, c, 0, 0,

   204     0, 0, 1, 0,

   205     0, 0, 0, 1

   206   ];

   207 };

   209 debug("");

   210 successfullyParsed = true;

   211 </script>

   212 <script>

   213 </script>

   215 </body>

   216 </html>

The Tor Browser / file revision