simple-buffer-change.html (4164B)
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 40 // Ported from: https://github.com/google/angle/blob/master/src/tests/gl_tests/UniformBufferTest.cpp#L1463 41 description("Regression test for https://bugs.chromium.org/p/chromium/issues/detail?id=792966"); 42 43 var wtu = WebGLTestUtils; 44 var gl = wtu.create3DContext("example", undefined, 2); 45 46 function runTest() { 47 var program = wtu.setupProgram(gl, ['vshader', 'fshader'], ['a_vertex']); 48 var uboIndex = gl.INVALID_INDEX; 49 if (program) 50 uboIndex = gl.getUniformBlockIndex(program, "color_ubo"); 51 if (!program || uboIndex == gl.INVALID_INDEX) { 52 testFailed("Loading program failed"); 53 return; 54 } 55 testPassed("Loading program succeeded"); 56 57 var vertices = new Float32Array([ 58 -1, -1, 0, 59 1, -1, 0, 60 -1, 1, 0, 61 1, 1, 0 62 ]); 63 var vertexBuf = gl.createBuffer(); 64 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuf); 65 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 66 gl.enableVertexAttribArray(0); 67 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 68 69 var indexBuf = gl.createBuffer(); 70 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf); 71 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array([ 0, 1, 2, 2, 1, 3 ]), gl.STATIC_DRAW); 72 73 var uboDataSize = gl.getActiveUniformBlockParameter( 74 program, uboIndex, gl.UNIFORM_BLOCK_DATA_SIZE); 75 if (uboDataSize == 0) { 76 testFailed("uniform block data size invalid"); 77 return; 78 } 79 80 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from setup"); 81 82 debug("draw lower triangle - should be red"); 83 var uboBuf1 = gl.createBuffer(); 84 gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, uboBuf1); 85 gl.bufferData(gl.UNIFORM_BUFFER, uboDataSize, gl.STATIC_DRAW); 86 gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([ 1, 0, 0, 1 ])); 87 gl.uniformBlockBinding(program, uboIndex, 0); 88 gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0); 89 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from draw"); 90 91 // Bind a second buffer to the same binding point (0). This should set to draw green. 92 debug("draw upper triangle - should be green"); 93 var uboBuf2 = gl.createBuffer(); 94 gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, uboBuf2); 95 gl.bufferData(gl.UNIFORM_BUFFER, uboDataSize, gl.STATIC_DRAW); 96 gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([ 0, 1, 0, 1 ])); 97 gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 6); 98 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from draw"); 99 100 var width = 100, height = 100; 101 wtu.checkCanvasRectColor(gl, 0, 0, width/2-5, height/2-5, [255, 0, 0, 255], 2, 102 function() { testPassed("lower left should be red"); }, 103 function() { testFailed("lower left should be red"); }); 104 wtu.checkCanvasRectColor(gl, width/2+5, height/2+5, width/2-5, height/2-5, [0, 255, 0, 255], 2, 105 function() { testPassed("top right should be green"); }, 106 function() { testFailed("top right should be green"); }); 107 } 108 109 if (!gl) { 110 testFailed("WebGL context creation failed"); 111 } else { 112 testPassed("WebGL context creation succeeded"); 113 runTest(); 114 } 115 116 debug(""); 117 var successfullyParsed = true; 118 </script> 119 <script src="../../js/js-test-post.js"></script> 120 121 </body> 122 </html>