使用GPU获取交点位置
实现方法也很简单:
1. 创建深度着色器材质,将场景深度渲染到WebGLRenderTarget上。
2. 计算鼠标所在位置的深度,根据鼠标位置和深度计算交点位置。
具体实现代码:
1. 创建深度着色器材质,将深度信息以一定的方式编码,渲染到WebGLRenderTarget上。
深度材质:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
重要说明:
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上。读取颜色方法
1 2 3 4 5 6 7 |
|
说明:offsetX和offsetY是鼠标位置,height是画布高度。readRenderTargetPixels一行的含义是选取鼠标所在位置(offsetX, height - offsetY),宽度为1,高度为1的像素的颜色。
pixel是Uint8Array(4),分别保存rgba颜色的四个通道,每个通道取值范围是0~255。
b. 将“加密”后的相机空间深度值“解密”,得到正确的相机空间深度值。
1 2 3 4 5 6 |
|
3. 根据鼠标在屏幕上的位置和相机空间深度,插值反算交点世界坐标系中的坐标。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
完整代码: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选取物体并计算交点位置的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
解析js on及addeventlistener原理用法的区别
更多相关阅读请进入《three.js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者