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
• InsideMa...
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
Goog...
Prednosti WebGL-a
• Nezavistan od platforme
• Ne traži plug-in
• Deo HTML5
• Standardizovan (Khronos Group)
• Visoke perfo...
Inicijalizacija WebGL-а
<canvas id="webgl-canvas"></canvas>
<script type="application/javascript">
var canvas = document.g...
Problemi sa WebGL-om
• WebGL API je vrlo bazičan i na niskom nivou
• Zahteva poznavanje 3D matematike
– matrice transforma...
THREE.js
• JavaScript biblioteka
http://threejs.org/
• Open source
https://github.com/mrdoob/three.js/
• Jedna datoteka
<s...
Zašto THREE.js
• Omogućava rad sa grafikom na višem nivou
• Objektno orijentisan
• Bogat pomoćnim alatkama i dodacima
• Sa...
Osnovni elementi THREE.js-a (1)
• Renderer
THREE.WebGLRenderer, THREE.CanvasRenderer
• Scena
THREE.Scene
• Kamere
THREE.Pe...
Osnovni elementi THREE.js-a (2)
• Modeli / 3D Objekti
THREE.Mesh, THREE.Line, THREE.Sprite, THREE.ParticleSystem
• Svetla
...
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.ge...
Materijali
MeshLambertMaterial MeshPhongMaterial MeshBasicMaterial
MeshNormalMaterial MeshDepthMaterial
Teksture
• Učitavanje
var texture =
new THREE.ImageUtils.loadTexture("texture.jpeg");
• Dodavanje
material.map = texture;
...
Animacija
• Za svaku promenu u sceni potrebno je ponovo
iscrtati celu scenu
• requestAnimationFrame()
function render() {
...
Animacija – Primer
var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshLambertMaterial({
map: n...
Senke
• Jednostavno u THREE.js
• Renderer
renderer.shadowMapEnabled = true
• Svetla
light.castShadow = true
• Objekti
obj....
Senke – Primer (1)
Senke – Primer (2)
var positions = [
new THREE.Vector3(-70, 80, 30),
new THREE.Vector3(0, 60, 0),
new THREE.Vector3(60, 10...
Senke – Primer (3)
var geomPlane = new THREE.PlaneGeometry(400, 400);
var matPlane = new THREE.MeshLambertMaterial();
matP...
Ostale mogućnosti biblioteke THREE.js
• Učitavanje 3D modela (Maya, SketchUp, Blender)
• Projector/Raycaster za detekciju ...
Primene
• Igre
• 3D Modelovanje
• Vizualizacije
• Komponente
Linkovi
• THREE.js - dokumentacija, primeri
http://threejs.org/
• THREE.js – izvorni kod
http://github.com/mrdoob/three.js...
@PSTechSerbia PSTech PSTechSerbia
posao@pstech.rs praksa@pstech.rs
Upcoming SlideShare
Loading in...5
×

WebGL and three.js - Web 3D Graphics

835
-1

Published on

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.

Published in: Software, Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
835
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WebGL and three.js - Web 3D Graphics

  1. 1. WebGL + THREE.js 3D grafika na mreži Marko Gaćeša StartIt 2014
  2. 2. Ko sam ja? • Zaposlen u PSTech-u 4 godine marko.gacesa@pstech.rs • Senior web developer Java, JavaScript, Linux • InsideMaps start up
  3. 3. 3D Virtual Tour 3D Room Editor Fotografije
  4. 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. 5. Prednosti WebGL-a • Nezavistan od platforme • Ne traži plug-in • Deo HTML5 • Standardizovan (Khronos Group) • Visoke performanse (hardversko iscrtavanje)
  6. 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. 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. 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. 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. 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. 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. 12. Dijagram klasa (1) Object3D Camera Scene Light Mesh Line PerspectiveCamera AmbientLight DirectionalLight
  13. 13. Dijagram klasa (2) Geometry SphereGeometry BoxGeometry Material MeshBasicMaterial MeshLambertMaterial PlaneGeometry… …
  14. 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. 15. Materijali MeshLambertMaterial MeshPhongMaterial MeshBasicMaterial MeshNormalMaterial MeshDepthMaterial
  16. 16. Teksture • Učitavanje var texture = new THREE.ImageUtils.loadTexture("texture.jpeg"); • Dodavanje material.map = texture; MeshBasicMaterial MeshLambertMaterial
  17. 17. Animacija • Za svaku promenu u sceni potrebno je ponovo iscrtati celu scenu • requestAnimationFrame() function render() { renderer.render(scene, camera); requestAnimationFrame(render); } render();
  18. 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. 19. Senke • Jednostavno u THREE.js • Renderer renderer.shadowMapEnabled = true • Svetla light.castShadow = true • Objekti obj.castShadow = true obj.receiveShadow = true
  20. 20. Senke – Primer (1)
  21. 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. 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. 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. 24. Primene • Igre • 3D Modelovanje • Vizualizacije • Komponente
  25. 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. 26. @PSTechSerbia PSTech PSTechSerbia posao@pstech.rs praksa@pstech.rs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×