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 |