资源glMatrix 官网： https://glmatrix.net/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="glMatrix-0.9.6.min.js">
//加载封好的库
//https://glmatrix.net/
</script>
<script>
class WebGLApp {
constructor() {
this.vertexString = `
attribute vec4 pos;
uniform mat4 proj;
void main(void){
gl_Position = proj * pos;
gl_PointSize = 60.0;
}
`;
this.fragmentString = `
void main(void){
gl_FragColor = vec4(0, 0, 1.0, 1.0);
}
`;
this.projMat4 = mat4.create();
this.webgl = null;
}
init() {
this.initWebgl();
this.initShader();
this.initBuffer();
this.draw();
}
initWebgl() {
let webglDiv = document.getElementById("cflCanvas");
this.webgl = webglDiv.getContext("webgl");
this.webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1., 1., this.projMat4);
}
initShader() {
let vsshader = this.webgl.createShader(this.webgl.VERTEX_SHADER);
let fsshader = this.webgl.createShader(this.webgl.FRAGMENT_SHADER);
this.webgl.shaderSource(vsshader, this.vertexString);
this.webgl.shaderSource(fsshader, this.fragmentString);
this.webgl.compileShader(vsshader);
this.webgl.compileShader(fsshader);
if (!this.webgl.getShaderParameter(vsshader, this.webgl.COMPILE_STATUS)) {
var err = this.webgl.getShaderInfoLog(vsshader);
alert(err);
return;
}
if (!this.webgl.getShaderParameter(fsshader, this.webgl.COMPILE_STATUS)) {
var err = this.webgl.getShaderInfoLog(fsshader);
alert(err);
return;
}
let program = this.webgl.createProgram();
this.webgl.attachShader(program, vsshader);
this.webgl.attachShader(program, fsshader);
this.webgl.linkProgram(program);
this.webgl.useProgram(program);
this.webgl.program = program;
}
initBuffer() {
let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0]);
let aPosition = this.webgl.getAttribLocation(this.webgl.program, "pos");
this.webgl.vertexAttrib4fv(aPosition, pointPosition);
let uniformProj = this.webgl.getUniformLocation(this.webgl.program, "proj");
this.webgl.uniformMatrix4fv(uniformProj, false, this.projMat4);
}
draw() {
this.webgl.clearColor(1.0, 0.0, 0.0, 1.0);
this.webgl.clear(this.webgl.COLOR_BUFFER_BIT | this.webgl.DEPTH_BUFFER_BIT);
this.webgl.drawArrays(this.webgl.POINTS, 0, 1);
}
}
window.onload = () => {
const app = new WebGLApp();
app.init();
};
</script>
</head>
<body>
<canvas id="cflCanvas" width="1024" height="720"></canvas>
</body>
</html>
「真诚赞赏，手留余香」
Caofulei
真诚赞赏，手留余香
使用微信扫描二维码完成支付
