第一节关于WebGL的一些基础性介绍

来源：互联网发布：python 区分中英文编辑：程序博客网时间：2024/05/17 09:02

1.什么是WebGL

百度百科给出的解释是：WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，而且不需要任何插件就可以在浏览器端运行。以上定义总结为三点：
(1) WebGL是一种应用于前端的绘图协议；
(2) WebGL以HTML为框架，结合OpengGL ES 2.0 + Javascript进行开发；
(3) 直接调用本机GPU进行3D硬件加速，不需任何插件。

2.开发环境

WebGL对开发环境的要求不是太高，一般只需要一个文本编辑器和一个支持WebGL的浏览器即可，现在主流的浏览器基本都支持WebGL，像google chrome、firefox、safari、Opera、IE10+和win10自带的Edge浏览器都已经支持WebGL，其中以google chrome支持程度最好，其次是firefox,故无论学习练习，还是开发，都建议使用这两款浏览器。因为WebGL主要用JavaScript(以下简称js)进行开发，故用于开发js的IDE都可以用于开发WebGL，推荐两款个人较为喜欢的软件，webstorm和sublime Text。

3.程序文件构成

WebGL的程序组成如下图所示：
这里写图片描述

程序代码结构如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script src="调用文件的路径"></script><script>/*在这里加入JavaScript代码*/</script></body></html>

4.WebGL与着色器(shader)

shader有自己的语言，叫OpenGL Shader Language，简称GLSL；WebGL用的着色器语言正是来自OpenGL ES 的着色器语言：GLSL ES；两者并没有多大差别，都可为WebGL三维图形开发提供强大的渲染，只不过GLSL适应于电脑客户端的开发，在功能上要强大许多，而GLSL ES由GLSL精简而来。所以WebGL的开发可以这样简单概括：HTML5 + JavaScript + OpengGL ES 2.0 + shader。后续章节我们将对着色器做更详尽的介绍。

5.WebGL的JavaScript库

这里给大家介绍两个比较好强大可好用的WebGL的js库，babylon.js(官网：http://www.babylonjs.com/)，three.js(https://threejs.org/)，这两个js库功能强大，基本封装了WebGL所能实现的功能，绘制渲染场景。最重要的是这两个库大大方便了那些想学WebGL而编程基础不好的人群，使开发三维应用程序变得更简单，使用者只需要知道简单的js，顺带了解一些HTML5(仅仅了解即可)，就可以开发处绚丽多彩的网页3D场景。用了这些库，并不需要你去了解底层的东西。如果你想学习原生WebGL，那底层的东西就必须好好学。下面是用js库开发出来的场景截图：

由three.js开发：
这里写图片描述