如何从零开始构建揭示计算机运行机制的3D GIF动画？

从0构建 3D GIF动画，看清计算机运行机制 在《从 0 构建 WAV 文件》中，我们通过了解wav文件的结构与格式，学会了如何用朴素的方式构建声音文件；在《从 2D 转 3D 的本质》中，我们领悟了游戏中所谓三维世界，不过是简单的投影。 今天我们将了解一个更加复杂但有趣的文件格式-GIF，在了解其本质的同时，我们将不依赖任何庞大的图形库（如 OpenGL、DirectX）或图像库（如 OpenCV、ImageMagick），仅凭 C++ 标准库，完成上一篇文章用python实现的旋转立方体并以GIF文件的方式呈现出来。 我们将进一步加深对计算机本质的理解：一切复杂的表象，归根结底都是“数学计算”与“数据存储”的结合。 1. GIF文件结构 相比于 WAV 文件的简单粗暴，GIF 的结构要精密得多，因为它天生是为了网络传输而设计的（包含了压缩机制）。 当我们用二进制视角观察 GIF 时，它是由一个个 数据块（Block） 组成的： 数据块 (Block Name) 中文名称 字节数 (Bytes) 作用与核心逻辑 Header 头标识 6 一般为 GIF89a，当然也有GIF87a,用于声明这是一个GIF文件，采用xx标准。 Logical Screen Descriptor 逻辑屏幕描述符 7 画布设定：定义图像总宽高、背景色索引及是否使用全局调色板。 Global Color Table 全局颜色表 3 × N 颜料盘：存储 RGB 颜色（如 00 FF 00），N 为颜色数（最大256）。 默认使用RGB颜色时，每个颜色均采用3个字节存储 Application Extension 应用程序扩展 19 (通常) 最常用的是 Netscape 扩展，用于“循环播放次数”。 Graphic Control Extension 图形控制扩展 8 播放控制：定义每一帧的延迟时间（动画快慢）和透明色。 Image Descriptor 图像描述符 10 帧属性：定义当前这一帧在画布上的位置（x, y）和尺寸。 Image Data 图像数据 可变 用处如其名 Trailer 结束标识 1 终点：固定为 0x3B (分号)，标志文件彻底结束。 其中，最重要的就是图像数据了，其他的块用于规定这些图像数据应当如何呈现到我们眼中或是告知文件的开始结束，因此对于我们来说，其他块基本上都有固定模板，只有图像数据需要我们自己定义。 2.LZW-GIF强制使用的图像压缩算法 搞定了GIF的文件结构，接下来就需要我们解决另一个拦路虎，LZW——一个经典的无损图像压缩算法，为了解决他，我们可以从他的原理入手。 LZW通过为复杂数据构建简单索引来减少存储的数据量，这一点是朴素的哈希算法，当然，这一算法的发明者通过一套特殊的规则使得其他人可以直接通过索引数据反推出复杂数据，而在GIF中，则是GIF发明公司将他所规定的规则写好，编写GIF的人根据这一套规则构建数据，然后其他人直接使用套用了这一套规则的解码器解码，便能将数据还原成原来的样子。 GIF的解码器又是如何读取数据的呢？解码器初始时一次性读取9位数据，然后从字典中添加这一对应关系，根据GIF规范，一旦字典里的条目达到 512 个，解码器就会自动将读取位宽从 9 位增加到 10 位。如果我们直接存放数据，那么结果就是数据读取错位，解码出来的内容就会与我们想象中的不一样，如果我们想要让他的数据读取正常，通常做法就是：我们构建一个同步状态机，即模拟GIF解码器读取数据的过程写入数据，构建一个字典，以相同的标准增加写入位宽，从而让解码器读取时能正确读取。但是这一过程看着就十分繁琐，能不能用一个简单的方法来让解码器正常读取数据呢？ 3.解决方案 GIF 协议中有一个特殊的指令叫 Clear Code（清除代码，值为256）。它的作用是告诉解码器：“嘿，把之前的字典都忘了吧，我们重新开始。” 利用这一点，我们可以在代码中采用了一种偷鸡的策略： 我们不尝试去寻找复杂的重复模式。 我们每写入一小段像素（例如 125 个），就立刻发送一个 Clear Code。 这强制让 LZW 字典始终处于“初始状态”。在初始状态下，LZW 的编码就等同于直接输出像素的颜色索引值。 现在，让我们来实现他 4. 构建3d立方体 在上一篇关于 3D 本质的文章中，我们推导出了两个核心公式。在这个程序中，我们将直接把它们转化为 C++ 代码。 旋转公式 为了让立方体动起来，我们需要每一帧都改变顶点的 \((x, y, z)\) 坐标。