mapboxgl-customelayer

一 前言

基于webgl2的知识开发mapboxgl 3d customelayer学习教程。笔者学习webgl过程中，每个教程都会新出一个场景和数据，学完一节再看下一节就有点蒙。后来改在地图场景中练习，将webgl知识与地图应用结合起来学习比较有场景代入感。因此，本学习教程本质还是webgl理论，只是故意固定到地图中进行带入。

为降低学习难度和第三方框架干扰，建议所有新手，使用原生webgl进行学习，不引入第三方webgl框架，例如three、regl、twgl、luma等。原因是新手不理解底层，使用框架出现各种问题也不知道定位和解决，资料也没原生webgl多，所以新手绝对不能直接就上框架，后患很大，笔者亲自体会入门直接luma，各种问题翻遍了源码还是webgl基础，一个问题卡几天，千万别直接框架，哪怕three也不行。

二 资料来源

• webgl2理论基础
• WebGL极简入门
• mapboxgl官方示例

三 学习内容概述

• 三角形-->顶点索引--> 纹理绘制
• mvp矩阵略（自行掌握，使用地图已有，练习不再说明，部分模型需要引入矩阵计算之后）
• 光照与法向量
• 正射投影略，有需要自行掌握，地图自带透视投影
• fbo（离屏渲染）
• 地图上的阴影
• 地图上的文字
• 地图上的模板测试
• 地图上的混合
• 深度检测
• 三维物体透明渲染

四 安装

# 安装依赖
npm install
# 编译
npm run build
# 启动
npm run serve

四 练习目录

当前已有资料如下：

1 绘制三角形

参考《使用WebGL2进行Mapbox自定义图层开发》

2 顶点索引

3 uv纹理

4 地理坐标系纹理

5 地形

6 地形光照

7 地形纹理

8 偏移旋转

9 模型矩阵变换

10 球体

11 球体实例化渲染

12 球体透明OIT渲染

13 球体透明dual_depth_peeling渲染