溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
光線投射法
使用three.js自帶的光線投射器(Raycaster)選取物體非常簡單，代碼如下所示：
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseMove(event) {
// 計算鼠標所在位置的設備坐標
// 三個坐標分量都是-1到1
mouse.x = event.clientX / window.innerWidth * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}
function pick() {
// 使用相機和鼠標位置更新選取光線
raycaster.setFromCamera(mouse, camera);
// 計算與選取光線相交的物體
var intersects = raycaster.intersectObjects(scene.children);
}
它是采用包圍盒過濾，計算投射光線與每個三角面元是否相交實現的。
但是，當模型非常大，比如說有40萬個面，通過遍歷的方法選取物體和計算碰撞點位置將非常慢，用戶體驗不好。
但是使用gpu選取物體不存在這個問題。無論場景和模型有多大，都可以在一幀內獲取到鼠標所在點的物體和交點的位置。
使用GPU選取物體
實現方法很簡單：
1. 創建選取材質，將場景中的每個模型的材質替換成不同的顏色。
2. 讀取鼠標位置像素顏色，根據顏色判斷鼠標位置的物體。
具體實現代碼：
1. 創建選取材質，遍歷場景，將場景中每個模型替換為不同的顏色。
let maxHexColor = 1;
// 更換選取材質
scene.traverseVisible(n => {
if (!(n instanceof THREE.Mesh)) {
return;
}
n.oldMaterial = n.material;
if (n.pickMaterial) { // 已經創建過選取材質了
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. 將場景繪制在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); // 讀取鼠標所在位置顏色
// 還原原來材質，并獲取選中物體
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;
}
});
說明：offsetX和offsetY是鼠標位置，height是畫布高度。readRenderTargetPixels一行的含義是選取鼠標所在位置（offsetX, height - offsetY），寬度為1，高度為1的像素的顏色。
pixel是Uint8Array(4)，分別保存rgba顏色的四個通道，每個通道取值范圍是0~255。
完整實現代碼：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js
使用GPU獲取交點位置
實現方法也很簡單：
1. 創建深度著色器材質，將場景深度渲染到WebGLRenderTarget上。
2. 計算鼠標所在位置的深度，根據鼠標位置和深度計算交點位置。
具體實現代碼：
1. 創建深度著色器材質，將深度信息以一定的方式編碼，渲染到WebGLRenderTarget上。
深度材質：
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);
}
重要說明：
a. gl_Position.z是相機空間中的深度，是線性的，范圍從cameraNear到cameraFar。可以直接使用著色器varying變量進行插值。
b. gl_Position.z / far的原因是，將值轉換到0~1范圍內，便于作為顏色輸出。
c. 不能使用屏幕空間中的深度，透視投影后，深度變為-1~1，大部分非常接近1（0.9多），不是線性的，幾乎不變，輸出的顏色幾乎不變，非常不準確。
d. 在片元著色器中獲取深度方法：相機空間深度為gl_FragCoord.z，屏幕空間深度為gl_FragCoord.z / gl_FragCoord.w。
e. 上述描述都是針對透視投影，正投影中gl_Position.w為1，使用相機空間和屏幕空間深度都是一樣的。
f. 為了盡可能準確輸出深度，采用rgb三個分量輸出深度。gl_Position.z/far范圍在0~1，乘以0xffffff，轉換為一個rgb顏色值，r分量1表示65535，g分量1表示255，b分量1表示1。
完整實現代碼：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);
說明：offsetX和offsetY是鼠標位置，height是畫布高度。readRenderTargetPixels一行的含義是選取鼠標所在位置（offsetX, height - offsetY），寬度為1，高度為1的像素的顏色。
pixel是Uint8Array(4)，分別保存rgba顏色的四個通道，每個通道取值范圍是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; // 相機坐標系中鼠標所在點的深度（注意：相機坐標系中的深度值為負值）
}
3. 根據鼠標在屏幕上的位置和相機空間深度，插值反算交點世界坐標系中的坐標。
let nearPosition = new THREE.Vector3(); // 鼠標屏幕位置在near處的相機坐標系中的坐標 let farPosition = new THREE.Vector3(); // 鼠標屏幕位置在far處的相機坐標系中的坐標 let world = new THREE.Vector3(); // 通過插值計算世界坐標 // 設備坐標 const deviceX = this.offsetX / width * 2 - 1; const deviceY = - this.offsetY / height * 2 + 1; // 近點 nearPosition.set(deviceX, deviceY, 1); // 屏幕坐標系：(0, 0, 1) nearPosition.applyMatrix4(camera.projectionMatrixInverse); // 相機坐標系：(0, 0, -far) // 遠點 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); // 將交點從相機空間中的坐標，轉換到世界坐標系坐標。 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
相關應用
使用gpu選取物體并計算交點位置，多用于需要性能非常高的情況。例如：
1. 鼠標移動到三維模型上的hover效果。
2. 添加模型時，模型隨著鼠標移動，實時預覽模型放到場景中的效果。
3. 距離測量、面積測量等工具，線條和多邊形隨著鼠標在平面上移動，實時預覽效果，并計算長度和面積。
4. 場景和模型非常大，光線投射法選取速度很慢，用戶體驗非常不好。
這里給一個使用gpu選取物體和實現鼠標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
參考資料：
1. 完整實現代碼：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中，獲取真實的片元著色器深度值：https://gamedev.stackexchange.com/questions/93055/getting-the-real-fragment-depth-in-glsl
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
