1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/content/canvas/test/webgl-conformance/extra/big-fbos-example.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,216 @@
1.4 +<!--
1.5 +Copyright (c) 2009 The Chromium Authors. All rights reserved.
1.6 +Use of this source code is governed by a BSD-style license that can be
1.7 +found in the LICENSE file.
1.8 + -->
1.9 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
1.10 + "http://www.w3.org/TR/html4/loose.dtd">
1.11 +<html>
1.12 +<head>
1.13 +<meta charset="utf-8">
1.14 +<title>WebGL Big FBO Test</title>
1.15 +<link rel="stylesheet" href="../resources/js-test-style.css"/>
1.16 +<script src="../resources/desktop-gl-constants.js" type="text/javascript"></script>
1.17 +<script src="../../debug/webgl-debug.js"></script>
1.18 +<script src="../resources/js-test-pre.js"></script>
1.19 +<script src="../conformance/resources/webgl-test.js"></script>
1.20 +</head>
1.21 +<body>
1.22 +<div id="description"></div>
1.23 +<div id="console"></div>
1.24 +<script id="vshader" type="x-shader/x-vertex">
1.25 +attribute vec4 vPosition;
1.26 +attribute vec2 texCoord0;
1.27 +uniform mat4 world;
1.28 +varying vec2 texCoord;
1.29 +void main()
1.30 +{
1.31 + gl_Position = vPosition * world;
1.32 + texCoord = texCoord0;
1.33 +}
1.34 +</script>
1.35 +
1.36 +<script id="fshader" type="x-shader/x-fragment">
1.37 +precision mediump float;
1.38 +uniform sampler2D tex;
1.39 +varying vec2 texCoord;
1.40 +void main()
1.41 +{
1.42 + gl_FragColor = texture2D(tex, texCoord);
1.43 +}
1.44 +</script>
1.45 +<canvas id="canvas" width="1024" height="1024"> </canvas>
1.46 +<script>
1.47 +window.onload = init;
1.48 +debug("Tests the performance of using lots of large FBOs");
1.49 +
1.50 +function init() {
1.51 + if (confirm(
1.52 + "after clicking ok your machine may be come unresponsive or crash")) {
1.53 + main();
1.54 + } else {
1.55 + debug("cancelled");
1.56 + }
1.57 +}
1.58 +
1.59 +function main() {
1.60 + debug("");
1.61 + debug("Canvas.getContext");
1.62 + var g_worldLoc;
1.63 + var g_texLoc;
1.64 + var g_textures = [];
1.65 + gl = initWebGL("canvas", "vshader", "fshader", [ "vPosition", "texCoord0"], [ 0, 0, 0, 1 ], 1);
1.66 + if (!gl) {
1.67 + testFailed("context does not exist");
1.68 + } else {
1.69 + testPassed("context exists");
1.70 +
1.71 + debug("");
1.72 + debug("Checking for out of memory handling.");
1.73 +
1.74 + var size = gl.getParameter(gl.MAX_RENDERBUFFER_SIZE);
1.75 + debug("max render buffer size: " + size);
1.76 + size = size / 2;
1.77 + debug("size used: " + size);
1.78 +
1.79 + var allocateFramebuffers = true;
1.80 + var intervalId = 0;
1.81 + var count = 0;
1.82 +
1.83 + WebGLDebugUtils.init(gl);
1.84 +
1.85 + function createFBO() {
1.86 + var tex = gl.createTexture();
1.87 + gl.bindTexture(gl.TEXTURE_2D, tex);
1.88 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
1.89 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
1.90 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
1.91 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
1.92 + gl.texImage2D(gl.TEXTURE_2D,
1.93 + 0, // level
1.94 + gl.RGBA, // internalFormat
1.95 + size, // width
1.96 + size, // height
1.97 + 0, // border
1.98 + gl.RGBA, // format
1.99 + gl.UNSIGNED_BYTE, // type
1.100 + null); // data
1.101 + var fb = gl.createFramebuffer();
1.102 + gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
1.103 + gl.framebufferTexture2D(
1.104 + gl.FRAMEBUFFER,
1.105 + gl.COLOR_ATTACHMENT0,
1.106 + gl.TEXTURE_2D,
1.107 + tex,
1.108 + 0);
1.109 + var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
1.110 + if (status != gl.FRAMEBUFFER_COMPLETE) {
1.111 + testFailed("gl.checkFramebufferStatus() returned " + WebGLDebugUtils.glEnumToString(status));
1.112 + return;
1.113 + }
1.114 + var err = gl.getError();
1.115 + if (err != gl.NO_ERROR) {
1.116 + if (err != gl.OUT_OF_MEMORY) {
1.117 + testFailed("gl.getError returned " + err);
1.118 + }
1.119 + return;
1.120 + }
1.121 + return { fb: fb, tex: tex };
1.122 + }
1.123 +
1.124 + gl.disable(gl.DEPTH_TEST);
1.125 +
1.126 + var maxFBOs = 2;
1.127 + for (var ii = 0; ii < maxFBOs; ++ii) {
1.128 + createFBO();
1.129 + var t = createFBO();
1.130 + if (!t) {
1.131 + break;
1.132 + }
1.133 + tex = t.tex;
1.134 + fb = t.fb;
1.135 +
1.136 + gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
1.137 + gl.scissor(0, 0, size, size);
1.138 + gl.clearColor(0, ii / maxFBOs, 1 - ii / maxFBOs, 1);
1.139 + gl.clear(gl.COLOR_BUFFER_BIT);
1.140 + g_textures.push(tex);
1.141 + }
1.142 +
1.143 + debug("fbos allocated:" + g_textures.length);
1.144 + gl.scissor(0, 0, 1024, 1024);
1.145 + gl.bindFramebuffer(gl.FRAMEBUFFER, null);
1.146 +
1.147 + var vertexObject = gl.createBuffer();
1.148 + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
1.149 + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
1.150 + -1,1,0, 1,1,0, -1,-1,0,
1.151 + -1,-1,0, 1,1,0, 1,-1,0
1.152 + ]), gl.STATIC_DRAW);
1.153 + gl.enableVertexAttribArray(0);
1.154 + gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
1.155 +
1.156 + var vertexObject = gl.createBuffer();
1.157 + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
1.158 + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0, 1,0, 0,1,
1.159 + 0,1, 1,0, 1,1
1.160 + ]), gl.STATIC_DRAW);
1.161 + gl.enableVertexAttribArray(1);
1.162 + gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
1.163 +
1.164 + g_texLoc = gl.getUniformLocation(gl.program, "tex");
1.165 + gl.uniform1i(g_texLoc, 0);
1.166 + g_worldLoc = gl.getUniformLocation(gl.program, "world");
1.167 + gl.uniformMatrix4fv(g_worldLoc, false, [
1.168 + 0, 0, 0, 0,
1.169 + 0, 0, 0, 0,
1.170 + 0, 0, 1, 0,
1.171 + 0, 0, 0, 1]);
1.172 +
1.173 + setInterval(render, 1000/60);
1.174 + }
1.175 +
1.176 + var g_angle = 0;
1.177 + var g_texIndex = 0;
1.178 + function render() {
1.179 + g_angle += 0.1;
1.180 + g_texIndex++;
1.181 + if (g_texIndex >= g_textures.length) {
1.182 + g_texIndex = 0;
1.183 + }
1.184 + gl.bindTexture(gl.TEXTURE_2D, g_textures[g_texIndex]);
1.185 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
1.186 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
1.187 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
1.188 + gl.uniformMatrix4fv(g_worldLoc, false, rotationZ(g_angle));
1.189 + gl.clearColor(1,0,0,1);
1.190 + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
1.191 + gl.drawArrays(gl.TRIANGLES, 0, 6);
1.192 + }
1.193 +}
1.194 +
1.195 +/**
1.196 + * Creates a 4-by-4 matrix which rotates around the z-axis by the given angle.
1.197 + * @param {number} angle The angle by which to rotate (in radians).
1.198 + * @return {!o3djs.math.Matrix4} The rotation matrix.
1.199 + */
1.200 +function rotationZ(angle) {
1.201 + var c = Math.cos(angle);
1.202 + var s = Math.sin(angle);
1.203 +
1.204 + return [
1.205 + c, s, 0, 0,
1.206 + -s, c, 0, 0,
1.207 + 0, 0, 1, 0,
1.208 + 0, 0, 0, 1
1.209 + ];
1.210 +};
1.211 +
1.212 +debug("");
1.213 +successfullyParsed = true;
1.214 +</script>
1.215 +<script>
1.216 +</script>
1.217 +
1.218 +</body>
1.219 +</html>
