WebGL入门教程1 - 3D绘图基础知识
现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数字营销等各个领域。
在WebGL出现之前,用户必须安装第三方插件或本地应用程序才能利用设备硬件所拥有的强大的渲染功能,而使用WebGL,只需要浏览器就可以完成一切。WebGL和HTML5相伴相生,但并未并入HTML5标准中,而是和Web Worker、Web Socket一样保持独立发展。
WebGL很强大,但也难于学习和开发,说WebGL不难的人,是卖P2P的不可信。WebGL涉及到不少几何、代数、物理知识,你得了解计算机结构(至少知道CPU/GPU的角色分工和GPU的构成),你还需要具备空间想象能力,这挡住了很多前端工程师的学习脚步。但是,WebGL是诗和远方,当然还有面包,不能苟且,只能前行。本文将尽量详尽的介绍WebGL基础知识。
什么是WebGL
WebGL是一个绘图接口
WebGL提供了JavaScript编程接口,基于HTML5 Canvas元素实现2D和3D绘图,我们通过Canvas来获取WebGL特定的绘制上下文。
WebGL基于OpenGL ES 2.0
OpenGL ES是三维绘图标准OpenGL针对嵌入式系统的一个定制版本。ES表示Embbed System,这意味着它被用于小型计算设备,特别是手机和平板电脑。通过提供精简化的OpenGL,一致的、跨平台、跨浏览器的3D API更容易被实现。
WebGL是一个底层的技术,更加接近硬件,因此它效率很高,但麻烦的是它除了JS编程接口外,还移植了OpenGL着色语言(GLSL),GLSL是基于C的系统级编程语言,用来开发显卡应用程序,我们需要对此有一定的了解。
WebGL可和其他页面内容共存
因为其依托于Canvas元素,所以它将占用页面的一个区域,可以包含在一个div标签内部。WebGL的图形和其他HTML元素独立绘制,由浏览器来负责合成并最终呈现给用户。
3D绘图基础知识
尽管WebGL支持2D绘图,但其主要用途是用来建构3D场景,所以我们需要掌握基本的3D几何知识。
空间坐标
和我们中学接触到的坐标系不同的是,z轴是面向观察者的,而不是向上的,但都符合右手法则(用右手从x向y握住时,拇指方向就是z轴正方向)。
网孔(Meshes), 多边形(Polygons)和顶点(Vertices)
有很多种方法来绘制3D图形,其中最主流是使用网孔。下图就是一个网孔模型示例:
网孔模型由一系列多边形组成,多边形由顶点构成。其主要思想是使用足够细分的多边形来逼近真实对象。
常用的多边形包括三角形和四方格。顶点的坐标(x,y,z)定义了物体的外形,但是表面材料、颜色和光影则由其它属性来描述和确定。
材料(Materials),纹理( Textures)和光照(Lights)
物体的表面属性可以是单纯的颜色,也可以是很复杂的情况,比如反射/透射/折射的情况,还可以有纹理图案。比如包装盒外面的贴图。上面的人头像有一个蓝紫色颜色属性,并且在模型的左边有一个光源(注意右侧脸部的阴影)。
变换(Transforms)和矩阵(Matrices)
和CSS3和Canvas 2D里面一样,我们需要对模型做一些偏移、旋转等变换操作,逐个处理每个点的坐标不现实,WebGL提供常用的变换矩阵。对矩阵不熟悉的,请复习线性代数矩阵算法部分。
相机(Cameras), 视角(Perspective), 视窗(Viewports)
Camera指的是3D系统所使用的观察点,在这个点来拍摄整个场景。Perspective指的是观察空间,Viewports指的是对象在可视窗口的投影。
有时候我们通过移动相机的位置来获得拍摄特效,这些通过矩阵变换来实现。Cameras定义了一组矩阵,第1个矩阵定义相机的位置和方向,第2个矩阵定义了到viewport的位移,被称之为投影矩阵(projection matrix)。
下图对Camera拍摄空间的这些核心概念有一个直观的描述:
图中眼睛(EYE)位置为观察点,fovy为观察(拍摄)角度,aspect为观察空间的宽高比,zNear为近裁剪面也就是Viewport所在的投影平面,zFar为远裁剪面,由远近裁剪面以及视角所确定的淡绿色3D空间称之为视椎体(View Frustum),用来裁剪视图,在该视锥体以外的物体将不会被渲染。
基本上,我们通过WebGL绘制的模型,最终的成像效果,就是通过上面的拍摄空间投影到Viewport(一个2D矩形窗口)上的结果。
着色器(Shader)
我们建立好投影空间和3D网孔模型后,需要把它渲染到屏幕上,这些操作都是通过可编程着色器(Shader)来完成的。Shader包括两种,一种是顶点着色器(Vertice Shader),另外一种是片段着色器(Fragment Shader),片段着色器也称之为像素着色器。顶点着色器用来把3D空间坐标映射到2D视窗平面,片段着色器对投影图像进行着色。
WebGL的定义和3D图形学的基础知识已经介绍完了,在接下来的文章中我们将讲述GPU结构和WebGL的工作流水线相关知识。
最新评论
发现评论里面不能加表情图标喔,后台接口(http://techbrood.com/Social/comment/create)
报错如下:CDbCommand 无法执行 SQL 语句: SQLSTATE[HY000]: General error: 1366 Incorrect string value: '\xF0\x9F\x8C\xB9' for column 'Content' at row 1
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
WebGL Roadmap
Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...NodeJS、Java和PHP性能考量和若干参考结论
首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...
使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
Three.js入门教程1 - 基础知识和创建一个红色球体
[ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
Google的工程师Paul在网站aerotwist.com上...CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
更多...