contoh penggunaan webgl, helloracer
back to the topic, apa itu webgl?.
Menurut wikipedia.
WebGL (Web Graphics Library) adalah JavaScript API untuk rendering grafis 3D interaktif dan grafis 2D dalam browser web yang kompatibel tanpa menggunakan plug-in. WebGL terintegrasi sepenuhnya ke semua standar web browser yang memungkinkan penggunaan percepatan GPU fisika dan pengolahan gambar dan efek sebagai bagian dari kanvas halaman web. Elemen WebGL dapat dicampur dengan elemen HTML lainnya dan composited dengan bagian-bagian lain dari latar belakang halaman atau halaman. WebGL program terdiri dari kode kontrol ditulis dalam JavaScript dan kode shader yang dijalankan pada komputer Graphics Processing Unit (GPU). WebGL dirancang dan dipelihara oleh Kelompok Khronos non-profit.Jadi, intinya dengan webgl kita bisa menampilkan objek 3d kedalam web dengan bantuan javascript dan html5. dalam kesempatan ini kita akan menggunakan three.js.
Untuk three.js bisa di dilihat di githubnya . Walaupun ukurannya besar tetapi didalamnya dilihat banyak contoh penggunaan three js bisa dibuka di browser.
Saya akan share sedikit cara penggunaan three.js, maklum baru belajar juga... heheh
sebelumnya kita siapkan dulu file three.js dan jquery, baik silahkan coba di kodingan dari text editor dan langsung check it out..
<!DOCTYPE html>
<html>
<head>
<title>Belajar Three.js</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output">
</div>
<!-- Kita akan bermain three js nya disini -->
<script type="text/javascript">
$(function () {
// Membuat scene yang merangkum pencahayaan dan kamera.
var scene = new THREE.Scene();
// Disini kita akan membuat camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// Membuat render serta ukuran full screen dengan menggunakan window.innerwidth dan
//window.innerheight
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEDEDED, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
// Membuat Objek Lantai
var planeGeometry = new THREE.PlaneGeometry(60,20);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.receiveShadow = true;
// mengatur posisi Lantai
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15
plane.position.y=0
plane.position.z=0
// Memasukkan lantai kedalam scene
scene.add(plane);
// Membuat kubus,
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
// mengatur posisi kubus
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0;
// Memasukkan kubus kedalam scene scene.add(cube); //Membuat objek Bola
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
// Mengatur posisi bola
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2;
sphere.castShadow=true;
// Memasukkan bola ke scene
scene.add(sphere);
//Mengatur posisi kamera
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// Menambahkan cahaya dengan melihat bayangan dari objek
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -10, 80, -10 );
spotLight.castShadow = true;
scene.add( spotLight );
//Memasukkan render ke dalam html, tepatnya kedalam tag yg mempnyai id = WebGL-output
//yang telah kita buat sebelumnya
// add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement);
// Memanggil fungsi render dan memasukkan scene dan camera kedalam render
renderer.render(scene, camera);
});
</script>
</body>
</html>
maka hasilnya
komentar dikit, kalo yang lama itu mungkin openGL kali ya?, kalo webGL ini tergolong baru, untuk ukuran kita, sebenarnya ada 2 macam jenis rendered dgn menggunakan three.js pertama dengan memanfaatkan level software saja, yang kedua dengan memanfaatkan library openGL (dengan bantuan akselerasi perangkat keras).
ReplyDeletePost a Comment