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 相关文章推荐
扒一扒JavaScript 预解释
Jan 28 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
微信小程序时间轴实现方法示例
Jan 14 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
vue.js 实现a标签href里添加参数
Nov 12 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
15种PHP Encoder的比较
2007/04/17 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
phpwind放自动注册方法
2006/12/02 Javascript
类之Prototype.js学习
2007/06/13 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
Swiper自定义分页器使用详解
2017/12/28 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
违反课堂纪律检讨书
2014/01/19 职场文书
小加工厂管理制度
2014/01/21 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python