WebGL入门教程1 - 3D绘图基础知识

techbrood 发表于 2016-05-24 20:01:15

标签: WebGL, 教程, 基础知识, 矩形

- +

现代浏览器努力使得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几何知识。

空间坐标

A 3D coordinate system (; Creative Commons Attribution-Share Alike 3.0 Unported license)

和我们中学接触到的坐标系不同的是,z轴是面向观察者的,而不是向上的,但都符合右手法则(用右手从x向y握住时,拇指方向就是z轴正方向)。

网孔(Meshes), 多边形(Polygons)和顶点(Vertices)

有很多种方法来绘制3D图形,其中最主流是使用网孔。下图就是一个网孔模型示例:

A 3D mesh (; Creative Commons Attribution-Share Alike 3.0 Unported license)

网孔模型由一系列多边形组成,多边形由顶点构成。其主要思想是使用足够细分的多边形来逼近真实对象。

常用的多边形包括三角形和四方格。顶点的坐标(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拍摄空间的这些核心概念有一个直观的描述:

blob.png

图中眼睛(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的工作流水线相关知识。

possitive(44) views37296 comments6

发送私信

最新评论

寻觅良药ˇ 2017-01-17 16:44:45

复杂……本来还想让我的站
www.mccake.net
美化一下


h5b2a 2016-07-16 19:11:45

@_Codaholic,是的,字段设置目前只支持3字节UTF-8编码。QQ名中的一些特殊符号是4字节的。


$_Codaholic 2016-07-16 18:33:27

发现评论里面不能加表情图标喔,后台接口(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


$_Codaholic 2016-07-16 18:31:01

NICE


iefreer 2016-06-06 16:48:38

@hapleo, 欢迎在techbrood分享作品和文章。


HapLeo 2016-06-06 16:23:41

文章不错,网站也办的不错。最近觉得前端没啥好玩的了,恶补一下数学,玩玩webgl。


请先 登录 再评论.
相关文章
  • 2019年NodeJS框架Koa和Express选型比较

    Koa和Express都是NodeJS的主流应用开发框架。
    Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...

  • 增强现实引擎ARToolKit工作原理简介

    ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;

  • 谷歌ARCore技术特性简介

    谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...

  • 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...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • CSS3弹性布局内容对齐(justify-content)属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • 如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象

    我们之前使用CSS3实现过

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • div 、section 、article的区别和使用场景

    div 、section 、article的区别和使用场景
    主要区别,以及适用场合如下:
    1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 更多...