专栏首页pangguomingWebGL 入门-WebGL简介与3D图形学

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

相关文章

  • ubuntu12.04 安装配置jdk1.7

    第一步:下载jdk-7-linux-i586.tar.gz wget -c http://download.oracle.com/otn-pub/java/jd...

    庞小明
  • 终极解决方案:org.apache.jasper.JasperException: java.lang.IllegalStateException: getOutputStream() has alr

    org.apache.jasper.JasperException: java.lang.IllegalStateException: getOutputStr...

    庞小明
  • CentOS查询端口占用和清除端口占用的程序

    庞小明
  • Java的常用开发工具

    java常用的开发工具。都说工欲善其事必先利其器,要想学好java这门语言,选择一款好用顺手的开发工具是必不可少的。另外面试java工作时开发工具的使用也是一个...

    Rookie
  • Deep Web和Tor浏览器。

    也许是学者章女士的失踪时间,让一些人知道“暗网”一词,了解了这个概念,最近美国的司法部以及荷兰的刑警组织宣布,暗网市场AlphaBay和Hans...

    赵腰静
  • 可怕的“浏览器指纹”,让你在互联网上,无处可藏

    科技公司通过大数据,会对你进行一个大体的画像,然后按照你的喜好推送信息。比如一些精准的广告,刺激你荷尔蒙的小视频等。就拿你在玩的抖音来说,你其实可以匿名使用。你...

    xjjdog
  • ODC预端接光纤配线箱

    ODC光纤配线箱是当代预制光缆 技术最先进、连接精度最高、光链路损耗最低、防护抗震等级最高的军用级预制光缆产品,特别适合“即插即用”型智能变电站室外预制光缆连接...

    晟科通信
  • JSP学习心路

    1.先安装JDK,在安装开发工具(MyEclipse、Eclipse或Netbeans)和tomcat,其中MyEclipse内置tomcat服务器;

    Dabelv
  • python学习笔记6.1-类的认识

    前言 都在说,在Python中“无所不对象”,是因为Python是一个面向对象的动态编程语言,因而它具有:多态(Polymorphism),继承(Inherit...

    锦小年
  • [Keras深度学习浅尝]实战五·使用DNN自编码器实现聚类操作数据降维

    小宋是呢

扫码关注云+社区

领取腾讯云代金券