GLSL 에서 투영 Projection 처리를 통한 굴절 효과 구현

굴절 효과 구현

객체가 존재하지 않는 백그라운드 렌더 텍스쳐와, 해당 객체의 UV 좌표를 가져와서 렌더 타겟으로부터의 색상을 가져오고, 적당하게 UV를 굴절시켜 메시 표면에 렌더링한다.

구현 방법은 여러가지가 있다. 객체가 존재하는 영역을 2D 렌더링할 때 투명하게 렌더링하되 해당 좌표 영역만 흔들 거리는 굴절 효과를 주거나, 메시 표면에 UV를 그려주면서 가져오는 UV 영역을 굴절 효과를 줄 수도 있다. 또한 레이트레이싱을 통해 가져오는 벡터를 흔들리게 하면된다. 하지만 게임에서 구현하기 위해 레이트레이싱은 속도 문제가 있기 때문에 유사한 효과를 주기 위하여 그려진 화면에서 굴절 효과를 주는 방법이 유리하다.

객체는 사실상 여기에 렌더링되지만, 객체의 표면위에 그대로 렌더링하고 흔들리게 하는 것이다.

즉 착각 효과를 주는 것이다. 위 표면에 그려지는 건 임의로 뷰가 옆에서 보이게끔 테스트한 것이고, 실제로는 카메라에 딱 붙어 오차가 없게끔, 이질감이 없게끔 느껴지게 한다.

큐브 없이 원본 렌더링

기본적으로 큐브 없이 렌더링되는 렌더타겟을 만들어둔다.

큐브위에 배경 일치하게 렌더링

processMatrix 와 viewMatrix 는 동일하다. (테스트용으로 고정하기 위함)

pos =projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);

pos 로 선언해서 쉐이더 단에서 사용할 수 있게끔 2D 투영된 위치로 연산한다.

vec4 cPos = pos/pos.w; vec2 uv = vec2((cPos.x+1.0)/2.0, (cPos.y+1.0)/2.0);

깊이 버퍼도 필요 없는 이유가 z 버퍼도 같이 vec4 를 통해 쉐이더로 들어가기 때문에 바로 uv 좌표로 변환하면 된다. 이러면 uv 좌표가 메시 영역의 전체 uv 영역이 된다. 이 공간에 배경을 그림을 그려준다.

vec4 cPos = pos/pos.w; vec2 uv = vec2((cPos.x+1.0)/2.0, (cPos.y+1.0)/2.0); uv += sin((uv.xy)*100.0+(uTime*10.0))*0.005; vec4 tex = texture(backgroundTexture, uv); gl_FragColor = tex +0.1; gl_FragColor.a=1.0;

/* 실제 렌더 */ backCube.material = useCube; useCube.uniforms.backgroundTexture.value = backgroundTarget.texture; useCube.uniforms.uTime.value = nowTime/1000; cube.material =material; renderer.setRenderTarget(renderTarget); renderer.render(scene, camera);