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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebGL Triangle Test</title>
</head>
<body>
<div style="text-align: center">
<canvas id="canvas" width="512" height="512"></canvas>
</div>
<script id="vertexshader" type="x-shader">
precision mediump float;
attribute vec2 aVertexPosition;
attribute vec4 aColour;
varying vec4 aVertexColor;
void main() {
aVertexColor = aColour;
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script>
<script id="fragmentshader" type="x-shader">
precision mediump float;
varying vec4 aVertexColor;
void main() {
gl_FragColor = aVertexColor;
}
</script>
<script type="text/javascript">
(function() {
var canvas;
function initWebGL()
{
canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (!gl) return null; // can't initialize WebGL
return gl;
}
var gl = initWebGL();
if (!gl) {
alert("No webgl context found!");
return;
}
// Setup Shaders:
var v = document.getElementById("vertexshader").firstChild.nodeValue;
var f = document.getElementById("fragmentshader").firstChild.nodeValue;
console.log("vertex source: ", v);
console.log("fragment source: ", f);
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, v);
gl.compileShader(vs);
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
alert("Shader failed to compile. Reason: " + gl.getShaderInfoLog(vs));
return;
}
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, f);
gl.compileShader(fs);
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
alert("Shader failed to compile. Reason: " + gl.getShaderInfoLog(fs));
return;
}
program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
alert("Shader failed to link. Reason: " + gl.getProgramInfoLog(program));
return;
}
gl.validateProgram(program);
if (!gl.getProgramParameter( program, gl.VALIDATE_STATUS)) {
alert("Program failed to validate. Reason: " + gl.getProgramInfoLog(program));
return;
}
// Setup Geometry
var vertices = new Float32Array([
-0.5,-0.5, 0.5,-0.5, 0.0,0.5, // Triangle-Coordinates
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
]);
vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
itemSize = 2; // we have 2 coordinates (x,y)
numItems = vertices.length / itemSize; // number of vertices
// Viewport
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Setup Geometry
gl.useProgram(program);
program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, itemSize, gl.FLOAT, false, 0, 0);
program.aColour = gl.getAttribLocation(program, "aColour");
console.log("aColour: " + program.aColour);
gl.enableVertexAttribArray(program.aColour);
gl.vertexAttribPointer(program.aColour, 4, gl.FLOAT, false, 0, 24);
// Draw
gl.drawArrays(gl.TRIANGLES, 0, 3);
})();
</script>
</body>
</html>
|
