three.js利用gpu選取物體并計(jì)算交點(diǎn)位置的方法示例
光線投射法
使用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)位置將非常慢,用戶(hù)體驗(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);
說(shuō)明:offsetX和offsetY是鼠標(biāo)位置,height是畫(huà)布高度。readRenderTargetPixels一行的含義是選取鼠標(biāo)所在位置(offsetX, height - offsetY),寬度為1,高度為1的像素的顏色。
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)景和模型非常大,光線投射法選取速度很慢,用戶(hù)體驗(yàn)非常不好。
這里給一個(gè)使用gpu選取物體和實(shí)現(xiàn)鼠標(biāo)hover效果的圖片。紅色邊框是選取效果,黃色半透明效果是鼠標(biāo)hover效果。

看不明白?可能你不太熟悉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ì)腳本之家的支持。
相關(guān)文章
微信小程序wxml不能使用Array.includes條件判斷解決方法
這篇文章主要為大家介紹了微信小程序wxml不能使用Array.includes條件判斷解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
使用JS+XML(數(shù)據(jù)島)實(shí)現(xiàn)分頁(yè))
使用JS+XML(數(shù)據(jù)島)實(shí)現(xiàn)分頁(yè))...2007-01-01
JavaScript原型對(duì)象、構(gòu)造函數(shù)和實(shí)例對(duì)象功能與用法詳解
這篇文章主要介紹了JavaScript原型對(duì)象、構(gòu)造函數(shù)和實(shí)例對(duì)象功能與用法,結(jié)合實(shí)例形式分析了javascript面向?qū)ο笙嚓P(guān)原型對(duì)象、構(gòu)造函數(shù)及實(shí)例對(duì)象的概念、功能與相關(guān)使用技巧,需要的朋友可以參考下2018-08-08
javascript獲取元素文本內(nèi)容的通用函數(shù)
獲取元素文本內(nèi)容的通用函數(shù),思路很好值得參考。2009-12-12
如何寫(xiě)出一個(gè)驚艷面試官的JavaScript深拷貝
淺拷貝是面試中經(jīng)常會(huì)被問(wèn)到的問(wèn)題,這篇文章主要給大家介紹了關(guān)于如何寫(xiě)出一個(gè)驚艷面試官的JavaScript深拷貝的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
使用JS和canvas實(shí)現(xiàn)gif動(dòng)圖的停止和播放代碼
這篇文章主要介紹了使用JS和canvas實(shí)現(xiàn)gif動(dòng)圖的停止和播放代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09
JS+DIV+CSS實(shí)現(xiàn)仿表單下拉列表效果
這篇文章主要介紹了JS+DIV+CSS實(shí)現(xiàn)仿表單下拉列表效果,涉及javascript鼠標(biāo)事件及頁(yè)面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08

