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
|
'use strict';
let gl;
let program;
let vertex_buffer;
let prev_frame_time = 0.0;
let canvas;
window.addEventListener('load', startup);
function startup() {
canvas = document.getElementById('canvas');
gl = canvas.getContext('webgl');
program = gl.createProgram();
let vertex_shader = compile_shader('main vertex', gl.VERTEX_SHADER, `
attribute vec2 v_pos;
void main() {
gl_Position = vec4(v_pos, 0.0, 1.0);
}
`);
let fragment_shader = compile_shader('main fragment', gl.FRAGMENT_SHADER, `
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
`);
if (vertex_shader == null || fragment_shader == null) {
return;
}
gl.attachShader(program, vertex_shader);
gl.attachShader(program, fragment_shader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
show_error('Error linking shader program:\n' + gl.getProgramInfoLog(program));
}
vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5,
]), gl.STATIC_DRAW);
frame(0.0);
}
function frame(delta) {
let width = canvas.offsetWidth;
let height = canvas.offsetHeight;
canvas.width = width;
canvas.height = height;
gl.viewport(0, 0, width, height);
gl.clearColor(0.8, 0.9, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform4fv(gl.getUniformLocation(program, 'u_color'), [0.1, 0.7, 0.2, 1.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
let v_pos = gl.getAttribLocation(program, 'v_pos');
gl.enableVertexAttribArray(v_pos);
gl.vertexAttribPointer(v_pos, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame((t) => {
let delta = t - prev_frame_time;
prev_frame_time = t;
frame(delta);
});
}
function compile_shader(name, type, source) {
let shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
show_error('Error compiling shader ' + name + ':\n' +
gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
function show_error(error) {
// TODO: display error in browser
console.log(error);
}
|
