Using the potential of WebGL in web browser in a simple way with three.js javascript library. Practical demonstration of a WebGL app developed for a Silicon Valley startup.
4. Šta je WebGL?
• JavaScript API
• Baziran na OpenGL ES 2.0
• HTML5 <canvas>
• Podrška u browser-ima:
Mozilla Firefox 4
Google Chrome 9
Safari 5.1
Internet Explorer 11
Opera 12
5. Prednosti WebGL-a
• Nezavistan od platforme
• Ne traži plug-in
• Deo HTML5
• Standardizovan (Khronos Group)
• Visoke performanse (hardversko iscrtavanje)
6. Inicijalizacija WebGL-а
<canvas id="webgl-canvas"></canvas>
<script type="application/javascript">
var canvas = document.getElementById("webgl-canvas");
var gl;
try {
gl = canvas.getContext("webgl") ||
canvas.getContext("experimental-webgl");
} catch (e) {
gl = null;
}
if (gl === null) {
alert("WebGL is not supported!");
return;
}
gl.clearColor(0.4, 0.5, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
7. Problemi sa WebGL-om
• WebGL API je vrlo bazičan i na niskom nivou
• Zahteva poznavanje 3D matematike
– matrice transformacije i projekcije
– množenje matrica i vektora
• Zahteva pisanje šejdera
8. THREE.js
• JavaScript biblioteka
http://threejs.org/
• Open source
https://github.com/mrdoob/three.js/
• Jedna datoteka
<script type="application/javascript" src="three.min.js"></script>
– three.js (834 kB)
– three.min.js (420 kB)
– gzipped three.min.js (101 kB)
9. Zašto THREE.js
• Omogućava rad sa grafikom na višem nivou
• Objektno orijentisan
• Bogat pomoćnim alatkama i dodacima
• Sakriva složenu matematiku
• Aktivno se razvija – nova verzija izlazi svakih
mesec dana (poslednja verzija je r67)
• Popularan
11. Osnovni elementi THREE.js-a (2)
• Modeli / 3D Objekti
THREE.Mesh, THREE.Line, THREE.Sprite, THREE.ParticleSystem
• Svetla
THREE.AmbientLight, THREE.DirectionalLight, THREE.SpotLight,
THREE.PointLight
• Teksture
THREE.Texture
• Matematika
THREE.Math, THREE.Vector2, THREE.Vector3, THREE.Matrix3,
THREE.Matrix4, THREE.Ray, THREE.Box3, THREE.Sphere,
THREE.Plane, ...
14. THREE.js – Hello World
<canvas id="webgl-canvas"></canvas>
<script type="application/javascript">
var canvas = document.getElementById("webgl-canvas");
var renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
renderer.setClearColor(new THREE.Color(0x000000), 1);
renderer.setSize(document.body.offsetWidth, document.body.offsetHeight);
var camera =
new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 1, 200);
camera.position.set(70, 80, 90);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var scene = new THREE.Scene();
var cube = new THREE.Mesh(
new THREE.BoxGeometry(50, 50, 50),
new THREE.MeshNormalMaterial());
scene.add(cube);
renderer.render(scene, camera);
</script>
16. Teksture
• Učitavanje
var texture =
new THREE.ImageUtils.loadTexture("texture.jpeg");
• Dodavanje
material.map = texture;
MeshBasicMaterial MeshLambertMaterial
17. Animacija
• Za svaku promenu u sceni potrebno je ponovo
iscrtati celu scenu
• requestAnimationFrame()
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
18. Animacija – Primer
var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshLambertMaterial({
map: new THREE.ImageUtils.loadTexture("pstech-logo.png")
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var lightAmb = new THREE.AmbientLight(0x404040);
scene.add(lightAmb);
var lightDir = new THREE.DirectionalLight(0xFFFFFF, 0.5);
lightDir.position.set(0, 200, 100);
scene.add(lightDir);
function render() {
renderer.render(scene, camera);
cube.rotation.x += 0.01;
cube.rotation.y += 0.02;
requestAnimationFrame(render);
}
render();
19. Senke
• Jednostavno u THREE.js
• Renderer
renderer.shadowMapEnabled = true
• Svetla
light.castShadow = true
• Objekti
obj.castShadow = true
obj.receiveShadow = true
21. Senke – Primer (2)
var positions = [
new THREE.Vector3(-70, 80, 30),
new THREE.Vector3(0, 60, 0),
new THREE.Vector3(60, 100, -30),
new THREE.Vector3(0, 110, 65),
new THREE.Vector3(0, 120, -50)];
var cubes = [];
for (var i = 0; i < positions.length; i++) {
var cube = new THREE.Mesh(geomCube, matCube);
cube.position = positions[i];
cube.castShadow = true;
cube.receiveShadow = true;
cube.rotation.x = Math.random() * Math.PI;
cube.rotation.y = Math.random() * Math.PI;
cubes.push(cube);
scene.add(cube);
});
22. Senke – Primer (3)
var geomPlane = new THREE.PlaneGeometry(400, 400);
var matPlane = new THREE.MeshLambertMaterial();
matPlane.color = new THREE.Color(0x004488);
var plane = new THREE.Mesh(geomPlane, matPlane);
plane.lookAt(new THREE.Vector3(0, 100, 0));
plane.receiveShadow = true;
scene.add(plane);
var lightDir = new THREE.DirectionalLight(0xFFFFFF, 0.5);
lightDir.position.set(-100, 200, 100);
lightDir.shadowMapWidth = 2048;
lightDir.shadowMapHeight = 2048;
lightDir.castShadow = true;
scene.add(lightDir);
23. Ostale mogućnosti biblioteke THREE.js
• Učitavanje 3D modela (Maya, SketchUp, Blender)
• Projector/Raycaster za detekciju lokacije
miša u 3D sceni
• Teksture za bump, normal i specular mape
• THREE.ShaderMaterial
• Fog za efekat magle u 3D sceni
• …