point-size.html (3735B)
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 <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 <script id="vshader" type="x-shader/x-vertex"> 15 attribute vec3 pos; 16 attribute vec4 colorIn; 17 uniform float pointSize; 18 varying vec4 color; 19 20 void main() 21 { 22 gl_PointSize = pointSize; 23 color = colorIn; 24 gl_Position = vec4(pos, 1.0); 25 } 26 </script> 27 28 <script id="fshader" type="x-shader/x-fragment"> 29 precision mediump float; 30 varying vec4 color; 31 32 void main() 33 { 34 gl_FragColor = color; 35 } 36 </script> 37 </head> 38 <body> 39 <canvas id="testbed" width="2" height="2"></canvas> 40 <div id="description"></div> 41 <div id="console"></div> 42 <script> 43 "use strict"; 44 description('Verify GL_VERTEX_PROGRAM_POINT_SIZE is enabled in WebGL'); 45 46 var wtu = WebGLTestUtils; 47 var gl = wtu.create3DContext('testbed', { antialias: false }); 48 shouldBeNonNull("gl"); 49 50 gl.disable(gl.BLEND); 51 52 // The choice of (0.4, 0.4) ensures that the centers of the surrounding 53 // pixels are not contained within the point when it is of size 1, but 54 // that they definitely are when it is of size 2. 55 var vertices = new Float32Array([ 56 0.4, 0.4, 0.0]); 57 var colors = new Uint8Array([ 58 255, 0, 0, 255]); 59 60 var colorOffset = vertices.byteLength; 61 62 var buf = new Uint8Array(2 * 2 * 4); 63 var index = 0; 64 65 var vbo = gl.createBuffer(); 66 gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 67 gl.bufferData(gl.ARRAY_BUFFER, colorOffset + colors.byteLength, gl.STATIC_DRAW); 68 gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices); 69 gl.bufferSubData(gl.ARRAY_BUFFER, colorOffset, colors); 70 71 function test(program) { 72 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 73 74 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 75 gl.enableVertexAttribArray(0); 76 gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, true, 0, colorOffset); 77 gl.enableVertexAttribArray(1); 78 79 var locPointSize = gl.getUniformLocation(program, 'pointSize'); 80 81 shouldBe('gl.getError()', 'gl.NO_ERROR'); 82 83 debug('Draw a point of size 1 and verify it does not touch any other pixels.'); 84 85 gl.uniform1f(locPointSize, 1.0); 86 gl.drawArrays(gl.POINTS, 0, vertices.length / 3); 87 88 shouldBe('gl.getError()', 'gl.NO_ERROR'); 89 90 for (var y = 0; y < 2; ++y) { 91 for (var x = 0; x < 2; ++x) { 92 var correctColor = (x == 1 && y == 1) ? [255, 0, 0] : [0, 0, 0]; 93 wtu.checkCanvasRect(gl, x, y, 1, 1, correctColor); 94 } 95 } 96 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 97 98 debug('Draw a point of size 2 and verify it fills the appropriate region.'); 99 100 var pointSizeRange = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE); 101 if (pointSizeRange[1] >= 2.0) { 102 gl.uniform1f(locPointSize, 2.0); 103 gl.drawArrays(gl.POINTS, 0, vertices.length / 3); 104 shouldBe('gl.getError()', 'gl.NO_ERROR'); 105 wtu.checkCanvasRect(gl, 0, 0, 2, 2, [255, 0, 0]); 106 } 107 } 108 109 debug(''); 110 debug('Pass 1'); 111 var program1 = wtu.setupProgram(gl, ['vshader', 'fshader'], ['pos', 'colorIn']); 112 shouldBe('gl.getError()', 'gl.NO_ERROR'); 113 test(program1); 114 115 // Under some versions of ANGLE point sprite shader programs were 116 // incorrectly reloaded from cache. Rebuilding the shader program and 117 // repeating the test simulates the conditions that caused it to fail 118 debug(''); 119 debug('Pass 2'); 120 var program2 = wtu.setupProgram(gl, ['vshader', 'fshader'], ['pos', 'colorIn']); 121 shouldBe('gl.getError()', 'gl.NO_ERROR'); 122 test(program2); 123 124 var successfullyParsed = true; 125 </script> 126 <script src="../../js/js-test-post.js"></script> 127 128 </body> 129 </html>