一、介绍
WebGL 是基于 OpenGL ES 的面向 web 端的 GPU 计算库,简单来说就是网页浏览器能够调用 GPU 的计算库。
WebGL网页组成成分:HTML5、JavaScript和GLSL ES(着色器语言 OpenGL ES);
二、用法
- WebGL采用H5中的元素来定义绘图区域,然后通过JavaScript内嵌GLSL ES在canvas中绘制三维图形。
1、创建HTML5 canvas
html
<canvas id="canvas" width="200px" height="200px"></canvas>
2、获取WebGL
js
var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');
3、着色器
js
window.onload = function () {
//顶点着色器程序
var VSHADER_SOURCE =
"void main() {" +
//设置坐标
"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
//设置尺寸
"gl_PointSize = 10.0; " +
"} ";
//片元着色器
var FSHADER_SOURCE =
"void main() {" +
//设置颜色
"gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
"}";
//编译着色器
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, VSHADER_SOURCE);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, FSHADER_SOURCE);
gl.compileShader(fragShader);
//合并程序
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
//绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}
参考文章 - 《WebGL 的简要入门》