1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4       <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5       <title>WebGL Tutorial 1 - Das erste Dreieck</title>
6      
7    <script type="text/javascript">
8    "use strict";
9    /*global window */ // tells jslint that 'window' is defined!
10    /*global Float32Array */ // tells jslint that 'Float32Array' is defined!
11
12    // Diese Funktion wird ausgefuehrt, sobald die HTML-Seite geladen ist :
13    function meinWebGLStart() {
14        var
15            canvas, // canvas ist die "Leinwand" auf die gezeichnet werden kann
16            gl, // DAS WebGL-Objekt (wird vom Browser abgefragt, falls dieser WebGL unterstützt
17            webGLProgramObject, // "GPU-Programm", das zur Berechnung der Grafik verwendet wird
18            vShaderQuellcode, // String des Vertex-Shader Quellcodes
19            vShader, // der Shader selbst
20            fShaderQuellcode, // String des Fragment-Shader Quellcodes
21            fShader, // der Shader selbst
22            vertexAttribLoc, // Verknüpfung zwischen JavaScript und Vertex-Shader
23            vVertices, // Array der Dreieckskoordinaten
24            vertexPosBufferObjekt; // Der WebGL-Buffer, der die Dreieckskoordinaten aufnimmt
25
26        canvas = window.document.getElementById("meineWebGLCanvas");
27
28        try {
29            // Falls der Browser es unterstuetzt, wird hier WebGL
30            // erstmalig angesprochen und der "WebGL-Context" in
31            // dem Objekt gl gespeichert.
32            gl = canvas.getContext("experimental-webgl");
33        } catch (e) {}
34        if (!gl) {
35            window.alert("Fehler: WebGL-Context nicht gefunden");
36        }
37
38        // Das Shader-Program-Objekt fasst spaeter den Vertex-
39        // und Fragment-Shader zusammen.
40        webGLProgramObject = gl.createProgram();
41
42        // Der folgende String enthaelt den kompletten Quellcode
43        // fuer einen minimalistischen Vertex-Shader:
44        vShaderQuellcode =
45            'attribute vec4 vPosition; \n\
46            void main() \n\
47            { \n\
48                gl_Position = vPosition; \n\
49            } \n';
50        // Das Vertex-Shader-Objekt wird angelegt:
51        vShader = gl.createShader(gl.VERTEX_SHADER);
52        // - mit seinem Quelltext verknuepft:
53        gl.shaderSource(vShader, vShaderQuellcode);
54        // - kompiliert:
55        gl.compileShader(vShader);
56        // - dem Shader-Program-Objekt hinzugefuegt:
57        gl.attachShader(webGLProgramObject, vShader);
58
59        // Nochmal das gleiche Vorgehen wie fuer den Vertex-
60        // Shader; analog fuer den Fragment-Shader:
61        fShaderQuellcode =
62            'precision mediump float;\n\
63            void main() \n\
64            { \n\
65                gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n\
66            } \n';
67        fShader = gl.createShader(gl.FRAGMENT_SHADER);
68        gl.shaderSource(fShader, fShaderQuellcode);
69        gl.compileShader(fShader);
70        gl.attachShader(webGLProgramObject, fShader);
71        // Das Shader-Program-Objekt ist vollstaendig und muss
72        // gelinkt werden.
73        gl.linkProgram(webGLProgramObject);
74        // Da theoretisch mehrere Shader-Program-Objekte moeglich
75        // sind, muss angegeben werden, welches benutzt werden soll.
76        gl.useProgram(webGLProgramObject);
77        // RGB-Alpha Farbe zum loeschen des Hintergrundes:
78        gl.clearColor(0.0, 0.0, 0.0, 1.0);
79        // Hintergrund loeschen
80        gl.clear(gl.COLOR_BUFFER_BIT);
81
82        // Die Verknuepfung zwischen JavaScript und dem
83        // Shader-Attribut
84        vertexAttribLoc = gl.getAttribLocation(webGLProgramObject, "vPosition");
85        // Ein Array mit den Koordinaten, der Eckpunkte des Dreiecks
86        // das dargestellt wird.
87        vVertices = new Float32Array([
88         0.0, 0.1, 0.0,
89            -0.1, -0.1, 0.0,
90            0.1, -0.1, 0.0 ]);
91        // ein WebGL-Buffer-Objekt wird erzeugt:
92        vertexPosBufferObjekt = gl.createBuffer();
93        // ...und als aktives Objekt gesetzt:
94        gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBufferObjekt);
95         // die Arraydaten werden an den aktiven Puffer uebergeben:
96        gl.bufferData(gl.ARRAY_BUFFER, vVertices, gl.STATIC_DRAW);
97        gl.vertexAttribPointer(vertexAttribLoc, 3, gl.FLOAT, false, 0, 0);
98        gl.enableVertexAttribArray(vertexAttribLoc);
99
100        gl.drawArrays(gl.TRIANGLES, 0, 3);
101    }
102
103    window.onload = function () {
104        meinWebGLStart();
105    };
106    </script>
107    
108    </head>
109    <body>
110     <canvas id="meineWebGLCanvas" width="500" height="500"></canvas>
111     <br />
112     Dieses Beispiel beschraenkt sich auf die minimal notwendigen
113     Schritte zur Darstellung eines Dreiecks mit WebGL.<br />
114     Der Schwerpunkt liegt also auf dem Quellcode und weniger auf dem
115     sichtbaren Ergebnis ;-).
116     <br />
117     <i> Falls du oben kein weißes Dreieck siehst, unterstuetzt dein
118     Browser kein WebGL </i>
119    </body>
120</html>
121
122