怎么知道自己电脑是不是支持gpu

光线投射法

使用three.js自带的光线投射器(Raycaster)选取物体非常简单，代码如下所示：

它是采用包围盒过滤，计算投射光线与每个三角面元是否相交实现的。

但是，当模型非常大，比如说有40万个面，通过遍历的方法选取物体和计算碰撞点位置将非常慢，用户体验不好。

但是使用gpu选取物体不存在这个问题。无论场景和模型有多大，都可以在一帧内获取到鼠标所在点的物体和交点的位置。

使用GPU选取物体

实现方法很简单：

1. 读取鼠标位置像素颜色，根据颜色判断鼠标位置的物体。
2. 具体实现代码：

1. 创建选取材质，遍历场景，将场景中每个模型替换为不同的颜色。

1. 将场景绘制在WebGLRenderTarget上，读取鼠标所在位置的颜色，判断选取的物体。
2. 说明：offsetX和offsetY是鼠标位置，height是画布高度。readRenderTargetPixels一行的含义是选取鼠标所在位置(offsetX,height-offsetY)，宽度为1，高度为1的像素的颜色。
3. pixel是Uint8Array(4)，分别保存rgba颜色的四个通道，每个通道取值范围是0~255。
4. 完整实现代码：使用GPU获取交点位置
5. 实现方法也很简单：

1. 创建深度着色器材质，将场景深度渲染到WebGLRenderTarget上。

1. 计算鼠标所在位置的深度，根据鼠标位置和深度计算交点位置。
2. 具体实现代码：

1. 创建深度着色器材质，将深度信息以一定的方式编码，渲染到WebGLRenderTarget上。
2. 深度材质：
3. DepthVertexShader：
4. DepthFragmentShader：
5. 重要说明：
6. a.gl_Position.z是相机空间中的深度，是线性的，范围从cameraNear到cameraFar。可以直接使用着色器varying变量进行插值。
7. b.gl_Position.z/far的原因是，将值转换到0~1范围内，便于作为颜色输出。
8. c.不能使用屏幕空间中的深度，透视投影后，深度变为-1~1，大部分非常接近1(0.9多)，不是线性的，几乎不变，输出的颜色几乎不变，非常不准确。
9. d.在片元着色器中获取深度方法：相机空间深度为gl_FragCoord.z，屏幕空间深度为gl_FragCoord.z/gl_FragCoord.w。e.上述描述都是针对透视投影，正投影中gl_Position.w为1，使用相机空间和屏幕空间深度都是一样的。
10. f.为了尽可能准确输出深度，采用rgb三个分量输出深度。gl_Position.z/far范围在0~1，乘以0xffffff，转换为一个rgb颜色值，r分量1表示65535，g分量1表示255，b分量1表示1。
11. 完整实现代码：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js

1. 读取鼠标所在位置的颜色，将读取到的颜色值还原为相机空间深度值。
2. a.将“加密”处理后的深度绘制在WebGLRenderTarget上。读取颜色方法
3. 说明：offsetX和offsetY是鼠标位置，height是画布高度。readRenderTargetPixels一行的含义是选取鼠标所在位置(offsetX,height-offsetY)，宽度为1，高度为1的像素的颜色。
4. pixel是Uint8Array(4)，分别保存rgba颜色的四个通道，每个通道取值范围是0~255。
5. b.将“加密”后的相机空间深度值“解密”，得到正确的相机空间深度值。

1. 根据鼠标在屏幕上的位置和相机空间深度，插值反算交点世界坐标系中的坐标。
2. 完整代码：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js
3. 相关应用
4. 使用gpu选取物体并计算交点位置，多用于需要性能非常高的情况。例如：

1. 鼠标移动到三维模型上的hover效果。

1. 添加模型时，模型随着鼠标移动，实时预览模型放到场景中的效果。

1. 距离测量、面积测量等工具，线条和多边形随着鼠标在平面上移动，实时预览效果，并计算长度和面积。

1. 场景和模型非常大，光线投射法选取速度很慢，用户体验非常不好。
2. 这里给一个使用gpu选取物体和实现鼠标hover效果的图片。红色边框是选取效果，黄色半透明效果是鼠标hover效果。
3. 看不明白？可能你不太熟悉three.js中的各种投影运算。下面给出three.js中的投影运算公式。
4. three.js中的投影运算

1. modelViewMatrix=camera.matrixWorldInverse*object.matrixWorld

1. viewMatrix=camera.matrixWorldInverse

1. modelMatrix=object.matrixWorld

1. project=applyMatrix4(camera.matrixWorldInverse).applyMatrix4(camera.projectionMatrix)

1. unproject=applyMatrix4(camera.projectionMatrixInverse).applyMatrix4(camera.matrixWorld)

1. gl_Position=projectionMatrix*modelViewMatrix*position=projectionMatrix*camera.matrixWorldInverse*matrixWorld*position=projectionMatrix*viewMatrix*modelMatrix*position
2. 参考资料：

1. 完整实现代码：

1. OpenGL中使用着色器绘制深度值：https://stackoverflow.com/questions/6408851/draw-the-depth-value-in-opengl-using-shaders

1. 在glsl中，获取真实的片元着色器深度值：https://gamedev.stackexchange.com/questions/93055/getting-the-real-fragment-depth-in-glsl
2. 总结
3. 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对小编的支持。