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

相关文章

来自专栏生信技能树

把这个R包大卸八块

本来应该这是一个很正常的学习过程,之前总结了一篇博文Bioconductor的质谱蛋白组学数据分析,对蛋白组学定量那块比较感兴趣,正好看到一个R包-MSstat...

2996
来自专栏Y大宽

ToppGene Suite中文使用指南

2007.12:Improved human disease candidate gene prioritization using mouse phenoty...

653
来自专栏机器之心

入门 | 玩转词向量:用fastText预训练向量做个智能小程序

3899
来自专栏Python中文社区

Kaggle搭积木式刷分大法:特征工程部分

專 欄 ❈本文作者:王勇,目前感兴趣项目商业分析、Python、机器学习、Kaggle。17年项目管理,通信业干了11年项目经理管合同交付,制造业干了6年项目...

3659
来自专栏CDA数据分析师

详细解读如何构建专家诊病模型

文章来自思迈特,CDA获授权转载 ? 专家系统是典型的大数据和人工智能结合的计算机程序系统,其内部含有大量的某个领域专家水平的知识与经验,能够利用人类专家的知识...

1987
来自专栏UAI人工智能

实战派 | PaddlePaddle 你其实也可以真正地上手

1554
来自专栏大数据挖掘DT机器学习

R语言vs Python:数据分析哪家强?

本文章旨在更客观地看待这两门语言。我们会平行使用Python和R分析一个数据集,展示两种语言在实现相同结果时需要使用什么样的代码。这让我们了解每种语言的优缺点,...

46811
来自专栏数据小魔方

数据地图多图层对象的颜色标度重叠问题解决方案

一篇旧文,解决一个困扰已经的小技术问题,权当是学习ggplot2以来的整理回顾与查漏补缺。 ---- 今天这一篇是昨天推送的基础上进行了进一步的深化,主要讲如何...

3345
来自专栏AI科技大本营的专栏

手把手搭建游戏AI—如何使用深度学习搞定《流放之路》

翻译 | 彭硕,姜沂,reason_W 编校 | reason_W DeepMind开源《星际2》AI平台,OpenAI人工智能系统打败Dota2游戏顶级玩家....

3407
来自专栏机器人网

主宰这个世界的10种算法

---- Reddit有篇帖子介绍了算法对我们现在生活的重要性,以及哪些算法对现代文明所做贡献最大。如果对算法有所了解,读这篇文章时你可能会问“作者知道算法为...

2533

扫描关注云+社区