Wprowadzenie do WebGL

Wielkość: px
Rozpocząć pokaz od strony:

Download "Wprowadzenie do WebGL"

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

Systemy wirtualnej rzeczywistości. Komponenty i serwisy

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

Bardziej szczegółowo

Bartłomiej Filipek www.ii.uj.edu.pl/~filipek

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

Bardziej szczegółowo

Programowanie gier 3D w HTML5. Andrzej P.Urbański Politechnika Poznańska

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

Bardziej szczegółowo

2 Przygotował: mgr inż. Maciej Lasota

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:

Bardziej szczegółowo

Mobilne aplikacje multimedialne. OpenGL

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

Bardziej szczegółowo

Multimedia i interfejsy. Ćwiczenie 5 HTML5

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

Bardziej szczegółowo

Druga aplikacja Prymitywy, alpha blending, obracanie bitmap oraz mały zestaw przydatnych funkcji wyświetlających własnej roboty.

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

Bardziej szczegółowo

Janusz Ganczarski. OpenGL Pierwszy program

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...........................

Bardziej szczegółowo

Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji

Ć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

Bardziej szczegółowo

Sieciowe Technologie Mobilne. Laboratorium 4

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

Bardziej szczegółowo

WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS

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

Bardziej szczegółowo

Plan wykładu. Akcelerator 3D Potok graficzny

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

Bardziej szczegółowo

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript

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.

Bardziej szczegółowo

znajdowały się różne instrukcje) to tak naprawdę definicja funkcji main.

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

Bardziej szczegółowo

Obsługa grafiki w Delphi, rysowanie na płótnie, obsługa myszki, zapisywanie obrazków do plików, bitmapy pozaekranowe.

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

Bardziej szczegółowo

Sieciowe Technologie Mobilne. Laboratorium 2

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

Bardziej szczegółowo

1. Opis okna podstawowego programu TPrezenter.

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

Bardziej szczegółowo

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. 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

Bardziej szczegółowo

Kod źródłowy programu: program Grafika1; uses crt, graph; (1) var sterownik, tryb:smallint; (2)

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.

Bardziej szczegółowo

Przy dużej wielkości głębokości uzyskamy wrażenie nieskończoności: Dla głębokości zerowej uzyskamy tekst płaski:

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

Bardziej szczegółowo

1 Podstawy c++ w pigułce.

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,

Bardziej szczegółowo

Zdarzenia Zdarzenia onload i onunload

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ć

Bardziej szczegółowo

Grafika trójwymiarowa

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,

Bardziej szczegółowo

Wprowadzenie do rysowania w 3D. Praca w środowisku 3D

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ć

Bardziej szczegółowo

Laboratorium 7 Blog: dodawanie i edycja wpisów

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ą

Bardziej szczegółowo

GRAFIKA CZASU RZECZYWISTEGO Wprowadzenie do OpenGL

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,

Bardziej szczegółowo

1 Podstawy c++ w pigułce.

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,

Bardziej szczegółowo

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... 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...

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

DesignCAD 3D Max 24.0 PL

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

Bardziej szczegółowo

Rys.2.1. Drzewo modelu DOM [1]

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

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Smarty PHP. Leksykon kieszonkowy

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

Bardziej szczegółowo

która metoda jest najlepsza

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

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

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

Bardziej szczegółowo

Tworzenie nowego rysunku Bezpośrednio po uruchomieniu programu zostanie otwarte okno kreatora Nowego Rysunku.

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

Bardziej szczegółowo

Podstawy programowania 2. Przygotował: mgr inż. Tomasz Michno

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

Bardziej szczegółowo

Dokumentacja WebMaster ver 1.0

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

Bardziej szczegółowo

Simba 3D LOGO. Cele zajęć: - Poznanie zasad i sposobów tworzenia procedur z parametrami. - Poznanie zasad wywoływania procedur z parametrami.

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

Bardziej szczegółowo

Wykład 4. Rendering (1) Informacje podstawowe

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

Bardziej szczegółowo

Ćwiczenie: JavaScript Cookies (3x45 minut)

Ćwiczenie: JavaScript Cookies (3x45 minut) Ćwiczenie: JavaScript Cookies (3x45 minut) Cookies niewielkie porcje danych tekstowych, które mogą być przesyłane między serwerem a przeglądarką. Przeglądarka przechowuje te dane przez określony czas.

Bardziej szczegółowo

Spis treści. Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3. Wprowadzenie... 9

Spis treści. Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3. Wprowadzenie... 9 Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3 Spis treści Wprowadzenie... 9 1. Opis programu i instalacja... 13 1.1. Nowości w SWiSH Max2... 13 1.1.1. Wygląd okna programu... 13 1.1.2. Język skryptowy...

Bardziej szczegółowo

Sylabus Moduł 2: Przetwarzanie tekstów

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

Bardziej szczegółowo

ANDROID. OpenGL ES 1.0. Tomasz Dzieniak

ANDROID. OpenGL ES 1.0. Tomasz Dzieniak ANDROID OpenGL ES 1.0 Tomasz Dzieniak Wymagania JRE & JDK 5.0 + IDE (Eclipse 3.3.1 + / Netbeans 7.0.0 +) Android SDK Starter Package Android SDK Components Pierwszy program Project name: OpenGL Build Target:

Bardziej szczegółowo

Część II Wyświetlanie obrazów

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

Bardziej szczegółowo

PyGame Gra w Ponga. Spis treści

PyGame Gra w Ponga. Spis treści - 1 - PyGame Gra w Ponga Opis implementacji: Używając biblioteki PyGame oraz języka Python, stworzymy prostą grę Pong. Autorzy: Łukasz Zarzecki, Robert Bednarz Czas realizacji: 90 min Poziom trudności:

Bardziej szczegółowo

Funkcje i instrukcje języka JavaScript

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

Bardziej szczegółowo

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

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,

Bardziej szczegółowo

Rysowanie punktów na powierzchni graficznej

Rysowanie punktów na powierzchni graficznej Rysowanie punktów na powierzchni graficznej Tworzenie biblioteki rozpoczniemy od podstawowej funkcji graficznej gfxplot() - rysowania pojedynczego punktu na zadanych współrzędnych i o zadanym kolorze RGB.

Bardziej szczegółowo

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 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ć,

Bardziej szczegółowo

Laboratorium grafiki komputerowej i animacji. Ćwiczenie V - Biblioteka OpenGL - oświetlenie sceny

Laboratorium grafiki komputerowej i animacji. Ćwiczenie V - Biblioteka OpenGL - oświetlenie sceny Laboratorium grafiki komputerowej i animacji Ćwiczenie V - Biblioteka OpenGL - oświetlenie sceny Przygotowanie do ćwiczenia: 1. Zapoznać się ze zdefiniowanymi w OpenGL modelami światła i właściwości materiałów.

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed

Bardziej szczegółowo

Przekształcenie danych przestrzennych w interaktywne mapy dostępne na stronach www (WARSZTATY, poziom zaawansowany)

Przekształcenie danych przestrzennych w interaktywne mapy dostępne na stronach www (WARSZTATY, poziom zaawansowany) Wrocławski Instytut Zastosowań Informacji Przestrzennej i Sztucznej Inteligencji Przekształcenie danych przestrzennych w interaktywne mapy dostępne na stronach www (WARSZTATY, poziom zaawansowany) Szkolenia

Bardziej szczegółowo

Grafika w aplikacjach lp. Jak zmienić kolor tła?

Grafika w aplikacjach lp. Jak zmienić kolor tła? Grafika w aplikacjach lp W tym rozdziale znajdziesz informacje jak osadzić w tworzonym programie zdjęcia, rysunki, wykresy i inne elementy graficzne. W środowisku lp autor ma dostęp do następujących obiektów

Bardziej szczegółowo

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?

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

Bardziej szczegółowo

Allegro5 3/x. Przykład wklejamy go do dev'a zamiast kodu domyślnego dal programu z allegro i kompilujemy.

Allegro5 3/x. Przykład wklejamy go do dev'a zamiast kodu domyślnego dal programu z allegro i kompilujemy. Allegro5 3/x. Przykład wklejamy go do dev'a zamiast kodu domyślnego dal programu z allegro i kompilujemy. #include #include #include #include

Bardziej szczegółowo

KGGiBM GRAFIKA INŻYNIERSKA Rok III, sem. VI, sem IV SN WILiŚ Rok akademicki 2011/2012

KGGiBM GRAFIKA INŻYNIERSKA Rok III, sem. VI, sem IV SN WILiŚ Rok akademicki 2011/2012 Rysowanie precyzyjne 7 W ćwiczeniu tym pokazane zostaną wybrane techniki bardzo dokładnego rysowania obiektów w programie AutoCAD 2012, między innymi wykorzystanie punktów charakterystycznych. Narysować

Bardziej szczegółowo

Aplikacja projektu Program wycinki drzew i krzewów dla RZGW we Wrocławiu

Aplikacja projektu Program wycinki drzew i krzewów dla RZGW we Wrocławiu Aplikacja projektu Program wycinki drzew i krzewów dla RZGW we Wrocławiu Instrukcja obsługi Aplikacja wizualizuje obszar projektu tj. Dorzecze Środkowej Odry będące w administracji Regionalnego Zarządu

Bardziej szczegółowo

Krótki kurs JavaScript

Krótki kurs JavaScript Krótki kurs JavaScript Java Script jest językiem wbudowanym w przeglądarkę. Gdy ma się podstawy nabyte w innych językach programowania jest dość łatwy do opanowania. JavaScript jest stosowany do powiększania

Bardziej szczegółowo

Tworzenie prezentacji w MS PowerPoint

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

Bardziej szczegółowo

Szybkie tworzenie grafiki w GcIde

Szybkie tworzenie grafiki w GcIde Szybkie tworzenie grafiki w GcIde Opracował: Ryszard Olchawa Poniższy opis dotyczy aplikacji okienkowej w systemie Windows lub Linux bazującej na obiektowej bibliotece rofrm stworzonej w środowisku GcIde.

Bardziej szczegółowo

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape Program InkScape jest bezpłatnym polskojęzycznym programem grafiki wektorowej do pobrania ze strony http://www.dobreprogramy.pl/inkscape,program,windows,12218.html.

Bardziej szczegółowo

SPOSOBY POMIARU KĄTÓW W PROGRAMIE AutoCAD

SPOSOBY POMIARU KĄTÓW W PROGRAMIE AutoCAD Dr inż. Jacek WARCHULSKI Dr inż. Marcin WARCHULSKI Mgr inż. Witold BUŻANTOWICZ Wojskowa Akademia Techniczna SPOSOBY POMIARU KĄTÓW W PROGRAMIE AutoCAD Streszczenie: W referacie przedstawiono możliwości

Bardziej szczegółowo

Rysowanie precyzyjne. Polecenie:

Rysowanie precyzyjne. Polecenie: 7 Rysowanie precyzyjne W ćwiczeniu tym pokazane zostaną różne techniki bardzo dokładnego rysowania obiektów w programie AutoCAD 2010, między innymi wykorzystanie punktów charakterystycznych. Z uwagi na

Bardziej szczegółowo

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia nowego projektu (poniżej są utworzone projekty) Po kliknięciu

Bardziej szczegółowo

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. IŚ ćw.8 JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript

Bardziej szczegółowo

Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego

Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt graficzny z metamorfozą (ćwiczenie dla grup I i II modułowych) Otwórz nowy rysunek. Ustal rozmiar arkusza na A4. Z przybornika wybierz rysowanie elipsy (1). Narysuj okrąg i nadaj mu średnicę 100

Bardziej szczegółowo

Delphi podstawy programowania. Środowisko Delphi

Delphi podstawy programowania. Środowisko Delphi Delphi podstawy programowania Środowisko Delphi Olsztyn 2004 Delphi Programowanie obiektowe - (object-oriented programming) jest to metodologia tworzeniu programów komputerowych definiująca je jako zbiór

Bardziej szczegółowo

GRAFIKA WEKTOROWA. WYKŁAD 1 Wprowadzenie do grafiki wektorowej. Jacek Wiślicki Katedra Informatyki Stosowanej

GRAFIKA WEKTOROWA. WYKŁAD 1 Wprowadzenie do grafiki wektorowej. Jacek Wiślicki Katedra Informatyki Stosowanej GRAFIKA WEKTOROWA WYKŁAD 1 Wprowadzenie do grafiki wektorowej Jacek Wiślicki Katedra Informatyki Stosowanej Grafika rastrowa i wektorowa W grafice dwuwymiarowej wyróżnia się dwa rodzaje obrazów: rastrowe,

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

Obiektowy PHP. Czym jest obiekt? Definicja klasy. Składowe klasy pola i metody

Obiektowy PHP. Czym jest obiekt? Definicja klasy. Składowe klasy pola i metody Obiektowy PHP Czym jest obiekt? W programowaniu obiektem można nazwać każdy abstrakcyjny byt, który programista utworzy w pamięci komputera. Jeszcze bardziej upraszczając to zagadnienie, można powiedzieć,

Bardziej szczegółowo

Celem ćwiczenia jest zapoznanie się z podstawowymi funkcjami i pojęciami związanymi ze środowiskiem AutoCAD 2012 w polskiej wersji językowej.

Celem ćwiczenia jest zapoznanie się z podstawowymi funkcjami i pojęciami związanymi ze środowiskiem AutoCAD 2012 w polskiej wersji językowej. W przygotowaniu ćwiczeń wykorzystano m.in. następujące materiały: 1. Program AutoCAD 2012. 2. Graf J.: AutoCAD 14PL Ćwiczenia. Mikom 1998. 3. Kłosowski P., Grabowska A.: Obsługa programu AutoCAD 14 i 2000.

Bardziej szczegółowo

Zastosowania Robotów Mobilnych

Zastosowania Robotów Mobilnych Zastosowania Robotów Mobilnych Temat: Zapoznanie ze środowiskiem Microsoft Robotics Developer Studio na przykładzie prostych problemów nawigacji. 1) Wstęp: Microsoft Robotics Developer Studio jest popularnym

Bardziej szczegółowo

Ćwiczenie 3: Rysowanie obiektów w programie AutoCAD 2010

Ćwiczenie 3: Rysowanie obiektów w programie AutoCAD 2010 Ćwiczenie 3: Rysowanie obiektów w programie AutoCAD 2010 1 Przeznaczone dla: nowych użytkowników programu AutoCAD Wymagania wstępne: brak Czas wymagany do wykonania: 15 minut W tym ćwiczeniu Lekcje zawarte

Bardziej szczegółowo

Ciekawym rozwiązaniem służącym do obsługi zdarzeń dla kilku przycisków w ramach jednej aktywności może być następujący kod:

Ciekawym rozwiązaniem służącym do obsługi zdarzeń dla kilku przycisków w ramach jednej aktywności może być następujący kod: 1. Listener dla przycisku. Ciekawym rozwiązaniem służącym do obsługi zdarzeń dla kilku przycisków w ramach jednej aktywności może być następujący kod: W linii 24 tworzymy globalną metodę mglobal_onclicklistener,

Bardziej szczegółowo

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Cz. 4. Animacje, przejścia, pokaz slajdów Dzięki animacjom nasza prezentacja może stać się bardziej dynamiczna, a informacje, które chcemy przekazać,

Bardziej szczegółowo

Kolejną czynnością będzie wyświetlenie dwóch pasków narzędzi, które służą do obsługi układów współrzędnych, o nazwach LUW i LUW II.

Kolejną czynnością będzie wyświetlenie dwóch pasków narzędzi, które służą do obsługi układów współrzędnych, o nazwach LUW i LUW II. Przestrzeń AutoCAD-a jest zbudowana wokół kartezjańskiego układu współrzędnych. Oznacza to, że każdy punkt w przestrzeni posiada trzy współrzędne (X,Y,Z). Do tej pory wszystkie rysowane przez nas projekty

Bardziej szczegółowo

RYSUNEK TECHNICZNY I GEOMETRIA WYKREŚLNA INSTRUKCJA DOM Z DRABINĄ I KOMINEM W 2D

RYSUNEK TECHNICZNY I GEOMETRIA WYKREŚLNA INSTRUKCJA DOM Z DRABINĄ I KOMINEM W 2D Politechnika Białostocka Wydział Budownictwa i Inżynierii Środowiska Zakład Informacji Przestrzennej Inżynieria Środowiska INSTRUKCJA KOMPUTEROWA z Rysunku technicznego i geometrii wykreślnej RYSUNEK TECHNICZNY

Bardziej szczegółowo

Podstawy pozycjonowania CSS

Podstawy pozycjonowania CSS Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"

Bardziej szczegółowo

Jak przygotować pliki gotowe do publikacji w sieci za pomocą DigitLabu?

Jak przygotować pliki gotowe do publikacji w sieci za pomocą DigitLabu? Jak przygotować pliki gotowe do publikacji w sieci za pomocą DigitLabu? Po zainstalowaniu DigitLabu na komputerze otrzymujemy pakiet programów niezbędnych do przygotowania cyfrowych wersji obiektów tekstowych.

Bardziej szczegółowo

Programowanie na poziomie sprzętu. Programowanie w Windows API

Programowanie na poziomie sprzętu. Programowanie w Windows API Programowanie w Windows API Windows API Windows Application Programming Interface (API) to zestaw funkcji systemu operacyjnego Windows, które umożliwiają aplikacjom korzystanie z wszystkich usług systemu.

Bardziej szczegółowo

Kurs walut. Specyfikacja projektu. Marek Zając 2013-12-16

Kurs walut. Specyfikacja projektu. Marek Zając 2013-12-16 Kurs walut Specyfikacja projektu Marek Zając 2013-12-16 Spis treści 1. Podsumowanie... 2 1.1 Wstęp... 2 1.2 Projekt interfejsu... 2 1.2.1 Rozmiar głównego okna... 2 2. Słownik pojęć... 2 2.1 Definicja

Bardziej szczegółowo

Grafika Komputerowa Materiały Laboratoryjne

Grafika Komputerowa Materiały Laboratoryjne Grafika Komputerowa Materiały Laboratoryjne Laboratorium 10 Blender, podstawy Wstęp Blender jest rozbudowanym narzędziem do tworzenia i edycji obiektów, scen i animacji 3D. Poznanie go na przyzwoitym poziomie

Bardziej szczegółowo

KATEGORIA OBSZAR WIEDZY

KATEGORIA OBSZAR WIEDZY Moduł 6 - Grafika menedżerska i prezentacyjna - od kandydata wymaga się umiejętności posługiwania się programem komputerowym do tworzenia. Zdający powinien posiadać umiejętności wykonania następujących

Bardziej szczegółowo

KARTA KURSU (realizowanego w module specjalności) Modelowanie 3D

KARTA KURSU (realizowanego w module specjalności) Modelowanie 3D KARTA KURSU (realizowanego w module ) Multimedia i Technologie Internetowe (nazwa ) Nazwa Nazwa w j. ang. Modelowanie 3D 3D Modelling Kod Punktacja ECTS* 3 Koordynator mgr inż. Alicja Pituła Zespół dydaktyczny:

Bardziej szczegółowo

Grafika komputerowa INSTRUKCJA DO LABORATORIUM 2: operacje przestrzenne oraz obsługa klawiatury i myszki

Grafika komputerowa INSTRUKCJA DO LABORATORIUM 2: operacje przestrzenne oraz obsługa klawiatury i myszki Grafika komputerowa INSTRUKCJA DO LABORATORIUM 2: operacje przestrzenne oraz obsługa klawiatury i myszki Strona 1 z 9 C E L Ć W I C Z E N I A Celem ćwiczenia jest zapoznanie się z podstawowymi operacjami

Bardziej szczegółowo

Skalowanie i ustawianie arkuszy/układów wydruku w AutoCAD autor: M. Motylewicz, 2012

Skalowanie i ustawianie arkuszy/układów wydruku w AutoCAD autor: M. Motylewicz, 2012 1 z 72 Rysunek rysujemy w skali rzeczywistej tzn. jeżeli pas ruchu ma szerokość 3,5m to wpisujemy w AutoCAD: 3,5 jednostki (mapa oczywiście również musi być wstawiona w skali 1:1). Opisany w dalszym ciągu

Bardziej szczegółowo

Programowanie Strukturalne i Obiektowe Słownik podstawowych pojęć 1 z 5 Opracował Jan T. Biernat

Programowanie Strukturalne i Obiektowe Słownik podstawowych pojęć 1 z 5 Opracował Jan T. Biernat Programowanie Strukturalne i Obiektowe Słownik podstawowych pojęć 1 z 5 Program, to lista poleceń zapisana w jednym języku programowania zgodnie z obowiązującymi w nim zasadami. Celem programu jest przetwarzanie

Bardziej szczegółowo

Moduł Mikołajkowe kodowanie

Moduł Mikołajkowe kodowanie Moduł Mikołajkowe kodowanie I. Przygotowania przed zajęciami: 1. Instalacja środowiska Adobe i programu Scratch. 2. Wgranie plików graficznych i dźwiękowych na komputer. Możemy wgrać je z pendrive na komputer-

Bardziej szczegółowo

Instrukcja użytkownika

Instrukcja użytkownika SoftwareStudio Studio 60-349 Poznań, ul. Ostroroga 5 Tel. 061 66 90 641 061 66 90 642 061 66 90 643 061 66 90 644 fax 061 86 71 151 mail: poznan@softwarestudio.com.pl Herkules WMS.net Instrukcja użytkownika

Bardziej szczegółowo

Język JAVA podstawy. wykład 2, część 2. Jacek Rumiński. Politechnika Gdańska, Inżynieria Biomedyczna

Język JAVA podstawy. wykład 2, część 2. Jacek Rumiński. Politechnika Gdańska, Inżynieria Biomedyczna Język JAVA podstawy wykład 2, część 2 Jacek Rumiński 1 Język JAVA podstawy Plan wykładu: 1. Rodzaje programów w Javie 2. Tworzenie aplikacji 3. Tworzenie apletów 4. Obsługa archiwów 5. Wyjątki 6. Klasa

Bardziej szczegółowo

Sylabus Moduł 4: Grafika menedżerska i prezentacyjna

Sylabus Moduł 4: Grafika menedżerska i prezentacyjna Sylabus Moduł 4: Grafika menedżerska i prezentacyjna Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja

Bardziej szczegółowo

Podstawy 3D Studio MAX

Podstawy 3D Studio MAX Podstawy 3D Studio MAX 7 grudnia 2001 roku 1 Charakterystyka programu 3D Studio MAX jest zintegrowanym środowiskiem modelowania i animacji obiektów trójwymiarowych. Doświadczonemu użytkownikowi pozwala

Bardziej szczegółowo

6.4. Efekty specjalne

6.4. Efekty specjalne 6.4. Efekty specjalne Rozdział ten będzie poświęcony efektom specjalnym, które również znalazły swoje zastosowanie w programie MS PowerPoint 2007. Pierwszym typem efektów jaki zostanie poddany naszej analizie

Bardziej szczegółowo

QUERY język zapytań do tworzenia raportów w AS/400

QUERY język zapytań do tworzenia raportów w AS/400 QUERY język zapytań do tworzenia raportów w AS/400 Dariusz Bober Katedra Informatyki Politechniki Lubelskiej Streszczenie: W artykule przedstawiony został język QUERY, standardowe narzędzie pracy administratora

Bardziej szczegółowo

2 Przygotował: mgr inż. Maciej Lasota

2 Przygotował: mgr inż. Maciej Lasota Laboratorium nr 2 1/7 Język C Instrukcja laboratoryjna Temat: Wprowadzenie do języka C 2 Przygotował: mgr inż. Maciej Lasota 1) Wprowadzenie do języka C. Język C jest językiem programowania ogólnego zastosowania

Bardziej szczegółowo

I Tworzenie prezentacji za pomocą szablonu w programie Power-Point. 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu

I Tworzenie prezentacji za pomocą szablonu w programie Power-Point. 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu I Tworzenie prezentacji za pomocą szablonu w programie Power-Point 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu 2. Po wybraniu szablonu ukaŝe się nam ekran jak poniŝej 3. Następnie

Bardziej szczegółowo

grafika 2D i animacja obsługa rotacji i elementy 3D-OpenGL w Androidzie

grafika 2D i animacja obsługa rotacji i elementy 3D-OpenGL w Androidzie grafika 2D i animacja obsługa rotacji i elementy 3D-OpenGL w Androidzie Krzysztof Czech, 2 rok IZ Grzegorz Duszyński, 2 rok IZ Daniel Engel, 2 rok IZ Łukasz Olech, 2 rok IZ Radek Wilczak, 2 rok EKA Nadpisywanie

Bardziej szczegółowo

Instrukcja obsługi programu. BlazeVideo HDTV Player v6

Instrukcja obsługi programu. BlazeVideo HDTV Player v6 Instrukcja obsługi programu BlazeVideo HDTV Player v6 Spis treści 1. Opis programu...3 1.1 Wprowadzenie...3 1.2 Funkcje programu...3 1.3 Wymagania sprzętowe...4 2. Wygląd interfejsu...4 3. Obsługa programu...6

Bardziej szczegółowo