WebGL绘制个最简单的三角形
2019-12-11 本文已影响0人
jadefan
在webgl中的hello world就是绘制个三角形，本例绘制了一个最简单的三角形
效果图：
代码：
<body>
<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-webgl">
attribute vec2 position;
void main(){
gl_Position = vec4(position, 0.0, 1.0);
}
</script>
<script id="fragmentShader" type="x-weggl">
#ifdef GL_ES
precision mediump float;
#endif
uniform vec4 uColor;
void main(){
gl_FragColor = uColor;
}
</script>
<script>
// 获取着色器代码
var vertexGlsl = document.getElementById('vertexShader').text;
var fragmentGlsl = document.getElementById('fragmentShader').text;
var canvas = document.getElementById('canvas');
// 获取webgl上下文
var gl = canvas.getContext('webgl');
// 判断是否支持
if (!gl) {
console.log("不支持webgl");
}
// 用指定颜色清理画布
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 编译着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexGlsl);
gl.compileShader(vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentGlsl);
gl.compileShader(fragmentShader);
// 错误检测
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(vertexShader));
}
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(fragmentShader));
}
// 链接着色器
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 错误检测
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
alert(gl.getProgramInfoLog(program));
}
// 顶点定义
var vertices = new Float32Array([
0, 0.5,
0.5, -0.5,
-0.5, -0.5
]);
// 顶点缓冲区
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 颜色传值
var uColor = gl.getUniformLocation(program, 'uColor');
gl.uniform4fv(uColor, [1.0, 0.0, 0.0, 1.0]);
// 顶点传值
var position = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(position);
// 图形绘制
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
