绘制渲染引擎 - 把逻辑变为像素

2023-10-14 18:22:24

说起绘制，很多童鞋可能脑海中马上出现了画板(canvas)这个东西，如果我们把他想象成一个屏幕，那是不是所有的图形都可以靠 canvas 绘制出来呢？当然不是，canvas 并不负责真正的屏幕绘制。那么，我们屏幕上展示的内容究竟是怎么来的？

这一切要归功于一个神秘而强大的组织 - GPU(Graphics Processing Unit，图形处理器)。

GPU 是显卡的核心部分，它主要负责图形渲染。GPU 可以将各种图形指令快速地处理，并生成对应的像素。这些像素最终会显示在屏幕上。

如何绘制

当浏览器接收到一个 HTML 文档后，它会将其解析成一个 DOM 树。DOM 树中包含了页面中的所有元素及其属性。然后，浏览器会将 DOM 树传递给渲染引擎。

渲染引擎会根据 DOM 树和 CSS 样式表，计算出每个元素的布局信息。布局信息包括元素的位置、大小、颜色等。当布局信息计算完成后，渲染引擎就会将这些信息传递给 GPU。

GPU 会根据布局信息，生成对应的像素。这些像素最终会显示在屏幕上。

使用 JavaScript 进行绘制

JavaScript 是一种强大的编程语言，它可以用来操作 DOM 树和 CSS 样式表。因此，我们可以使用 JavaScript 来绘制图形。

要使用 JavaScript 进行绘制，我们可以使用 HTML5 的 <canvas> 标签。<canvas> 标签可以用来创建一个画布，我们可以在画布上使用 JavaScript 来绘制图形。

下面是一个简单的示例，演示如何使用 JavaScript 在画布上绘制一个矩形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

这段代码首先获取了画布元素。然后，它使用 getContext() 方法获取了画布的上下文。画布的上下文是一个对象，它包含了一些用于绘制图形的方法。

接下来，这段代码设置了填充样式为红色。然后，它使用 fillRect() 方法绘制了一个红色的矩形。矩形的左上角坐标是 (10, 10)，右下角坐标是 (110, 110)。

使用 WebGL 进行绘制

WebGL 是一个 JavaScript API，它可以用来直接访问 GPU。WebGL 可以用来绘制更复杂的图形，比如 3D 图形。

要使用 WebGL 进行绘制，我们需要使用 WebGL 的 JavaScript 库。WebGL 的 JavaScript 库可以在网上找到。

下面是一个简单的示例，演示如何使用 WebGL 在画布上绘制一个立方体：

var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");

// 定义立方体的顶点数据
var vertices = [
  -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 indices = [
  0, 1, 2, 0, 2, 3,
  4, 5, 6, 4, 6, 7,
  0, 4, 5, 0, 5, 1,
  1, 5, 6, 1, 6, 2,
  2, 6, 7, 2, 7, 3,
  3, 7, 4, 3, 4, 0
];

// 创建 WebGL 缓冲区
var vertexBuffer = gl.createBuffer();
var indexBuffer = gl.createBuffer();

// 将顶点数据和索引数据复制到 WebGL 缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// 创建 WebGL 着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 将着色器代码加载到 WebGL 着色器中
gl.shaderSource(vertexShader, vertexShaderSource);
gl.shaderSource(fragmentShader, fragmentShaderSource);

// 编译 WebGL 着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

// 创建 WebGL 着色器程序
var program = gl.createProgram();

// 将 WebGL 着色器附加到 WebGL 着色器程序中
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// 链接 WebGL 着色器程序
gl.linkProgram(program);

// 使用 WebGL 着色器程序
gl.useProgram(program);

// 获取 WebGL 着色器程序中的属性位置
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");

// 启用 WebGL 着色器程序中的属性位置
gl.enableVertexAttribArray(positionAttributeLocation);

// 将顶点数据绑定到 WebGL 着色器程序中的属性位置
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 绘制立方体
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);