Home | History | Annotate | Download | only in gpu 
      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 
    130 
    131 
    132 
    133 
    134 
    135 
    136 
    137