一些学习three的小记录
这篇主要用来记录我学习3d渲染相关的疑问记录,后续会持续的更新,如果我的理解不对欢迎评论区更正。
目录
1.WebGLRenderer和WebGPURenderer的区别
1.1 WebGLRenderer
1.2 WebGPURenderer
二、scene.background和renderer.setClearColor有什么区别
三、renderer.setAnimationLoop和requestAnimationFrame的区别
四、renderer.toneMapping的属性区别和使用场景
五、什么时候用纹理贴图的magFilter、minFilter属性
5.1 texture.magFilter
5.2 texture.minFilter
六、position和translate的区别
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。
六、position和translate的区别
共同点：都是用于控制对象的位置
不同点：
- position是THREE.Vector3对象；translateX、translateY、translateZ是对象方法。
- position是直接设置对象的绝对位置，translate改变模型自身对坐标原点的位置(意思是：position改变位置后，旋转还是按照几何体的中心旋转；但translate是改变几何体坐标系后旋转)
const geometry = new THREE.Mesh(geometry, material);
geometry.position.set(1, 2, 3); // 设置绝对位置为 (1, 2, 3)const geometry = new THREE.Mesh(geometry, material);
geometry.translateX(1); // 沿 x 轴平移 1 单位
geometry.translateY(2); // 沿 y 轴平移 2 单位
geometry.translateZ(3); // 沿 z 轴平移 3 单位