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"> 7attribute vec2 a_position; 8varying vec2 v_position; 9void 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"> 16precision mediump float; 17uniform sampler2D u_image; 18varying vec2 v_position; 19void main() { 20 gl_FragColor = texture2D(u_image, v_position); 21} 22</script> 23 24<script> 25var gl = null; 26var shaderProgram = null; 27var textures = []; 28var fbos = []; 29var t = 0.0; 30var n = 1; 31 32// Create n textures of about 1MB each. 33function 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 98function 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 124function 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 137