2D元素构建曲面3D地图

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

效果如下:
j12gg-nrsse
现说下实现方式:

关键步骤有两部,第一是输入顶点数据,第二是顶点着色器。

第一步:输入顶点:对于GL渲染管线的相关知识,论坛很多,这里不再赘述。这里详细介绍一下cocos的顶点程序准备流程:
首先是渲染组件,如tileLayer,sprite等,将图片(模型)数据组装成可读顶点数组;

然后通过Assembler生成顶点buffer供着色器使用;

基于此,有两种方式可以更改顶点数据,

①自定义renderComponent生成合适的顶点数组

此方案需要了解对应renderComponent的Assember生成vertbuffer的详细过程,然后继承相应的组件实现关键函数
②,自定义Assembler将顶点数组输出为verterbuffer,实现接口IAssembler,再将组件的Assembler指定为该Assembler

如下图:
1.1

笔者项目之前地图都用tileMap制作,其tileLayer的顶点数量可以直接使用,为了追求效率(省事)因此选用了方案一:
84D75822-8208-4ac6-B45D-904062887521
①自定义组件继承TiledLayer,②复写_updateVertex函数:此处请根据自己需要自己定制,思路就是《阅读源码然后重载魔改》

笔者这里的地表是用一张整图制作,因此主要改了以下几个地方:
1 2 3 4

基于此,顶点输入完成

使用组件前后的数据如下,可以看到,vert从4个变成了4w个,idate数据也相应更新了
更改前:
前1


更改后:

第二步:顶点shader,直接上代码:

思路就是转移到视图坐标系下,越往上的顶点越往里沉,

此外,如果fs图片采样有问题的话,可以将世界坐标系减去节点坐标获得局部坐标,在计算uv偏移,如下,orgSize为节点图片尺寸,orgPos为节点世界坐标
6

该shader可以直接使用在sprite上,实现地平线消失
p0gom-mvikj
鱼在此了,渔就是查堆栈和看源码
诸君共勉
图片如果渲染混乱的话记得开启深度测试 材质的pipelineStates中有个DepthStencilState
111

7赞