当前位置：首页 > news >正文

一些学习three的小记录

news 2025/8/4 14:52:27

这篇主要用来记录我学习3d渲染相关的疑问记录,后续会持续的更新,如果我的理解不对欢迎评论区更正。

1.WebGLRenderer和WebGPURenderer的区别

1.1 WebGLRenderer

1.2 WebGPURenderer

二、scene.background和renderer.setClearColor有什么区别

三、renderer.setAnimationLoop和requestAnimationFrame的区别

四、renderer.toneMapping的属性区别和使用场景

1.WebGLRenderer和WebGPURenderer的区别

1.1 WebGLRenderer

文档地址:three.js docs

基于WebGL,使用 WebGL API，广泛支持各种浏览器。
成熟稳定，具有广泛的兼容性和社区支持。
性能：虽然性能不错，但在处理复杂场景或高多边形数时可能会有瓶颈；使用纹理压缩、实例化等技术优化性能。
着色器：使用 GLSL 着色器。
适用于需要广泛兼容性的项目

const renderer = new THREE.WebGLRenderer();

1.2 WebGPURenderer

官方文档地址：WebGPU

基于WebGPU,使用WebGPU API，更现代的图形API
浏览器支持有限。
着色器：使用 WGSL 或 SPIR-V 着色器语言，可能需要额外配置。
性能：更高效的资源管理、更低的 CPU 开销。
旨在提供更高的性能和更低的延迟，特别是复杂场景和计算（偏向用于性能要求高的场景中）。

const renderer = new THREE.WebGPURenderer();

二、scene.background和renderer.setClearColor有什么区别

共同点：都可以设置背景颜色。

不同点：

作用范围：background只能影响特定的场景背景，setClearColor设置渲染器清除颜色，影响所有场景
支持类型：background可以设置颜色、纹理；setClearColor只能设置颜色。

三、renderer.setAnimationLoop和requestAnimationFrame的区别

共同点：两个都用于创建动画循环。

不同点：

renderer.setAnimationLoop可以自动处理虚拟现实（VR）和增强现实(AR)渲染，简化了动画循环的管理，对于WebXR项目，必须使用此函数。
requestAnimationFrame是原生js方法，需要手动调用渲染逻辑。

用法如下：

// setAnimationLoop的用法
renderer = new WebGPURenderer({ antialias: true });
renderer.setAnimationLoop(() => {renderer.render(scene, camera);}); // 如果是WebXR必须使用这个// requestAnimationFrame的用法
function animate() {requestAnimationFrame(animate);// 渲染逻辑renderer.render(scene, camera);
}
animate();

四、renderer.toneMapping的属性区别和使用场景

THREE.NoToneMapping：
- 描述：不进行色调映射
- 使用场景：场景不需要任何色调调整
THREE.LinearToneMapping：
- 描述：线性映射，不做特殊处理。
- 使用场景：简单场景，通常用于调试。
THREE.ReinhardToneMapping:
- 描述：逐渐压缩高亮部分，保持细节
- 使用场景：游戏和实时渲染，需要平衡高亮和细节。
THREE.CineonToneMapping:
- 描述：模拟胶片的色调映射
- 使用场景：电影渲染，追求胶片效果。
THREE.ACESFilmicToneMapping：
- 描述：高质量色调映射，模拟电影胶片的宽动态范围。
- 使用场景：高动态范围（HDR）场景，追求真实感和高质量视觉效果。
THREE.AgXToneMapping:
- 描述：过度暴露的区域提供了更好的颜色处理。尤其是明亮部偏于白色，更接近真实相机。
- 使用场景：适用于需要表现真实光照效果的场景，比如摄影模拟、游戏中的环境光照效果，细致表现光线变化和阴影的应用场景，如建筑可视化。
THREE.NeutralToneMapping：
- 描述：旨在提供一种中性（平衡）色调映射方式，保持图像的自然色彩和亮度。
- 使用场景：这种方法提供了一种较为简单的转换方式，能够在不显著改变图像原始色彩的情况下，适当降低亮度。
THREE.CustomToneMapping：
- 描述：允许开发者自定义色调映射的方法。