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

灰太狼 2022-06-05 04:10 324阅读 0赞

## 学习交流欢迎加群：789723098，博主会将一些demo整理共享 ##

## 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的程序组成如下图所示：   
![这里写图片描述][SouthEast]

程序代码结构如下：

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

由three.js开发：   
![这里写图片描述][SouthEast 1]

由babylon.js开发：   
![这里写图片描述][SouthEast 2]

***three.js的开发请参考我博客上另外的分栏[点击打开链接][Link 1]，里面有一些demo的分享。***

## 6.参考教材 ##

(1) 《WebGL编程指南》(Kouichi Matsuda 和 Rodger Lea 编著);   
(2) 《交互式计算机图形学–基于WebGL的自顶向下方法》(Edward Angle 和 Dave Shreiner 编著)；   
(3) 《Three.js开发指南》(Jos Dirksen编著);

就先这样，后续有需要补充的，再继续完善，也欢迎大家多提建议，一起学习，一起进步！

[SouthEast]: /images/20220605/ce389c1a246f4e9d9cec0cc167943775.png
[http_www.babylonjs.com]: http://www.babylonjs.com/
[https_threejs.org]: https://threejs.org/
[SouthEast 1]: /images/20220605/ad18d524cd69454a86fe886ea58bd912.png
[SouthEast 2]: /images/20220605/d71bbaf990374ef19dee06d90e74f0f3.png
[Link 1]: http://blog.csdn.net/qq_37338983/article/category/7009835