[Android] AGSL에 대해 알아보자

Slide 1

Slide 1 text

AGSL에 한걸음 다가가기 Pangyo

Slide 2

Slide 2 text

AGSL을 공부하게 된 이유 Pangyo

Slide 3

Slide 3 text

AGSL을 공부하게 된 이유 사람은 공부해야할 이유가 생겼을때 더욱 몰입한다.

Slide 4

Slide 4 text

AGSL을 공부하게 된 이유 사람은 공부해야할 이유가 생겼을때 더욱 몰입한다.

Slide 5

Slide 5 text

AGSL을 공부하게 된 이유 사람은 공부해야할 이유가 생겼을때 더욱 몰입한다.

Slide 6

Slide 6 text

AGSL을 공부하게 된 이유 사람은 공부해야할 이유가 생겼을때 더욱 몰입한다.

Slide 7

Slide 7 text

Android Graphic Shader Language? Pangyo

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

Android Graphic Shader Language? AGSL은 안드로이드 13 이상에서 프로그래밍 가능한 RuntimeShader 객체의 동작을 정의하는 데 사용됩니다. AGSL은 대부분의 구문을 GLSL 프래그먼트 셰이더와 공유하지만 Android graphics rendering system 내에서 작동하여 Canvas 내에서 페인팅을 커스터마이징하고 뷰 콘텐츠를 필터링합니다.

Slide 10

Slide 10 text

Android Graphic Shader Language? AGSL은 안드로이드 13 이상에서 프로그래밍 가능한 RuntimeShader 객체의 동작을 정의하는 데 사용됩니다. AGSL은 대부분의 구문을 GLSL 프래그먼트 셰이더 와 공유하지만 Android graphics rendering system 내에서 작동하여 Canvas 내에서 페인팅을 커스터마이징하고 뷰 콘텐츠를 필터링합니다.

Slide 11

Slide 11 text

AGSL 쪼개보기 1. Shader 2. Android Graphic Rendering System 3. GLSL Fragment Shader 4. Canvas 5. Runtime Shader

Slide 12

Slide 12 text

둘중 어떤 것이 좋아 보이나요? 1.What is Shader?

Slide 13

Slide 13 text

정점위치나 픽셀 색깔을 계산하는 함수 What is Shader?

Slide 14

Slide 14 text

정점위치나 픽셀 색깔을 계산하는 함수 Shader = 예쁜것 What is Shader?

Slide 15

Slide 15 text

AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 2. Android Graphic Rendering System 3. GLSL Fragment Shader 4. Canvas 내부에서 작동한다 5. Runtime Shader

Slide 16

Slide 16 text

AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3. GLSL Fragment Shader 4. Canvas 내부에서 작동한다 5. Runtime Shader

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Graphic Rendering System(PipeLine) 이란?

Slide 19

Slide 19 text

Android Graphic Rendering Pipe란?

Slide 20

Slide 20 text

Android Graphic Rendering Pipe란? Vertext Shader (위치 계산)

Slide 21

Slide 21 text

Android Graphic Rendering Pipe란? Vertext Shader (위치 계산) Rasterization

Slide 22

Slide 22 text

Android Graphic Rendering Pipe란? Vertext Shader (위치 계산) Rasterization Fragment Shader

Slide 23

Slide 23 text

AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3D의 물체를 2D로 변경하는 과정 3. GLSL Fragment Shader 4. Canvas 내부에서 작동한다 5. Runtime Shader

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Fragment Shader? 이미지의 모든 조각(Pixel)에서 실행되어 거기에 표시되어야 하는 색상 값을 계산하는 작은 프로그램.

Slide 26

Slide 26 text

Fragment Shader? 이미지의 모든 조각(Pixel)에서 실행되어 거기에 표시되어야 하는 색상 값을 계산하는 작은 프로그램.

Slide 27

Slide 27 text

Fragment Shader? 이미지의 모든 조각(Pixel)에서 실행되어 거기에 표시되어야 하는 색상 값을 계산하는 작은 프로그램.

Slide 28

Slide 28 text

Fragment Shader? vs 프레임 승자는??

Slide 29

Slide 29 text

AGSL 쪼개보기 1. Shader = 정점위치나 픽셀 색깔을 계산하는 함수 예쁜 것 2. Android Graphic Rendering System 3D의 물체를 2D로 변경하는 과정 3. GLSL Fragment Shader 모든 조각(Pixel)에서 실행되는 색깔 계산 프로그램 agsl = fragment shader 4. Canvas 내부에서 작동한다 5. Runtime Shader

Slide 30

Slide 30 text

Slide 31

Slide 31 text

AGSL은 SKSL이지만, Skia를 설명 하지 않기 위해 이름을 바꾼것 뿐이다. -Chat Hasse

Slide 32

Slide 32 text

What is Skia? Skia = 다양한 하드웨어 및 소프트웨어 플랫폼에서 작동하는 공통 API를 제공하는 오픈 소스 2D 그래픽 라이브러리 Android, Chrome, Flutter 등등

Slide 33

Slide 33 text

What is Skia? Skia = 다양한 하드웨어 및 소프트웨어 플랫폼에서 작동하는 공통 API를 제공하는 오픈 소스 2D 그래픽 라이브러리 Android, Chrome, Flutter 등등

Slide 34

Slide 34 text

Skia는 Android의 어디에서 쓰일까?

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

오른쪽과 같은 화면을 만들려면 어떻게 해야할까요..? Runtime Shader

Slide 38

Slide 38 text

Gradient로 어느정도는 지원해주고 있지만.. 좀더 쉐이더를 커스텀하게 다루고 싶어요!! Runtime Shader

Slide 39

Slide 39 text

Runtime Shader

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Android Graphic Shader Language? 3D에서 2D로 그려지는과정에 위치한 Fragment Shader(픽셀마다 코드가 실행된다)를 커스터마이징하는 역할을 하며,RenderEffect를 통해서 적용할수 있고, 적용하면 이쁘다.

Slide 42

Slide 42 text

AGSL 다뤄보기 – 색깔 변경 Pangyo

Slide 43

Slide 43 text

AGSL 다뤄보기 – 색깔 변경 Pangyo 파자마 파티에 코드가 왠말이냐~~?

Slide 44

Slide 44 text

AGSL 다뤄보기 – 색깔 변경 기본 함수

Slide 45

Slide 45 text

AGSL 다뤄보기 – 색깔 변경 뭐하는 물건이고??

Slide 46

Slide 46 text

AGSL 다뤄보기 – 색깔 변경 정밀한정자를 뜻하면 해당데이터 타입이 얼마나 정밀한지 뜻해요!

Slide 47

Slide 47 text

AGSL 다뤄보기 – 색깔 변경 정밀한정자를 뜻하면 해당데이터 타입이 얼마나 정밀한지 뜻해요!

Slide 48

Slide 48 text

AGSL 다뤄보기 – 색깔 변경 이거말고도 더 많은 데이터 타입이 있어요!

Slide 49

Slide 49 text

AGSL 다뤄보기 – 색깔 변경 기본 함수 기본 함수의 필수파라미터 (Position X, Position Y)

Slide 50

Slide 50 text

AGSL 다뤄보기 – 색깔 변경 기본 함수 기본 함수의 필수파라미터 (Position X, Position Y) Red, Green, Blue , Alpha Float들이 곱해진것

Slide 51

Slide 51 text

AGSL 다뤄보기 – 색깔 변경

Slide 52

Slide 52 text

AGSL 다뤄보기 – 색깔 변경

Slide 53

Slide 53 text

AGSL 다뤄보기 – 색깔 변경

Slide 54

Slide 54 text

AGSL 다뤄보기 – 색깔 변경

Slide 55

Slide 55 text

AGSL 다뤄보기 – 그림 변경 Pangyo

Slide 56

Slide 56 text

AGSL 다뤄보기 – 그림 변경 우리가 다뤄볼 사진

Slide 57

Slide 57 text

AGSL 다뤄보기 – 그림 변경 우리가 다뤄볼 사진

Slide 58

Slide 58 text

AGSL 다뤄보기 – 그림 변경 엥 왜이러지.. ㅠㅠ 기존 사자의 색깔을 잃어버렸다! 기존의 사자그림의 색깔과 합치는게 중요하다!

Slide 59

Slide 59 text

기존의 색깔을 셰이더에서 가져오는법 Bridge되어 해당 변수에 값이 들어간다. 잘사용하는 예: Size, 드래그중인픽셀

Slide 60

Slide 60 text

기존의 색깔을 셰이더에서 가져오는법 Bridge되어 해당 uniform 변수에 값이 들어간다. 잘사용하는 예: Size, 드래그중인픽셀 eval(float2)를 넘기면 기존 그림의 픽셀색깔을 얻을수 있어요.

Slide 61

Slide 61 text

AGSL 다뤄보기 – 그림 변경

Slide 62

Slide 62 text

AGSL 다뤄보기 – 그림 변경

Slide 63

Slide 63 text

AGSL 다뤄보기 – 애니메이션넣기 Pangyo

Slide 64

Slide 64 text

AGSL 다뤄보기 – 애니메이션넣기

Slide 65

Slide 65 text

AGSL 다뤄보기 – 애니메이션넣기 애니메이션에서 가장 필요한것은 시간이다.

Slide 66

Slide 66 text

AGSL 다뤄보기 – 애니메이션넣기 셰이더 코드에서 진행 시간을 얻으려면..

Slide 67

Slide 67 text

AGSL 다뤄보기 – 애니메이션넣기

Slide 68

Slide 68 text

AGSL 다뤄보기 – 애니메이션넣기

Slide 69

Slide 69 text

AGSL 다뤄보기 – 애니메이션넣기

Slide 70

Slide 70 text

AGSL 다뤄보기 – 애니메이션넣기 다른해상도의 폰으로 똑같은 위치에 구현이될까?

Slide 71

Slide 71 text

AGSL 다뤄보기 – 애니메이션넣기 백분율로 나누려면 현재 해상도가 몇픽셀인지 알아야 한다.

Slide 72

Slide 72 text

AGSL 다뤄보기 – 애니메이션넣기 물결은 어떻게..?

Slide 73

Slide 73 text

AGSL 다뤄보기 – 애니메이션넣기 한번 시작해 보자!

Slide 74

Slide 74 text

AGSL 다뤄보기 – 애니메이션넣기 수동으로 조금씩 조정해보자

Slide 75

Slide 75 text

AGSL 다뤄보기 – 애니메이션넣기 수동으로 조금씩 조정.. Fit이므로 어떤화면에서도 똑같이 보인다. 피타고라스방정식으로 거리를 알수있다. 실제로 멀어진 거리가 된다.

Slide 76

Slide 76 text

AGSL 다뤄보기 – 애니메이션넣기

Slide 77

Slide 77 text

AGSL 다뤄보기 – 애니메이션넣기 사인 함수는 진폭을 결정한다. 너무 진폭이빠르니까 수정해보자

Slide 78

Slide 78 text

AGSL 다뤄보기 – 애니메이션넣기

Slide 79

Slide 79 text

AGSL 다뤄보기 – 마무리~ Pangyo

Slide 80

Slide 80 text

AGSL 다뤄보기 – 마무리~

Slide 81

Slide 81 text

AGSL 다뤄보기 – 마무리~ GLES를 10분 공부하고 난후

Slide 82

Slide 82 text

안그래도 Android배우기도 벅찬데.. 이걸 언제 공부해?

Slide 83

Slide 83 text

적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속

Slide 84

Slide 84 text

적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속 2. 원하는 효과 검색

Slide 85

Slide 85 text

적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속 2. 원하는 효과 검색 3. GPT에게 수학공식 분석하기

Slide 86

Slide 86 text

적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속 2. 원하는 효과 검색 3. GPT에게 수학공식 분석하기 4. Android 공식문서를 통해 변환해보기 (OpenGL -> SKSL)

Slide 87

Slide 87 text

적용하면서 공부해보자! 1. https://www.shadertoy.com에 접속 2. 원하는 효과 검색 3. GPT에게 수학공식 분석하기 4. Android 공식문서를 통해 변환해보기 (OpenGL -> SKSL) 5. https://shaders.skia.org/ 테스트

Slide 88

Slide 88 text

도전은 언제나 남는 장사다 컨버팅한 작품 : https://www.shadertoy.com/view/ltffzl