Pierwsze uruchomienie
Kolejne zadania będą dostarczane jako projekty w visual studio, które powinny być otwierane jako część jednego solution. Żeby uruchomić zadania należy pobrać i rozpakować solution znajdujące się pod adresem /grk/do_pobrania/grk.zip. Zawiera ono wszelkie potrzebne zależności. Następnie pobierz projekt dla określonego zadania (w tym wypadku zadania 1 znajdujące się /grk/do_pobrania/cw1.zip) i wkleić zawartość do folderu z Solution.
Struktura powinna wyglądać nastęująco:
Otwórz plik grk-cw.sln
w visual studio, ustaw projekt z ćwiczeniami jaki projekt startowy. Poszczególne zadania są dostarczane jako osobne pliki z rozszerzeniem hpp, żeby uruchomić zadanie zmień ostatni include.
Opis projektu
W zadaniach korzystamy z kilku bibliotek, mianowicie:
- GLEW OpenGL Extension Wrangler Library - biblioteka odpowiedzialna za ładowanie opengla, umożliwia zdeterminowanie jakie wersje opengla są obsługiwane na maszynie i jakie rozszerzenia są dostęne.
- GLFW Graphics Library Framework - biblioteka umożliwiająca tworzenie okien i obsługę wejścia użytkownika. Pozwala na stworzenie więcej niż jednego okna i posiada obsługę nie tylko klawiatury i myszy, ale również padów i joysticków.
- GLM OpenGL Mathematics - biblioteka matematyczna.
Omówienie pliku main.cpp
Rozpocznijmy od funkcji main.
#include "glew.h"
#include <GLFW/glfw3.h>
#include "glm.hpp"
#include "Shader_Loader.h"
#include "Render_Utils.h"
#include "ex_1_1.hpp"
int main(int argc, char ** argv)
{
// inicjalizacja glfw
glfwInit();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
#ifdef __APPLE__
glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
#endif
// tworzenie okna za pomocą glfw
GLFWwindow* window = glfwCreateWindow(500, 500, "FirstWindow", NULL, NULL);
if (window == NULL)
{
std::cout << "Failed to create GLFW window" << std::endl;
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
// ladowanie OpenGL za pomoca glew
glewInit();
glViewport(0, 0, 500, 500);
init(window);
// uruchomienie glownej petli
renderLoop(window);
shutdown(window);
glfwTerminate();
return 0;
}
W pierwszych trzech instrukcjach inicjalizujemy glfw za pomocą glfwInit()
. Za pomocą glfwWindowHint
ustawiamy wersję opengla na 3.3. Ta funkcja pozwala na ustawienie różnych opcji. Pełną listę można zobaczyć tutaj. Należy je wykonać przed utworzeniem okna.
Okno tworzymy funkcją glfwCreateWindow
, jako argumenty przekazujemy rozmiar okna i jego tytuł. Czwarty argument służy do ustawienia, na którym monitorze ma się okno pokazać, jeżeli będzie uruchomione w pełnym ekranie. Natomiast ostatni do przekazania kontekstu okna, jeżeli ma je współdzielić z innym. Nie będziemy korzystać z tych opcji, więc ustawiamy je na null. Funkcja zwraca wskaźnik na okno, który będzie nam potrzebny, żeby cokolwiek z nim zrobić. Ustawiamy okno na current
za pomocą funkcji glfwMakeContextCurrent
. W ten sposób przypisujemy okno do danego wątku.
glewInit
inicjalizuje opengla a glViewport
przekazuje jaki jest rozmiar okna do opengla.
Następne 3 funkcje init
, renderLoop
i shutdown
są naszymi funkcjami, które znajdują się w plikach z zadaniami (nazwa plik ex_X_Y.hpp
to X to numer ćwiczeń a Y to numer zadania).
Omówienie pliku ex_1_1.hpp
W funkcjach init
i shutdown
będziemy umieszczać instrukcje, które mają być wykonane raz przy odpowiednio uruchomieniu i wyłączeniu aplikacji.
W funkcji init
znajduje się jedna instrukcja, która ustawia, że framebuffer_size_callback
zostanie wywołana przy zmianie rozmiaru okna. Ta z kolei informuje opengla o zmianie rozmiaru ekranu za pomocą glViewport
Natomiast renderLoop
jest funkcją, która ma zawierać główną pętlę i wygląda następująco
void renderLoop(GLFWwindow* window) {
while (!glfwWindowShouldClose(window))
{
processInput(window);
renderScene(window);
glfwPollEvents();
}
}
pobiera ona okno i wykonuje na nim instrukcje w pętli, dopóki nie dostanie informacji, że ma być ono zamknięte. W tej chwili w pętli znajdują się dwie instrukcje odpowiedzialne za przetworzenie wejścia (czyli obsługę klawiatury i myszy) oraz odświeżenie sceny oraz glfwPollEvents()
, która sprawdza czy są jakieś zadania do wykonania (na przykład sprawdza, czy rozmiar okna został zmieniony).
void processInput(GLFWwindow* window)
{
if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
glfwSetWindowShouldClose(window, true);
}
W processInput
sprawdzamy tylko czy wciśnięto Esc, jeżeli tak, to ustawiamy, że aplikacja powinna być zamknięta
void renderScene(GLFWwindow* window)
{
// ZADANIE: Przesledz kod i komentarze
// ZADANIE: Zmien kolor tla sceny, przyjmujac zmiennoprzecinkowy standard RGBA
glClearColor(0.0f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
// Powinno byc wywolane po kazdej klatce
glfwSwapBuffers(window);
}
Natomiast w render scene ustawiamy kolor za pomocą funkcji glClearColor
i czyścimy bufory za pomocą glClear
, openGL korzysta z informacji, która przekazaliśmy w glClearColor
, żeby określić jakiego koloru ma być tło.
By uniknąć migotania glfw wykorzystuje double buffering to znaczy przechowuje dwa bufory, jeden jest wyświetlany a na drugim dokonuje się operacji (określa się je front i back). Po zakończeniu rysowania zamienia się je miejscami (swap). Robimy to za pomocą funkcji glfwSwapBuffers
.
Zadanie 1
Zmień kolor tła na dowolny inny.
Zadanie 1b*
Zmodyfikuj funkcję render scene tak, żeby kolor się zmieniał co klatkę. Możesz do tego skorzystać ze zmiennej globalnej lub czas działania, który możesz uzyskać funkcją glfwGetTime()
.
Ćwiczenie 1_2
Celem tego cwiczenia będzie narysowanie trójkąta. Zanim przejdziesz dalej, zamień linię #include "ex_1_1.hpp"
na #include "ex_1_2.hpp"
. Przejdź do pliku ex_1_2.hpp
Opengl operuje w kostce od $[-1,1]\times[-1,1]\times[-1,1]$, którą następnie patrzy wzdłóż osi Z. (nazywamy tą przestrzeń clip space więcej o tym na wykładzie). Pozostałe osie rozciąga na ekranie. Dodatkowo poza współrzędnymi X, Y, Z potrzebna jest wspórzędna W, która musi być równa 1. Znaczy to, że każdy punkt w trójkącie musi mieć cztery współrzędne, dwie pierwsze z nich zakresu od -1 do 1, trzecia równa 0 a ostatnie zawsze równa 1. Kolejność punktów jest również istotna, dzięki niej opengl określa orientację ścian. Domyślnie punkty powinny być zorientowane w kierunku przeciwnym do ruchu wskazówek zegra.
Zadanie 2
Wymyśl 3 punkty dla trójkąta i umieść je w płaskiej tablicy 12 floatów wewnątrz funkcji init
. Stworzoną tablicę należy załadować do pamięci karty graficznej przy inicjalizacji. Wykorzystaj do tego funkcję pomocniczą Core::initVAO
, jako pierwszy argument podaj tablicę, jako drugi liczbę wierzchołków a jako trzeci liczbę punktów w wierzchołku. Funkcja zwraca zmienną typu GLuint
, która jest identyfikatorem VAO w pamięci karty, przypisz go do zmiennej globalnej triangleVAO.
W tym zadaniu w funkcji init dochodzi kopilacja shaderów i połączeinu ich w shader program. Jest to program, który posłuży nam do wyświetlenia trójkątów. “Shader” to specjalny typ programu używanego w grafice komputerowej do renderowania obrazów. Działa na poziomie pikseli lub wierzchołków i jest używany do określenia, jak obiekty powinny być rysowane na ekranie, w tym ich koloru, jasności i innych efektów wizualnych (więcej o shaderach będzie na późniejszych zajęciach).
W renderScene
wykorzystaj funkcję Core::drawVAO
do narysowania trójkąta.
Ćwiczenie 1_3
Celem tego zadania będzie narysowanie czworokąta. Możemy to zrobić poprzez narysowanie dwóch trójkątów, ale jest nieefektywne, ponieważ powielimy dwa pounkty podwójnie (teraz nie jest to taka duża różnica, ale przy większej liczbie trójkątów jest bardziej istotne). Zamiast tego skorzystamy z indeksowania, czyli oprócz tablicy wierzchołków prześlemy też tablicę indeksów, które będą określać jakie punkty należy wykorzystać do rysowania wierzchołków.
Zadanie 3
Tym razem wymyśl 4 punkty i umieść je w analogicznej tablic 16 floatów. Oprócz tego stwórz tablicę typu unsigned int
i umieść w niej indeksy dla wóch trójkątów, które będą tworzych nasz czworokąt. Przekarz obie tablice do GPU za pomocą funcji Core::initVAOIndexed
. Następnie w funcji renderScene
użyj funkcji Core::drawVAOIndexed
analogicznie jak Core::drawVAO
w poprzednim zadaniu.
Ćwiczenia 1_4, 1_5, 1_6
Celem tych ćwiczeń jest wykorzystanie macierzy transformacji do przesuwania i obracania czworokąta definicje macierzy transformacji znajdziesz pod linkiem. Wykorzystaj definicję czworokąta z poprzedniego zadania. Zwróć uwagę na kolejność mnożenia macierzy.
Uważaj, konstruktor mat4
czyta tablicę float
kolumnami, czyli domyślnie będzie ona transponowana w stosunku do tego co jest na ekranie. Aby temu zapobiec używamy operacji transpozycji zanim użyjemy funkcji, żeby to zniwelować.
Zadanie 4
Wykonaj zadania opisane w plikach ex_1_4.hpp
,ex_1_5.hpp
,ex_1_6.hpp
,
Biblioteka GLM
OpenGL Mathematics (GLM) jest biblioteką matematyczną. Posiada to samo nazewnictwo co język shaderów GLSL, dzięki temu zaznajomienie się z jednym pomaga w obsłudze drugiego. Zawiera nie tylko funkcje znane z GLSL, ale jest również rozszerzony o dodatkowe możliwości jak obsługę macierzy przekształceń, kwaternionów, liczb losowych czy szum. Dokumentacja znajduje się pod linkiem https://glm.g-truc.net/0.9.9/api/modules.html. Ma ona opcję szukania, która pozwala na znalezienie konkretnych funkcji (choć czasem lepiej szukać na tej stronie przez inne wyszukiwarki np google). Przykładowo zobaczmy opis tyczący się transformacji, dostępny pod https://glm.g-truc.net/0.9.9/api/a00779.html. Na pierwszy rzut oka funkcje te wyglądają dość enigmatycznie, weźmy funkcję
mat< 4, 4, T, Q > translate (vec< 3, T, Q > const &v)
służy do tworzenia macierzy translacji. Przyjmuje ona jeden argument typu vec< 3, T, Q >
, który jest wektorem translacji i zwraca zmienną typu mat< 4, 4, T, Q >
, która jest macierzą translacji. Są to typy szablonowe, które w C++ umożliwiają programowanie generyczne. Więcej informacji o szablonach znajdziesz (tutaj) . Parametry szablonu są zapisywane między nawiasami klamrowymi, mogą to byś typy zmiennych lub inne parametry. W przypadku typu vec
szablon przyjmuje 3 argumenty: pierwszym z nich jest liczba komponentów wektora (w tym przypadku trzy), drugim jest typ danych komponentów a trzecim stopień precyzji, dwa ostatnie są “dowolne”. Natomiast mat
szablon przyjmuje 4 argumenty: dwa pierwsze określają kształt macierzy, dwa kolejne jak poprzednio określają typ danych i stopień precyzji. Zauważmy też, że T
i Q
są takie same w typach zmiennych na wejściu i wyjściu funkcji.
“Template” (w języku C++ nazywane też “szablonem”) to mechanizm w programowaniu, który pozwala na tworzenie funkcji lub klas, które mogą pracować z różnymi typami danych bez konieczności ich wielokrotnego definiowania. Umożliwia to tworzenie bardziej elastycznego i wielokrotnego użytku kodu.
W praktyce glm
posiada już zdefiniowane typy macierzowe i wektorowe w oparciu te szablony, dzięki nie musimy myśleć co się za nimi kryje będą nas interesować poniższe:
namespace glm{
...
//wektory
typedef vec< 2, float, defaultp > vec2
typedef vec< 3, float, defaultp > vec3
typedef vec< 4, float, defaultp > vec4
...
//macierze
typedef mat< 2, 2, float, defaultp > mat2
typedef mat< 3, 3, float, defaultp > mat3
typedef mat< 4, 4, float, defaultp > mat4
...
}
Jak zastąpimy generyczne typy z opisu translate
typami powyżej otrzymamy
glm::mat4 glm::translate (glm::vec3 const &v)
Podobnie z funkcjami rotate
i scale
, których opis znajdziemy pod linkiem. Funkcja rotate
przyjmuje kąt i wektor, który jest osią obrotu. może ona być trudna do użycia w niektórych wypadkach, łatwiejsza w użyciu może być implementacja obrotów za pomocą kątów eulera np korzystając z funkcji glm::eulerAngleXYZ
(link).
Zadanie 5
W pliku ex_1_7.hpp
powtórz zadanie z ex_1_6.hpp
ale zamiast samodzielnie pisać macierze wykorzystaj funkcje z glm
UWAGA macierze w glm są definiowane kolumnowo, to znaczy nie dodawaj operacji transponowania jak to miało miejsce w poprzednich zadaniach.
Obsługa wejścia przez GLFW
Za obsługę urządzenia wejścia, jak klawiatura myszka, pady czy joysticki, odpowiada biblioteka GLFW. Jest to opisane w dokumentacji pod linkiem https://www.glfw.org/docs/latest/group__input.html
Obsługa klawiatury
Klawiaturę obsługujemy w funkcji processInput
:
void processInput(GLFWwindow* window)
{
if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS){
glfwSetWindowShouldClose(window, true);
}
Aby sprawdzić czy przycisk został wciśnięty musimy odpytać funkcję glfwGetKey
. Pierwszym argumentem jest okno, natomiast drugim kod przycisku, listę wszystkich kodów można znaleźć pod linkiem https://www.glfw.org/docs/latest/group__keys.html.
Zadanie 6
W pliku ex_1_7.hpp
zaimplementuj przesuwanie kwadratu za pomocą przycisków strzałek. Zdefiniuj zmienną globalną glm::vec3 quadPos
, ustaw go jako wektor translacji. Następnie w funkcji processInput
dodaj zapytania o przyciski strzałek (kody znajdują się poniżej) i przesunięcia w górę, dół, prawo i lewo.
GLFW_KEY_UP
GLFW_KEY_DOWN
GLFW_KEY_RIGHT
GLFW_KEY_LEFT
Zadanie 6b*
Zrób dodatkowo obracanie czworościanu w prawo i w lewo wokół własnej osi za pomocą przycisków O i P.
Obsługa myszy
“Callback” to funkcja, która jest przekazywana jako argument do innej funkcji i jest wywoływana w odpowiedzi na pewne zdarzenie. W praktyce pozwala to na definiowanie, jak program powinien reagować na określone akcje, takie jak kliknięcie przycisku myszy czy naciśnięcie klawisza.
Mysz obsługujemy za pomocą funkcji zwrotnych (callbacków), wykorzystamy dwa
- cursor position callback - wywoływana, gdy ruszamy myszką na ekranie funkcja, którą podpinamy, to
cursor_position_callback(GLFWwindow* window, double xpos, double ypos)
- mouse button callback - wywoływana, gdy wciskamy przycisk. którą podpinamy, to
mouse_button_callback(GLFWwindow* window, int button, int action, int mods)
Wykorzystanie callbacków gwarantuje nam, że operacje będą wykonywane tylko wtedy, gdy tego chcemy. Nie gwarantowałaby nam tego funkcja processInput
.
Zadanie 7
Zakomentuj rozwiązanie zadania 6. Zmodyfikuj kod z w ex_1_7.hpp
, żeby kwadrat znajdował się w miejscu z myszką. wewnątrz funkcji cursor_position_callback
przypisz do współrzędnych x i y quadPos
wartości zmodyfikowane xpos
i ypos
.
Zmienne xPos
i yPos
są opisane w przestrzeni okna. Ich wartość są z przedziałów odpowiednio \([0,\text{width}]\) do \([0,\text{height}]\), gdzie height i width to rozmiar ekranu w pikselach, a punkt \((0,0)\) to lewy górny róg ekranu (co w szczególności oznacza, że oś \(Y\) jest skierowana w dół). Musimy je przekonwertować do współrzędnych z przestrzeni ekranu, które są z przedziału \([-1,1]\), a oś \(Y\) jest skierowana w górę.
Możemy to wykonać za pomocą wzorów.
$$x’=\frac{2x}{width}-1$$
$$y’=-\left(\frac{2y}{height}-1\right)$$
Rozmiar ekranu w pikselach to 500 na 500.
Zadanie 7b*
Zakomentuj rozwiązanie poprzedniego zadania. Na bazie jego dodaj funkcjonalność, polegającą na tym, że po wciśnięciu lewego przycisku myszy nowy czworokąt pojawi się w miejscu, w którym kliknęliśmy. Aby to zrobić uzupełnij funkcję mouse_button_callback
, wykorzystaj std::vector<glm::vec3> quadsPositions
umieszczaj w niej nowe pozycje kwadratów, następnie narysuj je w pętli wewnątrz renderScene
. Pamiętaj, żeby w mouse_button_callback
sprawdzić czy wyciśnięto lewy przycisk, sprawdź czy wartości button
i action
są odpowiednie.
Obsługa pada**
GLFW obsługuje również pady i joysticki, jest możliwość obsługi do 16 urządzeń tego typu. Opisane to zostało w pod linkiem https://www.glfw.org/docs/latest/input_guide.html#joystick.
Zadanie 8**
Uzależnij szybkość obrotów czworokąta od stopnia wciśnięcia lewego spustu (trigger) pada.