基于three.js的虚拟人阴影渲染优化方案

作者：来自 vivo 互联网大前端团队- Su Ning

一、前言

二、数字人中使用的阴影

我们为大家准备了抽奖福利，请继续阅读下去。

三、全局阴影的优化

为了得到更好的阴影边缘，可以通过提升 shadowMap 的分辨率来优化，但是分辨率的提升势必会导致性能开销变大，如何在不提升贴图分辨率的情况下提升阴影边缘的质量呢？

const bias = 1.6 // 设置一个y轴的偏置值，使得阴影相机可以正对人脸
const mainLight = new THREE.DirectionalLight(0xf2f7ff)
mainLight.intensity = 1.8
mainLight.position.set(0.3, 0.81 + bias, 2.71)
 
const target = new THREE.Object3D()
target.position.set(0, bias, 0)  // 设置灯光的照射目标
group.add(target)
mainLight.target = target
mainLight.castShadow = true
 
mainLight.shadow.radius = 2  // 设置阴影边缘的模糊半径，这个值并不是越大越好，需要根据实际场景进行微调
const { camera } = mainLight.shadow
camera.far = 5
 
// 阴影相机的默认边界为上下左右分别为5，将其缩小至各0.5
camera.top = -0.5
camera.bottom = 0.5
camera.left = -0.5
camera.right = 0.5

四、地面阴影的实现

• 创建一个正交相机，将相机的位置设置在脚下，朝向上方并有一点点倾角，获取到从地面向上看的图像；

• 创建一个材质，并且自定义着色器渲染物体的深度信息，渲染第一步创建的相机的场景的时候将材质赋值给scene.overrideMaterial属性，这样场景中所有的物体都会使用这个材质进行渲染；

• 再创建一个正交相机，用于模糊第一个相机获取到的图像；

• 将模糊后的图像作为贴图，应用到地板平面上；

• 此方案在每帧画面渲染之前都要再额外先把地面阴影的场景渲染出来，所以会增加额外的性能开销，由于地面阴影的边缘经过模糊平滑的处理，所以分辨率并不需要太高，贴图尺寸设置为64*64即可，有效的控制地面阴影带来的性能损失。

// 设置阴影渲染目标，作为阴影贴图
const size = 64
const shadowTarget = new THREE.WebGLRenderTarget(size, size)
const shadowTargetBlur = new THREE.WebGLRenderTarget(size, size)
this.shadowTarget = shadowTarget
this.shadowTargetBlur = shadowTargetBlur
 
// 调整位置
this.position.set(0, -0.05, 0)
this.rotateX(Math.PI  2)  //旋转地板与地面平行
 
// 设置阴影相机
const camera = new THREE.OrthographicCamera(-0.75, 0.75, 0.75, -0.75, 0, 0.5)
 
// 设置地面相机的一个倾斜角度
camera.rotateX(Math.PI  6)
camera.rotateY(Math.PI  6)
this.add(camera)
this.camera = camera
 
// 设置视觉相机
const visionCamera = new THREE.OrthographicCamera(-0.75, 0.75, 0.75, -0.75, 0, 2)
this.add(visionCamera)
this.visionCamera = visionCamera
 
// 设置深度材质的片段着色器
this.depthMaterial.onBeforeCompile = function (shader) {
  shader.fragmentShader = shader.fragmentShader.replace(
    'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
    'gl_FragColor = vec4( vec3( 0.0 ), ( 1.0 - fragCoordZ ) * opacity );'
  )
}
 
// 创建地板
const planeGeometry = new THREE.PlaneGeometry(1.5, 1.5)
const material = new THREE.MeshBasicMaterial({
  opacity: 0.3,
  transparent: true,
  map: shadowTarget.texture,
  side: THREE.DoubleSide,
  color: 0x666666
})
const plane = new THREE.Mesh(planeGeometry, material)
visionCamera.add(plane)
 
const blurPlane = new THREE.Mesh(planeGeometry)
blurPlane.visible = false
visionCamera.add(blurPlane)
 
this.plane = plane
this.blurPlane = blurPlane

五、结语

• 通过合理选择阴影的渲染方式、优化阴影相机的视野范围以及优化阴影贴图的分辨率，可以在保证性能没有明显提升的情况下显著提升阴影的品质；

• 通过获取底部视角的深度信息结合自定义shader来生成地面阴影，对页面的性能没有明显的损耗的同时达到一个比较好的效果。