dom/canvas/test/webgl-conf/checkout/conformance2/rendering/vertex-id-large-count.html

   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 -->