openFrameworks全系列 第六篇：3d图像

从这篇起，已经进入了openFrameworks的深水区---图形图像学，这是整个框架的重点和难点。

我们先来理清几个概念，3d、openGL、shader，这几个概念在初学者当中容易引起混乱。3d相对于2d多了个纵深的Z轴，在图形图像学中有一整套的构图流程，本篇就是讲这部分。openGL是在GUP上绘图的一套API，和微软的GDI，directx3D相对。Shader中文名叫着色器。它是把顶点、片段位置，颜色，灯光等一些渲染的参数单独提取出来。人为的设置调节，以获取更好的渲染效果。这三个有区别，但又经常联系在一起使用，构成了图形图像的整个渲染流程。

一：构成3d的要素

1，顶点：我们在不同的x,y,z位置定义四个点，点与点之间首尾呼应，把他们连在一起，即构成了一个立体的三角形。

     ofPoint v0 = ofPoint( -200, -100, 0 );

     ofPoint v1 = ofPoint( 200, -100, 0 );

     ofPoint v2 = ofPoint( 0, 200, 0 );

     ofPoint v3 = ofPoint( 0, 0, 100 );

2，法线：面的垂直射线。在计算灯光，贴图时可以作为方向参考。

3，灯光：类型有平行光，点光源，聚光灯。灯光类型不一样，照射的强度和衰减度都不一样。这三个在openGL中都有相应的计算公式。

4，颜色：r,g,b,a  

5，模型：由不同的三角形构成的网格，经过平滑后构成的物体。

6，材质：物体看起来是什么质地。一般由灯光，颜色，图像等共同构成的，俗称模型的外衣。

二：图形图像的渲染流程

在电脑的世界里，怎么样把一个物体最终用3d的形式在屏幕里绘画出来呢？有两套不同流程，一套是固定流水线渲染流程，一切是电脑自己来设置输出，好比是傻瓜相机。另一套是可编程流水线渲染流程，这里面把渲染部分的一些参数通过Shader设置，人为的调节渲染输出，好比是手动相机。Shader知识放在后面的篇章再具体介绍。

这一章具体看固定流水线渲染流程：

1，根据物体模型的大小、方向以及与其他模型之间的相对关系，世界变换将物体模型从自身的局部坐标系中转换到世界坐标系中，并将所有的物体模型组织成为一个场景，如下图：

在3d中，变换的坐标不再是x，y的平面了，而是x,y,z等构成的向量，矩阵，在使用旋转，放大缩小，移动等都是操作向量和矩阵的计算得来的。

2，物体剔除，在相机的可视范围外，直接忽视掉，减少渲染时间。

 

3，进入渲染列表后，再经过一些背面消除，相机坐标变换后，开始光栅化图元。就是把顶点，颜色，深度值，纹理坐标等和模型匹配好，

这个渲染过程是迈入图形图像学的最关键一步，看懂了，基本就算入门。现在很多教程往往把openGL和3d部分放在一起讲。在顶点部分介绍vao，vbo，在坐标转换阶段介绍矩阵的加减和乘法等，无形中加大了入门的难度。

三：openFrameworks中的3d

1. 简单3d绘图

    ofBeginShape();                 

    ofVertex( x1, y1, z1 );        

    ofVertex( x2, y2, z2 );         

    ofVertex( xn, yn, zn );        

    ofEndShape();                   

    End shape();

2,用点和颜色组成的圆形。

 

3,利用ofMesh来绘制

   mesh.addVertex( ofPoint( -200, -100, -50 ) );

   mesh.addVertex( ofPoint( 200, -100, -50 ) );

   mesh.addVertex( ofPoint( 0, 200, 0 ) );

   mesh.addVertex( ofPoint( 0, 0, 50 ) );

4,开启深度测试

图形图像学博大精深，这里仅仅起到抛转引入的作用。