sampler-drawing-test.html (3918B)
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 Sampler Drawing 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="canvas_drawing" width="12" height="12"></canvas> 18 <canvas id="canvas_texture" width="2" height="2"></canvas> 19 <div id="description"></div> 20 <div id="console"></div> 21 <script> 22 "use strict"; 23 description("Tests drawing with sampler works as expected"); 24 debug(""); 25 26 var wtu = WebGLTestUtils; 27 var gl = wtu.create3DContext("canvas_drawing", null, 2); 28 var canvas_texture = null; 29 var samplerParam = [ 30 gl.REPEAT, 31 gl.CLAMP_TO_EDGE, 32 gl.MIRRORED_REPEAT, 33 ]; 34 var color = [200, 0, 254, 255]; 35 36 if (!gl) { 37 testFailed("WebGL context does not exist"); 38 } else { 39 testPassed("WebGL context exists"); 40 41 wtu.setupTexturedQuadWithTexCoords(gl, [-2.5, -2.5], [3.5, 3.5]); 42 43 setupCanvasTexture(); 44 for (var ii = 0; ii < samplerParam.length; ++ii) { 45 runDrawingTest(samplerParam[ii]); 46 } 47 48 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 49 } 50 51 function setupCanvasTexture() { 52 canvas_texture = document.getElementById("canvas_texture"); 53 var ctx2d = canvas_texture.getContext("2d"); 54 ctx2d.fillStyle = "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + color[3] + ")"; 55 ctx2d.fillRect(0, 0, 1, 1); 56 } 57 58 function runDrawingTest(param) { 59 var texture = gl.createTexture(); 60 gl.bindTexture(gl.TEXTURE_2D, texture); 61 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas_texture); 62 63 var sampler = gl.createSampler(); 64 gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 65 gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 66 gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, param); 67 gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, param); 68 69 gl.clearColor(1,1,1,1); 70 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 71 72 gl.bindTexture(gl.TEXTURE_2D, texture); 73 gl.bindSampler(0, sampler); 74 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 6); 75 76 checkPixels(param); 77 } 78 79 function checkPixels(param) { 80 var buf = new Uint8Array(12 * 12 * 4); 81 gl.readPixels(0, 0, 12, 12, gl.RGBA, gl.UNSIGNED_BYTE, buf); 82 var passed = true; 83 for (var yy = 0; yy < 12; ++yy) { 84 for (var xx = 0; xx < 12; ++xx) { 85 var ec = [0, 0, 0, 0]; 86 switch (param) { 87 case gl.REPEAT: 88 if (xx % 2 == 1 && yy % 2 == 1) { 89 ec = color; 90 } 91 break; 92 case gl.CLAMP_TO_EDGE: 93 if (xx < 6 && yy < 6) { 94 ec = color; 95 } 96 break; 97 case gl.MIRRORED_REPEAT: 98 if (xx % 4 < 2 && yy % 4 < 2) { 99 ec = color; 100 } 101 break; 102 } 103 var off = (yy * 12 + xx) * 4; 104 if (buf[off + 0] != ec[0] || buf[off + 1] != ec[1] || 105 buf[off + 2] != ec[2] || buf[off + 3] != ec[3]) { 106 var msg = 'at (' + xx + ', ' + yy + ') expected: ' + 107 ec[0] + ', ' + ec[1] + ', ' + ec[2] + ', ' + ec[3] + ' found: ' + 108 buf[off + 0] + ', ' + buf[off + 1] + ', ' + buf[off + 2] + ', ' + buf[off + 3]; 109 testFailed(msg); 110 passed = false; 111 } 112 } 113 } 114 if (passed) { 115 testPassed("Drawing with wrap " + wtu.glEnumToString(gl, param) + " as expected"); 116 } 117 } 118 119 var successfullyParsed = true; 120 </script> 121 <script src="../../js/js-test-post.js"></script> 122 123 </body> 124 </html>