WebGL HUD（平视显示器）

目录

HUD（平视显示器）

如何实现HUD

示例程序（HUD.html） 

示例程序（HUD.js） 

代码详解 

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

代码详解 

HUD（平视显示器）

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

本例的三维部分取自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步，在＜canvas＞上绘制了一个三角形。在第2步中，由于HUD的＜canvas＞叠在WebGL的＜canvas＞上面，所以鼠标点击事件是在前者上触发的，需要把事件响应函数注册到前者上。本例的顶点着色器和片元着色器与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 ='#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; // 20度每秒
function main() {var canvas = document.getElementById('webgl'); // webgl canvasvar hud = document.getElementById('hud'); // 2d canvasvar gl = getWebGLContext(canvas); // webgl 上下文var ctx = hud.getContext('2d'); // canvas 上下文if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) returnvar n = initVertexBuffers(gl);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.enable(gl.DEPTH_TEST);var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');var u_Clicked = gl.getUniformLocation(gl.program, 'u_Clicked');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); // 将false传给u_Clickedvar currentAngle = 0.0; // 当前旋转角度hud.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) { // 检查鼠标是否在canvas内// 如果按下的位置在＜canvas＞内，则更新表面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 () {   currentAngle = animate(currentAngle);draw2D(ctx, currentAngle); // Draw 2Ddraw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);requestAnimationFrame(tick, canvas);};tick();
}function initVertexBuffers(gl) {//    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]);var 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]);if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) return -1; // Coordinatesif (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')) return -1;      // Color Informationvar indexBuffer = gl.createBuffer();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);  // 画红色三角形draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);var pixels = new Uint8Array(4); // 存储像素值的数组gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);if (pixels[0] == 255) picked = true; // 如果红色=255，则单击立方体gl.uniform1i(u_Clicked, 0);  // 将false传递给uClickd（绘制具有指定颜色的立方体）draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);return picked;
}var g_MvpMatrix = new Matrix4(); // 模型视图投影矩阵
function draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix) {// 计算模型视图投影矩阵并将其传递给u_MvpMatrixg_MvpMatrix.set(viewProjMatrix);g_MvpMatrix.rotate(currentAngle, 1.0, 0.0, 0.0); 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);    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); 
}function draw2D(ctx, currentAngle) {ctx.clearRect(0, 0, 400, 400); // 清除 <hud>// 用白色的线条绘制三角形ctx.beginPath();                      // 开始绘制ctx.moveTo(120, 10); ctx.lineTo(200, 150); ctx.lineTo(40, 150);ctx.closePath();ctx.strokeStyle = 'rgba(255, 255, 255, 1)'; // 设置线条颜色ctx.stroke();                           // 用白色的线条绘制三角形// 绘制白色的文本ctx.font = '18px "Times New Roman"';ctx.fillStyle = 'rgba(255, 255, 255, 1)'; // 设置文本的颜色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);ctx.fillText('Current Angle: ' + Math.floor(currentAngle), 40, 240);
}var last = Date.now(); 
function animate(angle) {var now = Date.now(); var elapsed = now - last;last = now;var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;return newAngle % 360;
}function initArrayBuffer(gl, data, num, type, attribute) {var buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);var a_attribute = gl.getAttribLocation(gl.program, attribute);gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);gl.enableVertexAttribArray(a_attribute);gl.bindBuffer(gl.ARRAY_BUFFER, null);return true;
}

代码详解 

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

tick（）函数不仅需要调用draw（）函数绘制三维场景（第56行），还要调用draw2D（）函数绘制HUD信息（第55行）。

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

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

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

代码详解 

3DoverWeb.js几乎与PickObject.jsWebGL 选中物体_山楂树の的博客-CSDN博客完全相同，只有一处很小的改动，就是将背景色的α值从1.0改为0.0（第55行）。 

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

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

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

相关文章

展示日志log4.properties

展示日志log4.properties

log4.properties 1.log4.properties 此时文件主要用于展示日志的输出的级别的信息。 # Set root category priority to INFO and its only appender to CONSOLE. #log4j.rootCategoryINFO, CONSOLE debug info warn error fatal log4j.rootCategoryinfo, CONSO…
阅读更多...
算法通过村第九关-二分(中序遍历)黄金笔记|二叉搜索树

算法通过村第九关-二分(中序遍历)黄金笔记|二叉搜索树

文章目录 前言1. 有序数组转二叉搜索树2. 寻找连个正序数组的中位数总结 前言 提示&#xff1a;有时候&#xff0c;我感觉自己一辈子活在两个闹钟之间&#xff0c;早上的第一次闹钟&#xff0c;以及5分钟之后的第二次闹钟。 --奥利弗萨克斯《意识的河流》 每个专题都有简单题&a…
阅读更多...
netty快速入门基本用法

netty快速入门基本用法

1、netty的基本工作流程 在netty中存在以下的核心组件&#xff1a; ServerBootstrap&#xff1a;服务器端启动辅助对象&#xff1b;Bootstrap&#xff1a;客户端启动辅助对象&#xff1b;Channel&#xff1a;通道&#xff0c;代表一个连接&#xff0c;每个Client请对会对应到…
阅读更多...
快速排序与代码

快速排序与代码

快速排序&#xff08;Quicksort&#xff09;是一种常用的排序算法&#xff0c;它基于分治的思想。 时间复杂度&#xff1a;O&#xff08;nlogn&#xff09; 空间复杂度&#xff1a;O&#xff08;logn&#xff09; 快速排序的基本思想如下&#xff1a; 选择一个元素作为基准&a…
阅读更多...
文档升级 | iTOP-RK3568开发板ADB工具的安装和使用

文档升级 | iTOP-RK3568开发板ADB工具的安装和使用

iTOP -RK3568开发板使用手册更新&#xff0c;后续资料会不断更新&#xff0c;不断完善&#xff0c;帮助用户快速入门&#xff0c;大大提升研发速度。 《iTOP-3568开发板ADB使用手册》进行了文档升级&#xff0c;对ADB工具的安装和使用进行了更全面的步骤介绍。 第1章 安装adb工…
阅读更多...
JMeter之脚本录制

JMeter之脚本录制

【软件测试面试突击班】如何逼自己一周刷完软件测试八股文教程&#xff0c;刷完面试就稳了&#xff0c;你也可以当高薪软件测试工程师&#xff08;自动化测试&#xff09; 前言&#xff1a; 对于一些JMeter初学者来说&#xff0c;录制脚本可能是最容易掌握的技能之一。…
阅读更多...
Java集成支付宝沙箱支付，详细教程（SpringBoot完整版）

Java集成支付宝沙箱支付，详细教程（SpringBoot完整版）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、开发前准备&#xff1f;二、使用步骤1、引入库2、配置在 application.yml 里面进行配置&#xff1a;3、alipay的java配置&#xff1a;AplipayConfig.java4、支付…
阅读更多...
安达发|APS排单软件中甘特图的应用

安达发|APS排单软件中甘特图的应用

近几年来&#xff0c;企业对生产效率和管理水平的要求越来越高。为了提高生产效率&#xff0c;降低生产成本&#xff0c;许多企业开始引入先进的生产计划与调度系统&#xff08;APS&#xff09;&#xff0c;实现生产过程的自动化、智能化管理。APS排产软件是一种能够根据企业的…
阅读更多...
Spring源码相关

Spring源码相关

总分结构回答&#xff0c;突出关键接口、类、方法名 run -> AbstractApplicationContext.refresh&#xff08;&#xff09;程序的入口 在IOC中的操作都是基于DefaultListableBeanFactory bd对象保存在map集合中 refresh方法宝包括了整个Spring的执行流程和bean的完整生命…
阅读更多...
解锁新机遇——易天欧洲ECOC通讯展预告，精彩即将开始!

解锁新机遇——易天欧洲ECOC通讯展预告，精彩即将开始!

九月初&#xff0c;第24届中国光博会落下帷幕&#xff0c;易天在展会上收获了来自同行和客户的高度满意。但易天发展和学习的脚步从未停歇。十月&#xff0c;易天将整装待发前赴英国参加2023第28届ECOC欧洲光通讯展。 展会简介 欧洲光纤通讯展是欧洲规模大的光纤通讯展会&…
阅读更多...
215 数组中的第K个最大元素

215 数组中的第K个最大元素

满足时间复杂度o(n)的方法&#xff1a; 快排的思想 class Solution{ public:int findKthLargest(vector<int>& nums,int k){return quickSelect(nums,k);} private:int quickSelect(vector<int>& nums,int k){//随机选择基数int privotnums[rand()%nums…
阅读更多...
verilog学习笔记（1）module实例化

verilog学习笔记（1）module实例化

兜兜转转又回来学硬件了&#xff0c;哎&#xff0c;命啊&#xff01; 我的答案&#xff08;有bug&#xff09;&#xff1a; module top_module ( input a, input b, output out );wire w1;wire w2;wire w3;mod_a mod_a_inst1(.in1(w1),.in2(w2),.out(w3) );assign w1 a…
阅读更多...
2023-Chrome插件推荐

2023-Chrome插件推荐

Chrome插件推荐 一键管理扩展 链接 https://chromewebstore.google.com/detail/lboblnfejcmcaplhnbkkfcienhlhpnni 介绍 一键开启、禁用Chrome插件。 Checker Plus for Gmail™ 链接 https://jasonsavard.com/zh-CN/Checker-Plus-for-Gmail https://chromewebstore.goo…
阅读更多...
不安全的反序列化

不安全的反序列化

文章目录 一、 序列化与反序列化1.1 引例1.2 序列化实例1.2.1 定义一个类1.2.2 创建对象1.2.3 反序列化1.2.4 对象注入 二、 漏洞何在2.1 漏洞触发2.1.1 有一个类2.1.2 有一个对象2.1.3 反序列化执行代码 2.2 为什么会这样 三、反序列化漏洞攻防3.1 PHP反序列化实例3.2 Java 反…
阅读更多...
计算机毕业设计 基于微信小程序的校园商铺系统的设计与实现 Java实战项目 附源码+文档+视频讲解

计算机毕业设计 基于微信小程序的校园商铺系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
【Java 基础篇】Java 模块化详解

【Java 基础篇】Java 模块化详解

Java 9引入了一项重要的功能&#xff1a;模块化&#xff08;Module System&#xff09;。模块化是一种将代码和资源封装到可重用和独立的单元中的方法&#xff0c;它有助于改善代码的可维护性、可重用性和安全性。本文将介绍Java模块化的基本概念、如何创建和使用模块以及一些最…
阅读更多...
AI数字人：最强声音驱动面部表情模型VideoReTalking

AI数字人：最强声音驱动面部表情模型VideoReTalking

目录 1 VideoReTalking论文解读 1.1 介绍 1.2 相关工作 1.2.1 视频编辑中的音频配音 1.2.2 基于音频的单图像面部动画 1.3 框架 1.3.1 语义引导重演网络 1.3.2 口型同步网络 1.3.3 身份感知增强网络 1.3.4 后期处理 1.4 训练 1.4.1 每个模块的训练 1.4.2 评估 1.…
阅读更多...
JSP ssm 零配件管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

JSP ssm 零配件管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java ssm 零配件管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用…
阅读更多...
注入之SQLMAP(工具注入)

注入之SQLMAP(工具注入)

i sqlmap是一个自动化的SQL注入工具&#xff0c;其主要功能是扫描&#xff0c;发现并利用给定的URL和SQL注入漏洞&#xff0c;其广泛的功能和选项包括数据库指纹&#xff0c;枚举&#xff0c;数据库提权&#xff0c;访问目标文件系统&#xff0c;并在获取操作权限时执行任…
阅读更多...
RabbitMQ生产故障问题分析

RabbitMQ生产故障问题分析

1. 问题引发 由某个服务BI-collector-xx队列出现阻塞&#xff0c;影响很整个rabbitMQ集群服务不可用&#xff0c;多个应用MQ生产者服务出现假死状态&#xff0c;系统影响面较广&#xff0c;业务影响很大。当时为了应急处理&#xff0c;恢复系统可用&#xff0c;运维相对粗暴的把…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023