Podstawy Three.js/WebGL (wersja robocza)

Podstawy Three.js/WebGL (wersja robocza) 1. Bibliografia dla WebGL/Three.js Nie jest oczywiście kompletna, ale będzie uzupełniana sukcesywnie. Ostatnio pojawia się dość dużo książek z WebGL/Three.js. Niektóre są orientowane na programowanie niskopoziomowe w czystym WebGL z wykorzystaniem shaderów pisanych w GLSL, niektóre opierają wyłącznie na wysokopoziomowej bibliotece Three.js (tak, że biblioteki WebGL praktycznie nie widać), a inne starają się łączyć oba podejścia. Dwa podręczniki, przynajmniej w tytule, zapowiadają, że zajmują się budową gier. 1. Brian Danchilla, Beginning WebGL for HTML5, Apress, 2012. Czysty WebGL, shadery, Three.js, trochę fizyki. 2. Diego Cantor, Brandon Jones, WebGL Beginner's Guide, Packt, 2012. Czysty WebGL z shaderami. 3. Andreas Anyuru, Professional WebGL Programming, wrox,??. Czysty webgl, podstawy matematyczne, macierze, etc. 4. Tony Parisi, WebGL Up and Running, O'Reilly, 2012. Czysty WebGL + Three.js. Klasyczna pozycja. 5. Tony Parisi, Programming 3D Applications with HTML5 and WebGL, O'Reilly 2014. Podobna do poprzedniej książki, ale poszerzona. Jest polskie wydanie. 6. Sumeet Arora, WebGL Game Development, Packt, 2014. Czysty WebGL z shaderami + Three.js 7. Jos Dirksen, Learning Three.js: The JavaScript 3D Library for WebGL, Packt, 2013. oparta na przykładach. 8. Jos Dirksen, Three.js Essentials, Packt, 2014. W stylu poprzedniej książki Dirksena, ale o rok nowsza. Można potraktować jak rozszerzenia, ale niezależnie też. 9. Isaak Sukin, Game Development with Three.js, Packt, 2013. Tytuł mówi wszystko, nieduża książka (118 str), dość elementarna, ale fajna. 2. Użycie biblioteki three.js Zapisywanie kodu grafiki wyłącznie za pomocą funkcji WebGL i shaderów jest generalnie dosyć uciążliwe. W praktyce często staramy się uciec od takiego rozwiązania i poszukujemy bibliotek, które pozwalają na programowanie bardziej intuicyjne i oderwane o technicznych, niskopoziomowych aspektów grafiki 3D. WebGL oferuje przynajmniej kilka takich rozwiązań, które ułatwiają programowanie i radykalnie skracają kod. Z popularnych bibliotek możemy wymienić np.: GLGE (http://www.glge.org/), SceneJS (http://www.scenejs.org/), CubicVR (http://www.cubicvr.org/). PhiloGL (http://senchalabs.github.com/philogl/).

Każda z tych bibliotek ma nieco inną filozofię budowania i renderowania scen, ale wszystkie starają się realizować wysokopoziomowy i przyjazny dla użytkownika interfejs programisty. W dalszym ciągu będziemy się opierać na bibliotece three.js (https://github.com/mrdoob/three.js/), która w tej chwili wydaje się liderem graficznych bibliotek wysokopoziomowych dla WebGL. Budowa sceny z użyciem three.js W bibliotece three.js scena jest budowana z obiektów. Sama scena jest również obiektem kontenerem w którym umieszczane są inne obiekty. Podstawowymi obiektami są: Formy geometryczne, gotowe, zapewnione przez bibliotekę (takie jak sześcian, sfera, itp.) oraz tworzone ręcznie jako siatka wielokątów. Obiekty przedstawiające obserwatora sceny (camera), jego położenie, punkt na który patrzy, kąt widzenie, etc. Źródła światła, które oświetlają scenę. Przykład 01 Basic scene Jest to rzeczywiście podstawowa scena. W pierwszej chwili wygląda dosyć pusto, jednak zawiera elementy pozwalające ją szybko. Rzut oka na kod źródłowy pozwala dostrzec włączenie kilku dodatkowych bibliotek narzędziowych poza najważniejszą z punktu widzenia samej sceny three.js. Tymi bibliotekami są: jquery.js, stats.js, dat.gui.js. Nie będziemy się nimi głębiej zajmować (przynajmniej w tej chwili), zwrócimy jedynie uwagę na ich przeznaczenie. Zasadniczy fragment kodu przedstawia się następująco: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerwidth / window.innerheight, 0.1, 1000);... var ambientlight = new THREE.AmbientLight(0x0c0c0c); scene.add(ambientlight);... var spotlight = new THREE.SpotLight( 0xffffff );... scene.add( spotlight ); var planegeometry = new THREE.PlaneGeometry(60,40,1,1); var planematerial = new THREE.MeshLambertMaterial({color: 0xffffff); var plane = new THREE.Mesh(planeGeometry,planeMaterial);... scene.add(plane); Na początku generowane są nowe obiekty następujących klas: THREE.Scene() kontener, który zawiera kompletną scenę, THREE.PerspectiveCamera() użycie rzutowania perspektywicznego wraz z parametrami, W następnej kolejności dodane są obiekty reprezentujące atrybuty źródła światła: THREE.AmbientLight() kolor światła otoczenia THREE.SpotLight() kolor światła punktowego typu reflektor Powyższe obiekty nie mają żadnej formy graficznej

Kolejne obiekty są bardziej typowe: należy w nich określić geometrię oraz materiał powierzchni. Z tak przygotowanej pary tworzy się dopiero obiekt klasy Mesh kompletny obiekt na scenie. W przykładzie jest to: PlaneGeometry() obiekt geometryczny płaszczyzna reprezentowana przez siatkę MeshLambertMaterial() zdefiniowanie barwy odbicia rozproszonego od powierzchni. Mesh() zdefiniowanie obiektu składającego się z geometrii i powierzchni odbijającej światło w określony sposób (materiału). Wszystkie zdefiniowane obiekty powinny zostać dodane do sceny za pomocą metody add. W programie użyta jest biblioteka dat.gui.js, która tworzy menu w prawym górnym rogu okna i pozwala z niego wywoływać funkcje. W szczególności pod przyciskiem addcube jest wywoływana funkcja o tej nazwie. W niej jest generowany sześcian o losowo wybranych: położeniu, rozmiarze, barwie i rotacji, zaś na końcu funkcji dodawany do sceny metodą add: addcube() function: this.addcube = function() { var cubesize = Math.ceil((Math.random() * 3)); var cubegeometry = new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize); var cubematerial = new THREE.MeshLambertMaterial( {color: Math.random() * 0xffffff ); var cube = new THREE.Mesh(cubeGeometry, cubematerial); cube.castshadow = true; cube.name = "cube-" + scene.children.length; cube.position.x=-30 + Math.round( (Math.random() * planegeometry.width)); cube.position.y= Math.round((Math.random() * 5)); cube.position.z=-20 + Math.round((Math.random() * planegeometry.height)); scene.add(cube); this.numberofobjects = scene.children.length; ; Analogicznie, jak w przypadku płaszczyzny, sześcian jest zbudowany z geometrii i materiału powierzchni. Poszczególnym sześcianom jest nadawana unikatowa nazwa cube.name, dzięki czemu można się do każdego z nich indywidualnie odwołać np., żeby go przesunąć lub usunąć. Ponadto w zmiennej numberofobjects monitorowana jest bieżąca liczba sześcianów. Usuwanie sześcianów jest więc zrealizowane podobnie jak dodawanie w postaci funkcji: this.removecube = function() { var allchildren = scene.children; var lastobject = allchildren[allchildren.length-1]; if (lastobject instanceof THREE.Mesh) { scene.remove(lastobject); this.numberofobjects = scene.children.length; W podsumowaniu możemy też zauważyć, że w scenie możemy się odwołać do następujących atrybutów: Scene.Add(): dodawanie obiektu Scene.Remove(): usuwanie obiektu Scene.children(): wydobycie listy wszystkich obiektów Scene.getChildByName(): wydobycie obiektu o określonej nazwie Scene.getObjectByName(): wydobycie obiektu o określonej nazwie

Renderowanie odbywa się za pomocą funkcji: function render() { stats.update(); scene.traverse(function(e) { if (e instanceof THREE.Mesh && e!= plane ) { e.rotation.x+=controls.rotationspeed; e.rotation.y+=controls.rotationspeed; e.rotation.z+=controls.rotationspeed; ); requestanimationframe(render); renderer.render(scene, camera); W powyższym fragmencie jest użyta funkcja traverse(), która przebiega przez wszystkie wygenerowane obiekty typu mesh (poza plane) i wykonuje na nich określone działanie w tym wypadku obroty. Przykład 02 foggy scene W prosty sposób można zdefiniować dla całej sceny scene.fog - atrybut mgły. Można to zrobić na dwa sposoby. Pierwszym jest określenie koloru i granic mgły: scene.fog=new THREE.Fog( 0xffffff, 0.015, 100 ); Drugi i trzeci parameter określają współrzędną z bliższej i dalszej płaszczyzny ograniczającej mgłę. Drugi sposób podaje wykładnik funkcji eksponencjalnej, która wylicza gęstnienie mgły z odległością: scene.fog=new THREE.FogExp2( 0xffffff, 0.015 ); Przykład 03 forced materials Ten przykład pokazuje wymuszenie określonego materiału dla wszystkich wygenerowanych obiektów: scene.overridematerial = new THREE.MeshLambertMaterial({color: 0xffffff); Przykład 06 mesh properties We wszystkich obiektach klasy mesh można odwoływać się do następujących atrybutów/funkcji: Atrybut position Określa położenie x,y,z obiektu, względem obiektu rodzica. Zazwyczaj obiektem odniesienia jest Scene. Określa obrót obiektu wokół każdej z osi. Określa skalowanie obiektu wzdłuż każdej z osi. rotation scale translatex(amount) Przesuwa obiekt wzdłuż osi x o zadaną wielkość. translatey(amount) Przesuwa obiekt wzdłuż osi y o zadaną wielkość translatez(amount) Przesuwa obiekt wzdłuż osi z o zadaną wielkość Położenie obiektu można ustawić na trzy sposoby. Pierwszy:

cube.position.x=10; cube.position.y=3; cube.position.z=1; Drugi: Trzeci cube.position.set(10,3,1); cube.postion=new THREE.Vector3(10,3,1); Obiekty klasy Mesh mogą mieć też własności niezwiązane z transformacjami: Atrybut name castshadow Nadanie nazwy obiektowi Wyliczanie cienia rzucanego na obiekt (true, false) Oświetlenie w three.js Biblioteka three.js dostarcza kilku zdefiniowanych źródeł światła. Ogranicza swobodę w operowaniu światłami, ale też zdecydowanie je upraszcza. Stosując źródła światła i automatyczne obliczenie oświetlenia ograniczamy się do modelu oświetlenia lokalnego. Dodatkowe efekty i świetlenie globalne możemy uzyskać dopisując programy cieniujące (shadery) w GLSL. Dostępne są następujące rodzaje oświetlenia: Nazwa AmbientLight PointLight Spotlight DirectionalLight HemisphereLight AreaLight LensFlare Światło otoczenia Światło punktowe, typu żarówka Światło punktowe ograniczone do zadanego stożka Światło kierunkowe Kombinowane oświetlenie symulujące światło nieba i odblasku od podłoża. Świecąca powierzchnia o skończonych rozmiarach Przykład 09 AmbientLight Można je wprowadzić w następujący sposób: var ambicolor = "#0c0c0c"; var ambientlight = new THREE.AmbientLight(ambiColor); scene.add(ambientlight);... var controls = new function() { this.ambientcolor = ambicolor ; var gui = new dat.gui(); gui.addcolor(controls, 'ambientcolor').onchange(function(e) {

ambientlight.color = new THREE.Color(e); ); Przykład 10 PointLight Światło punktowe z świeci w każdym kierunku. Jego podstawowe atrybuty są następujące: Atrybut color Kolor światła RGB intensity Intensywność światła, domyślnie 1.0 distance position visible Odległość przy której intensywność spada do 0. Jeśli distance=0, to światło świeci nieskończenie daleko. var pointcolor = "#ccffcc"; var pointlight = new THREE.PointLight(pointColor); pointlight.distance = 100; scene.add(pointlight); Rozjaśnienie światła: pointlight.intensity = 2.4; sterowanie światłem z użyciem dat.gui var controls = new function() { this.intensity = 1; var gui = new dat.gui(); gui.add(controls, 'intensity', 0, 3).onChange(function (e) { pointlight.intensity = e; ); Przykład 11 SpotLight Światło typu SpotLight jest chętnie używane w oświetleniu scen, przedstawia często spotykane w rzeczywistości sytuacje, wygląda dość realistycznie. SpotLight oprócz atrybutów charakterystycznych dla PointLight ma również sporo własnych: Atrybut castshadow shadowcameranear shadowcamerafar shadowcamerafov Jeśli true świadło rzuca cienie Od jakiej odległości od źródła światła wyliczane są cienie Do jakiej odległości od źródła światła wyliczane są cienie W jakim kącie wyliczane są cienie

target Kierunek, w którym świeci SpotLight. shadowbias angle Kąt stożka światła (domyślnie /3) exponent Osłabienie intensywności oświetlenia przy oddalaniu się od środka onlyshadow Tylko cienie, bez żadnego oświetlenia shadowcameravisible Wyświetlają się linie pomocnicze pokazujące ostrosłup światła shadowdarkness stopień zaczernienia cienia shadowmapwidth Liczba pikseli użytych do tworzenia cienia shadowmapheight Liczba pikseli użytych do tworzenia cienia Wygenerowanie światła SpotLight jest proste: var pointcolor = "#ffffff"; var spotlight = new THREE.SpotLight(pointColor); spotlight.position.set(-40, 60, -10); spotlight.castshadow = true; spotlight.target = plane; scene.add(spotlight); Przykład 12 DirectionalLight Światło kierunkowe przejmuje te same atrybuty, jakie ma SpotLight, ale inaczej określa obszar oświetlenia nie jako ostrosłup, a prostopadłościan. W związku z tym pojawiają się nowe atrybuty, jak we fragmencie kodu: directionallight.shadowcameranear = 2; directionallight.shadowcamerafar = 200; directionallight.shadowcameraleft = -50; directionallight.shadowcameraright = 50; directionallight.shadowcameratop = 50; directionallight.shadowcamerabottom = -50; Atrybuty, funkcje i argumenty wybranych obiektów w three.js Scena Obiekt typu Scene jest kontenerem, w którym umieszczane są inne obiekty. W scenie jest określonych kilka atrybutów, do których odwołujemy się przez dostęp kropkowy. Scene() Atrybut add(object) Podstawowy atrybut, przy pomocy którego dołączamy obiekt do sceny. children Zwraca listę wszystkich obiektów dodanych do sceny. getchildbyname(name) Tworząc obiekt można mu nadać nazwę za pomocą atrybutu name. remove(object) Mając referencję do konkretnego obiektu, można go ze sceny usunąć. traverse(function)

fog overridematerial Dodaje mgłę do sceny Wymuszenie, żeby wszystkie obiekty w scenie miały ten sam materiał. Obiekty 3D Na scenie rozkładamy obiekty, które reprezentują kształty i formy, jakie chcemy zobaczyć oraz materiał z jakiego są wykonane. Kamera - Rzutowanie PerspectiveCamera() Argument fov Field of view, kąt widzenia wyrażony w stopniach. Praktyczne wartości: 45..60. aspect Stosunek szerokości do wysokości okna, dla którego wyliczane jest rzutowanie. Użycie systemowych wartości window.innerwidth/window.innerheight pozwala na odczytanie bieżących rozmiarów i dostosowanie do nich rzutowania. near Bliższa płaszczyzna odcięcia objętości widzenia. Praktyczna wartość: 0.1 far Dalsza płaszczyzna odcięcia objętości widzenia. Praktyczna wartość: 1000 Wbudowane obiekty geometryczne W bibliotece mamy dostępne następujące gotowe obiekty geometryczne, definiujące różne kształty: 2D: o PlaneGeometry o CircleGeometry o ShapeGeometry 3D: o CubeGeometry o SphereGeometry o CylinderGeometry o TorusGeometry o TorusKnotGeometry o PolyhedronGeometry o IcosahedronGeometry o OctahedronGeometry o TetraHedronGeometry Obiekty 2D PlaneGeometry() Argument width Szerokość prostokąta. Parametr obowiązkowy hight Wysokość prostokąta. Parametr obowiązkowy widthsegments Liczba segmentów, na jakie jest podzielona szerokość. Parametr opcjonalny, domyślnie 1. heightsegments Liczba segmentów, na jakie jest podzielona wysokość. Parametr opcjonalny,

domyślnie 1. CircleGeometry() Argument Radius Szerokość prostokąta. Parametr obowiązkowy Segments Liczba segmentów (trójkątów) aproksymujących koło. Parametr opcjonalny, min 3, domyślnie 8. Thetastart Początkowy kąt od którego zaczynamy rysowanie koła. Parametr opcjonalny, wartość od 0 do 2, domyślnie 0. Thetalength Kąt rysowania wycinka koła. Parametr opcjonalny, wartość od 0 do 2, domyślnie 2. Obiekty 3D CubeGeometry() Argument Width Szerokość prostopadłościanu. Długość krawędzi wzdłuż osi x Parametr obowiązkowy. Height Wysokość prostopadłościanu. Długość krawędzi wzdłuż osi y Parametr obowiązkowy. Depth Głębokość prostopadłościanu. Długość krawędzi wzdłuż osi z Parametr obowiązkowy. widthsegments Liczba segmentów, na jakie jest podzielona krawędź width. Parametr opcjonalny, domyślnie 1. Heightsegments Liczba segmentów, na jakie jest podzielona krawędź height. Parametr opcjonalny, domyślnie 1. depthsegments Liczba segmentów, na jakie jest podzielona krawędź width. Parametr opcjonalny, domyślnie 1. SphereGeometry() Argument radius Domyślnie 50 widthsegments Liczba południków. Min 3, domyślnie 8 heightsegments Liczba równoleżników+1. Min 2, domyślnie 6. phistart Początkowa wartość kąta wzdłuż równoleżników. Domyślnie 0. philength Kąt wzdłuż równoleżników. Domyślnie 2 thetastart Początkowa wartość kąta wzdłuż południków. Domyślnie 0. thetalength Kąt wzdłuż południków. Domyślnie CylinderGeometry() Argument radiustop Promień górnej podstawy. radiusbottom Promień dolnej podstawy. Height Wysokość cylindra. Domyślnie 100. radiussegments

heightsegments openended Tworzenie własnych obiektów geometrycznych Modyfikowanie istniejących obiektów Ładowanie obiektów z zewnątrz Eksportowanie obiektów i scen Interakcja ze sceną Użycie mechanizmów zdarzeń na stronach www