企业网站建设上机考试网页制作图片切换
这篇主要用来记录我学习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：
- 描述：允许开发者自定义色调映射的方法。