/**
|
* 一个用于 webgl 加载tin数据的 处理类
|
* @wrriten {wangxu} on 2022/3/25
|
*/
|
import Matrix4 from "./cuon-matrix.js";
|
// 调试工具
|
// var SPECTOR = require("spectorjs");
|
// var spector = new SPECTOR.Spector();
|
// spector.displayUI();
|
class WebGLRenderer {
|
constructor(options) {
|
this.init(options);
|
}
|
|
/**
|
* 初始化内容
|
*/
|
init(options) {
|
// 生成 可以被 截图的 canvas
|
let mapDom = document.getElementById(options.mapID);
|
let canvas = document.createElement("canvas", {
|
preserveDrawingBuffer: true,
|
});
|
canvas.width = mapDom.clientWidth;
|
canvas.height = mapDom.clientHeight;
|
|
this.gl = canvas.getContext("webgl");
|
this.canvas = canvas;
|
this.tindata = options.tindata;
|
this.program = this.gl.createProgram();
|
this.__origin__resolution = options.originResolution;
|
this.colormaker = options.colormaker;
|
|
this.initShader(this.gl, this.program);
|
|
this.linkShaderToProgram(this.gl, this.program);
|
|
let count = this.initBufferData(this.gl, this.program);
|
this.count = count;
|
|
this.initModelMatrix(this.gl, this.program);
|
|
this.renderElement(this.gl, this.count);
|
|
console.log(this.canvas.toDataURL());
|
}
|
|
/**
|
* 绘制图像
|
*/
|
renderElement(gl, count) {
|
gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
var ext = gl.getExtension("OES_element_index_uint");
|
gl.drawElements(gl.TRIANGLES, count, gl.UNSIGNED_INT, 0);
|
}
|
|
changeMatrix(frameState) {
|
let { gl, program } = this;
|
var calcMatrix = new Matrix4();
|
let ratio = (
|
this.__origin__resolution / frameState.viewState.resolution
|
).toFixed(2);
|
let center = frameState.viewState.center;
|
let extent = frameState.extent;
|
let originDiff = (extent[2] - extent[0]) / 360.0;
|
calcMatrix.scale(1 / originDiff, ratio, 1);
|
calcMatrix.translate(-(center[0] / 180.0), -(center[1] / 90.0), 0);
|
// calcMatrix.translate(-0.5 * 10,-0.5 * 10,0)
|
var u_modelMatrix = gl.getUniformLocation(program, "u_modelMatrix");
|
gl.uniformMatrix4fv(u_modelMatrix, false, calcMatrix.elements);
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
gl.drawElements(gl.TRIANGLES, this.count, gl.UNSIGNED_INT, 0);
|
}
|
|
/**
|
* 将shader 链接到 program
|
*/
|
linkShaderToProgram(gl, program) {
|
gl.linkProgram(program);
|
gl.useProgram(program);
|
}
|
|
/**
|
* 初始化 模型矩阵
|
*/
|
initModelMatrix(gl, program) {
|
let modelMatrix = new Matrix4();
|
modelMatrix.scale(1, 1, 1);
|
// 缓冲区重 存储 modelMatrix的索引位置
|
let modelMatrixIndex = gl.getUniformLocation(program, "u_modelMatrix");
|
// 往着色器中赋值
|
gl.uniformMatrix4fv(modelMatrixIndex, false, modelMatrix.elements);
|
}
|
|
/**
|
* 装载着色器
|
*/
|
initShader(gl, program) {
|
var vertexShaderSource =
|
"attribute vec4 position;\n" +
|
"attribute vec4 color;\n" +
|
"uniform mat4 u_modelMatrix;\n" +
|
"varying vec4 v_Color;\n" +
|
"void main() {\n" +
|
"v_Color = color;\n" +
|
"gl_Position = u_modelMatrix * position;\n" +
|
"}\n";
|
var fragmentShaderSource =
|
"#ifdef GL_ES\n" +
|
"precision mediump float;\n" +
|
"#endif\n" +
|
"varying vec4 v_Color;\n" +
|
"void main(){\n" +
|
" gl_FragColor = v_Color;\n" +
|
"}\n";
|
|
//从上面例子使用 createShader 函数。
|
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
|
gl.shaderSource(vertexShader, vertexShaderSource);
|
gl.compileShader(vertexShader);
|
//从上面例子使用 createShader 函数。
|
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
|
gl.shaderSource(fragmentShader, fragmentShaderSource);
|
// 编译此 着色器
|
gl.compileShader(fragmentShader);
|
|
// 绑定预先存在的着色器 至program
|
gl.attachShader(program, vertexShader);
|
gl.attachShader(program, fragmentShader);
|
|
// 调试代码,alert的内容为ERROR: 0:2:" :No precision specified for (float)
|
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
|
alert(gl.getShaderInfoLog(fragmentShader));
|
}
|
// 调试代码,alert的内容为ERROR: 0:2:" :No precision specified for (float)
|
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
|
alert(gl.getShaderInfoLog(vertexShader));
|
}
|
}
|
|
/**
|
* 初始化 缓冲数据
|
* @param {*} gl
|
* @param {*} program
|
* @returns n 绘制的顶点个数
|
*/
|
initBufferData(gl, program) {
|
let dataLen = this.tindata.data.length;
|
let data = this.tindata.data;
|
let vertexPositions = [];
|
let colors = [];
|
for (let i = 0; i < dataLen; i++) {
|
vertexPositions.push(data[i][0] / 180.0, data[i][1] / 90.0);
|
colors.push(
|
...this.colormaker.makeColor(data[i][2]).map((e) => e / 255.0),
|
1.0
|
);
|
}
|
let indices = this.tindata.indices;
|
var vertices = new Float32Array(vertexPositions);
|
var n = indices.length; //点的个数
|
|
//创建缓冲区对象
|
var vertexBuffer = gl.createBuffer();
|
if (!vertexBuffer) {
|
console.log("Failed to create the buffer object");
|
return -1;
|
}
|
//将缓冲区对象绑定到目标
|
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
|
//向缓冲区写入数据
|
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
|
//获取坐标点
|
var a_Position = gl.getAttribLocation(program, "position");
|
//将缓冲区对象分配给a_Position变量
|
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
|
//连接a_Position变量与分配给它的缓冲区对象
|
gl.enableVertexAttribArray(a_Position);
|
|
// ------------------------------------
|
var colorBuffer = gl.createBuffer();
|
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
|
//获取顶点颜色苏哦因
|
var __color = gl.getAttribLocation(program, "color");
|
console.log(__color);
|
//将缓冲区对象分配给a_Position变量
|
gl.vertexAttribPointer(__color, 4, gl.FLOAT, false, 0, 0);
|
//连接a_Position变量与分配给它的缓冲区对象
|
gl.enableVertexAttribArray(__color);
|
|
// -------------------------------------
|
|
var indexBuffer = gl.createBuffer();
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
|
gl.bufferData(
|
gl.ELEMENT_ARRAY_BUFFER,
|
new Uint32Array(indices),
|
gl.STATIC_DRAW
|
);
|
return n;
|
}
|
}
|
|
export default WebGLRenderer;
|
