-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (121 loc) · 4.26 KB
/
index.html
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<!--
This test WebGL page is created to compare performance results from
flood-filling the screen with a solid pixel color.
The raster method is to clear the screen with:
glClearColor(red, green, blue, opacity);
glClear(GL_COLOR_BUFFER_BIT/* | depth | accum */);
The vector method is to draw a solid rectangle, from two triangles:
glColor4f(red, green, blue, opacity);
glEnableClientState(GL_VERTEX_ARRAY);
webGL.bufferData(
webGL.ARRAY_BUFFER,
new Float32Array([-1, -1, +1, -1, -1, +1, +1, +1]),
webGL.STATIC_DRAW
);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 3 + 1);
-->
<head>
<title>Raster/Vector Pixel Fill Test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="gl.css" type="text/css">
<script type="text/javascript" src="gl.js"></script>
<script type="text/javascript">
/*
@license
magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt
GPL-3.0
*/
var coordinates_per_vertex = 4;
var static_color_ID;
function fill_raster() {
glClearColor(Math.random(), Math.random(), Math.random(), Math.random());
glClear(GL_COLOR_BUFFER_BIT);
return;
}
function fill_vector() {
var color_vector = [];
var i = 0;
while (i < 4) {
color_vector[i] = Math.random();
i += 1;
}
GL.uniform4fv(static_color_ID, color_vector);
// GL.uniform4f(ID, r, g, b, a); 1.2% faster on Direct3D 9 ANGLE (IE 11) ??
GL.drawArrays(GL_TRIANGLE_STRIP, 0, 3 + 1);
return;
}
function main_GL() {
"use strict";
if (GL_get_context(document, "GL_canvas") === null) {
alert("Failed to initialize WebGL.");
}
init();
set_test(false);
return;
}
function set_test(use_GLSL) {
"use strict";
var frames_per_second = 60;
var milliseconds_per_frame = 1000 / frames_per_second;
var fill_test = (use_GLSL ? fill_vector : fill_raster);
setInterval(fill_test, milliseconds_per_frame);
return;
}
var inverse_radius = 1.0;
var vertex_shader, vertex_GLSL =
"attribute vec" + coordinates_per_vertex + " position;\n" +
"void main(void) {\n" +
" gl_Position = vec4(position);\n" +
"}\n";
var fragment_shader, fragment_GLSL =
"uniform lowp vec4 static_color;\n" +
"void main(void) {\n" +
" gl_FragColor = static_color;\n" +
"}\n";
var shader_program, vertex_buffer_object;
function init() {
glScissor(0, 0, 64, 64);
// glEnable(GL_SCISSOR_TEST);
glClearColor(1, 1, 1, 0.5);
vertex_shader = GL.createShader(GL.VERTEX_SHADER);
fragment_shader = GL.createShader(GL.FRAGMENT_SHADER);
shader_program = GL.createProgram();
GL.shaderSource(vertex_shader, vertex_GLSL);
GL.shaderSource(fragment_shader, fragment_GLSL);
GL.attachShader(shader_program, vertex_shader);
GL.attachShader(shader_program, fragment_shader);
GL.compileShader(vertex_shader);
GL.compileShader(fragment_shader);
GL.linkProgram(shader_program);
GL.useProgram(shader_program);
static_color_ID = GL.getUniformLocation(shader_program, "static_color");
GL.bindAttribLocation(shader_program, 0, "position");
GL.enableVertexAttribArray(0);
var screen = [
-1, -1, 0, inverse_radius, // lower-left
+1, -1, 0, inverse_radius, // lower-right
-1, +1, 0, inverse_radius, // upper-left
+1, +1, 0, inverse_radius // upper-right
];
vertex_buffer_object = GL.createBuffer();
GL.bindBuffer(GL.ARRAY_BUFFER, vertex_buffer_object);
GL.bufferData(GL.ARRAY_BUFFER, new Float32Array(screen), GL.STATIC_DRAW);
GL.vertexAttribPointer(0, coordinates_per_vertex, GL_FLOAT, GL_FALSE, 0, 0);
}
/* @license-end */
</script>
</head>
<body onload="main_GL()">
<p><a href="gl.html">Click here for the spinning triangle color array test.</a></p>
<p>
<input type="checkbox" onclick="set_test(this.checked)">
Render with GLSL instead of clearing frames to color floods.
</p>
<noscript>Your browser is either refusing JavaScript or doesn't support it.</noscript>
<canvas id="GL_canvas" width="1024" height="1024">
Your browser doesn't appear to support the <code><CANVAS></code> element.
</canvas>
<p>All JavaScript in use on this page is freedom-respecting software. <a href="/free-js.html" rel="jslicense">Learn more.</a></p>
</body>
</html>