瞅瞅流程图
对于前端来说，要学习webgl还要学习OpenGL ES语言，链接贴在这里了www.bimant.com/docs/glsl-e…
绘制点流程
-
canvas是基础，所以创建一个canvas画布
-
canvas.getContext('webgl')，返回对象具有一系列绘制渲染三维场景的方法，也就是WebGL API
-
顶点着色器定义了顶点的渲染位置和点的大小，片元着色器定义了点的颜色
-
初始化着色器
- 分别创建顶点着色器和片元着色器对象， 创建函数
gl.createShader(xxx) - 引入顶点着色器和片元着色器代码，
shaderSource - 编译顶点/片元着色器，
compileShader - 创建program，
createProgram - 附着顶点着色器和片元着色器到program，
attachShader - 链接program，
linkProgram - 使用program，
useProgram - return
- 分别创建顶点着色器和片元着色器对象， 创建函数
-
绘制结果，
drawArrays
绘制点代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用WebGL绘制一个点</title>
</head>
<body>
<!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
<canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
<script>
//通过getElementById()方法获取canvas画布
var canvas=document.getElementById('webgl');
//通过方法getContext()获取WebGL上下文
var gl=canvas.getContext('webgl');
//顶点着色器源码
var vertexShaderSource = '' +
'void main(){' +
//给内置变量gl_PointSize赋值像素大小
' gl_PointSize=20.0;' +
//顶点位置，位于坐标原点
' gl_Position =vec4(0.0,0.0,1.0,1.0);' +
'}';
//片元着色器源码
var fragShaderSource = '' +
'void main(){' +
//定义片元颜色
' gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
'}';
//初始化着色器
var program = initShader(gl,vertexShaderSource,fragShaderSource);
//开始绘制，显示器显示结果
gl.drawArrays(gl.POINTS,0,1);
//声明初始化着色器函数
function initShader(gl,vertexShaderSource,fragmentShaderSource){
//创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
//创建片元着色器对象
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
//引入顶点、片元着色器源代码
gl.shaderSource(vertexShader,vertexShaderSource);
gl.shaderSource(fragmentShader,fragmentShaderSource);
//编译顶点、片元着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
//创建程序对象program
var program = gl.createProgram();
//附着顶点着色器和片元着色器到program
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
//链接program
gl.linkProgram(program);
//使用program
gl.useProgram(program);
//返回程序program对象
return program;
}
</script>
</body>
</html>
