AI 助理
备案控制台
开发者社区 人工智能 文章 正文

WEBGL学习【十四】利用HUD技术在网页上方显示三维物体

2018-01-11 1002
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79035579 ...
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79035579

关键点：

<!--实现原理：要保证这两个canvas相互重叠;z-index表示了两个画布的上下层关系-->
<!--是WEBGL的三维图形Canvas（主要用于绘制三维场景）-->
<canvas id="webgl" width="400" height="400" style="position: absolute; z-index: 0">
    Please use a browser that supports "canvas"
</canvas>

<!--二维的HUD的canvas（主要用于绘制HUD信息）-->
<canvas id="hud" width="400" height="400" style="position: absolute; z-index: 1"></canvas>

js核心代码：

// HUD.js (c) 2012 matsuda
// Vertex shader program
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'attribute vec4 a_Color;\n' +
    'uniform mat4 u_MvpMatrix;\n' +
    'uniform bool u_Clicked;\n' + // Mouse is pressed
    'varying vec4 v_Color;\n' +
    'void main() {\n' +
    '  gl_Position = u_MvpMatrix * a_Position;\n' +
    '  if (u_Clicked) {\n' + //  Draw in red if mouse is pressed
    '    v_Color = vec4(1.0, 0.0, 0.0, 1.0);\n' +
    '  } else {\n' +
    '    v_Color = a_Color;\n' +
    '  }\n' +
    '}\n';

// Fragment shader program
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; // Rotation angle (degrees/second)

function main() {
    // Retrieve <canvas> element
    var canvas = document.getElementById('webgl');
    var hud = document.getElementById('hud');

    if (!canvas || !hud) {
        console.log('Failed to get HTML elements');
        return false;
    }

    // Get the rendering context for WebGL
    var gl = getWebGLContext(canvas);
    // Get the rendering context for 2DCG
    var ctx = hud.getContext('2d');
    if (!gl || !ctx) {
        console.log('Failed to get rendering context');
        return;
    }

    // Initialize shaders
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    // Set the vertex information
    var n = initVertexBuffers(gl);
    if (n < 0) {
        console.log('Failed to set the vertex information');
        return;
    }

    // Set the clear color and enable the depth test
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

    // Get the storage locations of uniform variables
    var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
    var u_Clicked = gl.getUniformLocation(gl.program, 'u_Clicked');
    if (!u_MvpMatrix || !u_Clicked) {
        console.log('Failed to get the storage location of uniform variables');
        return;
    }

    // Calculate the view projection matrix
    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); // Pass false to u_Clicked

    var currentAngle = 0.0; // Current rotation angle
    // 鼠标在HUD画布中如果有动作将就响应
    hud.onmousedown = function(ev) {   // Mouse is pressed
        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) {
            // If pressed position is inside <canvas>, check if it is above object
            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() {   // Start drawing
        currentAngle = animate(currentAngle);
        //重复绘制二维图形（不断更新角度值）
        draw2D(ctx, currentAngle); // Draw 2D
        draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
        requestAnimationFrame(tick, canvas);
    };
    tick();
}

function initVertexBuffers(gl) {
    // Create a cube
    //    v6----- v5
    //   /|      /|
    //  v1------v0|
    //  | |     | |
    //  | |v7---|-|v4
    //  |/      |/
    //  v2------v3
    var vertices = new Float32Array([   // Vertex coordinates
        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
    ]);

    var colors = new Float32Array([   // Colors
        0.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 front
        0.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 right
        0.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 up
        0.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 left
        0.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 down
        0.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
    ]);

    // Indices of the vertices
    var indices = new Uint8Array([
        0, 1, 2,   0, 2, 3,    // front
        4, 5, 6,   4, 6, 7,    // right
        8, 9,10,   8,10,11,    // up
        12,13,14,  12,14,15,    // left
        16,17,18,  16,18,19,    // down
        20,21,22,  20,22,23     // back
    ]);

    // Write the vertex property to buffers (coordinates and normals)
    if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) return -1; // Coordinates
    if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')) return -1;      // Color Information

    // Create a buffer object
    var indexBuffer = gl.createBuffer();
    if (!indexBuffer) {
        return -1;
    }
    // Write the indices to the buffer object
    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);  // Pass true to u_Clicked(Draw cube with red)
    draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
    // Read pixel at the clicked position
    var pixels = new Uint8Array(4); // Array for storing the pixel value
    gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

    if (pixels[0] == 255) // If red = 255, clicked on cube
        picked = true;

    gl.uniform1i(u_Clicked, 0);  // Pass false to u_Clicked(Draw cube with specified color)
    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) {
    // Caliculate The model view projection matrix and pass it to u_MvpMatrix
    g_MvpMatrix.set(viewProjMatrix);
    g_MvpMatrix.rotate(currentAngle, 1.0, 0.0, 0.0); // Rotate appropriately
    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);     // Clear buffers (color and depth)
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);   // Draw
}


//实现二维图形的绘制工作
function draw2D(ctx, currentAngle) {
    //传入左上角坐标，宽度和高度，清空绘图区
    ctx.clearRect(0, 0, 400, 400); // Clear <hud>
    // Draw triangle with white lines
    ctx.beginPath();                      // Start drawing
    ctx.moveTo(120, 10); ctx.lineTo(200, 150); ctx.lineTo(40, 150);
    ctx.closePath();
    ctx.strokeStyle = 'rgba(255, 255, 255, 1)'; // Set white to color of lines
    ctx.stroke();                           // Draw Triangle with white lines
    // Draw white letters
    ctx.font = '18px "Times New Roman"';
    ctx.fillStyle = 'rgba(255, 255, 255, 1)'; // Set white to the color of letters
    ctx.fillText('HUD: Head Up Display', 40, 180);
    ctx.fillText('Triangle is drawn by Canvas 2D API.', 40, 200);
    ctx.fillText('Cube is drawn by WebGL API.', 40, 220);
    //Math.floor截掉了小数部分（这里也需要重绘）
    ctx.fillText('Current Angle: '+ Math.floor(currentAngle), 40, 240);
}

var last = Date.now(); // Last time that this function was called
function animate(angle) {
    var now = Date.now();   // Calculate the elapsed time
    var elapsed = now - last;
    last = now;
    // Update the current rotation angle (adjusted by the elapsed time)
    var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
    return newAngle % 360;
}

function initArrayBuffer (gl, data, num, type, attribute) {
    // Create a buffer object
    var buffer = gl.createBuffer();
    if (!buffer) {
        console.log('Failed to create the buffer object');
        return false;
    }
    // Write date into the buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    // Assign the buffer object to the attribute variable
    var 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);
    // Enable the assignment of the buffer object to the attribute variable
    gl.enableVertexAttribArray(a_attribute);
    // Unbind the buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    return true;
}

文章标签：
前端开发
机器学习/深度学习
向善的灯
目录
相关文章
zuoben
|
算法 定位技术
Threejs中使用A*算法寻路导航，Threejs室内室外地图导航
Threejs中使用A*算法寻路导航，Threejs室内室外地图导航
zuoben
1114 0
Threejs中使用A*算法寻路导航，Threejs室内室外地图导航
HannYang
|
6月前
|
定位技术
Pyglet综合应用｜推箱子游戏地图编辑器之图片跟随鼠标
Pyglet综合应用｜推箱子游戏地图编辑器之图片跟随鼠标
HannYang
59 0
前端歌谣
|
前端开发
前端学习笔记202305学习笔记第二十三天-区域文字和立体设置
前端学习笔记202305学习笔记第二十三天-区域文字和立体设置
前端歌谣
43 0
豆约翰
|
Python
Python实现超级玛丽游戏系列教程04背景滚动及摄像机（Camera）原理
Python实现超级玛丽游戏系列教程04背景滚动及摄像机（Camera）原理
豆约翰
108 0
凯小默
|
数据可视化 JavaScript 前端开发
【视觉高级篇】18 # 如何生成简单动画让图形动起来？
【视觉高级篇】18 # 如何生成简单动画让图形动起来？
凯小默
91 0
【视觉高级篇】18 # 如何生成简单动画让图形动起来？
凯小默
|
数据可视化
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
凯小默
175 0
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
nanke_yh
|
定位技术
在地图上基于OpenLayers实现点/线/面静态的绘制显示
在地图上基于OpenLayers实现点/线/面静态的绘制显示
nanke_yh
1044 0
在地图上基于OpenLayers实现点/线/面静态的绘制显示
前端修罗场
【ThreeJs】（1）四大组件：场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
【ThreeJs】（1）四大组件：场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
前端修罗场
372 0
【ThreeJs】（1）四大组件：场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
chokcoco
|
前端开发 JavaScript 开发者
让交互更加生动！有意思的鼠标跟随 3D 旋转动效
让交互更加生动！有意思的鼠标跟随 3D 旋转动效
chokcoco
402 0
让交互更加生动！有意思的鼠标跟随 3D 旋转动效
恬静的小魔龙Unity
|
图形学
UGUI系列-点击图片生成物体（Unity3D）
今天给大家分享一个如何点击图片生成物体的脚本，可以把这个脚本稍微封装一下，以后也可以方便使用。 主要试用与点击图片时候响应事件，具体用法还要大家多多摸索
恬静的小魔龙Unity
213 0

热门文章

最新文章

  • 1
    小技巧 - 怎样屏蔽群消息（包括 @全体成员）？
  • 2
    MAVEN简介之——settings.xml
  • 3
    RDS for SQL server 空间问题排查汇总
  • 4
    深度 ｜ 大数据算法应用的测试发展之路
  • 5
    JavaScript基本数据类型分析
  • 6
    【Linux】使用数字表示法和文件表示法修改文件权限（超详细）
  • 7
    艾伟：一个简单的关键字过滤算法
  • 8
    上海保交所发布区块链底层技术平台，为保险交易高效安全保驾护航
  • 9
    《程序员的修炼-培养思维潜能的9个习惯》 读书笔记
  • 10
    Swift析构器
  • 1
    `Object.create()` 方法的参数
    27
  • 2
    js中new和object.creat区别
    26
  • 3
    Kotlin - 运算符与中缀表达式
    28
  • 4
    除了 `addEventListener` 方法，还有哪些方式可以为元素添加事件监听器？
    25
  • 5
    如何同时在捕获阶段和冒泡阶段添加事件监听器？
    28
  • 6
    `addEventListener` 方法的第三个参数有什么作用？
    12
  • 7
    Kotlin - 运算符与中缀表达式
    12
  • 8
    除了点击事件，`addEventListener` 还能用于处理哪些事件类型？
    18
  • 9
    addEventlistener和正常的onclick=()=> 的区别
    13
  • 10
    除了性能，块级作用域和函数作用域对代码的可读性和可维护性有何影响？
    11

    • 相关电子书

    更多
  • 3D动画的菜谱式灯光与云渲染
  • 360°全景视频播放器的实现原理
  • 复杂环境下的视觉同时定位与地图构建

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
  • DataV平面地图组件入门
  • 通义万相文本绘图与人像美化
  • 图表样式智能美化工具
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 快速实现摄像头视频画面的远程预览
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月