WebGL adalah API Javascript untuk merender grafis 3D dan 2D di browser web tanpa plugin, yang menggunakan GPU dan dapat mencampur konten HTML. WebGL dibangun berdasarkan OpenGL ES 2.0 dan menggunakan elemen kanvas HTML5, serta didukung luas di browser modern untuk desktop dan mobile.

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 ;)