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