[Android] AGSL에 대해 알아보자

AGSL에 대해 알아보자

Transcript

1. AGSL에 한걸음 다가가기 Pangyo
2. AGSL을 공부하게 된 이유 Pangyo
3. AGSL을 공부하게 된 이유 사람은 공부해야할 이유가 생겼을때 더욱 몰입한다.
4. AGSL을 공부하게 된 이유 사람은 공부해야할 이유가 생겼을때 더욱 몰입한다.
5. AGSL을 공부하게 된 이유 사람은 공부해야할 이유가 생겼을때 더욱 몰입한다.
6. AGSL을 공부하게 된 이유 사람은 공부해야할 이유가 생겼을때 더욱 몰입한다.
7. Android Graphic Shader Language? Pangyo
8. Android Graphic Shader Language? Android Graphics Shading Language (AGSL) is used by Android 13 and above to define the behavior of programmable RuntimeShader objects. AGSL shares much of its syntax with GLSL fragment shaders, but works within the Android graphics rendering system to both customize painting within Canvas and filter View content.
9. Android Graphic Shader Language? AGSL은 안드로이드 13 이상에서 프로그래밍 가능한 RuntimeShader 객체의 동작을 정의하는 데 사용됩니다. AGSL은 대부분의 구문을 GLSL 프래그먼트 셰이더와 공유하지만 Android graphics rendering system 내에서 작동하여 Canvas 내에서 페인팅을 커스터마이징하고 뷰 콘텐츠를 필터링합니다.
10. Android Graphic Shader Language? AGSL은 안드로이드 13 이상에서 프로그래밍 가능한 RuntimeShader 객체의 동작을 정의하는 데 사용됩니다. AGSL은 대부분의 구문을 GLSL 프래그먼트 셰이더 와 공유하지만 Android graphics rendering system 내에서 작동하여 Canvas 내에서 페인팅을 커스터마이징하고 뷰 콘텐츠를 필터링합니다.
11. AGSL 쪼개보기 1. Shader 2. Android Graphic Rendering System 3. GLSL Fragment Shader 4. Canvas 5. Runtime Shader
12. 둘중 어떤 것이 좋아 보이나요? 1.What is Shader?
13. 정점위치나 픽셀 색깔을 계산하는 함수 What is Shader?
14. 정점위치나 픽셀 색깔을 계산하는 함수 Shader = 예쁜것 What is Shader?
15. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 2. Android Graphic Rendering System 3. GLSL Fragment Shader 4. Canvas 내부에서 작동한다 5. Runtime Shader
16. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3. GLSL Fragment Shader 4. Canvas 내부에서 작동한다 5. Runtime Shader
17. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3. GLSL Fragment Shader 4. Canvas 내부에서 작동한다 5. Runtime Shader
18. Graphic Rendering System(PipeLine) 이란?
19. Android Graphic Rendering Pipe란?
20. Android Graphic Rendering Pipe란? Vertext Shader (위치 계산)
21. Android Graphic Rendering Pipe란? Vertext Shader (위치 계산) Rasterization
22. Android Graphic Rendering Pipe란? Vertext Shader (위치 계산) Rasterization Fragment Shader
23. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3D의 물체를 2D로 변경하는 과정 3. GLSL Fragment Shader 4. Canvas 내부에서 작동한다 5. Runtime Shader
24. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3D의 물체를 2D로 변경하는 과정 3. GLSL Fragment Shader 4. Canvas 내부에서 작동한다 5. Runtime Shader
25. Fragment Shader? 이미지의 모든 조각(Pixel)에서 실행되어 거기에 표시되어야 하는 색상 값을 계산하는 작은 프로그램.
26. Fragment Shader? 이미지의 모든 조각(Pixel)에서 실행되어 거기에 표시되어야 하는 색상 값을 계산하는 작은 프로그램.
27. Fragment Shader? 이미지의 모든 조각(Pixel)에서 실행되어 거기에 표시되어야 하는 색상 값을 계산하는 작은 프로그램.
28. Fragment Shader? vs 프레임 승자는??
29. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3D의 물체를 2D로 변경하는 과정 3. GLSL Fragment Shader 모든 조각(Pixel)에서 실행되는 색깔 계산 프로그램 agsl = fragment shader 4. Canvas 내부에서 작동한다 5. Runtime Shader
30. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3D의 물체를 2D로 변경하는 과정 3. GLSL Fragment Shader 모든 조각(Pixel)에서 실행되는 색깔 계산 프로그램 agsl = fragment shader 4. Canvas 내부에서 작동한다 5. Runtime Shader
31. AGSL은 SKSL이지만, Skia를 설명 하지 않기 위해 이름을 바꾼것 뿐이다. -Chat Hasse
32. What is Skia? Skia = 다양한 하드웨어 및 소프트웨어 플랫폼에서 작동하는 공통 API를 제공하는 오픈 소스 2D 그래픽 라이브러리 Android, Chrome, Flutter 등등
33. What is Skia? Skia = 다양한 하드웨어 및 소프트웨어 플랫폼에서 작동하는 공통 API를 제공하는 오픈 소스 2D 그래픽 라이브러리 Android, Chrome, Flutter 등등
34. Skia는 Android의 어디에서 쓰일까?
35. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3D의 물체를 2D로 변경하는 과정 3. GLSL Fragment Shader 모든 조각(Pixel)에서 실행되는 색깔 계산 프로그램 agsl = fragment shader 4. Canvas 내부에서 작동한다 AGSL은 SKSL이고 Skia 때문에 내부에서 동작할 수 있구나! 5. Runtime Shader
36. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3D의 물체를 2D로 변경하는 과정 3. GLSL Fragment Shader 모든 조각(Pixel)에서 실행되는 색깔 계산 프로그램 agsl = fragment shader 4. Canvas 내부에서 작동한다 AGSL은 SKSL이고 Skia 때문에 내부에서 동작할 수 있구나! 5. Runtime Shader
37. 오른쪽과 같은 화면을 만들려면 어떻게 해야할까요..? Runtime Shader
38. Gradient로 어느정도는 지원해주고 있지만.. 좀더 쉐이더를 커스텀하게 다루고 싶어요!! Runtime Shader
39. Runtime Shader
40. AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3D의 물체를 2D로 변경하는 과정 3. GLSL Fragment Shader 모든 조각(Pixel)에서 실행되는 색깔 계산 프로그램 agsl = fragment shader 4. Canvas 내부에서 작동한다 AGSL은 SKSL이고 Skia 때문에 내부에서 동작할 수 있구나! 5. Runtime Shader 커스텀한 쉐이더코드를 넣을수있는 객체
41. Android Graphic Shader Language? 3D에서 2D로 그려지는과정에 위치한 Fragment Shader(픽셀마다 코드가 실행된다)를 커스터마이징하는 역할을 하며,RenderEffect를 통해서 적용할수 있고, 적용하면 이쁘다.
42. AGSL 다뤄보기 – 색깔 변경 Pangyo
43. AGSL 다뤄보기 – 색깔 변경 Pangyo 파자마 파티에 코드가 왠말이냐~~?
44. AGSL 다뤄보기 – 색깔 변경 기본 함수
45. AGSL 다뤄보기 – 색깔 변경 뭐하는 물건이고??
46. AGSL 다뤄보기 – 색깔 변경 정밀한정자를 뜻하면 해당데이터 타입이 얼마나 정밀한지 뜻해요!
47. AGSL 다뤄보기 – 색깔 변경 정밀한정자를 뜻하면 해당데이터 타입이 얼마나 정밀한지 뜻해요!
48. AGSL 다뤄보기 – 색깔 변경 이거말고도 더 많은 데이터 타입이 있어요!
49. AGSL 다뤄보기 – 색깔 변경 기본 함수 기본 함수의 필수파라미터 (Position X, Position Y)
50. AGSL 다뤄보기 – 색깔 변경 기본 함수 기본 함수의 필수파라미터 (Position X, Position Y) Red, Green, Blue , Alpha Float들이 곱해진것
51. AGSL 다뤄보기 – 색깔 변경
52. AGSL 다뤄보기 – 색깔 변경
53. AGSL 다뤄보기 – 색깔 변경
54. AGSL 다뤄보기 – 색깔 변경
55. AGSL 다뤄보기 – 그림 변경 Pangyo
56. AGSL 다뤄보기 – 그림 변경 우리가 다뤄볼 사진
57. AGSL 다뤄보기 – 그림 변경 우리가 다뤄볼 사진
58. AGSL 다뤄보기 – 그림 변경 엥 왜이러지.. ㅠㅠ 기존 사자의 색깔을 잃어버렸다! 기존의 사자그림의 색깔과 합치는게 중요하다!
59. 기존의 색깔을 셰이더에서 가져오는법 Bridge되어 해당 변수에 값이 들어간다. 잘사용하는 예: Size, 드래그중인픽셀
60. 기존의 색깔을 셰이더에서 가져오는법 Bridge되어 해당 uniform 변수에 값이 들어간다. 잘사용하는 예: Size, 드래그중인픽셀 eval(float2)를 넘기면 기존 그림의 픽셀색깔을 얻을수 있어요.
61. AGSL 다뤄보기 – 그림 변경
62. AGSL 다뤄보기 – 그림 변경
63. AGSL 다뤄보기 – 애니메이션넣기 Pangyo
64. AGSL 다뤄보기 – 애니메이션넣기
65. AGSL 다뤄보기 – 애니메이션넣기 애니메이션에서 가장 필요한것은 시간이다.
66. AGSL 다뤄보기 – 애니메이션넣기 셰이더 코드에서 진행 시간을 얻으려면..
67. AGSL 다뤄보기 – 애니메이션넣기
68. AGSL 다뤄보기 – 애니메이션넣기
69. AGSL 다뤄보기 – 애니메이션넣기
70. AGSL 다뤄보기 – 애니메이션넣기 다른해상도의 폰으로 똑같은 위치에 구현이될까?
71. AGSL 다뤄보기 – 애니메이션넣기 백분율로 나누려면 현재 해상도가 몇픽셀인지 알아야 한다.
72. AGSL 다뤄보기 – 애니메이션넣기 물결은 어떻게..?
73. AGSL 다뤄보기 – 애니메이션넣기 한번 시작해 보자!
74. AGSL 다뤄보기 – 애니메이션넣기 수동으로 조금씩 조정해보자
75. AGSL 다뤄보기 – 애니메이션넣기 수동으로 조금씩 조정.. Fit이므로 어떤화면에서도 똑같이 보인다. 피타고라스방정식으로 거리를 알수있다. 실제로 멀어진 거리가 된다.
76. AGSL 다뤄보기 – 애니메이션넣기
77. AGSL 다뤄보기 – 애니메이션넣기 사인 함수는 진폭을 결정한다. 너무 진폭이빠르니까 수정해보자
78. AGSL 다뤄보기 – 애니메이션넣기
79. AGSL 다뤄보기 – 마무리~ Pangyo
80. AGSL 다뤄보기 – 마무리~
81. AGSL 다뤄보기 – 마무리~ GLES를 10분 공부하고 난후
82. 안그래도 Android배우기도 벅찬데.. 이걸 언제 공부해?
83. 적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속
84. 적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속 2. 원하는 효과 검색
85. 적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속 2. 원하는 효과 검색 3. GPT에게 수학공식 분석하기
86. 적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속 2. 원하는 효과 검색 3. GPT에게 수학공식 분석하기 4. Android 공식문서를 통해 변환해보기 (OpenGL -> SKSL)
87. 적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속 2. 원하는 효과 검색 3. GPT에게 수학공식 분석하기 4. Android 공식문서를 통해 변환해보기 (OpenGL -> SKSL) 5. https://shaders.skia.org/ 테스트
88. 도전은 언제나 남는 장사다 컨버팅한 작품 : https://www.shadertoy.com/view/ltffzl