WebGL渲染器render常量-面剔除模式、阴影类型、色调映射

面剔除模式

THREE.CullFaceNone
THREE.CullFaceBack
THREE.CullFaceFront
THREE.CullFaceFrontBack

CullFaceNone 禁用面剔除。
CullFaceBack 为默认值，剔除背面。
CullFaceFront 剔除正面。
CullFaceFrontBack 剔除正面和背面。

设置	含义	使用场景
THREE.CullFaceNone	渲染正面和背面	透明物体、双面物体（旗帜、纸张等）。
THREE.CullFaceBack	剔除背面，只渲染正面	默认设置，用于绝大多数普通物体。
THREE.CullFaceFront	剔除正面，只渲染背面	调试内部结构或特定渲染效果。
THREE.CullFaceFrontBack	剔除正面和背面（不渲染）	隐藏物体，但保留几何数据。

1. THREE.CullFaceNone

• 含义：不启用面剔除，渲染所有面（包括正面和背面）。

• 应用场景：

  • 透明物体（如玻璃球），需要渲染正面和背面。

  • 双面材质（如旗帜或纸张）等需要从两侧看到的几何体。

• 效果：所有面都会被渲染，无论正面还是背面。

---

2. THREE.CullFaceBack

• 含义：剔除背面（Back Face），只渲染正面。

• 应用场景：

  • 默认设置，适用于大多数不需要透明效果的物体。

  • 例如，箱子、墙壁等只需要正面可见。

• 效果：只渲染正面，背面不可见。

---

3. THREE.CullFaceFront

• 含义：剔除正面（Front Face），只渲染背面。

• 应用场景：

  • 需要从背后观察物体的内部结构（如用于调试）。

  • 特殊效果，例如通过剔除正面来模拟物体的“外壳剥离”。

• 效果：正面不可见，只渲染背面。

---

4. THREE.CullFaceFrontBack

• 含义：剔除正面和背面，不渲染任何面。

• 应用场景：

  • 用于隐藏物体（但仍保留物体的几何信息，如碰撞检测）。

  • 特定优化场景，临时禁用几何体渲染。

• 效果：物体完全不可见，但仍存在于场景中。

---

如何设置面剔除？

Three.js 提供了材质属性和渲染器全局设置来配置面剔除行为：

通过材质设置：

const material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.FrontSide, // 或 BackSide, DoubleSide });

通过渲染器设置：

renderer.setFaceCulling(THREE.CullFaceBack, THREE.FrontFaceDirectionCW); // 参数解释： // 第一个参数：选择剔除选项，如 CullFaceBack。 // 第二个参数：指定正面方向，通常是顺时针（CW）或逆时针（CCW）。

---

属性	含义	适用场景
THREE.FrontFaceDirectionCW	顺时针方向的面为正面	适用于特定模型、镜像变换后或需要定制正面方向的场景。
THREE.FrontFaceDirectionCCW	逆时针方向的面为正面（默认）	大多数场景和标准模型使用此方向。

总结

设置	含义	使用场景
THREE.CullFaceNone	渲染正面和背面	透明物体、双面物体（旗帜、纸张等）。
THREE.CullFaceBack	剔除背面，只渲染正面	默认设置，用于绝大多数普通物体。
THREE.CullFaceFront	剔除正面，只渲染背面	调试内部结构或特定渲染效果。
THREE.CullFaceFrontBack	剔除正面和背面（不渲染）	隐藏物体，但保留几何数据。

 

阴影类型

类型	优点	缺点	适用场景
THREE.BasicShadowMap	性能高，简单易用	边缘硬，质量低	性能有限的设备或简单场景
THREE.PCFShadowMap	平滑过渡，适合大多数场景	性能开销略高	中端性能场景，效果和性能平衡
THREE.PCFSoftShadowMap	阴影柔和，更真实	性能开销更高	高端性能场景，要求高质量阴影
THREE.VSMShadowMap	平滑自然，减少条纹和光漏	性能开销高，可能有轻微模糊	真实感要求极高的高端场景

示例：

const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true; // 启用阴影
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 设置为 PCFSoftShadowMap

// 示例场景中的阴影光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true; // 启用光源的阴影投射
scene.add(light);

 

色调映射

用来将高动态范围（HDR）颜色数据转换为低动态范围（LDR）的过程，以适应屏幕显示

映射类型	高光压缩	对比度	适合场景
THREE.NoToneMapping	无压缩	原始值	调试、无需求的场景
THREE.LinearToneMapping	基本压缩	中性	简单的线性渲染场景
THREE.ReinhardToneMapping	柔和压缩	较低	自然光场景
THREE.CineonToneMapping	强烈压缩	高	电影感场景
THREE.ACESFilmicToneMapping	平衡压缩	自然	真实感渲染，推荐大多数 HDR 渲染
THREE.AgXToneMapping	自然压缩	精确	高端渲染，强调色彩科学
THREE.NeutralToneMapping	中性压缩	中性	保真度要求高的场景
THREE.CustomToneMapping	自定义	自定义	特殊需求或实验性渲染

const renderer = new THREE.WebGLRenderer();
renderer.toneMapping = THREE.ACESFilmicToneMapping; // 使用 ACES 色调映射
renderer.toneMappingExposure = 1.5; // 调整曝光值

初学者推荐： THREE.ACESFilmicToneMapping（默认真实感效果）。

性能优先： THREE.NoToneMapping 或 THREE.LinearToneMapping。

电影风格： THREE.CineonToneMapping 或 THREE.ReinhardToneMapping。

高端渲染： THREE.AgXToneMapping 或自定义映射。

1. THREE.NoToneMapping

含义

• 不进行任何色调映射，直接使用原始的线性颜色值。

• 特点：

  • 图像可能会出现高光溢出或颜色失真，因为直接显示 HDR 数据。

  • 性能最好，但没有任何动态范围压缩。

适用场景

• 调试场景，观察场景中的真实光照值。

• 不需要色调映射的技术性渲染场景。

---

2. THREE.LinearToneMapping

含义

• 使用简单的线性缩放方法将 HDR 转换为 LDR。

• 特点：

  • 颜色过渡自然，但无法很好地压缩高光。

  • 效果比较平淡，不适合高对比度场景。

适用场景

• 简单的渲染需求，或需要与其他线性颜色空间匹配时。

---

3. THREE.ReinhardToneMapping

含义

• 使用经典的 Reinhard 算法对高光进行压缩。

• 特点：

  • 高光被柔和地压缩，避免过曝。

  • 整体效果较自然，但可能显得对比度不足。

适用场景

• 适用于自然光场景，如室外或写实渲染。

---

4. THREE.CineonToneMapping

含义

• 基于 Cineon 格式的映射方法，常用于电影后期。

• 特点：

  • 高光压缩较强，色彩鲜艳，电影感较强。

  • 整体视觉对比度较高。

适用场景

• 电影级别渲染，或需要突出高光和颜色的场景。

---

5. THREE.ACESFilmicToneMapping

含义

• 基于 ACES（Academy Color Encoding System）的算法，用于真实感和电影级别的渲染。

• 特点：

  • 高光和暗部细节平衡得很好，整体非常真实。

  • 色彩表现自然，是目前 Three.js 中常用的色调映射方法之一。

适用场景

• 真实感场景渲染，如建筑可视化、产品渲染。

• 强烈推荐用于大多数 HDR 渲染。

---

6. THREE.AgXToneMapping

含义

• 使用 AgX 算法的映射方式，特别注重色彩科学的精准性。

• 特点：

  • 颜色表现真实且细腻，动态范围处理更自然。

  • 是 ACES 的一种改进，更接近人眼的感知。

适用场景

• 高端图形渲染和影视制作。

• 需要最大化视觉质量的场景。

---

7. THREE.NeutralToneMapping

含义

• 一种相对中性的色调映射方法，专注于保留原始色彩。

• 特点：

  • 不进行太多干预，呈现真实的颜色数据。

  • 与 NoToneMapping 类似，但更适合 HDR 渲染。

适用场景

• 对颜色保真度要求高的场景。

• 需要高动态范围色彩的技术性可视化。

---

8. THREE.CustomToneMapping

含义

• 用户可以自定义自己的色调映射算法。

• 特点：

  • 完全自由，可实现高度个性化的效果。

  • 需要编写 GLSL 代码实现自定义逻辑。

适用场景

• 需要实现特定视觉效果或实验性渲染的场景。