【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验二十六：VGA模块

实验二十六：VGA模块

VGA这家伙也算孽缘之一，从《建模篇》那时候开始便一路缠着笔者。《建模篇》之际，学习主要针对像素，帧，颜色等VGA的简单概念。《时序篇》之际，笔者便开始摸索VGA的时序。《整合篇》之际，笔者尝试控制VGA的时序。如今《驱动篇I》的内容返回VGA的本题，也就是图像方面的故事。

此刻，澎湃之情不容怠慢，请怒笔者不再回忆往事，失忆者请复习《Verilog HDL那些事儿》，笔者虽然也想直奔主题 ... 可是在此之前，笔者必须补足那些不易注意的细节

。俗语有云，细节是关键的藏身之地，那些不起眼的小细节，往往都是左右大局的关键，学习也是如此。不过，实验二十六究竟存在多少影响成败的小细节呢？请竖起耳朵，让笔者慢慢告诉读者 ...

图26.1 C1计数的理想时序。

图26.1是一段计数时序，C1扮演计数器，而且时序理想。对此，这段时序一定按照“时间点”在表现。假设笔者想要建立判断，那么判断基准会基于C1的过去值，例如：

if( C1 == 0 )；

那么if( C1 == 0 ) 必须在T1才能成立。再假设笔者想要拉长判断的长度，例如T0~T8之间，那么笔者可以这样写：

if( C1 == 0 || C1 == 1 || C1 == 2 || C1 == 3 || C1 == 4 || C1 == 5 || C1 == 6 || C1 == 7 )；

如果长度像妈妈一样长气，例如T2~T99。当然，上述方法一定行不通，因为后果不仅累坏自己，而且模块的内容也会沉长臃肿。为此，笔者可以或者这样写：

if（C1 >= 0 && C1 <= 7）；

其中，if( C1 >= 0 && C1 <= 7 ) 表示9个时钟沿的长度。

图26.2 长度有AB之别的计数时序。

假设某某长度是固定的家伙，例如图26.2，T0~T3组成4个时钟沿的长度A，而

T3~T8组成5个时钟沿的长度B。为了方便，笔者可以建立常量：

parameter A = 3, B = 5;

如果笔者想把长度A作为有效的判断基准，那么笔者可以这样写：

if( C1 >= 0 && C1 <= A -1 );

代码的用意非常明显，C1 >= 0表示长度的起始，然而 C1 <= A -1 则是长度的结束。

如果长度B也作为判断的基准，同样的写法也适用：

if( C1 >= 2 && C1 <= A + B -1 );

可是，不管怎么看 ... 笔者觉得 C1 >= 2 非常别扭，对此笔者可以这样修改：

if( C1 >= A -1 && C1 < A + B -1 );

怎么样，读者是不是稍微顺眼一点？

图26.3 长度有CDE之别的计数时序。

假设顽皮的长度作出手势，然后分身成为3个，结果如图26.3所示。T0~T1组成3个时钟沿的长度C，T2~T6组成5个时钟沿的长度D，T6~T8组成3个时钟沿的长度E。为了方便，笔者先做常量声明：

parameter C = 2, D = 4, E = 2。

如果笔者想把长度C作为判断的基准，那么笔者可以这样写：

if( C1 >= 0 && C1 <= C -1 );

如果笔者想把长度D作为判断的基准，那么笔者可以这样写：

if( C1 >= C -1 && C1 <= C + D -1 );

如果笔者想把长度E作为判断的基准，那么笔者可以这样写：

if( C1 >= C + D -1 && C1 <= C + D + E -1 );

理解完毕以后，笔者可以这样总结 ... 由于C1从0开始计数，除非长度的起始地方是从0开始，否则长度的起始地方必须添加 -1 的处理。反之，不管结束地方怎么歇斯底里抵抗，长度的结束地方都必须加上 -1 处理。

图26.4 VGA时序。

图26.4是典型的VGA时序，VGA有5条信号，其中 HSYNC 与 VSYNC 控制显示分辨率还有显示帧。本实验的显示标准选为 1024 × 768 @ 60Hz - 65Mhz，而表26.1就是该显示标准的内容：

表26.1 显示标准 1024 × 768 @ 60Hz - 65Mhz。

信号	A	B	C	D	E
VGA_HSYNC	136	160	1024	24	1344
信号	O	P	Q	R	S
VGA_VSYNC	6	29	768	3	806

如表26.1所示，A段与O段都是拉低的起始段，然后B段与P段是准备段，C段与Q段是数据段，D段与R段都是结束段，至于E段是ABCD段的总和，S段则是OPRQ段的总和。HSYNC有时候也称为列像素或者X，VSYNC则称为行像素或者Y。列像素最小的周期时间（或称像素时钟 Pixel Clock）是 1/65Mhz，行像素最小的周期时间则是 E段 × 1/65Mhz。话题继续之前，笔者再稍微补充一下细节内容。

图26.5 计数例子。

我们先假设 HSYNC长度有8，前3个为拉低的起始段，后8个为拉高的数据段。如图26.5所示，C1总共计数两次，分别是T0~T8还有T8~T16。期间，第一次是无效的计数，所以HSYNC并没有拉低起始段。换之，第二次开始才是有效的计数，因为HSYNC拉低起始段。为此，Verilog可以这样描述：

if( C1 == 7 ) HSYNC <= 1’b0;

else if( C1 == 2 ) HSYNC <= 1’b1;

假设起始段声明为A，而结束段声明为D，E则是A与D的总和，那么内容可以继续修改：

parameter A = 3, D = 5, E = 8;

if( C1 == E -1 ) HSYNC <= 1’b0;

else if( C1 == A -1 ) HSYNC <= 1’b1;

明白以后，我们便可以用Verilog 描述表26.1的内容，结果如代码26.1所示：

1.         parameter SA = 11'd136, SE = 11'd1344;
2.         parameter SO = 11'd6, SS = 11'd806;
3.
4.          reg [10:0]C1;
5.         reg [9:0]C2;
6.         reg rH,rV;
7.
8.         always @ ( posedge CLOCK or negedge RESET )
9.             if( !RESET )
10.                  begin
11.                          C1 <= 11'd0;
12.                         C2 <= 10'd0;
13.                         rH <= 1'b1;
14.                         rV <= 1'b1;
15.                    end
16.              else
17.                  begin
18.                        if( C1 == SE -1 ) rH <= 1'b0;
19.                         else if( C1 == SA -1  ) rH <= 1'b1;
20.
21.                        if( C2 == SS -1 ) rV <= 1'b0;
22.                         else if( C2 == SO -1  ) rV <= 1'b1;
23.
24.                         if( C2 == SS -1 ) C2 <= 10'd0;
25.                         else if( C1 == SE -1 ) C2 <= C2 + 1'b1;
26.
27.                         if( C1 == SE -1 ) C1 <= 11'd0;
28.                         else C1 <= C1 + 1'b1;
29.                    end

代码26.1

第1~2行是 A段与E段，O段还有S段的常量声明。第4~6是相关的寄存器声明，第10~14行则是这些寄存器的复位操作。请注意一下第8行的主时钟是65Mhz。第27~28行是针对列像素的计数器C1，计数范围为0~1343。第24~25行是针对行像素的计数器C2，计数范围为0~805。第18~19行用来控制 HSYNC，第21~22行则是用来控制VSYNC。

理解完毕 HSYNC 与 VSYNC信号以后，接下来我们便要学习 RGB 信号。事实上，HSYNC与VSYNC的数据段，其实也是RGB有效的数据段。表26.1基于1024×768 @ 60Hz，所以HSYNC数据段的长度有1024，而VSYNC的数据段的长度则有768。如果VGA拥有显示标准，那么RGB信号也有所谓的颜色标准。根据Photoshop ，常见的颜色如表26.2所示：

表26.2 常见的颜色。

颜色	位宽
黑白	1bit
灰度级	4bit，8bit
RGB	8bit，16bit，24bit，32bit

黑白可谓是最典型的颜色，不禁让笔者想起怀念的小绿人。灰度级正如字面上的意思，意指失去颜色的图像，4bit有16灰度级，8bit则有256灰度级。RGB是电脑专用的颜色标准，从过去发展至今，RGB的颜色分辨率也从4bit发展到32bit。虽说8位RGB是历史悠久的前辈，不过至今它还未退休吔，例如街边的LED招牌。8位RGB也称为索引色。

16位RGB可是人眼比较接近的的颜色标准，也是本实验的主题，其中RGB[15:11]是5位红色，RGB[10:5]是6位绿色，RGB[4:0]则是5位蓝色，16位RGB称为高彩。24位RGB也是目前流行的颜色标准，其中字节0为蓝色，字节1为绿色，字节2为红色，24位称为真彩。32位RGB相较24位RGB则多了一个字节3的通道字节，通道也指透明效果，它称为全彩。

为消除读者对RGB的恐惧，笔者就解剖一下16位RGB：

图26.6 4×1与16位RGB图像。

图26.6是一幅宽为4高为1的16位RGB图像，如果从左至右开始数起，列0为饱和的红色，列1为饱和的绿色，列2为饱和的蓝色，列3为纯黑。如果将其卸甲并且一字排开高位在前的内容，结果如表26.2所示：

表示26.3 4×1与16位RGB图像内容(高位在前)。

列0	列1	列2	列3
饱和红	饱和绿	饱和蓝	黑
16’hF800	16’h07E0	16’h001F	16’h0000
16’b1111_1000_0000_0000	16’b0000_0111_1110_0000	16’b0000_0000_0001_1111	16’b0000_0000_0000_0000

如表26.3所示，我们可以看见列0的红色占据RGB[15:11]的位置，亦即红色有2⁵=32的分辨率。列1的绿色则是占据RGB[10:5]的位置，亦即2⁶= 64的分辨率。至于列2的蓝色占据RGB[4:0]的位置，结果它有2⁵=32的分辨率。

图26.7 4×1与16位RGB图像（红色渐变）。

图26.7也是一幅宽有4高有1的16位RGB图像，不过是红色渐变的图像。如果从左至右开始数起，列0为4/4饱和的红色，列1为3/4饱和的红色，列2为2/4饱和的红色，列3为1/4饱和的红色。笔者随之伸出魔爪将其卸甲，然后一字排开高位在前的内容，结果如表26.4所示：

表示26.4 4×1与16位RGB图像内容（红色渐变与高位在前）。

列0	列1	列2	列3
4/4饱和红	3/4饱和红	2/4饱和红	1/4饱和红
16’hF800	16’hC000	16’h8000	16’h4000
16’b1111_1000_0000_0000	16’b1100_0000_0000_0000	16’b1000_0000_0000_0000	16’b0100_0000_0000_0000

如表26.4所示，我们可以看见列0的红色充斥整座RGB[15:11]，列1的红色则是占据其中的14份内容而已。列2更惨，它占据的份儿只有8份而已，而最惨的列3则是只有麻雀眼泪般的4份内容而已。

图26.8 实验用的小可爱。

图26.6是实验二十六所用的图像资源，内容是一群可爱的比卡丘在玩耍。图像大小为128 × 96 × 16 bit，结果容量为：

128 × 96 × 16 bit = 196608 bit

如果储存器的位宽有16位，那么储存器的地址位宽则是：

128 × 96 = 12208

因此，必须建立位宽为 2¹⁴ 的地址信号：

2¹⁴ = 16384

简单而言，图26.8的X为128还有Y为96，而Y也充当偏移量的角色。为此，正确的地址公式如下所示：

Address = X + ( Y × 128 )

= X + （Y << 7）

理解完毕这些准备知识以后，我们便可以开始建模了。

图26.9 实验二十六（VGA基础模块）的建模图。

图26.9是实验二十六的建模图，其中PLL将50Mhz 的CLOCK增至 65Mhz。VGA储存模块有 128 × 96 × 16 bit 的容量，里边暂存皮卡丘的图像信息。VGA功能模块则是负责1024 × 768 @ 60Hz的显示标准，还有将内部的计数信息反馈给VGA控制模块。VGA控制模块位与中间，它借助 iAddr然后转换成为图像读取的地址，最后再将反馈回来的图像信息发至 VGAD顶层信号。

vga_savemod.v

图26.10 VGA储存模块的建模图。

图26.10虽是VGA储存模块的建模图，不过内容却是简单ROM模块，具体内容让我们来看代码吧。

1.    module vga_savemod
2.    (
3.         input CLOCK, RESET,
4.         input [13:0]iAddr,
5.         output [15:0]oData
6.    );
7.        (* ramstyle = "no_rw_check , m9k" , ram_init_file = "pikachu_128x96_16_msb.mif" *)
8.         reg [15:0] RAM[12287:0];
9.         reg [15:0]D1;
10.
11.         always @ ( posedge CLOCK or negedge RESET )
12.             if( !RESET )
13.                  D1 <= 16'd0;
14.              else
15.                  D1 <= RAM[ iAddr ];
16.
17.         assign oData = D1;
18.
19.    endmodule

以上内容虽然简单，不过还是注意一下第7行的建立声明。其中 no_rw_check是用来告诉综合器无视 read during write 的检测，m9k则声明片上内存用 m9k，至于ram

init file 则是RAM的初始化内容，亦即图26.8。

vga_funcmod.v

图26.11 VGA功能模块的建模图。

图26.11是VGA功能模块的建模图，左边是反馈给朋友的oAddr，其中[20:10]是X地址，[9:0]则是Y地址。右边是驱动顶层的VGA_HSYNC与 VGA_VSYNC。

1.    module vga_funcmod
2.    (
3.         input CLOCK, RESET,
4.         output VGA_HSYNC, VGA_VSYNC,
5.         output [20:0]oAddr
6.    );
7.         parameter SA = 11'd136, SE = 11'd1344;
8.         parameter SO = 11'd6, SS = 11'd806;
9.

以上内容为相关的出入端声明，还有A段，E段，O段还有S段的常量声明。

10.         reg [10:0]C1;
11.         reg [9:0]C2;
12.         reg rH,rV;
13.
14.         always @ ( posedge CLOCK or negedge RESET )
15.             if( !RESET )
16.                  begin
17.                         C1 <= 11'd0;
18.                         C2 <= 10'd0;
19.                         rH <= 1'b1;
20.                         rV <= 1'b1;
21.                    end
22.              else

以上内容为相关的寄存器声明，其中C1为HSYNC计数，C2则为VSYNC计数。

23.                  begin
24.
25.                         if( C1 == SE -1 ) rH <= 1'b0;
26.                         else if( C1 == SA -1  ) rH <= 1'b1;
27.
28.                         if( C2 == SS -1 ) rV <= 1'b0;
29.                         else if( C2 == SO -1  ) rV <= 1'b1;
30.
31.                         if( C2 == SS -1 ) C2 <= 10'd0;
32.                         else if( C1 == SE -1 ) C2 <= C2 + 1'b1;
33.
34.                         if( C1 == SE -1 ) C1 <= 11'd0;
35.                         else C1 <= C1 + 1'b1;
36.
37.                    end
38.

以上内容为 HSYNC 与 VSYNC的驱动过程。第35~36行是计数HSYNC，第32~33行则是计数VYSNC，一个VSYNC为1344个HSYNC。第26~27行是 rH的控制，第29~30行则是 rV的控制。

39.        reg [1:0]B1,B2,B3;
40.
41.        always @ ( posedge CLOCK or negedge RESET )
42.             if( !RESET )
43.                  {  B3, B2, B1 } <= 6'b11_11_11;
44.              else
45.                  begin
46.                         B1 <= { rH,rV };
47.                         B2 <= B1;
48.                         B3 <= B2;
49.                    end
50.

第40~51则是用来延迟 rH与rV的周边操作，期间总共延迟3个时钟。详细内容往后再说。

51.         assign { VGA_HSYNC, VGA_VSYNC } = B3;
52.         assign oAddr = {C1,C2}
53.
54.    endmodule

以上内容为相关的输出驱动。

vga_ctrlmod.v

图26.12 VGA控制模块的建模图。

图26.12是VGA控制模块的建模图，而设计思路来源《整合篇》。左边信号连接储存模块，右边信号连接功能模块，北边信号则驱动顶层。具体内容还是让我们来看代码吧：

1.    module vga_ctrlmod
2.    (
3.         input CLOCK, RESET,
4.         output [15:0]VGAD,
5.         output [13:0]oAddr,
6.         input [15:0]iData,
7.         input [20:0]iAddr
8.    );

以上内容为相关的出入端声明。

9.         parameter SA = 11'd136, SB = 11'd160, SC = 11'd1024, SD = 11'd24, SE = 11'd1344;
10.         parameter SO = 11'd6, SP = 11'd29, SQ = 11'd768, SR = 11'd3, SS = 11'd806;
11.
12.         // Height , width, x-offset and y-offset
13.         parameter XSIZE = 8'd128, YSIZE = 8'd96, XOFF = 10'd0, YOFF = 10'd0;
14.
15.         wire isX = ( (iAddr[20:10] >= SA + SB + XOFF -1 ) && ( iAddr[20:10] <= SA + SB + XOFF + XSIZE -1) );
16.         wire isY = ( (iAddr[9:0] >= SO + SP + YOFF -1 ) && ( iAddr[9:0] <= SO + SP + YOFF + YSIZE -1) );
17.         wire isReady = isX & isY;
18.
19.         wire [31:0] x = iAddr[20:10] - XOFF - SA - SB -1;
20.         wire [31:0] y = iAddr[9:0] - YOFF - SO - SP -1;
21.

以上内容为相关的常量声明。第9~10行是针对 1024 × 768 @ 60Hz 显示标准的常量声明。第13行声明图像信息，如大小还有位置。第15行声明有效的列像素，第16行则声明有效的Y像素，至于第17行则是声明图像的有效区域，注意它们都是即时事件。第19~20行用来是计算有效的X与Y，主要用来取得图像的读取地址，注意它们也是即时事件。

22.         reg [31:0]D1;
23.         reg [15:0]rVGAD;
24.
25.         always @ ( posedge CLOCK or negedge RESET )
26.             if( !RESET )
27.                  begin
28.                        D1 <= 18'd0;
29.                        rVGAD <= 16'd0;
30.                    end
31.                else

以上内容为相关的寄存器声明还有复位操作。

32.                   begin
33.
34.                        // step 1 : compute data address and index-n
35.                         if( isReady )
36.                             D1 <= (y << 7) + x;
37.                         else
38.                             D1 <= 14'd0;
39.
40.                         // step 2 : reading data from rom
41.                         // but do-nothing
42.
43.                         // step 3 : assign RGB_Sig
44.                         rVGAD <= isReady ? iData : 16'd0;
45.
46.                    end
47.

以上内容为VGA控制模块的核心操作。该控制模块采用流水操作，一边不断发送读取地址，一边不断等待图像信息读出，一边不断输出图像信息。

图26.13 VGA功能模块的流水操作。

从某种程度来说，实验二十六的VGA基础模块可以看成如图26.13所示。VGA功能模块输出HSYNC与VSYNC的瞬间，它也发送 Addr 给 VGA控制模块。VGA控制模块计算读取地址以后再发送给 VGA储存模块，VGA储存模块随意也将图像信息返回发送给VGA控制模块，最后VGA控制模块再将图像信息驱动至 VGAD。

简单来说，图像信息一共慢HSYNC和VSYNC信号3拍，因此VGA功能模块多了旁路的周边操作，目的是为了同步 HSYNC，VSYNC还有 VGAD之间的延迟。返回话题，有效的读取地址只有 isReady 拉高的时候，如代码行第36所示。同样，有效的图像信息也是 isReady 拉高的时候，如代码行第45所示。

48.        assign VGAD = rVGAD;
49.        assign oAddr = D1[13:0];
50.
51.    endmodule

以上内容为相关的输出驱动。

vga_basemod.v

该模块是VGA基础模块，至于内部的连线部署请参考图26.9。

1.    module vga_basemod
2.    (
3.         input CLOCK, RESET,
4.         output VGA_HSYNC, VGA_VSYNC,
5.         output [15:0]VGAD
6.    );
7.        wire CLOCK_65M;
8.
9.        pll_module U1
10.        (
11.            .inclk0 ( CLOCK ),
12.            .c0 ( CLOCK_65M ) // CLOCK 65Mhz
13.         );
14.
15.         wire [20:0]AddrU2;
16.
17.         vga_funcmod U2    // 1024 * 758 @ 60Hz
18.         (
19.           .CLOCK( CLOCK_65M ),
20.           .RESET( RESET ),
21.           .VGA_HSYNC( VGA_HSYNC ),
22.           .VGA_VSYNC( VGA_VSYNC ),
23.           .oAddr( AddrU2 ),
24.         );
25.
26.         wire [15:0]DataU3;
27.
28.         vga_savemod U3
29.         (
30.            .CLOCK( CLOCK_65M ),
31.            .RESET( RESET ),
32.            .iAddr( AddrU4 ),
33.            .oData ( DataU3 )
34.        );
35.
36.         wire [13:0]AddrU4;
37.
38.         vga_ctrlmod U4  // 128 * 96 * 16bit, X0,Y0
39.         (
40.             .CLOCK( CLOCK_65M ),
41.              .RESET( RESET ),
42.              .VGAD( VGAD ),
43.             .iData( DataU3 ),
44.             .oAddr( AddrU4 ),
45.             .iAddr( AddrU2 ),
46.         );
47.
48.    endmodule

详细的内容请读者自己看着办吧。

图26.14 实验二十六的结果。

综合完毕便下载程序，如果实验成功，分辨率为1024 * 768 的显示器左上角便会出现一幅128 × 96 × 16 bit 的图像显示在 X0与Y0的位置，结果如图26.14所示。

细节一：完整的个体模块

实验二十六的VGA基础模块虽为就绪状态，不过它是一只能力有限的家伙。原因很单纯，因为储存128 × 96 × 16 bit 的图像已经是EP4CE6F17C8 这块FPGA的极限，这家伙的度量很小，所以片上内存也不怎么大。

细节二： 片上内存

笔者曾经说过，片上内存是资粮很棒的储存资源，它不仅访问时间短，自定义强，而且操作也简单，但是肚量是它永远的痛。EP4CE6F17C8 虽然有 476280 bit 的片上内存，不过实际可用的范围只有其中的90%而已。

细节三： 缓冲图像的储存模块

如果片上内存不行，那么SDRAM当然是最好的替代。同样，笔者也曾经说过，SDRAM的优点除了肚量大以外，无论是访问速度还有操作程度也不及片上内存。一旦SDRAM谋朝散位成功，VGA控制模块，VGA储存模块还有VGA功能模块之间就会失去同步性。此外，SDRAM也不能经过综合器初始化内容。不管怎么样，实验二十六已经完成任务，以后的问题以后再说吧。