1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136


content / test / data / gpu / mem_webgl.html [blame]

<!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>