Wprowadzenie do WebGL
|
|
- Gabriel Marek
- 9 lat temu
- Przeglądów:
Transkrypt
1 Wprowadzenie do WebGL Monika Falarz, Grzegorz Jaśko, Patryk Kiepas 9 listopad 2012 Streszczenie Dokument prezentuje podstawy i wprowadza w proces tworzenia grafiki przestrzennej przy użyciu biblioteki WebGL i języka JavaScript, renderowanej przez wiodące przeglądarki WWW. W trakcie procesu nauki będziemy tworzyć wspólnie szkielet aplikacji WebGL. 1 Wstęp Celem niniejszego dokumentu jest zapoznanie czytelnika z nową technologią WebGL w stopniu umożliwającym pisanie prostych scen przestrzennych. Zakładamy, że czytelnik posiada podstawową znajomość popularnych języków JavaScript i HTML5 oraz posiada ogólną wiedzę programistyczną (zmienne, pętle, instrukcje warunkowe itp.), matematyczną (macierze, wektory i operacje na nich) i szczątkową znajomość pojęć pochodzących z grafiki komputerowej (renderowanie, potok grafiki, translacja, rotacja, skalowania, bufor głębi, bufor wierzchołków, shader, test przycięcia itp.). WebGL to nic innego jak API języka JavaScript, które umożliwa nam tworzenie interaktywnej grafiki 3D bezpośrednio w przeglądarce. Jest to standard webowy tworzony przez grupę Khronos odpowiedzialną za stworzenie i kolejne specyfikacje OpenGL. API bazuje bezpośrednio na mobilnej wersji OpenGL ES 2.0 przez co, grafika utworzona przy pomocy WebGL może być uruchamiania nie tylko na pececie, ale i na urządzeniach mobilnych i telewizorach. W trakcie nauki zaczniemy wprowadzać coraz to kolejne elementy własnego szkieletu aplikacji WebGL. W założeniu, ma on być prosty i umożliwić jak najwygodniejsze przeskoczenie całego procesu inicjalizacji. W wyniku tego w późniejszych częściach wprowadzania, będziemy mogli w całości skupić się na tworzeniu i modyfikacji tworzonej przez nas trójwymiarowej sceny. 1
2 Naszą naukę rozpoczniemy od przygotowania naszej przeglądarki do obsługi technologi WebGL. Następnie przejdziemy przez proces integracji WebGL z HTML5, co umożliwi nam osadzanie kreowanych programów wprost w kodzie naszej strony WWW. Kolejnym krokiem, będzie próba przygotowania przez nas pustej sceny, a następnie narysowania na niej prostego obiektu dwuwymiarowego. Gdy to nam się uda, spróbujemy swych sił w trzecim wymiarze. Rozpoczniemy od prostych brył, by przejść do ich transformacji (obroty, translacje etc.), bufora głębi i obiektów na siebie zachodzących, nakładania tekstur, oświetlenia, shaderów, obsługi klawiatury i myszki oraz wielu innych. 2 Uruchomienie WebGL 2.1 Wstęp Nie każda przeglądarka jest w stanie uruchomić aplikacje WebGL z dwóch przyczny. Pierwsza to technologiczna bariera, gdy przeglądarka po prostu go nie obsługuje. Druga to kwestia bezpieczeństwa. Otóż WebGL ma parę błędów przez co osoby postronne jak i złośliwe oprogramowanie jest w stanie zawiesić nam przeglądarkę i nawet cały komputer. Z tego powodu WebGL jest domyślnie wyłączony. 2.2 Wybór przeglądarki Przeglądarki obsługujące WebGLa to m.in.: a) Firefox (wersja 4.0 i większa) b) Opera (wersja i wyższa) c) Chrome (wersja 9.0 i wyższa) d) Safari (wersja 5.1 i wyższa na MacOS) Wsparcie dla żadnej z przeglądarek nie jest mocne i może ulec zmianie w zależności od wersji. Kompatybilność poszczególnych przeglądarek należy sprawdzać na stronie producenta. 2.3 Włączenie WebGL w przeglądarce Z powodu wspomnianej kwestii słabego bezpieczeństwa WebGL domyślnie jest zazwyczaj wyłączony. Włączenie go w większości przeglądarkach wygląda podobnie. W pasku adresu wpisujemy podany adres, wyszukujemy atrybut i ustawiamy odpowiednią wartość: i) Firefox - adres=about:config, atrybut=webgl.force-enabled, wartość= true 2
3 ii) Opera - adres=opera:config, atrybut=enable WebGL, wartość=1 iii) Chrome - adres=chrome://flags, atrybut=disable WebGL, wartość= Disable To czy udało nam się włączyć można sprawdzić wchodząc na strone: i zobaczyć czy aplikacja się uruchamia. Warto też wspomnieć o wymaganym sprzęcie. Potrzebna jest karta z Shaderami w wersji conjamniej 2.0. Najlepiej od NVidia, ATI. Występują problemy z kartami wbudowanymi producentów Intel, SiS. Niekiedy będziemy musieli siłowo wymusić uruchomienie WebGL, gdy nasza karta jest nie do końca zgodna ze specyfikacją. Można to zrobić poprzez ustawienie odpowiednich atrybutów bądź też rezygnując ze wsparcia sprzętowego i uruchomić renderowanie programowe (ang. software rendering, na CPU). 3 Integracja z HTML5 3.1 Po stronie HTML5 Cała magia związana z WebGL w przeglądarce dzieje się na komponencie canvas pochodzącym z nowego HTML5. Integracja jest prosta. Tworzymy podstawowy szablon strony HTML5, obiekt canvas określając przy tym jego identyfikator i wymiary oraz określamy, która funkcja JavaScript ma zostać wywołana podczas ładowania strony. Używamy do tego celu event onload: <html> <head> <title>integracja WebGL z HTML5</title> <meta http-equiv="content-type" content="text/html; charset=utf8"/> <script type="text/javascript" src="start.js"> </script> </head> <body onload="start();"> <canvas id="empty_canvas" width="500" height="500"> </canvas> </body> </html> 3.2 Po stronie WebGL Następnie w kodzie start.js odwołujemy się do elementu canvas za pomocą obiektowego modelu dokumentu DOM i funkcji getelementbyid i 3
4 już możemy renderować grafikę w przeglądarce: function start() { var canvas = document.getelementbyid("empty_canvas"); 4 Pusta scena 4.1 Inicjalizacja W tej części postaramy stworzyć naszą pierwszą pustą scenę. Zaczynamy od stworzenia globalnej zmiennej gl przechowującej cały kontekst WebGL oraz od wywołania funkcji inicjalizującej sam WebGL init() w naszej głównej funkcji start(): var gl; function start() { var canvas = document.getelementbyid("empty_canvas"); init(); Następnie wypełniamy funkcję init() następującym kodem inicjalizującym globalną zmieną gl, która jest wypełniana odpowiednimi danymi pochodzącymi z płótna canvas. Między innymi kontekstem WebGL, udostępniającym zestaw funkcji do rysowania: function init(canvas) { gl = canvas.getcontext("webgl") canvas.getcontext("experimental-webgl"); gl.viewportwidht = canvas.width; gl.viewportheight = canvas.height; if(!gl) { alert("nie mozna zainicjalizowac!"); 4.2 Rysowanie Teraz możemy się zając rysowaniem naszej pustej sceny dopisując do start() odpowiednie instrukcje. Zaczynamy od wyczyszczenia płótna i ustawieniu mu koloru czarnego. Następnie włączamy test bufora głębi, który 4
5 odpowiada za warstwowe rysowanie obiektów, tak aby odpowiednio się zasłaniały. Na koniec ustawiamy wielkość obszaru rysowania pobierając dane z płótna i wywołujemy funkcje rysującą draw(): function start() { gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.depth_test); gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); draw(); Nasza funkcja rysująca będzie bardzo prosta skoro niczego nie rysuje. Jedyne co robi to czyści bufor ekranu i bufor głębi co jest wymagane przy zwykłym renderowaniu sceny. Nie możemy przecież pozwolić, by dane zapisywane do bufora ekranu i głębi nakładały się na siebie. Zawsze tworząc nową klatkę musimy zapisywać dane do pustch buforów: function draw() { gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); Przykładowy kod źródłowy znajduje się w folderze 1. Pusta scena. Po uruchomieniu powinniśmy otrzymać czarny pusty widok. 5 Szkielet fruitgl (cz.1) 5.1 Wstęp Tworzony przez nas szkielet fruitgl ma być nieskomplikowany. Ma umożliwić nam jak najszybsze przejście do tworzenia grafiki, pozostawiając w niepamięć takie operacje jak inicjalizacja ekranu, buforów, shaderów, operacje na macierzach i wektorach czy przekształcenia w przestrzeni. 5.2 Kod Wszystkie funkcje szkieletu są umieszczone we wspólnej przestrzeni nazw fruitgl. Technicznie kod zawarty w szkielecie nie różni się od tego użytego wcześniej przy okazji tworzenia pustej sceny. Jest tylko inaczej zorganizowany: var fruitgl = { gl : null, 5
6 initialize : function(canvasname) { var canvas = document.getelementbyid(canvasname); fruitgl.gl = canvas.getcontext("webgl") canvas.getcontext("experimental-webgl"); fruitgl.gl.viewportwidht = canvas.width; fruitgl.gl.viewportheight = canvas.height; if(!fruitgl.gl) { alert("nie mozna zainicjalizowac!");, fruitgl.gl.clearcolor(0.0, 0.0, 0.0, 1.0); fruitgl.gl.enable(fruitgl.gl.depth_test); fruitgl.gl.viewport(0, 0, fruitgl.gl.viewportwidth, fruitgl.gl.viewportheight); begindraw : function() { fruitgl.gl.clear(fruitgl.gl.color_buffer_bit fruitgl.gl.depth_buffer_bit);, enddraw : function() { 5.3 Wykorzystanie fruitgl Wykorzystanie szkieletu fruitgl jest bardzo proste. Najpierw dołączamy plik z kodem fruitgl.js do kodu naszej strony (przed dołączeniem kodu start.js), a następnie wywołujemy funkcje szkieletu w funkcji start(). Nasz kod strony w html: <html> <head> <script type="text/javascript" src="fruitgl.js"> </script> <script type="text/javascript" src="start.js"> </script> </head> </html> 6
7 Użycie fruitgl w kodzie naszej aplikacji start.js: function start() { fruitgl.initialize("empty_canvas"); fruitgl.begindraw(); draw(); fruitgl.enddraw(); function draw() { // tu rysujemy! Szkielet fruitgl oraz przykłady jego wykorzystania znajdują się w katalogu "Kody źródłowe\fruitgl". 6 Pierwszy obiekt (trójkąt) Wyświetlając grafikę w WebGL nie możemy korzystać ze standardowego potoku karty graficznej (tzw. fixed-pipeline). Musimy utworzyć bardziej współczesny potok wymagający od nas zdefiniowania jednostek cieniujących, które w rzeczywistości są prostymi funkcjami wykonywanymi na rzecz każdego wierzchołka bądź też pixela sceny. 6.1 Vertex Shader Pomijając nieistotne etapy, przekazane na kartę graficzną wierzchołki trafiają wpierw do jednostki vertex shader odpowiedzialnej za ich transformację. Jednostka ta ustawia im m.in. odpowiednią pozycję z uwzględnieniem macierzy widoku, projekcji i świata. attribute vec3 position; void main(void){ gl_position = vec4(position, 1.0); Zaczynamy od deklaracji wektora 3-elementowego position, któremu będziemy przypisywać z programu pozycję naszych wierzchołków. Pozycja ta jest przepisywana bez zmian do odpowiedniego miejsca gl_position, z którego następny etap potoku będzie ją pobierał. Dzięki temu zabiegowi, pozycje wierzchołków będą oznaczały ich rzeczywiste położenie na ekranie w zakresie dla każdej ze współrzędnych. 7
8 6.2 Pixel Shader Zwrócone wierzchołki trafiają do pixel shadera odpowiedzialnego za modyfikację pojedyńczych pixeli. Jest to jedna z ostatnich faz renderingu, która wykorzystuje już ułożoną w przestrzeni scene i skupia się tylko na widocznych fragmentach modeli. precision mediump float; void main(void){ gl_fragcolor = vec4(0.5, 0.2, 1.0, 1.0); Wpierw ustawiamy średnią precyzję typu zmiennopozycjnego, a następnie przypisujemy każdemu modyfikowanemu pixelu kolor RGB(0.5, 0.2, 1.0). Tym razem, nie przekazujemy niczego z programu. Odpowiedni pixel jest wydobywany z przesłanych od vertex shadera, wstępnie przetworzonych wierzchołków. 6.3 Ładowanie shaderów Definiujemy shadery w łańcuchach znaków shaderps i shadervs. Następnie tworzymy pusty shader o odpowiednim typie i przypisujemy mu kod shaderów oraz kompilujemy: var shaderps = "precision mediump float; void main(void) { gl_fragcolor = vec4(0.5, 0.2, 1.0, 1.0);"; var shadervs = "attribute vec3 position; void main(void) { gl_position = vec4(position, 1.0); "; var pixelshader = gl.createshader(gl.fragment_shader); gl.shadersource(pixelshader, shaderps); gl.compileshader(pixelshader); var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, shadervs); gl.compileshader(vertexshader); Same wypełnione shadery nie na wiele nam się zdadzą. Musimy utworzyć podprogram reprezentujący potok, któremu przypisujemy utworzone jednostki cieniujące i go linkujemy. Następnie ustawiamy go jako domyślny sposób na tworznie grafiki oraz wskazujemy atrybut position jako ten w vertex shaderze, pod który będziemy przesyłać pozycje wierzchołków z programu: 8
9 shaderprogram = gl.createprogram(); gl.attachshader(shaderprogram, vertexshader); gl.attachshader(shaderprogram, pixelshader); gl.linkprogram(shaderprogram); gl.useprogram(shaderprogram); shaderprogram.position = gl.getattriblocation(shaderprogram, "position"); gl.enablevertexattribarray(shaderprogram.position); 6.4 Bufor wierzchołków Tworzone przez nas figury i bryły składają się z wierzchołków. Umieszczamy je w tzw. buforach, czyli szybkich, wydzielonych obszarach pamięci na karcie graficznej, których użycie znacząco redukuje czas odczytu. Zaczynamy od wywołania funkcji tworzącej bufor, a następnie ustawiamy go na bufor domyślny, czyli ten na którym aktualnie działamy: trianglebuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, trianglebuffer); Nie pozostaje nam nic innego jak zdefiniować trzy wierzchołki dla naszego trójkąta pamiętająć, że przy używaniu współrzędnych ekranowych poruszamy się po zakresie Następnie funkcją bufferdata() ładujemy wierzchołki do bufora ustawiając przy tym jego rozmiar: var vertices = [ 0.0, 0.7, 0.0, -0.7, -0.7, 0.0, 0.7, -0.7, 0.0 ]; gl.bufferdata(gl.array_buffer, new Float32Array(vertices), gl.static_draw); trianglebuffer.itemsize = 3; trianglebuffer.numitems = 3; 6.5 Wyświetlenie Mając zdefiniowany potok graficzny i wczytane wierzchołki trójkąta, możemy przejść do wyświetlania sceny. Uzupełniamy funkcję draw() o następujące instrukcje: function draw() { gl.bindbuffer(gl.array_buffer, trianglebuffer); 9
10 gl.vertexattribpointer(shaderprogram.position, trianglebuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, trianglebuffer.numitems); Wpierw ustawiamy bufor z wierzchołkami trójkąta jako domyślny i na nim pracujemy. Później definiujemy rozmieszczenie wierzchołków w buforze poczynając od miejsca gdzie dane z niego będą trafiać do vertex shadera, poprzez liczbę współrzędnych (wymiar), aż po typ je przechowujący (dokładność). Rysunek 1: Pierwsza grafika (trójkąt) Cały proces wyświetlania kończymy funkcją drawarrays(), która wyświetla na ekranie aktywny bufor. W naszym przypadku rysujemy trzy wierzchołki (trianglebuffer.numitems) tworzące trójkąt (gl.triangles). Powyższy rysunek przedstawia nasze dotychczasowe dokonanie. 7 Trzeci wymiar Rysowanie w dwóch wymiarach wstępnie przetransformowanych wierzchołków jest proste. Trzeci wymiar oznacza konieczność wymnożenia wszystkich wierzchołków przez odpowiednie macierze (projekcji, widoku, świata), które ustawią ich pozycje z uwzględnieniem odpowiedniej perspektyw. Wynikiem tego jest złudzenie trzeciego wymiaru sceny. Nie dokonamy tego jednak przy użyciu samego WebGL, gdyż nie zawiera on wbudowanych operacji matematycznych na wektorach i macierzach. Użyjemy do tego gotowej biblioteki glmatrix v0.9.5 dostępnej pod adresem 10
11 7.1 Macierze Zaczniemy od utworzenia macierzy projekcji (stworzenie iluzji trzeciego wymiaru na płaskim ekranie) i macierzy świata (rozmieszczenie obiektów na scenie). Wpierw dołączamy bibliotekę glmatrix do strony przed naszym skryptem start.js, tworzymy globalne zmienne dla naszych macierzy i modyfikujemy vertex shader tak by z nich korzystał: var worldmat = mat4.create(); var projectionmat = mat4.create(); Modyfikacja vertex shadera: attribute vec3 position; uniform mat4 uworldmat; uniform mat4 uprojectionmat; void main(void) { gl_position = uprojectionmat * uworldmat * vec4(avertexposition, 1.0); Kolejny krok to stworzenie połączenia pomiędzy naszymi macierzami w programie i vertex shaderze: shaderprogram.worldmatuniform = gl.getuniformlocation(shaderprogram, "uworldmat"); shaderprogram.projectionmatuniform = gl.getuniformlocation(shaderprogram, "uprojectionmat"); Przy wypełnianiu macierzy projekcji i świata będziemy korzystać z funkcji bibliotecznych glmatrix. Dzięki funkcji perspective() utworzona macierz projekcji sprawi, że pozbędziemy się widoku ortogonalnego na rzecz perspektywy przestrzennej o horyzontalnym polu widzenia 45 stopni i zgodnym ze stosunkiem długości do szerokości ekranu widokiem. Macierz świata tworzymy wpierw jako macierz jednostkową (neutralna dla mnożenie, identity()), by następnie dokonywać za jej pomocą translacji obiektów sceny o wektor [0.5, 0.5, -4.0] i rotacje wzgledem osi Z o 90 stopni: mat4.perspective(45, gl.viewportwidth / gl.viewportheight, 0.1, 100.0, projectionmat); mat4.identity(worldmat); mat4.translate(worldmat, [0.5, 0.5, -4.0]); mat4.rotatez(worldmat, degtorad(90)); 11
12 Ostatnią rzeczą jest zaaplikowanie tak utworzonych macierzy do naszego vertex shadera, tak aby mógł z nich swobodnie korzystać. Dokonujemy tego tuż przed wywołaniem funkcji rysującej: gl.uniformmatrix4fv(shaderprogram.worldmatuniform, false, worldmat); gl.uniformmatrix4fv(shaderprogram.projectionmatuniform, false, projectionmat); gl.drawarrays(gl.triangles, 0, trianglebuffer.numitems); 7.2 Efekt końcowy Rysunek 2: Trójkąt w trzecim wymiarze po transformacjach Przykład znajduje się w katalogu "Kody źródłowe\3. Trzeci wymiar". Użyliśmy w nim pomocniczej funkcji degtorad(), która odpowiada za zamiane kąta wyrażonego w stopniach na radiany. Jest to wymagane przez wszystkie funkcje przyjmujące kąt rotacji: function degtorad(degrees) { return degrees * Math.PI / 180; 8 Trochę kolorków Dokonamy lekkiej modyfikacji poprzedniego trójkąta dodając do wierzchołków dodatkową informację w postaci koloru. Przykład z tego rozdziału znajduje się w folderze "Kody źródłowe\4. Trochę kolorków". 12
13 8.1 Jednostki cieniujące Ponieważ wszystkie dane sceny w potoku odbiera najpierw vertex shader, także i do niego musimy przesłać kolor wierzchołka. Również i pixel shader wymaga modyfikacji, tak aby mógł korzystać z nowej informacji o kolorze: attribute vec3 position; attribute vec4 color; varying vec4 vcolor; uniform mat4 uworldmat; uniform mat4 uprojectionmat; void main(void) { gl_position = uprojectionmat * uworldmat * vec4(avertexposition, 1.0); vcolor = color; Używamy zmiennej vcolor z modyfikatorem varying dzięki czemu jej wartość jest przekazywana pomiędzy wywołaniami jednostek cieniujących: precision mediump float; varying vec4 vcolor; void main(void){ gl_fragcolor = vcolor; Ostatni krok związany z ustawianiem shaderów to wskazanie i połączenie nowych atrybutów z programem: shaderprogram.color = gl.getattriblocation(shaderprogram, "color"); gl.enablevertexattribarray(shaderprogram.color); 8.2 Bufor kolorów Informacje o kolorach wierzchołków przechowujemy tak jak i pozycje po prostu w buforze. Tworzymy zmienną dla bufora a następnie wypełniamy go: var trianglecolorbuffer; trianglecolorbuffer = gl.createbuffer(); 13
14 gl.bindbuffer(gl.array_buffer, trianglecolorbuffer); var colors = [ 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0 ]; gl.bufferdata(gl.array_buffer, new Float32Array(colors), gl.static_draw); trianglecolorbuffer.itemsize = 4; trianglecolorbuffer.numitems = 3; 8.3 Wyświetlenie Jedyne co musimy zrobić by wyświetlić tak pokolorowany trójkąt to przesłać bufor kolorów do vertex shadera zaraz obok bufora pozycji. Wszystko to dokonujemy w funkcji draw(), tuż przed funkcją rysowania: gl.bindbuffer(gl.array_buffer, trianglevertexcolorbuffer); gl.vertexattribpointer(shaderprogram.vertexcolorattribute, trianglevertexcolorbuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, trianglebuffer.numitems); Rysunek 3: Efekt końcowy: trójkąt kolorowych 9 Animacja 9.1 Podstawy Ponieważ animacja opiera się na ciągłym tworzeniu sceny na nowo z uwzględnieniem pewnych zmian, potrzebujemy mechanizmu, który nam to umożliwi. Z pomocą przychodzi nam biblioteka od Google webgl-utils i funkcja requestanimframe() cyklicznie wywołująca podaną funkcję. 14
15 Ściągamy bibliotekę z source/browse/book/extension/webgl-utils.js oraz dołączamy ją do naszej strony tak jak przy okazji glmatrix. Następnie tworzymy funkcję tick() odpowiedzalną za cykliczne wywołania animacji: function tick() { requestanimframe(tick); begindraw(); draw(); enddraw(); animate(); Wywołujemy ją w funkcji start() zamiast funkcji draw(), która jest uruchamiana teraz wraz z tick(). Następnie tworzymy globalną zmienną angle śledzącą aktualną rotacje naszego trójkąta oraz lasttime do przechowywania czasu. Wypełniamy funkcję animate() odpowiedzialną za samą animacje obiektów i ich płynną formę w zależności od liczby klatek wyświetlanego obrazu: function animate() { var timenow = new Date().getTime(); if (lasttime!= 0) { var elapsed = timenow - lasttime; angle += (90 * elapsed) / ; lasttime = timenow; 9.2 Stos macierzy Użyjemy prostego stosu dla macierzy świata, aby zachowywać jej początkowy stan i oddzielić od wszelkich modyfikacji wynikłych z transformacji na pojedyńczym obiekcie. Definiujemy pustą zmienną tablicową dla stosu. Następnie tworzym dwie funkcje obsługujące stos, które zdejmują z (pop()) oraz wkładają na niego macierz (push()): var stackmat = []; function push() { var copy = mat4.create(); mat4.set(worldmat, copy); stackmat.push(copy); 15
16 function pop() { if (stackmat.length == 0) { throw ParamConst.INVALID_POP_MATRIX_CALL; worldmat = stackmat.pop(); 9.3 Wyświetlenie Pozostało jeszcze zmodyfikować funkcje rysującą tak aby po ustawieniu macierzy świata odłożyć ją na stos, dokonać transformacji obiektów, wyrenderować na ekranie oraz zdjąć początkową wartość macierzy dla nowej klatki: function draw() { mat4.translate(worldmat, [0.0, 0.0, -2.0]); push(); mat4.rotate(worldmat, degtorad(angle), [0, 1, 1]); gl.drawarrays(gl.triangles, 0, trianglebuffer.numitems); pop(); Rysunek 4: Efekt końcowy: trójkąt animowany 10 Sześcian Stworzym całkowicie trójwymiarową bryłę: sześcian. Użyjemy do tego tzw. indeksowanego bufora wierzchołków. Ponieważ niektóre wierzchołki są wspólne dla wielu trójkątów/ścian dlatego też możemy pozycję takiego wierzchołka przechowywać tylko raz, a dobierać się do niego poprzez ustalony indeks. Możliwość taką daje nam właśnie indeksowany bufor. 16
17 10.1 Bufory danych Pozbywamy się całkiem wszystkich zmiennych związanych z trójkątem. Tworzymy nowe bufory wierzchołków, kolorów i indeksów dla naszego sześcianu: var cubevertexbuffer; var cubecolorbuffer; var cubeindexbuffer; Zaczynamy od wypełnienia bufora wierzchołków składającego się z 24 elementów jako standardowy ARRAY_BUFFER, analogicznie jak w poprzednich przykładach. Następnie bierzemy się za równie standardowy bufor kolorów. Do jego utworzenia używamy tylko 6 kolorów i pętli, która dla każdej ze ścian powiela 4-krotnie dany kolor. Bliżej przyjrzymy się tylko nowemu buforowi indeksów, w którym za pomocą indeksów do wierzchołków i grupowaniu ich po trzy wyznaczamy trójkąty do renderowania: cubeindexbuffer = gl.createbuffer(); gl.bindbuffer(gl.element_array_buffer, cubeindexbuffer); var cubeindices = [ 0, 1, 2, 0, 2, 3, // Przednia 4, 5, 6, 4, 6, 7, // Tylnia 8, 9, 10, 8, 10, 11, // Górna 12, 13, 14, 12, 14, 15, // Dolna 16, 17, 18, 16, 18, 19, // Prawa 20, 21, 22, 20, 22, 23 // Lewa ] gl.bufferdata(gl.element_array_buffer, new Uint16Array(cubeIndices), gl.static_draw); cubeindexbuffer.itemsize = 1; cubeindexbuffer.numitems = 36; 10.2 Wyświetlenie Rysowanie wszystkiego nie powinno być problematyczne. Zaczynamy od zbindowania wszystkich trzech buforów, a następnie wyświetlenia danych pochodzących z bufora indeksów: function draw() { mat4.translate(worldmat, [0.0, 0.0, -7.0]); gl.bindbuffer(gl.array_buffer, cubepositionbuffer); gl.vertexattribpointer(shaderprogram.position, 17
18 cubepositionbuffer.itemsize, gl.float, false, 0, 0); gl.bindbuffer(gl.array_buffer, cubecolorbuffer); gl.vertexattribpointer(shaderprogram.color, cubecolorbuffer.itemsize, gl.float, false, 0, 0); gl.bindbuffer(gl.element_array_buffer, cubeindexbuffer); gl.drawelements(gl.triangles, cubeindexbuffer.numitems, gl.unsigned_short, 0); Rysunek 5: Efekt końcowy: sześcian 11 Teksturowanie 11.1 Przygotowanie tekstury Na każdą z tworzonych powierzchni możemy nałożyć dowolną teksturę naśladującą pewien materiał. Tekstura to nic innego jak plik graficzny obrazujący np. drewno, metal. Przykład ten znajduje się w folderze "Kody źródłowe\7. Teksturowanie", a użyta do nałożenia na sześcian tekstura to wood.jpg. Zaczynam od zadeklarowania zmiennej na naszą teksture i stworzenia funkcji inicjalizującej wywoływanej po inicjalizacji buforów w funkcji start(): var texture; function initializetexture() { texture = gl.createtexture(); texture.image = new Image(); texture.image.crossorigin = "anonymous"; 18
19 texture.image.onload = function() { settexture(texture); texture.image.src = "wood.jpg"; Następnie tworzymy funkcje settexture() odpowiedzialną za ustawienie odpowiednich parametrów tekstury (sposób składowania tekstury, jej rodzaj, użyty system kolorów i techniki jej filtrowania): function settexture(tex) { gl.bindtexture(gl.texture_2d, tex); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, tex.image); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.nearest); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.nearest); gl.bindtexture(gl.texture_2d, null); 11.2 Przygotowanie współrzędnych Jednak tekstura nie może współistnieć z powierzchnią bez pewnego kleju. Tym klejem są dwuwymiarowe (u, v) współrzędne tekstury określające położenie wierzchołka powierzchni na teksturze. Umożliwia to rozszerzanie, zwężanie i w ogólności dopasowanie danej tekstury do powierzchni. Zakres dla tych współrzędnych to I tak wierzchołek o współrzędnych u: 0.0, v: 0.0 będzie tam gdzie lewy górny róg tekstury, a więc tą jej częścią zostanie przykryty. Z kolei wierzchołek ze współrzednymi u: 1.0, v: 1.0 to nic innego jak prawy dolny róg. Pomiędzy wierzchołkami tekstura jest odpowiednio dopasowana. Kod wygląda następująco: var cubetexturebuffer; cubetexturebuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, cubetexturebuffer); var coords = [ // Przednia 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 19
20 0.0, 1.0, ]; gl.bufferdata(gl.array_buffer, new Float32Array(coords), gl.static_draw); cubetexturebuffer.itemsize = 2; cubetexturebuffer.numitems = 24; 11.3 Modyfikacja shaderów Wszystko czego do tej pory dokonaliśmy w kontekście tekstur na nic się zda jeśli nie zmodyfikujemy jednostek cieniujących. Współrzędne tekstury są w tej kwestii na równi z kolorem wierzchołka (który zostanie przez teksturę zastąpiony) i są przekazywane do potoku graficznego poczynając od vertex shadera. Wymagana dlatego jest jego modyfikacja: attribute vec3 position; attribute vec2 coord; varying vec2 vcoord; uniform mat4 uworldmat; uniform mat4 uprojectionmat; void main(void) { gl_position = uprojectionmat * uworldmat * vec4(position, 1.0); vcoord = coord; Współrzędne tekstur zazwyczaj nie są wykorzystywane w vertex shaderze, a tylko przekazywane dalej do pixel shadera. To w nim dla każdego fragmentu powierzchni pobierany jest odpowiedni pixel tekstury przy pomocy tzw. obiektu próbkującego (ang. sampler), by następnie zostać nowym kolorem danego wycinka powierzchni: precision mediump float; varying vec2 vcoord; uniform sampler2d usampler; void main(void) { gl_fragcolor = texture2d(usampler, vec2(vcoord.s, vcoord.t)); 20
21 11.4 Wyświetlenie Przed rozpoczęciem wyświetlania musimy powiązać dane programu z danymi shaderów: shaderprogram.coord = gl.getattriblocation(shaderprogram, "coord"); gl.enablevertexattribarray(shaderprogram.coord); shaderprogram.sampleruniform = gl.getuniformlocation(shaderprogram, "usampler"); Wyświetlanie zaczynamy od przekazania przekazania danych z programu do vertex shadera, by następnie aktywować nakładaną teksturę i dokonać końcowego renderingu: function draw() { gl.bindbuffer(gl.array_buffer, cubetexturebuffer); gl.vertexattribpointer(shaderprogram.coord, cubetexturebuffer.itemsize, gl.float, false, 0, 0); gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture); gl.uniform1i(shaderprogram.sampleruniform, 0); gl.drawelements(gl.triangles, cubeindexbuffer.numitems, gl.unsigned_short, 0); Rysunek 6: Efekt końcowy: sześcian oteksturowany 21
22 12 Obsługa klawiatury 12.1 Wprowadzenie Obsługa klawiatury jest niezwykle łatwa i opera się o zdarzenia przeglądarki/obiektowego dokumentu wyzwalane podczas wciśnięcia bądź puszczenia klawisza. Aktualna informacja o stanie klawisza (wciśnięty / puszczony) jest przechowywana w tablicy currentkeys, której stan jest zmieniany przy pomocy funkcji keydownhandle() oraz keyuphandle() wywoływanych wraz z wywołaniem wspomnianych wcześniej zdarzeń. Wszystko to opakowujemy w funkcje inicjalizującą klawiaturę: var currentkeys = {; function initializekeyboard() { document.onkeydown = keydownhandle; document.onkeyup = keyuphandle; function keydownhandle(event) { currentkeys[event.keycode] = true; function keyuphandle(event) { currentkeys[event.keycode] = false; 12.2 Obsługa klawiszy Pozostało nam tylko obsłużyć odpowiedni klawisze. Zaczynamy od zdefiniowania zmiennej zoom przechowującej aktualne oddalenie sześcianiu od ekranu oraz od funkcji wykonującej na tej zmiennej modyfikacje w zależności od wciśniętego klawisza: function handlekeys() { if (currentkeys[38]) { // Strzałka w górę zoom -= 0.05; if (currentkeys[40]) { // Strzałka w dół zoom += 0.05; I tak strzałka w górę oddali sześcian, a strzałka w dół przybliży go do nas. Funkcję tą wywołujemy funkcji tick() tuż przed rysowaniem, tak 22
23 aby aktualna scena mogła pozostać aktualne w stosunku do ustawionego przybliżenia: function tick() { handlekeys(); begindraw(); draw(); Na koniec musimy zaaplikować zmienną zoom do operacji translacji sześcianu. Dokonujemy tego w funkcji draw(): draw() { mat4.translate(worldmat, [0.0, 0.0, -7.0+zoom]); Rysunek 7: Efekt końcowy: sześcian przybliżony 13 Przeźroczystość Przeźroczystość jest łatwa do osiągnięcia. Należy wyłączyć bufor głębi (wkońcu nie interesuje nas obiekt najbardziej na wierzchu ale również i tan za, gdyż z racji przeźroczystości pierwszego obiektu będzie widoczny). Następnie włączyć funkcje mieszania (ang. blending) i odpowiednio ustawić: function initialize(canvasname) { gl.disable(gl.depth_test); gl.enable(gl.blend); 23
24 gl.blendfunc(gl.src_alpha, gl.one); Kolejny krok to modyfikacja pixel shadera tak aby wynikowy kanał alpha (przeźroczystości) dla fragmentu tekstury był przemnożony przez odpowiedni współczynnik prześwitywania (u nas półprzeźroczystość): precision mediump float; varying vec2 vcoord; uniform float ualpha; uniform sampler2d usampler; void main(void) { vec4 texturecolor = texture2d(usampler, vec2(vcoord.s, vcoord.t)); gl_fragcolor = vec4(texturecolor.rgb, texturecolor.a * ualpha); Następnie musimy obsłużyć nowy parametr w shaderze. W inicjalizacji shaderów pobieramy dla niego uniform, a w funkcji rysującej ustawiamy na stałe wartość 0.5: shaderprogram.alphauniform = gl.getuniformlocation(shaderprogram, "ualpha"); Oraz: gl.uniform1f(shaderprogram.alphauniform, 0.5); Rysunek 8: Efekt końcowy: sześcian przeźroczysty 24
25 Spis treści 1 Wstęp 1 2 Uruchomienie WebGL Wstęp Wybór przeglądarki Włączenie WebGL w przeglądarce Integracja z HTML Po stronie HTML Po stronie WebGL Pusta scena Inicjalizacja Rysowanie Szkielet fruitgl (cz.1) Wstęp Kod Wykorzystanie fruitgl Pierwszy obiekt (trójkąt) Vertex Shader Pixel Shader Ładowanie shaderów Bufor wierzchołków Wyświetlenie Trzeci wymiar Macierze Efekt końcowy Trochę kolorków Jednostki cieniujące Bufor kolorów Wyświetlenie Animacja Podstawy Stos macierzy Wyświetlenie
26 10 Sześcian Bufory danych Wyświetlenie Teksturowanie Przygotowanie tekstury Przygotowanie współrzędnych Modyfikacja shaderów Wyświetlenie Obsługa klawiatury Wprowadzenie Obsługa klawiszy Przeźroczystość 23 26
Realizacja prostej gry polegającej na symulacji jazdy samochodem
Realizacja prostej gry polegającej na symulacji jazdy samochodem zadanie Należy zaprogramować symulator jazdy samochodem Sterowany kursorami odpowiadającymi odpowiednio za skręty w lewo i w prawo oraz
Systemy wirtualnej rzeczywistości. Komponenty i serwisy
Uniwersytet Zielonogórski Instytut Sterowania i Systemów Informatycznych Systemy wirtualnej rzeczywistości Laboratorium Komponenty i serwisy Wstęp: W trzeciej części przedstawione zostaną podstawowe techniki
Wprowadzenie do QT OpenGL
Wprowadzenie do QT mgr inż. Michał Chwesiuk mgr inż. Tomasz Sergej inż. Patryk Piotrowski 1/21 - Open Graphics Library Open Graphics Library API pozwalające na wykorzystanie akceleracji sprzętowej do renderowania
Programowanie gier 3D w HTML5. Andrzej P.Urbański Politechnika Poznańska
Programowanie gier 3D w HTML5 Andrzej P.Urbański Politechnika Poznańska Moje marzenie Od dawna jest znany pakiet Open GL napisany w C++ i bardzo ułatwiający tworzenie gier 3D Zaproponowałem kiedyś jako
GLKit. Wykład 10. Programowanie aplikacji mobilnych na urządzenia Apple (IOS i ObjectiveC) #import "Fraction.h" #import <stdio.h>
#import "Fraction.h" #import @implementation Fraction -(Fraction*) initwithnumerator: (int) n denominator: (int) d { self = [super init]; } if ( self ) { [self setnumerator: n anddenominator:
Gry Komputerowe Laboratorium 4. Teksturowanie Kolizje obiektów z otoczeniem. mgr inż. Michał Chwesiuk 1/29. Szczecin, r
Gry Komputerowe Laboratorium 4 Teksturowanie Kolizje obiektów z otoczeniem mgr inż. Michał Chwesiuk 1/29 Klasa Stwórzmy najpierw klasę TextureManager, która będzie obsługiwała tekstury w projekcie. 2/29
Bartłomiej Filipek www.ii.uj.edu.pl/~filipek
Bartłomiej Filipek www.ii.uj.edu.pl/~filipek Nasz Cel Prehistoria krótki wstęp Nowa era! Vertex Shaders Fragment Shaders Podstawy GLSL Obsługa GLSL z API OpenGL Dodajmy parę efektów! Podsumowanie Dodatkowe
2 Przygotował: mgr inż. Maciej Lasota
Laboratorium nr 2 1/6 Grafika Komputerowa 3D Instrukcja laboratoryjna Temat: Manipulowanie przestrzenią 2 Przygotował: mgr inż. Maciej Lasota 1) Manipulowanie przestrzenią Istnieją dwa typy układów współrzędnych:
Podstawy programowania, Poniedziałek , 8-10 Projekt, część 1
Podstawy programowania, Poniedziałek 30.05.2016, 8-10 Projekt, część 1 1. Zadanie Projekt polega na stworzeniu logicznej gry komputerowej działającej w trybie tekstowym o nazwie Minefield. 2. Cele Celem
Rysunek 1: Okno timeline wykorzystywane do tworzenia animacji.
Ćwiczenie 5 - Tworzenie animacji Podczas tworzenia prostej animacji wykorzystywać będziemy okno Timeline domyślnie ustawione na dole okna Blendera (Rys. 1). Proces tworzenia animacji polega na stworzeniu
Multimedia i interfejsy. Ćwiczenie 5 HTML5
Multimedia i interfejsy Ćwiczenie 5 HTML5 Celem ćwiczenia jest poznanie nowych elementów wprowadzonych w HTML 5, do których należą m.in. video oraz canvas. Poniższy opis przedstawia sposób użycia tych
Mobilne aplikacje multimedialne. OpenGL
Mobilne aplikacje multimedialne OpenGL Marek Kulawiak Katedra Systemów Geoinformatycznych Wydział Elektroniki, Telekomunikacji i Informatyki Politechniki Gdańskiej Open Graphics Library API do tworzenia
Systemy wirtualnej rzeczywistości. Podstawy grafiki 3D
Uniwersytet Zielonogórski Instytut Sterowania i Systemów Informatycznych Systemy wirtualnej rzeczywistości Laboratorium Podstawy grafiki 3D Wstęp: W drugiej części przedstawione zostaną podstawowe mechanizmy
Druga aplikacja Prymitywy, alpha blending, obracanie bitmap oraz mały zestaw przydatnych funkcji wyświetlających własnej roboty.
Przyszedł czas na rysowanie własnych figur, czyli prymitywy, obracanie bitmap, oraz alpha blending-czyli półprzezroczystość. Będę opisywał tylko rzeczy nowe-nie ma potrzeby abym się powtarzał. Zaczynajmny
1. Prymitywy graficzne
1. Prymitywy graficzne Prymitywy graficzne są elementarnymi obiektami jakie potrafi bezpośrednio rysować, określony system graficzny (DirectX, OpenGL itp.) są to: punkty, listy linii, serie linii, listy
1 Temat: Vertex Shader
Instrukcja Architektura procesorów graficznych 1 Temat: Vertex Shader Przygotował: mgr inż. Tomasz Michno 1 Wstęp 1.1 Czym jest shader Shader jest programem (zazwyczaj krótkim), wykonywanym przez kartę
Temat: Transformacje 3D
Instrukcja laboratoryjna 11 Grafika komputerowa 3D Temat: Transformacje 3D Przygotował: dr inż. Grzegorz Łukawski, mgr inż. Maciej Lasota, mgr inż. Tomasz Michno 1 Wstęp teoretyczny Bardzo często programując
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ),
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ), Program 351203 Opracowanie: Grzegorz Majda Tematyka zajęć 1. Wprowadzenie do aplikacji internetowych
Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji
Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji Materiał jest zbiorem informacji o właściwościach powierzchni. Składa się na niego kolor, sposób odbijania światła i sposób nakładania
Janusz Ganczarski. OpenGL Pierwszy program
Janusz Ganczarski OpenGL Pierwszy program Spis treści Spis treści..................................... 1 1. Pierwszy program.............................. 1 1.1. Rysowanie sceny 3D...........................
1 Wstęp teoretyczny. Temat: Manipulowanie przestrzenią. Grafika komputerowa 3D. Instrukcja laboratoryjna Układ współrzędnych
Instrukcja laboratoryjna 9 Grafika komputerowa 3D Temat: Manipulowanie przestrzenią Przygotował: dr inż. Grzegorz Łukawski, mgr inż. Maciej Lasota, mgr inż. Tomasz Michno 1 Wstęp teoretyczny 1.1 Układ
Shadery. Artur Staszczyk Bartłomiej Filipek
Shadery Artur Staszczyk www.astaszczyk.com Bartłomiej Filipek www.bartlomiejfilipek.pl Bartlomiej.filipek@gmail.com Potok graficzny Vertex shader Fragment shader GLSL Przykłady Inne shadery? Vertex shader
Grafika Komputerowa Wykład 4. Synteza grafiki 3D. mgr inż. Michał Chwesiuk 1/30
Wykład 4 mgr inż. 1/30 Synteza grafiki polega na stworzeniu obrazu w oparciu o jego opis. Synteza obrazu w grafice komputerowej polega na wykorzystaniu algorytmów komputerowych do uzyskania obrazu cyfrowego
Sieciowe Technologie Mobilne. Laboratorium 4
Sieciowe Technologie Mobilne Laboratorium 4 Tworzenie wieloplatformowych aplikacji mobilnych przy użyciu biblioteki PhoneGap. Łukasz Kamiński Laboratorium 4 Urozmaicone zostaną animacje potworów, aby odpowiadały
Plan wykładu. Akcelerator 3D Potok graficzny
Plan wykładu Akcelerator 3D Potok graficzny Akcelerator 3D W 1996 r. opracowana została specjalna karta rozszerzeń o nazwie marketingowej Voodoo, którą z racji wspomagania procesu generowania grafiki 3D
Sieciowe Technologie Mobilne. Laboratorium 2
Sieciowe Technologie Mobilne Laboratorium 2 Tworzenie wieloplatformowych aplikacji mobilnych przy użyciu biblioteki PhoneGap. Łukasz Kamiński Laboratorium 2 Na dzisiejszym laboratorium skupimy się na implementacji
Baltie 3. Podręcznik do nauki programowania dla klas I III gimnazjum. Tadeusz Sołtys, Bohumír Soukup
Baltie 3 Podręcznik do nauki programowania dla klas I III gimnazjum Tadeusz Sołtys, Bohumír Soukup Czytanie klawisza lub przycisku myszy Czytaj klawisz lub przycisk myszy - czekaj na naciśnięcie Polecenie
Wprowadzenie do rysowania w 3D. Praca w środowisku 3D
Wprowadzenie do rysowania w 3D 13 Praca w środowisku 3D Pierwszym krokiem niezbędnym do rozpoczęcia pracy w środowisku 3D programu AutoCad 2010 jest wybór odpowiedniego obszaru roboczego. Można tego dokonać
OpenGL : Oświetlenie. mgr inż. Michał Chwesiuk mgr inż. Tomasz Sergej inż. Patryk Piotrowski. Szczecin, r 1/23
OpenGL : mgr inż. Michał Chwesiuk mgr inż. Tomasz Sergej inż. Patryk Piotrowski 1/23 Folder z plikami zewnętrznymi (resources) Po odpaleniu przykładowego projektu, nie uruchomi się on poprawnie. Powodem
WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS
WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS Autor prezentacji: Michał Kołkowski Promotor: prof dr. hb. Włodzisław Duch SPIS TREŚCI 1. Ogólnie o Canvasie 2. Utworzenie szablonu do pracy z Canvas
znajdowały się różne instrukcje) to tak naprawdę definicja funkcji main.
Część XVI C++ Funkcje Jeśli nasz program rozrósł się już do kilkudziesięciu linijek, warto pomyśleć o jego podziale na mniejsze części. Poznajmy więc funkcje. Szybko się przekonamy, że funkcja to bardzo
Laboratorium 7 Blog: dodawanie i edycja wpisów
Laboratorium 7 Blog: dodawanie i edycja wpisów Dodawanie nowych wpisów Tworzenie formularza Za obsługę formularzy odpowiada klasa Zend_Form. Dla każdego formularza w projekcie tworzymy klasę dziedziczącą
OpenGL Światło (cieniowanie)
OpenGL Światło (cieniowanie) 1. Oświetlenie włączanie/wyłączanie glenable(gl_lighting); - włączenie mechanizmu oświetlenia gldisable(gl_lighting); - wyłączenie mechanizmu oświetlenia glenable(gl_light0);
Obsługa grafiki w Delphi, rysowanie na płótnie, obsługa myszki, zapisywanie obrazków do plików, bitmapy pozaekranowe.
Programowanie Wizualno-Obiektowe (studia zaoczne - inżynieria komputerowa) Zajęcia z Delphi 5, program 1 Temat: Zadanie: Obsługa grafiki w Delphi, rysowanie na płótnie, obsługa myszki, zapisywanie obrazków
Programowanie Procesorów Graficznych
Programowanie Procesorów Graficznych Wykład 1 9.10.2012 Prehistoria Zadaniem karty graficznej było sterowanie sygnałem do monitora tak aby wyświetlić obraz zgodnie z zawartościa pamięci. Programiści pracowali
Część XVII C++ Funkcje. Funkcja bezargumentowa Najprostszym przypadkiem funkcji jest jej wersja bezargumentowa. Spójrzmy na przykład.
Część XVII C++ Funkcje Funkcja bezargumentowa Najprostszym przypadkiem funkcji jest jej wersja bezargumentowa. Spójrzmy na przykład. 2 3 Tworzymy deklarację i definicję funkcji o nazwie pobierzln() Funkcja
OpenGL Światło (cieniowanie)
OpenGL Światło (cieniowanie) 1. Oświetlenie włączanie/wyłączanie glenable(gl_lighting); - włączenie mechanizmu oświetlenia gldisable(gl_lighting); - wyłączenie mechanizmu oświetlenia glenable(gl_light0);
Dokumentacja imapliteapi
Dokumentacja imapliteapi Urząd Marszałkowski Województwa Małopolskiego 30.06.2014 Spis treści: 1. Wprowadzenie... 3 2. Sposób użycia biblioteki imapliteapi... 3 3. Metody API... 5 4. Lista gotowych kompozycji
Mapowanie sześcienne otoczenia (cubic environment mapping)
Mapowanie sześcienne otoczenia (cubic environment mapping) Mapowanie środowiska jest techniką pozwalającą na odwzorowanie otoczenia na powierzchni przedmiotu przy użyciu specjalnie spreparowanej tekstury.
Wskaźniki a tablice Wskaźniki i tablice są ze sobą w języku C++ ściśle związane. Aby się o tym przekonać wykonajmy cwiczenie.
Część XXII C++ w Wskaźniki a tablice Wskaźniki i tablice są ze sobą w języku C++ ściśle związane. Aby się o tym przekonać wykonajmy cwiczenie. Ćwiczenie 1 1. Utwórz nowy projekt w Dev C++ i zapisz go na
1. Opis okna podstawowego programu TPrezenter.
OPIS PROGRAMU TPREZENTER. Program TPrezenter przeznaczony jest do pełnej graficznej prezentacji danych bieżących lub archiwalnych dla systemów serii AL154. Umożliwia wygodną i dokładną analizę na monitorze
która metoda jest najlepsza
która metoda jest najlepsza dr inż. Marek Żabka Instytut Matematyki Wydział Matematyki Stosowanej Politechnika Śląska 20 września 2012r Nowa metoda tworzenia grafiki na stronie internetowej: element,,canvas
Przy dużej wielkości głębokości uzyskamy wrażenie nieskończoności: Dla głębokości zerowej uzyskamy tekst płaski:
Temat 6: Tekst w przestrzeni trójwymiarowej. Podstawy tworzenia animacji. Instrukcja warunkowa if. Program pozwala umieszczać na scenie nie tylko bryły, czy figury płaskie, ale też tekst. Polecenie tworzące
Obsługa mapy przy użyciu narzędzi nawigacji
Obsługa mapy przy użyciu narzędzi nawigacji Narzędzia do nawigacji znajdują się w lewym górnym rogu okna mapy. Przesuń w górę, dół, w lewo, w prawo- strzałki kierunkowe pozwalają przesuwać mapę w wybranym
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ),
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ), Program 351203 Opracowanie: Grzegorz Majda Tematyka zajęć 2. Przygotowanie środowiska pracy
Niezwykłe tablice Poznane typy danych pozwalają przechowywać pojedyncze liczby. Dzięki tablicom zgromadzimy wiele wartości w jednym miejscu.
Część XIX C++ w Każda poznana do tej pory zmienna może przechowywać jedną liczbę. Jeśli zaczniemy pisać bardziej rozbudowane programy, okaże się to niewystarczające. Warto więc poznać zmienne, które mogą
Zadanie 1. Ściana. 1. Potrzebne zmienne w dołączonym do zadania kodzie źródłowym
Zadanie 1. Ściana Zadanie W pliku walls.cpp znajduje się funkcja void draw_back_wall(). Należy uzupełnić ją, ustawiając odpowiednio parametry teksturowania tak, aby na ścianę, która w pierwotnej wersji
WASM AppInventor Lab 3. Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI
Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI Kanwa, to komponent służący do rysowania. Można ją dodać w Designerze przeciągając komponent Canvas z sekcji Basic. W celu ustawienia obrazka jako
Zajęcia nr 15 JavaScript wprowadzenie do JavaScript
Zajęcia nr 15 JavaScript wprowadzenie do JavaScript Prowadzący: Andrzej Gąsienica-Samek, strona kółka www.atinea.pl/kolko Wprowadzenie do jsfiddle.net Uruchom Chrome i wejdź na stronę http://jsfiddle.net.
Podstawy Programowania C++
Wykład 3 - podstawowe konstrukcje Instytut Automatyki i Robotyki Warszawa, 2014 Wstęp Plan wykładu Struktura programu, instrukcja przypisania, podstawowe typy danych, zapis i odczyt danych, wyrażenia:
Grafika Komputerowa Wykład 5. Potok Renderowania Oświetlenie. mgr inż. Michał Chwesiuk 1/38
Wykład 5 Potok Renderowania Oświetlenie mgr inż. 1/38 Podejście śledzenia promieni (ang. ray tracing) stosuje się w grafice realistycznej. Śledzone są promienie przechodzące przez piksele obrazu wynikowego
INSTRUKCJA UŻYTKOWNIKA. Spis treści. I. Wprowadzenie... 2. II. Tworzenie nowej karty pracy... 3. a. Obiekty... 4. b. Nauka pisania...
INSTRUKCJA UŻYTKOWNIKA Spis treści I. Wprowadzenie... 2 II. Tworzenie nowej karty pracy... 3 a. Obiekty... 4 b. Nauka pisania... 5 c. Piktogramy komunikacyjne... 5 d. Warstwy... 5 e. Zapis... 6 III. Galeria...
Zdarzenia Zdarzenia onload i onunload
Zdarzenia Zdarzenia onload i onunload Ćwiczenie 1. Rysunek 1. Okno powitalne wykorzystujące zdarzenie onload Na stronie mogą zachodzić różne zdarzenia, np. użytkownik kliknie myszą lub zacznie wprowadzać
Bartosz Bazyluk SYNTEZA GRAFIKI 3D Grafika realistyczna i czasu rzeczywistego. Pojęcie sceny i kamery. Grafika Komputerowa, Informatyka, I Rok
SYNTEZA GRAFIKI 3D Grafika realistyczna i czasu rzeczywistego. Pojęcie sceny i kamery. Grafika Komputerowa, Informatyka, I Rok Synteza grafiki 3D Pod pojęciem syntezy grafiki rozumiemy stworzenie grafiki
Tworzenie nowego rysunku Bezpośrednio po uruchomieniu programu zostanie otwarte okno kreatora Nowego Rysunku.
1 Spis treści Ćwiczenie 1...3 Tworzenie nowego rysunku...3 Ustawienia Siatki i Skoku...4 Tworzenie rysunku płaskiego...5 Tworzenie modeli 3D...6 Zmiana Układu Współrzędnych...7 Tworzenie rysunku płaskiego...8
Kod źródłowy programu: program Grafika1; uses crt, graph; (1) var sterownik, tryb:smallint; (2)
Grafika w Pascalu. Do tej pory, tworząc programy w Pascalu, wykorzystywaliśmy jedynie tryb tekstowy. Jednak Pascal, tak jak i inne języki programowania, umoŝliwia korzystanie równieŝ z trybu graficznego.
3 Przygotował: mgr inż. Maciej Lasota
Laboratorium nr 3 1/5 Grafika Komputerowa 3D Instrukcja laboratoryjna Temat: Rysowanie prymitywów 3 Przygotował: mgr inż. Maciej Lasota 1) Rysowanie prymitywów Podstawową rodziną funkcji wykorzystywanych
Smarty PHP. Leksykon kieszonkowy
IDZ DO PRZYK ADOWY ROZDZIA SPIS TREœCI KATALOG KSI EK KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG Smarty PHP. Leksykon kieszonkowy Autor: Daniel Bargie³ ISBN: 83-246-0676-9 Format: B6, stron: 112 TWÓJ KOSZYK
5.4. Tworzymy formularze
5.4. Tworzymy formularze Zastosowanie formularzy Formularz to obiekt bazy danych, który daje możliwość tworzenia i modyfikacji danych w tabeli lub kwerendzie. Jego wielką zaletą jest umiejętność zautomatyzowania
DesignCAD 3D Max 24.0 PL
DesignCAD 3D Max 24.0 PL Październik 2014 DesignCAD 3D Max 24.0 PL zawiera następujące ulepszenia i poprawki: Nowe funkcje: Tryb RedSDK jest teraz dostępny w widoku 3D i jest w pełni obsługiwany przez
1 Podstawy c++ w pigułce.
1 Podstawy c++ w pigułce. 1.1 Struktura dokumentu. Kod programu c++ jest zwykłym tekstem napisanym w dowolnym edytorze. Plikowi takiemu nadaje się zwykle rozszerzenie.cpp i kompiluje za pomocą kompilatora,
Przekształcenia geometryczne. Dorota Smorawa
Przekształcenia geometryczne Dorota Smorawa Przekształcenia geometryczne Na poprzednich laboratoriach już dowiedzieliśmy się, na czym polegają podstawowe przekształcenia geometryczne. Trzy podstawowe przekształcenia
Dodawanie grafiki i obiektów
Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,
Grafika trójwymiarowa
Strona 1 Grafika 3D w systemie Android Wprowadzenie do OpenGL ES Podstawy rysowania Rzutowanie i kamera Klasa GLSurfaceView Algorytm rysowania Tekstury Strona 2 Grafika 3D w systemie Android W komputerach,
Laboratorium 1. Część I. Podstawy biblioteki graficznej OpenGL.
Laboratorium 1 Część I Podstawy biblioteki graficznej OpenGL. I. Konfiguracja środowiska 1. Ściągamy bibliotekę freeglut i rozpakujemy do głównego folderu dysku systemowego np. C:\freeglut 2. Uruchamiamy
Celem tego projektu jest stworzenie
Prosty kalkulator Celem tego projektu jest stworzenie prostego kalkulatora, w którym użytkownik będzie podawał dwie liczby oraz działanie, które chce wykonać. Aplikacja będzie zwracała wynik tej operacji.
Rzutowanie z 4D na 3D
Politechnika Wrocławska Instytut Informatyki Automatyki i Robotyki Wizualizacja danych sensorycznych Rzutowanie z 4D na 3D Autor: Daniel Piłat Opiekun projektu: dr inż. Bogdan Kreczmer 15 czerwca 2010
1 Podstawy c++ w pigułce.
1 Podstawy c++ w pigułce. 1.1 Struktura dokumentu. Kod programu c++ jest zwykłym tekstem napisanym w dowolnym edytorze. Plikowi takiemu nadaje się zwykle rozszerzenie.cpp i kompiluje za pomocą kompilatora,
Podstawy programowania 2. Przygotował: mgr inż. Tomasz Michno
Instrukcja laboratoryjna 2 Podstawy programowania 2 Temat: Zmienne dynamiczne tablica wskaźników i stos dynamiczny Przygotował: mgr inż. Tomasz Michno 1 Wstęp teoretyczny 1.1 Tablice wskaźników Tablice
Tworzenie prezentacji w MS PowerPoint
Tworzenie prezentacji w MS PowerPoint Program PowerPoint dostarczany jest w pakiecie Office i daje nam możliwość stworzenia prezentacji oraz uatrakcyjnienia materiału, który chcemy przedstawić. Prezentacje
Unity. Platforma do tworzenia gier dla różnych systemów docelowych, m.in.: Windows, macos, ios, Android, Powstała w 2005 r., obecnie wersja 5.3.
Unity Unity Platforma do tworzenia gier dla różnych systemów docelowych, m.in.: Windows, macos, ios, Android, Powstała w 2005 r., obecnie wersja 5.3.5 Unity Wymagania systemowe: Windows 7SP1, 8, 10 Mac
Zatem standardowe rysowanie prymitywów wygląda następująco:
Instrukcja laboratoryjna 10 Grafika komputerowa 3D Temat: Prymitywy Przygotował: dr inż. Grzegorz Łukawski, mgr inż. Maciej Lasota, mgr inż. Tomasz Michno 1 Wstęp teoretyczny Prymitywy proste figury geometryczne,
Zad. 6: Sterowanie robotem mobilnym
Zad. 6: Sterowanie robotem mobilnym 1 Cel ćwiczenia Utrwalenie umiejętności modelowania kluczowych dla danego problemu pojęć. Tworzenie diagramu klas, czynności oraz przypadków użycia. Wykorzystanie dziedziczenia
Specyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
Ćwiczenie 1 Galeria zdjęć
Galeria zdjęć Pobierz przykład (http://jsekulska.kis.p.lodz.pl/studia.htm). Krok 1 Ustawienie stołu montażowego Otwieramy nowy plik i nazywamy go (np. gallery.fla). Ustawiamy wielkość pola roboczego na
TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty
1. Co to jest funkcja? Funkcja jest oddzielnym blokiem kodu, który może być wielokrotnie wykonywany w danym programie, poprzez jej wielokrotne wywoływanie. Do funkcji przekazujemy przeważnie jakieś argumenty,
1 Zrozumieć Flasha... 1 Co można zrobić za pomocą Flasha?... 2 Tworzenie obrazków do strony 3 Animowanie witryny 4 Tworzenie filmów
1 Zrozumieć Flasha... 1 Co można zrobić za pomocą Flasha?... 2 Tworzenie obrazków do strony WWW... 3 Animowanie witryny WWW... 4 Tworzenie filmów interaktywnych... 6 Wyświetlanie przycisków... 7 Transformacja
GRAFIKA CZASU RZECZYWISTEGO Wprowadzenie do OpenGL
GRAFIKA CZASU RZECZYWISTEGO Wprowadzenie do OpenGL Grafika komputerowa i wizualizacja, Bioinformatyka S1, II Rok OpenGL Open Graphics Library Jest to API pozwalające na renderowanie grafiki w czasie rzeczywistym,
Wprowadzenie. Artur Staszczyk Bartłomiej Filipek
Wprowadzenie Artur Staszczyk www.astaszczyk.com Bartłomiej Filipek www.bartlomiejfilipek.pl Bartlomiej.filipek@gmail.com Podstawy grafiki 3D GPU Co to jest OpenGL Potok Graficzny Inicjalizacja Rendering
Simba 3D LOGO. Cele zajęć: - Poznanie zasad i sposobów tworzenia procedur z parametrami. - Poznanie zasad wywoływania procedur z parametrami.
Simba 3D LOGO Scenariusz lekcji Dokument zawiera cykl proponowanych scenariuszy lekcji z wykorzystaniem programu dydaktycznego Simba 3D LOGO. Program ten oparty jest na edukacyjnym języku programowania
Unity 3D - własny ekran startowy i menu gry
www.math.uni.lodz.pl/ radmat Cel ćwiczeń Celem bieżących ćwiczeń jest stworzenie własnego ekranu startowego oraz menu gry. Własny ekran startowy Tworzymy nowy, pusty obiekt GameObject Create Empty i nadajemy
Ćwiczenie 14 Dmuchawce
Dmuchawce Celem ćwiczenia jest wykorzystanie właściwości programu Flash do generowania animacji o charakterze losowym. Prezentowany efekt można wykorzystać do wielu różnych celów np. spadające liście,
Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1]
JAVA wprowadzenie do programowania (3/3) [1] Czym jest aplikacja Java Web Start? Aplikacje JAWS są formą pośrednią pomiędzy apletami a aplikacjami Javy. Nie wymagają do pracy przeglądarki WWW, jednak mogą
Dokumentacja WebMaster ver 1.0
1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak
OpenGL - tekstury Mapowanie tekstur
OpenGL - tekstury Mapowanie tekstur Mirosław Głowacki 1 1 Akademia Górniczo-Hutnicza im. Stanisława Staszica w Krakowie Wydział Inżynierii Metali i Informatyki Stosowanej Katedra Informatyki Stosowanej
Rys.2.1. Drzewo modelu DOM [1]
1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model
Aleksandra Zając. Raport. Blender. Pokemon: Eevee
Aleksandra Zając Raport Blender Pokemon: Eevee 1. Modelowanie Przed rozpoczęciem modelowania do Blendera załadowałam obraz przedstawiający wybranego pokemona, aby podczas modelowania jak najlepiej odwzorować
KATEGORIA OBSZAR WIEDZY
Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z
Widoczność zmiennych Czy wartości każdej zmiennej można zmieniać w dowolnym miejscu kodu? Czy można zadeklarować dwie zmienne o takich samych nazwach?
Część XVIII C++ Funkcje Widoczność zmiennych Czy wartości każdej zmiennej można zmieniać w dowolnym miejscu kodu? Czy można zadeklarować dwie zmienne o takich samych nazwach? Umiemy już podzielić nasz
Defilada - przykład wykorzystujący animowane modele Copperlicht. Andrzej P.Urbański Politechnika Poznańska
Defilada - przykład wykorzystujący animowane modele Copperlicht Andrzej P.Urbański Politechnika Poznańska Czego potrzebujemy? Animowane postacie potrafiące wykonywać różne ruchy cząstkowe np.: chodzić,
Wykład 4. Rendering (1) Informacje podstawowe
Wykład 4. Rendering (1) Informacje podstawowe Z punktu widzenia dzisiejszego programowania gier: Direct3D jest najczęściej wykorzystywanym przez profesjonalnych deweloperów gier API graficznym na platformie
Grafika Komputerowa Materiały Laboratoryjne
Grafika Komputerowa Materiały Laboratoryjne Laboratorium 6 Processing c.d. Wstęp Laboratorium 6 poszerza zagadnienie generowania i przetwarzania obrazów z wykorzystaniem języka Processing 2, dedykowanego
Ćwiczenie dodatkowe - Wybrane narzędzia modelowania Zadanie Przygotować model stołu z krzesłami jak na rysunku poniżej(rys. 1).
Ćwiczenie dodatkowe - Wybrane narzędzia modelowania Zadanie Przygotować model stołu z krzesłami jak na rysunku poniżej(rys. 1). Wymiary krzesła: wymiary przednich nóg: 1 x 1 x 6 wymiary tylnich nóg połączonych
Funkcje i instrukcje języka JavaScript
Funkcje i instrukcje języka JavaScript 1. Cele lekcji a) Wiadomości Uczeń : zna operatory i typy danych języka JavaScript, zna konstrukcję definicji funkcji, zna pętlę If i For, Do i While oraz podaje
Sylabus Moduł 2: Przetwarzanie tekstów
Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera
Część II Wyświetlanie obrazów
Tło fragmentu ABA-X Display jest wyposażony w mechanizm automatycznego tworzenia tła fragmentu. Najprościej można to wykonać za pomocą skryptu tlo.sh: Składnia: tlo.sh numer oznacza numer
Architektura interfejsu użytkownika
Uniwersytet Jagielloński Interfejsy graficzne Wykład 3 Architektura interfejsu użytkownika Barbara Strug 2011 Hall of shame Hall of Shame Hall of Fame O czym dzisiaj Model Widok- Kontroler Hierarchia widoków
Animacje z zastosowaniem suwaka i przycisku
Animacje z zastosowaniem suwaka i przycisku Animacja Pole równoległoboku Naukę tworzenia animacji uruchamianych na przycisk zaczynamy od przygotowania stosunkowo prostej animacji, za pomocą, której można
JĘZYKI PROGRAMOWANIA Z PROGRAMOWANIEM OBIEKTOWYM. Wykład 6
JĘZYKI PROGRAMOWANIA Z PROGRAMOWANIEM OBIEKTOWYM Wykład 6 1 SPECYFIKATOR static Specyfikator static: Specyfikator ten powoduje, że zmienna lokalna definiowana w obrębie danej funkcji nie jest niszczona