本文作者 GeekPlux，首发于前端外刊评论-Web 前端中的增强现实（AR）开发技术，博客地址：http://geekplux.com/2018/01/18/augmented-reality-development-tech-in-web-frontend.html。注明…

在前端领域我们可以通过四种方式来绘制图形，包括 HTML+CSS、SVG、Canvas2d 还有 WebGL，其中 WebGL 属于非常少用的一种绘图方式，尽管如此，其却有着无可替代的位置。接下来，让我们从这四种绘图方式开始，来了解下 WebGL 吧。 HTML+CSS 是最常…

一、首先新建一个<canvas>网页元素。 上面代码中，如果浏览器不支持这个API，则就会显示<canvas>标签中间的文字——“您de浏览器不支持canvas！”。 每个canvas节点都有一个对应的context对象（上下文对象），Canvas API定义在这个contex…

1. Webgl 是什么？ 前端使用场景有哪些？ webgl （web图形库），是根据 OpenGL ES 2.0来实现的一套 JavaScriptAPI，可以在浏览器中渲染交互式3D和2D图形。该API可以在HTML5 canvas 元素中使用，可以利用用户设备的 GPU 加…

上一节，我们了解了如何画一个点，学习了绘制点用到的顶点着色器和片元着色器，以及绘制的核心方法gl.drawArrays()。 但这只是绘制了固定位置的点，并且将点的位置写死(硬编码)在了顶点着色器中，这样易于理解，但是不够灵活。这一节中，我们将学习把点的位置传给顶点着色器的方法…

上一节中，我们学习了缓冲区对象，可以一次性向顶点着色器传递大量的数据，这样就可以画出复杂的图形。这节我们就利用缓冲区对象绘制三角形。 在 WebGL 中的 gl.drawArrays() 既强大又灵活，通过第一个参数 mode 指定不同的值，我们就可以绘制7中不同的图形。

在上一节中，展示了画多个点的一个例子，将数据存储在数组中，然后循环绘制每一个点。不过这种方式只能绘制点，由多个顶点组成的图形，比如三角形、长方形，需要一次把所有的顶点数据传递给顶点着色器才能绘制出来，用数组的方式一个一个点传进去就没办法实现了。不过，WebGL 提供了缓冲区对象…

后面的示例入口都是以这个html页面为样板。 其中 webgl-utils.js 、webgl-debug.js、cuon-utils.js 等，都是这本书配套的工具方法。 相关源码我自己做了收藏，可以再这里下载。《WebGL 编程指南》书中涉及的源码 可以直接使用 canva…

1.概念WebGL是用于基于OpenGLES的低级3D图形API的跨平台，免版税的Web标准，并通过HTML5Canvas元素公开给ECMAScript。链接熟悉OpenGLES2.0的开发人员将We