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

学习交流欢迎加群: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的程序组成如下图所示: 
第一节 关于WebGL的一些基础性介绍_第1张图片

程序代码结构如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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开发: 
第一节 关于WebGL的一些基础性介绍_第2张图片

由babylon.js开发: 

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

6.参考教材

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

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

你可能感兴趣的:(WebGL入门,webgl基础介绍,webgl开发,webgl参考教材)