WebGL + THREE.js3D grafika na mreži

Marko Gaćeša

StartIt 2014

Ko sam ja?

• Zaposlen u PSTech-u 4 godinemarko.gacesa@pstech.rs

• Senior web developerJava, 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 4Google Chrome 9Safari 5.1Internet Explorer 11Opera 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 bibliotekahttp://threejs.org/

• Open sourcehttps://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)

• RendererTHREE.WebGLRenderer, THREE.CanvasRenderer

• ScenaTHREE.Scene

• KamereTHREE.PerspectiveCamera, THREE.OrthographicCamera

• GeometrijeTHREE.PlaneGeometry, THREE.BoxGeometry, THREE.SphereGeometry, THREE.CylinderGeometry, ...

• MaterijaliTHREE.MeshBasicMaterial, THREE.MeshLambertMaterial, THREE.MeshPhongMaterial, THREE.ShaderMaterial, ...

Osnovni elementi THREE.js-a (2)

• Modeli / 3D ObjektiTHREE.Mesh, THREE.Line, THREE.Sprite, THREE.ParticleSystem

• SvetlaTHREE.AmbientLight, THREE.DirectionalLight, THREE.SpotLight, THREE.PointLight

• TekstureTHREE.Texture

• MatematikaTHREE.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čitavanjevar texture = new THREE.ImageUtils.loadTexture("texture.jpeg");

• Dodavanjematerial.map = texture;

MeshBasicMaterial MeshLambertMaterial

Animacija

• Za svaku promenu u sceni potrebno je ponovo iscrtati celu scenu

• requestAnimationFrame()

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

Senke

• Jednostavno u THREE.js• Rendererrenderer.shadowMapEnabled = true

• Svetlalight.castShadow = true

• Objektiobj.castShadow = trueobj.receiveShadow = true

Senke – Primer (1)

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, primerihttp://threejs.org/

• THREE.js – izvorni kodhttp://github.com/mrdoob/three.js/

• Primerihttp://stemkoski.github.io/Three.js/

@PSTechSerbia PSTech PSTechSerbia

posao@pstech.rs praksa@pstech.rs