WebGL基础篇实战视频课程(自学WebGL绚烂教程)

WebGL是什么？

简而言之，WebGL是新一代Web上的3D图形标准，属于HTML5技术大家族的一员，尽管没有写在官方HTML5上，但是大多数现代浏览器都支持WebGL。

在WebGL出现之前，我们的浏览器只能完成有限的2D体验。

开发者必须依靠插件或安装下载相关软件来实现3D体验。

随着WebGL的出现，传统的2D网络体验将走向丰富动人的3D体验。

技术定义

科纳斯组织开发和维护了WebGL标准，该组织还管理OpenGL。

图形标准规范，如COLLADA。

WebGL的官方定义如下：

>WebGL是免授权费的，跨平台应用程序接口API，它将OpenGLES2.0作为HTML网页中的3D绘图环境，作为低级文档对象模型接口开放。

它利用OpenGL渲染GLSLES语言，并且可以与其它3D内容的上层或下层网页内容整齐地捆绑在一起。

这是一个理想的工具，它使用JavaScript编程开发语言来开发适合动态3D网页应用的语言，并且已经被主流互联网浏览器整合。

以下简单理解：

1、WebGL是一套JavaScript编程接口。

WebGL是JavaScript编程接口，并不依赖于HTML。

其3D渲染类似于使用canvas元素的2D绘画，所有功能都是通过JavaScriptAPI调用的。

只需使用canvas元素，并在此基础上设置一个特殊的绘制语境。

2、基于OpenES2.0的WebGL

OpenGLES是3D渲染标准OpenGL的简化版本，专为小型计算机设备量身定做，目前主流手机和平板电脑都采用OpenGLES进行3D渲染，

WebGL基于OpenGLES制定，更有利于构建跨系统、跨平台、跨浏览器的3DWeb标准。

3、WebGL和其他网络内容可以融合在一起

WebGL可与HTML标签一起使用。

您可以使用传统的HTML元素来制作常规的2D界面，并使用WebGL来开发您的3D图形，浏览器将使用2D。

3D图形有效地整合在一起，为用户提供。

4、WebGL用于构建动态Web应用。

WebGL是为Web交互而生的，能很好地与Web浏览器融合，与JavaScript合作，对Web交互十分友好。

5、WebGL是一个跨平台

无论是windows还是macos，WebGL都可以在任何操作系统中运行。

无论是手机、平板电脑、PC电脑还是智能电视，都可以在任何设备上运行。

6、WebGL是完全免费的

在这里给大家展示一张图片，里面所有的3D图片都是由WebGL完成的新绘制和互动。

下面是小编整理的WebGL课程目录：

01、Hello webgl-第一个webgl程序.mp4

02、绘制一个三角形,并对程序进行分析.mp4

03、显卡内容分配-顶点缓冲区的使用(1).mp4

04、显卡内容分配-顶点缓冲区的使用(2).mp4

05、显卡内容分配-索引缓冲区的使用.mp4

06、shader剖析(1).mp4

07、shader剖析(2).mp4

08、投影的介绍-正交投影(1).mp4

09、投影的介绍-正交投影(2).mp4

10、基本的图元介绍,点,线,面.mp4

11、认识彩色的世界-纹理贴图的介绍(1).mp4

12、认识彩色的世界-纹理贴图的介绍(2).mp4

13、点精灵介绍-绘制飘动的点.(适用纹理方式).mp4

14、多纹理介绍-实现浮动的云.mp4

15、透视投影-进入三维世界.mp4

16、渲染管线的学习.gpu图形卡的绘制基础理论.mp4

17、数学知识学习-三维向量.mp4

20、贴图滤波的学习,贴上图的立方体.mp4

21、压缩纹理格式介绍.mp4

22、键盘的控制,控制三维物体的旋转,缩放,平移-模型矩阵的学习.mp4

23、复合模型变换的学习-模型矩阵的深入理解.mp4

24、混合的学习-透明,半透明的物体.mp4

25、FBO的实现-实现画中画效果,即离线渲染(1).mp4

26、FBO的实现-实现画中画效果,即离线渲染(2).mp4

27、鼠标控制场景.mp4

29、实现__人称摄像机控制.mp4

30、实现__人称摄像机控制(2).mp4

31、第三人称摄像机(1).mp4

32、第三人称摄像机(2).mp4

33、第三人称摄像机-射线法-实现屏幕和世界坐标的相互转换.mp4

34、光照-真实的三维世界.平行光.mp4

35、光照-真实的三维世界-点光源.mp4

36、光照-真实的三维世界-高光.mp4

37、模型的介绍.mp4

39、二进制文件操作.mp4

40、二进制模型文件的加载-显示,以及格式定义.mp4

42、布告板的实现2-风吹草动.mp4

43、顶点状态缓冲区-VAO.mp4

44、场景的管理-节点.mp4

45、场景的管理-包围盒的计算.mp4

46、场景管理-视锥计算-不可见剔除.mp4

47、天空盒子的绘制.mp4

48、粒子效果-爆炸.mp4

50、纯shader实现雾化效果.mp4

52、骨胳动画原理.mp4

渲染管数教学视频截图：