webgl and three.js - web 3d graphics
DESCRIPTION
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.TRANSCRIPT
WebGL + THREE.js3D grafika na mreži
Marko Gaćeša
StartIt 2014
Ko sam ja?
• Zaposlen u PSTech-u 4 [email protected]
• 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