WEBGL入门的基础介绍

 

目录

WebGL基本介绍

概述

WebGL的特性

图形硬件的介绍

WebGL开发入门

WebGL绘制图形抽象过程

基于WebGL封装的框架

WebGL坐标系基础

视变换

投影变换

视口变换

实例演示（使用ThreeJS)

光照

光照类型

光照的原理（漫反射）

光照的原理（环境反射）

光照效果的对比

纹理映射

图片纹理

凹凸纹理

环境贴图

开发调试与优化技巧

开发与调试工具

优化技巧

---

前段时间，给部门的前端同事分享了一节关于WebGL基本入门的课程，在此分享到博客里。内容都是简单的内容，对于了解WebGL的伙伴应该能带来有用的地方。

WebGL基本介绍

概述

     WebGL是一个用来在Web上生成三维图形效果的应用编程接口。它是以OpenGL ES 2.0为基础的。与OpenGL 一样，它也提供绘制（Rendering（API））功能，但是它应用在HTML和JavaScript上下文中（HTML5 Canvas提供了硬件3D加速渲染）。

因为，WebGL直接使用浏览器提供的图形编程接口，所以，比一般的插件要运算的快。

WebGL的特性

1. WebGL是一个开放的标准，任何人都可以使用，不需要支付任何版权费
2. WebGL利用图形硬件加速图形绘制，这意味着它的速度确实很快（对比使用插件的方式）
3. WebGL可以在支持它的本地浏览器上运行，不需要任何插件
4. 由于WebGL是以OpenGL ES 2.0为基础的，因此对于具有OpenGL ES 2.0编程经验的开发人员而言，甚至对于熟悉台式机OpenGL开发的人们而言，它是容易学习的

图形硬件的介绍

WebGL是一个低级的API，在Web浏览器中运行的WebGL应用程序的硬件运行，如下图：

帧缓存相当于GPU里面的主存（高速缓存）作用（常称“显存”）

GPU的渲染也是一个流水线形式，详细的内容可以参考百度，这里不做详细介绍。渲染管线是WebGL入门的基础！！

WebGL开发入门

WebGL是即时模式的API，对于每一帧的场景，不管对象是否改变，都需要根据场景的状态进行重绘。所以，三维图形开发都是实时性很强的。以下给出使用WebGL绘制一个点的示例程序：

// 顶点着色器程序
var VSHADER_SOURCE = 
  'attribute vec4 a_Position;\n' + // attribute variable
  'void main() {\n' +
  '  gl_Position = a_Position;\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() {
           var canvas = document.getElementById('webgl');
           var gl = getWebGLContext(canvas);

  // 初始化WebGL着色器程序  
           if (!initShaders(gl,  VSHADER_SOURCE,  FSHADER_SOURCE)) {
                console.log('Fail