three.js如何使用gpu選取物體并計算交點(diǎn)位置

這篇文章給大家分享的是有關(guān)three.js如何使用gpu選取物體并計算交點(diǎn)位置的內容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

光線(xiàn)投射法

使用three.js自帶的光線(xiàn)投射器(Raycaster)選取物體非常簡(jiǎn)單，代碼如下所示：

var raycaster = new THREE.Raycaster();var mouse = new THREE.Vector2();function onMouseMove(event) {    // 計算鼠標所在位置的設備坐標    // 三個(gè)坐標分量都是-1到1    mouse.x = event.clientX / window.innerWidth * 2 - 1;    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;}function pick() {        // 使用相機和鼠標位置更新選取光線(xiàn)        raycaster.setFromCamera(mouse, camera);        // 計算與選取光線(xiàn)相交的物體    var intersects = raycaster.intersectObjects(scene.children);}

它是采用包圍盒過(guò)濾，計算投射光線(xiàn)與每個(gè)三角面元是否相交實(shí)現的。

但是，當模型非常大，比如說(shuō)有40萬(wàn)個(gè)面，通過(guò)遍歷的方法選取物體和計算碰撞點(diǎn)位置將非常慢，用戶(hù)體驗不好。

但是使用gpu選取物體不存在這個(gè)問(wèn)題。無(wú)論場(chǎng)景和模型有多大，都可以在一幀內獲取到鼠標所在點(diǎn)的物體和交點(diǎn)的位置。

使用GPU選取物體

實(shí)現方法很簡(jiǎn)單：

1.  創(chuàng )建選取材質(zhì)，將場(chǎng)景中的每個(gè)模型的材質(zhì)替換成不同的顏色。

2. 讀取鼠標位置像素顏色，根據顏色判斷鼠標位置的物體。

具體實(shí)現代碼：

1. 創(chuàng )建選取材質(zhì)，遍歷場(chǎng)景，將場(chǎng)景中每個(gè)模型替換為不同的顏色。

let maxHexColor = 1;// 更換選取材質(zhì)scene.traverseVisible(n => {    if (!(n instanceof THREE.Mesh)) {        return;    }    n.oldMaterial = n.material;        if (n.pickMaterial) { // 已經(jīng)創(chuàng  )建過(guò)選取材質(zhì)了        n.material = n.pickMaterial;                return;    }    let material = new THREE.ShaderMaterial({        vertexShader: PickVertexShader,        fragmentShader: PickFragmentShader,        uniforms: {            pickColor: {                value: new THREE.Color(maxHexColor)            }        }    });    n.pickColor = maxHexColor;    maxHexColor++;    n.material = n.pickMaterial = material;}); PickVertexShader：void main() {    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);} PickFragmentShader：uniform vec3 pickColor;void main() {    gl_FragColor = vec4(pickColor, 1.0);}

2.  將場(chǎng)景繪制在WebGLRenderTarget上，讀取鼠標所在位置的顏色，判斷選取的物體。

let renderTarget = new THREE.WebGLRenderTarget(width, height);let pixel = new Uint8Array(4);// 繪制并讀取像素renderer.setRenderTarget(renderTarget);renderer.clear();renderer.render(scene, camera);renderer.readRenderTargetPixels(renderTarget, offsetX, height - offsetY, 1, 1, pixel); // 讀取鼠標所在位置顏色// 還原原來(lái)材質(zhì)，并獲取選中物體const currentColor = pixel[0] * 0xffff + pixel[1] * 0xff + pixel[2];let selected = null;scene.traverseVisible(n => {    if (!(n instanceof THREE.Mesh)) {            return;    }        if (n.pickMaterial && n.pickColor === currentColor) {         // 顏色相同        selected = n; // 鼠標所在位置的物體            }        if (n.oldMaterial) {            n.material = n.oldMaterial;        delete n.oldMaterial;        }});

說(shuō)明：offsetX和offsetY是鼠標位置，height是畫(huà)布高度。readRenderTargetPixels一行的含義是選取鼠標所在位置（offsetX, height - offsetY），寬度為1，高度為1的像素的顏色。

pixel是Uint8Array(4)，分別保存rgba顏色的四個(gè)通道，每個(gè)通道取值范圍是0~255。

完整實(shí)現代碼：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js

使用GPU獲取交點(diǎn)位置

實(shí)現方法也很簡(jiǎn)單：

1. 創(chuàng )建深度著(zhù)色器材質(zhì)，將場(chǎng)景深度渲染到WebGLRenderTarget上。

2. 計算鼠標所在位置的深度，根據鼠標位置和深度計算交點(diǎn)位置。

具體實(shí)現代碼：

1. 創(chuàng )建深度著(zhù)色器材質(zhì)，將深度信息以一定的方式編碼，渲染到WebGLRenderTarget上。

深度材質(zhì)：

const depthMaterial = new THREE.ShaderMaterial({    vertexShader: DepthVertexShader,    fragmentShader: DepthFragmentShader,    uniforms: {        far: {            value: camera.far        }    }});DepthVertexShader：precision highp float;uniform float far;varying float depth;void main() {    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);    depth = gl_Position.z / far;}DepthFragmentShader：precision highp float;varying float depth;void main() {    float hex = abs(depth) * 16777215.0; // 0xffffff    float r = floor(hex / 65535.0);    float g = floor((hex - r * 65535.0) / 255.0);        float b = floor(hex - r * 65535.0 - g * 255.0);        float a = sign(depth) >= 0.0 ? 1.0 : 0.0; // depth大于等于0，為1.0；小于0，為0.0。    gl_FragColor = vec4(r / 255.0, g / 255.0, b / 255.0, a);}

重要說(shuō)明：

a. gl_Position.z是相機空間中的深度，是線(xiàn)性的，范圍從cameraNear到cameraFar?？梢灾苯邮褂弥?zhù)色器varying變量進(jìn)行插值。

b. gl_Position.z / far的原因是，將值轉換到0~1范圍內，便于作為顏色輸出。

c. 不能使用屏幕空間中的深度，透視投影后，深度變?yōu)?1~1，大部分非常接近1（0.9多），不是線(xiàn)性的，幾乎不變，輸出的顏色幾乎不變，非常不準確。

d. 在片元著(zhù)色器中獲取深度方法：相機空間深度為gl_FragCoord.z，屏幕空間深度為gl_FragCoord.z /  gl_FragCoord.w。

e. 上述描述都是針對透視投影，正投影中g(shù)l_Position.w為1，使用相機空間和屏幕空間深度都是一樣的。

f. 為了盡可能準確輸出深度，采用rgb三個(gè)分量輸出深度。gl_Position.z/far范圍在0~1，乘以0xffffff，轉換為一個(gè)rgb顏色值，r分量1表示65535，g分量1表示255，b分量1表示1。

完整實(shí)現代碼：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js

2. 讀取鼠標所在位置的顏色，將讀取到的顏色值還原為相機空間深度值。

a. 將“加密”處理后的深度繪制在WebGLRenderTarget上。讀取顏色方法

let renderTarget = new THREE.WebGLRenderTarget(width, height);let pixel = new Uint8Array(4);scene.overrideMaterial = this.depthMaterial;renderer.setRenderTarget(renderTarget);renderer.clear();renderer.render(scene, camera);renderer.readRenderTargetPixels(renderTarget, offsetX, height - offsetY, 1, 1, pixel);

說(shuō)明：offsetX和offsetY是鼠標位置，height是畫(huà)布高度。readRenderTargetPixels一行的含義是選取鼠標所在位置（offsetX, height - offsetY），寬度為1，高度為1的像素的顏色。

pixel是Uint8Array(4)，分別保存rgba顏色的四個(gè)通道，每個(gè)通道取值范圍是0~255。

b. 將“加密”后的相機空間深度值“解密”，得到正確的相機空間深度值。

if (pixel[2] !== 0 || pixel[1] !== 0 || pixel[0] !== 0) {    let hex = (this.pixel[0] * 65535 + this.pixel[1] * 255 + this.pixel[2]) / 0xffffff;        if (this.pixel[3] === 0) {        hex = -hex;    }    cameraDepth = -hex * camera.far; // 相機坐標系中鼠標所在點(diǎn)的深度（注意：相機坐標系中的深度值為負值）}

3. 根據鼠標在屏幕上的位置和相機空間深度，插值反算交點(diǎn)世界坐標系中的坐標。

let nearPosition = new THREE.Vector3(); // 鼠標屏幕位置在near處的相機坐標系中的坐標let farPosition = new THREE.Vector3(); // 鼠標屏幕位置在far處的相機坐標系中的坐標let world = new THREE.Vector3(); // 通過(guò)插值計算世界坐標// 設備坐標const deviceX = this.offsetX / width * 2 - 1;const deviceY = - this.offsetY / height * 2 + 1;// 近點(diǎn)nearPosition.set(deviceX, deviceY, 1); // 屏幕坐標系：(0, 0, 1)nearPosition.applyMatrix4(camera.projectionMatrixInverse); // 相機坐標系：(0, 0, -far)// 遠點(diǎn)farPosition.set(deviceX, deviceY, -1); // 屏幕坐標系：(0, 0, -1)farPosition.applyMatrix4(camera.projectionMatrixInverse); // 相機坐標系：(0, 0, -near)// 在相機空間，根據深度，按比例計算出相機空間x和y值。const t = (cameraDepth - nearPosition.z) / (farPosition.z - nearPosition.z);// 將交點(diǎn)從相機空間中的坐標，轉換到世界坐標系坐標。world.set(    nearPosition.x + (farPosition.x - nearPosition.x) * t,    nearPosition.y + (farPosition.y - nearPosition.y) * t,    cameraDepth);world.applyMatrix4(camera.matrixWorld);

相關(guān)應用

使用gpu選取物體并計算交點(diǎn)位置，多用于需要性能非常高的情況。例如：

1. 鼠標移動(dòng)到三維模型上的hover效果。

2. 添加模型時(shí)，模型隨著(zhù)鼠標移動(dòng)，實(shí)時(shí)預覽模型放到場(chǎng)景中的效果。

3. 距離測量、面積測量等工具，線(xiàn)條和多邊形隨著(zhù)鼠標在平面上移動(dòng)，實(shí)時(shí)預覽效果，并計算長(cháng)度和面積。

4. 場(chǎng)景和模型非常大，光線(xiàn)投射法選取速度很慢，用戶(hù)體驗非常不好。

這里給一個(gè)使用gpu選取物體和實(shí)現鼠標hover效果的圖片。紅色邊框是選取效果，黃色半透明效果是鼠標hover效果。

看不明白？可能你不太熟悉three.js中的各種投影運算。下面給出three.js中的投影運算公式。

three.js中的投影運算

1. modelViewMatrix = camera.matrixWorldInverse * object.matrixWorld

2. viewMatrix = camera.matrixWorldInverse

3. modelMatrix = object.matrixWorld

4. project = applyMatrix4( camera.matrixWorldInverse ).applyMatrix4( camera.projectionMatrix )

5. unproject = applyMatrix4( camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld )

6. gl_Position = projectionMatrix * modelViewMatrix * position

= projectionMatrix * camera.matrixWorldInverse * matrixWorld * position

= projectionMatrix * viewMatrix * modelMatrix * position