WebGL 教程 - Web API 接口参考 编辑

WebGL 使得网页在支持HTML <canvas> 标签的浏览器中，不需要使用任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行3D渲染. WebGL 程序由javascript的控制代码，和在计算机的图形处理单元（GPU, Graphics Processing Unit）中执行的特效代码(shader code，渲染代码) 组成. WebGL 元素可以和其他HTML元素混合, 并且会和页面的其他部分或页面背景相合成.

此教程从基础开始讲解如何使用<canvas> 元素来画WebGL 图形. 提供的例子会让你对WebGL有更清晰的认识, 并且会提供代码片段方便你构建自己的内容.

开始之前

使用 <canvas> 元素并不困难，但你需要基本的 HTML 和 JavaScript 知识。一些老浏览器不支持<canvas> 元素和 WebGL，但所有最近的主流浏览器都支持它们.。为了能在canvas中绘制图形，我们使用Javascript的上下文环境（context）对象，此对象可以动态创建图形。

在本教程中

开始WebGL

如何设置WebGL上下文环境.

给WebGL的上下文环境添加2D内容

如何用WebGl渲染简单的平面化图形.

在WebGL中使用着色器(shader)去赋予颜色

演示如何使用着色器给图形添加颜色.

用WebGL让对象动起来

展示如何旋转移动物体来实现简单动画效果.

使用WebGL创建3D物体

展示如何创建并设置一个3D物体动画 (这里使用立方体).

在WebGL中使用纹理贴图(texture)

展示如何投射纹理贴图到物体的各个面.

WebGL中的灯光

如何在WebGL上下文环境中模拟灯光效果.

WebGL中的动画纹理贴图

展示如何让纹理贴图动起来; 在此例中, 会投射一个Ogg格式的视频在一个旋转立方体的各个面上.