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

webgl 学习第一节（绘制一个点）

猜你喜欢