texture-hd-dpi.html (3600B)
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 HD-DPI issues texture conformance test.</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 </head> 16 <body> 17 <canvas id="example" width="4" height="4" style="width: 40px; height: 30px;"></canvas> 18 <div id="description"></div> 19 <div id="console"></div> 20 <script> 21 "use strict"; 22 description(); 23 var wtu = WebGLTestUtils; 24 var gl = wtu.create3DContext("example"); 25 var program = wtu.setupTexturedQuad(gl); 26 27 function fillInMips(gl, size) { 28 // fill in the mips 29 var level = 1; 30 for (;;) { 31 size /= 2; 32 if (size < 1) { 33 break; 34 } 35 var numBytes = size * size * 4; 36 var pixels = new Uint8Array(numBytes); 37 for (var jj = 0; jj < numBytes; jj += 4) { 38 pixels[jj + 0] = 0; 39 pixels[jj + 1] = 255; 40 pixels[jj + 2] = 0; 41 pixels[jj + 3] = 255; 42 } 43 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels); 44 } 45 } 46 47 function testCanvas(size) { 48 debug(""); 49 debug("testing 2D canvas size " + size + ", " + size); 50 51 var canvas = document.createElement("canvas"); 52 canvas.width = size; 53 canvas.height = size; 54 var ctx = canvas.getContext("2d"); 55 ctx.fillStyle = "rgb(0,255,0)"; 56 ctx.fillRect(0, 0, size, size); 57 58 var tex = gl.createTexture(); 59 gl.bindTexture(gl.TEXTURE_2D, tex); 60 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); 61 62 fillInMips(gl, size); 63 64 // Draw. If this an HD-DPI device and the 2d canvas is double res or larger 65 // the implementation must scale to CSS pixels (ie, canvas.width, canvas.height)( 66 // when doing the copy in texImage2D. If it has not scaled and instead done 67 // a direct copy of the larger texture this test will not have created enough mips 68 // and will therefore not be "texture complete" and will render in black. 69 wtu.clearAndDrawUnitQuad(gl); 70 wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green"); 71 } 72 73 function testWebGL(size) { 74 debug(""); 75 debug("testing WebGL canvas size " + size + ", " + size); 76 77 var canvas = document.createElement("canvas"); 78 canvas.width = size; 79 canvas.height = size; 80 var gl2 = wtu.create3DContext(canvas); 81 gl2.clearColor(0,1,0,1); 82 gl2.clear(gl.COLOR_BUFFER_BIT); 83 84 var tex = gl.createTexture(); 85 gl.bindTexture(gl.TEXTURE_2D, tex); 86 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); 87 88 fillInMips(gl, size); 89 90 // Draw. If this an HD-DPI device check for 2 possible bugs. 91 // 92 // 1) the WebGL canvas is double res or larger. That's just a bug period and 93 // is checked for in another test but would also fail here. 94 // 95 // 2) the WebGL canvas is single res but the code the scales a double res 96 // 2d canvas also mistakenly scales a single res WebGL canvas. 97 // 98 // If it has been scaled then we'll have the wrong kind of mips chain here. 99 // Level 0 will be half resolution. Level 1 will be the same resolution 100 // and will therefore not be "texture complete" and will render in black. 101 wtu.clearAndDrawUnitQuad(gl); 102 wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green"); 103 } 104 105 testCanvas(4); 106 testCanvas(512); 107 testWebGL(4); 108 testWebGL(512); 109 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors"); 110 111 var successfullyParsed = true; 112 </script> 113 <script src="../../../js/js-test-post.js"></script> 114 115 </body> 116 </html>