content/test/data/gpu/mem_webgl.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>GPU Memory Test: Use N MB of GPU Memory with WebGL</title>
   5
   6 <script id="vertex-shader" type="x-shader/x-vertex">
   7 attribute vec2 a_position;
   8 varying vec2 v_position;
   9 void main() {
  10     v_position = a_position;
  11     gl_Position = vec4(a_position, 0, 1);
  12 }
  13 </script>
  14
  15 <script id="fragment-shader" type="x-shader/x-fragment">
  16 precision mediump float;
  17 uniform sampler2D u_image;
  18 varying vec2 v_position;
  19 void main() {
  20     gl_FragColor = texture2D(u_image, v_position);
  21 }
  22 </script>
  23
  24 <script>
  25 var gl = null;
  26 var shaderProgram = null;
  27 var textures = [];
  28 var fbos = [];
  29 var t = 0.0;
  30 var n = 1;
  31
  32 // Create n textures of about 1MB each.
  33 function useGpuMemory(mb_to_use)
  34 {
  35   n = mb_to_use;
  36
  37   var canvas = document.getElementById("canvas_id");
  38   gl = canvas.getContext("experimental-webgl");
  39   if (!gl) {
  40     throw "Unable to fetch WebGL rendering context for Canvas";
  41   }
  42
  43   // Create n textures that are each about 1MB and FBOs to render to them.
  44   for (var i = 0; i < n; ++i) {
  45     var texture = gl.createTexture();
  46     var fbo = gl.createFramebuffer();
  47     textures.push(texture);
  48     fbos.push(fbo);
  49
  50     gl.bindTexture(gl.TEXTURE_2D, texture);
  51     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  52     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  53     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  54     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  55     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0,
  56                   gl.RGBA, gl.UNSIGNED_BYTE, null)
  57
  58     gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  59     gl.framebufferTexture2D(gl.FRAMEBUFFER,
  60                             gl.COLOR_ATTACHMENT0,
  61                             gl.TEXTURE_2D,
  62                             texture,
  63                             0);
  64   }
  65
  66   // Create a shader that samples a 2D image.
  67   var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  68   gl.shaderSource(vertexShader,
  69                   document.getElementById("vertex-shader").textContent);
  70   gl.compileShader(vertexShader);
  71
  72   var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  73   gl.shaderSource(fragmentShader,
  74                   document.getElementById("fragment-shader").textContent);
  75   gl.compileShader(fragmentShader);
  76
  77   shaderProgram = gl.createProgram();
  78   gl.attachShader(shaderProgram, vertexShader);
  79   gl.attachShader(shaderProgram, fragmentShader);
  80   gl.linkProgram(shaderProgram);
  81   gl.useProgram(shaderProgram);
  82
  83   // Bind a vertex buffer with a single triangle
  84   var buffer = gl.createBuffer();
  85   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  86   var bufferData = new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0,  1.0]);
  87   gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);
  88   gl.enableVertexAttribArray(shaderProgram.a_position);
  89   gl.vertexAttribPointer(shaderProgram.a_position, 2, gl.FLOAT, false, 0, 0);
  90
  91   // Signal back to the test runner that we're done allocating memory.
  92   domAutomationController.send("DONE_USE_GPU_MEMORY");
  93
  94   // Start the event loop.
  95   tick();
  96 }
  97
  98 function drawScene()
  99 {
 100   // Render a solid color to each texture.
 101   for (var i = 0; i < n; ++i) {
 102     gl.bindFramebuffer(gl.FRAMEBUFFER, fbos[i]);
 103     gl.viewport(0, 0, 512, 512);
 104     gl.clearColor(0.0, Math.sin(t/60.0)*0.25 + 0.75*(i+1.0)/n, 0.0, 1.0);
 105     gl.clear(gl.COLOR_BUFFER_BIT);
 106   }
 107
 108   // Draw these textures to the screen, offset by 1 pixel increments
 109   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 110   gl.viewport(0, 0, 256, 256);
 111   gl.clearColor(0.0, 0.0, 0.0, 1.0);
 112   gl.clear(gl.COLOR_BUFFER_BIT);
 113   for (var i = 0; i < n; ++i) {
 114     gl.viewport(i, i, 256-i, 256-i);
 115     gl.activeTexture(gl.TEXTURE0);
 116     gl.bindTexture(gl.TEXTURE_2D, textures[i]);
 117     gl.uniform1i(shaderProgram.u_image, 0);
 118     gl.drawArrays(gl.TRIANGLES, 0, 3);
 119   }
 120
 121   t += 1;
 122 }
 123
 124 function tick()
 125 {
 126   window.webkitRequestAnimationFrame(tick);
 127   drawScene();
 128 }
 129 </script>
 130 </head>
 131
 132 <body>
 133 <canvas id="canvas_id" width=256px height=256px style="width:256px; height:256px;"/>
 134 </body>
 135 </html>
 136