WebGL 选中物体

目录

前言

如何实现选中物体

示例程序（PickObject.js）

代码详解 

gl.readPixels（）函数规范

示例效果

前言

有些三维应用程序需要允许用户能够交互地操纵三维物体，要这样做首先就得允许用户选中某个物体。对物体进行选中操作的用处很广泛。比如，让用户选中三维用户界面上的一个按钮，或者让用户选中三维场景中的多张照片中的某一张，这些动作都具有实际意义。

选中三维物体比选中二维物体更加复杂，因为我们需要更多的数学过程来计算鼠标是否悬浮在某个图形上。但是，示例程序PickObject使用了一个简单的技巧解决了这一问题。在本例中，用户可以点击正在旋转的立方体，如果用户点击到了立方体，就显示一则消息，如下图所示。现在，请先在浏览器中运行示例程序，点击立方体试图选中它，直观地了解一下该示例程序的作用。

上图显示了用户点击立方体时浏览器弹出的消息。这则消息说，“The cube was selected！”（立方体被选中了！）。同样，你也可以试试在黑色背景上点击会不会弹出这则消息。 

如何实现选中物体

我们遵循以下步骤，检查鼠标点击是否击中了立方体：

1. 当鼠标左键按下时，将整个立方体重绘为单一的红色，如下图（中）所示。

2. 读取鼠标点击处的像素颜色。

3. 使用立方体原来的颜色对其进行重绘。

4. 如果第2步读取到的颜色是红色，就显示消息“The cube was selected！”。

如果不加以处理，那么当立方体被重绘为红色时，就可以看到这个立方体闪烁了一下，而且闪烁的一瞬间是红色的。然后我们读取鼠标点击处的像素在这一瞬间的颜色值，就可以通过判断该颜色是否为红色来确定鼠标是否点击在了立方体上。

鼠标点击立方体的过程

为了使用户看不到立方体的这一闪烁过程，我们还得在取出像素颜色之后立即（而不是等到下一帧）将立方体重绘成原来的样子。下面来看一下示例程序代码。 

示例程序（PickObject.js）

如下显示了示例程序的代码。实现上述第1步将立方体重绘为红色的过程，发生在顶点着色器中，我们向其中添加了一个u_Clicked变量（第7行），这样就可以在恰当的时候通过该变量通知顶点着色器将立方体绘制成红色。鼠标点击时，JavaScript就会向u_Click变量传入true值，然后顶点着色器经过判断（第11行），将一个固定的颜色值（1.0，0.0，0.0，1.0）即红色，赋值给v_Color变量。如果u_Click为false，那么顶点着色器就照常将立方体原来的颜色a_Color赋值给v_Color。这样一来，鼠标点击时，立方体就被绘制成红色。

var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'attribute vec4 a_Color;\n' +'uniform mat4 u_MvpMatrix;\n' +'uniform bool u_Clicked;\n' + // 按下鼠标'varying vec4 v_Color;\n' +'void main() {\n' +'  gl_Position = u_MvpMatrix * a_Position;\n' +'  if (u_Clicked) {\n' + // 如果按下鼠标，则以红色绘制'    v_Color = vec4(1.0, 0.0, 0.0, 1.0);\n' +'  } else {\n' +'    v_Color = a_Color;\n' +'  }\n' +'}\n';
var FSHADER_SOURCE ='#ifdef GL_ES\n' +'precision mediump float;\n' +'#endif\n' +'varying vec4 v_Color;\n' +'void main() {\n' +'  gl_FragColor = v_Color;\n' +'}\n';var ANGLE_STEP = 20.0; // 旋转角度（20度/秒）
function main() {var canvas = document.getElementById('webgl');var gl = getWebGLContext(canvas);if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) returnvar n = initVertexBuffers(gl);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.enable(gl.DEPTH_TEST);var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');var u_Clicked = gl.getUniformLocation(gl.program, 'u_Clicked');var viewProjMatrix = new Matrix4();viewProjMatrix.setPerspective(30.0, canvas.width / canvas.height, 1.0, 100.0);viewProjMatrix.lookAt(0.0, 0.0, 7.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);gl.uniform1i(u_Clicked, 0); // false传递给uClickdvar currentAngle = 0.0; // 当前旋转角度canvas.onmousedown = function(ev) {   // 按下鼠标var x = ev.clientX, y = ev.clientY;var rect = ev.target.getBoundingClientRect();if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {// 如果按下的位置在＜canvas＞内，请检查它是否在对象上方var x_in_canvas = x - rect.left, y_in_canvas = rect.bottom - y;var picked = check(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_Clicked, viewProjMatrix, u_MvpMatrix);if (picked) alert('The cube was selected! ');}}var tick = function() {   // 开始绘图currentAngle = animate(currentAngle);draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);requestAnimationFrame(tick, canvas);};tick();
}function initVertexBuffers(gl) {//    v6----- v5//   /|      /|//  v1------v0|//  | |     | |//  | |v7---|-|v4//  |/      |///  v2------v3var vertices = new Float32Array([   // Vertex coordinates1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,    // v0-v1-v2-v3 front1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,    // v0-v3-v4-v5 right1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,    // v0-v5-v6-v1 up-1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,    // v1-v6-v7-v2 left-1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,    // v7-v4-v3-v2 down1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0     // v4-v7-v6-v5 back]);var colors = new Float32Array([   // Colors0.2, 0.58, 0.82,   0.2, 0.58, 0.82,   0.2,  0.58, 0.82,  0.2,  0.58, 0.82, // v0-v1-v2-v3 front0.5,  0.41, 0.69,  0.5, 0.41, 0.69,   0.5, 0.41, 0.69,   0.5, 0.41, 0.69,  // v0-v3-v4-v5 right0.0,  0.32, 0.61,  0.0, 0.32, 0.61,   0.0, 0.32, 0.61,   0.0, 0.32, 0.61,  // v0-v5-v6-v1 up0.78, 0.69, 0.84,  0.78, 0.69, 0.84,  0.78, 0.69, 0.84,  0.78, 0.69, 0.84, // v1-v6-v7-v2 left0.32, 0.18, 0.56,  0.32, 0.18, 0.56,  0.32, 0.18, 0.56,  0.32, 0.18, 0.56, // v7-v4-v3-v2 down0.73, 0.82, 0.93,  0.73, 0.82, 0.93,  0.73, 0.82, 0.93,  0.73, 0.82, 0.93, // v4-v7-v6-v5 back]);var indices = new Uint8Array([0, 1, 2,   0, 2, 3,    // front4, 5, 6,   4, 6, 7,    // right8, 9,10,   8,10,11,    // up12,13,14,  12,14,15,    // left16,17,18,  16,18,19,    // down20,21,22,  20,22,23     // back]);if (!initArrayBuffer(gl, vertices, gl.FLOAT, 3, 'a_Position')) return -1; // 坐标信息if (!initArrayBuffer(gl, colors, gl.FLOAT, 3, 'a_Color')) return -1;      // 颜色信息var indexBuffer = gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);return indices.length;
}function check(gl, n, x, y, currentAngle, u_Clicked, viewProjMatrix, u_MvpMatrix) {var picked = false;gl.uniform1i(u_Clicked, 1);  // 将true传递给uClickddraw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix); // 用红色绘制立方体// 读取点击位置的像素var pixels = new Uint8Array(4); // 用于存储像素值的数组gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);if (pixels[0] == 255) picked = true;gl.uniform1i(u_Clicked, 0);  // 如果R（像素[0]）为255，则鼠标在立方体上draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix); // 绘制立方体return picked;
}var g_MvpMatrix = new Matrix4(); // Model view projection matrix
function draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix) {// 校准模型视图投影矩阵并将其传递给u_MvpMatrixg_MvpMatrix.set(viewProjMatrix);g_MvpMatrix.rotate(currentAngle, 1.0, 0.0, 0.0); // 适当旋转g_MvpMatrix.rotate(currentAngle, 0.0, 1.0, 0.0);g_MvpMatrix.rotate(currentAngle, 0.0, 0.0, 1.0);gl.uniformMatrix4fv(u_MvpMatrix, false, g_MvpMatrix.elements);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);     // 清除颜色和深度缓冲区gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);   // 最终绘
}var last = Date.now(); // 上次调用此函数的时间
function animate(angle) {var now = Date.now();   // 计算运行时间var elapsed = now - last;last = now;// 更新当前旋转角度（根据经过的时间进行调整）var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;return newAngle % 360;
}function initArrayBuffer (gl, data, type, num, attribute) {var buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);var a_attribute = gl.getAttribLocation(gl.program, attribute);gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);gl.enableVertexAttribArray(a_attribute);return true;
}

代码详解 

在main（）函数中（第25行），我们获取了u_Click变量的存储地址，并将初始值false值传给该变量（第37行）。

然后，注册事件响应函数，用户点击鼠标后立即调用之（第40行）。事件响应函数首先检查鼠标点击位置是否在＜canvas＞内（第43行）。如果是，则调用check（）函数（第46行）。check（）函数的作用是，根据第3个和第4个参数传入的点击位置坐标，判断是否点击在立方体上。如果是，则返回true，并显示消息（第47行）。

check（）函数执行上述的第2步和第3步（第99行）：首先将true传给顶点着色器的u_Click变量，以通知顶点着色器鼠标被点击了（第101行）；然后根据立方体的当前旋转角度重绘立方体，由于此时u_Click为true，所以立方体是红色的；接着调用gl.readPixels（）函数从帧缓冲区中（非颜色缓冲区）读取点击处的像素颜色（第105行）。下面是该函数的规范。

gl.readPixels（）函数规范

如果一个帧缓冲区对象被绑定在gl.FRAMEBUFFER上，那么这个方法就会去读取帧缓冲区而非颜色缓冲区中的内容 

读取到的像素颜色值被保存在pixels数组中，它是一个长度为4的数组（第104行），4个元素pixels［0］、pixels［1］、pixels［2］、pixels［3］分别存储了像素的R、G、B、A的值。本例只需要读取一个像素，所以width和height参数都是1，根据这个像素是红色还是黑色，就可以判断出鼠标点击在了立方体上还是背景上。我们检查红色分量pixels［0］，如果是1.0，就将picked变量赋值为true。

然后，将u_Click变量恢复为false（第107行），重新绘制立方体为原始的颜色（第108行）。最后将picked变量返回，check（）函数就结束了。

注意，如果在重绘正常状态的立方体之前，就进行某个会阻塞代码继续运行的操作，如调用alert（）函数，那么这时，已经写入颜色缓冲区中的内容就会显示在＜canvas＞上。比如，如果我们在第106行执行（实际上我们并没有这么做）alert（'The cube was displayed！'），那就真的会看到之前绘制的红色立方体了。

对于具有多个物体的场景，这个简单的方法也能适用，只需要为场景中的每个物体都指定不同的颜色即可。比如场景中有三个物体，那么就可以使用红色、绿色和蓝色三种颜色。如果场景中有更多的物体，那么你可以为每个物体分配一个唯一的颜色值。通常，颜色缓冲区单个像素R、G、B、A每个分量都是8比特，也就是说，仅使用R分量就可以区分255个物体。

示例效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/141128.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

大模型存在“反转诅咒”现象，无法处理反向问题；Langchain课程资源

大模型存在“反转诅咒”现象，无法处理反向问题；Langchain课程资源

&#x1f989; AI新闻 &#x1f680; 大模型存在“反转诅咒”现象&#xff0c;无法处理反向问题 摘要&#xff1a;最新研究发现&#xff0c;大语言模型存在“反转诅咒”现象&#xff0c;即明知道“A 是 B”&#xff0c;却答不出“B 是 A”。研究人员进行了两项实验&#xff0…
阅读更多...
php万能表单系统源码 支持自定义+收费表单活动报名 适合多行业

php万能表单系统源码 支持自定义+收费表单活动报名 适合多行业

在众多的表单系统中&#xff0c;PHP万能表单系统因其灵活性和可扩展性备受开发者的青睐。PHP万能表单系统是一款基于PHP语言的表单生成器&#xff0c;它可以帮助开发者快速生成各种类型的表单&#xff0c;如注册、登录、留言等。下面给大家分享一款php万能表单系统源码&#xf…
阅读更多...
【详细图文】Windows下安装RustRover和配置Rust环境

【详细图文】Windows下安装RustRover和配置Rust环境

前言 Rust已经火了挺长时间了&#xff0c;连微软的Windows内核都用它来重新改写&#xff0c;可想而知其厉害之处。之前有看过Rust的教程&#xff0c;但一直没有去尝试。今天看到JetBrains出了Rust 专用的IDE&#xff1a;RustRover。作为JetBrains的粉丝&#xff0c;决定进行一…
阅读更多...
Linux环境下使用SVN快速访问资料库？试试使用cpolar端口映射

Linux环境下使用SVN快速访问资料库？试试使用cpolar端口映射

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…
阅读更多...
Kotlin | 在for、forEach循环中正确的使用break、continue

Kotlin | 在for、forEach循环中正确的使用break、continue

文章目录 for循环中使用break、continueLabel标签forEach中模拟break、continue资料 Kotlin 有三种结构化跳转表达式&#xff1a; return&#xff1a;默认从最直接包围它的函数或者匿名函数返回。break&#xff1a;终止最直接包围它的循环。continue&#xff1a;继续下一次最直…
阅读更多...
git 常用命令分享

git 常用命令分享

git官网地址&#xff1a;https://git-scm.com/ 1.设置用户名 邮箱 设置用户名: git config --global user.name “name” 设置邮箱&#xff1a; git config --global user.email "email" 2.查看设置的信息 git config --list 以上设置的信息在用户目录下&#xff1…
阅读更多...
lazada商品详情数据接口，支持多个国家站点

lazada商品详情数据接口，支持多个国家站点

Lazada商品详情数据接口是一个RESTful风格的接口&#xff0c;通过HTTP协议来访问和操作资源。 Lazada商品详情API接口的使用方法如下&#xff1a; 获取Lazada平台上指定商品的详细信息&#xff0c;包括商品名称、价格、库存、分类、描述、图片等。支持通过商品ID、SKU、Selle…
阅读更多...
有效的括号（栈的高频面试题）

有效的括号（栈的高频面试题）

一、题目描述 题目连接&#xff1a;有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺…
阅读更多...
Generative AI 新世界 | 扩散模型原理的代码实践之采样篇

Generative AI 新世界 | 扩散模型原理的代码实践之采样篇

在上一期的文章中&#xff0c;探讨了在 Amazon SageMaker Studio 上使用 QLoRA 等量化技术微调 Falcon 40B 大语言模型。而从本期开始&#xff0c;我们将一起尝试在更深的知识维度&#xff0c;继续探究生成式 AI 这一火热的新知识领域。 亚马逊云科技开发者社区为开发者们提供全…
阅读更多...
工作薄代码之将活动工作表复制到新工作簿等

工作薄代码之将活动工作表复制到新工作簿等

【分享成果&#xff0c;随喜正能量】得失&#xff0c;可以说是人类事业上的考验&#xff0c;不要因一时的得失影响一生的期许。得失是一时的&#xff0c;理想是一生的。。 我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率&#xf…
阅读更多...
定时器之输出捕获

定时器之输出捕获

简介 • IC &#xff08; Input Capture &#xff09;输入捕获 • 输入捕获模式下&#xff0c;当通道输入引脚出现指定电平跳变时&#xff0c;当前 CNT 的值将被锁存到 CCR 中&#xff0c;可用于测量 PWM 波形的频率、占空比、脉冲间隔、电平持续时间等参数 • 每个高级定时器和…
阅读更多...
多线程进阶：Callable和JUC的常见类

多线程进阶：Callable和JUC的常见类

Callable 这是一个接口&#xff0c;类似于Runnable。 Runnable用来描述一个任务&#xff0c;描述的任务没有返回值。 Callable也是用来描述一个任务&#xff0c;描述的任务是有返回值的。 如果需要使用一个线程单独的计算出某个结果来&#xff0c;此时用Callable是比较合适…
阅读更多...
【好玩的开源项目】Windows 12网页版的部署与使用体验

【好玩的开源项目】Windows 12网页版的部署与使用体验

【好玩的开源项目】Windows 12网页版的部署与使用体验 一、Windows 12网页版介绍1.1 Windows 12网页版简介1.2 项目地址 二、本次实践介绍2.1 本地环境规划2.2 本次实践介绍 三、安装httpd软件3.1 检查yum仓库3.2 安装httpd软件3.3 启动httpd服务3.4 查看httpd服务3.5 防火墙和…
阅读更多...
springboot+canal+mysql+redis缓存双写一致性

springboot+canal+mysql+redis缓存双写一致性

canal官网地址&#xff1a;https://github.com/alibaba/canal/wiki/QuickStart 基本上按照官网的步骤来就行 准备 首先服务器上要安装好jdk&#xff0c;因为canal运行需要jdk,同时把canal对应的端口在服务中开放&#xff0c;否则连接不上 对于自建 MySQL , 需要先开启 Binl…
阅读更多...
QT-day5

QT-day5

1、添加注册功能到数据库 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMessageBox> //消息对话框类头文件 #include <QDebug> #include <QPushButton> #include <QSqlDatabase> //数据库管理类 #include…
阅读更多...
ChatGPT详细搭建教程+支持AI绘画

ChatGPT详细搭建教程+支持AI绘画

一、AI创作系统 SparkAi系统是基于很火的GPT提问进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT系统&#xff1f;小编这里写一个详细图文教程吧&#x…
阅读更多...
SpringBoot 之配置加密

SpringBoot 之配置加密

Jasypt库的使用 Jasypt是一个Java简易加密库&#xff0c;用于加密配置文件中的敏感信息&#xff0c;如数据库密码。 Jasypt库与springboot集成&#xff0c;在实际开发中非常方便。 1、引入依赖 <dependency><groupId>com.github.ulisesbocchio</groupId>&…
阅读更多...
构建工具Webpack简介

构建工具Webpack简介

一、构建工具 当我们习惯了Node中使用ES模块化编写代码以后&#xff0c;用原生的HTML、CSS、JS这些东西会感觉到各种不便。比如&#xff1a;不能放心的使用模块化规范&#xff08;浏览器兼容性问题&#xff09;、即使可以使用模块化规范也会面临模块过多时的加载问题。 这时候…
阅读更多...
当当网商品详情数据接口

当当网商品详情数据接口

当当网商品详情数据接口可以通过当当网的开放平台获取相关信息。您可以注册当当开放平台账号&#xff0c;并按照要求提交申请获取API接口的调用凭证。获得授权后&#xff0c;您将会收到一组AccessKey和SecretKey。使用编程语言&#xff08;如Java&#xff09;调用API接口&#…
阅读更多...
《计算机网络》——应用层

《计算机网络》——应用层

2.1 应用层协议原理&#xff08;P54&#xff09; 研发网络应用的核心是写出能够运行在不同端系统和通过网络彼此交流的程序。 2.1.1 网络应用程序体系结构 两种主流的应用体系结构&#xff1a;客户-服务器体系结构、对等体系结构。 客户-服务器体系&#xff1a;服务器是一个…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023