co to jest OpenGL ES, shadery, jak działają shadery, jak zacząć pracować z OpenGL ES w Android

1. TWORZENIE 3D GRAFIKI W
ANDROID
W OPARCIU O OPENGL ES
by Artem Shubovych

2. TREŚĆ
1. co to jest shadery
2. co można zrobić przy użyciu shaderów
3. jak działa stos renderingu
4. użycie shaderów w Android
5. sterowanie wyświetlieniem

3. DLACZEGO UŻYĆ OPENGL?
tworzenie gier
animacja
systemy CAD
graficzne przedstawienie informacji
(dla fanatyków) zwiększenie prędkości zwykłej aplikacji

4. DLACZEGO UŻYĆ OPENGL?
tworzenie gier
animacja

5. OPENGL PIPELINE
1. przetwarzanie koordynat
2. obliczenie oświetlenia
3. aplikacja materialów
wykrywanie koloru każdego wierzhołku
4. aplikacja tekstur
5. dopasowanie efektów
mgła, alpha test, depth test, pattern test, blending...
6. wyświetlenie na ekranie

6. EWOLUCJA PROGRAMISTY OPENGL

7. FIXED PIPELINE
g l B e g i n ( G L _ P O L Y G O N ) ;
g l C o l o r 3 f ( 0 , 1 , 0 ) ;
g l V e r t e x 3 f ( - 1 , - 1 , 0 ) ;
g l V e r t e x 3 f ( - 1 , 1 , 0 ) ;
g l V e r t e x 3 f ( 1 , 1 , 0 ) ;
g l V e r t e x 3 f ( 1 , - 1 , 0 ) ;
g l E n d ( ) ;

8. DISPLAY LISTS
G L u i n t i n d e x = g l G e n L i s t s ( 1 ) ;
g l N e w L i s t ( i n d e x , G L _ C O M P I L E ) ;
g l B e g i n ( G L _ P O L Y G O N ) ;
g l C o l o r 3 f ( 0 , 1 , 0 ) ;
g l V e r t e x 3 f ( - 1 , - 1 , 0 ) ;
g l V e r t e x 3 f ( - 1 , 1 , 0 ) ;
g l V e r t e x 3 f ( 1 , 1 , 0 ) ;
g l V e r t e x 3 f ( 1 , - 1 , 0 ) ;
g l E n d ( ) ;
g l E n d L i s t ( ) ;
/ / . . .
g l C a l l L i s t ( i n d e x ) ;

9. DRAWABLE ARRAYS
G L f l o a t v e r t i c e s [ ] = { - 1 , - 1 , 0 , - 1 , 1 , 0 , 1 , 1 , 0 , 1 , - 1 , 0 } ;
g l E n a b l e C l i e n t S t a t e ( G L _ V E R T E X _ A R R A Y ) ;
g l V e r t e x P o i n t e r ( 3 , G L _ F L O A T , 0 , v e r t i c e s ) ;
g l D r a w A r r a y s ( G L _ P O L Y G O N S , 0 , 4 ) ;
g l D i s a b l e C l i e n t S t a t e ( G L _ V E R T E X _ A R R A Y ) ;

10. VERTEX BUFFER OBJECTS
G L f l o a t v e r t i c e s [ ] = { - 1 , - 1 , 0 , - 1 , 1 , 0 , 1 , 1 , 0 , 1 , - 1 , 0 } ;
G L u i n t v b o I d ;
g l G e n B u f f e r s A R B ( 1 , & v b o I d ) ;
g l B i n d B u f f e r A R B ( G L _ A R R A Y _ B U F F E R _ A R B , v b o I d ) ;
g l B u f f e r D a t a A R B ( G L _ A R R A Y _ B U F F E R _ A R B , s i z e o f ( v e r t i c e s ) ,
v e r t i c e s , G L _ S T A T I C _ D R A W _ A R B ) ;
/ / . . .
g l B i n d B u f f e r A R B ( G L _ A R R A Y _ B U F F E R _ A R B , v b o I d ) ;
g l E n a b l e C l i e n t S t a t e ( G L _ V E R T E X _ A R R A Y ) ;
g l V e r t e x P o i n t e r ( 3 , G L _ F L O A T , 0 , 0 ) ;
g l D r a w A r r a y s ( G L _ P O L Y G O N S , 0 , 1 2 ) ;
g l D i s a b l e C l i e n t S t a t e ( G L _ V E R T E X _ A R R A Y ) ;
g l B i n d B u f f e r A R B ( G L _ A R R A Y _ B U F F E R _ A R B , 0 ) ;

11. SHADER - CO TO JEST?
krótki program komputerowy, (...), który w
grafice trójwymiarowej opisuje właściwości
pikseli oraz wierzchołków.

12. TYPY SHADERÓW
vertex shader
fragment shader
shader program

13. UŻYCIE SHADERÓW
WOPENGL
1. kompilacja wierzchołkowego shaderu
2. kompilacja fragment'owego shaderu
3. linkowanie programu
4. przekazywanie wskazówników
o dane do programu
5. przekazywanie danych do programu

14. KOMPILACJA SHADERÓW
WIERZCHOŁKOWY SHADER
/ / k o m p i l u j e m y w i e r z c h o ł k o w y s h a d e r
G L i n t c o m p i l e _ o k = G L _ F A L S E , l i n k _ o k = G L _ F A L S E , p r o g r a m ;
G L u i n t v s = g l C r e a t e S h a d e r ( G L _ V E R T E X _ S H A D E R ) ;
c o n s t c h a r * v s _ s o u r c e = " . . . " ;
g l S h a d e r S o u r c e ( v s , 1 , & v s _ s o u r c e , N U L L ) ;
g l C o m p i l e S h a d e r ( v s ) ;
g l G e t S h a d e r i v ( v s , G L _ C O M P I L E _ S T A T U S , & c o m p i l e _ o k ) ;

15. KOMPILACJA SHADERÓW
FRAGMENTOWY SHADER
/ / k o m p i l u j e m y f r a g m e n t o w y s h a d e r
G L u i n t f s = g l C r e a t e S h a d e r ( G L _ F R A G M E N T _ S H A D E R ) ;
c o n s t c h a r * f s _ s o u r c e = " . . . " ;
g l S h a d e r S o u r c e ( f s , 1 , & f s _ s o u r c e , N U L L ) ;
g l C o m p i l e S h a d e r ( f s ) ;
g l G e t S h a d e r i v ( f s , G L _ C O M P I L E _ S T A T U S , & c o m p i l e _ o k ) ;

16. LINKING PROGRAMU
/ / l i n k u j e m y p r o g r a m
p r o g r a m = g l C r e a t e P r o g r a m ( ) ;
g l A t t a c h S h a d e r ( p r o g r a m , v s ) ;
g l A t t a c h S h a d e r ( p r o g r a m , f s ) ;
g l L i n k P r o g r a m ( p r o g r a m ) ;
g l G e t P r o g r a m i v ( p r o g r a m , G L _ L I N K _ S T A T U S , & l i n k _ o k ) ;

17. PRZEKAZYWANIE DANYCH DO PROGRAMU
/ / z a c h o w u j e m y w s k a z ó w n i k o z m i e n n e j s h a d e r u w k l i e n t s k i m p r o g r a m u
G L i n t a t t r i b u t e _ c o o r d 2 d ;
c o n s t c h a r * a t t r i b u t e _ n a m e = " c o o r d 2 d " ;
a t t r i b u t e _ c o o r d 2 d = g l G e t A t t r i b L o c a t i o n ( p r o g r a m , a t t r i b u t e _ n a m e ) ;

18. RENDERING Z UŻYCIEM SHADERU
/ / p r e k a z u j e m y d a n e p r z e z w s k a z ó w n i k d o p r o g r a m u
/ / j u ż n a e t a p u r e n d e r i n g u
g l U s e P r o g r a m ( p r o g r a m ) ;
g l E n a b l e V e r t e x A t t r i b A r r a y ( a t t r i b u t e _ c o o r d 2 d ) ;
g l V e r t e x A t t r i b P o i n t e r (
a t t r i b u t e _ c o o r d 2 d , / / c o p r z e k a z u j e m y d o p r o g r a m u
2 , / / i l e e l e m e n t ó w d l a k a ż d e j w i e r z c h ó w k i
G L _ F L O A T , / / t y p k a ż d e g o e l e m e n t u
G L _ F A L S E , / / u ż y c i e o f f s e t ó w
0 , / / o f f s e t
v e r t i c e s / / w s k a z ó w n i k d o d a n y c h
) ;
g l D r a w A r r a y s ( G L _ P O L Y G O N S , 0 , 4 ) ;
g l D i s a b l e V e r t e x A t t r i b A r r a y ( a t t r i b u t e _ c o o r d 2 d ) ;

19. PRZEKAZYWANIE DANYCH DO SHADERU
1. zachowywanie wskazównika do
atrybutu shaderu
2. włączenie odpowiednego atrybutu
3. wskazywanie adresu danych
4. wyłączenie atrybutu

20. WEJŚCIE WIERZHOŁKOWEGO SHADERU
material
(diffuse, specular, shininess...)
silnikowe
(kamera, model, oświetlenie, tajmery...)
rendererowe
(zdefiniowane przez użytkownika)

21. WYJŚCIE WIERZHOŁKOWEGO SHADERU
pozycja
rozmiar wierzhółki
długość do przycinania

22. WEJŚCIE FRAGMENTOWEGO SHADERU
pozycja
normale
numer prymitywu
długość do przycinania
inne

23. WYJŚCIE FRAGMENTOWEGO SHADERU
identyfikator materialu
pozycja
normale
diffuse color
specular color
głębokość
inne

24. IDENTITY SHADERS
VERTEX SHADER
u n i f o r m m a t 4 u _ M V P M a t r i x ;
a t t r i b u t e v e c 4 a _ P o s i t i o n ;
v o i d m a i n ( )
{
g l _ P o s i t i o n = u _ M V P M a t r i x * a _ P o s i t i o n ;
}
FRAGMENT SHADER
v a r y i n g v e c 4 v _ C o l o r ;
v o i d m a i n ( )
{
g l _ F r a g C o l o r [ 0 ] = 0 . 0 ;
g l _ F r a g C o l o r [ 1 ] = 0 . 0 ;
g l _ F r a g C o l o r [ 2 ] = 1 . 0 ;
}

25. PIĘKNOŚĆ GRY KOMPUTEROWEJ
efekty nieba, wody, pogody,
ognia, mgły, dymu...
rzeźba terenu
modele high poly

26. CO MOŻNA UTWORZYĆ DZIĘKI SHADERAM

27. OPENGL W ANDROID
TO TYLKO OPENGL ES
słabszy sprzęt → mniej możliwości
słabszy sprzęt → mniej efektów
słabszy sprzęt → mniej modele
słabszy sprzęt → mniej animacji

28. CZYM SIĘ RÓŻNIĄ OPENGL ORAZ OPENGL ES?

29. OPENGL
obsługuje wiele
podejść renderingu
(fixed pipeline, display
lists, VBO, drawable
arrays...)
dowolne type danych
OPENGL ES
tylko VBO
wyłącznie dane typów
fixed-point
usunięty prymitywy
renderingowe

30. OPTYMIZACJI GIER W ANDROID
efekty nieba, wody, pogody,
ognia, mgły, dymu...
rzeźba terenu
modele high poly

31. CO MOŻNA ZROBIĆ W OPENGL ES?

33. ZALETY OPENGL ES
można zrobić grę trójwymiarowę
dla mobilnych urządzeń
szybke przepisanie kodu do OpenGL
WebGL - jeszcze więcej przenośności!

34. WADY OPENGL ES
złożoność
małe API

35. ZŁOŻONOŚĆ OPENGL ES
wyświetlienie animacji MD2→500+ wierszów kodu!

36. BIBLIOTEKI
JPCT
LWJGL
jMonkey

37. JAK ZACZĄĆ PRACOWAĆ Z OPENGL ES?

38. 1. TWORZYMY POWIERZHNIĘ

39. 2. USTALIMY RENDERER

40. 3. DEFINUJEMY LOGIKĘ KIEROWANIA

41. PRZESUWANIE KAMERY
mViewMatrix ← Matrix.setLookAtM(...)
MVPMatrix ← mProjectionMatrix × mViewMatrix
gl_Position = u_MVPMatrix * a_Position
u n i f o r m m a t 4 u _ M V P M a t r i x ;
a t t r i b u t e v e c 4 a _ P o s i t i o n ;
v o i d m a i n ( )
{
g l _ P o s i t i o n = u _ M V P M a t r i x * a _ P o s i t i o n ;
}

42. PRZESUWANIE MODELE
setIdentity(...)
mMVPMatrix ← mViewMatrix × mModelMatrix
mMVPMatrix ← mProjectionMatrix × mMVPMatrix
gl_Position = u_MVPMatrix * a_Position

43. PRZYKŁAD - RUCH KAMERY

45. PRZYKŁAD - RUCH KAMERY

47. PRZYKŁAD - RUCH KAMERY

49. PRZYKŁAD - RUCH KAMERY

51. CZEGO TA PREZENTACJA NIE OGARNIA?
użycie tekstur
animacja
skomplikowane shadery

52. OSTREŻENIE
NIE PRÓBUJCIE TEGO W DOMU!
UŻYCIE BIBLIOTEK JEST PRZYCZYNĄ DŁUGOWIECZNOŚCI

53. DZIĘKUJĘ ZA UWAGĘ!
Tu jest kod