3.js - 色调映射（renderer.toneMapping）

在这里插入图片描述


// @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'// ktx2格式加载器
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js'// 导入dds格式加载器
import { DDSLoader } from 'three/examples/jsm/loaders/DDSLoader.js'// 导入tga
import { TGALoader } from 'three/addons/loaders/TGALoader.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)// 更新tweenTWEEN.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.SRGBColorSpacetexture.minFilter = THREE.LinearMipMapLinearFilter// 从渲染器的功能（`capabilities`）中，获取支持的最大各向异性级别，不同的GPU可能支持不同的最大各向异性级别
let maxAnisotropy = renderer.capabilities.getMaxAnisotropy()
// 设置纹理的各向异性级别为4，意味着，纹理过滤将考虑最多4个不同的方向来减少失真。
// 注意：如果你设置的级别，高于GPU支持的最大级别，它可能会被自动降低到最大支持的级别。
texture.anisotropy = 4
console.log('纹理的各项异性级别maxAnisotropy= ', maxAnisotropy)// ktx2 加载器
let ktx2Loader = new KTX2Loader()
/*设置transcoder的路径，Transcoder是一个JavaScript库，用于在浏览器中解码KTX2格式的纹理；这个库需要你单独引入，路径应指向你放置transcoder文件（如basis_transcoder.js）的目录；detectSupport(renderer)：检测当前WebGL渲染器是否支持KTX2纹理；
*/
ktx2Loader.setTranscoderPath('../public/basis/').detectSupport(renderer)
let ktx2Texture = ktx2Loader.load('../public/assets/texture/opt/ktx2/Alex_Hart-Nature_Lab_Bones_2k_uastc-mip-triangle.ktx2', texture => {// texture.mapping = THREE.EquirectangularReflectionMappingtexture.magFilter = THREE.LinearFiltertexture.minFilter = THREE.LinearMipMapLinearFiltertexture.anisotropy = 16/*texture.flipY：用于翻转纹理的Y轴，但是，在使用KTX2Loader时，纹理通常已经按正确的方式编码，因此不需要翻转。如果，你的纹理看起来是颠倒的，可能需要检查纹理文件本身。*/// texture.flipY = truetexture.needsUpdate = truescence.background = texturescence.environment = textureplane.material.map = texture
})/*色调映射：是渲染过程中的一个重要步骤，用于将高动态范围（HDR）颜色值，映射到低动态范围（LDR）显示设备上，以模拟真实世界中的光照效果。
*/
// 设置色调映射
renderer.toneMapping = THREE.ACESFilmicToneMapping// 设置色调映射曝光度
/*`renderer.toneMappingExposure`设置为1，是一个相对中性的选择，意味着，曝光度被设置为一个默认值，这个值不会增加也不会减少场景的整体亮度，但是，这个默认值，可能并不总是最适合你的场景，因为，不同的场景，需要不同的曝光度，来达到最佳的视觉效果。有以下选择1、renderer.toneMappingExposure < 1，降低，场景的整体亮度2、renderer.toneMappingExposure = 1，增加，场景的整体亮度
*/
renderer.toneMappingExposure = 1const gui = new GUI()
gui.add(renderer, 'toneMapping', {'无色调映射'：直接输出HDR颜色值（如果支持）No: THREE.NoToneMapping,'线性色调映射'：将HDR颜色值，线性地缩放到LDR范围Linear: THREE.LinearToneMapping,'Reinhard色调映射'：一种流行的HDR到LDR的映射方法，能够保持颜色和亮度的对比度；可以更好地处理高亮度的区域，它根据整个图像的平均亮度来调整每个像素的亮度。Reinhard: THREE.ReinhardToneMapping,'Cineon色调映射'：模仿电影胶片的效果Cineon: THREE.CineonToneMapping,'ACESFilmic色调映射'：基于电影工业标准ACES的色调映射算法，旨在提供更自然的色彩和亮度过渡ACESFilmic: THREE.ACESFilmicToneMapping})gui.add(renderer, 'toneMappingExposure', 0, 3, 0.1)