vertex-id-large-count.html (3718B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>WebGL 2 gl_VertexID Large Count Tests</title> 6 <link rel="stylesheet" href="../../resources/js-test-style.css"/> 7 <script src="../../js/desktop-gl-constants.js"></script> 8 <script src="../../js/js-test-pre.js"></script> 9 <script src="../../js/webgl-test-utils.js"></script> 10 </head> 11 <body> 12 <div id="description"></div> 13 <div id="console"></div> 14 <!-- Shaders for testing instanced draws --> 15 <script id="vs" type="text/plain"> 16 #version 300 es 17 18 uniform ivec2 resolution; 19 void main() { 20 ivec2 pixel = ivec2( 21 gl_VertexID % resolution.x, 22 gl_VertexID / resolution.x); 23 vec2 xy = (vec2(pixel) + 0.5) / vec2(resolution) * 2.0 - 1.0; 24 25 gl_Position = vec4(xy, 0, 1); 26 gl_PointSize = 1.0; 27 } 28 </script> 29 <script id="fs" type="text/plain"> 30 #version 300 es 31 precision mediump float; 32 uniform vec4 color; 33 out vec4 fragColor; 34 void main() { 35 fragColor = color; 36 } 37 </script> 38 39 <script> 40 "use strict"; 41 description("Test gl_VertexID"); 42 43 debug(""); 44 45 const wtu = WebGLTestUtils; 46 const canvas = document.createElement("canvas"); 47 const size = 2048; 48 canvas.width = size; 49 canvas.height = size; 50 const gl = wtu.create3DContext(canvas, null, 2); 51 52 // document.body.appendChild(gl.canvas); 53 // gl.canvas.style.background = 'yellow'; 54 // gl.canvas.style.margin = '20px'; 55 // const ext = gl.getExtension('WEBGL_debug_renderer_info'); 56 // if (ext) { 57 // debug(gl.getParameter(ext.UNMASKED_RENDERER_WEBGL)); 58 // } 59 60 (function() { 61 if (!gl) { 62 testFailed("WebGL context does not exist"); 63 return; 64 } 65 testPassed("WebGL context exists"); 66 67 const vs = document.getElementById("vs").innerHTML.trim(); 68 const fs = document.getElementById("fs").innerHTML.trim(); 69 const prog = wtu.loadProgram(gl, vs, fs); 70 gl.useProgram(prog); 71 const resolutionLoc = gl.getUniformLocation(prog, 'resolution'); 72 const colorLoc = gl.getUniformLocation(prog, 'color'); 73 74 // - 75 76 debug(""); 77 debug("----------------"); 78 debug("drawArrays"); 79 80 const u8Color = c => c.map(v => v * 255 | 0); 81 const transparentBlack = [0, 0, 0, 0]; 82 const red = [1, 0, 0, 1]; 83 const green = [0, 1, 0, 1]; 84 const blue = [0, 0, 1, 1]; 85 86 const test = function(first, count, color) { 87 debug(""); 88 debug(`drawArrays(first: ${first}, count: ${count})`); 89 gl.clear(gl.COLOR_BUFFER_BIT); 90 gl.uniform4fv(colorLoc, color); 91 gl.uniform2i(resolutionLoc, size, size); 92 gl.drawArrays(gl.POINTS, first, count); 93 wtu.glErrorShouldBe(gl, gl.NO_ERROR); 94 const y = first / size; 95 const height = count / size; 96 97 // The shader draws 1 pixel points by looking at gl_VertexID 98 // as a 1D index into a 2D array. In other words 99 // row = gl_VertexID / width; 100 // col = gl_VertexID % width; 101 // Setting first to a value of rows * width (ie, y * size) 102 // lets us skip y rows when drawing so we then check that 103 // from y to height rows are the expected color and everything 104 // else is the cleared color. 105 wtu.checkCanvasRect(gl, 0, y, size, height, u8Color(color)); 106 wtu.checkCanvasRect(gl, 0, 0, size, size - height, transparentBlack); 107 }; 108 109 test(0, size * size, red); 110 test(size * size / 2, size * size / 2, green); 111 test(size * size / 4, size * size / 4 * 3, blue); 112 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "There should be no remaining errors"); 113 })(); 114 115 debug(""); 116 var successfullyParsed = true; 117 </script> 118 <script src="../../js/js-test-post.js"></script> 119 120 </body> 121 </html> 122 123 <!-- 124 Copyright (c) 2019 The Khronos Group Inc. 125 Use of this source code is governed by an MIT-style license that can be 126 found in the LICENSE.txt file. 127 -->