webgl 学习第一节（绘制一个点）
最终的效果
相关的HTML
<!DOCTYPE html>
<html lang="en">
<!-- 烟花效果 -->
<head>
<title>test-1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script id="vertexShader" type="x-shader/x-vertex">
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
</script>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<input type=number placeholder="输入0-1之间的数">
<script src="../../lib/webgl-utils.js"></script>
<script src="../../lib/webgl-debug.js"></script>
<script src="../../lib/cuon-utils.js"></script>
<script src="../../lib/cuon-matrix.js"></script>
<script src="main.js"></script>
</body>
<script>
</script>
</html>相关的js
var VSHADER_SOURCE =
'void main(){\n'+
'gl_Position = vec4(0.0,0.0,0.0,1.0); \n'+//设置坐标
'gl_PointSize =10.0; \n'+
'}\n';//因为着色器必须预先处理成单个字符串的形式。
// var FSHADER_SOURCE =
// 'void main() {\n'+
// 'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n'+
// '}\n';
var FSHADER_SOURCE =`
void main() {
gl_FragColor =vec4(1.0,0.0,0.0,1.0);
}
`
function main(){
//
var canvas =document.getElementById('webgl');
var gl =getWebGLContext(canvas);
if(!gl){
console.log('Failded to get the rendering context for WebGL');
return ;
}
//初始化着色器
if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
console.log('Failded to initialize shaders.');
return;
}
gl.clearColor(0.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS,0,1);
}gl.clear(gl.COLOR_BUFFER_BIT);
注意，函数的参数是gl.COLOR_BUFFER_BIT 清空绘图区域，实际上是清空颜色缓冲区
这是因为webgl 中的gl.clear()方法是集成opengl，它基于多基本缓冲区模型。，传递参数gl.COLOR_BUFFER_BIT 就是在高速webgl 清空颜色缓冲区。
注意 VSHADER_SOURCE，FSHADER_SOURCE的最后的’}‘之后别写‘；’，有可能会导致读取报错；
注意 如果不想用+ 号连接字符串的话 es6 支持‘’ 中间写不用+号连接字符串。
VSHADER_SOURCE 顶点着色器 必须包含一个main（）函数。main 前边的void 表示函数不会有返回值。还有不能为，main()指定参数。gl_Pointsition 表示顶点的位置（这里，就是要绘制的点的位置）注意它是必须被赋值的，gl_PointSize 表示点的尺寸。gl_PointSize 如果不赋值 默认是1.0.
FSHADER_SOURCE 片元着色器将带您的颜色赋值给gl_FragColor变量，gl_FragColor是片元着色器唯一的内置变量，它中哟啊控制着像素在屏幕上的最终颜色。
由于给它赋值为（1.0，0.0，0.0，1.0）所以是红色的
gl_drawArrays绘制图形的函数，（mode,first,count）mode指定绘制的方式，可接受一下常量符号：gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP,gl.TRANGLES,gl.TRANGLE_STRIP,gl.TRIANGLE_FAN
first指定从哪个顶点开始绘制（整型数）
count 指定绘制需要用到的顶点数