一、WEBGL入门

一、介绍

今天写一个最简单的WebGL程序，不涉及着色器；主要是获取webgl上下文，并认识该上下文中的一些简单接口。
示例的html文件（本篇未列出）只包含一个canvas元素，id'为webgl'；
js中根据id获取canvas元素；再从canvas元素上获取上下文，从上下文中获取内置函数绘制图形。
该过程与二维图形相同，区别仅在于绘制getContext()的参数，参数为'2d'代表二维，'webgl'代表三维。

二、代码示例

#获取canvas元素
var canvas = document.getElementById('webgl');
#向该元素请求绘图上下文，可从绘图上下文中调用响应的绘图函数，绘制图形
var gl = canvas.getContext('webgl');

//指定清除颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//清空颜色缓冲区
gl.clear(gl.COLOR_BUFFER_BIT);

调用gl.clearColor()时，颜色会贮存在WebGL系统中，直到下一次调用gl.clearColor()

内置方法

gl.clear(buffer)

将指定缓冲区设为预定的值

基本缓冲区分类

• 颜色缓冲区
• 深度缓冲区
• 模板缓冲区