varying-arrays-should-not-be-reversed.html (2402B)
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 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta charset="utf-8"> 10 <title>Varying arrays should not be reversed</title> 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 </head> 15 <body> 16 <canvas id="canvas" width="512" height="256"> </canvas> 17 <div id="description"></div> 18 <div id="console"></div> 19 <script id="vshader" type="x-shader/x-vertex"> 20 varying float colors[3]; 21 uniform vec3 testData; 22 attribute vec3 position; 23 void main(){ 24 gl_Position = vec4(position, 1.0); 25 colors[0] = testData.x; 26 colors[1] = testData.y; 27 colors[2] = testData.z; 28 } 29 </script> 30 <script id="fshader" type="x-shader/x-fragment"> 31 precision mediump float; 32 varying float colors[3]; 33 void main() { 34 gl_FragColor = vec4(colors[0], colors[1], colors[2], 1.0); 35 } 36 </script> 37 <script> 38 "use strict"; 39 description("Varying arrays should not be reversed."); 40 debug("This issue has been seen in Chrome on Nexus 7 2013 (Adreno 320) and Moto G3 (Adreno 306)."); 41 debug(""); 42 debug("If things are working correctly, the vertical stripes should be: red, green, blue, light blue, orange"); 43 debug(""); 44 debug("If they are not, the red and blue channels will appear to be swapped and you will see: blue, green, red, orange, light blue"); 45 var wtu = WebGLTestUtils; 46 function test() { 47 var gl = wtu.create3DContext("canvas"); 48 if (!gl) { 49 testFailed("context does not exist"); 50 return; 51 } 52 53 wtu.setupUnitQuad(gl); 54 var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["position"], undefined, true); 55 var loc = gl.getUniformLocation(program, 'testData'); 56 57 var triples = [ 58 [255, 0, 0], 59 [0, 255, 0], 60 [0, 0, 255], 61 [0, 128, 255], 62 [255, 128, 0] 63 ]; 64 65 for (var i = 0; i < triples.length; i++) { 66 var triple = triples[i]; 67 var x = i * 64; 68 gl.viewport(x, 0, 64, 256); 69 gl.uniform3f(loc, triple[0] / 255, triple[1] / 255, triple[2] / 255); 70 wtu.drawUnitQuad(gl); 71 wtu.checkCanvasRect(gl, x, 0, 64, 256, [triple[0], triple[1], triple[2], 255]); 72 } 73 74 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); 75 } 76 test(); 77 var successfullyParsed = true; 78 </script> 79 <script src="../../../js/js-test-post.js"></script> 80 </body> 81 </html>