Three.js 拾取之GPU Picking的理解和思考

最新推荐文章于 2025-06-20 00:00:00 发布
原创 最新推荐文章于 2025-06-20 00:00:00 发布 · 4.6k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Three.js #Three.js 拾取 #Instance 拾取 #WebGL 拾取

本文介绍了Three.js中的GPU Picking技术，不同于Raycaster，它利用颜色作为ID进行对象拾取。通过后台渲染纹理和鼠标坐标查询，实现对象选择。以webgl_interactive_cubes_gpu为例，详细解析了实例创建、拾取过程，并提出问题探讨两个示例的异同。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

      今天，分享的是项目中真实会用到的东西，Three.js GPU Picking，这是什么意思呢，不同于Three.js 的Raycaster，它是利用颜色的6位16进制表示，以颜色作为ID，在后台渲染出纹理后，根据鼠标坐标下的纹理颜色，进行ID的查询进行拾取操作，哈哈，如果你不是很了解，应该不明白我在说什么，下面我们一步一步来说明这个所谓的GPU Picking。

      在Three.js r102版本中，这两个案例用到了这种拾取方式，webgl_interactive_instances_gpu和webgl_interactive_cubes_gpu中用到了GPU Picking，我们先来看一下效果：

               webgl_interactive_cubes_gpu                                                                     webgl_interactive_cubes_gpu

&nb

最低0.47元/天 解锁文章

200万优质内容无限畅学
Three 之 three.js （webgl）使用BufferGeometry (CPU) 根据位置和移动向量简单实现持续生成运动的简单粒子particle运动效果
仙魁XAN
09-19 989
本节介绍， three.js （webgl） 中，使用 BufferGeometry ，添加位置和移动方向数据，结合 shader，简单实现类似 particle 的粒子运动效果，这里主要的逻辑在js脚本，而非 shader 中，所以这里算是 cpu 中，使用BufferGeometry 实现简单粒子效果，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。5、构建 位置、移动向量、粒子大小、颜色、旋转等数据，并传入粒子图片，创建 BufferGeometryCpuParticleEffect。
Three.js（0.165.0）入门到实战
郭宝的博客
08-20 3784
WebGL是一个图形库，WelGL给我们提供了很多 Javascript API ，用于在Web浏览器中呈现交互式3D和2D图形，而且无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的API，可以在HTML5 的 元素中使用。WebGL给我们提供了一系列的图形操作接口，能够让我们通过 Javascript 去使用 GPU 来进行浏览器图形渲染。
three_js_gpu_picking:Three.JS的基于GPU的对象选择
04-28
Three.JS的GPU对象选取 概述 该库是Three.JS的可用于生产环境的GPU对象选择的实现。 与其他可用库相比，此库的优点是它不需要单独的拣配场景。 这很重要，因为您不必使第二个场景与正在渲染的场景保持同步。 GPU拾取也可用于蒙皮网格物体，并且对于具有高多边形数的网格物体性能更好。 Three.JS raycaster当前不适用于蒙皮网格物体。 在提供的示例中显示了这些情况。 下面的黄色球体有超过50万个多边形。 如果使用CPU选择，则帧速率将在选择发生时下降，而使用GPU选择，帧速率将保持恒定。 另一种情况是蒙皮网格。 如果使用CPU拾取，则拾取仅对对象的初始姿势起作用，而GPU拾取对当前动画姿势起作用。 注意：该示例加载缓慢，因为球体中包含许多多边形。 安装 两种选择： A）使用npm install three_gpu_picking ， npm install t
threejs加载3dtiles以及gpu picking真实三维坐标点
weixin_44464760的博客
07-31 6404
3dtiles作为由cesium公开的三维瓦片数据协议，其相关文档可以参考如下连接的文档 https://cesium.com/presentations/files/3DTilesInAction.pdf 3dtiles作为一个三维空间瓦片化分，提供了支持大场景加载的基础。tileset.json作为三维空间划分数据的入口，组织了一棵三维空间瓦片树。 关于该三维空间树的数据结构可参考如下文章连接...
Three.js性能优化黑魔法：这10个技巧让渲染速度提升
最新发布
2401_82881178的博客
06-20 909
在Three.js开发过程中，你是否遇到过这样的困扰：精心制作的3D场景在低端设备上运行卡顿，加载时间漫长？尽管Three.js以其易用性和强大功能著称，但随着项目规模的增长和复杂度的增加，性能问题逐渐显现。幸运的是，通过一些巧妙的技术手段，我们可以显著提高Three.js应用的渲染效率，即使是在资源有限的情况下也能流畅运行。本文将揭示十大鲜为人知但极其有效的性能优化技巧，帮助你在不牺牲视觉效果的前提下，大幅提升Three.js项目的性能表现。准备好迎接一场技术革新了吗？
three.js利用gpu选取物体并计算交点位置的方法示例
12-13
光线投射法 使用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 +
three.js使用gpu选取物体并计算交点位置
爱无止
11-25 1115
光线投射法免费小说 m.shupu.org 使用three.js自带的光线投射器(Raycaster)选取物体非常简单，代码如下所示： var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove(event) { // 计算鼠标所在位置的设备坐标 ...
基于three.js开发可视化应用经验总结
lovelygugu的博客
04-26 5063
文章目录背景简介技术方案介绍及对比WebglThree.jsWEBGL和Three.js的关系具体应用过程星空背景流线汇聚效果行政分区环形选择器Three.js 中使用TWEEN插件实现动画使用orbit controls插件（轨道控制）来控制模型交互动作通过THREE.RAYCASTER给模型绑定鼠标事件疑难问题分析及解决方案Canvas纹理贴图模糊场景中渲染顺序错误z-fighting问题透明渲染Three.js性能优化 背景简介 越来越多的应用已经不再满足于二维的数据可视化，追求效果更好的3D数据可视
Three.JS GPU对象选择技术：提升性能与兼容性
1. 使用npm进行安装：通过命令行输入`npm install three_gpu_picking`和`npm install three`即可安装所需的库和Three.js依赖。 2. 其他安装方式：文档中没有提及，但通常社区会提供相关的教程或指南，可以通过网络...
Three.js零基础入门：WebGL可视化3D绘图实战教程
Three.js是一个建立在WebGL之上的高级3D库，它简化了3D图形的开发流程，提供了一套更加易用和直观的API。 Three.js通过封装WebGL复杂的细节，使得开发者可以不需要深入了解底层的WebGL编程，就能进行3D图形的开发...
基于GPU的3D空间精确三角形拾取
12-21
用Directx11的ComputeShader和GeometryShader做的3D空间精确拾取，点击左键，程序判断是否选中了模型某个三角形，如果选中了则显示该三角形，其他以网格方式显示。
THREE.WebGPURenderer：实验Three.js WebGPU渲染器
02-01
然后我可能会停止更新此项目，而改为为Three.js官方做出贡献。 三.WebGPU渲染器 实验Three.js WebGPU渲染器 / 通过Chrome Canary上的chrome：// flags打开＃enable-unsafe-webgpu进行演示。 链接
threejs性能优化与GPU优化.md
10-19
threejs性能优化与GPU优化
GPU三维图元拾取
weixin_30511039的博客
09-08 510
GPU三维图元拾取 张嘉华 梁成 李桂清 (华南理工大学计算机科学与工程学院 广州 510640) (newzjh@126.com) 摘要：本文探讨了两种新颖的在GPU上实现的三维图元拾取方法，第一种方法是场景几何无关的，通过将坐标信息和对象面片指针绘制到一张Render Target型浮点纹理实现三维对象拾取。第二种方法是场景几何依赖的，对逆变换到世界空间的拾取射线与各个几何图元在Geo...
js 判断鼠标指针形状_three.js利用gpu选取物体并计算交点位置的方法示例
weixin_39884074的博客
11-29 317
光线投射法使用three.js自带的光线投射器(Raycaster)选取物体非常简单，代码如下所示：它是采用包围盒过滤，计算投射光线与每个三角面元是否相交实现的。但是，当模型非常大，比如说有40万个面，通过遍历的方法选取物体和计算碰撞点位置将非常慢，用户体验不好。但是使用gpu选取物体不存在这个问题。无论场景和模型有多大，都可以在一帧内获取到鼠标所在点的物体和交点的位置。使用GPU选取物体实现方法...
GPU 拾取的多重奇幻之旅：颜色编码、G-Buffer 与光线追踪的全景探索
xiaohujx的博客
03-06 875
在交互式三维应用中，每当用户在屏幕上点击或触摸时，系统需要判断这点对应的是哪一个对象。这一过程若完全依赖 CPU 进行几何计算，不仅复杂且效率低下。GPU 拾取的思路正是利用 GPU 的高速并行运算，通过离屏渲染生成一张“秘密地图”，并在地图中标记出每个对象的唯一身份标识（Pick ID）。用户点击后，只需从这张地图中读取特定像素的信息，即可还原出被点击对象的身份。
threejs拾取到模型后返回数据
qq_40712151的博客
01-11 397
threejs拾取
DX11_基于GPU_ComputeShader的3D精确拾取
算法，时空数据挖掘
12-21 2816
这里使用ComputeShader做拾取，主要为了熟悉下ComputeShader，为自己后面一个项目做准备。拾取基本原理前面博客也讲了，都差不多，将射线从屏幕坐标系转换到物体局部坐标系，然后再判断三角形是否被射线射中。主要是代码的实施上不一样，这里我尝试并行地通过ComputeShader，由线程i来负责判断三角形i是否被选中。     HLSL的代码： //==============
DX11_基于GPU_GeometryShader的3D精确拾取
算法，时空数据挖掘
11-28 2367
拾取是图形学里一个很常用的应用，在3D世界里选中我们想要的东西，枪战游戏中判断子弹是否射中敌人。     这里我们讲下如何实现一个精确的拾取碰撞，不仅检测是否射中了这个物体，更进一步的返回射中了这个物体的上哪个三角形。在《COD》等比较优秀的枪战游戏中，我们都可以看到子弹是射中敌人身体的不同部位，敌人的身体会做出不同的反应。      然后我们看看如何实现一个基于GPU的拾取，把拾取的所有计算
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值