WebGL-绘制三角形
2020-03-14 本文已影响0人
写前端的大叔
在WebGL中，绘制三角形是很常的，是绘制其它复杂图形的基础，因为其它图形都是由三角形组成的，像矩形，是由两个三角形构成的，在绘制一个矩形时，需要绘制两个三角形，这里来介绍下怎么绘制三角形，绘制三角形需要以下10步来完成。
- 第一步：获取canvas
- 第二步：获取webgl
- 第三步：创建着色器程序
- 第四步：编译着色器
- 第五步：合并程序
- 第六步：创建顶点坐标
- 第七步：创建缓冲区
- 第九步：设置背影颜色
- 第十步：绘制三角形
绘制出来的三角形如下所示：
三角形.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webgl</title>
</head>
<style>
#canvas {
border: 1px solid red;
width: 500px;
height: 500px;
}
</style>
<body>
<canvas id='canvas'></canvas>
</body>
<script>
init();
function init() {
//第一步：获取canvas
let canvas = document.getElementById('canvas')
//第二步：获取webgl
let gl = canvas.getContext('webgl');
if (!gl) {
alert('浏览器不支持webgl');
return;
}
//第三步：创建着色器程序
//顶点着色器
let VSHADER_SOURCE = `
attribute vec3 a_Position;
void main(){
gl_Position = vec4(a_Position,1.0);
}
`
//片段着色器
let FSHADER_SOURCE = `
//设置中等精度
precision mediump float;
void main(){
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`
//第四步：编译着色器
//1.创建着色器
let vShader = gl.createShader(gl.VERTEX_SHADER);
if (!vShader) {
alert('创建着色器失败')
return;
}
//2.上传代码
gl.shaderSource(vShader, VSHADER_SOURCE);
//3.编译代码
gl.compileShader(vShader);
let fShader = gl.createShader(gl.FRAGMENT_SHADER);
if (!fShader) {
alert('创建着色器失败')
return;
}
gl.shaderSource(fShader, FSHADER_SOURCE);
gl.compileShader(fShader);
//第五步：合并程序
//1.创建程序
let program = gl.createProgram();
//2.链接着色器
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
// 连接失败的检测
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
alert("链接失败");
return;
}
//3.使用程序
gl.useProgram(program);
//第六步：创建顶点坐标
var count = 3;
var vertices = new Float32Array([
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
]);
//第七步：创建缓冲区
//1.创建
var vertexBuffer = gl.createBuffer();
//2.绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
//3.向缓冲区写数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
//第八步：获取坐标点并赋值
let a_Position = gl.getAttribLocation(program, 'a_Position');
if (a_Position < 0) {
alert('没有获取到坐标点')
return;
}
gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, 0, 0);
//连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position);
//第九步，设置背影颜色
gl.clearColor(1.0, 1.0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
//第十步，绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, count)
}
</script>
</html>
