版权声明: https://blog.csdn.net/GISuuser/article/details/82224057
这个代码的例子是从书籍上搬来的,不同的是,书籍提供的WebGL函数库代码是ES5的,我把函数库使用的代码用ES6的方法重写了。中间还使用了ES6的特性——静态方法和模版字符串。最后出现了想要的东西,特此纪念一下。
export class RenderTool {
static initShaders(gl, vshader, fshader){
var program = RenderTool.createProgram(gl, vshader, fshader);
if (!program) {
console.log('创建program失败');
return false;
}
gl.useProgram(program);
gl.program = program;
return true;
}
static createProgram(gl, vshader, fshader){
// 创造着色器对象
let vertexShader = RenderTool.loadShader(gl, gl.VERTEX_SHADER, vshader);
let fragmentShader = RenderTool.loadShader(gl, gl.FRAGMENT_SHADER, fshader);
if (!vertexShader || !fragmentShader) {
return null;
}
// 创造 program 对象
let program = gl.createProgram();
if (!program) {
return null;
}
// 绑定着色器与program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
//连接program
gl.linkProgram(program);
// 检查连接结果
let linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
let error = gl.getProgramInfoLog(program);
console.log('连接 program失败: ' + error);
gl.deleteProgram(program);
gl.deleteShader(fragmentShader);
gl.deleteShader(vertexShader);
return null;
}
return program;
}
/**
* 创建着色器
* @param gl
* @param type
* @param source
* @returns {*}
*/
static loadShader(gl, type, source){
// 创建着色器
let shader = gl.createShader(type);
if (shader == null) {
console.log('创建着色器失败');
return null;
}
// Set the shader program
gl.shaderSource(shader, source);
// 编译着色器
gl.compileShader(shader);
// 检查编译结果
let compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
let error = gl.getShaderInfoLog(shader);
console.error('编译着色器失败: ' + error);
gl.deleteShader(shader);
return null;
}
return shader;
}
}
let VSHEADER_SOURCE=
`void main(){
gl_Position = vec4(0.00, 0.00, 0.00, 1.00);
gl_PointSize = 10.0;
}
`;
let FSHEADER_SOURCE=
`void main(){
gl_FragColor = vec4(1.00, 0.00, 0.00, 1.00);
}
`;
function main() {
//获取上下文对象
const canvas = document.querySelector("#glcanvas");
const gl = canvas.getContext("webgl");
//检测WebGL支持
if (!gl) {
console.error("浏览器不支持WebGL");
return
}
if(!RenderTool.initShaders(gl,VSHEADER_SOURCE,FSHEADER_SOURCE)){
console.error("初始化着色器失败");
return
}
//设置背景色
gl.clearColor(0.0, 0.0, 0.0, 1);
//设置缓冲区颜色
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS,0,1);
}
main();
<canvas id="glcanvas">
浏览器不支持Html5 <code><canvas></code> 元素.
</canvas>