OLD | NEW |
(Empty) | |
| 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 |
OLD | NEW |