webgl-draw-buffers.html (30991B)
1 <!-- 2 Copyright (c) 2019 The Khronos Group Inc. 3 Use of this source code is governed by an MIT-style license that can be 4 found in the LICENSE.txt file. 5 --> 6 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="utf-8"> 11 <title>WebGL WEBGL_draw_buffers Conformance Tests</title> 12 <link rel="stylesheet" href="../../resources/js-test-style.css"/> 13 <script src="../../js/js-test-pre.js"></script> 14 <script src="../../js/webgl-test-utils.js"></script> 15 <script src="../../js/tests/webgl-draw-buffers-utils.js"></script> 16 </head> 17 <body> 18 <div id="description"></div> 19 <canvas id="canvas" width="64" height="64"> </canvas> 20 <div id="console"></div> 21 <script id="fshader" type="x-shader/x-fragment"> 22 #extension GL_EXT_draw_buffers : require 23 precision mediump float; 24 uniform vec4 u_colors[$(numDrawingBuffers)]; 25 void main() { 26 for (int i = 0; i < $(numDrawingBuffers); ++i) { 27 gl_FragData[i] = u_colors[i]; 28 } 29 } 30 </script> 31 <script id="fshaderNoWrite" type="x-shader/x-fragment"> 32 #extension GL_EXT_draw_buffers : require 33 void main() { 34 } 35 </script> 36 <script id="fshaderRed" type="x-shader/x-fragment"> 37 precision mediump float; 38 void main() { 39 gl_FragColor = vec4(1,0,0,1); 40 } 41 </script> 42 <script id="fshaderRedWithExtension" type="x-shader/x-fragment"> 43 #extension GL_EXT_draw_buffers : require 44 precision mediump float; 45 void main() { 46 gl_FragColor = vec4(1,0,0,1); 47 } 48 </script> 49 <script id="fshaderMacroDisabled" type="x-shader/x-fragment"> 50 #ifdef GL_EXT_draw_buffers 51 bad code here 52 #endif 53 precision mediump float; 54 void main() { 55 gl_FragColor = vec4(0,0,0,0); 56 } 57 </script> 58 <script id="fshaderMacroEnabled" type="x-shader/x-fragment"> 59 #ifdef GL_EXT_draw_buffers 60 #if GL_EXT_draw_buffers == 1 61 #define CODE 62 #else 63 #define CODE this_code_is_bad_it_should_have_compiled 64 #endif 65 #else 66 #define CODE this_code_is_bad_it_should_have_compiled 67 #endif 68 CODE 69 precision mediump float; 70 void main() { 71 gl_FragColor = vec4(0,0,0,0); 72 } 73 </script> 74 <script id="fshaderBuiltInConstEnabled" type="x-shader/x-fragment"> 75 precision mediump float; 76 void main() { 77 gl_FragColor = (gl_MaxDrawBuffers == $(numDrawingBuffers)) ? vec4(0,1,0,1) : vec4(1,0,0,1); 78 } 79 </script> 80 <script> 81 "use strict"; 82 description("This test verifies the functionality of the WEBGL_draw_buffers extension, if it is available."); 83 84 debug(""); 85 86 var wtu = WebGLTestUtils; 87 var canvas = document.getElementById("canvas"); 88 var gl = wtu.create3DContext(canvas); 89 var ext = null; 90 var programWithMaxDrawBuffersEqualOne = null; 91 var drawBuffersUtils; 92 let fb; 93 94 var extensionConstants = [ 95 { name: "MAX_COLOR_ATTACHMENTS_WEBGL", enum: 0x8CDF, expectedFn: function(v) { return v >= 4; }, passMsg: " should be >= 4"}, 96 { name: "MAX_DRAW_BUFFERS_WEBGL", enum: 0x8824, expectedFn: function(v) { return v > 0; }, passMsg: " should be > 0"}, 97 98 { name: "COLOR_ATTACHMENT0_WEBGL", enum: 0x8CE0, }, 99 { name: "COLOR_ATTACHMENT1_WEBGL", enum: 0x8CE1, }, 100 { name: "COLOR_ATTACHMENT2_WEBGL", enum: 0x8CE2, }, 101 { name: "COLOR_ATTACHMENT3_WEBGL", enum: 0x8CE3, }, 102 { name: "COLOR_ATTACHMENT4_WEBGL", enum: 0x8CE4, }, 103 { name: "COLOR_ATTACHMENT5_WEBGL", enum: 0x8CE5, }, 104 { name: "COLOR_ATTACHMENT6_WEBGL", enum: 0x8CE6, }, 105 { name: "COLOR_ATTACHMENT7_WEBGL", enum: 0x8CE7, }, 106 { name: "COLOR_ATTACHMENT8_WEBGL", enum: 0x8CE8, }, 107 { name: "COLOR_ATTACHMENT9_WEBGL", enum: 0x8CE9, }, 108 { name: "COLOR_ATTACHMENT10_WEBGL", enum: 0x8CEA, }, 109 { name: "COLOR_ATTACHMENT11_WEBGL", enum: 0x8CEB, }, 110 { name: "COLOR_ATTACHMENT12_WEBGL", enum: 0x8CEC, }, 111 { name: "COLOR_ATTACHMENT13_WEBGL", enum: 0x8CED, }, 112 { name: "COLOR_ATTACHMENT14_WEBGL", enum: 0x8CEE, }, 113 { name: "COLOR_ATTACHMENT15_WEBGL", enum: 0x8CEF, }, 114 115 { name: "DRAW_BUFFER0_WEBGL", enum: 0x8825, }, 116 { name: "DRAW_BUFFER1_WEBGL", enum: 0x8826, }, 117 { name: "DRAW_BUFFER2_WEBGL", enum: 0x8827, }, 118 { name: "DRAW_BUFFER3_WEBGL", enum: 0x8828, }, 119 { name: "DRAW_BUFFER4_WEBGL", enum: 0x8829, }, 120 { name: "DRAW_BUFFER5_WEBGL", enum: 0x882A, }, 121 { name: "DRAW_BUFFER6_WEBGL", enum: 0x882B, }, 122 { name: "DRAW_BUFFER7_WEBGL", enum: 0x882C, }, 123 { name: "DRAW_BUFFER8_WEBGL", enum: 0x882D, }, 124 { name: "DRAW_BUFFER9_WEBGL", enum: 0x882E, }, 125 { name: "DRAW_BUFFER10_WEBGL", enum: 0x882F, }, 126 { name: "DRAW_BUFFER11_WEBGL", enum: 0x8830, }, 127 { name: "DRAW_BUFFER12_WEBGL", enum: 0x8831, }, 128 { name: "DRAW_BUFFER13_WEBGL", enum: 0x8832, }, 129 { name: "DRAW_BUFFER14_WEBGL", enum: 0x8833, }, 130 { name: "DRAW_BUFFER15_WEBGL", enum: 0x8834, }, 131 ]; 132 133 if (!gl) { 134 testFailed("WebGL context does not exist"); 135 } else { 136 testPassed("WebGL context exists"); 137 138 // Run tests with extension disabled 139 runEnumTestDisabled(); 140 runShadersTestDisabled(); 141 runAttachmentTestDisabled(); 142 143 debug(""); 144 145 // Query the extension and store globally so shouldBe can access it 146 ext = gl.getExtension("WEBGL_draw_buffers"); 147 if (!ext) { 148 testPassed("No WEBGL_draw_buffers support -- this is legal"); 149 150 runSupportedTest(false); 151 finishTest(); 152 } else { 153 testPassed("Successfully enabled WEBGL_draw_buffers extension"); 154 155 drawBuffersUtils = WebGLDrawBuffersUtils(gl, ext); 156 runSupportedTest(true); 157 runEnumTestEnabled(); 158 runShadersTestEnabled(); 159 runAttachmentTestEnabled(); 160 runDrawTests(); 161 runPreserveTests(); 162 } 163 } 164 165 function createExtDrawBuffersProgram(scriptId, sub) { 166 var fsource = wtu.getScript(scriptId); 167 fsource = wtu.replaceParams(fsource, sub); 168 return wtu.setupProgram(gl, [wtu.simpleVertexShader, fsource], ["vPosition"], undefined, true); 169 } 170 171 function runSupportedTest(extensionEnabled) { 172 var supported = gl.getSupportedExtensions(); 173 if (supported.indexOf("WEBGL_draw_buffers") >= 0) { 174 if (extensionEnabled) { 175 testPassed("WEBGL_draw_buffers listed as supported and getExtension succeeded"); 176 } else { 177 testFailed("WEBGL_draw_buffers listed as supported but getExtension failed"); 178 } 179 } else { 180 if (extensionEnabled) { 181 testFailed("WEBGL_draw_buffers not listed as supported but getExtension succeeded"); 182 } else { 183 testPassed("WEBGL_draw_buffers not listed as supported and getExtension failed -- this is legal"); 184 } 185 } 186 } 187 188 function runEnumTestDisabled() { 189 debug(""); 190 debug("Testing binding enum with extension disabled"); 191 192 // Use the constant directly as we don't have the extension 193 extensionConstants.forEach(function(c) { 194 if (c.expectedFn) { 195 shouldBeNull(`gl.getParameter(${c.enum})`); 196 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, c.name + " should not be queryable if extension is disabled"); 197 } 198 }); 199 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 200 } 201 202 function runEnumTestEnabled() { 203 debug(""); 204 debug("Testing enums with extension enabled"); 205 206 extensionConstants.forEach(function(c) { 207 shouldBe("ext." + c.name, "0x" + c.enum.toString(16)); 208 if (c.expectedFn) { 209 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "before getParameter"); 210 debug(c.name + ": 0x" + ext[c.name].toString(16)); 211 expectTrue(c.expectedFn(gl.getParameter(ext[c.name])), "gl.getParameter(ext." + c.name + ")" + c.passMsg); 212 wtu.glErrorShouldBe(gl, gl.NO_ERROR, c.name + " query should succeed if extension is enabled"); 213 } 214 }); 215 216 shouldBeTrue("gl.getParameter(ext.MAX_COLOR_ATTACHMENTS_WEBGL) >= gl.getParameter(ext.MAX_DRAW_BUFFERS_WEBGL)"); 217 218 debug("Testing drawBuffersWEBGL with default drawing buffer"); 219 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.BACK"); 220 wtu.shouldGenerateGLError(gl, gl.INVALID_OPERATION, "ext.drawBuffersWEBGL([])"); 221 wtu.shouldGenerateGLError(gl, gl.INVALID_OPERATION, "ext.drawBuffersWEBGL([gl.NONE, gl.NONE])"); 222 wtu.shouldGenerateGLError(gl, gl.INVALID_OPERATION, "ext.drawBuffersWEBGL([ext.COLOR_ATTACHMENT0_WEBGL])"); 223 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.BACK"); 224 wtu.shouldGenerateGLError(gl, gl.NO_ERROR, "ext.drawBuffersWEBGL([gl.NONE])"); 225 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.NONE"); 226 wtu.shouldGenerateGLError(gl, gl.NO_ERROR, "ext.drawBuffersWEBGL([gl.BACK])"); 227 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.BACK"); 228 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 229 230 debug("Testing drawBuffers and getParameter with bindFramebuffer, without drawing."); 231 fb = gl.createFramebuffer(); 232 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 233 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.COLOR_ATTACHMENT0"); 234 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL+1)", "gl.NONE"); 235 wtu.shouldGenerateGLError(gl, gl.NO_ERROR, "ext.drawBuffersWEBGL([gl.NONE])"); 236 gl.bindFramebuffer(gl.FRAMEBUFFER, null); 237 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.BACK"); 238 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 239 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.NONE"); 240 241 wtu.shouldGenerateGLError(gl, gl.NO_ERROR, "ext.drawBuffersWEBGL([gl.NONE,gl.COLOR_ATTACHMENT0+1])"); 242 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.NONE"); 243 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL+1)", "gl.COLOR_ATTACHMENT0+1"); 244 245 wtu.shouldGenerateGLError(gl, gl.NO_ERROR, "ext.drawBuffersWEBGL([gl.COLOR_ATTACHMENT0,gl.COLOR_ATTACHMENT0+1])"); 246 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.COLOR_ATTACHMENT0"); 247 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL+1)", "gl.COLOR_ATTACHMENT0+1"); 248 249 wtu.shouldGenerateGLError(gl, gl.NO_ERROR, "gl.deleteFramebuffer(fb)"); 250 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL)", "gl.BACK"); 251 } 252 253 function testShaders(tests, sub) { 254 tests.forEach(function(test) { 255 var shaders = [wtu.simpleVertexShader, wtu.replaceParams(wtu.getScript(test.fragmentShaderTemplate), sub)]; 256 var program = wtu.setupProgram(gl, shaders, ["vPosition"], undefined, true); 257 var programLinkedSuccessfully = (program != null); 258 var expectedProgramToLinkSuccessfully = (test.expectFailure == true); 259 expectTrue(programLinkedSuccessfully != expectedProgramToLinkSuccessfully, test.msg); 260 gl.deleteProgram(program); 261 }); 262 } 263 264 function runShadersTestDisabled() { 265 debug(""); 266 debug("test shaders disabled"); 267 268 var sub = {numDrawingBuffers: 1}; 269 testShaders([ 270 { fragmentShaderTemplate: "fshaderMacroDisabled", 271 msg: "GL_EXT_draw_buffers should not be defined in GLSL", 272 }, 273 { fragmentShaderTemplate: "fshader", 274 msg: "#extension GL_EXT_draw_buffers should not be allowed in GLSL", 275 expectFailure: true, 276 }, 277 ], sub); 278 279 programWithMaxDrawBuffersEqualOne = createExtDrawBuffersProgram("fshaderBuiltInConstEnabled", sub); 280 wtu.setupUnitQuad(gl); 281 wtu.clearAndDrawUnitQuad(gl); 282 wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green"); 283 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 284 } 285 286 function runShadersTestEnabled() { 287 debug(""); 288 debug("test shaders enabled"); 289 290 var sub = {numDrawingBuffers: gl.getParameter(ext.MAX_DRAW_BUFFERS_WEBGL)}; 291 testShaders([ 292 { fragmentShaderTemplate: "fshaderMacroEnabled", 293 msg: "GL_EXT_draw_buffers should be defined as 1 in GLSL", 294 }, 295 { fragmentShaderTemplate: "fshader", 296 msg: "fragment shader containing the #extension directive should compile", 297 }, 298 ], sub); 299 300 var program = createExtDrawBuffersProgram("fshaderBuiltInConstEnabled", sub); 301 wtu.setupUnitQuad(gl); 302 wtu.clearAndDrawUnitQuad(gl); 303 wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green"); 304 gl.deleteProgram(program); 305 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 306 307 debug(""); 308 debug("test that gl_MaxDrawBuffers is frozen at link time and enabling the extension won't change it."); 309 gl.useProgram(programWithMaxDrawBuffersEqualOne); 310 wtu.clearAndDrawUnitQuad(gl); 311 wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green"); 312 gl.deleteProgram(programWithMaxDrawBuffersEqualOne); 313 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 314 } 315 316 function runAttachmentTestDisabled() { 317 debug(""); 318 debug("test attachment disabled"); 319 var tex = gl.createTexture(); 320 var fb = gl.createFramebuffer(); 321 gl.bindTexture(gl.TEXTURE_2D, tex); 322 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 323 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + 1, gl.TEXTURE_2D, tex, 0); 324 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "should not be able to attach to gl.COLOR_ATTACHMENT1"); 325 gl.deleteFramebuffer(fb); 326 gl.deleteTexture(tex); 327 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 328 } 329 330 function makeArray(size, value) { 331 var array = [] 332 for (var ii = 0; ii < size; ++ii) { 333 array.push(value); 334 } 335 return array; 336 } 337 338 function runAttachmentTestEnabled() { 339 debug(""); 340 debug("test attachment enabled"); 341 342 var maxDrawingBuffers = gl.getParameter(ext.MAX_DRAW_BUFFERS_WEBGL); 343 var maxColorAttachments = gl.getParameter(ext.MAX_COLOR_ATTACHMENTS_WEBGL); 344 345 var tex = gl.createTexture(); 346 var fb = gl.createFramebuffer(); 347 gl.bindTexture(gl.TEXTURE_2D, tex); 348 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 349 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + maxColorAttachments, gl.TEXTURE_2D, tex, 0); 350 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "should not be able to attach pass the max attachment point: gl.COLOR_ATTACHMENT0 + " + maxColorAttachments); 351 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + maxColorAttachments - 1, gl.TEXTURE_2D, tex, 0); 352 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be able to attach to the max attachment point: gl.COLOR_ATTACHMENT0 + " + (maxColorAttachments - 1)); 353 ext.drawBuffersWEBGL(makeArray(maxDrawingBuffers, gl.NONE)); 354 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be able to call drawBuffersWEBGL with array NONE of size " + maxColorAttachments); 355 var bufs = drawBuffersUtils.makeColorAttachmentArray(maxDrawingBuffers); 356 ext.drawBuffersWEBGL(bufs); 357 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be able to call drawBuffersWEBGL with array attachments of size " + maxColorAttachments); 358 bufs[0] = gl.NONE; 359 ext.drawBuffersWEBGL(bufs); 360 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be able to call drawBuffersWEBGL with mixed array attachments of size " + maxColorAttachments); 361 if (maxDrawingBuffers > 1) { 362 bufs[0] = ext.COLOR_ATTACHMENT1_WEBGL; 363 bufs[1] = ext.COLOR_ATTACHMENT0_WEBGL; 364 ext.drawBuffersWEBGL(bufs); 365 wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "should not be able to call drawBuffersWEBGL with out of order attachments of size " + maxColorAttachments); 366 var bufs = drawBuffersUtils.makeColorAttachmentArray(Math.floor(maxDrawingBuffers / 2)); 367 ext.drawBuffersWEBGL(bufs); 368 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be able to call drawBuffersWEBGL with short array of attachments of size " + bufs.length); 369 } 370 371 gl.deleteFramebuffer(fb); 372 gl.deleteTexture(tex); 373 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 374 } 375 376 function makeColorByIndex(index) { 377 var low = (index - 1) % 15 + 1; 378 var high = (index - 1) / 15; 379 380 var zeroOrOne = function(v) { 381 return v ? 1 : 0; 382 }; 383 384 var oneOrTwo = function(v) { 385 return v ? 2 : 1; 386 } 387 388 var makeComponent = function(b0, b1, b2) { 389 return Math.floor(255 * zeroOrOne(b0) / oneOrTwo(b1) / oneOrTwo(b2)); 390 }; 391 return [ 392 makeComponent(low & (1 << 0), high & (1 << 0), high & (1 << 4)), 393 makeComponent(low & (1 << 1), high & (1 << 1), high & (1 << 5)), 394 makeComponent(low & (1 << 2), high & (1 << 2), high & (1 << 6)), 395 makeComponent(low & (1 << 3), high & (1 << 3), high & (1 << 7)), 396 ]; 397 } 398 399 function runDrawTests() { 400 debug(""); 401 debug("--------- draw tests -----------"); 402 var fb = gl.createFramebuffer(); 403 var fb2 = gl.createFramebuffer(); 404 var halfFB1 = gl.createFramebuffer(); 405 var halfFB2 = gl.createFramebuffer(); 406 var endsFB = gl.createFramebuffer(); 407 var middleFB = gl.createFramebuffer(); 408 409 var maxDrawingBuffers = gl.getParameter(ext.MAX_DRAW_BUFFERS_WEBGL); 410 var maxUsable = drawBuffersUtils.getMaxUsableColorAttachments(); 411 var half = Math.floor(maxUsable / 2); 412 var bufs = drawBuffersUtils.makeColorAttachmentArray(maxUsable); 413 var nones = makeArray(maxUsable, gl.NONE); 414 415 [fb, fb2, halfFB1, halfFB2, endsFB, middleFB].forEach(function(fbo) { 416 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 417 ext.drawBuffersWEBGL(bufs); 418 }); 419 420 var checkProgram = wtu.setupTexturedQuad(gl); 421 var redProgram = wtu.setupProgram(gl, [wtu.simpleVertexShader, "fshaderRed"], ["vPosition"]); 422 var redProgramWithExtension = wtu.setupProgram(gl, [wtu.simpleVertexShader, "fshaderRedWithExtension"], ["vPosition"]); 423 var drawProgram = createExtDrawBuffersProgram("fshader", {numDrawingBuffers: maxDrawingBuffers}); 424 var width = 64; 425 var height = 64; 426 var attachments = []; 427 // Makes 6 framebuffers. 428 // fb and fb2 have all the attachments. 429 // halfFB1 has the first half of the attachments 430 // halfFB2 has the second half of the attachments 431 // endsFB has the first and last attachments 432 // middleFB has all but the first and last attachments 433 for (var ii = 0; ii < maxUsable; ++ii) { 434 var tex = gl.createTexture(); 435 gl.bindTexture(gl.TEXTURE_2D, tex); 436 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 437 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 438 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 439 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 440 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 441 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 442 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + ii, gl.TEXTURE_2D, tex, 0); 443 gl.bindFramebuffer(gl.FRAMEBUFFER, fb2); 444 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + ii, gl.TEXTURE_2D, tex, 0); 445 gl.bindFramebuffer(gl.FRAMEBUFFER, ii < half ? halfFB1 : halfFB2); 446 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + ii, gl.TEXTURE_2D, tex, 0); 447 gl.bindFramebuffer(gl.FRAMEBUFFER, (ii == 0 || ii == (maxUsable - 1)) ? endsFB : middleFB); 448 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + ii, gl.TEXTURE_2D, tex, 0); 449 var location = gl.getUniformLocation(drawProgram, "u_colors[" + ii + "]"); 450 var color = makeColorByIndex(ii + 1); 451 var floatColor = [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255]; 452 gl.uniform4fv(location, floatColor); 453 attachments.push({ 454 texture: tex, 455 color: color 456 }); 457 } 458 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 459 shouldBe("gl.checkFramebufferStatus(gl.FRAMEBUFFER)", "gl.FRAMEBUFFER_COMPLETE"); 460 gl.bindFramebuffer(gl.FRAMEBUFFER, fb2); 461 shouldBe("gl.checkFramebufferStatus(gl.FRAMEBUFFER)", "gl.FRAMEBUFFER_COMPLETE"); 462 463 var drawAndCheckAttachments = function(testFB, msg, testFn) { 464 debug("test clearing " + msg); 465 466 gl.bindFramebuffer(gl.FRAMEBUFFER, testFB); 467 468 attachments.forEach(function(attachment, index) { 469 debug("attachment: " + index + " = " + wtu.glEnumToString(gl, gl.getParameter(ext.DRAW_BUFFER0_WEBGL + index)) + 470 ", " + wtu.glEnumToString(gl, gl.getFramebufferAttachmentParameter(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + index, gl.FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE))); 471 }); 472 473 if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) { 474 debug("framebuffer not complete"); 475 debug(""); 476 return; 477 } 478 479 // Clear all the attachments 480 gl.bindFramebuffer(gl.FRAMEBUFFER, fb2); 481 gl.clearColor(0, 0, 0, 0); 482 gl.clear(gl.COLOR_BUFFER_BIT); 483 //drawBuffersUtils.checkAttachmentsForColorFn(attachments, function(attachment, index) { 484 // return [0, 0, 0, 0]; 485 //}); 486 //debug("--"); 487 488 // Clear some attachments using testFB 489 gl.bindFramebuffer(gl.FRAMEBUFFER, testFB); 490 491 gl.clearColor(0, 1, 0, 1); 492 gl.clear(gl.COLOR_BUFFER_BIT); 493 drawBuffersUtils.checkAttachmentsForColorFn(attachments, function(attachment, index) { 494 return testFn(attachment, index) ? [0, 255, 0, 255] : [0, 0, 0, 0]; 495 }); 496 497 debug("test drawing to " + msg); 498 499 // Draw to some attachments using testFB 500 gl.useProgram(drawProgram); 501 gl.bindFramebuffer(gl.FRAMEBUFFER, testFB); 502 wtu.drawUnitQuad(gl); 503 504 drawBuffersUtils.checkAttachmentsForColorFn(attachments, function(attachment, index) { 505 return testFn(attachment, index) ? attachment.color : [0, 0, 0, 0]; 506 }); 507 }; 508 509 gl.useProgram(drawProgram); 510 gl.bindFramebuffer(gl.FRAMEBUFFER, fb2); 511 ext.drawBuffersWEBGL(bufs); 512 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 513 ext.drawBuffersWEBGL(bufs); 514 515 wtu.drawUnitQuad(gl); 516 517 debug("test that each texture got the correct color."); 518 519 drawBuffersUtils.checkAttachmentsForColor(attachments); 520 521 debug("test clearing clears all the textures"); 522 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 523 gl.clearColor(0, 1, 0, 1); 524 gl.clear(gl.COLOR_BUFFER_BIT); 525 526 drawBuffersUtils.checkAttachmentsForColor(attachments, [0, 255, 0, 255]); 527 528 debug("test a fragment shader writing to neither gl_FragColor nor gl_FragData does not touch attachments"); 529 var noWriteProgram = wtu.setupProgram(gl, [wtu.simpleVertexShader, "fshaderNoWrite"], ["vPosition"]); 530 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no GL error setting up the program"); 531 if (!noWriteProgram) { 532 testFailed("Setup a program where fragment shader writes nothing failed"); 533 } else { 534 gl.useProgram(noWriteProgram); 535 wtu.drawUnitQuad(gl); 536 wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "Active draw buffers with missing frag outputs."); 537 drawBuffersUtils.checkAttachmentsForColor(attachments, [0, 255, 0, 255]); 538 gl.deleteProgram(noWriteProgram); 539 } 540 541 debug("test that NONE draws nothing"); 542 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 543 ext.drawBuffersWEBGL(nones); 544 gl.useProgram(redProgram); 545 wtu.clearAndDrawUnitQuad(gl); 546 547 drawBuffersUtils.checkAttachmentsForColor(attachments, [0, 255, 0, 255]); 548 549 debug("test that gl_FragColor does not broadcast unless extension is enabled in fragment shader"); 550 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 551 ext.drawBuffersWEBGL(bufs); 552 gl.useProgram(redProgram); 553 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 554 wtu.drawUnitQuad(gl); 555 wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "Active draw buffers with missing frag outputs."); 556 gl.colorMask(false, false, false, false); 557 wtu.drawUnitQuad(gl); 558 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors when all 4 channels of color mask are disabled."); 559 gl.colorMask(false, true, false, false); 560 wtu.drawUnitQuad(gl); 561 wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "partially diabled color mask shall have no impact."); 562 gl.colorMask(true, true, true, true); 563 564 debug("test that gl_FragColor broadcasts if extension is enabled in fragment shader"); 565 gl.clear(gl.COLOR_BUFFER_BIT); 566 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 567 ext.drawBuffersWEBGL(bufs); 568 gl.useProgram(redProgramWithExtension); 569 wtu.drawUnitQuad(gl); 570 571 drawBuffersUtils.checkAttachmentsForColor(attachments, [255, 0, 0, 255]); 572 573 if (maxUsable > 1) { 574 // First half of color buffers disable. 575 var bufs1 = drawBuffersUtils.makeColorAttachmentArray(maxUsable); 576 // Second half of color buffers disable. 577 var bufs2 = drawBuffersUtils.makeColorAttachmentArray(maxUsable); 578 // Color buffers with even indices disabled. 579 var bufs3 = drawBuffersUtils.makeColorAttachmentArray(maxUsable); 580 // Color buffers with odd indices disabled. 581 var bufs4 = drawBuffersUtils.makeColorAttachmentArray(maxUsable); 582 for (var ii = 0; ii < maxUsable; ++ii) { 583 if (ii < half) { 584 bufs1[ii] = gl.NONE; 585 } else { 586 bufs2[ii] = gl.NONE; 587 } 588 if (ii % 2) { 589 bufs3[ii] = gl.NONE; 590 } else { 591 bufs4[ii] = gl.NONE; 592 } 593 } 594 595 debug("test setting first half to NONE and clearing"); 596 597 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 598 // We should clear all buffers rather than depending on the previous 599 // gl_FragColor broadcasts test to succeed and setting the colors. 600 ext.drawBuffersWEBGL(bufs); 601 gl.clearColor(1, 0, 0, 1); 602 gl.clear(gl.COLOR_BUFFER_BIT); 603 604 ext.drawBuffersWEBGL(bufs1); 605 gl.clearColor(0, 1, 0, 1); 606 gl.clear(gl.COLOR_BUFFER_BIT); 607 608 drawBuffersUtils.checkAttachmentsForColorFn(attachments, function(attachment, index) { 609 return index < half ? [255, 0, 0, 255] : [0, 255, 0, 255]; 610 }); 611 612 debug("test setting first half to NONE and drawing"); 613 614 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 615 gl.useProgram(drawProgram); 616 wtu.drawUnitQuad(gl); 617 618 drawBuffersUtils.checkAttachmentsForColorFn(attachments, function(attachment, index) { 619 return index < half ? [255, 0, 0, 255] : attachment.color; 620 }); 621 622 debug("test setting second half to NONE and clearing"); 623 624 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 625 ext.drawBuffersWEBGL(bufs); 626 gl.clearColor(1, 0, 0, 1); 627 gl.clear(gl.COLOR_BUFFER_BIT); 628 629 ext.drawBuffersWEBGL(bufs2); 630 gl.clearColor(0, 0, 1, 1); 631 gl.clear(gl.COLOR_BUFFER_BIT); 632 drawBuffersUtils.checkAttachmentsForColorFn(attachments, function(attachment, index) { 633 return index < half ? [0, 0, 255, 255] : [255, 0, 0, 255]; 634 }); 635 636 debug("test setting second half to NONE and drawing"); 637 638 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 639 gl.useProgram(drawProgram); 640 wtu.drawUnitQuad(gl); 641 642 drawBuffersUtils.checkAttachmentsForColorFn(attachments, function(attachment, index) { 643 return index < half ? attachment.color : [255, 0, 0, 255]; 644 }); 645 646 debug("test setting buffers with even indices to NONE and clearing"); 647 648 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 649 ext.drawBuffersWEBGL(bufs); 650 gl.clearColor(1, 0, 0, 1); 651 gl.clear(gl.COLOR_BUFFER_BIT); 652 ext.drawBuffersWEBGL(bufs3); 653 gl.clearColor(1, 0, 1, 1); 654 gl.clear(gl.COLOR_BUFFER_BIT); 655 656 drawBuffersUtils.checkAttachmentsForColorFn(attachments, function(attachment, index) { 657 return (index % 2) ? [255, 0, 0, 255] : [255, 0, 255, 255]; 658 }); 659 660 debug("test setting buffers with odd indices to NONE and drawing"); 661 662 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 663 ext.drawBuffersWEBGL(bufs); 664 gl.clearColor(0, 0, 0, 1); 665 gl.clear(gl.COLOR_BUFFER_BIT); 666 gl.useProgram(drawProgram); 667 ext.drawBuffersWEBGL(bufs4); 668 wtu.drawUnitQuad(gl); 669 670 drawBuffersUtils.checkAttachmentsForColorFn(attachments, function(attachment, index) { 671 return (index % 2 == 0) ? [0, 0, 0, 255] : attachment.color; 672 }); 673 674 gl.bindFramebuffer(gl.FRAMEBUFFER, halfFB1); 675 ext.drawBuffersWEBGL(bufs); 676 drawAndCheckAttachments( 677 halfFB1, "framebuffer that only has first half of attachments", 678 function(attachment, index) { 679 return index < half; 680 }); 681 682 gl.bindFramebuffer(gl.FRAMEBUFFER, halfFB2); 683 ext.drawBuffersWEBGL(bufs); 684 drawAndCheckAttachments( 685 halfFB2, "framebuffer that only has second half of attachments", 686 function(attachment, index) { 687 return index >= half; 688 }); 689 690 if (maxUsable > 2) { 691 gl.bindFramebuffer(gl.FRAMEBUFFER, endsFB); 692 ext.drawBuffersWEBGL(bufs); 693 drawAndCheckAttachments( 694 endsFB, "framebuffer that only has first and last attachments", 695 function(attachment, index) { 696 return index == 0 || index == (maxUsable - 1); 697 }); 698 699 gl.bindFramebuffer(gl.FRAMEBUFFER, middleFB); 700 ext.drawBuffersWEBGL(bufs); 701 drawAndCheckAttachments( 702 middleFB, 703 "framebuffer that has all but the first and last attachments", 704 function(attachment, index) { 705 return index != 0 && index != (maxUsable - 1); 706 }); 707 } 708 } 709 710 debug("test switching between fbos does not affect any color attachment contents"); 711 gl.bindFramebuffer(gl.FRAMEBUFFER, fb2); 712 ext.drawBuffersWEBGL(nones); 713 714 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 715 ext.drawBuffersWEBGL(bufs); 716 gl.clearColor(1, 0, 0, 1); 717 gl.clear(gl.COLOR_BUFFER_BIT); 718 drawBuffersUtils.checkAttachmentsForColor(attachments, [255, 0, 0, 255]); 719 720 // fb2 still has the NONE draw buffers from before, so this draw should be a no-op. 721 gl.bindFramebuffer(gl.FRAMEBUFFER, fb2); 722 gl.useProgram(drawProgram); 723 wtu.drawUnitQuad(gl); 724 drawBuffersUtils.checkAttachmentsForColor(attachments, [255, 0, 0, 255]); 725 726 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 727 gl.useProgram(drawProgram); 728 wtu.drawUnitQuad(gl); 729 drawBuffersUtils.checkAttachmentsForColor(attachments); 730 731 debug("test queries"); 732 debug("check framebuffer with all attachments on"); 733 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 734 for (var ii = 0; ii < maxUsable; ++ii) { 735 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL + " + ii + ")", "gl.COLOR_ATTACHMENT0 + " + ii); 736 } 737 738 debug("check framebuffer with all attachments off"); 739 gl.bindFramebuffer(gl.FRAMEBUFFER, fb2); 740 for (var ii = 0; ii < maxUsable; ++ii) { 741 shouldBe("gl.getParameter(ext.DRAW_BUFFER0_WEBGL + " + ii + ")", "gl.NONE"); 742 } 743 744 debug("test attachment size mis-match"); 745 gl.bindTexture(gl.TEXTURE_2D, attachments[0].texture); 746 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width * 2, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 747 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 748 shouldBeTrue("gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE"); 749 gl.bindFramebuffer(gl.FRAMEBUFFER, fb2); 750 shouldBeTrue("gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE"); 751 752 gl.deleteFramebuffer(fb); 753 gl.deleteFramebuffer(fb2); 754 gl.deleteFramebuffer(halfFB1); 755 gl.deleteFramebuffer(halfFB2); 756 attachments.forEach(function(attachment) { 757 gl.deleteTexture(attachment.texture); 758 }); 759 gl.deleteProgram(checkProgram); 760 gl.deleteProgram(redProgram); 761 gl.deleteProgram(redProgramWithExtension); 762 gl.deleteProgram(drawProgram); 763 } 764 765 function runPreserveTests() { 766 debug(""); 767 debug("--------- preserve tests -----------"); 768 769 debug("Testing that frame buffer is cleared after compositing"); 770 gl.bindFramebuffer(gl.FRAMEBUFFER, null); 771 772 gl.clearColor(1, 1, 0, 1); 773 gl.clear(gl.COLOR_BUFFER_BIT); 774 wtu.checkCanvas(gl, [255, 255, 0, 255], "should be yellow"); 775 776 // set the draw buffer to NONE 777 ext.drawBuffersWEBGL([gl.NONE]); 778 gl.clearColor(1, 0, 1, 1); 779 gl.clear(gl.COLOR_BUFFER_BIT); 780 781 // make sure the canvas is still clear 782 wtu.checkCanvas(gl, [255, 255, 0, 255], "should be yellow"); 783 784 wtu.waitForComposite(function() { 785 gl.clearColor(1, 0, 0, 1); 786 gl.clear(gl.COLOR_BUFFER_BIT); 787 wtu.checkCanvas(gl, [0, 0, 0, 0], "should be clear"); 788 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 789 790 runEndTests(); 791 }); 792 } 793 794 function runEndTests() { 795 // Create new context and verify shader tests with no extension still succeeds. 796 debug(""); 797 debug("Testing new context with no extension"); 798 gl = wtu.create3DContext(); 799 if (!gl) { 800 testFailed("New WebGL context does not exist"); 801 } else { 802 testPassed("New WebGL context exists"); 803 runEnumTestDisabled(); 804 runShadersTestDisabled(); 805 runAttachmentTestDisabled(); 806 } 807 808 finishTest(); 809 } 810 </script> 811 </body> 812 </html>