three.js使用gpu選取物體並計算交點位置

光線投射法

#使用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);
}

【相關課程推薦：JavaScript影片教學】  

它是採用包圍盒過濾，計算投射光線與每個三角面元是否相交實現的。

但是，當模型非常大，比如說有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;
});
 
PickVertexShader：
void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
 
PickFragmentShader：
uniform vec3 pickColor;void main() {
    gl_FragColor = vec4(pickColor, 1.0);
}

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. camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld )

6. gl_Position = projectionMatrix * modelViewMatrix * position

       positera.

##                      = projectionMatrix * viewMatrix * modelMatrix * position

參考資料：

1. 完整實作程式碼：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event /GPUPickEvent.js

2. 基於three.js的開源三維場景編輯器：https://github.com/tengge1/ShadowEditor

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

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

本文來自

js教程

專欄，歡迎學習！  

以上是three.js使用gpu選取物體並計算交點位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！