WebGL之旅（十八） 点选立方体

最新推荐文章于 2024-09-12 11:14:27 发布
最新推荐文章于 2024-09-12 11:14:27 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： WebGL 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xufeng0991/article/details/76565798
版权

一 点选立方体原理

这里用了一个比较巧妙(山寨)的方法判断是否点击到了立方体：

  1. 获取鼠标点击的位置；
  2. 将立方体绘制成红色（也可以是其他颜色）；
  3. 判断鼠标点击位置的颜色
  4. 恢复立方体的颜色

二 点选立方体示例

由以上原理，当鼠标点击位置的颜色跟立方体重绘之后的颜色一致为红色时，则点击的位置就在立方体上。(如果背景色也为红色，就尴尬了)。

// vs
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_MvpMatrix;
uniform bool u_Clicked;
varying vec4 v_Color;
void main() {
  gl_Position = u_MvpMatrix * a_Position;
  if (u_Clicked) {
    v_Color = vec4(1.0, 0.0, 0.0, 1.0);
  } else {
    v_Color = a_Color;
  }
}
// fs
#ifdef GL_ES
precision mediump float;
#endif
varying vec4 v_Color;
void main() {
  gl_FragColor = v_Color;
}


function main() {
    var gl = getGL();
    var vsFile = "./res/shader/click.vert.glsl";
    var fsFile = "./res/shader/click.frag.glsl";
    initShader(gl, vsFile, fsFile, function (shaderProgram) {
        var n = initVertexBuffers(gl, shaderProgram);
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.enable(gl.DEPTH_TEST);

        var u_Clicked = gl.getUniformLocation(shaderProgram, 'u_Clicked');
        gl.uniform1i(u_Clicked, 0);

        var viewMat = lookAt(3.0, 3.0, 7.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
        var projMat = getPerspectiveProjection(30, 16 / 9, 1, 100);
        var vpMat = multiMatrix44(projMat, viewMat);

        var u_MvpMatrix = gl.getUniformLocation(shaderProgram, 'u_MvpMatrix');
        gl.uniformMatrix4fv(u_MvpMatrix, false, vpMat);

        var tick = function() {
            draw(gl, n);
            requestAnimationFrame(tick);
        };
        tick();

        var canvas = document.getElementById("container");
        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) {
                var x_in_canvas = x - rect.left;
                var y_in_canvas = rect.bottom - y;
                var click = check(gl, shaderProgram, n, x_in_canvas, y_in_canvas);
                if (click){
                    console.log('The cube was selected!');
                }
            }
        }
    })
}

function check(gl, shaderProgram, n, x, y) {
    var click = false;

    var u_Clicked = gl.getUniformLocation(shaderProgram, 'u_Clicked');
    gl.uniform1i(u_Clicked, 1);
    draw(gl, n);

    var pixels = new Uint8Array(4);
    gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

    if (pixels[0] === 255){
        click = true;
    }

    gl.uniform1i(u_Clicked, 0);
    draw(gl, n);

    return click;
}

function draw(gl, n) {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}


function initVertexBuffers(gl, shaderProgram) {
    var 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,
        1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0,
        1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0,
        -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0,
        -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
        1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0
    ]);

    var colors = new Float32Array([
        0.2, 0.58, 0.82, 0.2, 0.58, 0.82, 0.2, 0.58, 0.82, 0.2, 0.58, 0.82,
        0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69,
        0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61,
        0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84,
        0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56,
        0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93,
    ]);

    var 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
    ]);

    initArrayBuffer(gl, shaderProgram, vertices, 3, gl.FLOAT, 'a_Position');
    initArrayBuffer(gl, shaderProgram, colors, 3, gl.FLOAT, 'a_Color');

    var indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

    return indices.length;
}

如图，当点击的位置在立方体上时，会在控制台输出"The cube was selected!"。

这里写图片描述

三 点选立方体某一面原理

原理：

  1. 记录每个顶点所在面的编号
  2. 鼠标点击后，将顶点所在面的编号写入颜色的Alpha中
  3. 读取颜色的Alpha值，即为选中的选中的面
  4. 重绘立方体，将选中的图设置为白色

四 点选立方体某一面示例

首先需要指定每个顶点所在的面的编号，然后在点击的时候将其设置在颜色中，通过颜色的Alpha值将选中的面传回js，然后在js中将选中的面绘制成白色。

// vs
attribute vec4 a_Position;
attribute vec4 a_Color;
attribute float a_Face;
uniform mat4 u_MvpMatrix;
uniform int u_ClickedFace;
varying vec4 v_Color;
void main() {
  gl_Position = u_MvpMatrix * a_Position;
  int face = int(a_Face);
  vec3 color = (face == u_ClickedFace) ? vec3(1.0) : a_Color.rgb;
  if(u_ClickedFace == 0) {
    v_Color = vec4(color, a_Face/255.0);
  } else {
    v_Color = vec4(color, a_Color.a);
  }
}

// fs
#ifdef GL_ES
precision mediump float;
#endif
varying vec4 v_Color;
void main() {
  gl_FragColor = v_Color;
}


function main() {
    var gl = getGL();
    var vsFile = "./res/shader/click.vert.glsl";
    var fsFile = "./res/shader/click.frag.glsl";
    initShader(gl, vsFile, fsFile, function (shaderProgram) {
        var n = initVertexBuffers(gl, shaderProgram);
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.enable(gl.DEPTH_TEST);

        var u_ClickedFace = gl.getUniformLocation(shaderProgram, 'u_ClickedFace');
        gl.uniform1i(u_ClickedFace, -1);

        var viewMat = lookAt(3.0, 3.0, 7.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
        var projMat = getPerspectiveProjection(30, 16 / 9, 1, 100);
        var vpMat = multiMatrix44(projMat, viewMat);

        var u_MvpMatrix = gl.getUniformLocation(shaderProgram, 'u_MvpMatrix');
        gl.uniformMatrix4fv(u_MvpMatrix, false, vpMat);

        var tick = function() {
            draw(gl, n);
            requestAnimationFrame(tick);
        };
        tick();

        var canvas = document.getElementById("container");
        canvas.onmousedown = function(ev) {
            var x = ev.clientX;
            var y = ev.clientY;
            var rect = ev.target.getBoundingClientRect();
            if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {
                var x_in_canvas = x - rect.left;
                var y_in_canvas = rect.bottom - y;
                var face = checkFace(gl, shaderProgram, n, x_in_canvas, y_in_canvas);
                gl.uniform1i(u_ClickedFace, face);
            }
        }
    })
}

function checkFace(gl, shaderProgram, n, x, y) {
    var u_ClickedFace = gl.getUniformLocation(shaderProgram, 'u_ClickedFace');
    gl.uniform1i(u_ClickedFace, 0);
    draw(gl, n);

    var pixels = new Uint8Array(4);
    gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
    return pixels[3];// A中保存的是平面编号
}

function draw(gl, n) {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}


function initVertexBuffers(gl, shaderProgram) {
    var 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,
        1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0,
        1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0,
        -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0,
        -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
        1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0
    ]);

    var colors = new Float32Array([
        0.2, 0.58, 0.82, 0.2, 0.58, 0.82, 0.2, 0.58, 0.82, 0.2, 0.58, 0.82,
        0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69,
        0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61,
        0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84,
        0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56,
        0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93,
    ]);

    var 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
    ]);

    var 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, shaderProgram, vertices, 3, gl.FLOAT, 'a_Position');
    initArrayBuffer(gl, shaderProgram, colors, 3, gl.FLOAT, 'a_Color');
    initArrayBuffer(gl, shaderProgram, faces, 1， gl.UNSIGNED_BYTE, 'a_Face');

    var indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

    return indices.length;
}

如图，选中的面会被绘制成白色。

这里写图片描述

WebGL之旅:

参考书：《WebGL编程指南》

丿寒风
关注
专栏目录
WebGL 从0到1绘制一个立方体
dabaooooq的博客
09-16 519
我们来绘制如下图所示的立方体（图右侧显示了立方体每个顶点的坐标），其8个顶点的颜色分别为白色、品红色（亮紫色）、红色、黄色、绿色、青色（蓝绿色）、蓝色、黑色。你也许知道，为每个顶点定义颜色后，表面上的颜色会根据顶点颜色内插出来，形成一种光滑的渐变效果（“色体”，相当于二维的“色轮”）。绘制三角形，我们都是调用gl.drawArrays（）方法来进行绘制操作的。考虑一下，如何用该函数绘制出一个立方体呢。我们只能使用gl.TRIANGLES、gl.TRIANGLE_STRIP或者gl.TRIANGLE_FAN模
WebGL之ThreeJS学习之旅01
u012891571的专栏
10-24 1702
本科的最后一年，毕业设计老师让用WebGL中的threeJs来完成，故此记录，共同学习。
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
01-19
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考，具体如下： 这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)。 主要实现过程如下，先用FBO输出当前环境在立方体纹理中，再画出当前立方体，最后画球，并且把FBO关联的纹理贴在这个球面上。 开始WebGL时，最好有些OpenGL基础，在前面讲Obj完善与MD2时，大家可能已经发现了，因为着色器的添加使用，原来一些Opengl大部分API已经没有使用。WebGL就和这差不多，大部分功能是着色器完成主要功能，记录下主要过程，大
WebGL编程指南-29 通过鼠标点击选中立方体，选中立方体的某个面
weixin_46773434的博客
10-10 390
以上代码有一个gl.readPixels() 用来读取指定区域的像素颜色。
WebGL系列教程六（纹理映射与立方体贴图）
最新发布
AIGIS的博客
09-12 1429
上一讲我们讲了如何使用索引绘制彩色立方体，还留了一个思考题：怎么让立方体的每个面都保持一个颜色?这一讲我们就来解决这个问题，并引出纹理映射和立方体贴图。其实这个词语还是比较好理解。见名知意，大概意思就是把纹理映射到某个地方，纹理是什么？现在你可以简单的认为纹理就是一张图片。把一张二维的图片映射到一个三维物体的表面，就叫纹理映射。本节我们从如何将立方体每个面的颜色改为相同的颜色开始，介绍到了如何将图片贴到立方体的表面，系统的分析了为什么不能再共用顶点，并将代码进行了修改，以及讲解了纹理坐标的使用。
WebGL 模型的选中（通过 ray pick 实现）
fourth_leaf的专栏
10-21 1327
拣选demo见 https://shengchao.xyz/blog/custom/3d/webgl_demo1/model_mode.php ,demo中双击 正方体的面就能触发跳转操作，具体代码见 源代码 gl_draw.js 中onGLDClick。   原理如下： ray pick     按照透视投影的成像原理，假设近裁面即画布的地方，那么视野中任意一点 A 所成的像将落在此点...
WebGL Api使用初探: 立方体
太古时代的专栏
10-09 325
之前一直用ThreeJs来学习Web3D。但是随着深入学习，对原生的WebGL Api发生了兴趣。 WebGL Api使用初探: 立方体 网上有几个立方体的例子，不过都不完全，要么代码有问题，要么找不到外部js文件。 我就东拼西凑，整理出来一个完整的例子。 能找到原文的，留下了参考地址，不知道从哪参考来的，就不管了。 只引用了一个外部js文件cuon-matrix.js。本来想把cuon...
WebGL-Threejs:WebGL 和 Three.js 演示
06-23
而Three.js是建立在WebGL之上的一个库，它简化了WebGL的复杂性，提供了更加友好的接口和丰富的功能，使得3D图形编程更加容易上手。 WebGL的核心在于其提供了一组强大的几何、颜色和光照处理函数，以及纹理映射和...
WebGL+Three.js入门与实战，系统学习Web3D技术（18章全）
01-28
WebGL和Three.js是Web开发中的重要技术，用于在浏览器中创建交互式的3D图形。WebGL是一种基于OpenGL...通过2023年1月更新的完整版18章内容，你可以获得最新的技术信息和实践指导，为你的Web3D开发之旅奠定坚实基础。
engine:简单的WebGL 3d引擎
05-31
**标题与描述解析** "engine:简单的WebGL 3d引擎" 这个标题表明我们正在讨论一个专门用于创建3D图形的WebGL引擎。...通过学习和掌握WebGL、JavaScript和3D图形学，你可以充分利用这个引擎，开启你的3D网页开发之旅。
Threejs初识－创世之旅
Blog | Loch
12-23 628
在这篇 Threejs 简介中，我们先忽略具体构建 Threejs 的整体工程，主要了解使用 Threejs 构建三维应用需要用到的要素
WebGL之物体选择
weixin_33966365的博客
05-28 508
原文地址: WebGL之物体选择 使用WebGL将图形绘制到画布后，如何与外部进行交互？这其中最关键的就是如何实现物体的选择。比如鼠标点击后判断是否选中了某个图形或图形的某个部分。 本节实现的效果: WebGL选中物体 如何实现选中物体 颜色区分法 《WebGL编程指南》中提出了一个原理很简单的解决方案，步骤如下： 鼠标按下时物体重绘为红色或其他能区分的颜色 读取鼠标点击处像素的颜色 ...
webgl三维绘制——彩色立方体
qq_37987033的博客
02-26 944
webgl的知识储备了这么多，从现在开始将会正式进入立方体的绘制，本文介绍如何在webgl中绘制一个三维立方体。
28 WebGL绘制立方体
现在学习也不晚
06-02 8484
案例查看地址：点击这里到现在为止，一直学的都是绘制一些简单的三角形。下面，我们将学习如何绘制如图所示的一个立方体，目标：如果按以前所学的知识，制作这个正方体就需要使用三角形两个拼一个矩形，最后拼出来六个正方形来组成这个立方体，由于绘制三角形需要重复调用顶点，虽然只需要8个顶点的位置，但是，绘制三角形的时候，却需要多次调用，所以给我们提供了一个gl.drawElements()函数的解决方案。使用该...
WebGL编程指南-21 通过顶点索引绘制渐变色的立方体
weixin_46773434的博客
09-27 518
如上，通过顶点索引绘制出了一个渐变色的立方体。
【WebGL-iTwin.js】实战篇(一)：使用itwin.js画一个立方体
sunqian的博客
12-13 925
用itwin.js画一个彩色立方体
WebGL自学教程——WebGL示例：8. 带阴影的立方体
tiewen的专栏
10-25 4280
8. 带阴影的立方体 　      本章的目的是给立方体增加一个阴影。所谓阴影，就是通过转换矩阵，将物体的各个顶点压平在指定的平面上。      阴影转换矩阵的计算，我提供了一个专门的js函数gltMakeShadowMatrix。该函数还用到了其它的一些函数。这些函数全部来自《OpenGL 超级宝典(第二版)》配套光盘，只不过源程序是c写的，我作了一下转换。      gltMakeSh
WebGL编程指南-30 三维物体雾化效果，立方体雾化效果
weixin_46773434的博客
10-10 503
如果雾化影子为1.0则表示该点完全没有被雾化，可以清晰的看到物体，如果为0.0则表示该点完全雾化，此处完全看不到物体，雾化因子的取值范围 0.0~1.0。在着色器中可以使用 clamp(x,minVal,maxVal) 将x限制在minVal和maxVal之间 该方法限制雾化因子范围。同样可以使用 mix(x,y,a) 返回x和y的线性混合，即x*(1-a)+y*a 该方法计算片元颜色，两者结合可以得到新的公式。在片元着色器中根据雾化因子计算片元的颜色，公式如下。
41 WebGL绘制一个具有交互的立方体
现在学习也不晚
06-13 2700
增加交互事件，鼠标拖拽立方体上下左右旋转，鼠标滚轮放大缩小立方体。案例查看地址：点击这里&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="wi
WebGL实战：FBO实现立方体贴图与环境映射教程
本文是一篇关于WebGL技术的实践教程，着重讲解如何利用帧缓冲对象（FBO，Framebuffer Object）在WebGL环境中实现立方体贴图的效果。作者首先强调了WebGL与OpenGL的相似性，指出大部分功能由着色器处理，而非传统的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值