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 条评论
登录 后参与评论

相关文章

来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术:Semi Flat Design

本公众号定期更新关于 设计师、程序员发挥创意 互相融合的指南、作品。 主要技术栈: nodejs、react native、electron 本号正在更新的系列...

2946
来自专栏大数据文摘

三分钟 学会 “信息图表” !

2439
来自专栏Material Design组件

Human Interface Guidelines — Sliders

682
来自专栏ThoughtWorks

前端不止:Retina屏幕下两倍图

所见不一定即所得 眼睛是心灵的窗户,也是蒙蔽你的一种途径。 假设,我给你一张图片,你觉得肉眼可以观察到全部的细节吗? ? ---- 屏幕上一张清晰的图片 肉眼...

3455
来自专栏web前端教室

如何学习才能见到效果

几乎每个新入行的人都会问,有没有什么好的或正确的学习方法? 有的。 但误区在于,他们总是把好的或正确的学习方法,当成了“快”的学习方法。好或正确,并不意味着快;...

1898
来自专栏RESTART POiNTER

Web H5视频滤镜的“百搭”解决方案——WebGL着色器

视频滤镜,顾名思义,是在视频素材上duang特效的一种操作。 随着H5页面越做越炫酷的趋势,单一的视频播放已经不能满足我们的需求,视频滤镜在Web页面上的应用越...

5483
来自专栏程序员的知识天地

5个方法对于重量级网站的图片优化

图像是每个网站的关键组成部分。 根据 HTTP Archive ,图像占网页上需要加载总数据的比例达60%以上。 几乎成为所有网站上重要的组成部分,无论是电子商...

1042
来自专栏大数据钻研

canvas图形绘制之星空、噪点与烟雾效果

一、三合一 三个效果合成一篇文章。 有多个小伙伴问我,为何不开个公众号,现在都是移动时代,你博客文章写好后,公众号再复制一份,花不了多长时间,同时传播方便迅速,...

2944
来自专栏陈满iOS

看图学算法(一)算法基本概念篇

563
来自专栏数据小魔方

R预设配色系统及自定义色板

关于配色的话题,已经聊过很多次了,但是就像是之前说过的,对于图形可视化而言,配色决定着作品的“颜值”,谈再多次都不嫌多。 今天是R语言配色系统综合篇的上篇(当然...

4379

扫码关注云+社区