three.js - Realistic Render

<script setup>
  import * as THREE from 'three'
  import {OrbitControls} from 'three/addons/controls/OrbitControls.js'
  import * as dat from 'dat.gui'
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

  /**
   * loaders
  */
  const gltfLoader = new GLTFLoader()
  const cubeTextureLoader = new THREE.CubeTextureLoader()

  /**
   * scene
  */
  const scene = new THREE.Scene()
  
  /**
   * camera
  */
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    100
  )
  camera.position.set(4, 1, - 4)

  /**
   * renderer
  */
  const renderer = new THREE.WebGLRenderer()
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()

    renderer.setSize(window.innerWidth, window.innerHeight) 
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))   
  })  

  /**
   * control
  */
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  /**
   * render
  */
  const tick = () => {

    controls.update()
    requestAnimationFrame(tick)
    renderer.render(scene, camera)
  }
  tick()

  /**
   * gui
  */
  const gui = new dat.GUI()
</script>

• 添加物体和灯光

  /**
    * light
  */
  const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
  directionalLight.position.set(0.25, 3, -2.25)
  scene.add(directionalLight)

  /**
   * test sphere
  */
 const testSphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 32),
  new THREE.MeshStandardMaterial()  // PBR材料，需要光照场景的材料
 )
 scene.add(testSphere)

  /**
   * gui
  */
  const gui = new dat.GUI()

  gui.add(directionalLight, 'intensity').min(0).max(10).step(0.001).name('lightIntensity')
  gui.add(directionalLight.position, 'x').min(-5).max(5).step(0.001).name('lightX')
  gui.add(directionalLight.position, 'y').min(-5).max(5).step(0.001).name('lightY')
  gui.add(directionalLight.position, 'z').min(-5).max(5).step(0.001).name('lightZ')

• Load the model, increase its scale, rotate it

  /**
   * model
  */
  gltfLoader.load('../public/models/FlightHelmet/glTF/FlightHelmet.gltf', (gltf) => {
    gltf.scene.scale.set(10, 10, 10)
    gltf.scene.position.set(0, -4, 0)
    gltf.scene.rotation.y = Math.PI * 0.5
    scene.add(gltf.scene)

    gui.add(gltf.scene.rotation, 'y').min(- Math.PI).max(Math.PI).step(0.001).name('rotation')
  })

• Load the environment map, 我们加载的是立方体纹理，因此需要立方体纹理加载器

  /**
   * environment map
  */
  // p - positive n - negative
  const environmentMap = cubeTextureLoader.load([
    '../public/imgs/realistic-render/environmentMaps/0/px.jpg',  // 正x轴
    '../public/imgs/realistic-render/environmentMaps/0/nx.jpg',  // 负x轴
    '../public/imgs/realistic-render/environmentMaps/0/py.jpg',
    '../public/imgs/realistic-render/environmentMaps/0/ny.jpg',
    '../public/imgs/realistic-render/environmentMaps/0/pz.jpg',
    '../public/imgs/realistic-render/environmentMaps/0/nz.jpg',
  ])

• Apply the environment map to the model

  • 通常我们加载的 model 结构是很复杂的，嵌套了很多层，这部分可以在gltfLoader.load(..., (gltf) => {})回调函数里打印出来观察 console.log(gltf.scene)
  • 将 environment map 应用在 model 上时，要应用在每一个相关材质上的envMap属性上，因此用常规的遍历添加是很困难的
  • 所以我们在这一步使用 scene.traverse()实现递归遍历，将scene.traverse()封装在一个函数里，然后我们在导入model的回调函数里使用，同时打印一下我们遍历到的对象
  • Ps: 如果只需要 apply the environment map to the model，简单的设置scene.environment = envirommentMap就可以了，我们这里因为还需要调整 envMapIntensity属性，所以用了相对更复杂的写法
    gltf.scene.png

  /**
   * update all materials
  */
  const updateAllMaterials = () => {
    scene.traverse(child => {
      console.log(child);
    })
  }

  /**
   * model
  */
  gltfLoader.load('../public/models/FlightHelmet/glTF/FlightHelmet.gltf', (gltf) => {
    ...
    ...
    updateAllMaterials()
  })

scene.traverse()遍历到的对象.png

• 完成以上步骤可以观察到，scene.traverse()遍历到的对象是每一个Mesh，有AxesHelper、Light等等，但我们只需要将environment map应用到material上，这里需要的是MeshStandardMaterial

  /**
   * update all materials
  */
  const updateAllMaterials = () => {
    scene.traverse(child => {
      if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial) {
        child.material.envMap = environmentMap
        child.material.envMapIntensity = 5  // 尝试改变该属性观察environmentMap带来的变化
      }
    })
  }

• 上面代码中我们通过调整envMapIntensity属性可以观察到环境贴图带来的一些变化，但要想找到相对准确的属性值，就需要频繁调整属性，最便捷的方式当然是添加到gui中，但是这个值对于每个material来说又是不一样的，因此就需要只调整某一项然后应用到每一个需要的地方

  /**
   * update all materials
  */
  const updateAllMaterials = () => {
    scene.traverse(child => {
      if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial) {
        child.material.envMap = environmentMap
        child.material.envMapIntensity = debugObject.envMapIntensity
      }
    })
  }

  /**
   * gui
  */
  const gui = new dat.GUI()
  const debugObject = {}
  ...  
  ...
  debugObject.envMapIntensity = 5
  gui.add(debugObject, 'envMapIntensity').min(0).max(10).step(0.01).onChange(updateAllMaterials)

• Output encoding 输出编码

// 定义渲染器的输出编码，默认值如下
renderer.outputColorSpace = THREE.SRGBColorSpace

• 设置色调映射

renderer.toneMapping = THREE.ReinhardToneMapping  // 色调映射
renderer.toneMappingExposure = 3  // 色调映射的曝光级别

• Antialiasing 将页面放大很多倍时，经常会在几何体的边缘看到锯齿状

  • one easy solution would be to increase our render's resolution to the double and each pixel color will automatically be averaged from the 4 pixel rendered, this is called super sampling(SSAA) or full sampling(FSAA), it's easy and efficient but not performant
  • An other solution is called multiple sampling(MSAA) will also render multiple values per pixel(usually 4) like for the SSAA but only on the geometrie's edges

    const renderer = new THREE.WebGLRenderer({
      antialias: true
    })
  

• Shadow

renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap

  /**
   * update all materials
  */
  const updateAllMaterials = () => {
    scene.traverse(child => {
      if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial) {
        ...
        ...
        child.castShadow = true
        child.receiveShadow = true
      }
    })
  }

  /**
    * light
  */
  const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
  directionalLight.position.set(0.25, 3, -2.25)
  directionalLight.castShadow = true
  directionalLight.shadow.camera.far = 15  // 可以使用CameraHelper辅助
  directionalLight.shadow.mapSize.set(1024, 1024)  // 提高阴影贴图分辨率，默认512
  scene.add(directionalLight)

  // const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
  // scene.add(directionalLightCameraHelper)

最终效果.png