WebGL and three.js - Web 3D Graphics

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

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

3D Virtual Tour
3D Room Editor
Fotografije

Š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

Prednosti WebGL-a
• Nezavistan od platforme
• Ne traži plug-in
• Deo HTML5
• Standardizovan (Khronos Group)
• Visoke performanse (hardversko iscrtavanje)

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>

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

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)

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

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

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

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

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

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>

Materijali
MeshLambertMaterial MeshPhongMaterial MeshBasicMaterial
MeshNormalMaterial MeshDepthMaterial

Teksture
• Učitavanje
var texture =
new THREE.ImageUtils.loadTexture("texture.jpeg");
• Dodavanje
material.map = texture;
MeshBasicMaterial MeshLambertMaterial

Animacija
• Za svaku promenu u sceni potrebno je ponovo
iscrtati celu scenu
• requestAnimationFrame()
function render() {
requestAnimationFrame(render);
}
render();

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() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.02;
requestAnimationFrame(render);
}
render();

Senke
• Jednostavno u THREE.js
• Renderer
renderer.shadowMapEnabled = true
• Svetla
light.castShadow = true
• Objekti
obj.castShadow = true
obj.receiveShadow = true

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

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

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

Primene
• Igre
• 3D Modelovanje
• Vizualizacije
• Komponente

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/

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

WebGL and three.js - Web 3D Graphics

More Related Content

What's hot (20)

Similar to WebGL and three.js - Web 3D Graphics (9)

Recently uploaded (20)

WebGL and three.js - Web 3D Graphics