1. 3D and 2D for web
Agus Susilo

2. WebGL?
● Javascript API untuk merender grafis 3D dan 2D
pada browser web yang kompatibel tanpa
menggunakan plugin
● Integrasi penuh ke semua standar web browser
● Penggunaan GPU fisik
● Dapat di campur dengan elemen HTML

3. Design
● WebGL di bangun berdasarkan pada OpenGL
ES 2.0 yang menyediakan API untuk grafis 3D
● Menggunakan elemen kanvas pada HTML5
● Dapat di akses melalui DOM interface

4. History
● WebGL tumbuh dari eksperimen Canvas 3D
dimulai oleh Vladimir Vukicevic di Mozilla,
● Pertama kali di demokan pd tahun 2006
● Tahun 2009 Consortium Khronos Group
memulai kelompok kerja WebGL
● Yang di dukung oleh Apple, Google, Mozilla
● Aplikasi pertama yaitu Google Maps dan
Zygote Body

5. Support
● Didukung luas pada web browser modern
● Ketersediaan WebGL ini juga tergantung pada
faktor lain seperti dukungan dari GPU

6. Desktop Browsers
● Google Chrome, support sejak versi 9
● Mozilla Firefoz, versi 4.0 ke atas
● Safari, versi >= 6 pada Lion, Mountain Lion,
Safari 5.1 Snow Leopard,
disabled by default
● Opera, versi 11 dan 12, disabled by default
● Internet Explorer, partially supported in IE 11

7. Mobile Browsers
● Nokia N900, Web browser MicroB
● Blackberry playbook, OS 2.0
● Firefox mobile
● Firefox OS
● Google Chrome >= 25
● Opera Mobile >= 12
● Tizen 1.0
● Ubuntu Touch

8. Library and Ecosystem
● Library:
– three.js
– O3D
– OSG.JS
– GLGE
● Game Engine:
– Unreal Engine 4
– Unity 5
● 3D object import

9. Examples, Simple rotating Cube
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new
THREE.PerspectiveCamera(75,

10. Examples, Simple rotating Cube
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}

11. Demos
● http://stemkoski.github.io/Three.js/
● http://threejs.org/
● http://www.glge.org/category/demos/
● http://osgjs.org/#examples
● http://www.chromeexperiments.com/webgl/

12. Terima kasih
?
Semoga bermanfaat ;)