毕业两年,一直在地图相关的公司工作,虽然不是 GIS 出身,但是也对地图有些耳濡目染;最近在看 WebGl 的东西,就拿 MapboxGL 做了一个关于 WebGL 的三维数据渲染的 DEMO 练手。
首先大致看了一下 MapboxGL 的 GLGS 到图层的一个结构:
MapboxGL 大体就说这么多,下面就是 WebGL 的三维数据处理和渲染以及添加卫星影像纹理的过程(代码实在太多,只写出部分关键步骤代码):
第一步:拿到需要渲染的数据片(瓦片形式)
// 序列化瓦片地址,将数据瓦片的 xyz 坐标计算出来
let url = normalizeURL(
tile.coord.url(this.tiles, null, this.scheme),
this.url,
this.tileSize
);
...
// 用 MapboxGl 封装的获取二进制数据格式的 Ajax 请求拿到二进制数据
tile.request = ajax.getArrayBuffer(url, done.bind(this));
...
// 将数据进行转码处理成 JS 对象,并传递给 tile
tile.pixelObj = pixelObj; // 处理好的数据
...
复制代码
第二步:在 Render 里面拿到数据和 Painter,去做数据片的渲染:
const divisions = 257;
let vertexPositionData = new Float32Array(divisions * divisions * 3);
const pixels = pixelObj.pixels[0];
if (coord.vertexPositionData) {
// 做了缓存优化
console.log('缓存', 'coord');
vertexPositionData = coord.vertexPositionData;
} else {
console.time('vertex');
// 全数据量
for (let i = 0; i < divisions; ++i) {
for (let j = 0; j < divisions; ++j) {
const bufferLength = (i * divisions + j) * 3;
let dem = parseInt(pixels[bufferLength / 3]);
if (!dem || dem === -3) {
// 对于无效数据给一个默认值(PS: DEM 高程数据质量不高 )
dem = -1000;
}
vertexPositionData[bufferLength] = j * SCALE;
vertexPositionData[bufferLength + 1] = i * SCALE * 1;
vertexPositionData[bufferLength + 2] = dem;
}
}
// 计算数据处理的耗时,优化的时候要用
console.timeEnd('vertex');
coord.vertexPositionData = vertexPositionData;
}
const indexData = getIndex(divisions);
const FSIZE = vertexPositionData.BYTES_PER_ELEMENT;
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexPositionData, gl.STATIC_DRAW);
const aPosiLoc = gl.getAttribLocation(gl.program, "a_Position");
gl.vertexAttribPointer(aPosiLoc, 3, gl.FLOAT, false, FSIZE * 3, 0);
gl.enableVertexAttribArray(aPosiLoc);
// 设置索引
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
// https://stackoverflow.com/questions/28324162/webgl-element-array-buffers-not-working
gl.getExtension('OES_element_index_uint');
gl.drawElements(gl.TRIANGLES, indexData.length, gl.UNSIGNED_INT, 0);
...
// 生成索引,WebGL 的渲染有两种方式,一种是 drawElements,一种是 drawArray,我们这里采用第一种
function getIndex(divisions) {
if (drawLerc3D.indexData) {
return drawLerc3D.indexData;
}
console.time('获取索引');
const indexData = [];
// 这个是全数据量渲染
// for (let row = 0; row < divisions - 1; ++row) {
// for (let i = 0; i < divisions; ++i) {
// const base = row * divisions + i;
// if (i < divisions - 1) {
// indexData.push(base);
// indexData.push(base + 1);
// indexData.push(base + divisions);
// indexData.push(base + 1);
// indexData.push(base + divisions);
// indexData.push(base + divisions + 1);
// }
// }
// }
// 这是一半数据(PS: 这是为了优化,牺牲一些精度)
for (let row = 0; row < divisions - 2; row += 2) {
for (let i = 0; i < divisions; i += 2) {
const base = row * divisions + i;
if (i < divisions - 2) {
indexData.push(base);
indexData.push(base + 2);
indexData.push(base + divisions * 2);
indexData.push(base + 2);
indexData.push(base + divisions * 2);
indexData.push(base + divisions * 2 + 2);
}
}
}
console.timeEnd('获取索引');
drawLerc3D.indexData = new Uint32Array(indexData);
return drawLerc3D.indexData;
}
复制代码
第三步:编写 GLSL,在 GPU 里面处理不同高度对应渲染的不同颜色值
vertex shader
// 视角矩阵
uniform mat4 u_matrix;
// 顶点位置数据
attribute vec3 a_Position;
// 纹理数据,贴图卫星影像
attribute vec2 a_texCoord;
varying vec2 v_texCoord;
// 高程数据
varying float dem;
void main(){
dem = a_Position.z;
gl_Position = u_matrix * vec4(a_Position.x, a_Position.y, dem * 32.0, 1.0);
v_texCoord = a_texCoord;
}
复制代码
fragment shader
// precision lowp float;
// uniform float u_brightness_low;
// uniform float u_brightness_high;
// 颜色
// varying vec3 v_Color;
varying float dem;
// 纹理
uniform sampler2D u_image;
varying vec2 v_texCoord;
// 根据不同高程取不同颜色
vec4 getColor() {
// 颜色数组
const int COLORS_SIZE = 11;
vec3 colors[COLORS_SIZE];
// 对 dem 进行归一化
float n_dem = -2.0 * (dem / 6000.0 - 0.5);
const float MINDEM = -1.0;
const float MAXDEM = 1.0;
const float STEP = (MAXDEM - MINDEM) / float(COLORS_SIZE - 1);
int index = int(ceil((n_dem - MINDEM) / STEP));
colors[10] = vec3(0.3686274509803922,0.30980392156862746,0.6352941176470588);
colors[9] = vec3(0.19607843137254902,0.5333333333333333,0.7411764705882353);
colors[8] = vec3(0.4, 0.7607843137254902,0.6470588235294118);
colors[7] = vec3(0.6705882352941176,0.8666666666666667,0.6431372549019608);
colors[6] = vec3(0.9019607843137255,0.9607843137254902,0.596078431372549);
colors[5] = vec3(1.0, 1.0, 0.7490196078431373);
colors[4] = vec3(0.996078431372549,0.8784313725490196,0.5450980392156862);
colors[3] = vec3(0.9921568627450981,0.6823529411764706,0.3803921568627451);
colors[2] = vec3(0.9568627450980393,0.42745098039215684,0.2627450980392157);
colors[1] = vec3(0.8352941176470589,0.24313725490196078,0.30980392156862746);
colors[0] = vec3(0.6196078431372549,0.00392156862745098,0.25882352941176473);
if(index > 10){
return vec4(0.3, 0.3, 0.9, 0.5);
}
if(index < 0){
index = 0;
}
for (int i = 0; i < COLORS_SIZE; i++) {
if (i == index) return vec4(colors[i], 1.0);
}
}
void main(){
// 用颜色渲染 DEM 数据,和纹理二选一
gl_FragColor = getColor();
// 用纹理(卫星影像)渲染效果
gl_FragColor = texture2D(u_image, v_texCoord / 256.0 / 32.0);
}
复制代码
最后:在 MapboxGL 里面使用我们自己定义的 Source 和 Layer
map.addSource('DEMImgSource', { //高程数据
"type": "DEM3D",
"tiles": [
'http://xxx.xxx.xxx.xxx/{x}/{y}/{z}',
],
"tileSize": 512,
// 谷歌瓦片地址,用来渲染纹理贴图
"rasterUrl": 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',
// 高德的
// "rasterUrl": 'https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
});
map.addLayer({ // layer
'id': 'DEMlayer',
'type': 'DEM3D',
'source': 'DEMImgSource'
});
复制代码
最终的渲染效果(颜色渲染):
纹理渲染效果:
不得不说好像还是颜色渲染的视觉效果更(yao)好(yan)一(jian)些(huo)~
对于 WebGL 方向上的探索一些大公司也有一些成果: 高德 Loca:lbs.amap.com/api/javascr…
百度 Echarts: echarts.baidu.com/examples/in…
UBER: deck.gl/
等等,所以对于 WebGL 的前景个人觉得在数据可视化、高精地图(无人驾驶)等方面还是有很多价值的~
第一次写文章,很多地方可能没有解释清楚,欢迎拍砖~