mem_webgl.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<head>
<title>GPU Memory Test: Use N MB of GPU Memory with WebGL</title>

<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
varying vec2 v_position;
void main() {
    v_position = a_position;
    gl_Position = vec4(a_position, 0, 1);
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_position;
void main() {
    gl_FragColor = texture2D(u_image, v_position);
}
</script>

<script>
var gl = null;
var shaderProgram = null;
var textures = [];
var fbos = [];
var t = 0.0;
var n = 1;

// Create n textures of about 1MB each.
function useGpuMemory(mb_to_use)
{
  n = mb_to_use;

  var canvas = document.getElementById("canvas_id");
  gl = canvas.getContext("experimental-webgl");
  if (!gl) {
    throw "Unable to fetch WebGL rendering context for Canvas";
  }

  // Create n textures that are each about 1MB and FBOs to render to them.
  for (var i = 0; i < n; ++i) {
    var texture = gl.createTexture();
    var fbo = gl.createFramebuffer();
    textures.push(texture);
    fbos.push(fbo);

    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0,
                  gl.RGBA, gl.UNSIGNED_BYTE, null)

    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER,
                            gl.COLOR_ATTACHMENT0,
                            gl.TEXTURE_2D,
                            texture,
                            0);
  }

  // Create a shader that samples a 2D image.
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader,
                  document.getElementById("vertex-shader").textContent);
  gl.compileShader(vertexShader);

  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader,
                  document.getElementById("fragment-shader").textContent);
  gl.compileShader(fragmentShader);

  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  gl.useProgram(shaderProgram);

  // Bind a vertex buffer with a single triangle
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  var bufferData = new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0,  1.0]);
  gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(shaderProgram.a_position);
  gl.vertexAttribPointer(shaderProgram.a_position, 2, gl.FLOAT, false, 0, 0);

  // Signal back to the test runner that we're done allocating memory.
  domAutomationController.send("DONE_USE_GPU_MEMORY");

  // Start the event loop.
  tick();
}

function drawScene()
{
  // Render a solid color to each texture.
  for (var i = 0; i < n; ++i) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbos[i]);
    gl.viewport(0, 0, 512, 512);
    gl.clearColor(0.0, Math.sin(t/60.0)*0.25 + 0.75*(i+1.0)/n, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
  }

  // Draw these textures to the screen, offset by 1 pixel increments
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.viewport(0, 0, 256, 256);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  for (var i = 0; i < n; ++i) {
    gl.viewport(i, i, 256-i, 256-i);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, textures[i]);
    gl.uniform1i(shaderProgram.u_image, 0);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  }

  t += 1;
}

function tick()
{
  window.requestAnimationFrame(tick);
  drawScene();
}
</script>
</head>

<body>
<canvas id="canvas_id" width=256px height=256px style="width:256px; height:256px;"/>
</body>
</html>
chromium/content/test/data/gpu/mem_webgl.html
