Benutzer:Coolcat/Tutorial WebGL: Unterschied zwischen den Versionen

Aus DGL Wiki
Wechseln zu: Navigation, Suche
K (Fertig :))
K (→‎Links)
Zeile 239: Zeile 239:
 
** [http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf OpenGL ES Shading Language 1.0.17]
 
** [http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf OpenGL ES Shading Language 1.0.17]
 
* Portierung der NeHe OpenGL Tutorials zu WebGL:
 
* Portierung der NeHe OpenGL Tutorials zu WebGL:
−
** [http://learningwebgl.com/blog/?p=28 Lesson 1 – A triangle and a square]
+
** [http://learningwebgl.com/blog/?p=11 Lesson 0: Getting started]
−
** [http://learningwebgl.com/blog/?p=134 Lesson 2 – Adding colour]
+
** [http://learningwebgl.com/blog/?p=28 Lesson 1: A triangle and a square]
 +
** [http://learningwebgl.com/blog/?p=134 Lesson 2: Adding colour]
 
* Demos
 
* Demos
 
** [http://people.mozilla.com/~vladimir/webgl/spore/sporeview.html Spore Creature Viewer], ein Viewer für [http://www.collada.org/ COLLADA]-Meshes, allerdings nur für aus dem Spiel [http://www.spore.com/ Spore] exportierte Meshes.
 
** [http://people.mozilla.com/~vladimir/webgl/spore/sporeview.html Spore Creature Viewer], ein Viewer für [http://www.collada.org/ COLLADA]-Meshes, allerdings nur für aus dem Spiel [http://www.spore.com/ Spore] exportierte Meshes.

Version vom 17. Oktober 2009, 14:05 Uhr

WebGL ist der neue Standard für OpenGL im Browser. Der Standard ermöglicht es hardwarebeschleunigte 3D-Grafik im Browser darzustellen, ohne dabei auf spezielle Plugins angewiesen zu sein.

Dieses Tutorial ist ein Quick&Dirty Tutorial. Es werden nur die wesentlichen Besonderheiten von WebGL gegenüber anderen OpenGL-Anwendungen vorgestellt. Kenntnisse in JavaScript und OpenGL ES 2.0, also insb. GLSL, VBOs und der notwendigen linearen Algebra werden vorausgesetzt. Es sei darauf hingewiesen das WebGL im Augenblick noch hochgradig experimentell ist und es bisher auch nicht wirklich dokumentiert ist. Neben diesem Tutorial existieren auch einige andere Tutorials, aber ein Blick in den Quellcode der verfügbaren Demos kann nicht schaden sein.

Bisher wird der WebGL-Standard von den folgenden Browsern unterstützt:

WebGL muss über die Einstellung about:config -> webgl.enabled_for_all_sites aktiviert werden. Unter Windows kann es einige Probleme geben, wenn kein OpenGL verfügbar ist, in dem Fall muss in den Softwaremodus geschaltet werden.
  • WebKit (Nightly Build)
    • Google Chrome 4.0.221.8 (Nightly Build, siehe hier)
    • Safari (Nightly Build, ab ca. 23.9.2009)
  • ...bitte ergänzen...



Demos

Zunächst einmal ein paar Demos um die Funktionalität des eigenen Browsers zu testen.

webgl-sporeviewer.jpg
Spore Creature Viewer 		webgl-puls.jpg
Puls
webgl-escher-droste.jpg
Escher-Droste Effekt 		webgl-metatunnel.jpg
Metatunnel


WebGL

Context

Um WebGL nutzen zu können benötigt man zunächst einmal ein HTML5 Canvas-Element, welchem wir passenderweise die ID "canvas" geben. 

<html>
    <head>

    	<!-- ... -->

    </head>
    <body>
        <div style="text-align: center">
            <canvas id="canvas" width="640" height="480"></canvas>
        </div>
    </body>
</html>

Von diesem 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
try {
    // using Mozilla? (e.g. Firefox, ...) 
    if (!gl) { gl = canvas.getContext("moz-webgl"); } 
} catch (e) { }
try {
    // using Webkit? (e.g. Google Chrome, ...)
    if (!gl) { gl = canvas.getContext("webkit-3d"); } 
} catch (e) { }

if (!gl) {
    alert("No known OpenGL context detected! Is it enabled?");
    return;
}

Shader

In OpenGL ES 2.0 herrscht Shader-Zwang, eine feste Funktionspipeline existiert nicht. 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.getShaderi(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 and uniforms (optional)
gl.bindAttribLocation(program, 0, "aPosition");
gl.bindAttribLocation(program, 1, "aNormal");
gl.bindAttribLocation(program, 2, "aTexCoord");
gl.uniform1i(gl.getUniformLocation(program, "uTexture"), 0);

// linking
gl.linkProgram(program);
if (!gl.getProgrami(program, gl.LINK_STATUS)) {
    alert(gl.getProgramInfoLog(program));
}

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 vec3 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) {
        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 CanvasFloatArray die ein JavaScript-Array mit Werten in ein richtiges float-Array umwandelt. Dieses CanvasFloatArray wird dann an OpenGL übergeben. Zusätzlich gibt es auch die Klassen CanvasByteArray, CanvasShortArray und CanvasIntArray. Außerdem existieren auch CanvasUnsignedByteArray, CanvasUnsignedShortArray und CanvasUnsignedIntArray.

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, weshalb ein zusätzlicher Vertex notwendig ist. 

// define some vertexdata
var vertices = [
    // position XYZ, normal XYZ, texcoord UV => 8 floats per vertex
     0.0,  0.5,  0.0,  0.6,  0.0,  0.8,  0.5,  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,

    // add an additional vertex, this is an workaround for this bug:
    // https://bugzilla.mozilla.org/show_bug.cgi?id=521667
     0.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0 
];

// create VBO
var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new CanvasFloatArray(vertices), gl.STATIC_DRAW);

// setup vertex attributes for this interleaved VBO
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 8, 0); // position
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8, 3); // normal
gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8, 6); // texcoord

// draw the buffer
gl.drawArrays(gl.TRIANGLES, 0, 3);

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. 

function loadTexture(filename) {
    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();
    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+"'.");
    }
    image.src = filename;
    return texture;
}

Ressourcenmanagement

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.

Links

Abgerufen von „https://wiki.delphigl.com/index.php?title=Benutzer:Coolcat/Tutorial_WebGL&oldid=24211“