您现在的位置是:首页 > 正文

webgl - 3- 绘制三角形(上)

2024-01-30 19:43:54阅读 0

三角形是一个最简单,稳定的面,webgl中的三维模型都是由三角形面组成的。

本章节目标:

1.理解多点绘图原理
2.可以绘制三角形,并将其组合成多边形。

知识点:

  1. 换缓冲区对象
  2. 点,线,面图像

第一章webgl的绘图方式

先看下webgl是怎么绘图的:
1.绘制多点:
请添加图片描述

  1. 如果是线,就连接点成线

请添加图片描述

  1. 如果是面,那就在图形内部,逐便元填色

请添加图片描述
webgl绘图的方式就是这么简单,接下来就说一下这个绘图方式在程序中是如何实现的。

第2章:绘制多点:

在webgl 里所有的图形都是由顶点连接而成的,咱们就先画三个可以构成三角形的点。

现在要画的多点是可以被webgl加工成线,面的。

绘制多点的整体步骤:

  1. 建立着色器源文件
<script id="vertexShader" type="x-shader/x-vertex">
       attribute vec4 a_Position;
       void main(){
           gl_Position = a_Position;
           gl_PointSize = 20.0;
       }
   </script>
   <script id="fragmentShader" type="x-shader/x-fragment">
       void main(){
           gl_FragColor=vec4(1.0,1.0,0.0,1.0);
       }
   </script>
  1. 获取webgl上下文
  const canvas = document.getElementById('canvas');
   canvas.width=window.innerWidth;
   canvas.height=window.innerHeight;
   const gl = canvas.getContext('webgl');
  1. 初始化着色器
 const vsSource = document.getElementById('vertexShader').innerText;
   const fsSource = document.getElementById('fragmentShader').innerText;
   initShaders(gl, vsSource, fsSource);
  1. 设置顶点点位
  const vertices=new Float32Array([
    // 一行是一个顶点数据(x, y, z)
       0.0,  0.1,
       -0.1,-0.1,
       0.1, -0.1
   ])
   const vertexBuffer=gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
   gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
   const a_Position=gl.getAttribLocation(gl.program,'a_Position');
   gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
   gl.enableVertexAttribArray(a_Position);
  1. 清理画布
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
  1. 绘图
   gl.drawArrays(gl.POINTS, 0, 3);

效果如下:
请添加图片描述

接下来对第4步进行详细的讲解:

在用js定点位的时候,肯定是要建立一份顶点数据的,这份顶点数据是给谁的呢?肯定是给着色器的,因为着色器需要这份顶点数据绘图。
然而,我们在js中建立顶点数据,着色器肯定是拿不到的,这是语言不通导致的。

为了解决这个问题,我们在js中建立顶点数据,着色器肯定是拿不到的,这是语言不通导致的。

为了解决这个问题,webgl 系统就建立了一个能翻译双方语言的缓冲区。js 可以用特定的方法把数据存在这个缓冲区中,着色器可以从缓冲区中拿到相应的数据。

接下来就看下这个缓冲区是如何建立的,着色器又是吐核从中拿到数据的。

1.建立顶点数据,两个浮点数据构成一个顶点,分别代表x,y值。

const vertices=new Float32Array([
    //x    y
    0.0,  0.1, //顶点
    -0.1,-0.1, //顶点
    0.1, -0.1  //顶点
])

现在上面的这些顶点数据是存储在js缓冲区里面的,着色器拿不到,所以需要建立一个着色器和js都能进入的公共区。

2.建立缓冲区:

const vertexBuffer=gl.createBuffer();

现在上面这个换成区是独立存在的,它只是一个空着的仓库,和谁都没有关系。解析来咱们就和着色器建立连接。

3.绑定缓冲区对象

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

gl.bindBuffer(target,buffer) 绑定缓冲区

  • target 要把缓冲区放在webgl 系统中的什么位置
  • buffer 缓冲区

着色器对象在执行initShaders()初始化方法的时候,已经被写入webgl上下文对象的gl中了。

当缓冲区和着色器建立了绑定关系,我们就可以往这块空间写入数据了。

4.往缓冲区对象中写入对象。

gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

bufferData(target, data, usage) 将数据写入缓冲区。

  • target 要把缓冲区放在webgl 系统中的什么位置
  • data 数据
  • usage 向缓冲区写入数据的方式,咱们在这里先知道 gl.STATIC_DRAW 方式即可,它是向缓冲区中一次性写入数据,着色器会绘制多次。

现在着色器虽然绑定了缓冲区,可以访问里面的数据了,但是我们还得让着色器知道这个仓库是给哪个变量的,比如咱们这里用于控制点位的attribute 变量。这样做是为了提高绘图效率。

5.将缓冲区对象分配给attribute变量

const a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);

gl.vertexAttribPointer(local,size,type,normalized,stride,offset) 将缓冲区对象分配给attribute 变量

  • local attribute变量
  • size 顶点分量的个数,比如我们的vertices 数组中,两个数据表示一个顶点,那咱们就写2
  • type 数据类型,比如 gl.FLOAT 浮点型
  • normalized 是否将顶点数据归一
  • stride 相邻两个顶点间的字节数,我的例子里写的是0,那就是顶点之间是紧挨着的
  • offset 从缓冲区的什么位置开始存储变量,我的例子里写的是0,那就是从头开始存储变量

到了这里,着色器就知道缓冲区的数据是给谁的了。因为咱们缓冲区里的顶点数据是数组,里面有多个顶点。所以我们得开启一个让着色器批量处理顶点数据的属性。默认着色器只会一个一个的接收顶点数据,然后一个一个的绘制顶点。

6.开启顶点数据的批处理功能。

gl.enableVertexAttribArray(a_Position);
  • location attribute变量

7.绘图:

gl.clearColor(0.0, 0.0, 1.0)
gl.clear()
gl.drawArrays(gl.POINTS, 0, 3)

drawArrays(mode,first,count)

  • mode:绘图模式,比如: gl.POINTS 画点
  • first从哪个顶点开始绘制
  • count要画多少个顶点

完整代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>绘制多点</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      #canvas {
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      void main(){
          //点位
          gl_Position=a_Position;
          //尺寸
          gl_PointSize=50.0;
      }
    </script>
    <!-- 片元着色器 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
      void main(){
          gl_FragColor=vec4(1,1,0,1);
      }
    </script>
    <script type="module">
      import { initShaders } from "../jsm/Utils.js";

      const canvas = document.querySelector("#canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 获取着色器文本
      const vsSource = document.querySelector("#vertexShader").innerText;
      const fsSource = document.querySelector("#fragmentShader").innerText;

      //三维画笔
      const gl = canvas.getContext("webgl");

      //初始化着色器
      initShaders(gl, vsSource, fsSource);

      //如何向attribute 变量中写入多点,并绘制多点
      //顶点数据
      const vertices = new Float32Array([0, 0.2, -0.2, -0.1, 0.2, -0.1,0.4,0.2]);
      //缓冲对象
      const vertexBuffer = gl.createBuffer();
      //绑定缓冲对象
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      //写入数据
      gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW)
      //获取attribute 变量
      const a_Position=gl.getAttribLocation(gl.program, 'a_Position')
      //修改attribute 变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
      //赋能-批处理
      gl.enableVertexAttribArray(a_Position)

      //声明颜色 rgba
      gl.clearColor(0, 0, 0, 1);
      //刷底色
      gl.clear(gl.COLOR_BUFFER_BIT);

      //绘制顶点
      gl.drawArrays(gl.POINTS, 0, 4);
    </script>
  </body>
</html>

效果如下:
请添加图片描述

绘制图形

1.绘制三角面

我们在之前绘制多点的基础上做一下修改。

1.顶点着色器中的gl_PointSize=20.0不要,因为这个属性是控制顶点大小的,咱们已经不需要显示顶点了。

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    void main(){
        gl_Position = a_Position;
        //gl_PointSize = 20.0;
    }
</script>

2.在js中修改绘图方式

// gl.drawArrays(gl.POINTS, 0, 3);

// gl.TRIANGLES 就是绘制三角面
gl.drawArrays(gl.TRIANGLES, 0, 3);

看效果:
请添加图片描述

webgl既然可以画面了,那么可以画线么?这个是必须可以的,我么可以在gl.drawArrays() 这个方法的第一个参数进行设置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>绘制三角面</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      #canvas {
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      void main(){
          //点位
          gl_Position=a_Position;
          //尺寸
          //gl_PointSize=50.0;
      }
    </script>
    <!-- 片元着色器 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
      void main(){
          gl_FragColor=vec4(1,1,0,1);
      }
    </script>
    <script type="module">
      import { initShaders } from "../jsm/Utils.js";

      const canvas = document.querySelector("#canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 获取着色器文本
      const vsSource = document.querySelector("#vertexShader").innerText;
      const fsSource = document.querySelector("#fragmentShader").innerText;

      //三维画笔
      const gl = canvas.getContext("webgl");

      //初始化着色器
      initShaders(gl, vsSource, fsSource);

      //如何向attribute 变量中写入多点,并绘制多点
      //顶点数据
      const vertices = new Float32Array([0, 0.3, -0.2, -0.1, 0.2, -0.1]);
      //缓冲对象
      const vertexBuffer = gl.createBuffer();
      //绑定缓冲对象
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      //写入数据
      gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW)
      //获取attribute 变量
      const a_Position=gl.getAttribLocation(gl.program, 'a_Position')
      //修改attribute 变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
      //赋能-批处理
      gl.enableVertexAttribArray(a_Position)

      //声明颜色 rgba
      gl.clearColor(0, 0, 0, 1);
      //刷底色
      gl.clear(gl.COLOR_BUFFER_BIT);

      //绘制顶点
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
  </body>
</html>

2.基本图形

gl.drawArrays(mode,first,count) 方法可以绘制一下图形:

mode为一下参数:

  • POINTS 可视的点
  • LINES 单独线段
  • LINE_STRIP 线条
  • LINE_LOOP 闭合线条
  • TRIANGLES 单独三角形
  • TRIANGLE_STRIP 三角带
  • TRIANGLE_FAN 三角扇

POINTS就是绘制一个个可以看到的点。

2.1点的绘制

请添加图片描述

上面6个点的绘制顺序是:v0, v1, v2, v3, v4, v5

2.线的绘制

1.LINES单独的线段

请添加图片描述
上面3条有向线段的绘制顺序是:
v0>v1

​v2>v3

​v4>v5

  1. LINE_STRIP线条

请添加图片描述
上面线条的绘制顺序是:v0>v1>v2>v3>v4>v5

3.LINE_LOOP闭合线条
请添加图片描述
上面线条的绘制顺序是:v0>v1>v2>v3>v4>v5>v0

代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>线</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      #canvas {
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      void main(){
          //点位
          gl_Position=a_Position;
          //尺寸
          //gl_PointSize=50.0;
      }
    </script>
    <!-- 片元着色器 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
      void main(){
          gl_FragColor=vec4(1,1,0,1);
      }
    </script>
    <script type="module">
      import { initShaders } from "../jsm/Utils.js";

      const canvas = document.querySelector("#canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 获取着色器文本
      const vsSource = document.querySelector("#vertexShader").innerText;
      const fsSource = document.querySelector("#fragmentShader").innerText;

      //三维画笔
      const gl = canvas.getContext("webgl");

      //初始化着色器
      initShaders(gl, vsSource, fsSource);

      //如何向attribute 变量中写入多点,并绘制多点
      //顶点数据
      const vertices = new Float32Array([0, 0.3, -0.2, -0.1, 0.2, -0.1,0.4,0.3]);
      //缓冲对象
      const vertexBuffer = gl.createBuffer();
      //绑定缓冲对象
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      //写入数据
      gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW)
      //获取attribute 变量
      const a_Position=gl.getAttribLocation(gl.program, 'a_Position')
      //修改attribute 变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
      //赋能-批处理
      gl.enableVertexAttribArray(a_Position)

      //声明颜色 rgba
      gl.clearColor(0, 0, 0, 1);
      //刷底色
      gl.clear(gl.COLOR_BUFFER_BIT);

      //绘制顶点
      // gl.drawArrays(gl.LINES, 0, 4);
      // gl.drawArrays(gl.LINE_STRIP, 0, 4);
      gl.drawArrays(gl.LINE_LOOP, 0, 4);
    </script>
  </body>
</html>

画点的对应关系:gl.drawArrays(gl.LINES, 0, 4);
请添加图片描述
LINE_STRIP效果如下:
请添加图片描述
LINE_LOOP闭合的效果如下:
请添加图片描述

2-3-面的绘制

对于面的绘制,我们首先要知道一个原理:

  • 面有正反两面。
  • 面向我们的面,如果是正面,那它必然是逆时针绘制的;
  • 面向我们的面,如果是反面,那它必然是顺时针绘制的;

接下来,我们看下面的三种绘制方法:

1.TRIANGLES 单独三角形
请添加图片描述

上面2个面的绘制顺序是:
​ v0>v1>v2

​ v3>v4>v5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>独立三角形</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      #canvas {
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      void main(){
          //点位
          gl_Position=a_Position;
          //尺寸
          //gl_PointSize=50.0;
      }
    </script>
    <!-- 片元着色器 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
      void main(){
          gl_FragColor=vec4(1,1,0,1);
      }
    </script>
    <script type="module">
      import { initShaders } from "../jsm/Utils.js";

      const canvas = document.querySelector("#canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 获取着色器文本
      const vsSource = document.querySelector("#vertexShader").innerText;
      const fsSource = document.querySelector("#fragmentShader").innerText;

      //三维画笔
      const gl = canvas.getContext("webgl");

      //初始化着色器
      initShaders(gl, vsSource, fsSource);

      //如何向attribute 变量中写入多点,并绘制多点
      //顶点数据
      const vertices = new Float32Array([
        0, 0.3, 
        -0.2, -0.1,
         0.2, -0.1,
         
         0.4,0.3,
         0.2,-0.1,
         0.6,-0.1,
        ]);
      //缓冲对象
      const vertexBuffer = gl.createBuffer();
      //绑定缓冲对象
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      //写入数据
      gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW)
      //获取attribute 变量
      const a_Position=gl.getAttribLocation(gl.program, 'a_Position')
      //修改attribute 变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
      //赋能-批处理
      gl.enableVertexAttribArray(a_Position)

      //声明颜色 rgba
      gl.clearColor(0, 0, 0, 1);
      //刷底色
      gl.clear(gl.COLOR_BUFFER_BIT);

      //绘制顶点
      gl.drawArrays(gl.TRIANGLES, 0, 6);
    </script>
  </body>
</html>

效果:
请添加图片描述

2.TRIANGLE_STRIP 三角带
请添加图片描述
上面4个面的绘制顺序是:

v0>v1>v2

以上一个三角形的第二条边+下一个点为基础,以和第二条边相反的方向绘制三角形

v2>v1>v3

以上一个三角形的第三条边+下一个点为基础,以和第二条边相反的方向绘制三角形

v2>v3>v4

以上一个三角形的第二条边+下一个点为基础,以和第二条边相反的方向绘制三角形

v4>v3>v5

规律:

第一个三角形:v0>v1>v2

第偶数个三角形:以上一个三角形的第二条边+下一个点为基础,以和第二条边相反的方向绘制三角形

第奇数个三角形:以上一个三角形的第三条边+下一个点为基础,以和第二条边相反的方向绘制三角形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>三角带</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      #canvas {
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      void main(){
          //点位
          gl_Position=a_Position;
          //尺寸
          //gl_PointSize=50.0;
      }
    </script>
    <!-- 片元着色器 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
      void main(){
          gl_FragColor=vec4(1,1,0,1);
      }
    </script>
    <script type="module">
      import { initShaders } from "../jsm/Utils.js";

      const canvas = document.querySelector("#canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 获取着色器文本
      const vsSource = document.querySelector("#vertexShader").innerText;
      const fsSource = document.querySelector("#fragmentShader").innerText;

      //三维画笔
      const gl = canvas.getContext("webgl");

      //初始化着色器
      initShaders(gl, vsSource, fsSource);

      //如何向attribute 变量中写入多点,并绘制多点
      //顶点数据
      const vertices = new Float32Array([
        0, 0.3, 
        -0.2, -0.1,
         0.2, -0.1,
         0.4,0.3,
         0.6,-0.1,
        ]);
      //缓冲对象
      const vertexBuffer = gl.createBuffer();
      //绑定缓冲对象
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      //写入数据
      gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW)
      //获取attribute 变量
      const a_Position=gl.getAttribLocation(gl.program, 'a_Position')
      //修改attribute 变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
      //赋能-批处理
      gl.enableVertexAttribArray(a_Position)

      //声明颜色 rgba
      gl.clearColor(0, 0, 0, 1);
      //刷底色
      gl.clear(gl.COLOR_BUFFER_BIT);

      //绘制顶点
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 5);
    </script>
  </body>
</html>

效果如下:
请添加图片描述
请添加图片描述

3.TRIANGLE_FAN 三角扇

请添加图片描述

上面四个面的绘制顺序是:
上面四个面的绘制顺序是:

​ v0>v1>v2

以上一个三角形的第三条边+下一个点为基础,按照和第三条边相反的顺序,绘制三角形

​ v0>v2>v3

以上一个三角形的第三条边+下一个点为基础,按照和第三条边相反的顺序,绘制三角形

​ v0>v3>v4

以上一个三角形的第三条边+下一个点为基础,按照和第三条边相反的顺序,绘制三角形

​ v0>v4>v5

关于webgl 可以绘制的基本图像就说到这,接下来咱们画个矩形面,练一下手。

gl.drawArrays(gl.TRIANGLE_FAN, 0, 6);

// gl.drawArrays(gl.TRIANGLE_FAN, 0, 5);

请添加图片描述

请添加图片描述

3.实例 - 绘制矩形

我们要知道,webgl 可以绘制的面只有三角面,所以咱们要绘制矩形面的话,只能用两个三角形去拼。

接下来看下如何用三角形拼矩形。

4-1三角形拼接矩形的方法

我们可以用TRIANGLE_STRIP三角带拼矩形。

下面的两个三角形分别是:

v0>v1>v2

v2>v1>v3

请添加图片描述

4-2 代码实现
const vertices=new Float32Array([
	// v0
    -0.2, 0.2,
    // v1
    -0.2,-0.2,
    // v2
    0.2, 0.2,
    // v3
    0.2,-0.2,
])

上面2个浮点分别代表一个顶点,依次是:v0、v1、v2、v3

2.绘图

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

上面参数的意思分别是:三角带、从第0个顶点开始画、画四个。

请添加图片描述
以上就是关于矩形的画法。

如果把:TRIANGLE_STRIP 三角带变成TRIANGLE_FAN 扇形

画出来了一个三角带的样子如下:
请添加图片描述
它的绘图顺序是:
v0>v1>v2
v0>v2>v3

请添加图片描述

 gl.drawArrays(gl.TRIANGLES, 0, 4);

网站文章

  • SystemJS

    SystemJS

    最近的工作有用到SystemJS,在这里对SystemJS的理解做个总结和记录吧,备忘。什么是SystemJSSystemJS是一个可运行于浏览器端的模块加载器,是一个polifill,可...

    2024-01-30 19:43:46
  • C/S客户端调用RESTful API帮助类

    文章目录 目录 文章目录 简介 一、源码 1.HttpClientHelper帮助类 2.ContentType枚举类 3.表单Form元素类 4.HttpClient、MultipartFormDa...

    2024-01-30 19:43:39
  • API拦截—实现Ring3全局HOOK

    魏滔序注:本转载内容仅用来技术研究,请勿于损人害己之用。 首先来解释一下这次的目标。由于windows的copy-on-write机制(Ring0下可以用CR0寄存器关掉它),Ring3下的HOOK只对当前进程有效,其他进程的API还是正常的。这就是说我们必须枚举进程,然后对每个Ring3进程执行一遍HOOK操作。但是,系统中总有新进程产生,对于这些新进程我们怎么处理

    2024-01-30 19:43:09
  • 北京工作三年程序员,2018年4~5月面试经历

    1、新东方 04_19 技术面试,两轮,地点:中关村地铁站E口,鼎好大厦6层, 面试官:龙彦俊,李经理 面试时间:2018_04_19_10:30(提前到了45分钟) 1、自我介绍 2、项目介绍 3、LiveChat项目,第一个 4、海南海航项目,第二个,最熟悉 5、技术: 数据库 mysql mysql如何做主从/主主复制的,java程序如何操作的? mysql主从...

    2024-01-30 19:43:01
  • spring boot 项目练习

    spring boot 项目练习

    spring boot官方文档:https://docs.spring.io/spring-boot/docs/current/reference/html/ 浏览器发送hello请求,服务器接受请求并处理,响应Hello World字符串; 1.创建一个maven工程 2.导入依赖 org.springframework.boot sprin

    2024-01-30 19:42:54
  • “注释: 爱恨交织的双重标准?解析注释在代码开发中的作用。”

    “注释: 爱恨交织的双重标准?解析注释在代码开发中的作用。”

    代码注释是程序员在开发过程中经常会遇到的问题之一。有些程序员认为注释非常必要,因为它们可以解释代码中的意图和功能。但是也有一些程序员不喜欢写注释,因为他们认为代码应该是自描述的,不应该需要注释来阐明自己的意图。不管是哪种立场,都有它的道理。在这篇文章中,我将探讨程序员对注释的看法,并分享我对于不写注释的程序员的看法。

    2024-01-30 19:42:25
  • 块级作用域和函数作用域

    块级作用域和函数作用域

    函数作用域与块级作用域 函数作用域:在函数内部声明的变量只能影响到变量所在函数体本身,无法从外部对函数内部的变量进行调用,被称为‘函数作用域’ 块级作用域:ES6 引入了 let 和 const 关键...

    2024-01-30 19:42:18
  • [AcWing] 148. 合并果子(C++实现)贪心---哈夫曼树例题

    [AcWing] 148. 合并果子(C++实现)贪心---哈夫曼树例题

    [AcWing] 148. 合并果子(C++实现)贪心---哈夫曼树例题1. 题目2. 读题(需要重点注意的东西)3. 解法4. 可能有帮助的前置习题5. 所用到的数据结构与算法思想6. 总结 1. ...

    2024-01-30 19:42:11
  • 计算机级C语言实例:使用C#编写的简单计算器

    然后,使用Console.ReadLine()函数接收用户输入的两个数字和运算符,并将它们转换为相应的数据类型。如有任何疑问,请随时提问。在本篇文章中,我们将使用C#编写一个简单的计算器应用程序。最后...

    2024-01-30 19:42:06
  • IL伪指令

    IL伪指令 在IL程序中,以“.”开头的指令代表是将要传输给汇编工具的指令,即伪指令。该指令要汇编工具执行某些具体操作。.assembly <程序集名称> {}//指明IL码属于那个程序集。.method 修饰符 返回值 名称(参数列表){...

    2024-01-30 19:41:26