-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmuehle3d.html
108 lines (92 loc) · 3.32 KB
/
muehle3d.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>3D Mühle</title>
<script id="vShader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
gl_Position = vPosition;
}
</script>
<script id="fShader" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.5, 0.5, 1.0);
}
</script>
<script type="text/javascript">
"use strict";
(function(){
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript)
return null;
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3)
str += k.textContent;
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
window.addEventListener('load', function() {
console.log('initializing');
var
canvas, // canvas ist die "Leinwand" auf die gezeichnet werden kann
gl, // DAS WebGL-Objekt (wird vom Browser abgefragt, falls dieser WebGL unterstützt
glProgram, // "GPU-Programm", das zur Berechnung der Grafik verwendet wird
vShader, // Vertex Shader
fShader, // Fragment Shader
vertexAttribLoc, // Verknüpfung zwischen JavaScript und Vertex-Shader
vertices, // Array der Dreieckskoordinaten
buffer; // Der WebGL-Buffer, der die Dreieckskoordinaten aufnimmt
canvas = window.document.getElementById("canvas3d");
gl = canvas.getContext("experimental-webgl");
glProgram = gl.createProgram();
// Der Vertex-Shader-wird angelegt
vShader = getShader(gl, 'vShader');
gl.attachShader(glProgram, vShader);
// Der Fragment-Shader-wird angelegt
fShader = getShader(gl, 'fShader');
gl.attachShader(glProgram, fShader);
gl.linkProgram(glProgram);
gl.useProgram(glProgram);
gl.clearColor(0.0, 0.0, 0.5, 1.0); // RGB-Alpha Farbe zum loeschen des Hintergrundes:
gl.clear(gl.COLOR_BUFFER_BIT); // Hintergrund loeschen
// Koordinaten des Dreiecks
vertices = new Float32Array([0.0, 0.1, 0.0, -0.1, -0.1, 0.0, 0.1, -0.1, 0.0 ]);
buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Die Verknuepfung zwischen JavaScript und dem Shader-Attribut
vertexAttribLoc = gl.getAttribLocation(glProgram, "vPosition");
gl.vertexAttribPointer(vertexAttribLoc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexAttribLoc);
gl.drawArrays(gl.TRIANGLES, 0, 3); // gl.TRIANGLES, gl.POINTS oder gl.LINE_STRIP
console.log('init done');
});
})();
</script>
</head>
<body>
<canvas id="canvas3d" width="500" height="500"></canvas>
<pre>
</pre>
</body>
</html>