WebGL入门课程02-绘制基本图形
[TOC]
六、WebGL缓冲区对象
- WebGL提供了方便的机制,可以进行一次性向着色器传入多个顶点的数据,叫缓冲区对象
- 准备步骤:
- 设置点的坐标信息
- 关键函数:
new Float32Array([])
- 缓冲区对象是WebGL的一块存储区,创建后才能向其写入顶点数据
- 操作步骤:
- 创建缓冲区对象
- 绑定缓冲区对象
- 将数据写入缓冲区
- 给缓冲区对象分配一个attribute变量
- 开启attitude变量
- 关键函数:
createBuffer()
bindBuffer()
bufferData()
vertexAttributePointer()
enableVertexAttribArray()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓冲区</title>
<style>
#web04{
height: 500px;
width: 750px;
}
</style>
<script src="lib.js"></script>
</head>
<body>
<canvas id="web04"></canvas>
<script>
let canvas=document.querySelector("#web04");
let gl=canvas.getContext('webgl');
let VERTEX_SHADER='' +
'attribute vec4 a_pos;' +
'void main(){' +
'gl_Position=a_pos;' +
'gl_PointSize=15.0;' +
'}';
let FRAG_SHADER='' +
'void main(){' +
'gl_FragColor=vec4(1.0,1.0,0.0,1.0);' +
'}';
let program=initShader(gl,VERTEX_SHADER,FRAG_SHADER);
let dataVertices=new Float32Array([
0.0,0.0,
0.5,0.5,
0.5,-0.5,
-0.5,-0.5,
-0.5,0.5
]);
let buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,dataVertices,gl.STATIC_DRAW);
let a_pos=gl.getAttribLocation(program,'a_pos');
gl.vertexAttribPointer(a_pos,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(a_pos);
gl.drawArrays(gl.POINTS,0,5);
</script>
</body>
</html>
七、绘制基本图形
关键函数:
gl.drwaArray(MODe,FIRST,COUNT);
-
绘制点:gl.POINTS
- 绘制线段、gl.LINES
- 绘制线段带:gl.LINE_STRIP
-
绘制回路:gl.LINE_LOOP
-
绘制三角形:gl.TRANGLES
-
绘制三角带:gl.TRANGLE_STRIP
- 绘制三角扇:gl.TRANGLE_FAN
八、绘制点代码升级
将以后可能会用到的代码抽取为函数:
function initShader(gl,VERTEX_SHADER,FRAG_SHADER) {
let vertex=gl.createShader(gl.VERTEX_SHADER);//创建顶点着色器
let frag=gl.createShader(gl.FRAGMENT_SHADER);//创建片元着色器
gl.shaderSource(vertex,VERTEX_SHADER);//指定点着色器对象
gl.shaderSource(frag,FRAG_SHADER);//指定片元着色器对象
gl.compileShader(vertex);//编译顶点着色器
gl.compileShader(frag);//编译片元着色器
let program=gl.createProgram();//创建程序对象
gl.attachShader(program,vertex);//为程序对象分配顶点着色器
gl.attachShader(program,frag);//为程序对象分配片元着色器
gl.linkProgram(program);//链接程序对象
gl.useProgram(program);//告知使用的对象
gl.clearColor(0.4,0.5,0.6,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
return program;
}
function bufferInit(gl,dataVertices,pt,program) {
let buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,dataVertices,gl.STATIC_DRAW);
let a_pos=gl.getAttribLocation(program,pt);
gl.vertexAttribPointer(a_pos,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(a_pos);
}