이펙트 쉐이더 1강 - Shader 기초 개념
•Download as PPTX, PDF•
6 likes•6,146 views
이펙트 쉐이더를 다루기 위한 유니티 Vertex & Fragment 쉐이더 기초 개념 발표 자료입니다. 쉐이더가 무엇인지 어떤식으로 다루는 개념 위주의 내용이기에 생략된 부분이 많습니다.
이펙트 쉐이더 1강 - Shader 기초 개념
- 1. 이펙트 쉐이더 1강 Shader 기초 개념 오지후 / CatDarkGame 캐쥬얼이펙트 스터디 2019_11_30 https://darkcatgame.tistory.com/ Cat DarkGame
- 2. 오늘 강의 목표 1. 쉐이더란 무엇인가? 2. 쉐이더 개념 & 매커니즘 파악
- 3. 쉐이더란 화면에 출력할 픽셀의 위치와 색상을 계산하는 함수 3D 컴퓨터 그래픽에서 최종적으로 화면에 출력하는 픽셀의 핵을 정해주는 함수 GPU를 제어하는 스크립트
- 4. GPU 동작 파이프라인
- 5. GPU 동작 파이프라인 Mesh Material Vertex Shader Fragment Shader Rasterization Screen
- 6. GPU 동작 파이프라인 Vertex Shader 버텍스 정보를 다루는 단계, 일반적으로 버텍스 정보를 월드 공간으로 변환하는 작업이 이뤄짐 (MVP공간 행렬변환 등 자세한 내용은 다루지 않음)
- 7. GPU 동작 파이프라인 Vertex Shader 핵심은 버텍스를 조작할 수 있다는 것
- 8. GPU 동작 파이프라인 Rasterization 3D 가상세계의 데이터를 2D 화면으로 변환하는 작업 버텍스 쉐이더 통과한 데이터 저해상도 디스플레이 OR 고해상도 디스플레이
- 9. GPU 동작 파이프라인 Fragment Shader 픽셀을 정보를 다루는 단계 (색깔 놀이)
- 10. GPU의 파이프라인에 돌아가는 데이터를 스크립트로 제어하는 것 Shader란?
- 11. Shader 언어 종류
- 12. Shader 언어 종류 대표적 3가지 종류의 쉐이더 언어가 존재 GPU 칩셋에 따라 사용하는 언어가 다름 하지만 언어가 매우 유사해서 1개만 숙달하면 나머지도 사용가능 HLSL (High Level Shader Language) GLSL (OpenGL Shader Language) CG (C for Graphic)
- 13. Shader 언어 종류 엔진에 따라서 다른 방식으로 쉐이더 제작 할 수 있게 되어 있습니다. Unity : ShaderLab(유니티자체 언어) + CG 언리얼4 : 마테리얼 노드 +Unity URP : ShaderLab + HLSL or 노드
- 14. Unt Shader 기본 본격 싵
- 15. 색상 = 숫자 1 0 이번 강의 결론 = 출처 : https://www.instagram.com/p/B5UCuqnnoFH/
- 16. Shader 기본 Standard Shader -PBR(Physically Based Rendering)이라는 물리 기반 라이팅 효과가 적용된 유니티 기본 쉐이더 -이 강의는 정확히 이펙트 쉐이더 강의이기 때문에 다른 쉐이더 이론은 스킵함
- 17. Shader 기본 Unlit Shader 파일을 생성
- 18. Shader 기본 Standard Shader Unlit Shader
- 19. Shader 기본 Unlit Shader -Unlit은 라이팅 연산이 없다는 뜻 -이 쉐이더는 아무 연산 없이 텍스처를 출력 (내부 Fog연산 코드가 있지만 이후 설명) -이 쉐이더를 기반으로 쉐이더 코드 연습, 이펙트 쉐이더 제작 예정
- 20. Shader 기본 Unlit Shader의 기본 코드
- 21. 본론으로 가기전에 기본 코드 정리 먼저 합니다.
- 22. Shader 기본 일단 (지금)쓸데없는 코드 제거 방금 제거한 것은 Fog적용 코드
- 23. Shader 기본 Fog = 안개 효과
- 24. Fog 관련 코드 제거 전 Fog 관련 코드 제거 후 Shader 기본
- 25. 1. Fragment 쉐이더
- 26. 지금부터 이 쉐이더 코드에서 색 바꾸는 것부터 싵해서 하나하나 알아봅시다. Fragment 쉐이더 : Shader 기본
- 27. 1. Vertex Shader 2. Fragment Shader 1 2 Fragment 쉐이더 : Shader 기본
- 28. Fragment 쉐이더 : Shader 기본 단순히 색을 출력하는 쉐이더가 되었습니다, 이 코드를 분석해 봅시다. 위 코드에서 우리가 알아볼 것은 1. // 주석 2. 변수 float 3. 결과출력 “return”
- 29. Fragment 쉐이더 : Shader 기본 // 주석 메모를 작성할 때 사용하는 기능 “//”을 붙여 해당 라인을 주석 처리하면 코드가 아닌 메모가 됨 /* 메모할 내용 */ 위와 같이 /*~*/으로 여러 줄을 주석으로 사용 할 수 있음
- 30. Fragment 쉐이더 : Shader 기본 변수 값(데이터)를 저장하는 통과 같은 개념입니다. 자료형 (변수형태) 변수 이름 값 (데이터)
- 31. Fragment 쉐이더 : Shader 기본 변수 값(데이터)를 저장하는 통과 같은 개념입니다. 마치 상자에 물건을 넣어두는 개념
- 32. Fragment 쉐이더 : Shader 기본 변수 값(데이터)를 저장하는 통과 같은 개념입니다. 마치 상자에 물건을 넣어두는 개념 포토샵에서 사용하던 RGB 값과 똑같은 개념 (포토샵 255값 = 쉐이더 1값) R, G, B, A
- 33. Fragment 쉐이더 : Shader 기본 변수 값(데이터)를 저장하는 통과 같은 개념입니다. 마치 상자에 물건을 넣어두는 개념 포토샵에서 사용하던 RGB 값과 똑같은 개념 (포토샵 255값 = 쉐이더 1값) R, G, B, A
- 34. Fragment 쉐이더 : Shader 기본 결과출력 : return return이라는 명령어의 값을 변경해 봅시다.
- 35. Fragment 쉐이더 : Shader 기본 결과출력 : return return이라는 명령어의 값을 변경해 봅시다. 이전에 만든 float4변수 상관없이 검은색 출력
- 36. Fragment 쉐이더 : Shader 기본 결과출력 : return return에 넣는 변수 or 값은 최종 Fragment 쉐이더 결과 값을 의미
- 38. Fragment 쉐이더 : Shader 기본
- 39. 포토샵으로 원리 이해하기
- 40. Fragment 쉐이더 : Shader 기본 1. 포토샵에서 두 레이어를 줶비합니다.
- 41. Fragment 쉐이더 : Shader 기본 1. 포토샵에서 두 레이어를 줶비합니다. 2. 빨간 박스 레이어를 곱하기(Multiply)로
- 42. Fragment 쉐이더 : Shader 기본 1. 포토샵에서 두 레이어를 줶비합니다. 2. 빨간 박스 레이어를 곱하기(Multiply)로 3. 겹치기
- 43. Fragment 쉐이더 : Shader 기본 Unity Photoshop
- 44. 2. Properties 변수 데이터를 쉽게 수정하기
- 45. Properties : Shader 기본
- 46. Properties : Shader 기본
- 47. Properties : Shader 기본 Properties = Material의 인터페이스에서 조작 가능한 변수
- 48. Properties : Shader 기본 변수이름 인터페이스 표시 이름 자료형 (변수형태) 최초 값
- 49. Properties : Shader 기본 Properties 변수를 Fragment쉐이더에 연동해봅시다.
- 50. Properties : Shader 기본 Properties 변수와 이름 동일하게
- 51. Properties : Shader 기본 Properties 변수의 형태는 여러가지 존재
- 52. Properties : Shader 기본 Properties 변수의 형태는 여러가지 존재
- 53. Properties : Shader 기본
- 54. Properties : Shader 기본
- 55. Properties : Shader 기본 어느새 단순 텍스처 출력 쉐이더에 색 바꾸는 기능을 추가 하셨습니다.
- 56. 3. Texture 활용
- 57. 채널 별로 다른 이미지가 담긴 이펙트 소스 Texture 활용 : Shader 기본
- 58. 해당 텍스처의 이펙트 소스를 원하는 것을 출력해봅시다. Texture 활용 : Shader 기본
- 59. 텍스처 저장 변수인 “col”의 .r 값을 출력하니 Red채널만 출력됩니다. Texture 활용 : Shader 기본
- 60. col.g 도 마찬가지로 Green채널을 출력 Texture 활용 : Shader 기본
- 61. Texture 활용 : Shader 기본 쉐이더로 채널 관리를 하면 텍스처 최적화 가능
- 62. 4. UV
- 64. 포토샵에서 그라디언트로 만든 UV 좌표 맵
- 65. 1 0 색 = 숫자
- 66. 0 1~ 0 ~ 1
- 67. 0 1~ 0 ~ 1 X Y /
- 68. 0 1~ 0 ~ 1 0.5, 0.5 UV Coordinate UV 좌표
- 69. 쉐이더로 보는 UV 좌표 맵
- 70. 왜 이름이 UV? STUVW XYZ ABCDEFG…..
- 71. 4. UV Tiling & Offset
- 72. UV Tiling
- 73. UV Offset
- 74. * 곱셈 : UV Tiling + 덧셈 : UV Offset
- 75. 0,0 1,0 0,1 1,1 0,1 0,0 1,0 1,1 2,0 2,20,2 2,1 1,2 UV Offset
- 76. 0,0 1,0 0,1 1,1 0.5, 0.5 1.5, 1.5 UV Tiling
- 77. UV Offset & Tiling 응용해보겠습니다.
- 78. 위 두 리소스 줶비
- 79. 이전에 채널 분리하는 쉐이더 이용해 R채널 출력
- 80. Properties에 float 변수 만들기
- 81. i.uv 에서 float2(….)로 변경이 핵심
- 83. Slash 이펙트 결과
- 84. 4. UV Tiling & Offset을 이용한 굴절효과
- 85. ???
- 86. UV에 0.5 Offset 한 결과
- 87. 텍스처 1장을 더 만들고 기존 텍스처 UV에 Offset 더하기
- 88. 회색 이미지를 텍스처 변수에 넣기
- 89. UV + 동일한 결과
- 90. 색상 = 숫자 1 0 이번 강의 결론 = 출처 : https://www.instagram.com/p/B5UCuqnnoFH/
- 91. 만약 이 텍스처를 넣는 다면?
- 93. 굴절 효과 적용 사례
- 94. 5. 최종 실습 불 이펙트
- 97. 끝