WebGL 选中一个表面

目录

选中一个表面 

示例程序（PickFace.js）

代码详解

gl.readPixels()见126行效果

gl.UNSIGNED_BYTE注意点

示例效果

选中一个表面 

​​​​​​​WebGL 选中物体_山楂树の的博客-CSDN博客可以使用同样的方法来选中物体的某一个表面。这一节在PickObject程序的基础上编写了PickFace程序，后者同样包含一个立方体，但用户可以选中立方体的某一个表面，被选中的表面会变成白色。下图显示了PickFace的运行效果。

如果你理解了PickObject的程序原理，那么PickFace就很简单了。PickObject用户在点击鼠标时，将立方体重绘为红色，然后读取鼠标点击位置的像素颜色，根据其是红色或是黑色来判断点击时鼠标是否在立方体上，即是否选中了立方体。而PickFace则更进一步，在用户点击鼠标时重绘立方体，并将“每个像素属于哪个面”的信息写入到颜色缓冲区的α分量中。下面来看一下示例程序。 

示例程序（PickFace.js）

PickFace.js的代码如下所示。为了简洁，略去了与前例相同的部分，如顶点着色器等。 

var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'attribute vec4 a_Color;\n' +'attribute float a_Face;\n' +   // 曲面编号（不能将int用于属性变量）'uniform mat4 u_MvpMatrix;\n' +'uniform int u_PickedFace;\n' + // 选定面的曲面编号'varying vec4 v_Color;\n' +'void main() {\n' +'  gl_Position = u_MvpMatrix * a_Position;\n' +'  int face = int(a_Face);\n' + // 转换为int   1.0 -> 1'  vec3 color = (face == u_PickedFace) ? vec3(1.0) : a_Color.rgb;\n' +'  if(u_PickedFace == 0) {\n' + // 如果为0，则将面编号插入alpha'    v_Color = vec4(color, a_Face/255.0);\n' + // 6.0/255.0 = 6'  } else {\n' +'    v_Color = vec4(color, a_Color.a);\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_PickedFace = gl.getUniformLocation(gl.program, 'u_PickedFace');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_PickedFace, -1); // 默认不匹配面var 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 face = checkFace(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_PickedFace, viewProjMatrix, u_MvpMatrix);gl.uniform1i(u_PickedFace, face); // 将曲面编号传递给uPickedFacedraw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);}}var tick = function() {   // Start drawingcurrentAngle = 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.32, 0.18, 0.56,  0.32, 0.18, 0.56,  0.32, 0.18, 0.56,  0.32, 0.18, 0.56, // 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.78, 0.69, 0.84,  0.78, 0.69, 0.84,  0.78, 0.69, 0.84,  0.78, 0.69, 0.84, // v0-v5-v6-v1 up0.0, 0.32, 0.61,   0.0, 0.32, 0.61,   0.0, 0.32, 0.61,   0.0, 0.32, 0.61,  // v1-v6-v7-v2 left0.27, 0.58, 0.82,  0.27, 0.58, 0.82,  0.27, 0.58, 0.82,  0.27, 0.58, 0.82, // 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 faces = new Uint8Array([   // Faces1, 1, 1, 1,     // v0-v1-v2-v3 front2, 2, 2, 2,     // v0-v3-v4-v5 right3, 3, 3, 3,     // v0-v5-v6-v1 up4, 4, 4, 4,     // v1-v6-v7-v2 left5, 5, 5, 5,     // v7-v4-v3-v2 down6, 6, 6, 6,     // v4-v7-v6-v5 back]);var indices = new Uint8Array([   // Indices of the vertices0, 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]);var indexBuffer = gl.createBuffer();if (!initArrayBuffer(gl, vertices, gl.FLOAT, 3, 'a_Position')) return -1; // Coordinates Informationif (!initArrayBuffer(gl, colors, gl.FLOAT, 3, 'a_Color')) return -1;      // Color Informationif (!initArrayBuffer(gl, faces, gl.UNSIGNED_BYTE, 1, 'a_Face')) return -1;// Surface Informationgl.bindBuffer(gl.ARRAY_BUFFER, null);gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);return indices.length;
}function checkFace(gl, n, x, y, currentAngle, u_PickedFace, viewProjMatrix, u_MvpMatrix) {var pixels = new Uint8Array(4); // 存储像素值的数组gl.uniform1i(u_PickedFace, 0);  // 将表面编号写入a分量draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);/* 在WebGL中，gl.readPixels()函数用于从帧缓冲区中读取像素数据（而非颜色缓冲区中）。该函数的第六个参数用于指定返回的像素数据的数据类型。当将第六个参数设置为gl.UNSIGNED_BYTE时，表示希望返回的像素数据以无符号字节的形式表示。每个像素将用一个8位无符号整数（即一个字节）来表示。使用gl.UNSIGNED_BYTE可以获得每个像素的红、绿、蓝和透明度通道的值（RGB或RGBA）的整数表示，取值范围在0到255之间。当将gl.readPixels()函数的第六个参数设置为gl.UNSIGNED_BYTE时，返回的每个像素的RGBA值都会以0到255的范围内的整数表示。每个颜色通道（红、绿、蓝和透明度）都用一个8位无符号整数（即一个字节）来表示这样的设置通常用于读取像素数据后进行图像处理、纹理操作或其他需要使用整数表示的场景。*/gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels); // 读取单击位置的像素值。pixels[3]是曲面数console.log(pixels); // [128, 105, 176, 2]return pixels[3];
}var g_MvpMatrix = new Matrix4(); // 模型视图投影矩阵
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;
}

代码详解

首先，顶点着色器中添加了attribute变量a_Face，它表示立方体各表面的编号，即当前顶点属于哪个表面（第4行）。鼠标被点击时，这个值就会被“编码”成颜色值的α分量。initVertexBuffers（）函数（第63行）建立了表面编号数组faces，数组中的每个元素对应一个顶点（第87行）。比如，顶点v0-v1-v2-v3定义了1号表面，而顶点v0-v3-v4-v5定义了2号表面，等等。数组faces前4个元素都是1，表示前4个顶点都属于1号表面，以此类推（第88行）。

当某个表面被选中时，就通过u_PickedFace变量来通知顶点着色器这个表面被选中了（第6行）。这样顶点着色器就可以将这个表面绘制成白色，用户就获得了反馈，知道这个表面确实被选中了。

在正常情况下（即不在鼠标被点击的那一刻），顶点着色器会比较当前被选中的表面编号u_PickedFace和当前顶点的表面编号a_Face，如果它们相等，即当前顶点属于被选中的表面，就将color赋为白色，如果不相等，就将其赋为顶点原来的颜色a_Color。此处必须将float类型的a_Face转化为int类型，再与u_PickedFace进行比较，因为attribute变量只能是float类型的。在鼠标点击的那一刻，u_PickedFace被设为0，我们将a_Face的值写入到颜色的α分量中。

main（）函数为u_PickedFace指定初始值-1（第40行）。按照faces变量的定义（第87行），立方体各表面中没有哪一个编号是-1，所以一开始没有任何表面被选中，每一个面的颜色都是初始颜色。

gl.readPixels()见126行效果

鼠标被点击时，u_PickedFace变量变为了0，顶点着色器就在颜色缓冲区中将每个面绘制成非1的α值，并且α的值取决于表面编号。最关键的逻辑发生在鼠标点击事件的响应函数中：在获取了鼠标点击位置后，调用checkFace（）函数并传入u_PickedFace变量，也就是着色器中同名变量的存储地址（第49行）。

checkFace（）函数的任务是，根据点击位置返回选中表面的编号（第113行）。该函数首先将u_PickedFace变量设为0（第115行），然后立刻调用draw（）函数（在颜色缓冲区中，最终没有显示在屏幕上）进行绘制，此时每个表面的α值就取决于表面的编号。然后，从颜色缓冲区获取鼠标点击处的像素值（第125行），通过pixels［3］获取表面编号（即α分量，索引为3）。checkFace（）函数返回选中的表面编号，执行流程回到鼠标点击事件响应函数中，用选中的表面编号重新绘制立方体（第50～51行），并在屏幕上显示出来，如前所述。

gl.UNSIGNED_BYTE注意点

    在WebGL中，gl.readPixels()函数用于从帧缓冲区中读取像素数据（而非颜色缓冲区中）。该函数的第六个参数用于指定返回的像素数据的数据类型。

    当将第六个参数设置为gl.UNSIGNED_BYTE时，表示希望返回的像素数据以无符号字节的形式表示。每个像素将用一个8位无符号整数（即一个字节）来表示。

    使用gl.UNSIGNED_BYTE可以获得每个像素的红、绿、蓝和透明度通道的值（RGB或RGBA）的整数表示，取值范围在0到255之间。（见 gl.readPixels()见126行效果 上图）

    这样的设置通常用于读取像素数据后进行图像处理、纹理操作或其他需要使用整数表示的场景。

示例效果

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

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

相关文章

苹果手表 Series 6 拆解

苹果手表 Series 6 拆解

步骤 1 苹果手表 Series 6 拆解 Series 6&#xff08;右&#xff09;与具有一年历史的姐妹&#xff08;左&#xff09;的外部比较仅显示出细微的差异&#xff0c;但这就是拆卸的目的。我们已经知道这些细节&#xff1a; LTPO OLED Retina 显示屏针对常亮功能进行了优化——这次…
阅读更多...
亚马逊 CodeWhisperer 初体验

亚马逊 CodeWhisperer 初体验

1、CodeWhisperer 介绍 CodeWhisperer 是亚马逊出品的一款基于机器学习的通用代码生成器&#xff0c;可实时提供代码建议。类似 Cursor 和 Github Copilot 编码工具。 官网&#xff1a;AI 代码生成器 - Amazon CodeWhisperer - AWS 在编写代码时&#xff0c;它会自动根据您现…
阅读更多...
【深度学习实验】前馈神经网络（三）：自定义两层前馈神经网络（激活函数logistic、线性层算子Linear）

【深度学习实验】前馈神经网络（三）：自定义两层前馈神经网络（激活函数logistic、线性层算子Linear）

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 构建数据集 2. 激活函数logistic 3. 线性层算子 Linear 4. 两层的前馈神经网络MLP 5. 模型训练 一、实验介绍 本实验实现了一个简单的两层前馈神经网络 激活函数…
阅读更多...
JavaScript(WebAPI)

JavaScript(WebAPI)

目录 一.WebAPI 二.DOM 1.选中页面元素 2.事件 三.操作元素 获取修改元素内容 获取/修改表单元素属性 value type 获取/修改样式属性 1.修改内联样式 2.修改元素应用的CSS类名 四.操作节点 1.新增元素 2.删除元素 五.小结 六.案例 1.网页版本的猜数字 2.表白…
阅读更多...
Python | 为FastAPI后端服务添加API Key认证（分别基于路径传参和header两种方式且swagger文档友好支持）

Python | 为FastAPI后端服务添加API Key认证（分别基于路径传参和header两种方式且swagger文档友好支持）

文章目录 01 前言02 路径传参方式添加API Key2.1 完整代码2.2 请求示例2.3 swagger文档测试 03 请求头Header方式传入API Key&#xff08;推荐&#xff09;3.1 完整代码3.2 请求示例3.3 swagger文档测试 01 前言 FastAPI&#xff0c;如其名所示&#xff0c;是一个极为高效的框…
阅读更多...
CSS3有哪些新特性

CSS3有哪些新特性

CSS3 引入了许多新特性&#xff0c;以增强样式设计和页面布局的能力&#xff0c;提供更多的视觉效果和交互性。以下是一些 CSS3 中的新特性&#xff1a; 圆角边框&#xff08;Border Radius&#xff09;&#xff1a;圆角的边框&#xff0c;而不是传统的方形边框。 <!DOCTY…
阅读更多...
Java面试被问了几个简单的问题，却回答的不是很好

Java面试被问了几个简单的问题，却回答的不是很好

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有需要我的支持&#xff0c;请私信或评论留言&#xff01; 前言 前几天参加了…
阅读更多...
解决0-1背包问题（方案二）：一维dp数组（滚动数组）

解决0-1背包问题（方案二）：一维dp数组（滚动数组）

往期文章&#xff1a;解决0-1背包问题&#xff08;方案一&#xff09;:二维dp数组_呵呵哒(&#xffe3;▽&#xffe3;)"的博客-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/133207350?spm1001.2014.3001.5501 >>探索一维dp数组和二维dp数组的…
阅读更多...
深入学习 Redis Cluster - 基于 Docker、DockerCompose 搭建 Redis 集群，处理故障、扩容方案

深入学习 Redis Cluster - 基于 Docker、DockerCompose 搭建 Redis 集群，处理故障、扩容方案

目录 一、基于 Docker、DockerCompose 搭建 Redis 集群 1.1、前言 1.2、编写 shell 脚本 1.3、执行 shell 脚本&#xff0c;创建集群配置文件 1.4、编写 docker-compose.yml 文件 1.5、启动容器 1.6、构建集群 1.7、使用集群 1.8、如果集群中&#xff0c;有节点挂了&am…
阅读更多...
【沐风老师】3DMAX翻转折叠动画插件FoldFx使用方法详解

【沐风老师】3DMAX翻转折叠动画插件FoldFx使用方法详解

3DMAX翻转折叠动画插件FoldFx使用方法详解 3DMAX翻转折叠动画插件FoldFx&#xff0c;是3dMax运动图形工具&#xff0c;用于创建多边形折叠动画。用户几乎有无限的可能性&#xff0c;因为动画的每个方面都是可控的。 【适用版本】 适用于3dMax版本&#xff1a;2010及更新版本&a…
阅读更多...
让Pegasus天马座开发板实现超声波测距

让Pegasus天马座开发板实现超声波测距

在完成《让Pegasus天马座开发板用上OLED屏》后&#xff0c;我觉得可以把超声波测距功能也在Pegasus天马座开发板上实现。于是在箱子里找到了&#xff0c;Grove - Ultrasonic Ranger 这一超声波测传感器。 官方地址: https://wiki.seeedstudio.com/Grove-Ultrasonic_Ranger 超声…
阅读更多...
OCR -- 文本检测

OCR -- 文本检测

目标检测&#xff1a; 不仅要解决定位问题&#xff0c;还要解决目标分类问题&#xff0c;给定图像或者视频&#xff0c;找出目标的位置&#xff08;box&#xff09;&#xff0c;并给出目标的类别&#xff1b; 文本检测&#xff1a; 给定输入图像或者视频&#xff0c;找出文本的…
阅读更多...
SpringBoot之响应处理

SpringBoot之响应处理

文章目录 前言一、返回值处理器ReturnValueHandler流程关于HttpMessageConverters的初始化ReturnValueHandler与MappingJackson2HttpMessageConverter关联 二、内容协商内容协商原理底层源码 三、自定义MessageConverter总结 前言 包括返回值处理器ReturnValueHandler、内容协…
阅读更多...
【Vue.js】使用Element搭建登入注册界面axios中GET请求与POST请求跨域问题

【Vue.js】使用Element搭建登入注册界面axios中GET请求与POST请求跨域问题

一&#xff0c;ElementUI是什么&#xff1f; Element UI 是一个基于 Vue.js 的桌面端组件库&#xff0c;它提供了一套丰富的 UI 组件&#xff0c;用于构建用户界面。Element UI 的目标是提供简洁、易用、美观的组件&#xff0c;同时保持灵活性和可定制性 二&#xff0c;Element…
阅读更多...
套接字socket编程的基础知识点

套接字socket编程的基础知识点

目录 前言&#xff08;必读&#xff09; 网络字节序 网络中的大小端问题 为什么网络字节序采用的是大端而不是小端&#xff1f; 网络字节序与主机字节序之间的转换 字符串IP和整数IP 整数IP存在的意义 字符串IP和整数IP相互转换的方式 inet_addr函数&#xff08;会自…
阅读更多...
相机One Shot标定

相机One Shot标定

1 原理说明 原理部分网上其他文章[1][2]也已经说的比较明白了&#xff0c;这里不再赘述。 2 总体流程 参考论文作者开源的Matlab代码[3]和github上的C代码[4]进行说明&#xff08;不得不说还是Matlab代码更优雅&#xff09; 论文方法总体分两部&#xff0c;第一部是在画面中找…
阅读更多...
封装一个高级查询组件

封装一个高级查询组件

封装一个高级查询组件 背景一&#xff0c;前端相关代码二&#xff0c;后端相关代码三&#xff0c;呈现效果总结 背景 业务有个按照自定义选择组合查询条件&#xff0c;保存下来每次查询的时候使用的需求。查了一下项目里的代码没有现成的组件可以用&#xff0c;于是封装了一个 …
阅读更多...
Python实战实例代码-网络爬虫-数据分析-机器学习-图像处理

Python实战实例代码-网络爬虫-数据分析-机器学习-图像处理

Python实战实例代码-网络爬虫-数据分析-机器学习-图像处理 Python实战实例代码1. 网络爬虫1.1 爬取网页数据1.2 爬取图片1.3 爬取动态数据&#xff08;使用Selenium&#xff09; 2. 数据分析2.1 数据清洗2.2 数据变换2.3 数据聚合 3. 机器学习3.1 线性回归3.2 随机森林3.3 K-Me…
阅读更多...
【数据结构】C++实现哈希表

【数据结构】C++实现哈希表

闭散列哈希表 哈希表的结构 在闭散列的哈希表中&#xff0c;哈希表每个位置除了存储所给数据之外&#xff0c;还应该存储该位置当前的状态&#xff0c;哈希表中每个位置的可能状态如下&#xff1a; EMPTY&#xff08;无数据的空位置&#xff09;。EXIST&#xff08;已存储数…
阅读更多...
Linux Day18 TCP_UDP协议及相关知识

Linux Day18 TCP_UDP协议及相关知识

一、网络基础概念 1.1 网络 网络是由若干结点和连接这些结点的链路组成&#xff0c;网络中的结点可以是计算机&#xff0c;交换机、 路由器等设备。 1.2 互联网 把多个网络连接起来就构成了互联网。目前最大的互联网就是因特网。 网络设备有&#xff1a;交换机、路由器、…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023