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 指定绘制需要用到的顶点数