多重ProjectMap(投影纹理)原理和拓展应用(Demo和Shader源码)

请见Demo: Rendering & Art

效果图:

投用纹理的基本原理: 以世界坐标空间中，检测当前像素位置是否能被投影纹理所在的空间(可由投影纹理对应的摄像机(后面称作PMCamera)来描述,)可见性(和光照计算一致)如果可见计算出对应的纹理坐标。以2D纹理为例,这里计算出来的纹理坐标来讲就是此像素位置在PMCamera near平面的投影值x,y值(x和y要除以w)，只是要注意将 -1.0到1.0变换为 0.0 到 1.0，纹理采样的wrap一般设置为CLAMP_TO_EDGE就会投影结果就会匹配这张纹理。Shader实现的主要三步: a.将法线和坐标转换到世界坐标并传递给Frag Shader. b.将这个世界坐标的pos用PMCamera的 view和project 联乘之后的的VP矩阵相乘(这个矩阵用uniform传入frag shader).c.按照自己的需求对可见性，纹理获取以及混合或者其他复杂变换做处理以实现足够丰富的效果。

上图的每一个 frustum 代表一个ProjectMap的摄像机

由以上描述可见，ProjectMap的原理和一般光照以及shadowMap 阴影实现的思路其实是一致的。纹理数据的来源可以是多种的(可以使RTT或者一个数学模型)，采样获取纹理值(或者自己根据某些规律例如noise计算出，上面的Demo用rgb来扰乱world pos实现局部扭曲)也是多种的，计算有了数据输入，那么最终输出其实也可以依据需求来。例如模拟水底的光影还是迪斯科灯(或者其他舞台灯)，当然也可以用于环境表现效果增强，例如可以投一个水潭到任意表面，或者做某些配件上的流动变换效果，甚至可以用这个数据来为光照增加数据输入和输出。

仔细观察上面的demo，你会发现模型的某一部分被动态剔除了，这也是一种应用。例如可以用在模型的渐变效果。

其实一般实时渲染的目的就是确定最终的目标像素到底应该显示什么颜色，由此再发散一下既然ProjectMap的原理和光照原理以及shadowMap阴影原理是一致的, 假定把这两者对应的片段在pixel处理阶段混合上指定的各种纹理(色彩),那么又能实现什么效果呢?很多东西都是相通的，可以多试试，就会有神奇的发现。

Shader源码 可以通过浏览器查看到我的JS文件，里面就有。