Tutorial WebGL: Unterschied zwischen den Versionen
K (→Beispiel: Links aktualisiert) |
(→Vorwort) |
||
| (19 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | + | ==Vorwort== | |
| − | In diesem Tutorial werden die wesentlichen Besonderheiten von WebGL gegenüber anderen OpenGL-Anwendungen vorgestellt. Kenntnisse in [http://de.wikipedia.org/wiki/JavaScript JavaScript] und [http://www.khronos.org/opengles | + | In diesem Tutorial werden die wesentlichen Besonderheiten von WebGL gegenüber anderen OpenGL-Anwendungen vorgestellt. Kenntnisse in [http://de.wikipedia.org/wiki/JavaScript JavaScript] und [http://www.khronos.org/opengles/ OpenGL ES], also insbesondere [[GLSL]] und [[VBO]]s werden vorausgesetzt. Neben diesem Tutorial existieren auch einige andere [[#Links|Tutorials]], aber ein Blick in den Quellcode der verfügbaren Demos kann nie schaden. |
| − | WebGL | + | Das neuere WebGL 2.0 lehnt an OpenGL ES 3.00 an und somit werden werden auch [[VAO]] unterstütz.<br> |
| − | + | Siehe auch: | |
| − | + | * [https://www.khronos.org/registry/webgl/specs/latest/2.0/#3.6 WebGL 2.0 Specification] | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | * | ||
| − | |||
| − | |||
| + | ==Demos== | ||
| − | |||
| + | Zunächst einmal ein paar Demos um die Funktionalität des eigenen Browsers zu testen. | ||
| + | * [http://webglsamples.org/ ] - Ein paar Demos die zeigen, was WebGL leistet. | ||
| − | + | Noch 2 Bilder, zu denen es keine Source mehr gibt: | |
| − | |||
{|{{Prettytable_B1}} | {|{{Prettytable_B1}} | ||
| − | | [[Bild:webgl-sporeviewer.jpg|320px] | + | | [[Bild:webgl-sporeviewer.jpg|320px]] |
| − | + | | [[Bild:webgl-metatunnel.jpg|320px]] | |
| − | |||
| − | |||
| − | | [[Bild:webgl-metatunnel.jpg|320px] | ||
|} | |} | ||
| − | |||
==WebGL== | ==WebGL== | ||
| Zeile 67: | Zeile 57: | ||
// request rendering context from the canvas | // request rendering context from the canvas | ||
| − | + | var names = [ "webgl", "experimental-webgl", "moz-webgl", "webkit-3d" ]; | |
| − | + | for (var i=0; i<names.length; i++) { | |
| − | + | try { | |
| − | + | gl = canvas.getContext(names[i]); | |
| − | try { | + | if (gl) { break; } |
| − | + | } catch (e) { } | |
| − | + | } | |
| − | } catch (e) { } | ||
| − | |||
if (!gl) { | if (!gl) { | ||
alert("No known OpenGL context detected! Is it enabled?"); | alert("No known OpenGL context detected! Is it enabled?"); | ||
return; | return; | ||
} | } | ||
| + | |||
| + | // since WebGL is still experimental, we need some compatibility code | ||
| + | compatibilityCode(); | ||
</source> | </source> | ||
| + | |||
| + | Da die verschiedenen Implementierungen noch nicht alle auf dem selben Stand sind ist im Augenblick noch etwas Kompatibilitätscode erforderlich. In Zukunft wird dies hoffentlich nicht mehr notwendig sein. Die Funktion <tt>compatibilityCode()</tt> findest du in der [[Tutorial_WebGL_Sample|Beispiel-Implementierung]] dieses Tutorials. | ||
===Shader=== | ===Shader=== | ||
| Zeile 91: | Zeile 84: | ||
gl.shaderSource(shader, shaderSource); | gl.shaderSource(shader, shaderSource); | ||
gl.compileShader(shader); | gl.compileShader(shader); | ||
| − | + | ||
| − | if (!gl. | + | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { |
alert(gl.getShaderInfoLog(shader)); | alert(gl.getShaderInfoLog(shader)); | ||
return null; | return null; | ||
} | } | ||
| − | + | ||
return shader; | return shader; | ||
} | } | ||
| Zeile 116: | Zeile 109: | ||
gl.attachShader(program, fragmentShader); | gl.attachShader(program, fragmentShader); | ||
| − | // setup attributes | + | // setup attributes (optional) |
gl.bindAttribLocation(program, 0, "aPosition"); | gl.bindAttribLocation(program, 0, "aPosition"); | ||
gl.bindAttribLocation(program, 1, "aNormal"); | gl.bindAttribLocation(program, 1, "aNormal"); | ||
gl.bindAttribLocation(program, 2, "aTexCoord"); | gl.bindAttribLocation(program, 2, "aTexCoord"); | ||
| − | |||
// linking | // linking | ||
gl.linkProgram(program); | gl.linkProgram(program); | ||
| − | if (!gl. | + | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { |
alert(gl.getProgramInfoLog(program)); | alert(gl.getProgramInfoLog(program)); | ||
} | } | ||
| + | |||
| + | // setup uniforms (optional) | ||
| + | gl.useProgram(program); | ||
| + | gl.uniform1i(gl.getUniformLocation(program, "uTexture"), 0); | ||
</source> | </source> | ||
| Zeile 135: | Zeile 131: | ||
attribute vec3 aPosition; | attribute vec3 aPosition; | ||
attribute vec3 aNormal; | attribute vec3 aNormal; | ||
| − | attribute | + | attribute vec2 aTexCoord; |
varying vec3 vNormal; | varying vec3 vNormal; | ||
varying vec2 vTexCoord; | varying vec2 vTexCoord; | ||
| Zeile 182: | Zeile 178: | ||
VertexArrays scheinen zumindest im Firefox bisher nicht implementiert zu sein. Das mag damit zusammenhängen, dass Arrays in JavaScript sehr langsam sind. Arrays müssen nämlich in JavaScript nicht zwangsläufig wirkliche zusammenhängende Arrays sein, sondern können auch als HashMap realisiert sein. | VertexArrays scheinen zumindest im Firefox bisher nicht implementiert zu sein. Das mag damit zusammenhängen, dass Arrays in JavaScript sehr langsam sind. Arrays müssen nämlich in JavaScript nicht zwangsläufig wirkliche zusammenhängende Arrays sein, sondern können auch als HashMap realisiert sein. | ||
| − | Um Geometrie zu rendern muss also zumindest im Augenblick auf VertexBufferObjects ([[VBO]]s) zurückgegriffen werden. Diese können im wesentlichen wie gewohnt benutzt werden. Es gibt eine spezielle Wrapper-Klasse <tt> | + | Um Geometrie zu rendern muss also zumindest im Augenblick auf VertexBufferObjects ([[VBO]]s) zurückgegriffen werden. Diese können im wesentlichen wie gewohnt benutzt werden. Es gibt eine spezielle Wrapper-Klasse <tt>WebGLFloatArray</tt> die ein JavaScript-Array mit Werten in ein richtiges float-Array umwandelt. Dieses <tt>WebGLFloatArray</tt> wird dann an OpenGL übergeben. Zusätzlich gibt es auch die Klassen <tt>WebGLByteArray</tt>, <tt>WebGLShortArray</tt> und <tt>WebGLIntArray</tt>. Außerdem existieren auch <tt>WebGLUnsignedByteArray</tt>, <tt>WebGLUnsignedShortArray</tt> und <tt>WebGLUnsignedIntArray</tt>. |
| − | Leider existiert im Zusammenhang mit [[glVertexAttribPointer]] ein Bug in der aktuellen Firefox-Implementierung. Aus Sicherheitsgründen wird die mindestens notwendige Größe eines Vertexbuffers geprüft bevor darauf zugegriffen werden kann. Sofern wie im Beispiel ein Interleaved-VBO verwendet wird, wird diese [https://bugzilla.mozilla.org/show_bug.cgi?id=521667 Größe leider falsch berechnet] | + | Leider existiert im Zusammenhang mit [[glVertexAttribPointer]] ein Bug in der aktuellen Firefox-Implementierung. Aus Sicherheitsgründen wird die mindestens notwendige Größe eines Vertexbuffers geprüft bevor darauf zugegriffen werden kann. Sofern wie im Beispiel ein Interleaved-VBO verwendet wird, wird diese [https://bugzilla.mozilla.org/show_bug.cgi?id=521667 Größe leider falsch berechnet]. Um den Bug zu umgehen müssen im Augenblick Indices benutzt werden. |
<source lang="javascript"> | <source lang="javascript"> | ||
| Zeile 190: | Zeile 186: | ||
var vertices = [ | var vertices = [ | ||
// position XYZ, normal XYZ, texcoord UV => 8 floats per vertex | // position XYZ, normal XYZ, texcoord UV => 8 floats per vertex | ||
| − | + | -0.5, 0.5, 0.0, 0.6, 0.0, 0.8, 0.0, 0.0, | |
| + | 0.5, 0.5, 0.0, 0.6, 0.0, 0.8, 1.0, 0.0, | ||
-0.5, -0.5, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, | -0.5, -0.5, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, | ||
0.5, -0.5, 0.0, 0.0, 0.6, 0.8, 1.0, 1.0, | 0.5, -0.5, 0.0, 0.0, 0.6, 0.8, 1.0, 1.0, | ||
| − | |||
| − | |||
| − | |||
| − | |||
]; | ]; | ||
| − | + | // we need also some indices because of this annoying Firefox-Bug: | |
| − | // create VBO | + | // https://bugzilla.mozilla.org/show_bug.cgi?id=521667 |
| + | var indices = [ | ||
| + | 0, 1, 2, 2, 1, 3 | ||
| + | ]; | ||
| + | // create VBO & IBO | ||
var vbo = gl.createBuffer(); | var vbo = gl.createBuffer(); | ||
gl.bindBuffer(gl.ARRAY_BUFFER, vbo); | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); | ||
| − | gl.bufferData(gl.ARRAY_BUFFER, new | + | gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW); |
| + | var ibo = gl.createBuffer(); | ||
| + | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); | ||
| + | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indices), gl.STATIC_DRAW); | ||
| − | // setup | + | // ... |
| + | |||
| + | // setup interleaved VBO and IBO | ||
| + | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); | ||
| + | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); | ||
gl.enableVertexAttribArray(0); | gl.enableVertexAttribArray(0); | ||
gl.enableVertexAttribArray(1); | gl.enableVertexAttribArray(1); | ||
gl.enableVertexAttribArray(2); | gl.enableVertexAttribArray(2); | ||
| − | gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 8, 0); // position | + | gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 8*4, 0*4); // position |
| − | gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8, 3); // normal | + | gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8*4, 3*4); // normal |
| − | gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8, 6); // texcoord | + | gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8*4, 6*4); // texcoord |
// draw the buffer | // draw the buffer | ||
| − | gl. | + | gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); |
</source> | </source> | ||
| − | Der schnellste Weg ein Mesh zu laden | + | Der schnellste Weg ein Mesh zu laden ist dessen Vertex- und Indexbuffer direkt als JavaScript-Array anzugeben. Die Daten können so nativ vom Browser geladen werden. Größere Meshes hat man natürlich ungern direkt im Quellcode und möchte diese auch vielleicht nicht direkt beim Start der Anwendung laden. Hier bietet sich eine eigene Datei an, die dann über ein [http://www.w3schools.com/XML/xml_http.asp XMLHttpRequest]-Objekt (Stichwort: [http://de.wikipedia.org/wiki/AJAX AJAX]) in JavaScript nachgeladen und anschließend dem Browser zum Parsen übergeben wird. So kann das Laden im Hintergrund realisiert werden. |
| + | |||
| + | Ein Problem ist natürlich das Dateiformat. Bisher hat nach meinem Wissen noch niemand einen Benchmark versucht, aber das manuelle Parsen der Daten dauert bei einer JavaScript-Implementierung wahrscheinlich vergleichsweise lange. Außerdem dürfte es in JavaScript schwierig werden Binärdaten zu lesen. Wenn man Daten aus einer externen Datei laden möchte, bietet sich das JSON-Format an. Dieses kann mit der JavaScript-Funktion <tt>eval()</tt> extrem schnell (da nativ) verarbeitet werden. Die folgenden Loader bzw. Konverter sind bekannt: | ||
* Der [http://people.mozilla.com/~vladimir/webgl/spore/sporeview.html Spore Creature Viewer] lädt aus dem Spiel [http://www.spore.com/ Spore] exportierte Meshes direkt mit JavaScript. Spore benutzt das [http://www.collada.org/ COLLADA]-Format. | * Der [http://people.mozilla.com/~vladimir/webgl/spore/sporeview.html Spore Creature Viewer] lädt aus dem Spiel [http://www.spore.com/ Spore] exportierte Meshes direkt mit JavaScript. Spore benutzt das [http://www.collada.org/ COLLADA]-Format. | ||
* Konverter für [http://en.wikipedia.org/wiki/Obj Wavefront OBJ] zu JavaScript-Arrays: [http://www.c3dl.org/index.php/c3dl-dev/wavefront-obj-file-to-javascript-arrays/ Beschreibung], [http://www.c3dl.org/index.php/download/ Download] | * Konverter für [http://en.wikipedia.org/wiki/Obj Wavefront OBJ] zu JavaScript-Arrays: [http://www.c3dl.org/index.php/c3dl-dev/wavefront-obj-file-to-javascript-arrays/ Beschreibung], [http://www.c3dl.org/index.php/download/ Download] | ||
* Maxscript ([http://de.wikipedia.org/wiki/3ds_Max Autodesk 3ds Max]) welches JavaScript-Arrays exportiert: [http://www.c3dl.org/index.php/download/ Download] | * Maxscript ([http://de.wikipedia.org/wiki/3ds_Max Autodesk 3ds Max]) welches JavaScript-Arrays exportiert: [http://www.c3dl.org/index.php/download/ Download] | ||
| + | * [http://www.khronos.org/message_boards/viewtopic.php?f=44&t=2171 Thread im Khronos-Forum] der sich mit dem effizienten Laden von Geometriedaten aus XML- und JSON-Formaten beschäftigt. | ||
| − | + | Es lohnt sich übrigens diese großen JavaScript-Arrays so kompakt wie möglich zu schreiben. Alleine durch das Weglassen von unnötigen Leerzeichen spart man schnell einige 10 oder 100 kB bei der Dateigröße. Des weiteren erlaubt das HTTP-Protokoll auch die Übertragung mit GZIP-komprimierter Daten. Aktuelle Browser sollten dies nativ unterstützen, so dass keine eigene Implementierung der Komprimierung erforderlich ist. Allerdings muss der HTTP-Server entsprechend konfiguriert sein. | |
| − | |||
| − | Es lohnt sich übrigens diese großen JavaScript-Arrays so kompakt wie möglich zu schreiben. Alleine durch das Weglassen von unnötigen Leerzeichen spart man schnell einige 10 oder 100 kB bei der Dateigröße. | ||
===Texturen=== | ===Texturen=== | ||
| Zeile 261: | Zeile 266: | ||
Genau wie OpenGL 3.1 besitzt auch OpenGL ES 2.0 keine eigenen Mathematikfunktionen mehr. Einen guten Ansatz bietet hierbei das [http://wiki.delphigl.com/index.php/Tutorial_OpenGL3_Lineare_Algebra Lineare Algebra Tutorial von TAK2004]. Beliebt im Zusammenhang mit WebGL ist im Augenblick die [http://sylvester.jcoglan.com/ JavaScript-Bibliothek Sylvester] die grundlegende Vektor und Matrix Operationen bereitstellt. Die [http://bjartr.blogspot.com/2009/10/webgl-what-is-it-and-how-can-i-use-it_04.html WebGLU Library] versucht unter Rückgriff auf Sylvester die aus OpenGL 2.0 (und älter) bekannten Funktionen wie den Matrix-Stack zurückzubringen. | Genau wie OpenGL 3.1 besitzt auch OpenGL ES 2.0 keine eigenen Mathematikfunktionen mehr. Einen guten Ansatz bietet hierbei das [http://wiki.delphigl.com/index.php/Tutorial_OpenGL3_Lineare_Algebra Lineare Algebra Tutorial von TAK2004]. Beliebt im Zusammenhang mit WebGL ist im Augenblick die [http://sylvester.jcoglan.com/ JavaScript-Bibliothek Sylvester] die grundlegende Vektor und Matrix Operationen bereitstellt. Die [http://bjartr.blogspot.com/2009/10/webgl-what-is-it-and-how-can-i-use-it_04.html WebGLU Library] versucht unter Rückgriff auf Sylvester die aus OpenGL 2.0 (und älter) bekannten Funktionen wie den Matrix-Stack zurückzubringen. | ||
| + | |||
| + | Soweit von mir, im Anschluss findet ihr noch ein Beispiel sowie eine Liste von Links die nach Möglichkeit aktuell gehalten wird. | ||
| + | |||
| + | '''Coolcat''' | ||
| + | {{TUTORIAL_NAVIGATION|[[Tutorial_GLScene]]|-}} | ||
| + | |||
| + | [[Kategorie:Tutorial|WebGL]] | ||
==Beispiel== | ==Beispiel== | ||
| Zeile 268: | Zeile 280: | ||
==Links== | ==Links== | ||
| − | + | * [[WebGL#Links|Hauptseite WebGL]] | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Aktuelle Version vom 17. Juli 2018, 16:41 Uhr
Inhaltsverzeichnis
Vorwort
In diesem Tutorial werden die wesentlichen Besonderheiten von WebGL gegenüber anderen OpenGL-Anwendungen vorgestellt. Kenntnisse in JavaScript und OpenGL ES, also insbesondere GLSL und VBOs werden vorausgesetzt. Neben diesem Tutorial existieren auch einige andere Tutorials, aber ein Blick in den Quellcode der verfügbaren Demos kann nie schaden.
Das neuere WebGL 2.0 lehnt an OpenGL ES 3.00 an und somit werden werden auch VAO unterstütz.
Siehe auch:
Demos
Zunächst einmal ein paar Demos um die Funktionalität des eigenen Browsers zu testen.
- [1] - Ein paar Demos die zeigen, was WebGL leistet.
Noch 2 Bilder, zu denen es keine Source mehr gibt:
|
|
WebGL
Context
Um WebGL nutzen zu können benötigt man zunächst einmal ein HTML5 Canvas-Element, welchem wir passender weise die ID "canvas" geben. Wir können die Anwendung beispielsweise über das onload-Event des body-Elements startet. Genauso gut kann man natürlich auch einen Link oder Button verwenden.
<html>
<head>
<script type="text/javascript">
<!--
function init() {
// ...
}
// -->
</script>
</head>
<body onload="init()">
<div style="text-align: center">
<canvas id="canvas" width="640" height="480"></canvas>
</div>
</body>
</html>
Von unserem Canvas erhalten wir zum einen die spätere Viewportgröße und zum anderen einen sogenannten Context. Das Context-Objekt erlaubt uns sämtliche OpenGL ES 2.0 Funktionen aufzurufen.
// our WebGL rendering context, it might be useful to use a global variable for this
var gl = null;
// grab the canvas object and its dimensions
var canvas = document.getElementById("canvas");
var viewportWidth = canvas.width;
var viewportHeight = canvas.height;
// request rendering context from the canvas
var names = [ "webgl", "experimental-webgl", "moz-webgl", "webkit-3d" ];
for (var i=0; i<names.length; i++) {
try {
gl = canvas.getContext(names[i]);
if (gl) { break; }
} catch (e) { }
}
if (!gl) {
alert("No known OpenGL context detected! Is it enabled?");
return;
}
// since WebGL is still experimental, we need some compatibility code
compatibilityCode();
Da die verschiedenen Implementierungen noch nicht alle auf dem selben Stand sind ist im Augenblick noch etwas Kompatibilitätscode erforderlich. In Zukunft wird dies hoffentlich nicht mehr notwendig sein. Die Funktion compatibilityCode() findest du in der Beispiel-Implementierung dieses Tutorials.
Shader
In OpenGL ES 2.0 herrscht Shader-Zwang, eine feste Funktionspipeline existiert nicht. Stehen der verfügbaren Grafikhardware keine GLSL-Shader zur Verfügung, muss OpenGL ES in den Softwaremodus geschaltet werden und wird entsprechend langsam. Das Laden von GLSL-Shadern geschieht wie gewohnt. Zuerst werden Vertex- und Fragmentshader geladen und compiliert. Beide Shader werden dann an ein Program-Objekt angehängt und gelinkt.
function loadShader(shaderType, shaderSource) {
var shader = gl.createShader(shaderType);
if (!shader) { return null; }
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
var vertexShaderSource = "...Vertexshader als String...";
var fragmentShaderSource = "...Fragmentshader als String...";
var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
if (!vertexShader || !fragmentShader) {
alert("Shader problem");
}
// create program object
var program = gl.createProgram();
// attach our two shaders to the program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// setup attributes (optional)
gl.bindAttribLocation(program, 0, "aPosition");
gl.bindAttribLocation(program, 1, "aNormal");
gl.bindAttribLocation(program, 2, "aTexCoord");
// linking
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
alert(gl.getProgramInfoLog(program));
}
// setup uniforms (optional)
gl.useProgram(program);
gl.uniform1i(gl.getUniformLocation(program, "uTexture"), 0);
Im obigen Beispiel wird der Shader-Quellcode fest als String in den JavaScript-Code integriert. Das ist natürlich ziemlich unübersichtlich. Vom Prinzip spielt es keine Rolle wo der String herkommt. Beispielsweise kann man ihn mit einem HTTP-Request in einer Shader-Datei vom Server laden. Es ist aber auch möglich den Shader-Code als spezielles Script-Element in die HTML-Datei einzubinden.
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec2 aTexCoord;
varying vec3 vNormal;
varying vec2 vTexCoord;
void main() {
gl_Position = vec4(aPosition, 1.0);
vTexCoord = aTexCoord;
vNormal = aNormal;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
varying vec3 vNormal;
varying vec2 vTexCoord;
uniform sampler2D uTexture;
void main() {
gl_FragColor = texture2D(uTexture, vTexCoord);
}
</script>
Der Browser hat vom Script-Typ "x-shader/x-vertex" natürlich noch nie etwas gehört und wird das Element entsprechend einfach ignorieren. Mit einer einfachen JavaScript-Funktion kann man aber trotzdem an den Inhalt gelangen.
function getShaderSource(id) {
var script = document.getElementById(id);
if (!script) { return null; }
var source = "";
var child = script.firstChild;
while (child) {
// node is a "textnode" ?
// see: http://de.selfhtml.org/javascript/objekte/node.htm#node_type
if (child.nodeType == 3) {
source += child.textContent;
}
child = child.nextSibling;
}
return source;
}
var vertexShaderSource = getShaderSource("shader-vs");
var fragmentShaderSource = getShaderSource("shader-fs");
VertexBufferObjects
VertexArrays scheinen zumindest im Firefox bisher nicht implementiert zu sein. Das mag damit zusammenhängen, dass Arrays in JavaScript sehr langsam sind. Arrays müssen nämlich in JavaScript nicht zwangsläufig wirkliche zusammenhängende Arrays sein, sondern können auch als HashMap realisiert sein.
Um Geometrie zu rendern muss also zumindest im Augenblick auf VertexBufferObjects (VBOs) zurückgegriffen werden. Diese können im wesentlichen wie gewohnt benutzt werden. Es gibt eine spezielle Wrapper-Klasse WebGLFloatArray die ein JavaScript-Array mit Werten in ein richtiges float-Array umwandelt. Dieses WebGLFloatArray wird dann an OpenGL übergeben. Zusätzlich gibt es auch die Klassen WebGLByteArray, WebGLShortArray und WebGLIntArray. Außerdem existieren auch WebGLUnsignedByteArray, WebGLUnsignedShortArray und WebGLUnsignedIntArray.
Leider existiert im Zusammenhang mit glVertexAttribPointer ein Bug in der aktuellen Firefox-Implementierung. Aus Sicherheitsgründen wird die mindestens notwendige Größe eines Vertexbuffers geprüft bevor darauf zugegriffen werden kann. Sofern wie im Beispiel ein Interleaved-VBO verwendet wird, wird diese Größe leider falsch berechnet. Um den Bug zu umgehen müssen im Augenblick Indices benutzt werden.
// define some vertexdata
var vertices = [
// position XYZ, normal XYZ, texcoord UV => 8 floats per vertex
-0.5, 0.5, 0.0, 0.6, 0.0, 0.8, 0.0, 0.0,
0.5, 0.5, 0.0, 0.6, 0.0, 0.8, 1.0, 0.0,
-0.5, -0.5, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0,
0.5, -0.5, 0.0, 0.0, 0.6, 0.8, 1.0, 1.0,
];
// we need also some indices because of this annoying Firefox-Bug:
// https://bugzilla.mozilla.org/show_bug.cgi?id=521667
var indices = [
0, 1, 2, 2, 1, 3
];
// create VBO & IBO
var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);
var ibo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indices), gl.STATIC_DRAW);
// ...
// setup interleaved VBO and IBO
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 8*4, 0*4); // position
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8*4, 3*4); // normal
gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8*4, 6*4); // texcoord
// draw the buffer
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
Der schnellste Weg ein Mesh zu laden ist dessen Vertex- und Indexbuffer direkt als JavaScript-Array anzugeben. Die Daten können so nativ vom Browser geladen werden. Größere Meshes hat man natürlich ungern direkt im Quellcode und möchte diese auch vielleicht nicht direkt beim Start der Anwendung laden. Hier bietet sich eine eigene Datei an, die dann über ein XMLHttpRequest-Objekt (Stichwort: AJAX) in JavaScript nachgeladen und anschließend dem Browser zum Parsen übergeben wird. So kann das Laden im Hintergrund realisiert werden.
Ein Problem ist natürlich das Dateiformat. Bisher hat nach meinem Wissen noch niemand einen Benchmark versucht, aber das manuelle Parsen der Daten dauert bei einer JavaScript-Implementierung wahrscheinlich vergleichsweise lange. Außerdem dürfte es in JavaScript schwierig werden Binärdaten zu lesen. Wenn man Daten aus einer externen Datei laden möchte, bietet sich das JSON-Format an. Dieses kann mit der JavaScript-Funktion eval() extrem schnell (da nativ) verarbeitet werden. Die folgenden Loader bzw. Konverter sind bekannt:
- Der Spore Creature Viewer lädt aus dem Spiel Spore exportierte Meshes direkt mit JavaScript. Spore benutzt das COLLADA-Format.
- Konverter für Wavefront OBJ zu JavaScript-Arrays: Beschreibung, Download
- Maxscript (Autodesk 3ds Max) welches JavaScript-Arrays exportiert: Download
- Thread im Khronos-Forum der sich mit dem effizienten Laden von Geometriedaten aus XML- und JSON-Formaten beschäftigt.
Es lohnt sich übrigens diese großen JavaScript-Arrays so kompakt wie möglich zu schreiben. Alleine durch das Weglassen von unnötigen Leerzeichen spart man schnell einige 10 oder 100 kB bei der Dateigröße. Des weiteren erlaubt das HTTP-Protokoll auch die Übertragung mit GZIP-komprimierter Daten. Aktuelle Browser sollten dies nativ unterstützen, so dass keine eigene Implementierung der Komprimierung erforderlich ist. Allerdings muss der HTTP-Server entsprechend konfiguriert sein.
Texturen
Das Laden von Texturen ist relativ einfach, da der Browser bereits über die nötige Infrastruktur zum Laden von Bildern in vielen Formaten bereitstellt. Etwas ungewohnt ist der asynchrone Ladevorgang: Ein Bild steht nicht sofort zur Verfügung, da dieses ja möglicherweise zuerst vom Server geladen werden muss. Sobald aber das Bild verfügbar ist wird das onload-Event ausgelöst. Was im Fehlerfall geschehen soll wird über das onerror-Event festgelegt.
function loadTexture(filename) {
// preparations
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
var image = new Image();
// register event handlers
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, image);
gl.generateMipmap(gl.TEXTURE_2D);
draw(); // texture now available, we can redraw the scene
}
image.onerror = function() {
alert("error while loading image '"+filename+"'.");
}
// request image from server
image.src = filename;
// return texture object (asynchronous loading, texture NOT available yet!)
return texture;
}
Ressourcen und Mathematik
Dadurch das Ressourcen (Meshes, Texturen, Shader, ...) im Browser asynchron geladen werden, wird entsprechendes Management dieser Ressourcen erforderlich. Eine Ressource darf erst verwendet werden, wenn sie auch wirklich initialisiert wurde. Entsprechend müssen die zugehörigen Callbacks abgewartet werden.
Eine einfache Lösung für dieses Problem ist ein Ressourcenmanager der alle Daten lädt oder zumindest weiß welche Ressourcen noch geladen werden müssen. Zu Beginn wird einfach nur der Text "Loading..." angezeigt. Jede Ressource meldet sich beim Manager sobald sie verfügbar ist. Sobald alles korrekt initialisiert wurde kann der Ressourcenmanager die eigentliche Anwendung starten.
Genau wie OpenGL 3.1 besitzt auch OpenGL ES 2.0 keine eigenen Mathematikfunktionen mehr. Einen guten Ansatz bietet hierbei das Lineare Algebra Tutorial von TAK2004. Beliebt im Zusammenhang mit WebGL ist im Augenblick die JavaScript-Bibliothek Sylvester die grundlegende Vektor und Matrix Operationen bereitstellt. Die WebGLU Library versucht unter Rückgriff auf Sylvester die aus OpenGL 2.0 (und älter) bekannten Funktionen wie den Matrix-Stack zurückzubringen.
Soweit von mir, im Anschluss findet ihr noch ein Beispiel sowie eine Liste von Links die nach Möglichkeit aktuell gehalten wird.
Coolcat
|
|
||
Vorhergehendes Tutorial: Tutorial_GLScene |
Nächstes Tutorial: - |
|
|
Schreibt was ihr zu diesem Tutorial denkt ins Feedbackforum von DelphiGL.com. Lob, Verbesserungsvorschläge, Hinweise und Tutorialwünsche sind stets willkommen. |
||
Beispiel
Eine Beispielanwendung die die hier vorgestellten Code-Schnippsel zusammenfügt ist hier verfügbar.
