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

一些学习three的小记录

news 来源：原创 2024/9/19 21:22: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：
- 描述：允许开发者自定义色调映射的方法。

五、什么时候用纹理贴图的magFilter、minFilter属性

当有需要纹理在放大和缩小时的视觉效果可以用。

5.1 texture.magFilter

定义：当一个纹素覆盖大于一个像素时，贴图将如何采样。
常用属性值：
- THREE.NearestFilter: 使用最近邻过滤，像素会变得很尖锐，可能会出现锯齿状。适合像素风格的图像。
- THREE.LinearFilter: 这是默认值。使用线性过滤，提供更平滑的放大效果，适合需要平滑过渡的图像。
使用场景：
- 在需要放大纹理并希望保持视觉质量时，可以选择 THREE.LinearFilter
- 当需要保持像素化效果时（例如，在像素艺术或复古风格游戏中），可以选择 THREE.NearestFilter。

5.2 texture.minFilter

定义：当一个纹素覆盖小于一个像素时，贴图将如何采样。
常用属性值：
- THREE.NearestFilter: 最近邻过滤，适合像素风格图像。
- THREE.NearestMipMapNearestFilter: 使用最近邻过滤，并选择最接近的 MIP 贴图。
- THREE.NearestMipMapLinearFilter: 使用最近邻过滤，并在 MIP 贴图中进行线性插值。
- THREE.LinearFilter: 线性过滤。
- THREE.LinearMipMapNearestFilter: 线性过滤并选择最接近的 MIP 贴图。
- THREE.LinearMipMapLinearFilter: 线性过滤，并在 MIP 贴图中进行线性插值，通常提供最佳视觉效果。
使用场景：
- 对于需要保持清晰轮廓的纹理（如 UI 元素），可以选择 THREE.NearestFilter。
- 当纹理需要缩小并且希望保持平滑效果时，使用 THREE.LinearFilter 或 THREE.LinearMipMapLinearFilter。