基于three.js的虛擬人陰影渲染優(yōu)化方案
一、前言
在3D網(wǎng)頁(yè)應(yīng)用中，高質(zhì)量的陰影渲染對(duì)于營(yíng)造場(chǎng)景的真實(shí)感至關(guān)重要。作為廣泛采用的 WebGL 框架之一，three.js 為開(kāi)發(fā)者提供了多種陰影渲染選項(xiàng)，使得創(chuàng)建生動(dòng)逼真的光影效果成為可能。然而，實(shí)現(xiàn)這些視覺(jué)上的增強(qiáng)往往伴隨著性能開(kāi)銷，尤其在處理復(fù)雜場(chǎng)景或運(yùn)行于低端設(shè)備時(shí)更為明顯。因此，在確保畫面質(zhì)量的同時(shí)優(yōu)化陰影渲染，以提升用戶體驗(yàn)和保持流暢性，便成了一個(gè)核心挑戰(zhàn)。本文將解析 three.js 中的陰影渲染機(jī)制，并提供一系列實(shí)用的優(yōu)化策略，助力開(kāi)發(fā)者在不同應(yīng)用場(chǎng)景下達(dá)成最佳平衡。
二、數(shù)字人中使用的陰影
在開(kāi)發(fā)擬我形象的過(guò)程中，恰當(dāng)運(yùn)用陰影可以顯著增加模型的立體感與真實(shí)度。同時(shí)，在地面上添加陰影不僅能夠?yàn)橛^察者提供空間定位的參考點(diǎn)，還能大大增強(qiáng)場(chǎng)景的空間層次感和沉浸體驗(yàn)。
- 圖1（全局陰影）
圖2（地面陰影）
接下來(lái)，我們將探討全局陰影的優(yōu)化方法以及地面陰影的具體實(shí)施方案。
三、全局陰影的優(yōu)化
全局陰影的實(shí)現(xiàn)主要依賴于 three.js 提供的 shadowMap。只需簡(jiǎn)單幾步——在 WebGLRenderer 中啟用 shadowMap 功能、定義產(chǎn)生陰影的光源以及設(shè)定哪些物體負(fù)責(zé)投射或接收陰影——即可輕松完成設(shè)置。
若僅使用 three.js 默認(rèn)配置下的陰影設(shè)置，雖然操作簡(jiǎn)便但效果通常不盡如人意。特別是在針對(duì)移動(dòng)平臺(tái)進(jìn)行開(kāi)發(fā)時(shí)，考慮到性能限制，我們有必要對(duì) three.js 的陰影特性做進(jìn)一步研究：
3.1 three.js 的陰影
在 three.js 中，陰影的類型主要有兩種，分別是硬陰影（hard shadows）和軟陰影（soft shadows）。硬陰影的邊緣清晰，常用于模擬光源較小或光源位置靠近物體的場(chǎng)景；軟陰影的邊緣較模糊，更加接近現(xiàn)實(shí)中的陰影效果。這兩種陰影效果是通過(guò)不同的陰影貼圖（shadow map）類型實(shí)現(xiàn)的。以下是常見(jiàn)的陰影類型：
3.1.1 BasicShadowMap（硬陰影）
特性: 這是最基本的陰影類型，計(jì)算速度快，性能開(kāi)銷小，但效果相對(duì)簡(jiǎn)單。生成的陰影沒(méi)有柔和的邊緣，呈現(xiàn)出硬邊界。
用途: 用于性能要求較高但不太關(guān)注陰影效果的場(chǎng)景。
圖3（BasicShadowMap）
3.1.2 PCFShadowMap (Percentage-Closer Filtering)（軟陰影）
特性: 默認(rèn)的陰影類型，邊緣相對(duì)柔和。使用了一種簡(jiǎn)單的濾波技術(shù)來(lái)使陰影邊緣變得平滑。
用途: 大多數(shù)情況下推薦使用，效果較好，性能開(kāi)銷也可以接受。
圖4（PCFShadowMap）
3.1.3 PCFSoftShadowMap（軟陰影）
特性: 在 PCFShadowMap 的基礎(chǔ)上，進(jìn)一步對(duì)陰影的柔和度進(jìn)行了優(yōu)化，提供更柔和的陰影邊緣效果，但性能開(kāi)銷會(huì)更大。
用途: 用于需要較高質(zhì)量陰影效果的場(chǎng)景。
圖5（PCFSoftShadowMap）
3.1.4 VSMShadowMap (Variance Shadow Map)（軟陰影）
特性: 使用了方差陰影貼圖算法，能夠生成高質(zhì)量且無(wú)鋸齒的柔和陰影。相比 PCF 技術(shù)，它可以產(chǎn)生更加平滑的效果，并且可以避免常見(jiàn)的陰影采樣問(wèn)題。但該技術(shù)可能會(huì)產(chǎn)生“光暈”現(xiàn)象。
用途: 適用于高質(zhì)量陰影場(chǎng)景，特別是需要柔和漸變的陰影效果。
圖6（VSMShadowMap）
從上面的預(yù)覽圖可以看出，對(duì)于 BasicShadowMap 和 PCFShadowMap，陰影的邊緣有比較多的鋸齒，而對(duì)于 PCFSoftShadowMap，除了有更多的性能開(kāi)銷之外，人物在動(dòng)的時(shí)候邊緣也會(huì)有明顯的閃爍的情況出現(xiàn)，而且邊緣模糊半徑過(guò)大導(dǎo)致陰影的效果并不明顯。使用 VSMShadowMap 雖然可以得到相對(duì)好的效果，但是會(huì)出現(xiàn)嚴(yán)重的偽影問(wèn)題，雖然可以通過(guò)調(diào)整 shadow 的偏置值（bias）來(lái)解決，但是過(guò)大的 bias 值會(huì)使得陰影的深度測(cè)試結(jié)果偏移過(guò)多，導(dǎo)致陰影被錯(cuò)誤地渲染得過(guò)遠(yuǎn)，從而產(chǎn)生不自然的視覺(jué)效果。
作為一個(gè)手機(jī)上的H5頁(yè)面，除了要保障基礎(chǔ)的視覺(jué)效果，還需要優(yōu)化性能以使其運(yùn)行在更多的設(shè)備上，為了實(shí)現(xiàn)一開(kāi)始向大家展示的效果同時(shí)不增加性能的開(kāi)銷，我們有了下面的優(yōu)化思路。
3.2 優(yōu)化思路
要想有一個(gè)比較好的陰影效果，首先不能是硬陰影，所以排除了 BasicShadowMap；
由于 PCFSoftShadowMap 對(duì)于性能的開(kāi)銷較大的同時(shí)效果提升的也不是很明顯，所以也排除掉；最后由于偽影難以控制，所以我們選擇了基于 PCFShadowMap進(jìn)行優(yōu)化。
為了得到更好的陰影邊緣，可以通過(guò)提升 shadowMap 的分辨率來(lái)優(yōu)化，但是分辨率的提升勢(shì)必會(huì)導(dǎo)致性能開(kāi)銷變大，如何在不提升貼圖分辨率的情況下提升陰影邊緣的質(zhì)量呢？
我們都知道在不同尺寸的屏幕相同分辨率的情況下，越小的屏幕顯示效果越細(xì)膩，DirectionalLight 在生成陰影時(shí)，會(huì)使用一個(gè)正交相機(jī)（OrthographicCamera）來(lái)確定渲染陰影的區(qū)域。這個(gè)相機(jī)的四個(gè)邊界（left、right、top、bottom）定義了陰影貼圖的范圍。通過(guò)縮小這些邊界，可以將陰影貼圖的像素更集中于需要渲染陰影的區(qū)域，從而提升陰影的清晰度。實(shí)際上在虛擬人的場(chǎng)景中，用戶的主要注意力都集中在頭部區(qū)域，所以只要將陰影相機(jī)聚焦在頭部的區(qū)域即可，而不需要獲取全局的陰影。
const bias = 1.6 // 設(shè)置一個(gè)y軸的偏置值，使得陰影相機(jī)可以正對(duì)人臉
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) // 設(shè)置燈光的照射目標(biāo)
group.add(target)
mainLight.target = target
mainLight.castShadow = true
mainLight.shadow.radius = 2 // 設(shè)置陰影邊緣的模糊半徑，這個(gè)值并不是越大越好，需要根據(jù)實(shí)際場(chǎng)景進(jìn)行微調(diào)
const { camera } = mainLight.shadow
camera.far = 5
// 陰影相機(jī)的默認(rèn)邊界為上下左右分別為5，將其縮小至各0.5
camera.top = -0.5
camera.bottom = 0.5
camera.left = -0.5
camera.right = 0.5左右滑動(dòng)查看完整代碼
四、地面陰影的實(shí)現(xiàn)
在最開(kāi)始的動(dòng)圖(圖2)中，除了臉部的陰影，還有一個(gè)地面的陰影，很顯然地面陰影不可能專門打一束光照在腳上獲得，這樣會(huì)使得整體的光影顯得很奇怪，那么地面陰影是怎么實(shí)現(xiàn)的呢。
實(shí)際上這里參考了
model-viewer (https://github.com/google/model-viewer)
的實(shí)現(xiàn)，地面上的陰影實(shí)際上是一個(gè)方形加上陰影貼圖：
- 創(chuàng)建一個(gè)正交相機(jī)，將相機(jī)的位置設(shè)置在腳下，朝向上方并有一點(diǎn)點(diǎn)傾角，獲取到從地面向上看的圖像；
- 創(chuàng)建一個(gè)材質(zhì)，并且自定義著色器渲染物體的深度信息，渲染第一步創(chuàng)建的相機(jī)的場(chǎng)景的時(shí)候?qū)⒉馁|(zhì)賦值給scene.overrideMaterial屬性，這樣場(chǎng)景中所有的物體都會(huì)使用這個(gè)材質(zhì)進(jìn)行渲染；
- 再創(chuàng)建一個(gè)正交相機(jī)，用于模糊第一個(gè)相機(jī)獲取到的圖像；
- 將模糊后的圖像作為貼圖，應(yīng)用到地板平面上；
- 此方案在每幀畫面渲染之前都要再額外先把地面陰影的場(chǎng)景渲染出來(lái)，所以會(huì)增加額外的性能開(kāi)銷，由于地面陰影的邊緣經(jīng)過(guò)模糊平滑的處理，所以分辨率并不需要太高，貼圖尺寸設(shè)置為64*64即可，有效的控制地面陰影帶來(lái)的性能損失。
// 設(shè)置陰影渲染目標(biāo)，作為陰影貼圖
const size = 64
const shadowTarget = new THREE.WebGLRenderTarget(size, size)
const shadowTargetBlur = new THREE.WebGLRenderTarget(size, size)
this.shadowTarget = shadowTarget
this.shadowTargetBlur = shadowTargetBlur
// 調(diào)整位置
this.position.set(0, -0.05, 0)
this.rotateX(Math.PI / 2) //旋轉(zhuǎn)地板與地面平行
// 設(shè)置陰影相機(jī)
const camera = new THREE.OrthographicCamera(-0.75, 0.75, 0.75, -0.75, 0, 0.5)
// 設(shè)置地面相機(jī)的一個(gè)傾斜角度
camera.rotateX(Math.PI / 6)
camera.rotateY(Math.PI / 6)
this.add(camera)
this.camera = camera
// 設(shè)置視覺(jué)相機(jī)
const visionCamera = new THREE.OrthographicCamera(-0.75, 0.75, 0.75, -0.75, 0, 2)
this.add(visionCamera)
this.visionCamera = visionCamera
// 設(shè)置深度材質(zhì)的片段著色器
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 );'
)
}
// 創(chuàng)建地板
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左右滑動(dòng)查看完整代碼
五、結(jié)語(yǔ)
針對(duì)全局陰影和地面陰影，我們采取了不同的優(yōu)化方式：
- 通過(guò)合理選擇陰影的渲染方式、優(yōu)化陰影相機(jī)的視野范圍以及優(yōu)化陰影貼圖的分辨率，可以在保證性能沒(méi)有明顯提升的情況下顯著提升陰影的品質(zhì)；
- 通過(guò)獲取底部視角的深度信息結(jié)合自定義shader來(lái)生成地面陰影，對(duì)頁(yè)面的性能沒(méi)有明顯的損耗的同時(shí)達(dá)到一個(gè)比較好的效果。
后續(xù)也可以通過(guò)在 webview 注入機(jī)型信息，通過(guò)機(jī)型對(duì)手機(jī)的性能進(jìn)行分級(jí)，調(diào)用針對(duì)性的渲染方案，可以使頁(yè)面在流暢運(yùn)行的前提下進(jìn)一步提升畫面的表現(xiàn)。為了實(shí)現(xiàn)更好的陰影效果，也可以對(duì) three.js 的陰影相機(jī)進(jìn)行擴(kuò)展，實(shí)現(xiàn)多機(jī)位 shadowMap 等能力，在不增加太多負(fù)載的情況下進(jìn)一步提升陰影的效果。
