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)
  // 更新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

texture.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.EquirectangularReflectionMapping
  texture.magFilter = THREE.LinearFilter
  texture.minFilter = THREE.LinearMipMapLinearFilter
  texture.anisotropy = 16
  /*
    texture.flipY：用于翻转纹理的Y轴，
    但是，在使用KTX2Loader时，纹理通常已经按正确的方式编码，因此不需要翻转。
    如果，你的纹理看起来是颠倒的，可能需要检查纹理文件本身。
  */
  // texture.flipY = true
  texture.needsUpdate = true

  scence.background = texture
  scence.environment = texture

  plane.material.map = texture
})



/*
  色调映射：是渲染过程中的一个重要步骤，
           用于将高动态范围（HDR）颜色值，映射到低动态范围（LDR）显示设备上，
           以模拟真实世界中的光照效果。
*/
// 设置色调映射
renderer.toneMapping = THREE.ACESFilmicToneMapping

// 设置色调映射曝光度
/*
  `renderer.toneMappingExposure`设置为1，是一个相对中性的选择，
  意味着，曝光度被设置为一个默认值，这个值不会增加也不会减少场景的整体亮度，
  但是，这个默认值，可能并不总是最适合你的场景，
  因为，不同的场景，需要不同的曝光度，来达到最佳的视觉效果。

  有以下选择
    1、renderer.toneMappingExposure < 1，降低，场景的整体亮度
    2、renderer.toneMappingExposure = 1，增加，场景的整体亮度
*/
renderer.toneMappingExposure = 1

const 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)