WebGL编程指南-29 通过鼠标点击选中立方体，选中立方体的某个面

最新推荐文章于 2023-09-21 21:20:28 发布
最新推荐文章于 2023-09-21 21:20:28 发布
阅读量347 收藏 1
点赞数
分类专栏： WebGL编程指南 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46773434/article/details/127239850
版权

1.三维物体选中原理与实现步骤

选中三维物体的原理就是先将几何体设置为唯一的颜色，也就是说场景中的几何体颜色都不同，我们都知道gl_Color的类型是vec4类型的，也就是占4个字节，那么有256256256*256种可能，也可以理解位颜色就是各个几何体的ID，当鼠标点击屏幕时取当前位置的像素颜色，然后根据颜色找到对应几何体。最后再还原几何体本身的颜色。

2.demo效果

在这里插入图片描述
如上图当我们点击立方体时，会alert出提示。

3.demo代码

const VSHADER_SOURCE = `
attribute vec4 a_Position;

uniform vec4 u_Color;
varying vec4 v_Color;
uniform mat4 u_MvpMatrix4;
uniform bool u_Clicked;
void main() {
    gl_Position=u_MvpMatrix4*a_Position;
    if(u_Clicked) {
        v_Color = vec4(1.0,0.0,0.0,1.0);
    }else {
        v_Color=u_Color;

    }
  
}

`;

const FSHADER_SOURCE = `
precision mediump float;
varying vec4 v_Color;

void main() {
    gl_FragColor=v_Color;
}
`;

const initArrayBuffer = (gl, data, name, num, type) => {
  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

  const vertexLocation = gl.getAttribLocation(gl.program, name);
  gl.vertexAttribPointer(vertexLocation, num, type, false, 0, 0);
  gl.enableVertexAttribArray(vertexLocation);

  return true;
};

const check = (
  gl,
  n,
  x,
  y,
  currentAngle,
  u_Clicked,
  viewProjMatrix,
  u_MvpMatrix4
) => {
  let picked = false;
  gl.uniform1i(u_Clicked, 1);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, 24, gl.UNSIGNED_BYTE, 0);
 
  const 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);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, 24, gl.UNSIGNED_BYTE, 0);

  return picked
};
const initIndexBuffer = (gl, indexData) => {
  const indicesBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
};
const main = () => {
  const canvas = document.getElementById("webgl");
  const gl = canvas.getContext("webgl");

  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    return console.error("着色器初始化失败");
  }

  canvas.onmousedown = (ev) => {
    const x = ev.clientX,
      y = ev.clientY;
    const rect = ev.target.getBoundingClientRect();

    if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {
        const x_in_canvas=x-rect.left;
        const y_in_canvas=rect.bottom-y;
        const u_Clicked = gl.getUniformLocation(gl.program,'u_Clicked')
        const picked = check(gl,0,x_in_canvas,y_in_canvas,0,u_Clicked);
        if(picked) {
            alert('the cube was selected!')
        }
    }
  };
  const modelMatrix4 = new Matrix4().setRotate(60, 0, 1, 0);
  const projMatrix4 = new Matrix4().setPerspective(
    90,
    canvas.width / canvas.clientHeight,
    0.5,
    100
  );
  const viewMatrix4 = new Matrix4().setLookAt(
    3,
    3,
    5,
    0.0,
    0.0,
    0.0,
    0.0,
    1.0,
    0.0
  );

  const mvpMatrix4 = new Matrix4()
    .setIdentity()
    .multiply(projMatrix4)
    .multiply(viewMatrix4)
    .multiply(modelMatrix4);

  const u_MvpMatrix4 = gl.getUniformLocation(gl.program, "u_MvpMatrix4");
  gl.uniformMatrix4fv(u_MvpMatrix4, false, mvpMatrix4.elements);
  const vertexBuffer = new Float32Array([
    1.0,
    1.0,
    1.0, //v0 white
    -1.0,
    1.0,
    1.0, //v1 品红
    -1.0,
    -1.0,
    1.0, //v2 红色
    1.0,
    -1.0,
    1.0, //v3 黄色
    1.0,
    -1.0,
    -1.0, //v4
    1.0,
    1.0,
    -1.0, //v5
    -1.0,
    1.0,
    -1.0, //v6
    -1.0,
    -1.0,
    -1.0, //v7
  ]);
  const indicesData = new Uint8Array([
    0,
    1,
    2,
    0,
    2,
    3, //front
    0,
    3,
    4,
    0,
    4,
    5, //right
    0,
    5,
    6,
    0,
    6,
    1, //up
    1,
    6,
    7,
    1,
    7,
    2, //left
    7,
    4,
    3,
    7,
    3,
    2, //bottom
    4,
    7,
    6,
    4,
    6,
    5, //behind
  ]);
  initArrayBuffer(gl, vertexBuffer, "a_Position", 3, gl.FLOAT);
  initIndexBuffer(gl, indicesData);

  const u_Clicked = gl.getUniformLocation(gl.program, "u_Clicked");
  //初始化为false
  gl.uniform1i(u_Clicked, 0);
  const u_Color = gl.getUniformLocation(gl.program, "u_Color");
  gl.uniform4f(u_Color, 0.0, 1.0, 0.0, 1.0);

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.enable(gl.DEPTH_TEST);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, indicesData.length, gl.UNSIGNED_BYTE, 0);
};

main();

4.相关API介绍

以上代码有一个gl.readPixels() 用来读取指定区域的像素颜色

调用示例：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	pexels的长度不够存储所有像素值数据
			INVALID_ENUM		format或type值无效

4.鼠标点击选中立方体一个表面

4.1demo效果

在这里插入图片描述
如上图所示，若点击立方体的一个面，则这个面变成白色，点击立方体以外的区域，立方体恢复原有颜色

逻辑与选中立方体逻辑基本一致，只不过之前颜色相当于立方体的ID，现在颜色相当于面的ID，每个面的颜色不同

4.2 demo代码

const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute float a_Face;

uniform vec4 u_Color;
varying vec4 v_Color;
uniform mat4 u_MvpMatrix4;
uniform bool u_Clicked;
uniform int u_PickedFace;

void main() {
    gl_Position=u_MvpMatrix4*a_Position;
    int face = int(a_Face);
    vec3 color = (face == u_PickedFace)?vec3(1.0):u_Color.rgb;
    if(u_PickedFace == 0) {
        v_Color = vec4(color,a_Face/255.0);
    }else {
        v_Color=vec4(color,u_Color.a);
    }
  
}

`;

const FSHADER_SOURCE = `
precision mediump float;
varying vec4 v_Color;

void main() {
    gl_FragColor=v_Color;
}
`;

const initArrayBuffer = (gl, data, name, num, type) => {
  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

  const vertexLocation = gl.getAttribLocation(gl.program, name);
  gl.vertexAttribPointer(vertexLocation, num, type, false, 0, 0);
  gl.enableVertexAttribArray(vertexLocation);

  return true;
};

const check = (
  gl,
  n,
  x,
  y,
  currentAngle,
  u_PickedFace,
  viewProjMatrix,
  u_MvpMatrix4
) => {
    const pixels = new Uint8Array(4);
  gl.uniform1i(u_PickedFace,0);//将表面编号写入分量

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, 24, gl.UNSIGNED_BYTE, 0);
 
  gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  return pixels[3]
};
const initIndexBuffer = (gl, indexData) => {
  const indicesBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
};
const main = () => {
  const canvas = document.getElementById("webgl");
  const gl = canvas.getContext("webgl");
  
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    return console.error("着色器初始化失败");
  }

  canvas.onmousedown = (ev) => {
    const x = ev.clientX,
      y = ev.clientY;
    const rect = ev.target.getBoundingClientRect();

    if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {
        const x_in_canvas=x-rect.left;
        const y_in_canvas=rect.bottom-y;
        const u_PickedFace = gl.getUniformLocation(gl.program,'u_PickedFace')
        const face = check(gl,0,x_in_canvas,y_in_canvas,0,u_PickedFace);
        console.log(face,face)
        gl.uniform1i(u_PickedFace,face);

        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLES, 24, gl.UNSIGNED_BYTE, 0);
    }
  };

  const u_PickedFace = gl.getUniformLocation(gl.program,'u_PickedFace');
  gl.uniform1i(u_PickedFace,-1);

  const modelMatrix4 = new Matrix4().setRotate(60, 0, 1, 0);
  const projMatrix4 = new Matrix4().setPerspective(
    90,
    canvas.width / canvas.clientHeight,
    0.5,
    100
  );
  const viewMatrix4 = new Matrix4().setLookAt(
    3,
    3,
    5,
    0.0,
    0.0,
    0.0,
    0.0,
    1.0,
    0.0
  );

  const mvpMatrix4 = new Matrix4()
    .setIdentity()
    .multiply(projMatrix4)
    .multiply(viewMatrix4)
    .multiply(modelMatrix4);

  const u_MvpMatrix4 = gl.getUniformLocation(gl.program, "u_MvpMatrix4");
  gl.uniformMatrix4fv(u_MvpMatrix4, false, mvpMatrix4.elements);
  const vertexBuffer =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, //front面 v0-4
    1.0,
    1.0,
    1.0,
    1.0,
    -1.0,
    1.0,
    1.0,
    -1.0,
    -1.0,
    1.0,
    1.0,
    -1.0, //right v0345
    1.0,
    1.0,
    1.0,
    1.0,
    1.0,
    -1.0,
    -1.0,
    1.0,
    -1.0,
    -1.0,
    1.0,
    1.0, //up v0561
    -1.0,
    1.0,
    1.0,
    -1.0,
    -1.0,
    1.0,
    -1.0,
    -1.0,
    -1.0,
    -1.0,
    1.0,
    -1.0, //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, //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, //back
  ]);
  const indicesData =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,
  ]);
  const faces = new Uint8Array([
      1,1,1,1,
      2,2,2,2,
      3,3,3,3,
      4,4,4,4,
      5,5,5,5,
      6,6,6,6
  ])
  initArrayBuffer(gl,faces,"a_Face",1,gl.BYTE)
  initArrayBuffer(gl, vertexBuffer, "a_Position", 3, gl.FLOAT);
  initIndexBuffer(gl, indicesData);

  const u_Clicked = gl.getUniformLocation(gl.program, "u_Clicked");
  //初始化为false
  gl.uniform1i(u_Clicked, 0);
  const u_Color = gl.getUniformLocation(gl.program, "u_Color");
  gl.uniform4f(u_Color, 0.0, 1.0, 0.0, 1.0);

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.enable(gl.DEPTH_TEST);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, indicesData.length, gl.UNSIGNED_BYTE, 0);
};

main();
鸡米工程师
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebGL 选中物体
dabaooooq的博客
09-21 267
有些三维应用程序需要允许用户能够交互地操纵三维物体，要这样做首先就得允许用户选中某个物体。对物体进行选中操作的用处很广泛。比如，让用户选中三维用户界面上的一个按钮，或者让用户选中三维场景中的多张照片中的某一张，这些动作都具有实际意义。选中三维物体比选中二维物体更加复杂，因为我们需要更多的数学过程来计算鼠标是否悬浮在某个图形上。但是，示例程序PickObject使用了一个简单的技巧解决了这一问题。在本例中，用户可以点击正在旋转的立方体，如果用户点击到了立方体，就显示一则消息，如下图所示。
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
01-19
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考，具体如下： 这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)。 主要实现过程如下，先用FBO输出当前环境在立方体纹理中，再画出当前立方体，最后画球，并且把FBO关联的纹理贴在这个球面上。 开始WebGL时，最好有些OpenGL基础，在前面讲Obj完善与MD2时，大家可能已经发现了，因为着色器的添加使用，原来一些Opengl大部分API已经没有使用。WebGL就和这差不多，大部分功能是着色器完成主要功能，记录下主要过程，大
WebGL入门(三十三)-通过鼠标点击选中立方体，选中立方体的某个面
点燃火柴的博客
04-18 1208
通过鼠标点击选中立方体，选中立方体的某个面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技巧：选中三维物体
floating_heart的博客
05-28 513
WebGL选中物体的小技巧：通过赋予物体不同的颜色，获取鼠标点击处的颜色，来判断是否选中物体。
WebGL之旅（十八） 点选立方体
寒风的技术博客
08-02 1140
原理这里用了一个比较巧妙(山寨)的方法判断是否点击到了立方体： 获取鼠标点击的位置； 将立方体绘制成红色（也可以是其他颜色）； 判断鼠标点击位置的颜色 恢复立方体的颜色 示例由以上原理，当鼠标点击位置的颜色跟立方体重绘之后的颜色一致为红色时，则点击的位置就在立方体上。(如果背景色也为红色，就尴尬了)。function main() { var gl = getGL(); var vs
《WebGL编程指南》自带光盘webgl-guide-code
01-12
《WebGL编程指南》自带光盘， webgl-guide-code
《WebGL编程指南》学习笔记webgl-study-notes
01-12
《WebGL编程指南》学习笔记webgl-study-notes
WebGL编程指南 - 含源码
06-27
WebGL编程指南 - 含源码 WebGL编程指南 - 含源码 WebGL编程指南 - 含源码
WebGL编程指南-源码
02-21
　《WebGL编程指南》的主要篇幅讲解了WebGL原生API和三维图形学的基础知识，包括渲染管线、着色器、矩阵变换、着色器编程语言（GLSLES）等等，也讲解了使用WebGL渲染三维场景的一般技巧，如光照、阴影、雾化等等。...
WebGL-Random-Fun:旋转立方体并在立方体的面上移动一个正方形
06-29
WebGL-随机-乐趣旋转立方体并在立方体的面上移动一个正方形
WebGL Obj模型导入(含指导书、PPT和示例程序)
07-27
自己编写了一个WebGL Obj模型导入库，内有PPT讲解，同时附有指导书说明如何使用该导入库，并提供了3个示例程序。
【愚公系列】2023年08月 WEBGL专题-物体的选中
热门推荐
时光隧道
08-07 1万+
点击事件是用户在计算机屏幕或移动设备上单击（或轻敲）鼠标或触摸屏幕时发生的事件。当用户单击一个可交互元素时，例如按钮、链接或图像，浏览器会触发一个点击事件，通知网页代码用户已单击了该元素。在Web开发中，开发人员可以通过JavaScript编写代码来响应点击事件，并在用户点击时执行某些操作，例如显示弹出窗口、打开新的页面或更改网页内容。点击事件不仅适用于Web开发，也适用于桌面应用程序和移动应用程序，例如在Windows操作系统中单击鼠标左键或在iOS或Android设备上轻敲屏幕。点击事件是用户在计算机屏
webgl圈中物体
weixin_34261415的博客
08-04 97
这篇的标题非常不符合我的气质！ 注意标题中有个“圏” 字 并不是“选” 下面的圈中物体解决方案 其实已经把如何选中一个物体的问题一并搞定了 圈中物体 首先要有一条封闭曲线吧 那条曲线是由n个线段拼接起来的 我们要找到相交的那两条线段和那两条线段之间的所有线段 如图 相交的线段就是这两了封闭曲线的起始和结束线段就是它们 不过还得截取它们的头或尾 绿色线段起始坐标替换为交点坐标 ...
WebGL 用鼠标控制物体旋转
最新发布
dabaooooq的博客
09-21 752
有时候，WebGL程序需要让用户通过鼠标操作三维物体。这一节来分析示例程序，该程序允许用户通过拖动（即按住左键移动）鼠标旋转三维物体。为了简单，示例程序中的三维物体是一个立方体，但拖曳鼠标旋转物体的方法却适用于所有物体。下图显示了程序的运行效果，立方体上贴有纹理图像。
WebGL Api使用初探: 立方体
太古时代的专栏
10-09 293
之前一直用ThreeJs来学习Web3D。但是随着深入学习，对原生的WebGL Api发生了兴趣。 WebGL Api使用初探: 立方体 网上有几个立方体的例子，不过都不完全，要么代码有问题，要么找不到外部js文件。 我就东拼西凑，整理出来一个完整的例子。 能找到原文的，留下了参考地址，不知道从哪参考来的，就不管了。 只引用了一个外部js文件cuon-matrix.js。本来想把cuon...
webgl三维绘制——彩色立方体
qq_37987033的博客
02-26 763
webgl的知识储备了这么多，从现在开始将会正式进入立方体的绘制，本文介绍如何在webgl中绘制一个三维立方体。
WebGL编程指南-21 通过顶点索引绘制渐变色的立方体
weixin_46773434的博客
09-27 476
如上，通过顶点索引绘制出了一个渐变色的立方体。
【WebGL-iTwin.js】实战篇(一)：使用itwin.js画一个立方体
sunqian的博客
12-13 802
用itwin.js画一个彩色立方体
WebGL自学教程——WebGL示例：8. 带阴影的立方体
tiewen的专栏
10-25 4231
8. 带阴影的立方体 　      本章的目的是给立方体增加一个阴影。所谓阴影，就是通过转换矩阵，将物体的各个顶点压平在指定的平面上。      阴影转换矩阵的计算，我提供了一个专门的js函数gltMakeShadowMatrix。该函数还用到了其它的一些函数。这些函数全部来自《OpenGL 超级宝典(第二版)》配套光盘，只不过源程序是c写的，我作了一下转换。      gltMakeSh
webgl编程指南 源码
06-20
《WebGL编程指南》是一本介绍WebGL技术的经典书籍，它详细阐述了WebGL的原理、应用和实践，是WebGL开发必备的参考书。本书附带的源代码是学习和实践WebGL的重要材料，它涵盖了WebGL的各个方面，从基础的三维图形绘制...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值