레이마칭을 위한 Shadertoy 역방향 메모

개요

Shadertoy BETA 이라는 셰이더(단편 셰이더)만을 써서 작품을 투고하는 서비스가 있습니다.
레이마칭 등, 프래그먼트 쉐이더로 그림 그리기에 적합한 서비스로, WebGL 주위의 귀찮은 셋업 없이, 셰이더만을 쓸 수 있기 때문에 매우 편리한 서비스입니다.

그리고 이 서비스, 프래그먼트 쉐이더를 쓸 수 있을 뿐만 아니라, CubeMap을 사용할 수 있고, 버퍼를 복수 준비해 버퍼용으로 쉐이더를 써 그것을 이용하거나, 와 다양한 기능이 있습니다. (게다가 GPU 사운드도!)

다만, 기능이 많고, 또 데이터 보존 등 「하고 싶은 것」을 역방향으로 하는 것은 상당히 뼈가 부러지기 때문에, 그것을 위한 메모입니다.
(이므로 수시로 갱신 예정)

덧붙여서, 영어로 비공식적인 것입니다만 기능을 정리한 기사가 있으므로 그쪽도 맞추어 보면 하고 싶은 것을 발견할지도 모릅니다.

Special Shadertoy features | shadertoy - unofficial

마우스 사용

마우스 좌표나 드래그 시작점 등도 얻을 수 있습니다.
마우스를 사용하려면 다음과 같이 iMouse 를 사용합니다.

마우스 사용

vec4 m = iMouse / iResolution.xxxx;

iMouse 의 xy 는 현재 마우스 좌표를, zw 는 드래그를 시작했을 때 드래그 시작 지점의 좌표를 포함합니다.
그것을, iResolution (을)를 사용해 정규화해 이용합니다.

예를 들어, 이것을 카메라의 시점 방향으로 이용하는 경우는 이런 느낌↓

카메라 시점 이동

vec3 cameraDir = normalize(vec3(m.x * 2.0 - 1.0, m.y, -1.0));

실제로 사용하고 있는 샘플은 이쪽

채널 사용

Shadertoy에서 코드를 작성하기 아래에는 아래 그림과 같이 여러 채널이 준비되어 있으며, 거기에 CubeMap이나 버퍼, 키보드 입력(을 포함한 버퍼)을 설정하여 셰이더 내에서 이용할 수 있도록 되어 있습니다.


(위의 예에서는 Channel0에 CubeMap을 설정한 상태)

CubeMap 사용

위 그림과 같이 채널에 CubeMap을 설정하면 셰이더에서 사용할 수 있습니다.
(내용을 설정하려면 클릭하면 열리는 메뉴에서 선택하기만 하면 됩니다)

글쎄, 이제 이것을 사용하는 코드를 살펴 보겠습니다.

CubeMap 사용 샘플

 vec4 cubemap = texture(iChannel0, direction);

iChannel0 는 미리 정의된 값으로 위 그림의 각 채널 번호에 대해 변수를 제공합니다.
채널의 이용에는, 독자적으로 정의되고 있는 texture 함수를 통해서 이용합니다.
(통상의 texture2D 등은 사용할 수 없으므로 주의가 필요합니다)

실제로 사용하고 있는 샘플은 이쪽