WebGL 入门-WebGL简介与3D图形学

什么是WebGL?

WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3D场景和对象。

WebGL基于OpenGL ES 2.0,OpenGL ES 是 OpenGL 三维图形 API 的子集,针对手机、平板电脑和游戏主机等嵌入式设备而设计。浏览器内核通过对OpenGL API的封装,实现了通过JavaScript调用3D的能力。WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中。

WebGL标准由科纳斯组织(Khronos Group)开发和维护,Google、Mozilla、Opera和Apple 等浏览器厂商都是其中的成员,为这一标准做出了显著贡献。

WebGL支持现状

目前所有的主流桌面浏览器都已经支持WebGL,但手机端的浏览器只有部分最新版支持。

桌面浏览器

  • Mozilla Firefox 4+
  • Google Chrome 8+
  • Internet Explorer 11+
  • Safari 5.1+
  • Opera 12+

移动浏览器

  • Firefox 25+
  • Google Chrome 31+
  • Opera Mobile 12+
  • Android Browser 暂不支持
  • iOS Safari暂不支持
  • IE Mobile 暂不支持

3D图形学

在真正开始学习WlebGL之前,我们还要改了解下3D图形学,有助于接下来的3D图形编程。

3D坐标系

笛卡儿坐标系相比大家都很熟悉,即数学中常见的直角坐标系,由两条互相垂直的坐标轴组成,通常标记为x轴和y轴。这种坐标系可以用于定义页面中元素的坐标位置。

而在绘制3D图形时,除了x轴和y轴,我们还需要一个z轴,用于表示深度,即3D物体距离屏幕的距离。

点、线、面和网格

3D空间内的所有物体都是由点、线及面组成。一个点由3个值组成 - x、y、z,表示3D空间内的唯一位置。2个点可以连成一条线,3个点我们就可以形成一个平面。多个面相互拼接就组成了网格。

我们常见的球体看起来很圆滑,其实是由很多个点、线、面组合而成的。

纹理贴图及材质

网格本身是没有纹理和材质的。

纹理可以定义一个网格表面的外观,可以是纯色或者是填充位图,甚至更加复杂。

材质就是网格表面的特性,模型外表是否透明、是否会反射等都是通过网格的材质所定义的。

变换和矩阵

3D网格的形状由顶点位置决定。模型变换就是利用矩阵对模型的大小、位移、旋转等进行操作。如果你不了解矩阵也无须担心,许多WebGL库都能帮助我们完成相应的操作。

摄像机、视口和投影

我们在Canvas上看到的3D空间并非一个真实的3D空间,而是用数学算法将模拟的3D空间投射到2D视口的图像而已。投影就是将模拟的三维空间内的物体映射到屏幕上生成一个二维图像的过程。投影分为正交投影和透视投影,这也就是摄像机的实现原理。

摄像机是用户观察场景的眼睛,摄像机的视野决定了透视关系和我们在Canvas上看到的内容。

着色器

为了最终的渲染模型,开发者必须精确的定义定点、变换、材质和相机之间的关系。这就是由着色器来完成的。着色器包含了将模型投射到屏幕上的算法,通常是由类C语言编写,编译并运行在图形处理单元(GPU)中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C# 编程

C# 读取XML文件示例

有关XML文件编写规范,请参考:http://www.w3school.com.cn/xml/index.asp XML内容如下(文件名为:Informatio...

2100
来自专栏码匠的流水账

zuul自定义SimpleHostRoutingFilter

zuul的SimpleHostRoutingFilter主要用来转发不走eureka的proxy,里头是使用httpclient来转发请求的,但是有时候我们需要...

1292
来自专栏菩提树下的杨过

Silverlight:利用异步加载Xap实现自定义loading效果

关键点: 1.利用WebClient的DownloadProgressChanged事件更新下载进度 2.下载完成后,分析Xap包的程序集Assembly信息 ...

18610
来自专栏王磊的博客

MySQL数据库工具类之——DataTable批量加入MySQL数据库(Net版)

MySQL数据库工具类之——DataTable批量加入数据库(Net版),MySqlDbHelper通用类希望能对大家有用,代码如下: using MySql....

3629
来自专栏c#开发者

xmldocument内嵌入另一个xmldocument,xmlnode的方法

string xmlstr1 = @"<root><head>myHead</head><body></body></root>"; s...

2715
来自专栏田超学前端

【微信小程序】c# 实现获取openid、session_key 服务端

5100
来自专栏Golang语言社区

GO语言 TCP传输实例

package main import ( "net" "fmt" ) var ( maxRead = 1100 msgStop = []byt...

3406
来自专栏木宛城主

曾今的代码系列——自己的分页控件+存储过程实现分页

项目里面的测试代码,仅供参考 LoginByAjax <title>Ajax登陆</title> <script src="Scripts/c...

1855
来自专栏跟着阿笨一起玩NET

treeview 绑定文件夹和文件

461
来自专栏互联网开发者交流社区

STC-单片机控制系统

1113

扫码关注云+社区