Archive

Posts Tagged ‘图形’

3D 图形光栅化的透视校正问题

August 18th, 2016 No comments

写了文章《如何写一个软件渲染器》以后,不少网友希望进一步解释背后的数学公式,询问以及自己加一个 phong 光照该如何加,本文将对透视纹理映射的插值原理做一个简单的解释,希望能帮助到大家:

透视纹理绘制发生在最后阶段,坐标已经完成projection,剔除,裁剪了,然后顶点/w,开始批量绘制扫描线之前,这时候开始计算纹理的位置。

使用w还是用z,关系不大,早年的3d引擎,直接/z的,只是后面标准化了以后,发现w更好用,可以同时表示透视投影和正交投影。同时顶点经过标准的mvp矩阵运算后,w和z是承线性关系的,方便对z/w做 [0,1] 的cvv裁剪。你可以理解成w就是另外一个z。以前屏幕坐标:

x' = x / z * d + A
y' = y / z * d + A

现在是

x' = x / w * d + A
y' = y / w * d + A

然后绘制纹理前,你需要先证明屏幕上两个点之间,1/w 承线性关系,即屏幕上两个点X1′, X2’之间任意取一点X3’,他们的(1/w)值的变化比例相同,即在 t 取任意值有:

x3' = x1' + (x2' - x1') * t
(1 / w3) = (1 / w1) + ((1 / w2)  - (1 / w1)) * t

再根据他们在同一个平面上,证明屏幕上两个点之间,u/w, v/w 承线性关系,即 t 取任意值有:

x3' = x1' + (x2' - x1') * t
(u3 / w3) = (u1 / w1) + ((u2 / w2) - (u1 / w1)) * t
(v3 / w3) = (v1 / w1) + ((v2 / w2) - (v1 / w1)) * t

具体到代码里面的做法就是三角形的三个顶点/w以后,u和v也同时/w,然后把w换成自己的倒数:w = 1 / w,及把顶点数据:

(x, y, z, w) + (u, v)

变换成:

(x / w, y / w, z / w, 1 / w) + (u / w, v / w)

然后用 1/w, u/w, v/w进行屏幕空间插值,具体绘制某个点的时候,先从1/w求倒得到w,然后乘以 u/w, v/w得到 u, v,就可以了。

更进一步,可以证明,所有在三维空间里同x,y,z成线性关系的变量,不管是纹理坐标,顶点色或者法向还是其他,他们在屏幕空间里的插值规则都可以通过:插值前先/w,插值后要用时再 * w得到具体值,然后我们把这类三维空间里同x,y,z成线性关系的变量统进行统一的批量处理,和OpenGL的 attribute,varying处理方法相同。

相关阅读:
如何写一个软件渲染器
还原被摄像机透视的纹理

Categories: 图形编程 Tags:

计算机底层是如何访问显卡的?

June 17th, 2016 No comments

以前 DOS下做游戏,操作系统除了磁盘和文件管理外基本不管事情,所有游戏都是直接操作显卡和声卡的,用不了什么驱动。

虽然没有驱动,但是硬件标准还是放在那里,VGA, SVGA, VESA, VESA2.0 之类的硬件标准,最起码,你只做320x200x256c的游戏,或者 ModeX 下 320x240x256c 的游戏的话,需要用到VGA和部分 SVGA标准,而要做真彩高彩,更高分辨率的游戏的话,就必须掌握 VESA的各项规范了。

翻几段以前写的代码演示下:

例子1: 初始化 VGA/VESA 显示模式

基本是参考 VGA的编程手册来做:

INT 10,0 - Set Video Mode
    AH = 00
    AL = 00  40x25 B/W text (CGA,EGA,MCGA,VGA)
       = 01  40x25 16 color text (CGA,EGA,MCGA,VGA)
       = 02  80x25 16 shades of gray text (CGA,EGA,MCGA,VGA)
       = 03  80x25 16 color text (CGA,EGA,MCGA,VGA)
       = 04  320x200 4 color graphics (CGA,EGA,MCGA,VGA)
       = 05  320x200 4 color graphics (CGA,EGA,MCGA,VGA)
       = 06  640x200 B/W graphics (CGA,EGA,MCGA,VGA)
       = 07  80x25 Monochrome text (MDA,HERC,EGA,VGA)
       = 08  160x200 16 color graphics (PCjr)
       = 09  320x200 16 color graphics (PCjr)
       = 0A  640x200 4 color graphics (PCjr)
       = 0B  Reserved (EGA BIOS function 11)
       = 0C  Reserved (EGA BIOS function 11)
       = 0D  320x200 16 color graphics (EGA,VGA)
       = 0E  640x200 16 color graphics (EGA,VGA)
       = 0F  640x350 Monochrome graphics (EGA,VGA)
       = 10  640x350 16 color graphics (EGA or VGA with 128K)
         640x350 4 color graphics (64K EGA)
       = 11  640x480 B/W graphics (MCGA,VGA)
       = 12  640x480 16 color graphics (VGA)
       = 13  320x200 256 color graphics (MCGA,VGA)
       = 8x  EGA, MCGA or VGA ignore bit 7, see below
       = 9x  EGA, MCGA or VGA ignore bit 7, see below

    - if AL bit 7=1, prevents EGA,MCGA & VGA from clearing display
    - function updates byte at 40:49;  bit 7 of byte 40:87
      (EGA/VGA Display Data Area) is set to the value of AL bit 7

转换成代码的话,类似这样:

// enter standard graphic mode
int display_enter_graph(int mode)
{ 
    short hr = 0;
    union REGS r;
    memset(&r, 0, sizeof(r));
    if (mode < 0x100) { 
        r.w.ax = (short)mode;
        int386(0x10, &r, &r);
        r.h.ah = 0xf;
        int386(0x10, &r, &r);
        if (r.h.al != mode) hr = -1;
    }   
    else { 
        r.w.ax = 0x4f02;
        r.w.bx = (short)mode;
        int386(0x10, &r, &r);
        if (r.w.ax != 0x004f) hr = -1;
    }
    return hr;
}

Read more…

Categories: 图形编程 Tags: ,

超越 SDL/DirectDraw/GDI 性能的位图库

April 29th, 2016 1 comment

开源一个高性能位图库,之前对我的二维图形库 pixellib 进行了精简和重写,最终形成一个只包含两个文件(BasicBitmap.h, BasicBitmap.cpp)的图形基础库。

在今天 GPU 绘制横行天下的时候,任然有很多时候需要使用到纯 CPU实现的图形库,比如图像处理,视频预处理与合成,界面,以及GPU无法使用的情况(比如某个应用把gpu占满了,或者无法通过gpu做一些十分灵活的事情时),纹理处理,简单图片加载保存等。

支持 SSE2/AVX 优化,比 DirectDraw 快 40%(全系统内存绘制),比 SDL 快 10%,比GDI快 38%。如果你需要一个方便的高性能位图库,足够高性能的同时保证足够紧凑。

如果你有上述需求,那么你和我一样需要用到 BasicBitmap,只需要把 BasicBitmap.h/.cpp 两个文件拷贝到你的代码中即可。我正是为了这个目的编写了这两个文件。

特性介绍

  • 高度优化的 C++ 代码,可以在任意平台编译并运行
  • 多重像素格式,从8位到32位:A8R8G8B8, R8G8B8, A4R4G4B4, R5G6B5, A8, 等.
  • Blit (Bit Blt) ,包含透明和非透明的模式。
  • 像素格式快速转换
  • 使用不同的 Compositor 进行 Blending
  • 使用不同的过滤器进行缩放(nearest, linear, bilinear)
  • 高质量位图重采样(Bicubic/Box)
  • 支持从内存或者文件直接读取 BMP/TGA 文件
  • 支持从内存或者文件直接读取 PNG/JPEG 文件(Windows下)
  • 保存图片为 BMP/PPM 文件
  • 核心绘制函数可以被外部实现通过设置函数指针重载(比如 SSE2实现)
  • 比 DirectDraw 快 40% 的性能进行绘制(打开 AVX/SSE2支持)
  • 比 GDI 的 AlphaBlend 函数快34%的性能进行混色
  • Self-contained, 不依赖任何其他第三方库
  • 高度紧凑,只需要拷贝 BasicBitmap.h/.cpp 两个文件到你项目即可

项目地址

Blit 性能比较

Full window (800×600) blitting (both opacity and transparent), compare to GDI/SDL/DirectDraw:

32 Bits Blit Opacity Transparent
BasicBitmap C++ fps=2325 fps=1368
BasicBitmap AVX/SSE2 fps=2904 fps=2531
GDI fps=2333 fps=1167
SDL fps=2671 fps=1015
DirectDraw fps=2695 fps=2090

Note: use BltFast with DirectDrawSurface7 in System Memory to perform Opacity & Transparent blit. BitBlt and TransparentBlt(msimg32.dll) are used in the GDI testing case.

16 Bits Blit Opacity Transparent
BasicBitmap C++ fps=4494 fps=1253
BasicBitmap AVX/SSE2 fps=9852 fps=2909
DirectDraw BltFast fps=5889 fps=861

Blitting performance in SDL & GDI are slower than DirectDraw, just compare to ddraw as well.

8 Bits Blit Opacity Transparent
BasicBitmap C++ fps=11142 fps=1503
BasicBitmap AVX/SSE2 fps=18181 fps=5449
DirectDraw BltFast fps=14705 fps=4832

DirectDrawSurface in Video Memory takes the benefit of hardware acceleration which is definitely faster than BasicBitmap. If you really need hardware acceleration, use OpenGL/DX as well.

BasicBitmap is a software implementation which aims to achieve the best performance in all other software implementations: like GDI/GDI+, SDL/DirectDraw in System Memory, for examples.

So just compare to DirectDrawSurface in System Memory. Use it in the condition that you only need a lightweight software solution: GUI/Cross Platform/hardware unavailable/image processing/video compositing, etc.

混色性能比较

SRC OVER FPS
BasicBitmap C++ 594
BasicBitmap SSE2 1731
GDI (msimg32.dll) 1137

note: 800×600 full window src-over blending vs GDI’s AlphaBlend function (in msimg32.dll).

Categories: 图形编程 Tags: , ,

如何写一个软件渲染器?

August 10th, 2015 11 comments

实现个简单的固定渲染管线软渲染器不算复杂,差不多700行代码就可以搞定了。之所以很多人用 D3D用的很熟,写软渲染却坑坑洼洼,主要是现在大部分讲图形的书,讲到透视投影时就是分析一下透视变换矩阵如何生成,顶点如何计算就跳到其他讲模型或者光照的部分了。

因为今天基本上是直接用 D3D 或者 OGL,真正光栅化的部分不了解也不影响使用,所以大部分教材都直接跳过了一大段,摄像机坐标系如何转换?三角形如何生成?CVV边缘如何检测?四维坐标如何裁剪?边缘及步长如何计算?扫描线该如何绘制?透视纹理映射具体代码该怎么写?framebuffer zbuffer 到底该怎么用?z-test 到底是该 test z 还是 w 还是 1/z 还是 1/w ?这些都没讲。

早年培训学生时候,我花两天时间写的一个 DEMO,今天拿出来重新调整注释一下,性能和功能当然比不过高大上的软件渲染器。但一般来讲,工程类项目代码不容易阅读,太多边界情况和太多细节优化容易让初学者迷失,这个 mini3d 的项目不做任何优化,主要目的就是为了突出主干:

源代码:skywind3000/mini3d · GitHub
可执行:http://www.skywind.me/mw/images/c/c8/Mini3d.7z

操作方式:左右键旋转,前后键前进后退,空格键切换模式,ESC退出。

 

特性介绍:

  • 单个文件:源代码只有一个 mini3d.c,单个文件实现所有内容,阅读容易。
  • 独立编译:没有任何第三方库依赖,没有复杂的工程目录。
  • 模型标准:标准 D3D 坐标模型,左手系 + WORLD/VIEW/PROJECTION 三矩阵
  • 实现裁剪:简单 CVV 裁剪
  • 纹理支持:最大支持 1024 x 1024 的纹理
  • 深度缓存:使用深度缓存判断图像前后
  • 边缘计算:精确的多边形边缘覆盖计算
  • 透视贴图:透视纹理映射以及透视色彩填充
  • 实现精简:渲染部分只有 700行, 模块清晰,主干突出。
  • 详细注释:主要代码详细注释

截图效果

颜色填充

image

 

透视纹理映射

image

Read more…

Categories: 图形编程, 编程技术 Tags:

游戏中角色变色如何实现?

June 13th, 2015 No comments

来自知乎问题:http://www.zhihu.com/question/31133351 

游戏中的惯用做法叫:调色盘色彩旋转

image

1. 调色盘里能变色的颜色总是固定几个位置
2. 让需要变色的位置的 RGB转换成 HSV,然后旋转 H分量旋转一定角度
3. 重新将 HSV转换为 RGB保存回调色盘

image

在 HSV 色彩空间中,旋转 H 分量

主要是旋转 H分量,S/V分量也可以微调,但是变色是以旋转 H为主。题主两张图片的八神,除了调色盘前面几个皮肤颜色不参与变色外,后面的衣服整体都参与了色彩旋转:

Read more…

Categories: 图形编程 Tags: ,

还原被摄像机透视的纹理

May 20th, 2015 No comments

有人问如何还原被透视纹理?给你一张照片,还原照片上四个点所组成的平面的纹理该怎么做?我们可以从数学上推导一下,为了和三维图形的透视纹理映射对照,我们称照片上四个点在照片上的位置为“屏幕坐标”,那么可以发现:

空间中,三维坐标(x,y,z)和纹理坐标(u, v)承线性关系。根据该问题描述,可以理解为已知四个点的屏幕投影坐标(xi,yi),和对应纹理坐标(u,v),求整个纹理坐标系到屏幕坐标系的反向映射过程,即根据(u,v)求解(xi,yi)。

1. 按照纹理隐射的原理,同平面纹理坐标与空间坐标存在线性关系,设 a1-a12为常数,有:

a1 * x +  a2 * y +  a3 * z +  a4 = u ... 线性关系
a5 * x +  a6 * y +  a7 * z +  a8 = v ... 线性关系
a9 * x + a10 * y + a11 * z + a12 = 0 ... 平面方程

 

2. 求解上面的方程组,可以得到类似下面的关系,其中b1-b9为常数:

x = b1 * u + b2 * v + b3  
y = b4 * u + b5 * v + b6 
z = b7 * u + b8 * v + b9 

常数 b1-b9如果展开,就是9个关于a1-a12的等式,太长了,这里不展开,有兴趣可以自己求解。

 

3. 屏幕上投影坐标一般是:

             x
xi = D1 * --- + C1
           z
       
           x
yi = D2 * --- + C2
           z

因为同样一个透视投影矩阵下,能隐射成屏幕上同样形状纹理的平面,在空间中存在无穷多个,而且还存在不同透视投影矩阵下,同样屏幕投影的平面存在更多无穷多个。这里我们不用去求解每个平面,直接设置 D1 = D2 = 1 且 C1 = C2 = 0 有:

       x
xi = ---
      z
       
      x
yi = ---
      z

Read more…

Categories: 图形编程 Tags:

计算机图形算法中的光滑边缘算法经历了那些变迁?

April 26th, 2015 No comments

主要有四种方法:

1. wupixel:wu xiaolin提出的最早的绘制直线和圆的平滑方法,优点是简单快速,缺点是只有一个方向的像素偏移被考虑了,效果普通,而且只能绘制1个像素宽度的直线,超过一个像素后,两个端点就会非常不自然。

image

2. supersampling:解析度扩大数倍绘制,四个或者多个像素合并平滑成一个像素,优点是效果好,缺点是计算量大,多用于显卡加速,cpu基本没发做,显卡负担也大:

image
当然小范围的ss可以用来改进界面字体效果,如windows字体长宽扩大两倍绘制后再平滑down sample成小尺寸,四个像素点均匀合并成一个像素点,会好看很多。

image

3. 覆盖面积计算:通过计算多边形覆盖了矩形点阵面积的百分比来计算 Alpha,多用于软件渲染,字体绘制,如高质量图形库如AGG,采用直接子像素的绘制方式来避免supersampling的性能浪费,并达到更好效果。缺点是过于复杂不如supersampling 那样简单直接,不容易的用gpu实现。

image

比如我五年前做的一个玩具图形库:skywind3000/pixellib · GitHub
就是用覆盖面积计算方式来平滑边缘。

4. clear type:采用子像素并考虑lcd的rgb分布,利用lcd上rgb的排列规则模拟更高的解析度,缺点是过分依赖lcd排列,以及主要是x方向的抗锯齿:

image

编辑于 2015-04-26

Categories: 图形编程 Tags: ,

美术资源超级压缩方法

August 7th, 2011 No comments

如何在质量下降不大的情况下降低一倍的占用?如何让臃肿的美术资源压缩再压缩?

 

JPEG->WDP/WEBP

 

大部分项目都陆续废掉了JPEG,而最好的代替品是微软的HD Photo,wdp格式,在PSNR差不多的情况下,wdp能比JPEG小一倍多。

(wdp的encoder/decoder不好找的话,我这里有一份微软的库)

观察下面的演示图片不要缩放PDF,用100%显示才看得清楚差别

image

image

JPEG 16.18 KB,可以看出脸部方块已经很严重,头发等高频部分已经看不清楚,帽子和墙面质量损失严重,而下面这张WDP文件(HDPHOTO,XnView可以转换)只有13.85KB大小,质量却比JPEG好很多。(通常情况下峰值信噪比差不多的话,WDP能够小一倍):

压缩比从强到弱依次是:WDP>WEBP>JPEG2000>JPEG。因此换用WDP格式能缩小不少资源。

 

PNG->WEBP

非界面元素,仅仅是为了使用ARGB32的资源,可以用webp的带alpha有损格式代替,能节省不少。

 

实时纹理压缩

PS Vita里面已经大范围用到了实时纹理压缩方法,DXT格式存储纹理仅仅是为了方便显卡,但是它的地压缩率却害苦了硬盘。废除DXT格式,用wdp格式或者webp格式有损保存图片(不要用JPEG了,JPEG太差)。运行时动态载入并且动态生成dxt格式再载入显卡。如此在质量微弱损失的情况下,可以至少获得4-5倍的空间节省。

PS Vita使用的动态生成dxt的库叫:

Read more…

Categories: 图形编程 Tags: