我们大多数人每天都使用技术设备，它们是我们生活中必不可少的一部分。几十年前，当第一台计算机出现时，屏幕仅显示黑色和白色。如今，从手机到计算机再到技术设备，彩色显示是我们理所当然的。但是，从技术角度来看，有一个有趣的问题：如果计算机只能理解零，那么如何在我们的屏幕上显示彩色图像？在此博客文章中，我们将尝试解决这个基本问题，并详细介绍图像渲染管道的完整介绍，从存储在内存中的图像到在屏幕上显示。
数字图像的解剖
像素
在最原子的层面上，图像是由“像素”集合构造的，每个像素是数字图像中的一个点，一次可以完全显示一种颜色。在表示数字图像时，每个像素对应于“离散”空间中的一些“整数坐标”。 Simply speaking, we can find out the pixel value at the position like (10, 20) and not (10.1, 20) at a typical 2-dimensional image, and discrete space here means that we have a finite integer space to represent the image, like 1920×1080 pixels (where we have 1920 pixels horizontally — the width, and 1080 pixels vertically — the height).
正式地，我们可以定义如何在二维空间中的某些特定像素上找到特定值（颜色），如下所示：
[MATH] x in {0，1，2， ldots，w - 1 } text {表示水平位置} [/MATH]
[MATH] y in {0，1，2， ldots，H - 1 } text {表示垂直位置} [/MATH]
[数学] w text {是像素中图像的宽度} [/MATH]
[数学] h text {是像素中图像的高度} [/MATH]
[MATH] text {函数} f text {映射每个坐标对}（x，y） text {to color value} [/MATH]
在这里，[Math] x， text {and} y [/Math]必须是整数，其中[Math] x in [0，w - 1] text {and} y in [0，h – 1] [/Math]。当您尝试以一些相对较大的尺寸放大离散图像时，您可以更清楚地看到那些小正方形像素。然后，一旦我们拥有所有相关背景，我们将了解像素中的颜色格式。
物理与逻辑像素：临界区别
由于不同的设备具有不同的屏幕尺寸（即以英寸为单位），但这并不意味着较小的屏幕设备显示的像素少于较大的屏幕。 iPhone的屏幕分辨率为2556×1179像素，而标准监视器的分辨率通常为1920×1080像素。这些预定义的像素实际上是屏幕具有的物理像素，并且无法更改。这里重要的是“每英寸像素密度” ，这可以通过以下公式进行计算：
[MATH] 大{ text {ppi} = frac { sqrt {w^2 + h^2}}}} {d}}}}}}} [/MATH]
[MATH] text {w是水平像素的数量（width）} [/MATH]
[MATH] text {h是垂直像素的数量（高度）} [/MATH]
[数学] text {d是屏幕的对角线大小，英寸} [/MATH]
我们在这里使用[Math] SQRT {W^2 + H^2} [/MATH]，因为我们希望找到对角线像素长度（使用Pythagorean定理找到右三角形的斜边值）并将其除以屏幕尺寸。 PPI的值越高，图像质量越好，反之亦然。但是，我们还需要注意，简单地增加PPI并不一定意味着我们可以看到质量更好的图像，因为人眼有视觉输入的局限性。
那么逻辑像素呢？这种软件工程概念有助于在不同设备上保持一致的尺寸。例如，如果我对某些宽度为44px的按钮具有CSS样式，则这是逻辑像素，而不是物理像素。这意味着，根据设备像素比（DPR）的不同，它可以比我们给出的实际逻辑像素更映射到更多的物理像素。
例如，如果按钮的大小为[MATH] 44×44 text {pixels} [/MATH]，并且我们拥有的特定设备的DPR为2X，则该设备上此按钮的物理像素的总数将为：[MATH]（44*2）*（44*2）*（44*2）*（44*2） text {pixels} {pixels} [/MATH] [/MATH] [/MATH]。
这是对其DPR的一些常见设备的引用：
| 设备 | 屏幕尺寸 | 解决 | 设备像素比（DPR） |
| iPhone 15 Pro | 6.1英寸 | 2556×1179 | 3× |
| MacBook Air（视网膜） | 13.3英寸 | 2560×1600 | 2× |
| iPad Pro | 12.9英寸 | 2732×2048 | 2× |
| 4K监视器 | 27英寸 | 3840×2160 | 1.5×-2×（OS依赖） |
图像维度，分辨率和纵横比
因此，让我们谈谈图像的另一个基本属性，即尺寸。这告诉我们它水平包含多少像素（按此顺序）。例如，图像可以具有许多不同的维度，例如512× 512、1920 × 1080、1280 × 720等。这些术语代表绝对像素分辨率，这意味着图像或视频框架上显示了多少个总像素。这是常见分类及其决议的摘要表：
| 学期 | 分辨率（宽度x高） |
| 高清 | 1280 x 720 |
| 全高清 | 1920 x 1080 |
| QHD | 2560 x 1440 |
| 4K UHD | 3840 x 2160 |
分辨率越高，图像质量越好。 However, it also comes with a cost, as we can see, when the resolution of the image increased, the more pixels we have, let's take 1920×1080 resolution for example, if we multiple the dimensions together, there are 2 073 600 pixels to present and store this image, and we haven't discussed the size of the pixel yet, so let's presume each pixel takes 1 bytes (8-bit), then we would need around ~2MB to store这个静止图像。
我们经常听到的一些常见比例在这里值得一提的，例如4：3或16：9等……在计算机图形工作中，d被称为纵横比，比率[Math] TextIt {r} [/MATH]是通过将宽度尺寸分配给高度维度为高度维度：
科学的颜色
RGB颜色模型
我们一开始就已经谈到了计算机只能理解二进制数字，即0和1，并且在这种理解中没有任何代表颜色，而颜色是我们作为人类所感知的事实，这是大脑对不同波长光的解释。当需要将颜色信息存储在计算机中时，我们需要精确的数值呈现颜色，这些颜色会在计算机理解的语言中感知到。
这就是为什么颜色模型发挥作用的原因；其中有许多，最常见的是RGB（红色，绿色，蓝色）颜色模型。为什么选择这些特殊的颜色而不是其他颜色？在这里解释科学需要整个博客文章，但是要简洁地说，这些颜色模仿了人眼如何从不同波长的光中感知颜色。
在RGB中，每种颜色都是红色，绿色和蓝色强度值的组合。在每种颜色可以表示为元组[MATH] textIt {（R，G，B）} [/MATH]的情况下，此元组中的每个元素都称为“颜色组件”，其中每个颜色成分通常在8位系统中的0（无）到255 （最大强度） 。
在这种情况下，每个像素代表RGB颜色模型的颜色。对于此模型的每个颜色组件，我们需要[Math] 2^8 text {bits = 1字节} [/MATH]，因此，我们完全需要3个字节来代表此模型的像素。我们可以从此模型中选择的可能颜色的数量是我们在这三种颜色组件上拥有的总排列：[MATH] 256 * 256 * 256 = text {16 777 216不同的颜色} [/MATH]。
我们可以说的是，对于大多数用例，对于我们来说，颜色的数量足以使我们足够，但是在某些专业显示或专业编辑中，可能需要更多的每个颜色组件。
网络开发中的十六进制符号
如果您使用CSS（用于造型HTML页面的语言），则通常使用十六进制符号表示RGB。每个十六进制颜色代码以＃开始，然后是六个十六进制数字，其中：
前两个数字表示红色组件
中间两个数字代表绿色组件
最后两个数字表示蓝色组件
例如，＃ff0000代表纯红色[MATH]（255，0，0）[/MATH]。该符号提供了一种紧凑的方式来表示24位RGB颜色为文本。每个十六进制数字代表4位，因此2位数字可以表示8位值（从00到FF，对应于小数为0到255）。
其他常见的颜色模型
还有其他常见的颜色模型，例如HSL（色调，饱和度，轻度）和HSV（色调，饱和度，价值），将RGB颜色空间重新组织为对人类颜色选择的更直观。在这些模型中：
色相代表颜色类型（红色，黄色，绿色等），以度（[MATH] 0-360 [/MATH]度）测量
饱和代表颜色强度（灰度为0％，全彩色100％）
轻度/值代表轻度（0％是黑色，100％是白色或最大亮度）
HSL到RGB之间的转换有一个公式，但我们不会在此处介绍细节。
从内存到屏幕
现在，我们有足够的背景知识来探索最有趣的部分，即如何在屏幕上渲染并显示计算机存储器中的图像。之间涉及许多步骤，让我们解剖图形管道 - 将计算机存储器中存储的数据转换为屏幕上可见像素的步骤的顺序。
图像的内存表示
从最低级别来看，计算机内存中的图像只是数值的数组。对于标准的RGB图像，每个颜色通道具有8位，为每个像素依次排列的24位，并且内存布局遵循两个主要内存模式之一：
平面格式：所有红色值，然后所有绿色值，然后是所有蓝色值。
交错格式：每个像素交替交替的RGB值（更常见）
为了使此描述更加严格，让我们定义：
[数学] w text {是像素中图像的宽度} [/MATH]
[数学] h text {是像素中图像的高度} [/MATH]
[MATH] N = W * H： Text {图像中的像素总数} [/MATH]
[MATH] RGB in [0,255]^3： text {每通道8位颜色值} [/MATH]
以平面格式，每个数据像素的数据都存储在三个连续块中，一个用于每个颜色通道：
[MATH] text {Memory Layout =} [r_ {00}，r_ {01}，r_ {02}， dots，r_ {h - 1，w - 1}，g_ {00}，g_ {00}，g_ {01} W-1}，B_ {00}，B_ {01}， DOTS，B_ {H-1，W-1}…B_ {H-1，W-1，W-1}] [/MATH]。
以相互交错的格式，对于每个像素，每个颜色通道的一个位都被移动到下一个位置并重复该过程（例如rgbrgbrgb…。）：
[MATH] text {memory布局} = [r_ {00}，g_ {00}，b_ {00}，; r_ {01}，g_ {01}，b_ {01}，; dots，; R_ {H-1，W-1}，G_ {H-1，W-1}，B_ {H-1，W-1}] [/MATH]
我们一直在说，对于离散空间中的每个像素坐标，我们具有[MATH]（x，y）[/MATH]坐标，其中X值代表X轴上的宽度位置，而y值代表y轴上的高度位置。但是，在编程和内存布局中，我们在w（列）之前访问h（row）的数据值，例如，[数学]数组[y] [x] [x] rightarrow text {row y，x} [/math]）。
对于以交错格式的WXH图像，可以将像素在坐标[Math]（x，y）[/MATH]处的像素的内存地址计算为：
[MATH] text {address} = text {baseaddress} +（y times w + x） times text {bytesperpixel} \ [/Math]
[数学] baseaddress [/MATH]是我们开始搜索像素的地址，[MATH] y times w [/MATH]将使我们进入正确的行，而[Math]+X [/Math]将带领我们进入列位置，我们需要使用[Math] Bytesperpixel [/Math]的多次数，将我们带到最终记忆位置的PIXEL COIXEL CORDICTON。
这里的一个重要说明是（x，y）坐标与数学惯例不同。在计算机图形中，随着您向下移动时， y轴增加，这意味着，第一行将位于最高位置，而最后一行将在底部。
GPU的角色
现代计算机图形很大程度上依赖于专业的硬件 - 图形处理单元（GPU）。与通用CPU不同，GPU专为视觉数据的并行处理而设计。
GPU架构包括：
着色器处理器：在顶点和像素上执行计算的可编程单元。
纹理单元：专门用于采样和过滤数据。
栅格式：将矢量原始素转换为像素片段。
ROPS （渲染输出单元）：在显示前执行最终像素操作
GPU的优势来自巨大的平行架构 - 现代GPU可以拥有数千个可以同时操纵不同像素的处理核心。
框架缓冲区和显示刷新
有趣的是，在屏幕上显示之前的图像存储在框架缓冲区中，大多数系统将使用双重或三框缓冲区来避免撕裂伪影。这是因为，如果我们只有一个缓冲区，则图像将显示在屏幕上（读取），但缓冲区也将其保留此图像也会同时渲染（写作）！结果，可能同时显示2个不完整的帧。当我从事Jen（生成艺术软件）工作时，我们还使用双重缓冲，一种用于阅读，另一种用于写作。此技术有助于我们分开阅读与写作，从而创造了更平滑的用户体验。从技术上讲，在2个缓冲区上渲染和显示的处理是：
在显示前缓冲区（读取缓冲区）时，GPU将下一个帧绘制到后缓冲区（写缓冲区）中。
渲染完成后，缓冲区将交换或翻转。
后缓冲区变成了新的前缓冲区，反之亦然。
展示技术
这是我们的最终组件，即显示技术！这是图形显示管道中的最后一步。不同的技术具有不同的标准和机制，可以将电信号转换为我们在计算机上看到的可见光。
LCD（液晶显示）
LCD背后的科学在2014年获得了诺贝尔奖。液晶显示器作品是通过液晶系统选择性过滤背光的，每个像素都包含：
背光源（LED）
偏振滤波器：光线通过一对极化器的地方，晶体确定光线是否会传播。
液晶层：施加电压时控制光的极化
颜色过滤器：每个像素分为子像素（红色，绿色，蓝色），将白光过滤为颜色。
为了更好地了解它，我们可以介绍LCD的工作方式的核心机制：
GPU将每个像素的RGB值发送到显示控制器- 通常是一个集成的硬件组件，充当图像内存（Framebuffer）和最终物理显示面板之间的桥梁，通常会听到此组件的某些物理接口，例如HDMI/VGA或DSI 。
控制器将电压发送到液晶以旋转光极化。
极化器和颜色过滤器选择性选择或阻挡光。
观众看到每个像素的彩色光强度，由晶体比对确定。
就这样！从图像的原子组成部分到图像尺寸到不同的颜色模型到整个渲染管道，我们已经学到了很多计算机图形学内容，从图像尺寸到不同的颜色模型，介绍了如何在屏幕上显示图像！
Jen - 生成摄影软件
如果我们有机会学习这些有趣的概念并更多地了解技术细节，这是一种极大的乐趣，这使我们对此感到好奇。但是，当我们能够将我们学到的知识应用到实践中时，这甚至更大。这正是我对Jen所做的，您也可以！这是生成摄影软件的OSS，我们可以在不同的图像上应用许多不同的功能和效果，并使模式遵循一些有趣的数学属性！
Jen - 生成摄影，蜂窝自动机软件