目录
前段时间,给部门的前端同事分享了一节关于WebGL基本入门的课程,在此分享到博客里。内容都是简单的内容,对于了解WebGL的伙伴应该能带来有用的地方。
WebGL基本介绍
概述
WebGL是一个用来在Web上生成三维图形效果的应用编程接口。它是以OpenGL ES 2.0为基础的。与OpenGL 一样,它也提供绘制(Rendering(API))功能,但是它应用在HTML和JavaScript上下文中(HTML5 Canvas提供了硬件3D加速渲染)。
因为,WebGL直接使用浏览器提供的图形编程接口,所以,比一般的插件要运算的快。
WebGL的特性
- WebGL是一个开放的标准,任何人都可以使用,不需要支付任何版权费
- WebGL利用图形硬件加速图形绘制,这意味着它的速度确实很快(对比使用插件的方式)
- WebGL可以在支持它的本地浏览器上运行,不需要任何插件
- 由于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