You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
4.7 KiB
110 lines
4.7 KiB
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<base href="../../../" />
|
|
<script src="page.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
|
</head>
|
|
<body>
|
|
<h1>후처리 사용 방법(How to use post-processing)</h1>
|
|
|
|
<p>
|
|
여러 three.js 애플리케이션들에서는 3차원 오브젝트를 직접 화면에 렌더링하고 있습니다. 하지만 가끔, DOF, 블룸 필름 그레인 등의
|
|
다양한 그래픽 효과나 다양한 안티 얼레이징 타입을 사용하고 싶을 수도 있습니다. 후처리 방식은 이런 효과를 위해 널리 쓰이는 방법입니다.
|
|
먼저, 비디오 카드의 메모리 버퍼에 해당되는 대상을 렌더링하기 위해 장면이 그려집니다. 그 다음 혹은 화면이 최종적으로 렌더링되기 전에
|
|
하나 또는 여러 개의 후처리를 통해 필터와 효과를 이미지 버퍼에 적용합니다.
|
|
</p>
|
|
<p>
|
|
three.js는 완벽한 후처리 솔루션인 [page:EffectComposer]를 통해 작업 환경을 구현합니다.
|
|
</p>
|
|
|
|
<h2>작업 절차</h2>
|
|
|
|
<p>
|
|
먼저 해야 할 일은 examples 디렉토리의 모든 필요한 파일들을 불러오는 것입니다. three.js의 공식 가이드
|
|
[link:https://www.npmjs.com/package/three npm package]를 따르고 있다고 가정합니다.
|
|
기본 데모 활용에는 아래와 같은 파일들이 필요합니다.
|
|
</p>
|
|
|
|
<code>
|
|
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
|
|
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
|
|
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
|
|
</code>
|
|
|
|
<p>
|
|
모든 파일들을 잘 불러왓다면, composer를 만들어 [page:WebGLRenderer]인스턴스를 넘겨줍니다.
|
|
</p>
|
|
|
|
<code>
|
|
const composer = new EffectComposer( renderer );
|
|
</code>
|
|
|
|
<p>
|
|
composer를 사용할 때, 앱의 애니메이션 루프를 변경해주는 것이 중요합니다. [page:WebGLRenderer]의 render 메서드를 호출하지 말고,
|
|
이제부터는 각각의 [page:EffectComposer]에 대응되는 렌더링 방법을 사용합니다..
|
|
</p>
|
|
|
|
<code>
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
composer.render();
|
|
|
|
}
|
|
</code>
|
|
|
|
<p>
|
|
composer는 이제 준비가 다 되었으니, 후처리 과정 연결을 설정할 수 있습니다.
|
|
이러한 과정은 앱을 만드는 최종 화면 출력을 담당하며, 첨부/삽입한 순서대로 처리합니다.
|
|
이 예제에서 먼저 실행한 것은 *RenderPass* 인스턴스이고 그 다음이 *GlitchPass* 입니다.
|
|
마지막 과정이 끝나면 자동으로 화면에 렌더링됩니다. 패스 설정은 아래와 같습니다.
|
|
</p>
|
|
|
|
<code>
|
|
const renderPass = new RenderPass( scene, camera );
|
|
composer.addPass( renderPass );
|
|
|
|
const glitchPass = new GlitchPass();
|
|
composer.addPass( glitchPass );
|
|
</code>
|
|
|
|
<p>
|
|
*RenderPass*는 일반적으로 맨 위에 위치해서 렌더링된 장면을 후처리의 기본 입력 장면으로 활용합니다. 예제의 경우,
|
|
*GlitchPass*는 이 이미지 데이터에 거친 글리치 효과를 넣어줍니다. [link:https://threejs.org/examples/webgl_postprocessing_glitch live example]에서 작동을
|
|
확인해보세요.
|
|
</p>
|
|
|
|
<h2>기본 내장 후처리방식</h2>
|
|
|
|
<p>
|
|
엔진에서 제공하는 여러 내장 후처리 방식을 활용할 수 있습니다. 이 방식들은
|
|
[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing] 디렉토리에 있습니다.
|
|
</p>
|
|
|
|
<h2>커스텀 방식</h2>
|
|
|
|
<p>
|
|
본인만의 후처리 셰이더를 작성하고 후처리 절차 안에 넣고 싶을 때가 있습니다. 이 때에는,
|
|
*ShaderPass*를 활용합니다. 파일과 커스텀 셰이더를 불러오고 다음 코드를 통해 설정합니다.
|
|
</p>
|
|
|
|
<code>
|
|
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
|
|
import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
|
|
|
|
// later in your init routine
|
|
|
|
const luminosityPass = new ShaderPass( LuminosityShader );
|
|
composer.addPass( luminosityPass );
|
|
</code>
|
|
|
|
<p>
|
|
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader]에서 처음 자신만의 셰이더를 만들기에 적합한 파일을 제공하고 있습니다.
|
|
*CopyShader*는 [page:EffectComposer]의 쓰기 리드 버퍼에 아무 효과를 적용하지 않은 채 이미지 컨텐츠를 복사하기만 합니다.
|
|
</p>
|
|
|
|
</body>
|
|
</html>
|