index.html
<!DOCTYPE html>
<html>
<head>
<meta lang="en">
<meta charset="UTF-8">
<title>webgl绘制三角形</title>
<style>
body{
margin:0;
}
canvas{
border:1px solid #999;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
index.js
// 顶点着色器程序
var VSHADER_SOURCE =`
attribute vec4 a_Position;
void main() {
//设置坐标
gl_Position = a_Position;
}
`;
// 片元着色器
var FSHADER_SOURCE =`
void main() {
//设置颜色
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
}
`;
// 获取canvas元素
var canvas = document.getElementById('canvas');
// 获取绘制二维上下文
var gl = canvas.getContext('webgl');
if (!gl) {
console.log("Failed");
}
/* 编译着色器 */
var vertShader = gl.createShader(gl.VERTEX_SHADER); // 创建Shader对象
gl.shaderSource(vertShader, VSHADER_SOURCE); // 将写好的着色器附加到Shader上
gl.compileShader(vertShader); // 编译程序
var fragShader = gl.createShader(gl.FRAGMENT_SHADER); // 创建Shader对象
gl.shaderSource(fragShader, FSHADER_SOURCE); // 将写好的着色器附加到Shader上
gl.compileShader(fragShader); // 编译程序
/* 合并程序 */
var shaderProgram = gl.createProgram(); // 创建一个程序对象
gl.attachShader(shaderProgram, vertShader); // 附加着色器
gl.attachShader(shaderProgram, fragShader); // 附加着色器
gl.linkProgram(shaderProgram); // 链接着色器
gl.useProgram(shaderProgram); // 使用程序
//获取坐标点
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
var n = initBuffers(gl,shaderProgram);
// 清除指定<画布>的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空 <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, n);
/**
* 初始化缓冲
* @param {} gl
* @param {*} shaderProgram
*/
function initBuffers(gl, shaderProgram) {
var vertices = new Float32Array([
-0.5,-0.5,-0.5,0.5,0.5,-0.5
]);
var n = 3;// 点的个数
// 创建缓冲区对象
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log("Failed to create the butter object");
return -1;
}
// 将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 向缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 获取坐标点
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
// 将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// 连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position);
return n;
}
