光线投射法
使用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. 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. 基于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中文网其它相关文章!
已抢16027个
抢已抢49013个
抢已抢4162个
抢已抢1784个
抢已抢2174个
抢已抢3572个
抢