Przegld technologii Web3D

Referat ten ma na celu przedstawienie wspczesnych kierunkw rozwoju technologii 3D na potrzeby internetu. Omwione w nim zostan rozwizania konkurujce ze sob rynku.

Historia
Przez lata sie WWW przemienia si z prostego systemu wymiany dokumentw tekstowych w rozbudowane rodowisko aplikacyjne. W 1993 roku opublikowana zostaa pierwsza przegldarka internetowa o nazwie Mosaic, potrafica wywietla zarwno tekst jak i grafik. Klasyczne WWW opierao si jedynie na statycznych dokumentach zawierajcych sformatowany tekst, obrazki i proste formularze, poczonych ze sob hiperczami. Wcinicie odnonika powodowao pobranie z serwera i zaadowanie na nowo caej strony. Ju od samego pocztku istnienia WWW prbowano rozszerzy paskie dokumenty o moliwo wywietlania treci 3D. W 1994 roku powsta standard VRML pozwalajcy na ich prezentowanie. Ze wzgldu na moliwoci wczesnych komputerw, nie mogo by jednak mowy o renderingu zaawansowanych scen. Druga poowa lat 90' zaowocowaa wprowadzeniem technologii pozwalajcych na zdynamizowanie zawartoci strony WWW. Zaprezentowany zosta DHTML bdcy kombinacj czystego HTML'a, arkuszy stylw CSS oraz obiektowego modelu dokumentu (DOM). Dodatkowo powsta jzyk skryptowy JavaScript umoliwiajcy animacj wygldu dokumentw. Ponadto powstawa zaczy wtyczki do przegldarek rozszerzajce je o dodatkowe komponenty (Flash, RealPlayer, Quicktime, Aplety Java itp.). W 1997r zaprezentowano standard X3D oparty na XML bdcy nastpc VRML'a. Wprowadzona na pocztku XXI wieku technologia AJAX (Asynchronous JavaScript and XML) umoliwia wprowadzenie asynchronicznej komunikacji pomidzy klientem a serwerem, co dao uytkownikowi moliwo przegldania strony, zanim zostaa cakowicie zaadowana do okna przegldarki. Wprowadzenie asynchronicznoci znacznie zbliyo strony internetowe do aplikacji desktopowych pod wzgldem funkcjonalnoci. Tendencja ta spowodowaa wprowadzenie nowych platform, tzw. RIA (Rich Internet Application) takich jak Adobe AIR, Microsoft Silverlight itp. Opieraj si one na przeksztaceniu znanych technologii desktopowych na wersje obsugiwane za pomoc przegldarkowych wtyczek lub runtime'w.

Dynamiczny rozwj urzdze mobilnych pocign za sob konieczno dostosowania istniejcych standardw webowych do moliwoci przenonych systemw.

Problemy renderingu 3D czasu rzeczywistego w sieci

O ile rendering 3D w aplikacjach desktopowych jest na bardzo wysokim poziomie, to wci istnieje wiele przeszkd utrudniajcych wprowadzenie go do internetu.

Przepustowo cza
Dane potrzebne do wywietlania sceny 3D musz zosta pobrane z serwera i przesane do uytkownika za porednictwem internetu. Skomplikowane sceny, zawierajce du ilo wierzchokw oraz wysokiej tekstury rozdzielczoci mog powodowa zawieszanie si aplikacji podczas pobierania danych. Statystycznie aby nie zniechci uytkownika, czas adowania danych nie powinien przekracza 10s1.

Ograniczenia algorytmw
Tradycyjne algorytmy 3D uywane w desktopowych aplikacjach maj wymagania ktrych czsto przegldarki internetowe nie s w stanie speni. Jzyki skryptowe przetwarzane przez przegldarki s duo mniej wydajne od skompilowanego kodu. Algorytmy 3D czsto wymagaj wielowtkowoci, czego nie wspiera najpopularniejszy w internecie jzyk JavaScript.

Kompatybilno z przegldarkami
Na rynku istnieje wiele rnych przegldarek, ronych producentw, dziaajcych na rnych silnikach. Niewielka rnica pomidzy tymi silnikami moe spowodowa, e aplikacja nie bdzie dziaaa poprawnie, lub nawet w ogle nie zostanie uruchomiona. Niesie to za sob konieczno niezalenej konfiguracji i testowania pod ktem kadego z nich.

Wsparcie sprztowe
Podstaw dziaania wydajnych rendererw czasu rzeczywistego jest wsparcie sprztowe ze strony karty graficznej. Jednym z zaoe aplikacji internetowych jest dziaanie na jak najwikszej iloci komputerw niezalenie od ich konfiguracji hardware'owej. Wynika z tego konieczno przystosowania aplikacji do dziaania rwnie na starszym sprzcie. W efekcie nie ma
1 Jakob Nielsen, Usability Engineering

moliwoci korzystania z najnowszych technologii oferowanych przez wspczesne karty graficzne i naley korzysta z ich poprzednich generacji.

Wymagania webowych aplikacji 3D

1. Niezaleno od sprztu 2. Brak koniecznoci instalacji dodatkowych wtyczek po stronie klienta 3. Wsparcie ze strony bibliotek graficznych (np. OpenGL) w celu zwikszenia wydajnoci renderingu i podniesienia realizmu sceny. 4. Stabilno i atwo utrzymania na wielu rnych platformach, wsparcie dla rnych architektur i serwerw. 5. Intuicyjne GUI pozwalajce na atwe posugiwanie si apikacj

Stage3D
Stage 3D jest now technologi renderingu scen 2D i 3D wprowadzon przez firm Adobe. Stanowi cz wtyczki Adobe Flash Player 11. Cech charakterystyczn technologii jest niskopoziomowe API wspierane przez GPU pozwalajce na sprztow akceleracj procesu renderingu czasu rzeczywistego. Stanowi warstw poredniczc midzy kodem programu a fizycznym sprztem znajdujcym si na komputerze uytkownika. Wtyczka Flash Player jest najpopularniejsz wtyczk wystpujc w zdecydowanej wikszoci przegldarek internetowych. Wedug statystyk, w 2011 bya zainstalowana na 99% komputerw klasy PC2. Aby korzysta ze Stage3D nie jest wymagana instalacja adnych innych pluginw. Rola aplikacji flashowej podczas renderingu ogranicza si do definicji sceny 3D i przesania jej do pamici karty graficznej. GPU przetwarza scen w bardzo szybkim czasie i generuje gotowy obraz. Wsparcie sprztowe pozwala na renderowanie znacznie bardziej zoonych scen. Przetwarzajc dane wycznie na CPU, wtyczka pozwalaa na pynne wywietlanie sceny zbudowanej z okoo 4 tysicy wierzchokw. Wykorzystanie GPU zwikszyo ich liczb do ponad miliona. Stage3D udostpnia jedynie programowalny potok renderingu (programmable function pipeline). Oznacza to, e aby wyrenderowa scen nie wystarczy jedynie przesa j na GPU, jak to miao miejsce w fixed function pipeline. Konieczne jest zdefiniowanie wasnego shadera odpowiadajcego za
2 Na podstawie http://www.adobe.com/products/flashplatformruntimes/statistics.html (Stan z dnia 10.02.2012)

wyliczanie owietlenia. Niestety wtyczka wspiera jedynie przestarzay ju Shader Model 2.0 do ograniczony w stosunku do najnowszej wersji 4.0. Ograniczenia te dotycz zarwno iloci jak i typu wykonywanych instrukcji. W modelu 2.0 nie jest moliwe na przykad tworzenie ptli. Kolejn wad technologii jest konieczno dostosowywanie aplikacji do wielu rnych platform hardware'owtch w celu uzyskania maksymalnej wydajnoci na kadej z nich. Ze wzgldu na zaleno od sprztu, kady program powinien by take testowany na rnych urzdzeniach. Model wywietlania w technologii Flash bazuje na koncepcji scen (Stage) bdcych kontenerami przechowujcymi obiekty przeznaczone do wywietlania (DisplayObject). Wywietlanie treci 3D jest moliwe dziki dodaniu do modelu nowego typu sceny, zwanego Stage3D. Sceny 3D s umieszczone za gwn scen Flasha, co pozwala na atwe umieszczanie kontrolek GUI w aplikacji 3D. Omawiane warstwy mog nachodzi na siebie, jednak nie ma jeszcze moliwoci nakadania na nie maski przezroczystoci. Poniszy rysunek pokazuje w jaki sposb rozmieszczone s kolejne sceny.

Ilustracja 1: Organizacja scen w Stage3D Z poziomu kodu jzyka ActionScript sceny 3D s dostpne jako tablica bdca czci sceny gwnej. Poniszy kod pokazuje jak uzyska dostp do ntej sceny 3D: var stage:Stage3D = stage.stage3ds[n]; Obiekty 3D zorganizowane s w postaci siatek trjktw, kady trjkt stanowi zestaw punktw. Do reprezentacji tych danych su struktury Vertex Buffer i Index Buffer. Pierwsza z nich stanowi tablic atrybutw punktw skadajcych si na obiekt. Oprcz wsprzdnych w przestrzeni trjwymiarowej mog si tutaj znale take inne informacje (np. o kolorze wierzchoka). Druga struktura jest tablic indeksw wierzchokw skadajcych si na trjkty. Poniej przedstawiono sposb utworzenia przykadowych buforw:
var vertices:Vector<Number> ( [-0.3, -0.3, 0, 1, 0, 0, //x, y, z, r, g, b -0.3, 0.3, 0, 0, 1, 0, //x, y, z, r, g, b 0.3, 0.3, 0, 0, 0, 1, //x, y, z, r, g, b

0.3, -0.3, 0, 0, 0, 1] //x, y, z, r, g, b ); context3D.creareVertexBuffer(vertices, 4, 6); //4 wierzchoki, //6 atrybutw kady vertexBuffer.uploadFromVector(vertices, 0, 4); //offset: 0, wierzchoki var indices:Vector<uint>([0, 1, 2, 2, 3, 0]); context3D.creareIndexBuffer(6); //6 indeksw indexBuffer.uploadFromVector(indices, 0, 6);

Wywietlanie geometrii w Stage3D wymaga zdefiniowania shaderw. Adobe udostpnia dwa jzyki programowania shaderw. AGAL (Adobe Graphics Assembly Language) oraz Pixel Bender 3D.

AGAL
Jest jzykiem niskiego poziomu, zatem programowanie w nim moe by kopotliwe, jednak zyskujemy wiksz wydajno i kontrol nad przebiegiem renderingu. Kod napisany w tym jzyku nie wymaga wczeniejszej kompilacji, dziki czemu shadery mog by dynamicznie adowane w czasie dziaania programu. Skadnia jzyka opiera si na instrukcjach budowanych wedug poniszego wzorca:
<code> <destination>, <source1>, < source2 or sampler>

Pole <code> oznacza trzeliterowy kod instrukcji, natomiast pozostae pola odpowiadaj za okrelenie odpowiednio rejestrw docelowego (gdzie zapisany zostanie wynik operacji) oraz rdowych (z ktrych pobierane s wartoci argumentw funkcji). Poniej przedstawiono przykadowe funkcje Kod
mov add m44 tex

Opis destination = source1 destination = source1 + source2 Mnoenie macierzy 4x4 aduje koordynaty z soutce1 dla tekstury w source2

Rejestry s 128 bitowe i przechowuj po 4 liczby zmiennoprzecinkowe kady. Do poszczeglnych wartoci odnosimy si za pomoc selektorw x, y, z, w lub r, g, b, a. Istnieje sze typw rejestrw: 1. Rejestry atrybutw (Attribute registers) 8 rejestrw dla VertexShadera, zawieraj atrybuty podane w buforze wierzchokw. 2. Rejestry staych (Constant registers) 128 rejestrw dla VertexShadera i 28 PixelShadera, su do przekazywania dodatkowych parametrw do shaderw.

3. Rejestry tymczasowe (Temporary registers) po 8 rejestrw dla VertexShadera i PixelShadera, su do przechowywania tymczasowych wartoci (poniewa AGAL nie posiada zmiennych). 4. Rejestry wyjciowe (Output registers) po 1 rejestrze dla obu shaderw, su do zapisywania wynikw dziaania programu, dla VertexShadera jest to pooenie wierzchoka, a dla PixelShadera, jago kolor. 5. Rejestry przejciowe (Varying registers) 8 rejestrw, su do przekazywania parametrw z VertexShadera do PixelShadera, wartoci te s automatycznie interpolowane przez GPU. 6. Rejestry tekstur (Texture sampler registers) su do pobierania wartoci koloru z tekstury bazujc na wsprzdnych UV, dodatkowe parametry okrelaj wymiar tekstury, mip mapping, filtrowanie i powtarzanie.

O3D
Plugin stworzony przez firm Google, zbudowany z dwch warstw. Nisza stanowi wtyczk do przegldarki internetowej i zapewnia mapowanie obsugi geometrii oraz cieniowania na biblioteki OpenGL oraz DirectX. Warstwa wysza napisana w jzyku JavaScript udostpnia API pozwalajce na zarzdzanie scen. Obecnie Google zrezygnowa z dostarczania technologii w postaci wtyczki na rzecz biblioteki JavaScript dziaajcej w rodowisku WebGL. Pozwala na adowanie plikw Collada bezporednio do aplikacji.

WebGL
Technologia ta zostaa opublikowana 3 marca 2011r przez Khronos Group. Stanowi kontekst elementu canvas bdcego czci specyfikacji HTML5, zatem do jej uywania nie jest konieczna instalacja adnych dodatkowych wtyczek. Udostpnia API w jzyku JavaScript pozwalajce na dostp do niskopoziomowej biblioteki OpenGL ES 2.0. Dziki temu moliwa jest sprztowa akceleracja procesu renderingu. OpenGL ES 2.0 wywodzi si z OpenGL 2.0. Jest wielopatformowym API zapewniajcym funkcjonalnoci 2D i 3D przystosowanym do systemw

mobilnych (embedded systems). Stanowi niskopoziomowy interfejs pomidzy aplikacj a kart graficzn. Pozwala na programowanie shaderw w jzyku GLSL ES. Technologia jest obecnie internetowe: Firefox 4.0 Safari WebKit Nightly Builds Chrome Opera 12 alpha wspierana przez nastpujce przegldarki

Ograniczenia wersji ES
W celu uproszczenie specyfikacji oraz wyeliminowania redundancji, biblioteka zostaa pozbawiona wielu funkcji wystpujcych w poprzednich wersjach. Usunito tryb fixed function pipeline udostpniajcy domylny potok renderingu, pozwalajcy na wywietlanie sceny 3D bez koniecznoci programowania wasnego owietlenia. Przesta by wspierany paradygmat Begin/End, usunito take natychmiastowe funkcje takie jak Vertex czy Color oraz przeksztacenia (Translate, Rotate, Scale). Usunito predefiniowane macierze projekcji i widoku. W wersji ES 2.0 konieczne jest ich jawne zdefiniowanie oraz przesyanie na kart graficzn za pomoc parametrw Vertex Shadera.

Uycie WebGL
Kod aplikacji opartych na WebGL jest tworzony w jzyku JavaScript. Poniej zaproponowany zosta sposb utworzenia prostej sceny.

Pobieranie kontekstu
Pierwszym zadaniem aplikacji wykorzystujcej WebGL jest pobranie odpowiedniego kontekstu z elementu canvas, w ktrym ma odbywa si rendering. W obecnej wersji kontekst ten nosi nazw experimental_webgl, w pniejszym czasie zostanie zamieniony po prostu na webgl.
var glContext = canvas.getContext("experimental-webgl");

Inicjalizacja shaderw
Ze wzgldu na brak wsparcia trybu fixed pipeline, kolejnym krokiem jest inicjalizacja shaderw. Aby tego dokona konieczne stworzenie obiektw vertex

i fragment shadera i skopiowanie do nich kodu zapisanego w postaci acuchw znakw. Tak stworzone shadery s kompilowane, a nastpnie czone w program wykonywany na karcie graficznej. Kod omowionej procedury przedstawia poniszy listing:
var vertexShader = glContext.createShader(glContext.VERTEX_SHADER); glContext.shaderSource(vertexShader, vertexShaderScript.text); glContext.compileShader(vertexShader); var fragmentShader = glContext.createShader(glContext.FRAGMENT_SHADER); glContext.shaderSource(fragmentShader, fragmentShaderScript.text); glContext.compileShader(fragmentShader); var shaderProgram = glContext.createProgram(); glContext.attachShader(shaderProgram, vertexShader); glContext.attachShader(shaderProgram, fragmentShader); glContext.linkProgram(shaderProgram);

Aby wykonanie shadera dao jakikolwiek efekt, naley mu wysa dane wejciowe (wsprzdne, kolor, wektor normalny itp.). Istnieje kilka typw parametrw: 1. uniform parametr globalny, jego warto nie zmienia si podczas przetwarzania obiektu 3d, wszystkie parametry tego typu s tylko do odczytu 2. arrtibute suy do przekazywania parametrw z aplikacji do vertex shadera 3. varying parametr przekazywany z vertex shadera do fragment shadera, warto jest interpolowana dla kadego piksela 4. const parametr tylko do odczytu Aby mie moliwo przekazywania parametrw trzeba je najpierw zadeklarowa i zezwoli na uycie. Poniszy listing pokazuje sposb deklaracji parametrw:
shaderProgram.aVertexPosition = glContext.getAttribLocation(shaderProgram, "vertexPosition"); glContext.enableVertexAttribArray(shaderProgram.aVertexPosition); shaderProgram.uModelViewMatrix = glContext.getUniformLocation(shaderProgram, "modelViewMatrix");

Tak zadeklarowane parametry bd widoczne wewntrz shaderw pod nazwami vertexPosition i modelViewMatrix. Poniej przedstawiono kod uytych shaderw:
attribute vec3 vertexPosition;

attribute vec4 vertexColor; uniform mat4 modelViewMatrix; uniform mat4 perspectiveMatrix; varying vec4 vColor; void main(void) { gl_Position = perspectiveMatrix * modelViewMatrix * vec4(vertexPosition, 1.0); vColor = vertexColor; } precision mediump float; varying vec4 vColor; void main(void) { gl_FragColor = vColor; }

Tworzenie geometrii
OpenGL ES 2.0 nie udostpnia funkcji pozwalajcych na bezporednie tworzenie wierzchokw (glVertex). Zamiast tego, aby utworzy model, konieczne jest stworzenie odpowiednich buforw przechowujcych wierzchoki, indeksy, kolory itp. Kady uywany bufor naley powiza oraz zainicjalizowa. Poniszy listing przedstawia sposb utworzenia bufora wierzchokw trjkta.
var vertexBuffer = glContext.createBuffer(); glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer); var vertices = new Float32Array([ 0.0, 1.0, 4.0, -1.0, -1.0, 4.0, 1.0, -1.0, 4.0 ]); glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW);

Rendering sceny
Na przygotowanie sceny do wywietlania obiektw 3D skada si kilka czynnoci: 1. Wyczyszczenie uywanych buforw 2. Wybr funkcji uywanej do testowania gbokoci 3. Zadeklarowanie rzutni i przygotowanie macierzy widoku

W omawianej bibliotece nie istniej predefiniowane funkcje generujce macierze widoku, konieczno ich przygotowania spada na programist. Macierz rzutu perspektywicznego ma nastpujc posta:

R=

2n rl 0 0 0

0 2n tb 0 0

r+ l 0 r l t+ b 0 tb ( f + n) 2fn f n f n 1 0

i zostaa zaimplementowana za pomoc poniszej funkcji:

function PerspectiveMatrix(FOV, aspectRatio, nearPlane, farPlane) { var top = nearPlane * Math.tan(FOV * Math.PI / 360.0); var bottom = -top; var right = top * aspectRatio; var left = -right; var a = (right + left) / (right - left); var b = (top + bottom) / (top - bottom); var c = (farPlane + nearPlane) / (farPlane - nearPlane); var d = (2 * farPlane * nearPlane) / (farPlane - nearPlane); var x = (2 * nearPlane) / (right - left); var y = (2 * nearPlane) / (top - bottom); var matrix = [ x, 0, a, 0, 0, y, b, 0, 0, 0, c, d, 0, 0, -1, 0 ]; return matrix; }

Majc przygotowan scen, mona przystpi do jej renderingu. W tym celu przesyamy do shadera macierze widoku oraz parametry a nastpnie wywoujemy funkcj rysujc drawArrays lub drawElements.
glContext.drawArrays(glContext.TRIANGLES, 0, vertexBuffer.itemsCount); glContext.flush();

Bezpieczestwo
Aplikacje wykorzystujce technologi WebGL, napisane w jzyku JavaScript, kadorazowo pobierane s na maszyn uytkownika. Daje to moliwo ogldania ich kodu rdowego, co jest niepodane w przypadku programw komercyjnych.

Programowanie w czystym WebGL jest bardzo kopotliwe i niewygodne ze wzgldu na niskopoziomowy charakter. Pomimo tego, e jest to bardzo wiea technologia, powstao ju wiele silnikw pozwalajcych na proste budowanie skomplikowanych scen i animacji. Poniej wymieniono kilka przykadowych bibliotek: X3DOM (uywa flasha C3DL O3D Kuda

Balder
Biblioteka do Silverlighta pozwalajca na rendering scen 3D Zintegrowana z jzykiem XAML Zaimplementowane podstawowe prymitywy, obsuga zoonych modeli w formacie ASE (wbudowany parser do tych plikw), atwy eksport modeli z 3dsmaxa Zaimplementowana kamera, atwa i intuicyjna obsuga (ustawiamy pozycj, punkt patrzenia i pole widzenia) Obsuga sprite'w Zaimplementowany Skybox Wbudowane wiata: punktowe, kierunkowe, zwizane z kamer (wieci w kierunku patrzenia) BRAK moliwoci pisania wasnych shaderw, obsuga materiaw (ambient, diffuse, specular) oraz tekstur, cieniowanie paskie, Gourauda, wireframe Brak wsparcia ze strony GPU

Silverlight 5
Uywa XNA API, obsuguje ShaderModel 2.0 Nie ma moliwoci programowej emulacji shaderw. Uytkownik musi mie kart graficzn wspierajc XNA / ShaderModel 2.0

Umoliwia wywoywanie funkcji z lokalnych bibliotek dll Dziaa tylko pod Windowsem Obsuga plikw FBX (parser wbudowany w XNA)

Formaty plikw
VRML X3D Collada

Literatura
1. Taivalsaari A., Mikkonen T., The Web as an Application Platform: The Saha Continues, 37th EUROMICRO Conference on Software Engineering and Advanced Application 2. Sixto Ortiz Jr., Is 3D Finally Ready for the Web?, Computer, 2010 3. Huang Zhanpeng, Gong Guanghong, Han Liang, NetGL: A 3D Graphics Framework for Next Generation Web, Third International Conference on multimedia Information Networking and Security, 2011 4. Francisco Luengo, Mariela Contreras, Aurely Leal, Andres Iglesias, Interactive 3D Graphics Applications Embedded in Web Pages, Computer Graphics, Imaging and Visualisation, 2007 5. Adobe Developer http://www.adobe.com/devnet/flashplayer/articles/how-stage3dworks.html (Stan z 10.02.2012) Center,

6. Adobe Developer Center, http://www.adobe.com/devnet/flashplayer/articles/what-is-agal.html (Stan z 10.02.2012) 7. Balder 3D engine for Silverlight, http://balder.codeplex.com (Stan z 11.02.2012) 8. Microsoft Silverlight, http://www.silverlight.net/learn/overview (Stan z 11.02.2012)

9. https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation