(TODO)Three.js-渲染效果

WebGLRenderer

Three.js是通过WebGLRenderer渲染场景的，因此只要把WebGLRenderer的每一个概念和属性搞清楚，做出Demo查看其影响范围，就能把如何调试渲染效果给掌握了。

建议先了解下WebGL的基础知识，不然里面有些名词概念会造成理解障碍。

这里我们就对其中影响渲染效果的关键属性进行分析。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//renderer.value
// sRGB颜色空间，营造更符合人眼感知的视觉效果
// renderer.outputEncoding = sRGBEncoding;
renderer.outputEncoding = renderConfig.value.renderer.outputEncoding;
// 渲染正确的物理效果
// @ts-ignore
renderer.physicallyCorrectLights = true;
// 最为专业的ACES色调映射（也是UE里面默认的色调映射），只有ACES支持虚幻功能，虚幻绽放亮度
// 一定要配合环境贴图使用，否则这个开启后，要么是亮度不足，要么就是过度曝光了
// @ts-ignore
// renderer.value.renderer.toneMapping = ACESFilmicToneMapping;
renderer.toneMapping = renderConfig.value.renderer.toneMapping;

// LinearToneMapping最鲜艳，符合科技感的需求
// renderer.toneMapping = LinearToneMapping;
// THREE.LinearToneMapping
// THREE.ReinhardToneMapping
// THREE.CineonToneMapping
// THREE.ACESFilmicToneMapping

// 色调映射曝光度
// @ts-ignore
// renderer.value.renderer.toneMappingExposure = 1.5;
renderer.toneMappingExposure =
  renderConfig.value.renderer.toneMappingExposure;

renderer.setPixelRatio(window.devicePixelRatio);
const container = document.querySelector('.gallery-model') as HTMLDivElement;
renderer.setSize(container.offsetWidth, container.offsetHeight);
// renderer.antialias = true;
// renderer.value.renderer.logarithmicDepthBuffer = true;

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

HDR

光照