前言

近年来 VR，AR等技术开启了人们对下一代人机交互体验的憧憬，其革命性突破的核心之一是计算机图形学。随着硬件和理论算法的快速发展，更加良好的交互体验得以被满足，而同时微软苹果 Nv 等大厂也在该领域进行积极探索。

移动互联网的兴起，也促进着前端的崛起，前端人员需求不断，同时前端的具体职责，技术栈，技术框架更新及其频繁，带动着 Web 技术飞速发展。其中图形学作为重要的一环，以 SVG, Canvas2D, Canvas3D 等形式助力 Web 端，为其带来高效的图形交互体验。

而 2011 年发布的 WebGL 1.0 伴随 DOM 元素 Canvas 出现，为 Web 端的图形渲染提供了强劲支持。WebGL 1.0 基于 OpenGL ES 2.0，OpenGL ES 2.0 其本身是针对移动端定制的 OpenGL 轻量版的图形接口，浏览器将其封装成 WebGL，通过 JavaScript API 的方式供前端开发者使用。

由于 OpenGL ES 的兼容性强，可以在大多数移动设备（手机，平板）和线下 IoT 设备上稳定运行。同时浏览器厂商又可以确保运行环境的稳定性，提供现成的调试工具，使得用户可以忽略硬件兼容性问题，驱动问题，开发环境部署问题，开发者只需要一个文本编辑器就可以开发图形应用，并且可以通过 Web 广泛传播。WebGL 为 Web 端图形应用提供了更多可能性，无论是实时渲染还是 GPU 加速计算，WebGL 无疑扮演者重要的角色。

WebGL 本质上还是底层的图形 API，虽然使用的是 JavaScript 语言，从语言层面减少了学习成本，但是想要很好的地运用，需要一定的图形学基础以及当前主流的光栅化渲染管线经验，使用难度较高，需要的前置知识也比较多。

所以有时会遇到有人问这样的问题，为什么我用 WebGL 实现的应用性能还不如 Canvas2D API ? Canvas 2D 提供的 API 简单易用，但是数量很少，针对这些使用情况的底层优化比较可控，所以浏览器会帮你把优化做好。但是当使用 WebGL 时，面对的是更底层接口，也提供了更多渲染特性，当实现功能时没有相关经验，优化没有做好，很有可能实现简单程序的性能不如 Canvas 2D。

回看国内的WebGL现状: 缺乏积极活跃的社区；优秀的教程资源较少；多数教程以基础入门为主，缺乏进阶的教程和实战的内容分享，许多人入门后水平难以提高；许多教程资源以 THREE.js 等图形框架为主，缺乏深入底层的教程。

此专栏的目的就在此，无论是基础原理还是代码实现，此专栏将由浅入深，结合最新的前端技术与图形理念，淘汰过时的理论和方法，从本质出发，给前端从业者普及图形渲染背后的原理，给图形从业者传输一些 Web 端的奇技淫巧。

本专栏的规划：翻译一系列国外的教程和资源，包括基础的 WebGL 教程和进阶水平的 WebGL-Next，WebGL-insight 等，并加上译者评注和见解。不定期发布原创文章，包含图形学基本原理和进阶原理，web端实战经验等等，总的来说就是有浅有深，可入门可进阶。另外欢迎志同道合者进行投稿，欢迎加入钉钉群交流(为什么是钉钉群？因为钉钉是一个工作方式)：