Shader Playground 디자인 변경

FBX 모델 Import 컨테이너

Project 불러오기 / 저장하기

Compile 상태 / 설정 컨테이너

필요없는 정보들은 빼고 컨테이너의 크기를 간소화했다.

Viewport

src, dst render target의 블렌딩 모드를 각각 설정 가능하도록 함.
post process를 위한 추가 pass를 적용할지 선택 가능하도록 함.
하단의 필요없는 정보들은 제거함.

Editor

postProcess에 사용되는 fragment shader 코드를 편집할 수 있도록 함.
N개의 Pass를 추가할 수 있도록 함.
위로, 아래로 버튼으로 pass의 적용 순서를 바꿀 수 있도록 함.

Inspector

post process의 shader에 값을 전달할 수 있도록 tab을 추가함

Console & Asset Browser

Guide

우상단에 앱 이용가이드와 주석으로 인스펙터 ui를 조작하는 가이드를 추가함

Retrospect

원래도 무채색 계열을 좋아했어서 디자인을 무채색 기반으로 수정했다.
그리고 border-radius가 좀 과하게 들어가있었는데, 맘에 안들어서 3px정도로 수정했다.
이전 버전을 쓰다보니, 뭔가 기능이 매우 기본적이라는 생각이 계속 들었다.
그래서 뭐가 허전한건가 곰곰히 생각을 좀 해봤는데, 후처리(post process)가 있으면 좋을 것 같다는 생각이 들었다.
후처리는 모든 렌더링이 끝난 후에 화면 전체를 샘플링해서 추가적인 효과를 주는 과정인데, 예를 들면 흔히 아는 컬러필터나 화면 왜곡 효과, 발광하는 물체들의 빛번짐, 시야가 흐려진 듯한 느낌 등이 이에 해당한다.
그래서 화면 전체가 렌더링 된 후 추가 작업을 위한 Pass를 추가하거나 제거하거나 적용하거나 적용하지 않거나 할 수 있도록 구현을 했다.
이 과정에서도 배운 점이 있는데, render target의 색상포맷을 어떻게 지정하냐에 따라 구현할 수 있는 후처리도 다르다.
RGBA8포맷(흔히 0~255범위를 가지는 8bit 정수 색상포맷)은 색을 표현할 수 있는 범위자체가 좁아서 밝거나 어두운 것을 현실감 있게 표현하지 못한다.
RGBA16F포맷(RGBA8의 두 배인 16bit를 사용하는 부동소수점포맷)은 RGBA8이 표현하는 범위를 넘어선 표현이 가능하므로 밝기나 조명계산에 있어 정밀한 표현이 된다. 현실감이 증가한다는 뜻.
그래서 bloom(밝은 곳에 빛 번짐이 일어나는 효과)같은걸 구현하려면 이러한 색상포맷의 변경도 필수라는 점을 배웠다.
그래서 pass별로, shader별로 렌더타겟의 색상포맷을 각각 선택할 수 있도록 유지보수할 때 수정했다.
기능이 모두 완성되고 실제로 HDR, Bloom을 적용해봤는데 진짜 너무 신기하다.
GPU적 사고에 점점 익숙해지고 있는 느낌이 들어서 진짜 재밌다.

HDR, Bloom 후처리 적용 전

HDR, Bloom 후처리 적용 후

확실하게 내 것으로 만들려면 입문자용 개념부터 정리해서, 강의 형식으로
shader playground에 누구나 따라해 볼 수 있도록 시리즈를 만들어볼까 생각중이기도 하다.
아 그리고 덕분에 shader를 적용시켜볼 mesh도 직접 만드는데 Blender도 조금씩 써보는 중.
다음번엔 사실적인 물을 표현해보는걸 구현해봐야겠다.
codex 만세

Shader Playground: https://zzz664.github.io/shader-playground/