tex-image-and-sub-image-3d-with-webgl-canvas.js (8100B)
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 function generateTest(internalFormat, pixelFormat, pixelType, prologue, resourcePath, defaultContextVersion) { 8 var wtu = WebGLTestUtils; 9 var tiu = TexImageUtils; 10 var gl = null; 11 var successfullyParsed = false; 12 var redColor = [255, 0, 0]; 13 var greenColor = [0, 255, 0]; 14 15 function init() 16 { 17 description('Verify texImage3D and texSubImage3D code paths taking webgl canvas elements (' + internalFormat + '/' + pixelFormat + '/' + pixelType + ')'); 18 19 // Set the default context version while still allowing the webglVersion URL query string to override it. 20 wtu.setDefault3DContextVersion(defaultContextVersion); 21 gl = wtu.create3DContext("example"); 22 23 if (!prologue(gl)) { 24 finishTest(); 25 return; 26 } 27 28 switch (gl[pixelFormat]) { 29 case gl.RED: 30 case gl.RED_INTEGER: 31 greenColor = [0, 0, 0]; 32 break; 33 default: 34 break; 35 } 36 37 gl.clearColor(0,0,0,1); 38 gl.clearDepth(1); 39 40 runTest(); 41 } 42 43 function setCanvasToRedGreen(ctx) { 44 var width = ctx.canvas.width; 45 var height = ctx.canvas.height; 46 var halfHeight = Math.floor(height / 2); 47 48 ctx.viewport(0, 0, width, height); 49 50 ctx.enable(ctx.SCISSOR_TEST); 51 ctx.scissor(0, 0, width, halfHeight); 52 ctx.clearColor(1.0, 0, 0, 1.0); 53 ctx.clear(ctx.COLOR_BUFFER_BIT); 54 ctx.scissor(0, halfHeight, width, height - halfHeight); 55 ctx.clearColor(0.0, 1.0, 0, 1.0); 56 ctx.clear(ctx.COLOR_BUFFER_BIT); 57 ctx.disable(ctx.SCISSOR_TEST); 58 } 59 60 function setCanvasTo257x257(ctx, bindingTarget) { 61 ctx.canvas.width = 257; 62 ctx.canvas.height = 257; 63 setCanvasToRedGreen(ctx); 64 } 65 66 function setCanvasToMin(ctx, bindingTarget) { 67 ctx.canvas.width = 1; 68 ctx.canvas.height = 2; 69 setCanvasToRedGreen(ctx); 70 } 71 72 function runOneIteration(canvas, flipY, program, bindingTarget, opt_texture) 73 { 74 var objType = 'canvas'; 75 if (canvas.transferToImageBitmap) 76 objType = 'OffscreenCanvas'; 77 else if (canvas.parentNode) 78 objType = 'canvas attached to DOM'; 79 debug('Testing flipY=' + flipY + ' object type: ' + objType + 80 ' bindingTarget=' + (bindingTarget == gl.TEXTURE_3D ? 'TEXTURE_3D' : 'TEXTURE_2D_ARRAY') + 81 ' canvas size: ' + canvas.width + 'x' + canvas.height + ' with red-green'); 82 83 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 84 if (!opt_texture) { 85 var texture = gl.createTexture(); 86 // Bind the texture to texture unit 0 87 gl.bindTexture(bindingTarget, texture); 88 // Set up texture parameters 89 gl.texParameteri(bindingTarget, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 90 gl.texParameteri(bindingTarget, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 91 gl.texParameteri(bindingTarget, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE); 92 gl.texParameteri(bindingTarget, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 93 gl.texParameteri(bindingTarget, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 94 } else { 95 var texture = opt_texture; 96 } 97 // Set up pixel store parameters 98 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY); 99 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); 100 wtu.failIfGLError(gl, 'gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);'); 101 102 // Upload the image into the texture 103 // Initialize the texture to black first 104 gl.texImage3D(bindingTarget, 0, gl[internalFormat], canvas.width, canvas.height, 1 /* depth */, 0, 105 gl[pixelFormat], gl[pixelType], null); 106 gl.texSubImage3D(bindingTarget, 0, 0, 0, 0, canvas.width, canvas.height, 1 /* depth */, 107 gl[pixelFormat], gl[pixelType], canvas); 108 109 var width = gl.canvas.width; 110 var height = gl.canvas.height; 111 var halfHeight = Math.floor(height / 2); 112 var top = flipY ? (height - halfHeight) : 0; 113 var bottom = flipY ? 0 : (height - halfHeight); 114 115 // Draw the triangles 116 wtu.clearAndDrawUnitQuad(gl, [0, 255, 0, 255]); 117 118 // Check the top and bottom halves and make sure they have the right color. 119 debug("Checking " + (flipY ? "top" : "bottom")); 120 wtu.checkCanvasRect(gl, 0, bottom, width, halfHeight, redColor, "shouldBe " + redColor); 121 debug("Checking " + (flipY ? "bottom" : "top")); 122 wtu.checkCanvasRect(gl, 0, top, width, halfHeight, greenColor, "shouldBe " + greenColor); 123 124 if (false) { 125 var ma = wtu.makeImageFromCanvas(canvas); 126 document.getElementById("console").appendChild(ma); 127 128 var m = wtu.makeImageFromCanvas(gl.canvas); 129 document.getElementById("console").appendChild(m); 130 document.getElementById("console").appendChild(document.createElement("hr")); 131 } 132 133 return texture; 134 } 135 136 function runTest() 137 { 138 var ctx = wtu.create3DContext(); 139 var canvas = ctx.canvas; 140 // Note: We use preserveDrawingBuffer:true to prevent canvas 141 // visibility from interfering with the tests. 142 var visibleCtx = wtu.create3DContext(null, { preserveDrawingBuffer:true }); 143 var visibleCanvas = visibleCtx.canvas; 144 var descriptionNode = document.getElementById("description"); 145 document.body.insertBefore(visibleCanvas, descriptionNode); 146 147 var cases = [ 148 { flipY: true, ctx: ctx, init: setCanvasToMin }, 149 { flipY: false, ctx: ctx }, 150 { flipY: true, ctx: ctx, init: setCanvasTo257x257 }, 151 { flipY: false, ctx: ctx }, 152 { flipY: true, ctx: visibleCtx, init: setCanvasToMin}, 153 { flipY: false, ctx: visibleCtx }, 154 ]; 155 156 if (window.OffscreenCanvas) { 157 var offscreen = new OffscreenCanvas(1, 1); 158 var offscreenCtx = wtu.create3DContext(offscreen); 159 cases = cases.concat([ 160 { flipY: true, ctx: offscreenCtx, init: setCanvasToMin }, 161 { flipY: false, ctx: offscreenCtx }, 162 ]); 163 } 164 165 function runTexImageTest(bindingTarget) { 166 var program; 167 if (bindingTarget == gl.TEXTURE_3D) { 168 program = tiu.setupTexturedQuadWith3D(gl, internalFormat); 169 } else { 170 program = tiu.setupTexturedQuadWith2DArray(gl, internalFormat); 171 } 172 173 return new Promise(function(resolve, reject) { 174 var count = 4; 175 var caseNdx = 0; 176 var texture = undefined; 177 function runNextTest() { 178 var c = cases[caseNdx]; 179 if (c.init) { 180 c.init(c.ctx, bindingTarget); 181 } 182 texture = runOneIteration(c.ctx.canvas, c.flipY, program, bindingTarget, texture); 183 // for the first 2 iterations always make a new texture. 184 if (count < 2) { 185 gl.deleteTexture(texture); 186 texture = undefined; 187 } 188 ++caseNdx; 189 if (caseNdx == cases.length) { 190 caseNdx = 0; 191 --count; 192 if (!count) { 193 resolve("SUCCESS"); 194 return; 195 } 196 } 197 wtu.waitForComposite(runNextTest); 198 } 199 runNextTest(); 200 }); 201 } 202 203 runTexImageTest(gl.TEXTURE_3D).then(function(val) { 204 runTexImageTest(gl.TEXTURE_2D_ARRAY).then(function(val) { 205 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 206 finishTest(); 207 }); 208 }); 209 } 210 211 return init; 212 }