《WebGL编程指南》学习--绘制点

最新推荐文章于 2022-05-19 11:52:21 发布

原创最新推荐文章于 2022-05-19 11:52:21 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webgl #gis

webgl 同时被 2 个专栏收录

43 篇文章

订阅专栏

vue

12 篇文章

订阅专栏

本文介绍如何使用WebGL编程绘制首个屏幕上的点，包括HTML与JavaScript代码配置、顶点与片元着色器编写，以及颜色与点大小的设定。通过实践操作，读者能快速掌握WebGL的基本原理。

最近打算学习《WebGL编程指南》一书，并记录本人的心得体会。文中部分代码及截图源自《WebGL编程指南》。

绘制一个点

1、html文件中的代码：

<body onload="main()">
    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    </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>

1行初始化时载入JavaScript中的main函数

2-4行是定义一个canvas绘图区，用于显示webgl生成的图像

6-8行是封装的webgl库

9行是自定义的绘制一个点的代码

2、HelloPoint1.js代码

//顶点着色器
var VSHADER_SOURCE = 
  'void main() {\n' +
  '  gl_Position = vec4(0.5, 0.5, 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上下文信息，getWebGLContext函数源自cuon-utils.js
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // 初始化shader，initShaders函数源自cuon-utils.js
  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);

  // 设置颜色缓存
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 绘制点
  gl.drawArrays(gl.POINTS, 0, 1);
}

1-6行定义顶点着色器，gl_Position和gl_PointSize为webgl内置变量，分别代表绘制的位置和点的大小。

8-12行定义片元着色器，gl_FragColor 为webgl内置变量，代表绘制的颜色。

18-34行为设置webgl环境

37行绘制点。

3.运行代码效果

改变背景为绿色，点的颜色为蓝色。代码

var FSHADER_SOURCE =
  'void main() {\n' +
  '  gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);\n' + 
  '}\n';


gl.clearColor(0.0, 1.0, 0.0, 1.0);

效果

4、其他知识

4.1 webgl为右手坐标系

4.2 canvas与webgl坐标关系图