Shader Playground

https://zzz664.github.io/shader-playground/
그래픽 연산의 정수라고 할 수 있는 GPU 연산 프로그램 쉐이더를 만들어 볼 수 있는 플레이그라운드를 만들어봤습니다.

Save / Load

쉐이더 프로젝트를 저장/불러오기 기능 + 실시간 쉐이더 컴파일(자동 / 수동 선택가능)
json으로 내보내기를 하면 쉐이더에 사용된 에셋은 base64 data URL을 포함하도록 했음. fbx 모델은 파싱결과를 직렬화하여 포함

Viewport

쉐이더 컴파일 결과를 확인 가능한 뷰포트
screen모드 선택시 2d 화면에 쉐이더가 적용된 모습을 볼 수 있음
model모드 선택시 3d 공간에 배치된 모델에 쉐이더가 적용된 모습을 볼 수 있음
이외에도 사용자정의 .fbx확장자 모델 임포트 가능
뷰포트에서 드래그(회전), 휠(줌인, 줌아웃) 가능
블렌드 모드 선택가능
Opaque(불투명), Alpha(반투명), Additive(합)
Opaque는 알파채널이 작동하지 않음.
Alpha는 픽셀을 알파채널을 적용하여 섞음
Additive는 여러색의 빛이 합쳐지면 흰색이 되는 것처럼 겹치면 점점 밝아짐
이외에 모델파일의 정보나 뷰포트의 설정값을 확인가능함

Editor

직접 버텍스 쉐이더와 픽셀 쉐이더의 코드를 만들어 볼 수 있는 에디터
쉐이더 문법이 틀렸다면 콘솔창에 에러 표시
우상단의 preset은 기본 쉐이더 예제 3개가 들어있다. 골라서 적용을 누르면 확인해볼 수 있음.
요청이 있으면 다양한 예제를 추가해 볼 예정

Inspector

픽셀 쉐이더에 직접 조절할 수 있는 값을 ui에서 설정할 수 있는 인스펙터
쉐이더 컴파일이 성공하면 해당 인스펙터에 값을 넣는 ui가 나옴
쉐이더 파일에 주석으로 인스펙터의 ui를 설정할 수 있음

기본 작성 형식

주석 메타데이터는 uniform 선언과 같은 줄의 // 주석에서 읽는다.

uniform float edgePower;   // @ui slider @min 0 @max 5 @step 0.01 @label Edge Power @group Surface
uniform vec3 tintColor;    // @ui color @label Tint Color @group Surface
uniform bool useTint;      // @ui checkbox @label Use Tint @group Surface
uniform sampler2D detailTex; // @ui texture @label Detail Texture @group Noise

지원 토큰

`@label`

인스펙터에 표시할 이름을 바꾼다.

uniform float edgePower; // @label Edge Power

적용 결과:

카드 제목에 Edge Power 표시
내부 식별자는 계속 edgePower 유지

`@group`

인스펙터 그룹 이름을 지정한다.

uniform vec3 tintColor; // @group Surface

적용 결과:

같은 그룹명을 가진 속성끼리 한 섹션으로 묶인다.
지정하지 않으면 기본 그룹으로 들어간다.

`@ui`

UI 렌더링 방식을 지정한다.

지원 값:

number
checkbox
vector
texture
slider
color

예시:

uniform float roughness; // @ui slider
uniform vec3 tintColor;  // @ui color
uniform bool useTint;    // @ui checkbox

`@ui`와 타입 호환 규칙

모든 @ui 값이 모든 타입에 허용되지는 않는다.

slider: float만 허용
color: vec3, vec4만 허용
checkbox: bool만 허용
texture: sampler2D만 허용

호환되지 않는 조합이면 주석 값을 무시하고 기본 UI로 되돌린다.

예:

uniform int count; // @ui color

위 경우 color는 무시되고 숫자 입력으로 표시된다.

수치 범위 토큰

`@min`

최솟값 지정

`@max`

최댓값 지정

`@step`

증감 간격 지정

예시:

uniform float edgePower; // @ui slider @min 0 @max 5 @step 0.01

적용 범위:

slider의 range input
number input의 최소값, 최대값, step

숫자로 변환할 수 없는 값이면 무시된다.

인스펙터 표시 방식

현재 인스펙터는 아래 규칙으로 렌더링한다.

label이 있으면 제목으로 사용
없으면 uniform 이름 그대로 사용
group이 있으면 그룹 섹션으로 묶음
slider면 range + number 입력을 같이 표시
color면 color picker를 표시
vec4 + color면 alpha 슬라이더를 추가 표시
texture면 파일 업로드와 텍스처 선택 드롭다운을 표시

엔진 예약 uniform 처리

다음 uniform은 인스펙터에서 제외된다.

uTime
uResolution
uMouse
uSceneMode
uModel
uView
uProj
uCameraPos
uLightDir

현재 구현은 이름 비교를 소문자 기준으로 수행하므로, 대소문자가 섞여 있어도 예약 uniform으로 처리된다.

Asset Browser

프로그램에서 불러오기 된 에셋을 관리할 수 있는 컨테이너

만들고보니 lighthouse performance 점수가 73점이 나오는데, 최적화는 정말 어려운 것 같다. 어떻게 최적화 해야할지 계속 고민해봐야겠다.

원하는 분이 있다면 쉐이더 기초에 대한 학습자료 탭도 만들어볼까 생각중입니다.
피드백 환영합니다.

첨부파일은 제가 예시로 만든 칼을 휘둘렀을때 나오는 검의 궤적을 표현하는 쉐이더입니다.
구경해보세용

파일 업로드 방법을 몰라서 구글드라이브 링크 올림!
https://drive.google.com/file/d/1JRIteBm-SzPH8SOSG4eWm6pq2wd-GXk6/view?usp=drive_link
JSON 불러오기를 한 후 viewport에서 blend mode를 additive로, scene mode를 model로 해야 정상적으로 보입니다.(알파채널을 이용해서)