three.js利用gpu选取物体并计算交点位置的方法示例


Posted in Javascript onNovember 25, 2019

光线投射法

使用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利用gpu选取物体并计算交点位置的方法示例

看不明白?可能你不太熟悉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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 #Javascript
JavaScript This指向问题详解
Nov 25 #Javascript
简单了解JavaScript sort方法
Nov 25 #Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 #Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 #Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 #Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 #Javascript
You might like
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python 安装impala包步骤
2020/03/28 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
毕业生实习期转正自我鉴定
2014/09/26 职场文书
工程部文员岗位职责
2015/02/04 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
OpenCV-Python实现轮廓的特征值
2021/06/09 Python