WebGL HUD(平视显示器)

目录

HUD(平视显示器)

如何实现HUD

示例程序(HUD.html) 

示例程序(HUD.js) 

代码详解 

在网页文字上方显示三维物体

代码详解 


HUD(平视显示器)

平视显示器(head up display)简称HUD,最早用于飞机驾驶。平视显示器将一些重要信息投射到飞机驾驶舱前方的一块玻璃上,飞行员能够将外界的影像和这些重要信息融合在一起,而不用频繁低头观察仪表盘。三维图形程序,尤其是游戏,也经常在三维场景上叠加文本或二维图形信息,以达到HUD的效果。这一节将创建一个示例程序,在三维场景上叠加一些符号和文字,如图10.5所示。

本例的三维部分取自PickObject程序WebGL 选中物体_山楂树の的博客-CSDN博客,额外的工作就是在三维场景前方绘制一个二维的三角形,打印几行文本,显示三维程序中立方体的当前角度。当立方体旋转时,角度变化也会实时地在文本中更新。 

如何实现HUD

可以使用HTML和canvas函数来实现HUD,具体地,我们需要:

1.在HTML文件中,为WebGL绘制的三维图形准备一个<canvas>,同时为二维的HUD信息再准备一个<canvas>。令这两个<canvas>重叠放置,并让HUD的<canvas>叠在上面。

2.在前一个<canvas>上使用WebGL API绘制三维场景。

3.在后一个<canvas>上使用canvas 2D API绘制HUD信息。

如你所见,实现HUD效果的原理非常简单,只要两个<canvas>位置重叠,浏览器会自动将WebGL内容和HUD内容混合起来。我们来看一下示例程序。

示例程序(HUD.html) 

对HTML文件做些修改,添加一个<canvas>标签。如下显示了HUD.html的代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>HUD</title></head><body onload="main()"><canvas id="webgl" width="400" height="400" style="position: absolute; z-index: 0">Please use a browser that supports "canvas"</canvas><canvas id="hud" width="400" height="400" style="position: absolute; z-index: 1"></canvas><script src="../lib/webgl-utils.js"></script><script src="../lib/webgl-debug.js"></script><script src="../lib/cuon-utils.js"></script><script src="../lib/cuon-matrix.js"></script><script src="HUD.js"></script></body>
</html>

<canvas>标签的style属性可以用来定义其位置和外观,本例将两个<canvas>重叠放置,而且HUD的<canvas>叠在上层。style属性信息由名值对组成,属性名和属性值之间用冒号(:)隔开(第9行),比如这样:style=〞position:absolute〞,不同属性间用分号(;)隔开。

position属性表示确定<canvas>的位置的方式,z-index属性表示两个<canvas>的上下关系。

position属性的值是absolute,表示使用绝对坐标系确定<canvas>的位置。我们并没有通过具体的坐标值来指定<canvas>的位置,所以两个<canvas>都会出现在默认位置上,即页面的左上角,只要二者的大小一样,就完全重合了。z-index属性表示,当两个元素重叠时,哪个在上面哪个在下面。规则是,具有较大的z-index属性值的元素在上面。本例中,HUD的<canvas>的z-index值是1,而WebGL的<canvas>的z-index值是0,所以前者在上面。

总之,这段HTML代码的意思是,两个<canvas>元素重叠放置,HUD的<canvas>在WebGL的<canvas>的上面。由于在默认情况下,<canvas>的背景色是透明的,所以无须做其他处理,用户就能透过HUD的<canvas>看到WebGL所渲染的场景。所有在HUD的<canvas>中绘制的内容都会出现在WebGL渲染的三维场景之上,这样就产生了HUD效果。

示例程序(HUD.js) 

接下来看一下HUD.js的代码,如下所示。与PickObject相比WebGL 选中物体_山楂树の的博客-CSDN博客,主要有两处区别:

1. 获取了HUD的<canvas>的绘图上下文,用来绘制三角形和文本。

2. 将鼠标点击事件响应函数注册到了HUD的<canvas>上,前例中是注册到WebGL的<canvas>上的。

第1步使用第2章讨论过的知识,在<canvas>上绘制了一个三角形。在第2步中,由于HUD的<canvas>叠在WebGL的<canvas>上面,所以鼠标点击事件是在前者上触发的,需要把事件响应函数注册到前者上。本例的顶点着色器和片元着色器与PickObject.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> elementvar 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 WebGLvar gl = getWebGLContext(canvas);// Get the rendering context for 2DCGvar ctx = hud.getContext('2d');if (!gl || !ctx) {console.log('Failed to get rendering context');return;}// Initialize shadersif (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('Failed to intialize shaders.');return;}// Set the vertex informationvar n = initVertexBuffers(gl);if (n < 0) {console.log('Failed to set the vertex information');return;}// Set the clear color and enable the depth testgl.clearColor(0.0, 0.0, 0.0, 1.0);gl.enable(gl.DEPTH_TEST);// Get the storage locations of uniform variablesvar 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 matrixvar 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_Clickedvar currentAngle = 0.0; // Current rotation angle// Register the event handlerhud.onmousedown = function (ev) {   // Mouse is pressedvar 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 objectvar 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 drawingcurrentAngle = animate(currentAngle);draw2D(ctx, currentAngle); // Draw 2Ddraw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);requestAnimationFrame(tick, canvas);};tick();
}function initVertexBuffers(gl) {// Create a cube//    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.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 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.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 up0.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 left0.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 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]);// Indices of the verticesvar indices = new Uint8Array([0, 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]);// Write the vertex property to buffers (coordinates and normals)if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) return -1; // Coordinatesif (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')) return -1;      // Color Information// Create a buffer objectvar indexBuffer = gl.createBuffer();if (!indexBuffer) {return -1;}// Write the indices to the buffer objectgl.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 positionvar pixels = new Uint8Array(4); // Array for storing the pixel valuegl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);if (pixels[0] == 255) // If red = 255, clicked on cubepicked = 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_MvpMatrixg_MvpMatrix.set(viewProjMatrix);g_MvpMatrix.rotate(currentAngle, 1.0, 0.0, 0.0); // Rotate appropriatelyg_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 linesctx.beginPath();                      // Start drawingctx.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 linesctx.stroke();                           // Draw Triangle with white lines// Draw white lettersctx.font = '18px "Times New Roman"';ctx.fillStyle = 'rgba(255, 255, 255, 1)'; // Set white to the color of lettersctx.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);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 timevar 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 objectvar buffer = gl.createBuffer();if (!buffer) {console.log('Failed to create the buffer object');return false;}// Write date into the buffer objectgl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);// Assign the buffer object to the attribute variablevar 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 variablegl.enableVertexAttribArray(a_attribute);// Unbind the buffer objectgl.bindBuffer(gl.ARRAY_BUFFER, null);return true;
}

代码详解 

由于程序是顺序执行的,我们先来看一下main()函数(第30行)。首先,获取HUD的<canvas>元素(第33行)及其绘图上下文(第43行)。然后,在HUD的<canvas>元素上注册鼠标事件响应函数,该函数在PickObject.js中是注册到WebGL的<canvas>上的。这是因为HUD的<canvas>叠在WebGL的<canvas>上面,鼠标点击事件是在HUD的<canvas>上触发的。

tick()函数不仅需要调用draw()函数绘制三维场景(第96行),还要调用draw2D()函数绘制HUD信息(第95行)。

draw2D()函数接收两个参数,二维绘图上下文ctx和立方体的当前角度currentAngle(第184行)。该函数首先调用clearRect()方法,传入<canvas>的左上角坐标、宽度和高度,清空绘图区;然后绘制了一个空心的三角形:定义路径,指定颜色,并调用stroke()方法完成绘制(第187~191行);接着,绘制了一些文本:同样指定字体和颜色,并调用fillText()方法完成绘制(第193~198行)。fillText()函数接收三个参数,第1个参数是将要绘制的文本字符串,第2个和第3个参数绘制文本位置的x和y坐标。最后一行文本还显示了立方体的当前角度currentAngle,我们用Math.floor()方法截去了其小数部分。注意,和WebGL的<canvas>一样,HUD的<canvas>也需要在每一帧重绘,因为当前的角度一直在变化。

在网页文字上方显示三维物体

如果了解了实现HUD效果的原理,那么在网页上方显示三维物体就非常简单了。示例程序3DoverWeb把用来实现WebGL绘图的<canvas>叠置于网页上方,同时设置背景色为透明,程序的运行效果如下图所示。

代码详解 

3DoverWeb.js几乎与PickObject.js完全相同,只有一处很小的改动,就是将背景色的α值从1.0改为0.0(第55行)。 

将背景颜色的值设为0.0,WebGL <canvas>就会变成透明的,用户就可以透过它看到网页上的内容。你也可以试试将该α值改成0.0和1.0之间的某个值,<canvas>就会变成半透明的。 

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

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

相关文章

Postman 的使用教程(详细)

Postman 使用教程 1. 是什么 Postman 是一个接口测试工具软件&#xff0c;可以帮助开发人员管理测试接口。 官网&#xff1a;https://www.getpostman.com/ 2. 安装 建议通过官网下载安装&#xff0c;不要去那些乱七八糟的下载平台&#xff0c;或者留言获取 官网下载地址&am…

package中添加一条命令,用来自动选择包管理器进行依赖安装

package中添加一条命令,用来自动选择包管理器进行依赖安装 前提: 当前项目为vite项目,所以直接使用import导入模块 package.json中的scripts添加 "scripts": {"start": "node scripts/init.js"...},文件目录为 init.js的文件为 import { e…

antd-design-vue Table组件全局配置(分页器...)

描述&#xff1a;该框架许多默认配置好像还不支持&#xff0c;一般都是挨个使用挨个配置。我的项目中也遇到了类似的情况&#xff0c;但是当需求发生变化时&#xff0c;代码所有的组件使用则都需要修改&#xff0c;这种方式真的很不礼貌。 《我为了一口醋包了顿饺子》 需求是将…

Canal 实现MySQL与Elasticsearch7数据同步

1 工作原理 canal 模拟 MySQL slave 的交互协议&#xff0c;伪装自己为 MySQL slave &#xff0c;向 MySQL master 发送 dump协议 MySQL master 收到 dump 请求&#xff0c;开始推送 binary log 给 slave (即 canal ) canal 解析 binary log 对象(原始为 byte 流) 优点&…

tensorflow基础

windows安装tensorflow anaconda或者pip安装tensorflow&#xff0c;tensorflow只支持win7 64系统&#xff0c;本人使用tensorflow1.5版本&#xff08;pip install tensorflow1.5&#xff09; tensorboard tensorboard只支持chrome浏览器&#xff0c;而且加载过程中可能有一段…

计算机竞赛 深度学习+opencv+python实现车道线检测 - 自动驾驶

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV56 数据集处理7 模型训练8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &am…

jmeter学习文档

JMeter学习&#xff08;一&#xff09;工具简单介绍 一、JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序&#xff0c;被设计为用于测试客户端/服务端结构的软件(例如web应用程序)。它可以用来测试静态和动态资源的性能&#xff0c;例如&#xff1a;静态文件&#xff0c;J…

BaseMapper 中的方法

BaseMapper 中的方法&#xff1a; 插入 int insert(T entity) - 插入一条记录。 删除 int deleteById(Serializable id) - 根据主键ID删除记录。 int deleteById(T entity) - 根据实体对象&#xff08;ID&#xff09;删除记录。 int deleteByMap(Map<String, Object> …

Easyui里的datagrid嵌入select下拉框

问题&#xff1a; 想使用datagird里嵌入select下拉框&#xff0c;并在提交form表单时获取datagrid选中的每行数据里的每个下拉框选中的值。 解决方案&#xff1a; 其中economicIssuesSelect使用下拉框&#xff0c;重点关注 initEconomicIssues(row)方法。这里的方法需要传递ro…

C语言基础知识点(八)联合体和大小端模式

以下程序的输出是&#xff08;&#xff09; union myun {struct { int x, y, z;} u;int k; } a; int main() {a.u.x 4;a.u.y 5;a.u.z 6;a.k 0;printf("%d\n", a.u.x); } 小端模式 数据的低位放在低地址空间&#xff0c;数据的高位放在高地址空间 简记&#xff…

微软(TTS)文本转语音服务API实现

此博客实现与java实现微软文本转语音&#xff08;TTS&#xff09;经验总结_java tts_${简简单单}的博客-CSDN博客之上&#xff0c;首先感谢博客源码的提供&#xff0c;本人在上面添加了一些详细的注释&#xff0c;方便大家跟好的理解和使用&#xff0c;毕竟我已经用原文调试了一…

云原生Kubernetes:pod进阶之资源管理与探针

目录 一、理论 1.pod的资源限制 2.健康检查&#xff08;探针Probe) 3.示例 二、实验 1.pod的资源限制 2.健康检查&#xff08;探针Probe) 三、问题 1.生成资源报错 2.api版本错误 3.echo N>/proc/sys/vm/drop_caches如何实现清理缓存 4.生成启动退出容器报错 5…

java版Spring Cloud+Mybatis+Oauth2+分布式+微服务+实现工程管理系统

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…

python教程:使用gevent实现高并发并限制最大并发数

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 import time import gevent from gevent.pool import Pool from gevent import monkey # 一&#xff0c;定义最大并发数 p Pool(20) # 二&#xff0c;导入gevent…

【Docker】华为云服务器安装 Docker 容器

简介 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。 容器是完全使用沙箱机…

知识图谱基本工具Neo4j使用笔记 五 :APOC插件安装及简单应用

文章目录 一、使用场景二、系统说明三、配置安装1. 插件下载2. 文件下载说明3. 版本对应4. 安装位置5. 修改配置文件6. 注意问题7. web端启动&#xff1a;测试 四、简单应用1. 编辑距离2. 基于编辑距离的相似度3. 模糊匹配 一、使用场景 APOC&#xff08;Awesome Procedures o…

基于movie lens-100k数据集的协同过滤算法实现

基于movie lens-100k数据集的协同过滤算法实现 数据集处理 基于用户的协同过滤算法的实现 基于物品的协同过滤算法的实现 数据集处理 import pandas as pdu_data pd.read_csv(D:/PyCharmWorkSpace/ml-100k/ml-100k/u.data) u_genre pd.read_csv(D:/PyCharmWorkSpace/ml-10…

如何批量为文件夹命名

如果你想要命名一些这样名字具有规律性的文件夹&#xff0c;当文件的数量增多&#xff0c;一个一个命名是非常耗费时间的。很容易想到&#xff0c;如果使用EXCEL&#xff0c;只需往下拉&#xff0c;就能很轻松的拉出1到5。那么&#xff0c;我们如何利用EXCEL来对文件夹进行快速…

LazadaAPI接口解析,实现获得lazada商品评论列表

Lazada是一个流行的跨境电商平台&#xff0c;它提供了API接口供开发者使用。要获取Lazada商品评论列表&#xff0c;您需要使用Lazada API接口并进行相应的请求。 以下是使用Lazada API接口获取商品评论列表的示例代码&#xff08;使用Python编写&#xff09;&#xff1a; pyth…

【Linux】系统编程线程互斥与同步(C++)

目录 【1】线程互斥 【1.1】进程线程间的互斥相关背景概念 【1.2】互斥量mutex 【1.3】互斥量实现原理探究 【1.4】RAII的加锁风格 【2】可重入VS线程安全 【2.1】概念 【2.2】常见的线程不安全的情况 【2.3】常见的线程安全的情况 【2.4】常见不可重入的情况 【2.5…