Realistic Render

Tone Mapping

• HDR값을 LDR로 바꾸어주는 역할
• 더 사실적으로 보여준다.

THREE.NoToneMapping (default)
THREE.LinearToneMapping
THREE.ReinhardToneMapping
THREE.CineonToneMapping
THREE.ACESFilmicToneMapping

여러 종류의 Tone mapping이 있다.

• renderer.toneMapping으로 변경이 가능하다.
• toneMappingExposure은 정도를 설정한다.

// Tone mapping
renderer.toneMapping = THREE.ReinhardToneMapping
renderer.toneMappingExposure = 3

Antialising

• model의 detail이 높으면 화면에서 계단 형식으로 보여진다.
• pixel ratio에 따라서 해당 모습이 보여진다.
• 가장 쉬운 해결 방법은 해상도를 높이는 것이다.

supersampling (SSAA)
fullscreensampling (FSAA)
가 해상도를 4배 높이는 방식이다.

multisampling(MSAA)
는 geometry들의 edge에만 해상도를 4배 이상 높이는 방식이다.
겹치는 경우, 주변 color와 섞입니다.

Shadow

• shadow를 사용하려면 light를 만들어야한다.
• renderer에서 shadow를 enable해준다.
• cameraHelper를 활용해서 light를 조정한다.

/**
 * Directional light
 */
const directionalLight = new THREE.DirectionalLight('#ffffff', 6)
directionalLight.position.set(3, 7, 6)
scene.add(directionalLight)

// Shadows
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap

// Helper
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(directionalLightCameraHelper)

• light의 target 위치를 변경하면 적용이 안된다.
• 왜냐하면 object는 render되는 시에 matrix에 compile된다.
• 즉, 이미 render 된 이후에 position, rotation, scale을 바꾸면 적용이 안된다.
• 이를 해결하기 위해서 updateWorldMatrix() 함수를 사용한다.

// Target
directionalLight.target.position.set(0, 4, 0)
directionalLight.target.updateWorldMatrix()

• light의 far 값을 변경하고
• shadow의 mapsize를 높이면 더욱 실제 같다.
• model의 모든 mesh들의 shadow를 활성화한다.

directionalLight.shadow.camera.far = 15

directionalLight.shadow.mapSize.set(1024, 1024)

const updateAllMaterials = () =>
{
    scene.traverse((child) =>
    {
        if(child.isMesh && child.material.isMeshStandardMaterial)
        {
            // ...

            child.castShadow = true
            child.receiveShadow = true
        }
    })
}

Color Space

• color space는 사람의 눈의 민감도에 따라서 색을 저장하는 최적화방법
• Texture를 따로 불러와서 사용할 때는 linear한 texture인지 아닌지 확인후에 최적화해준다.
• gltf는 내부에 정보가 있어서 알아서 적용해준다.

Imported Model

• shadow acne가 발생한다.
• smooth, flat한 면에 발생한다.
• shadow가 면에 발생할지 안할지 계산하면서 발생한다.

해결방안

• light shadow의 bias와 normalBias를 수정한다.
• bias는 flat 면 계산에 도움이 된다.
• normalBias는 둥근 면에 면 계산에 도움이 된다.