-
Notifications
You must be signed in to change notification settings - Fork 26
/
02-minimal-draw.html
30 lines (28 loc) · 979 Bytes
/
02-minimal-draw.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
<!DOCTYPE html>
<html>
<canvas id='c' width='400' height='400'></canvas>
<script src='webgl-utils.js'></script>
<script>
var c = document.getElementById('c');
var gl = c.getContext('experimental-webgl');
var vertexPosBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
var vertices = [-0.5, -0.5, 0.5, -0.5, 0, 0.5];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
/* 2
/\
/. \
0/____\1
*/
var vs = 'attribute vec2 pos;' +
'void main() { gl_Position = vec4(pos, 0, 1); }';
var fs = 'precision mediump float;' +
'void main() { gl_FragColor = vec4(0,0.8,0,1); }';
var program = createProgram(vs,fs);
gl.useProgram(program);
program.vertexPosAttrib = gl.getAttribLocation(program, 'pos');
gl.enableVertexAttribArray(program.vertexPosAttrib);
gl.vertexAttribPointer(program.vertexPosAttrib, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</html>