draw-with-uniform-blocks.html (4029B)
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 draw with uniform blocks conformance tests</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 <script id="vshader" type="x-shader/x-vertex">#version 300 es 16 in vec4 a_vertex; 17 void main(void) { 18 gl_Position = a_vertex; 19 } 20 </script> 21 <script id="fshader" type="x-shader/x-fragment">#version 300 es 22 precision mediump float; 23 layout (std140) uniform color_ubo { 24 vec4 color; 25 }; 26 out vec4 fragColor; 27 void main(void) { 28 fragColor = color; 29 } 30 </script> 31 </head> 32 <body> 33 <canvas id="example" width="100", height="100"></canvas> 34 <div id="description"></div> 35 <div id="console"></div> 36 <script> 37 "use strict"; 38 debug(""); 39 description("Regression test for crbug.com/793307 and https://bugzilla.mozilla.org/show_bug.cgi?id=1424258"); 40 41 var wtu = WebGLTestUtils; 42 var gl = wtu.create3DContext("example", undefined, 2); 43 44 function runTest() { 45 var program = wtu.setupProgram(gl, ['vshader', 'fshader'], ['a_vertex']); 46 var uboIndex = gl.INVALID_INDEX; 47 if (program) 48 uboIndex = gl.getUniformBlockIndex(program, "color_ubo"); 49 if (!program || uboIndex == gl.INVALID_INDEX) { 50 testFailed("Loading program failed"); 51 return; 52 } 53 testPassed("Loading program succeeded"); 54 55 var vertices = new Float32Array([ 56 -1, -1, 0, 57 1, -1, 0, 58 -1, 1, 0, 59 1, 1, 0 60 ]); 61 var vertexBuf = gl.createBuffer(); 62 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuf); 63 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 64 gl.enableVertexAttribArray(0); 65 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 66 67 var indexBuf = gl.createBuffer(); 68 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf); 69 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array([ 0, 1, 2, 2, 1, 3 ]), gl.STATIC_DRAW); 70 71 var uboDataSize = gl.getActiveUniformBlockParameter( 72 program, uboIndex, gl.UNIFORM_BLOCK_DATA_SIZE); 73 if (uboDataSize == 0) { 74 testFailed("uniform block data size invalid"); 75 return; 76 } 77 78 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from setup"); 79 80 debug("draw lower triangle - should be red"); 81 var uboBuf1 = gl.createBuffer(); 82 gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, uboBuf1); 83 gl.bufferData(gl.UNIFORM_BUFFER, uboDataSize, gl.STATIC_DRAW); 84 gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([ 1, 0, 0, 1 ])); 85 gl.uniformBlockBinding(program, uboIndex, 0); 86 gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0); 87 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from draw"); 88 89 debug("draw upper triangle - should be green"); 90 var uboBuf2 = gl.createBuffer(); 91 gl.bindBufferBase(gl.UNIFORM_BUFFER, 1, uboBuf2); 92 gl.bufferData(gl.UNIFORM_BUFFER, uboDataSize, gl.STATIC_DRAW); 93 gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([ 0, 1, 0, 1 ])); 94 gl.uniformBlockBinding(program, uboIndex, 1); 95 gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 6); 96 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from draw"); 97 98 var width = 100, height = 100; 99 wtu.checkCanvasRectColor(gl, 0, 0, width/2-5, height/2-5, [255, 0, 0, 255], 2, 100 function() { testPassed("lower left should be red"); }, 101 function() { testFailed("lower left should be red"); }); 102 wtu.checkCanvasRectColor(gl, width/2+5, height/2+5, width/2-5, height/2-5, [0, 255, 0, 255], 2, 103 function() { testPassed("top right should be green"); }, 104 function() { testFailed("top right should be green"); }); 105 } 106 107 if (!gl) { 108 testFailed("WebGL context creation failed"); 109 } else { 110 testPassed("WebGL context creation succeeded"); 111 runTest(); 112 } 113 114 debug(""); 115 var successfullyParsed = true; 116 </script> 117 <script src="../../js/js-test-post.js"></script> 118 119 </body> 120 </html>