3D and 2D for web

Agus Susilo

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

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

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

Support

● Didukung luas pada web browser modern● Ketersediaan WebGL ini juga tergantung pada

faktor lain seperti dukungan dari GPU

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

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

Library and Ecosystem

● Library:– three.js– O3D– OSG.JS– GLGE

● Game Engine:– Unreal Engine 4– Unity 5

● 3D object import

Examples, Simple rotating Cube

var camera, scene, renderer;

var geometry, material, mesh;

init();

animate();

function init() {

camera = new THREE.PerspectiveCamera(75,

window.innerWidth/window.innerHeight, 1, 10000);

camera.position.z = 1000;

scene = new THREE.Scene();

geometry = new THREE.CubeGeometry(200, 200, 200);

material = new THREE.MeshBasicMaterial({ color: 0xff0000,

wireframe: true});

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

}

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/

Terima kasih

?

Semoga bermanfaat ;)