three.js利用gpu選取物體并計(jì)算交點(diǎn)位置的方法示例

光線投射法

創(chuàng)新互聯(lián)堅(jiān)信：善待客戶，將會(huì)成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨嚒Ｎ覀儚牟缓鲇瞥踉L客戶，我們用心做好本職工作，不忘初心，方得始終。10余年網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)是成都老牌網(wǎng)站營(yíng)銷(xiāo)服務(wù)商,為您提供成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、H5技術(shù)、網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、小程序開(kāi)發(fā)服務(wù),給眾多知名企業(yè)提供過(guò)好品質(zhì)的建站服務(wù)。

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

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove(event) {
 // 計(jì)算鼠標(biāo)所在位置的設(shè)備坐標(biāo)
 // 三個(gè)坐標(biāo)分量都是-1到1
 mouse.x = event.clientX / window.innerWidth * 2 - 1;
 mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}

function pick() {
 // 使用相機(jī)和鼠標(biāo)位置更新選取光線
 raycaster.setFromCamera(mouse, camera);

 // 計(jì)算與選取光線相交的物體
 var intersects = raycaster.intersectObjects(scene.children);
}

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

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

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

使用GPU選取物體

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

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

2. 讀取鼠標(biāo)位置像素顏色，根據(jù)顏色判斷鼠標(biāo)位置的物體。

具體實(shí)現(xiàn)代碼：

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;
});

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

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); // 讀取鼠標(biāo)所在位置顏色

// 還原原來(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; // 鼠標(biāo)所在位置的物體
 }
 if (n.oldMaterial) {
 n.material = n.oldMaterial;
 delete n.oldMaterial;
 }
});

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

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

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

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

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

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

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

具體實(shí)現(xiàn)代碼：

1. 創(chuàng)建深度著色器材質(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是相機(jī)空間中的深度，是線性的，范圍從cameraNear到cameraFar?？梢灾苯邮褂弥鱲arying變量進(jìn)行插值。

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

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

d. 在片元著色器中獲取深度方法：相機(jī)空間深度為gl_FragCoord.z，屏幕空間深度為gl_FragCoord.z / gl_FragCoord.w。
e. 上述描述都是針對(duì)透視投影，正投影中g(shù)l_Position.w為1，使用相機(jī)空間和屏幕空間深度都是一樣的。

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

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

2. 讀取鼠標(biāo)所在位置的顏色，將讀取到的顏色值還原為相機(jī)空間深度值。

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

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

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

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; // 相機(jī)坐標(biāo)系中鼠標(biāo)所在點(diǎn)的深度（注意：相機(jī)坐標(biāo)系中的深度值為負(fù)值）
}

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

let nearPosition = new THREE.Vector3(); // 鼠標(biāo)屏幕位置在near處的相機(jī)坐標(biāo)系中的坐標(biāo)
let farPosition = new THREE.Vector3(); // 鼠標(biāo)屏幕位置在far處的相機(jī)坐標(biāo)系中的坐標(biāo)
let world = new THREE.Vector3(); // 通過(guò)插值計(jì)算世界坐標(biāo)

// 設(shè)備坐標(biāo)
const deviceX = this.offsetX / width * 2 - 1;
const deviceY = - this.offsetY / height * 2 + 1;

// 近點(diǎn)
nearPosition.set(deviceX, deviceY, 1); // 屏幕坐標(biāo)系：(0, 0, 1)
nearPosition.applyMatrix4(camera.projectionMatrixInverse); // 相機(jī)坐標(biāo)系：(0, 0, -far)

// 遠(yuǎn)點(diǎn)
farPosition.set(deviceX, deviceY, -1); // 屏幕坐標(biāo)系：(0, 0, -1)
farPosition.applyMatrix4(camera.projectionMatrixInverse); // 相機(jī)坐標(biāo)系：(0, 0, -near)

// 在相機(jī)空間，根據(jù)深度，按比例計(jì)算出相機(jī)空間x和y值。
const t = (cameraDepth - nearPosition.z) / (farPosition.z - nearPosition.z);

// 將交點(diǎn)從相機(jī)空間中的坐標(biāo)，轉(zhuǎn)換到世界坐標(biāo)系坐標(biāo)。
world.set(
 nearPosition.x + (farPosition.x - nearPosition.x) * t,
 nearPosition.y + (farPosition.y - nearPosition.y) * t,
 cameraDepth
);
world.applyMatrix4(camera.matrixWorld);

完整代碼：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js

相關(guān)應(yīng)用

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

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

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

3. 距離測(cè)量、面積測(cè)量等工具，線條和多邊形隨著鼠標(biāo)在平面上移動(dòng)，實(shí)時(shí)預(yù)覽效果，并計(jì)算長(zhǎng)度和面積。

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

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

three.js利用gpu選取物體并計(jì)算交點(diǎn)位置的方法示例

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

three.js中的投影運(yùn)算

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

參考資料：

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

2. OpenGL中使用著色器繪制深度值：https://stackoverflow.com/questions/6408851/draw-the-depth-value-in-opengl-using-shaders

3. 在glsl中，獲取真實(shí)的片元著色器深度值：https://gamedev.stackexchange.com/questions/93055/getting-the-real-fragment-depth-in-glsl

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

本文標(biāo)題：three.js利用gpu選取物體并計(jì)算交點(diǎn)位置的方法示例
鏈接URL：http://muchs.cn/article8/isghop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、域名注冊(cè)、網(wǎng)站導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容