WebGL技巧：选中三维物体

最新推荐文章于 2024-01-18 14:38:38 发布
最新推荐文章于 2024-01-18 14:38:38 发布
阅读量506 收藏 1
点赞数
分类专栏： WebGL技巧 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/floating_heart/article/details/125025248
版权

选中三维物体

此处采用了取巧的方法来判断选中的物体：将物体绘制成不同颜色，根据鼠标点击处颜色来判断选中的物体。

示例程序PickObject展示了选中三维物体的一种方式，重要的细节如下：

  • 示例程序在点击的时候重绘立方体，通过向着色器传值并重绘将立方体绘制为红色，再提取点击处的颜色：如果点击处为红色，则代表选中，否则未选中。选中状态判断完毕后，再向向着色器传值、重绘，恢复本来颜色。

在这里插入图片描述

从颜色缓冲区读取点击处颜色的方法为：

gl.readPixels(x, y, width, height, format, type, pixels)
从颜色缓冲区中读取由x、y、width、height参数确定的矩形块中的所有像素值，并保存在pixels指定的数组中。
参数：
x、y: 指定颜色缓冲区中矩形块左上角的坐标，同时也是读取的第一个像素的坐标
width、height: 指定矩形块的宽度和高度，以像素为单位
format: 指定像素值的颜色格式，必须为gl.RGBA
type: 指定像素值的数据格式，必须为gl.UNSIGNED_BYTE
pixels: 指定用来接收像素值数据的Uint8Array类型化数组
返回值: 无
错误：
INVALID_VALUE: pixels为null，或者，width或height是负值
INVALID_OPERATION: pixels的长度不够存储所有像素值数据
INVALID_ENUM: format或type的值无效

相信有了这一方法，程序的思路就呼之欲出了。

实现选中判断的程序设计如下：

  1. 着色器设计：顶点着色器中加入bool变量u_Clicked，采用if结构，对v_Clolor进行区别处理。

  2. 鼠标点击事件：采用document中的方法获取点击处坐标，将坐标转换为WebGL坐标，获取颜色。

    首先判断是否在窗口中，主要使用点击事件中ev对象的ev.target.getBoundingClientRect()方法和clientX、clientY属性.

      canvas.onmousedown = function (ev) {
    let x = ev.clientX, y = ev.clientY
    let rect = ev.target.getBoundingClientRect()
    if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {
      // 检查是否点击在物体上
      let x_in_canvas = x - rect.left, y_in_canvas = rect.bottom - y
      let picked = check(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_Clicked, viewProjMatrix, u_MvpMatrix)
      if (picked) alert('The cube was selected!')
    }
  }

    点击在窗口中时，直接将立方体重绘为红色，查看点击处的颜色判断是否点击到，之后再重绘为正常颜色。

    function check(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_Clicked, viewProjMatrix, u_MvpMatrix) {
  let picked = false
  gl.uniform1i(u_Clicked, 1) // 将立方体绘制为红色
  draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix)
  // 读取点击位置的像素颜色值
  let pixels = new Uint8Array(4) // 储存像素的数组
  gl.readPixels(x_in_canvas, y_in_canvas, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels)
  if (pixels[0] == 255)// 如果pixels[0]是255则说明点击在物体上
    picked = true
  // 重绘正常状态立方体
  gl.uniform1i(u_Clicked, 0)
  draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix)

  return picked
}

全部代码如下所示：

// PickObject.js
// 顶点着色器
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 =
  'precision mediump float;\n' +
  'varying vec4 v_Color;\n' +
  'void main(){\n' +
  ' gl_FragColor = v_Color;\n' +
  '}\n'
// 主函数
function main() {
  // 获取canvas元素
  let canvas = document.getElementById('webgl')
  // 获取webgl上下文
  let gl = getWebGLContext(canvas)
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL')
    return
  }
  // 初始化着色器
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to initialize shaders')
    return
  }
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.enable(gl.DEPTH_TEST)

  // 设置顶点坐标和颜色
  let n = initVertexBuffers(gl)
  if (n < 0) {
    console.log('Failed to set the positions of the vertices')
    return
  }

  // 矩阵准备
  let viewProjMatrix = new Matrix4()
  viewProjMatrix.setPerspective(30.0, canvas.width / canvas.clientHeight, 1.0, 10)
  viewProjMatrix.lookAt(3.0, 3.0, 7.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0)
  // 获取u_MvpMatrix地址
  let u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix')
  if (!u_MvpMatrix) {
    console.log('Failed to get the storage location of u_MvpMatrix')
    return -1
  }
  // 获取u_Clicked地址
  let u_Clicked = gl.getUniformLocation(gl.program, 'u_Clicked')
  if (!u_Clicked) {
    console.log('Failed to get the storage location of u_Clicked')
    return -1
  }
  gl.uniform1i(u_Clicked, 0) // 将false传给u_Clicked变量

  let currentAngle = 0.0 // 当前旋转角度
  // 注册事件响应函数
  canvas.onmousedown = function (ev) {
    let x = ev.clientX, y = ev.clientY
    let rect = ev.target.getBoundingClientRect()
    if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {
      // 检查是否点击在物体上
      let x_in_canvas = x - rect.left, y_in_canvas = rect.bottom - y
      let picked = check(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_Clicked, viewProjMatrix, u_MvpMatrix)
      if (picked) alert('The cube was selected!')
    }
  }
  draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix)
}
// 顶点坐标
function initVertexBuffers(gl) {
  // 数据准备
  // 顶点坐标
  let vertices = new Float32Array([
    1.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 front
    1.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 right
    1.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 down
    1.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
  ])
  // 顶点颜色
  let colors = new Float32Array([
    0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, // v0-v1-v2-v3 front(blue)
    0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, // v0-v3-v4-v5 right(green)
    1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, // v0-v5-v6-v1 up(red)
    1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, // 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 down
    0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, // v4-v7-v6-v5 back
  ])
  // 顶点索引
  let indices = new Uint8Array([
    0, 1, 2, 0, 2, 3, // 前
    4, 5, 6, 4, 6, 7, // 右
    8, 9, 10, 8, 10, 11, // 上
    12, 13, 14, 12, 14, 15, // 左
    16, 17, 18, 16, 18, 19, // 下
    20, 21, 22, 20, 22, 23, // 后
  ])

  // 将顶点坐标和颜色写入缓冲区
  if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) {
    return -1
  }
  if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')) {
    return -1
  }

  // 索引
  let indexBuffer = gl.createBuffer()
  if (!indexBuffer) {
    console.log('Failed to create indexBuffer')
    return -1
  }
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW)

  //返回顶点数量
  return indices.length
}
function initArrayBuffer(gl, data, num, type, attribute) {
  let buffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW)

  let a_attribute = gl.getAttribLocation(gl.program, attribute)
  if (a_attribute < 0) {
    console.log('Failed to get the storage location of ' + attribute)
    return false
  }
  gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0)
  gl.enableVertexAttribArray(a_attribute)

  return true
}

function check(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_Clicked, viewProjMatrix, u_MvpMatrix) {
  let picked = false
  gl.uniform1i(u_Clicked, 1) // 将立方体绘制为红色
  draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix)
  // 读取点击位置的像素颜色值
  let pixels = new Uint8Array(4) // 储存像素的数组
  gl.readPixels(x_in_canvas, y_in_canvas, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels)
  if (pixels[0] == 255)// 如果pixels[0]是255则说明点击在物体上
    picked = true
  // 重绘正常状态立方体
  gl.uniform1i(u_Clicked, 0)
  draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix)

  return picked
}

var g_MvpMatrix = new Matrix4() // 模型视图投影矩阵
// 绘制函数
function draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix) {
  // 计算模型视图投影矩阵
  g_MvpMatrix.set(viewProjMatrix)
  g_MvpMatrix.rotate(currentAngle, 0.0, 1.0, 0.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)
}

选中表面

采用同样的方式，也可以对表面进行选择。此处采用颜色缓冲区中的α分量记录“每个像素属于哪个面”的信息。

rgba的每个分量都是8比特，所以仅使用一个分类最多可以区分255个物体

此处将顶点着色器展示如下：

// PickFace.js
// 顶点着色器程序
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'attribute vec4 a_Color;\n' +
  'attribute float a_Face;\n' + // 表面编号（attribute只能使用float相关变量）
  '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类型
  ' vec3 color = (face == u_PickedFace) ? vec3(1.0):a_Color.rgb;\n' + 
  ' if (u_PickedFace == 0){\n' + // 将表面编号写入α分量
  ' v_Color = vec4(color,a_Face/255.0);\n' +
  ' } else{\n' +
  ' v_Color = vec4(color,a_Color.a);\n' +
  ' }\n' +
  '}\n'

从着色器的设计基本可以知道程序的思路。

floating_heart
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebGL 选中物体
dabaooooq的博客
09-21 264
有些三维应用程序需要允许用户能够交互地操纵三维物体，要这样做首先就得允许用户选中某个物体。对物体进行选中操作的用处很广泛。比如，让用户选中三维用户界面上的一个按钮，或者让用户选中三维场景中的多张照片中的某一张，这些动作都具有实际意义。选中三维物体比选中二维物体更加复杂，因为我们需要更多的数学过程来计算鼠标是否悬浮在某个图形上。但是，示例程序PickObject使用了一个简单的技巧解决了这一问题。在本例中，用户可以点击正在旋转的立方体，如果用户点击到了立方体，就显示一则消息，如下图所示。
计算机图形学大作业：城市三维建模
03-08
在此项目中，我们需要将DWG文件转换为WebGL格式，并通过在网页中渲染WebGL模型来展示三维效果。 首先，我们需要使用一些工具来将DWG文件转换为WebGL格式，例如Autodesk Forge、Three.js等。这些工具可以将DWG文件...
JavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zip
11-23
【资源说明】 JavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zipJavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zipJavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zip JavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zip JavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zipJavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zip JavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zip JavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zip 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，也适用于小白学习入门进阶。当然也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或者热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载，沟通交流，互相学习，共同进步！
WebGL入门(三十三)-通过鼠标点击选中立方体，选中立方体的某个面
点燃火柴的博客
04-18 1189
通过鼠标点击选中立方体，选中立方体的某个面1.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色器修改颜色缓冲区1.2.4读取像素颜色判断是否选中2.相关API介绍3.鼠标点击选中立方体demo3.1 demo效果3.2 demo代码4.鼠标点击选中立方体一个表面4.1 demo效果4.2 demo代码 1.三维物体选中原理与实现步骤 1.1物体选中原理 选中三维物体的原理就是先将物体在颜色缓冲区的颜色设置为
WebGL编程指南-29 通过鼠标点击选中立方体，选中立方体的某个面
weixin_46773434的博客
10-10 343
以上代码有一个gl.readPixels() 用来读取指定区域的像素颜色。
WEBGL入门
Kerryliuyue的博客
10-03 1475
gl.clear(g.COLOR_BUFFRE_BIT)，清理绘图区域实际上在清理颜色缓冲区（color buffer），传递的gl.COLOR_BUFFER_BIT就是在告诉WebGL清理颜色缓冲区。另外还有一个方法texture2D，第一个参数是纹理数据，第二个参数是纹理坐标，这个方法就是在纹理数据中取出当前片段对应在纹理数据中位置上的数据颜色。必须注意的是，如果WebGL需要的参数是浮点类型，例如10.0。一般用attribute变量来表示一些顶点的数据，如：顶点坐标，法线，纹理坐标，顶点颜色等。
【笔记】《WebGL编程指南》学习-第5章颜色与纹理(2-在矩形表面贴上图像）)
努力的V崽兽
09-29 1271
目标：将一张图片贴在矩形上
【愚公系列】2023年08月 WEBGL专题-物体的选中
热门推荐
时光隧道
08-07 1万+
点击事件是用户在计算机屏幕或移动设备上单击（或轻敲）鼠标或触摸屏幕时发生的事件。当用户单击一个可交互元素时，例如按钮、链接或图像，浏览器会触发一个点击事件，通知网页代码用户已单击了该元素。在Web开发中，开发人员可以通过JavaScript编写代码来响应点击事件，并在用户点击时执行某些操作，例如显示弹出窗口、打开新的页面或更改网页内容。点击事件不仅适用于Web开发，也适用于桌面应用程序和移动应用程序，例如在Windows操作系统中单击鼠标左键或在iOS或Android设备上轻敲屏幕。点击事件是用户在计算机屏
webgL阶段1一04点击描点
qq_38948398的博客
04-24 272
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>W.
如何看待Three.js/WebGL等前端3D技术？
沈行的博客
07-23 873
Web3D的未来发展方向现场访问
threejs基本面试题
weixin_55541470的博客
12-14 1489
在 ThreeJS 中，有许多不同类型的材质可供选择，以适应各种不同类型的几何体。其中包括环境光（AmbientLight）、点光源（PointLight）、平行光（DirectionalLight）和聚光灯（SpotLight）。三维空间需要一个相机来拍摄场景。ThreeJS 中有多种相机类型可供选择，包括透视相机（PerspectiveCamera）、正交相机（OrthographicCamera）等。创建 ThreeJS 场景需要创建一个场景对象，并将所需的几何体、光源、相机等添加到场景中。
WebGL--三维三角形分裂图
12-14
这是一个用WebGL编写的三维分裂三角形，实现了三角形的自动分裂，可以开始，暂停，终止，代码简单，可以参考，这也是西南石油大学南充校区，计算机图形学第三个实验！
超图三维地图开发webgl和cesium
08-31
超图三维地图开发webgl和cesium，最近项目用到三维地图前端显示，解压到tomcat即可用，适合初学者，包含了超图、cesium需要引入的js
WebGL之绘制三维地球.docx
04-26
WebGL之绘制三维地球。
WebGL着色器& GLSL入门
新缸中之脑
03-28 700
我们已经讨论了着色器和 GLSL，但还没有真正给它们任何具体细节。我想我希望通过示例可以清楚地说明这一点，但为了以防万一，让我们尝试使其更清楚。正如其工作原理中所述，WebGL 每次绘制内容时都需要 2 个着色器。顶点着色器和片段着色器。每个着色器都是一个函数。顶点着色器和片段着色器链接在一起形成着色器程序（或只是程序）。一个典型的 WebGL 应用程序会有很多着色器程序。推荐：用快速搭建3D场景。
使用three.js/webgl实现简易地形
凡事有果必有因
07-22 2204
在three.js中使用mapbox地形瓦片的方法
webgl_进入三维世界（2）
静儿的博客
09-03 134
显示生活中，我们经常遇到两个物体一前一后放在桌子上，观察时，前面的物体会把后面的物体遮住一部分的情况。 隐藏面消除 为了解决上述问题，WebGL提供了隐藏面消除功能。让我们绘制场景而不必顾及各物体在缓冲区中的顺序,因为那些远处的物体会自动被近处的物体挡住,不会被绘制出来。 开启隐藏面消除功能，需要遵循以下两步: 1．开启隐藏面消除功能。（gl.enable (gl. DEPTH_TEST); 2．在绘制之前，清除深度缓冲区。（gl.clear (gl.DEPTH_BUFEER_BIT); 深度冲突 当几何
2024年WebGIS开发三维面试题及答案解析
最新发布
gis_witch的博客
01-18 1507
同时，我也熟练掌握后端技术，如Python、Java等，熟悉常见的Web开发框架，如Django、Spring等。总之，我有强烈的责任心和求知欲，希望能够在您的团队中发挥自己的专业特长，为公司的发展做出贡献。我具备扎实的编程基础，熟悉GIS开发的主流语言和框架，如Python、Java和QGIS等。我能够独立完成GIS系统的设计和开发，包括地图制作、数据导入、功能实现和测试等方面的工作。我对GIS行业的市场需求和竞争态势有一定的了解，能够为公司的业务发展提供有益的建议和方案。
WebGL入门(十二)-使用varying变量在顶点着色器给片元着色器传值，绘制彩色三角形
点燃火柴的博客
03-13 1049
使用varying变量绘制彩色三角形1.demo效果2.相关知识点2.1 varying变量介绍2.2 varying变量使用步骤2.2.1 顶点着色器中声明varying变量2.2.2 片元着色器中使用varying变量2.2.3 通过缓冲区对象给attribute变量传值3.demo代码 1.demo效果 如上图，绘制了一个顶点不同颜色的三角形。是使用varying变量在顶点着色器给片元着色器传值绘制的图形 2.相关知识点 2.1 varying变量介绍 之前已经学习了attribute变量和unif
如何使用webgl 创建三维物体
03-21
要使用 WebGL 创建三维物体，您需要了解 WebGL 的基础知识和三维图形学的基础知识。首先，您需要创建一个 WebGL 上下文，然后使用 JavaScript 编写着色器程序来渲染三维物体。您可以使用 WebGL 库（如 Three.js）来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值