初学者都能看懂的Billboard推导_cocos2dx 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渲染管线）渲染一个物体大概要经过几个步骤：
- 将照相机固定在三角架上(视图变换)
- 使想要的场景处于取景框中合适的位置(模型变换)
- 调节镜头或调整放大倍数(投影变换)
- 决定最终相片的尺寸大小(视区变换)
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雷同）的表现形式为：
因为我们是知道View Transform（简写为view）矩阵的，所以就有：
view的旋转部分 * T的旋转部分 = identity
我们知道，对于任意矩阵M，都满足定律 ：
M * M逆矩阵 = identity
所以有：
T的旋转部分（3x3） = view的旋转部分的逆矩阵
求矩阵的逆矩阵消耗还是挺大的，而且也比较复杂，于是我们尝试别的方法。注意到旋转矩阵（上面有图），他是一个正交矩阵，而对于所有正交矩阵M，M的逆矩阵 = M的转置矩阵，这就很好求了。所以有：
所以最终我们的矩阵T就有这种形式：
4、相关博客：
智能推荐
[552]python实现聚类算法(6种算法）_python聚类算法-程序员宅基地
文章浏览阅读10w+次，点赞120次，收藏788次。1、Mean-shift1)概述Mean-shift（即：均值迁移）的基本思想：在数据集中选定一个点，然后以这个点为圆心，r为半径，画一个圆(二维下是圆)，求出这个点到所有点的向量的平均值，而圆心与向量均值的和为新的圆心，然后迭代此过程，直到满足一点的条件结束。(Fukunage在1975年提出)后来Yizong Cheng 在此基础上加入了 核函数 和 权重系数 ，使得Mean-shift..._python聚类算法
ASP.NET 基于B/S的选课系统设计与实现（论文+源码）_Nueve_选课系统中,指定选课时间的功能怎么实现-程序员宅基地
文章浏览阅读136次。本文通过分析浏览器/服务器结构的特点并结合选课的实际情况，提出了基于浏览器/服务器结构网上选课系统的基本设计思想，简要介绍了系统各功能模块及数据库的设计，着重讨论了用 ASP.NET技术和SQL Server 2000开发网上选课系统时的数据库访问技术和动态网页制作技术,并给出了部分实现代码。系统有较高的安全性和较好的性能。（２） 经济可行性-----由于本系统是为学生选课管理使用的系统，装上该应用软件，即可使用系统，系统成本主要集中在系统软件的开发上，当系统投入运行后可以为学校节约大量的人力，物力。_选课系统中,指定选课时间的功能怎么实现
AK4940VN-L转换器模拟开关和PLL的48kHz 24位单声道音频编解码器-程序员宅基地
文章浏览阅读147次。AK4940VN是一个音频编解码器，带有用于麦克风和模拟直接路径的增益放大器。AKM品牌是数据通信模块（DCM）的理想选择。AK4940VN采用小型24引脚QFN（4mm x 4mm，0.5mm间距）封装。应用领域汽车模块，数据通信模块：DCM，远程信息处理控制单元 TCU，行车记录仪，车载信息 IVI，电子镜（电子镜）..._ak4940
计算跑OTB数据集的内存开销_[userview,systemview] = memory;-程序员宅基地
文章浏览阅读244次。[userview,systemview] = memory;disp(userview.MemUsedMATLAB);_[userview,systemview] = memory;
SpringBoot——静态资源访问的四种方式_springboot访问静态资源-程序员宅基地
文章浏览阅读9.1k次，点赞8次，收藏24次。1.默认的静态资源目录 /static /public /resources /META-INF/resources动态资源目录：/templates2.resources静态资源目录图片存放3. 静态资源目录访问3.1.通过路径访问静态资源 http://localhost:8080/a.jpg http://localhost:8080/b.jpg http://localhost:8080/c.png htt..._springboot访问静态资源
java输出0-100之间的偶数、奇数_1、用java 实现从键盘输入一个整数,如果输入的是0-100之间的数的奇偶数-程序员宅基地
文章浏览阅读7.9k次，点赞3次，收藏18次。偶数：package com.oracle.core;public class Wn { public static void main(String[] args) { int i; for(i=0;i<=100;i++) { System.out.println(i++); } }}奇数：package com.oracle.core;pub..._1、用java 实现从键盘输入一个整数,如果输入的是0-100之间的数的奇偶数
随便推点
C#中listView控件详细使用方法_c# listview-程序员宅基地
文章浏览阅读5.6k次。C#中listView控件详细使用方法_c# listview
基于Java SSM框架实现农村信息化管理系统项目【项目源码】计算机毕业设计_乡村java项目-程序员宅基地
文章浏览阅读1k次，点赞25次，收藏20次。MyEclipse支持广泛、兼容性高并且功能强大，是一个Eclipse 插件集合，普遍适应于JAVA和J2EE的系统开发，支持 JDBC，Hibernate，AJAX，Struts，Java Servlet，Spring，EJB3等市面上存在的几乎所有数据库链接工具和主流Eclipse产品 开发工具。数据库的操作(sql)采用xml文件配置，解除了sql和代码的耦合，提供映射标签，支持对象和和数据库orm字段关系的映射，支持对象关系映射标签，支持对象关系的组建提供了xml标签，支持动态的sql。_乡村java项目
C# Winform应用程序重启_c# 程序关闭重开-程序员宅基地
文章浏览阅读2.3k次。winform应用程序重启_c# 程序关闭重开
python人像精细分割_python 使用OpenCV进行简单的人像分割与合成-程序员宅基地
文章浏览阅读535次。实现思路通过背景建模的方法，对源图像中的动态人物前景进行分割，再将目标图像作为背景，进行合成操作，获得一个可用的合成影像。实现步骤如下。使用BackgroundSubtractorMOG2进行背景分割BackgroundSubtractorMOG2是一个以高斯混合模型为基础的背景前景分割算法，混合高斯模型分布概率是K个高斯分布的和，每个高斯分布有属于自己的 μμ 和 σσ 参数，以及对应的权重参数..._将课堂上每个学生的人像提取出来 python
Ajax简介_ajax 命名空间-程序员宅基地
文章浏览阅读196次。我们似乎经常关注“后端机制（backend mechanics）”。我们通常会忘记，J2EE的主要成功之处在Web应用程序方面；许多原因使得人们喜欢利用Web开发应用程序，但主要还是因为其易于部署的特点允许站点以尽可能低的成本拥有上百万的用户。遗憾的是，在过去几年中，我们在后端投入了太多的时间，而在使我们的Web用户界面对用户自然和响应灵敏方面却投入不足。 本文介绍一种方法，Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScrip_ajax 命名空间
UE4-构建更好的静态网格体_ue5静态网格体无法选中模型-程序员宅基地
文章浏览阅读5.9k次，点赞3次，收藏16次。在“构件更好的三维网格体这部分”，我们会讨论包括系统单位、三角面数量、材质ID、枢轴点，我们会学习什么是光照贴图，然后介绍如何创建光照贴图。我们将学习碰撞网格体的创建和使用，细节层级或 LOD，最后介绍如何限制过度绘制。1.系统单位无论你使用哪种数字内容创建软件（DCC），创建对象前你需要先确定系统单位。本文中，我将使用 3d Studio Max，不过我涉及到的原理适用于所有数字内容创建软件。首先，我们需要确保将系统单位设为厘米，因为厘米是虚幻引擎4默认的测量单位。在虚幻引擎4中，一虚幻单位等于一厘米_ue5静态网格体无法选中模型