3.js - 纹理的 magfilter、minFilter、各向异性过滤（各项异性解决倾斜模糊问题）

效果图，就是一个PlaneGeometry，加了一个贴图，再设置下面这些属性，你就放大缩小着看吧，反正我看不出什么来

代码

// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'
// 导入hdr加载器（专门加载hdr的）
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

//#region
const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 5) // 设置相机位置
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer({
  antialias: true // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion

//#region
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05

// 每一帧根据控制器更新画面
function animate() {
  // 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`
  controls.update()
  // `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染
  requestAnimationFrame(animate)
  // 渲染
  renderer.render(scence, camera)
  // 更新tween
  TWEEN.update()
}
animate()
//#endregion

// --------------------------------------------------------------
// --------------------------------------------------------------

const textureLoader = new THREE.TextureLoader()
let texture = textureLoader.load('../public/assets/texture/brick/brick_diffuse.jpg')

let planeGeometry = new THREE.PlaneGeometry(1, 1)
let material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  map: texture,
  transparent: true
})
const plane = new THREE.Mesh(planeGeometry, material)
scence.add(plane)

`纹理的色彩空间`（srgb模式，纹理看起会更加真实）；（默认是线性模式，看起来会比较白，不真实）
texture.colorSpace = THREE.SRGBColorSpace


`magfilter`：纹理映射时的，放大，过滤方式
	说一下子：
	  当纹理被映射到一个比其原始尺寸更大的表面时（当纹理像素需要被放大，以覆盖多个屏幕像素时），
	  就需要使用放大过滤
	
	1、`THREE.NearestFilter`：最近点过滤
	    当，纹理被放大时，每个屏幕像素，将直接映射到纹理中的最近像素，
	    而不会，对纹理像素进行任何插值或平滑处理，
	    这可能会导致，纹理在放大时显得块状或像素化
	
	2、`THREE.LinearFilter`：线性过滤
	    当，纹理被放大时，每个屏幕像素，将映射到纹理中的多个像素，
	    并，使用这些像素的颜色进行线性插值(平均)，以计算最终的颜色，
	    这种效果消耗大，但是，更加自然真实，不会像素化

// texture.magFilter = THREE.NearestFilter
// texture.magFilter = THREE.LinearFilter


------------------------------------------------------------------------------------


`magfilter`：纹理映射时的，缩小，过滤方式
	说一下子：
	  当纹理在屏幕上，小于其原始大小时（当纹理需要被缩小显示时），的过滤方式
	
	1、`THREE.NearestFilter`：最近点过滤
	    直接选择最近的纹理像素，不进行任何插值；不适于，需要高质量的渲染效果，或快速渲染的场景
	    
	    但是，当纹理被缩小显示时，可能会看到明显的像素化（特别是在纹理与背景或其他物体交界处）
	
	2、`THREE.LinearFilter`：线性过滤
	    这种方式，会在纹理像素之间进行线性插值，以生成更平滑的过渡；
	    它在纹理被缩小显示时，通常会产生更好的视觉效果，因为插值可以减少像素化效应；
	    但它的计算成本稍高，因为它需要计算更多像素的加权平均值；

// texture.minFilter = THREE.NearestFilter
// texture.minFilter = THREE.LinearFilter


------------------------------------------------------------------------------------


	1、`THREE.LinearMipMapLinearFilter`：线性mipmap线性过滤
	
	      当选择，纹理的mipmap级别时，使用，线性插值，来选择两个最接近的mipmap级别；
	
	      在选定的mipmap级别内，也使用线性插值在纹理像素之间进行插值；
	
	      这种过滤方式通常能产生最平滑的纹理效果，尤其是在纹理与背景或其他物体交界处；
	
	
	2、`THREE.LinearMipMapNearestFilter`：线性mipmap最近点过滤
	
	      当选择，纹理的mipmap级别时，使用，线性插值，来选择两个最接近的mipmap级别；
	
	      在选定的mipmap级别内，使用最近点插值（即直接选择最近的纹理像素）；
	
	      这种过滤方式在mipmap级别之间具有平滑过渡，但在每个mipmap级别内部可能会看到像素化效应；

texture.minFilter = THREE.LinearMipMapLinearFilter
// texture.minFilter = THREE.LinearMipMapNearestFilter


------------------------------------------------------------------------------------


	1、`THREE.NearestMipMapLinearFilter`：最近点mipmap线性过滤
	
	      当选择纹理的mipmap级别时，直接选择最近的mipmap级别；
	
	      在选定的mipmap级别内，使用线性插值在纹理像素之间进行插值；
	
	      这种过滤方式在mipmap级别之间可能具有较明显的过渡，但在每个mipmap级别内部具有平滑的纹理效果；
	
	2、`THREE.NearestMipMapNearestFilter`：最近点mipmap最近点过滤
	
	      当选择纹理的mipmap级别时，直接选择最近的mipmap级别；
	
	      在选定的mipmap级别内，也直接选择最近的纹理像素；
	
	      这种过滤方式计算成本最低，但在纹理被缩小显示时可能会看到明显的像素化或块状效应；

// texture.minFilter = THREE.NearestMipMapLinearFilter
// texture.minFilter = THREE.NearestMipMapNearestFilter


------------------------------------------------------------------------------------


`【最重要的是】`
	
	为了使用mipmap过滤，需要确保，在加载纹理时启用了mipmap生成，
	
	即：将 TextureLoader 的 generateMipmaps 置为true


------------------------------------------------------------------------------------



各向异性过滤（`各项异性，解决倾斜模糊问题`）：
  当你在屏幕上渲染一个纹理时，特别是从一个较远的视角观察一个较小的纹理时，你可能会遇到纹理失真或模糊的问题，
  因为，纹理的像素在屏幕上被拉伸或压缩。

  各向异性过滤，是一种用于减少这种纹理失真或模糊的技术，
  与传统的双线性或三线性过滤不同，各向异性过滤考虑了纹理在不同方向上的拉伸程度，并据此调整其采样模式。

  更高的各向异性级别，意味着，更少的纹理失真和更高的图像质量，但也可能需要更多的计算资源。


`总之，下面代码的意思是`：
  检查图形硬件支持的最大各向异性级别，并设置一个纹理的各向异性级别，
  这有助于，确保纹理在渲染时尽可能清晰，减少失真。

'从渲染器的功能（`capabilities`）中，获取支持的最大各向异性级别，不同的GPU和图形驱动程序可能支持不同的最大各向异性级别。'
let maxAnisotropy = renderer.capabilities.getMaxAnisotropy()

'设置纹理的各向异性级别为4，意味着，纹理过滤将考虑最多4个不同的方向来减少失真'
`【注意：如果你设置的级别，高于GPU支持的最大级别，它可能会被自动降低到最大支持的级别】`
texture.anisotropy = 4

console.log(maxAnisotropy)