WebGL(Web Graphics Library)是HTML5规范中的一部分,可以用来渲染三维场景。
WebGL源自OpenGL ES(OpenGL for Embedded Systems 是OpenGL三维图形API的子集)。
示例代码
// 创建canvas
function createCanvas(width, height) {
var canvas = document.createElement("canvas");
canvas.width = width || 300;
canvas.height = height || 300;
return canvas;
}
// 创建着色器
function createShader(webGL, source, type) {
var shader = webGL.createShader(type);
webGL.shaderSource(shader, source);
webGL.compileShader(shader);
return shader;
}
// 初始化webGL
function initWebGL(canvas) {
var webGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (!webGL) {
console.log("当前浏览器不支持WebGL,请切换到支持WebGL的浏览器,比如Chrome");
return null;
} else {
return webGL;
}
}
// 创建矩形
function drawRect(webGL, program) {
var buffer = webGL.createBuffer();
webGL.bindBuffer(webGL.ARRAY_BUFFER, buffer);
webGL.bufferData(
webGL.ARRAY_BUFFER,
new Float32Array([-1.0, -1.0,
1.0, -1.0, -1.0, 1.0, -1.0, 1.0,
1.0, -1.0,
1.0, 1.0
]),
webGL.STATIC_DRAW
);
// vertex data
var positionLocation = webGL.getAttribLocation(program, "a_position");
webGL.enableVertexAttribArray(positionLocation);
webGL.vertexAttribPointer(positionLocation, 2, webGL.FLOAT, false, 0, 0);
}
// 入口函数
function init() {
var canvas = createCanvas(),
VER_SHADER_SRC = "attribute vec4 a_position;\n" +
"void main() {\n" +
"gl_Position = a_position;\n" +
"}",
FRAG_SHADER_SRC = "precision mediump float;\n" +
"void main() {\n" +
"gl_FragColor = vec4(1, 0, 0.5, 1);\n" +
"}";
document.body.appendChild(canvas);
var webGL = initWebGL(canvas);
if (webGL) {
webGL.clearColor(0.0, 0.0, 0.0, 1.0);
webGL.clear(webGL.COLOR_BUFFER_BIT | webGL.DEPTH_BUFFER_BIT);
var vertex = createShader(webGL, VER_SHADER_SRC, webGL.VERTEX_SHADER),
frag = createShader(webGL, FRAG_SHADER_SRC, webGL.FRAGMENT_SHADER);
var program = webGL.createProgram();
webGL.attachShader(program, vertex);
webGL.attachShader(program, frag);
webGL.linkProgram(program);
webGL.useProgram(program);
drawRect(webGL, program);
webGL.drawArrays(webGL.TRIANGLES, 0, 6);
}
}
代码说明
WebGLShader(WebGL着色器),WebGL只关心两件事:位置坐标与颜色,所有WebGL程序都是基于这两个元件来构造的,常用的方法是使用两个着色器来实现:
- 顶点着色器(vertex shader):返回位置坐标
- 像素着色器(fragment shader):返回颜色
vec4()构造函数用于生成颜色,示例代码中vec4(1, 0, 0.5, 1)的数字的含义:
- 第一个1:代表红色
- 0:代表绿色
- 0.5: 代表蓝色
- 第二个1:代表alpha
在WebGL中颜色的取值范围是0到1.
具体方法:
- createShader:生成相应类型的WebGLShader
- compileShader:编译着色器
WebGLProgram(WebGL环境)着色器编译完后,需要将着色器链接到WebGLProgram:
- createProgram:创建一个WebGL环境
- attachShader:附加着色器
- linkProgram:将着色器连接到WebGL环境中
提供数据:
- getAttribLocation:从当前环境中寻找定义的属性,即查找示例中初始化顶点着色器时定义的a_position。
- createBuffer:创建buffer(缓存区)
- bindBuffer:声明变量,并指向上一步创建的buffer
- bufferData:赋值数据到指定变量,比如示例中的ARRAY_BUFFER
清空canvas:
- clearColor:
- clear:
使用创建的WebGL环境:将当前的WebGL环境告知GPU程序
- useProgram:
告知WebGL从buffer中获取数据的方式:
- enableVertexArribArray:激活属性
- vertexAtrribPointer:获取数据
绘制图形:WebGL执行GLSL程序
- drawArrays:这是WebGL提供的一个渲染函数