初学者都能看懂的Billboard推导

初学者都能看懂的Billboard推导

1、前言

    最近需要在cocos2dx中用2d素材在3d摄像机下面做战斗，整个战场处于3d空间，士兵、场景、地图什么的也对应要有透视效果（perspective），但是鉴于种种原因，所有的素材都依然是cocos2dx默认的2d素材，估计到这里许多人都立刻会想到Billboard技术来做了，本来我也想用cocos2dx默认提供的CCBillboard进行开发，但是发现一旦setScaleX（-1）（也就是水平翻转）素材就会消失，于是就只能看其实现然后找bug修改了。

   接下来就是找资料的过程了（google、baidu）找了一大圈，发现要么就是各种博客完全不管对错直接互相抄，要么就是讲解有点笼统，像我这样的新手完全看不太懂，终于在找了很久之后找到了一篇简单易懂的Billboard剖析的文章（文章最后会贴上该参考博客），也稍微加深了我堆Billboard的理解。

    下面进入正题。

2、什么是Billboard？

    简单的说，就是不管camera如何移动，2d面片总是面朝镜头。

引用opengl manual的一个示例图（其中血条就是Billboard）：

3、简单的推导

    因本人能力有限，仅仅只能讲解简单情形下的实现，同时也欢迎各位大牛补充。

    假设有如下图的场景：

    

    在这里，Billboard平面就是我们最终想要完成的效果。我们知道，3d世界渲染管线（此处如果不清楚请移步：Opengl渲染管线）渲染一个物体大概要经过几个步骤：

    

1. 将照相机固定在三角架上(视图变换)
2. 使想要的场景处于取景框中合适的位置(模型变换)
3. 调节镜头或调整放大倍数(投影变换)
4. 决定最终相片的尺寸大小(视区变换)

    

    Billboard其实就是在物体经过Model（模型）变换之后，进行View（视图）变换时，在这里多乘以一个Matrix，使得物体的角度得到修正，面朝摄像机。因为是简单的推导，所以假设这里Model变换仅仅只做了平移（即之前说的移动到点x,y,z处），复杂情况可以根据Model变化增加一些运算。所以这里考虑的仅仅是View * T * 物体坐标的结果。

    物体面朝镜头，实际上对于结果来说，我们知道了

    在这里，我们不妨假设有这么一个矩阵T：

在这里，假设各位都对矩阵变换的形式都有所了解（如果不知道，请移步：矩阵变换）。

因为是简单的推导，所以在这里尽量消除其他不重要的变换，所以在这里，暂时不考虑缩放带来的影响，所以矩阵会看起来像这样：

x、y、z分量代表平移，左上角的3x3小矩阵代表旋转（r 是 rotation的缩写）

在物体经历过Model矩阵之后，接下来乘以我们的矩阵T和View矩阵，我们会移动、旋转它，使得它在正确的位置并且面朝camera。于是我们可以把T拆分成2个sub matrix（子矩阵）来分析：

1、平移部分。这块最为简单，其实就是：

2、旋转部分。结果是物体面朝镜头，即物体的角度和camera的角度一致，也就是x，y，z旋转角度为0。又因为我们知道绕X旋转矩阵（绕Y、Z雷同）的表现形式为：

我们只要让角度=0。 也就是View Transform的旋转部分（左上角3x3小矩阵） * T的旋转部分（左上角3x3）部分的结果为：

因为我们是知道View Transform（简写为view）矩阵的，所以就有：

view的旋转部分 * T的旋转部分 = identity

我们知道，对于任意矩阵M，都满足定律 ：

M * M逆矩阵 = identity

所以有：

T的旋转部分（3x3） = view的旋转部分的逆矩阵

求矩阵的逆矩阵消耗还是挺大的，而且也比较复杂，于是我们尝试别的方法。注意到旋转矩阵（上面有图），他是一个正交矩阵，而对于所有正交矩阵M，M的逆矩阵 = M的转置矩阵，这就很好求了。所以有：

所以最终我们的矩阵T就有这种形式：

4、相关博客：

Constructing a Billboard Matrix

Opengl坐标系

Billboard manual