WebGL Tutorial mit three.js


Mit Hilfe von WebGL lassen sich 3D Animation, Spiele und Webseiten komplett in 3D ohne Plugin (wie bei Flash) realisieren. WebGL wird erst von wenigen Browser unterstützt, was der Hauptnachteil ist:

  • Firefox ab 4.0
  • Chrome ab 9.0
  • Safari (OS X) ab 5.1 (ist aber standardmäßig deaktiviert)
  • Opera, nur Beta-Builds
  • Internet Explorer, aus “Sicherheitsgründen” wahrscheinlich nie
  • Android Standard Browser, sehr viele
  • iOS, theoretisch ja ab iOS5.0, aber praktisch nur für iAds für schicke Werbung (typisch Apple, Hauptsache Geld verdienen)

Als Testbrowser zur Entwicklung empfiehlt sich Chrome aufgrund der Geschwindigkeit und der sehr guten Unterstützung. Google ist sehr bemüht WebGL voranzutreiben und bietet auf einer eignen Webseite eine sehr gute Übersicht über interessante Projekte.

Vom Standard her basiert WebGL auf OpenGL ES2.0, optimiert für mobil Anwendungen und deren niedrige Leistungsfähigkeit.

WebGL mit three.js

Zur 3D Programmierung im Browser mit WebGL sollten man auf jeden Fall ein leistungsstarkes Framework benutzen. Ich habe mich für three.js entschieden, da es das z.Z. populärste mit den meisten Tutorials und Erweiterungen ist. Laut Aussage der Entwickler ist es auch das einfachste Framework:

“The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies.”

Alle Feature gibt es hier.

Ein paar sehr intreressante Demos: Skin, Terrain, Text, Sammlung alles Demos.

Lizenz: MIT License

Dokumentation (Version 49): Doku, allgemein ist die Doku noch ausbaufähig und enthält nur Todos und keine richtige Hilfe. Ein dicker Nachteil. Es wird oft empfohlen sich anhand der mitgelieferten Samples in die benötigten Methoden und Objekte einzuarbeiten, was auch gut funktioniert.

Eine Übersicht über alle WebGL Frameworks findet man hier (z.Z. ca. 30 Stück). Der Hoster dieser Seite Khronos ist übrigends der Entwickler des WebGL Standards.

Installation und erstes Programm von three.js

Ist denkbar einfach, nur die Datei Three.js muss eingebunden werden. Diese gibt es hier zusammen  mit einem Haufen von sehr interessanten Demos und Tools (entpackt über 100mb).

<script src="Three.js"></script>
<script src="jQuery.js"></script>

<body>
<div id="container" width=''600px" height="600px"></div>

<script>
            var container = $("#content");

            var camera, scene, renderer;
            var mesh;

            init();
            animate();

            function init() {
                //create scene, basic Object for cameras, lights, and meshes
                scene = new THREE.Scene();

                // add camera to scene
                camera = new THREE.PerspectiveCamera( 70, container.innerWidth() / container.innerHeight(), 1, 1000 );
                camera.position.z = 400;
                scene.add( camera );

                //add Cube
                geometry = new THREE.CubeGeometry( 200, 200, 200 );                
                mesh = new THREE.Mesh( geometry);
                scene.add( mesh );

                //create Canvas Object
                renderer = new THREE.WebGLRenderer();
                renderer.setSize( container.innerWidth(), container.innerHeight() );
                container.append( renderer.domElement );

            }

            function animate() {

                requestAnimationFrame( animate );
                //rotate cube
                mesh.rotation.x += 0.005;
                mesh.rotation.y += 0.01;
                //render scene - redraw scene
                renderer.render( scene, camera );

            }
</script>
</body>