webgl第二课-绘制一个点

需要源码可以Q群：828202939 或者点击这里希望可以和大家一起学习、一起进步！！纯手打！！

书籍是PDF电子档，也在Q群里，所有的课程源代码在我上传的资源里面，本来想设置开源，好像不行！

如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！

本文开始涉及着色器，开始看不懂没关系，后面博客会详细讲解

目前阶段你只要知道用就可以了！

代码展示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>绘制一个点</title>
  </head>

  <body onload="main()">
    <canvas id="webgl" width="400" height="400">
    请使用支持的webgl的浏览器
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="HelloPoint1.js"></script>
  </body>
</html>

// 顶点着色器程序
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';

function main() {
  // 获取canvas元素
  var canvas = document.getElementById('webgl');

  // 获取webgl绘图上下文
  var gl = getWebGLContext(canvas);
	//检测浏览器是否支持webgl
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // 初始化着色程序
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // 设置canvas的背景色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // 清空canvas
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 绘制一个点，这个点是10个像素点大小的矩形，之所以是这样，是因为绘制矩形要比圆形快
  gl.drawArrays(gl.POINTS, 0, 1);
}

运行结果：

webgl第二课-绘制一个点

猜你喜欢