[Three] 04. Renderer

Renderer는 WebGL을 이용해 카메라에 담긴 Scene의 모습을 실제 화면에 출력합니다.

import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true,
    // ...
});

WebGLRenderer( )를 선언할 때 매개변수들은 객체 형태로 전달됩니다.

 

아래와 같은 매개변수들을 사용 가능합니다.

매개변수	기능	입력값	기본값
canvas	renderer가 화면을 출력할 canvas 객체	HTMLCanvasElement
alpha	알파값 (밝기)	boolean	false
antialias	안티앨리어싱 여부	boolean	false

ShadowMap

WebGLRenderer의 속성값 중 shadowMap을 사용하여 renderer가 그림자를 어떻게 처리할 것인지를 설정할 수 있습니다.

속성값	기능	입력값	기본값
enabled	그림자 적용 여부	boolean	true
type	그림자 타입	THREE.BasicShadowMap THREE.PCFShadowMap THREE.PCFSoftShadowMap THREE.VSMShadowMap	THREE.PCFShadowMap
autoUpdate	그림자 자동 갱신 여부 (dynamic lighting을 위해)	boolean	true
needsUpdate	다음 render 호출 때 그림자 갱신 여부. autoUpdate = false라면, true로 설정 해 주어야 함	boolean	false

Animation

매 프레임마다 값을 바꿔가며 애니메이션을 구현할 때는 setAnimationLoop( ) 메소드를 사용합니다.

 

PC 또는 모니터 환경 마다 FPS 값이 다를 수 있으므로, 프레임마다 업데이트를 하면 환경에 따라 그 속도가 다르게 나타날 수 있습니다.

 

이를 위해 현재 환경에서 1프레임에 걸리는 시간(delta)을 구해 변하는 값을 보정할 수 있습니다.

const clock = new THREE.Clock();

const drawingFunction = () => {
    const delta = clock.getDelta();  // 보정값
    object.position.x += delta;  // delta(time/frame) * FPS(frame/time) = 1
    
    render.render(scene, camera);
    render.setAnimationLoop(drawingFunction);  // 애니메이션
}

메소드 (기본적인 설정)

메소드	기능	매개변수	반환값
setSize(width, height)	출력할 화면의 크기	width : number 너비 height : number 높이
setPixelRatio(n)	픽셀 해상도	n: number 해상도
render(scene, camera)	랜더링	scene :  THREE.Scene camera : THREE.Camera

const createRenderer = (canvas: HTMLCanvasElement) => {
    const renderer = new THREE.WebGLRenderer({
        canvas,
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2: 1);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.shadowMap.needsUpdate = true;
    
    return renderer;
};