WebGL

Hardwarebeschleunigung im Browser

Ein Projekt im Rahmen der Praxisprojekt Veranstaltung der FH Köln
Logo der FH Köln
Ausgearbeitet von Yasa Yener (11075087)
Betreut von Horst Stenzel

Agenda

Einleitung
Technologie
Frameworks
Performanz
Plattformen

Einleitung

Was ist WebGL?

WebGL: Schnittstelle zwischen Browser und Grafikchip

Einleitung

Seit wann existiert WebGL?

Khronos Group kontrolliert WebGL seit 2006
2009 wurden die Arbeiten begonnen
2011 wurde Version 1.0 der Spezifikation fertiggestellt
Basiert auf OpenGL ES 2.0

Einleitung

WebGL in Aktion

Technologie

Shaders

Wird von GPU ausgeführt
GLSL: c-ähnliche Syntax
WebGL benötigt Vertex- und Fragmentshader

Technologie

Shaders

Vertexshader definiert das "Wo?"
Fragmentshader definiert das "Was?"

Vertex- und Fragment-Shader — Abbildung: Rovshen Nazarov/John Galletly,
*Native browser support for 3d rendering and physics using webgl, html5 and javascript.*

Technologie

Rudimentärer Vertexshader

attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

void main(void) {
  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition , 1.0);
}

Model-View-Matrix: Objektkoord. zu Raum- und Kamerakoord.
Projektionsmatrix: Kamerakoord. zu Bildschirmk.

Technologie

Rudimentärer Fragmentshader

precision mediump float;

void main() {
  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

vec4 beinhaltet R, G, B und Alpha

Technologie

Renderingverfahren

OpenGL
- Immediate Mode (am langsamsten)
- Display Lists
- Vertex Arrays
- Vertex Buffer Objects (am schnellsten)
WebGL (OpenGL ES 2.0)
- Vertex Buffer Objects (VBOs)

Technologie

Immediate Mode

glBegin(GL_TRIANGLES);
  glVertex2f(0.0f, 0.0f);
  glVertex2f(1.0f, 0.0f);
  glVertex2f(0.5f, 1.0f);
glEnd();

Einfache Syntax
Langsam: GPU wird erst nach glEnd() aktiv.
In OpenGL ES 2.0 nicht mehr enthalten

Technologie

Vertex Buffer Objects

var triangleVertices = new Float32Array([
  0.0, 0.1, 0.0,
  0.1, -0.1, 0.0,
  -0.1, -0.1, 0.0
]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER , vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER , triangleVertices , gl.STATIC_DRAW);

gl.drawArrays(gl.TRIANGLES , 0, 3);

Vertices in serieller Form
Buffer wird generiert
Buffer wird gebunden
Buffer wird mit Daten gefüllt
Schnell: Einmal im Buffer, kann GPU unabhängig arbeiten

Frameworks

Frameworks abstrahieren technische Details und beschleunigen die Entwicklung.

Zwei Frameworks, zwei verschiedene Ansätze: Three.js und X3DOM

Frameworks

Three.js

Initiiert von "mrdoob" (Ricardo Cabello)
Über 250 Mitwirkende
Hauptziel: einfach und wiederverwendbar

Frameworks

Three.js

Renderer initialisieren

var renderer = new THREE.WebGLRenderer();
renderer.setSize(document.body.clientWidth,
	document.body.clientHeight);
document.body.appendChild(renderer.domElement);

Szene erzeugen

var scene = new THREE.Scene();

Einen Würfel der Szene hinzufügen

var cube = new THREE.Mesh(new THREE.CubeGeometry(50,50,50),
new THREE.MeshBasicMaterial({color: 0x999999 }));
scene.add(cube);

Frameworks

Three.js

Kamera erzeugen

var width = window.innerWidth;
var height = window.innerHeight;
var camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
camera.position.z = 300;

Szene und Kamera dem Renderer übergeben

renderer.render(scene , camera);

Frameworks

Three.js

Resultat

Frameworks

Three.js

Animation definieren

function render() {
  cube.rotation.y += 0.02;
  cube.rotation.z += 0.02;
  renderer.render(scene , camera);
  requestAnimationFrame(render);
}

und ausführen

render();

requestAnimationFrame() ruft die render-Function rekursiv auf.

Frameworks

Three.js

Resultat

Frameworks

Three.js

Licht hinzufügen

var light = new THREE.SpotLight();
light.position.set(0, 0, 300);
scene.add(light);

lichtreaktives Material verwenden

var cube = new THREE.Mesh(
  new THREE.CubeGeometry(50,50,50),
  //new THREE.MeshBasicMaterial({color: 0x999999 })
  new THREE.MeshLambertMaterial({color: 0x999999 })
);

Frameworks

Three.js

Resultat

Frameworks

Three.js

Weitere Beispiele sind auf threejs.org zu finden

Frameworks

X3DOM

Von Fraunhofer initiiert
Deklaratives X3D (ähnlich SVG)
X3DOM = X3D + DOM

Frameworks

X3DOM

Eine Beispielszene mit X3DOM

Frameworks

X3DOM

Resultat

Performanz

2D-Rendering

Rama C. Hoetzlein vergleicht die Performance beim Rendern von 2D Sprites

Hierzu vergleicht er folgende Technologien

WebGL
OpenGL
Flash
Canvas 2D

Performanz

2D-Rendering

2d performance graph — Ergebnisse des Versuchs von Rama C. Hoetzlein

Performanz

2D-Rendering

Daraus folgt

HW-Beschleunigung = deutlich schneller!
Unter ungünstigen Umständen: OpenGL < WebGL
Bei richtiger Ausnutzung ist natives OpenGL weiterhin schneller

Performanz

3D-Rendering

Der Versuch

Testszene in WebGL
Testszene in OpenGL
Bilder/Sekunde Rate ermitteln und vergleichen

Die Frameworks

WebGL = Three.js
OpenGL = Java + jMonkeyEngine

Performanz

3D-Rendering

Die Testszene

Viele texturierte Würfel
Ein Modell
Ein Licht folgt der Kamera
Ein Licht kreist um das Modell

Performanz

3D-Rendering

Probleme

Gleiche Einheiten werden unterschiedlich dargestellt
WebGL rendert maximal mit 60 Bildern pro Sekunde

Lösungen

Unterschiede via Trial & Error kompensieren
Anzahl der Würfel erhöhen bis Bilderrate einbricht

Performanz

3D-Rendering

Das Ergebnis

42fps vs. 122 fps — Links: WebGL mit 42 FPS, Rechts: OpenGL mit 122FPS

Die 3D-Szene lieferte somit eine 2,9x höhere Performance mit OpenGL.

Plattformen

Desktopsysteme und Notebooks

current IE, Firefox, Chrome, Safari and Opera support WebGL — Die aktuellen Versionen aller großen Browserhersteller untersützten WebGL