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.

1. WebGL + THREE.js
3D grafika na mreži
Marko Gaćeša
StartIt 2014

2. Ko sam ja?
• Zaposlen u PSTech-u 4 godine
marko.gacesa@pstech.rs
• Senior web developer
Java, JavaScript, Linux
• InsideMaps start up

3. 3D Virtual Tour
3D Room Editor
Fotografije

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

10. Osnovni elementi THREE.js-a (1)
• Renderer
THREE.WebGLRenderer, THREE.CanvasRenderer
• Scena
THREE.Scene
• Kamere
THREE.PerspectiveCamera, THREE.OrthographicCamera
• Geometrije
THREE.PlaneGeometry, THREE.BoxGeometry,
THREE.SphereGeometry, THREE.CylinderGeometry, ...
• Materijali
THREE.MeshBasicMaterial, THREE.MeshLambertMaterial,
THREE.MeshPhongMaterial, THREE.ShaderMaterial, ...

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, ...

12. Dijagram klasa (1)
Object3D
Camera Scene Light Mesh Line
PerspectiveCamera AmbientLight DirectionalLight

13. Dijagram klasa (2)
Geometry
SphereGeometry BoxGeometry
Material
MeshBasicMaterial MeshLambertMaterial
PlaneGeometry…
…

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>

15. Materijali
MeshLambertMaterial MeshPhongMaterial MeshBasicMaterial
MeshNormalMaterial MeshDepthMaterial

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

20. Senke – Primer (1)

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
• …

24. Primene
• Igre
• 3D Modelovanje
• Vizualizacije
• Komponente

25. Linkovi
• THREE.js - dokumentacija, primeri
http://threejs.org/
• THREE.js – izvorni kod
http://github.com/mrdoob/three.js/
• Primeri
http://stemkoski.github.io/Three.js/

26. @PSTechSerbia PSTech PSTechSerbia
posao@pstech.rs praksa@pstech.rs