copy-tex-image-and-sub-image-2d.html (4415B)
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 <link rel="stylesheet" href="../../../resources/js-test-style.css"/> 12 <script src="../../../js/js-test-pre.js"></script> 13 <script src="../../../js/webgl-test-utils.js"></script> 14 15 <script> 16 "use strict"; 17 var successfullyParsed = false; 18 19 function init() 20 { 21 description('Verify copyTexImage2D and copyTexSubImage2D'); 22 23 runTest(); 24 } 25 26 var gl = null; 27 var wtu = WebGLTestUtils; 28 29 function runTestIteration(antialias) 30 { 31 var canvas = document.getElementById( 32 antialias ? "antialiasOn" : "antialiasOff"); 33 var attribs = antialias ? { antialias: true } : { antialias: false }; 34 gl = wtu.create3DContext(canvas, attribs); 35 var program = wtu.setupTexturedQuad(gl); 36 var textureLoc = gl.getUniformLocation(program, "tex"); 37 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "During Initialization"); 38 39 gl.colorMask(1, 1, 1, 1); 40 gl.disable(gl.BLEND); 41 debug('Testing copyTexImage2D'); 42 43 // Red canvas 44 gl.clearColor(1, 0, 0, 1); 45 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 46 47 var texture = gl.createTexture(); 48 // Bind the texture to texture unit 0 49 gl.bindTexture(gl.TEXTURE_2D, texture); 50 // Set up texture 51 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 52 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 53 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 54 gl.uniform1i(textureLoc, 0); 55 56 var colors = [ 57 [1, 0, 0, 1], 58 [0, 1, 0, 1], 59 [0, 0, 1, 1], 60 [0.5, 0.5, 0.5, 0.5], 61 ]; 62 var data = new Uint8Array(2 * 2 * 4); 63 for (var ii = 0; ii < 2 * 2 * 4; ++ii) 64 data[ii] = 136; // A random number other than 0. 65 var count = 0; 66 for (var yy = -2; yy <= 2; ++yy) { 67 for (var xx = -2; xx <= 2; ++xx) { 68 for (var ii = 0; ii < 2; ++ii) { 69 var texColor = colors[count]; 70 var clearColor = colors[(count + 1) % colors.length]; 71 // clear to some color 72 gl.clearColor(texColor[0], texColor[1], texColor[2], texColor[3]); 73 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 74 75 // copy that color to the texture. 76 switch (ii) { 77 case 0: 78 gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, xx, yy, 2, 2, 0); 79 wtu.glErrorShouldBe(gl, gl.NO_ERROR, 80 "using copyTexImage2D: x = " + xx + ", y = " + yy); 81 break; 82 case 1: 83 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); 84 gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, xx, yy, 2, 2); 85 wtu.glErrorShouldBe(gl, gl.NO_ERROR, 86 "using copyTexSubImage2D: x = " + xx + ", y = " + yy); 87 break; 88 } 89 90 // clear to some other color. 91 gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]); 92 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 93 94 // Draw the triangles 95 wtu.clearAndDrawUnitQuad(gl); 96 97 // check the rendering results 98 for (var iy = 0; iy < 2; ++iy) { 99 for (var ix = 0; ix < 2; ++ix) { 100 var x = xx + ix; 101 var y = yy + iy; 102 var expectedColor = (x < 0 || y < 0 || x >= 2 || y >= 2) ? 103 (ii == 0 ? [0, 0, 0, 0] : [136, 136, 136, 136]) : 104 [Math.floor(255 * texColor[0]), 105 Math.floor(255 * texColor[1]), 106 Math.floor(255 * texColor[2]), 107 Math.floor(255 * texColor[3])]; 108 wtu.checkCanvasRect(gl, ix, iy, 1, 1, expectedColor, 109 "" + ix + ", " + iy + " should render " + expectedColor + " (+/-1)", 1); 110 } 111 } 112 count = (count + 1) % colors.length; 113 } 114 } 115 } 116 117 debug(""); 118 } 119 120 function runTest(antialias) 121 { 122 debug("Testing with antialias on"); 123 runTestIteration(true); 124 debug("Testing with antialias off"); 125 runTestIteration(false); 126 127 finishTest(); 128 } 129 </script> 130 </head> 131 <body onload="init()"> 132 <canvas id="antialiasOn" width="2" height="2"></canvas> 133 <canvas id="antialiasOff" width="2" height="2"></canvas> 134 <div id="description"></div> 135 <div id="console"></div> 136 </body> 137 </html>