3.0虽然还有很多BUG,但是相对于cocos3d,其基于renderRoot2D的渲染流程使得图片可以跳过mesh而渲染在3D相机下。基于此可以尝试一下策划日思夜想的使用纯2D元素表现3D场景,并且可以通过shader实现地平线的效果。
效果如下:

现说下实现方式:
关键步骤有两部,第一是输入顶点数据,第二是顶点着色器。
第一步:输入顶点:对于GL渲染管线的相关知识,论坛很多,这里不再赘述。这里详细介绍一下cocos的顶点程序准备流程:
首先是渲染组件,如tileLayer,sprite等,将图片(模型)数据组装成可读顶点数组;
然后通过Assembler生成顶点buffer供着色器使用;
基于此,有两种方式可以更改顶点数据,
①自定义renderComponent生成合适的顶点数组
此方案需要了解对应renderComponent的Assember生成vertbuffer的详细过程,然后继承相应的组件实现关键函数
②,自定义Assembler将顶点数组输出为verterbuffer,实现接口IAssembler,再将组件的Assembler指定为该Assembler
如下图:
笔者项目之前地图都用tileMap制作,其tileLayer的顶点数量可以直接使用,为了追求效率(省事)因此选用了方案一:

①自定义组件继承TiledLayer,②复写_updateVertex函数:此处请根据自己需要自己定制,思路就是《阅读源码然后重载魔改》
笔者这里的地表是用一张整图制作,因此主要改了以下几个地方:

基于此,顶点输入完成
使用组件前后的数据如下,可以看到,vert从4个变成了4w个,idate数据也相应更新了
更改前:
更改后:
第二步:顶点shader,直接上代码:
思路就是转移到视图坐标系下,越往上的顶点越往里沉,
此外,如果fs图片采样有问题的话,可以将世界坐标系减去节点坐标获得局部坐标,在计算uv偏移,如下,orgSize为节点图片尺寸,orgPos为节点世界坐标

该shader可以直接使用在sprite上,实现地平线消失

鱼在此了,渔就是查堆栈和看源码
诸君共勉
图片如果渲染混乱的话记得开启深度测试 材质的pipelineStates中有个DepthStencilState





