第5章 动画 动画(animation)是运动的艺术，运动是动画的本质 本章先介绍动画的基本原理与发展历史，然后讲解传统与计算机动画的基本内容 重点放在图形动画的描述语言和计算机动画的制作上，主要介绍X3D和SVG标准，以及位图动画和OpenGL的基本编程，最后简介万维网动画技术WebGL 5.1 概述、5.2 传统动画、5.3 计算机动画 5.4 动画制作的软件、语言和接口 5.5 X3D、5.6 SVG、5.7 位图动画编程 5.8 OpenGL编程简介、5.9 WebGL

5.1 概述 5.1.1 视觉滞留原理 动画与电影和电视都是利用人的视觉滞留现象和心理认可特征所产生的错觉来实现连续运动视觉的 5.1 概述 5.1.1 视觉滞留原理 动画与电影和电视都是利用人的视觉滞留现象和心理认可特征所产生的错觉来实现连续运动视觉的 视觉滞留(persistence of vision)原理是指，由于人眼感光细胞中的生物化学和生物物理学反应、以及视神经和视觉中枢的信号处理都需要一定的时间，所以物体在眼睛的视网膜中成像后，并不会立即消失，而是保留25 ~ 200ms，即1/40 ~ 1/5秒，相当于40 ~ 5帧/秒。因此，如果快速播放一系列相关的离散画面，就会使人产生连续的运动视觉（幻觉） 视觉滞留的原理是由比利时物理学家约瑟夫·普拉托于1829年发现的 20世纪60年代，人们发现，将银幕上实际是跳跃且不连贯的图像看成一个统一且完整的连续动作，其实真正起作用的并不是“视觉滞留”，而是“心理认可”

虽然动画与电影电视的工作原理相同，但电影和电视主要是用摄影机和摄像机拍摄出来的真实画面，而动画则是人工或计算机画出来的虚假画面 影视和动画的典型帧率： 电影： 老片—16帧/秒 普通—24帧/秒 数字—30帧/秒 电视： PAL—25帧/秒 NTSC—30帧/秒 动画：10~30帧/秒 虽然动画与电影电视的工作原理相同，但电影和电视主要是用摄影机和摄像机拍摄出来的真实画面，而动画则是人工或计算机画出来的虚假画面

5.1.2 动画的发展简史 中国古代（始于秦汉）：走马灯 1820年英J. Paris：圆盘两面画的旋转设备thaumatrope 5.1.2 动画的发展简史 中国古代（始于秦汉）：走马灯 1820年英J. Paris：圆盘两面画的旋转设备thaumatrope 1831年法J. Plaleau：转盘狭缝phenakistoscope 1834年英W. Horner：转笼zoetrope（西洋镜） [1891年美T. Edison（爱迪生）：活动电影视镜] [1895年法L./A. Lumiere兄弟：电影放映机] 1906年美J. Blackton：第一部动画片——滑稽的面孔 1928年美W. Disney（迪斯尼）第一部商用动画片 [1937年英国开始黑白电视广播] 1963年Bell实验室：第一部计算机动画 1974年P. Foldes：动画片“饥饿”在戛纳电影节上获奖 1991/1993年：终结者II/侏罗纪公园均获奥斯卡最佳视觉特效奖

走马灯

5.1.3 应用领域 传统动画主要用于动画电影的制作，也少量用于电视广告和电化教学等方面 5.1.3 应用领域 传统动画主要用于动画电影的制作，也少量用于电视广告和电化教学等方面 计算机动画则渗透到运动视觉媒体的方方面面，应用领域十分广泛，包括： 电子/计算机/网络游戏 电影和电视特技 动画片制作（2D辅助和3D模型） 动态广告 模拟器（飞行/汽车） 教育（MCAI多媒体计算机辅助教学） 科研（可视化）

5.2 传统动画 动画 = animation生气活泼、热情兴奋 简单定义：动画是动态生成系列相关画面以产生运动视觉的技术 5.2 传统动画 动画 = animation生气活泼、热情兴奋 简单定义：动画是动态生成系列相关画面以产生运动视觉的技术 复杂定义：动画是一门通过在连续多格的胶片上拍摄的一系列单个画面，并以一定的速度放映，从而产生运动视觉的技术 修改： 画面纪录：胶片上→磁盘、磁带、光盘等存储介质 放映设备：银幕→电视、显示器、投影仪等 运动对象：实体运动→颜色、纹理、灯光等的改变 动画片 = animation = cartoon（卡通片，[报刊上的政治性]漫画）

制作过程 剧本故事板 设计稿(难：包括人物/造型/动作/色彩/气氛等) 声音节拍(与电影后期配音不同) 关键帧(难)中间画 测试(铅笔稿) 描线上墨上色 检查 拍摄 后期制作(包括：编辑、剪接、对白、配音、字幕等)

传统动画的制作过程

名词术语 格——一个画面，动画片的最小单位。十分钟的动画（24帧/秒）需14,400格 幅——每个画面通常由若干张[透]明片叠合而成，每张“明片”为一个对象（的某一部分）称之为幅 关键帧——动作的极限（主要/转折）位置，通常由老师傅来画 小原画——两个关键帧之间的若干小关键帧，由小画师画 中间画——两个关键帧之间的若干过渡，由画工画

5.3 计算机动画 计算机动画 = computer animation 定义：用计算机生成一系列可供实时演播的连续画面技术 分级： 5.3 计算机动画 计算机动画 = computer animation 定义：用计算机生成一系列可供实时演播的连续画面技术 分级： 图形编辑（叠加、着色、特技） 中间画生成（变形） 活动对象操纵（位置、属性、算法、运动） 角色定义（语义级，术语规定） 智能动画（故事动画[中科院陆汝钤]，可学习和扩充）

5.3.1 计算机动画分类 可以依据不同特征来给计算机动画分类，如 作用 等级 5.3.1 计算机动画分类 可以依据不同特征来给计算机动画分类，如 作用 计算机辅助动画——传统二维动画的补充，利用计算机辅助工作。如填色、叠加、生成中间画、制作特效等，如动画片花木兰和二维游戏 模型动画——三维造型、动作设计、场景渲染等。如动画片玩具总动员和三维游戏 等级 低级——需人工显示规定每个物体和人物的位置、属性、各种运动参数，如现有动画系统和软件 高级——可用通用术语来规定运动、智能化。正在研制开发

时间 控制 维数 逐帧动画——先生成后播放，对硬件性能要求不高。如早期的动画系统和软件 实时动画——边生成边播放，对硬件性能要求较高。如早期的SGI工作站和现在普通的PC机，电子游戏 控制 关键帧动画——简单运动学 算法动画——复杂运动学，部分动力学 物理动画——自动控制，动力学（落体、流体、变形、爆炸），随机、分形 维数 2D——简单，平面美术设计。如Flash 3D——复杂，三维造型、动作设计、透视、消隐、光照、材质、场景渲染等。如3DS

最常用的计算机动画分类方法是：“辅助/模型”或等价的“2D/3D”动画 生成 矢量——采用图形学的方法生成动画，记录的是图形的各种参数。在演播时，可以实时渲染，也可以先渲染好（称为位图系列）后再播放。如Flash和3DS 位图——动画以位图形式出现，可以是矢量动画渲染后的结果。如GIF动画、fli、avi、mov 分辨率 低——320*240(VCR/VCD级) 中——1K*1K(16mm胶片/DVD级) 高——2K*2K(35mm胶片级) 超——4K*4K(70 mm胶片级) 最常用的计算机动画分类方法是：“辅助/模型”或等价的“2D/3D”动画

计算机动画技术 1．技术基础——计算机图形学、数字图像处理、三维几何造型、真实感图形、物理造型、人体动画等等 2．相关学科——美术、绘画、力学、人体运动学、机器人学、生物学、生理学、心理学、人工智能、计算机科学等等 3．研究内容——形体造型、运动控制与描述、图形绘制、动态模拟、集成环境、关节/人体运动、动画语言系统、硬件接口、特技

4．三维图形学——是三维造型、三维动画和虚拟现实的基础和核心 三维造型：物体表面、简单物体/自然物体/人体 真实感图形：透视、消隐、材质、纹理、光照、渲染 5．3D标准——三维图形和动画及虚拟现实系统的国际和事实标准有： 开放图形库——OpenGL(Open Graphics Library) 直接三维——Direct3D(Microsoft DirectX的组成部分) 爪哇三维——Java 3D(Sun公司Java语言的组成部分) 虚拟现实建模语言——VRML(Virtual Reality Modeling Language，用于Web) 可扩展三维——X3D(eXtensible 3D，VRML的发展，基于XML) 针对嵌入式系统的开放图形库——OpenGL ES（OpenGL for Embedded Systems，科纳斯组织制定)； 万维网图形库——WebGL（Web Graphics Library，科纳斯组织制定）

2D——常见的二维网页图形动画的标准有： 国际标准： 事实标准： 可伸缩矢量图形——SVG（Scalable Vector Graphics，基于XML） 事实标准： 闪光——Flash（Macromedia/Abobe公司） 银光——Silverlight（Microsoft公司）

5.4 动画制作的软件、语言和接口 动画制作可以分成两类： 下面列出常见的动画制作软件、描述语言和API 5.4 动画制作的软件、语言和接口 动画制作可以分成两类： 用户级——使用现成的商用动画制作软件和描述性的动画描述语言，进行复杂的3D造型和简单的动画设计。对使用者要求不高，但是产品的交互性不够、效率也不高 程序员级——使用高级语言和图形动画API，进行简单的3D造型和复杂的动画设计。对程序员要求较高，但是产品的交互性好、效率也很高 这两类方法各有特点，具有一定的互补性，且各有自己不同的主要应用领域 下面列出常见的动画制作软件、描述语言和API

5.4.1 动画制作软件 1．二维动画 位图动画(GIF) 矢量动画(Web) 台湾友立公司的Ulead GIF Animator 5.4.1 动画制作软件 1．二维动画 位图动画(GIF) 台湾友立公司的Ulead GIF Animator 微软公司早期的Microsoft GIF Animator Liatro soft公司的Babarosa Gif Animator Alchemy Lab公司的Alchemy GIF Animator CoffeeCup Software公司的CoffeeCup GIF Animator 矢量动画(Web) Adobe / Macromedia公司的Flash（2005年12月3日Macromedia被Adobe收购） Microsoft公司的Expression Blend（用于设计Silverlight）

2．三维动画 台湾友立公司的三维文字制作软件Ulead Cool 3D Autodesk公司的3ds max Autodesk / Alias|Wavefront公司的三维动画软件Maya（2005年10月Alias被Autodesk收购） Amabilis Software公司的自由三维动画软件3D Canvas

5.4.2 动画描述语言 动画描述（标记）语言主要有如下三种基于Web网（WWW，World-Wide-Web，万维网/环球网）的国际标准： 5.4.2 动画描述语言 动画描述（标记）语言主要有如下三种基于Web网（WWW，World-Wide-Web，万维网/环球网）的国际标准： 三维图形动画和虚拟现实的Web3D标准： VRML（Virtual Reality Modeling Language，虚拟现实建模语言） X3D（eXtensible 3D，可扩展三维[基于XML]） 基于XML的二维图形和动画标准： SVG（Scalable Vector Graphics，可伸缩矢量图形） 因为VRML标准已经被基于XML的X3D替代，所以后面的5.5和5.5节只对X3D和SVG分别加以简单的介绍

5.4.3 动画编程接口 常见的图形动画编程接口（API）有： 国际标准： 事实标准： 5.4.3 动画编程接口 常见的图形动画编程接口（API）有： 国际标准： 开放图形库——OpenGL(Open Graphics Library，现由科纳斯组织管理) 事实标准： 直接三维——Direct3D(Microsoft DirectX的组成部分) 爪哇三维——Java 3D(Sun领导的JCP制定) 针对嵌入式系统的开放图形库——OpenGL ES（OpenGL for Embedded Systems，科纳斯组织制定，OpenGL的子集) 万维网图形库——WebGL（Web Graphics Library，科纳斯组织制定，基于OpenGL ES）

5.5 X3D X3D（eXtensible 3D，可扩展三维）与VRML都是万维网3D联盟（Web3D Consortium，http://www.web3d.org/）开发的图形动画描述语言 基于XML的X3D是VRML的发展和替代 XML（Extensible Markup Language 可扩展标记语言）是W3C（World Wide Web Consortium万维网协会）于1998年制定的一种数据描述元语言的国际通用标准，已经获得了非常广泛的支持和应用。本书的15.2的第4小节和第18章将对XML作较为详细的介绍 X3D是一个用XML描述的3D文件格式的开放标准，使得在所有[网络]应用程序之间进行3D数据通信成为可能。与其前辈VRML相比，X3D标准更加成熟和精致 X3D包括4个部分：内核（核心特征集）、VRML 97特征集、应用程序接口和扩展集 X3D实现了与VRML 97的兼容，能提供VRML 97浏览器的全部功能

5.5.1 简史 1994年10月公布了（由SGI公司的Mark Pesce起草，并经VRML邮件列表成员修订的）VRML 1.0规范 5.5.1 简史 1994年10月公布了（由SGI公司的Mark Pesce起草，并经VRML邮件列表成员修订的）VRML 1.0规范 1996年8月VRML联盟（VRML Consortium Incorporated）推出VRML 2.0 1998年1月VRML成为国际标准VRML97（ISO/IEC 14772-1:1997 Information technology -- Computer graphics and image processing -- The Virtual Reality Modeling Language，信息技术——计算机图形学和图像处理——虚拟现实建模语言） 1998年2月W3C公布XML 1.0标准 1998年11月VRML联盟更名为Web3D联盟 2004年8月9日X3D成为国际标准：ISO/IEC 19775 Information technology -- Computer graphics and image processing -- Extensible 3D (X3D)，信息技术——计算机图形和图像处理——扩展3D（X3D）。并于2008年7月/2013年11月和2010年9月/2015年9月分别对其第1和第2 部分进行了更新。该标准分为如下两个部分： 第1部分：体系结构和基本组件——ISO/IEC 19775-1:2004/2008/2013 Part 1: Architecture and base components 第2部分：场景访问接口（SAI）（ISO/IEC 19775-2:2004/201012015 Part 2: Scene Access Interface (SAI)）

5.5.2 特性 X3D具有如下新特性： XML集成：Web服务、分布式网络、跨平台、交互应用文件和数据传输 5.5.2 特性 X3D具有如下新特性： XML集成：Web服务、分布式网络、跨平台、交互应用文件和数据传输 组件化：允许轻量级内核3D运行时分发引擎 可扩展：适应特殊应用需要的标准化扩展集 进化：容易更新，并保留VRML97作为X3D的内容 广播/嵌入应用就绪：从移动电话到超级计算机 实时：绘图技术是高品质、实时、交互的，并且包括音频和视频以及3D数据 规范说明良好清晰：容易创建一致、相容、且无故障的实现

5.5.3 功能 3D图形：多边形几何、参数几何、层次变换、光照、材质、多遍/多级纹理映射、像素和顶点遮挡、硬件加速 5.5.3 功能 3D图形：多边形几何、参数几何、层次变换、光照、材质、多遍/多级纹理映射、像素和顶点遮挡、硬件加速 2D图形：空间化文本、2D矢量图形、2D/3D合成 CAD数据：一种转换CAD数据到出版和交互媒体的开放格式 动画：计时器与插补器驱动连续动画、拟人的动画和变形 空间化音频和视频：视听源映射到场景几何上 用户交互：基于鼠标的检取和拖带、键盘输入 导航：照相机/摄像机、用户在3D场景中移动、碰撞、接近度与可见性检测； 用户定义的对象：具有通过创建用户定义的数据类型来扩展内置浏览器功能的能力 脚本：提供通过编程和脚本语言来动态改变场景的能力 联网：提供由网络资源构成单一X3D场景的能力、到其他场景或位于万维网上的资源对象的超链接 物理模拟：拟人动画、地理空间数据集、与DIS（Distributed Interactive Simulation发布室交互仿真）集成

X3D与VRML X3D继承了VRML的工作原理，而在描述和文件组织上发展了新的形式（采用了XML语言） 简单的说，X3D是把VRML97分解为组件，并使用可加入新组件的机制，来扩展VRML97的功能 VRML与X3D最大的区别在于：VRML中浏览器读取的不是三维数据而只是一种文本描述，X3D中采用的则是XML描述的实际三维数据。这样就可以建立照片级的三维模型，而且还可通过压缩技术将数据压缩并实时播放，不用下载整个文件后才显示三维对象

5.5.6 例子 目前的主流浏览器还不能直接支持对X3D文件（扩展名为x3d、x3dv或wrl）的浏览，需要安装X3D插件 5.5.6 例子 目前的主流浏览器还不能直接支持对X3D文件（扩展名为x3d、x3dv或wrl）的浏览，需要安装X3D插件 也可采用专门的X3D浏览器，例如： Web3D联盟用Java开发的Xj3D（http://www.xj3d.org/） Dave Huffman采用QT库和OpenGL编写的Carina（船底[星]座）（http://ariadne.iz.net/~entigo/）

移动盒子例（取自Xj3D） moving_box.x3dv： #X3D V3.0 utf8 PROFILE Interactive DEF TS TimeSensor { cycleInterval 10 loop TRUE } DEF TG Transform { children Shape { geometry Box {} appearance Appearance { material Material { diffuseColor 1 0 0 texture ImageTexture { url ["Xj3D-256x256.jpg"] DEF PI PositionInterpolator { key [ 0 0.25 0.5 0.75 1 ] keyValue [ 0 0 0 -1 0 0 -1 1 0 0 1 0 ] } ROUTE TS.fraction_changed TO PI.set_fraction ROUTE PI.value_changed TO TG.translation

“移动盒子”例子的输出（右边是Xj3D-256x256.jpg）

5.6 SVG SVG（Scalable Vector Graphics，可伸缩矢量图形）是W3C推出的一种基于XML的二维图形（动画）的描述语言标准 已经公布的推荐标准： SVG 1.0（2001.9.4）、1.1（2003.1.14）、1.1 第二版 （2011.8.16） SVG Mobile 1.1（2003.1.14） SVG Tiny 1.2（2008.12.22）

正处于开发过程中的SVG工作草案 SVG Full 1.2（2005.4.13），将被抛弃，由SVG 2.0取代 SVG 2.0： SVG 2.0综合了许多Web新内容，包括CSS、HTML5（2014年10月28日[昨天]成为W3C的正式推荐标准）和WOFF（Web Open Font Format，Web开放字体格式）等 当前最新的工作草案（W3C Working Draft）是2015年9月18日发布的 当前最新的编辑草案（W3C Editor’s Draft）是2015年10月15日发布的

SVG概述 SVG是采用XML来描述二维图形的一种语言。它支持三种类型的图形对象：矢量图形形状（如包含直线和曲线的路径）、图像和文本 图形对象可以被分组、设置风格、变换和合成进以前渲染过的对象之中。其特征集包括嵌套变换、裁剪路径、α掩模、过滤效果和模板对象等 SVG的绘图可以是交互和动态的，可以定义动画，并采用两种方法来触发——直接触发（即在SVG内容中嵌入SVG动画元素）或通过脚本触发 复杂的SVG应用程序，可以使用附加的脚本语言来访问SVG的DOM（Document Object Model，文档对象模型），它提供对所有元素、属性和特征的完全访问。已经为SVG设置了丰富的事件处理器集，例如，针对任何图形对象的onmouseover与onclick 因为SVG对其他Web标准的兼容性和杠杆作用，像脚本描述等特征，可以在同一网页的XHTML和SVG元素上进行 SVG是一种针对丰富图形内容的语言。可以利用SVG的工具，在SVG内容中包含更高级别的信息，从而实现可达性

SVG的特点 SVG的基本特点： SVG 1.1版新增加的一些特点： 基于XML标准 矢量图形 文本描述 文件格式灵活 交互性 内嵌字型数据 模块化 元素和属性集合 规范的子集

使用方法 SVG的MIME类型为image/svg+xml SVG文件的扩展名为svg（非压缩文件）和svgz（gzip压缩文件） 最常用的是使用[X]HTML的img元素 使用[X]HTML的object元素 [X]HTML的applet元素，可以调用Java小应用程序来观看SVG内容 内联嵌入：可以在XHTML等文档中直接嵌入SVG的代码内容 外部链接：在HTML文档中使用a元素，调用用户系统上已经安装的独立SVG浏览程序，来观看独立SVG文档的内容 被引用：由网页中的CSS2或XSL的属性来引用独立的SVG文档 老板的普通浏览器并不直接支持SVG，需要安装SVG插件或使用单独的SVG浏览程序。例如Adobe SVG Viewer等。不过新版的浏览器大多支持或部分支持SVG

例子 红色圆盘——下列代码在屏幕上显示一个圆心在（100，75）、半径为60、填充红色的圆盘（ RedCirle.svg）： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="75" r="60" fill="red" /> </svg>

动画例（anim.svg） <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="5cm" height="3cm" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" > <desc>Example animMotion01 - demonstrate motion animation computations</desc> <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- Draw the outline of the motion path in blue, along with three small circles at the start, middle and end. --> <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" />

<!-- Here is a triangle which will be moved about the motion path. It is defined with an upright orientation with the base of the triangle centered horizontally just above the origin. --> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- Define the motion path animation --> <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animateMotion> </path> </svg>

5.7 位图动画编程 所谓位图动画就是先制作好一系列表示连续画面的位图，然后按一定的时间间隔一幅接一幅地显示这些位图，就可以产生动画效果。 5.7 位图动画编程 所谓位图动画就是先制作好一系列表示连续画面的位图，然后按一定的时间间隔一幅接一幅地显示这些位图，就可以产生动画效果。 因为制作位图需要美术与动画知识，我们这里不讲，而只介绍如何显示位图以产生动画效果。里面需要用到位图资源、位图传送和计时器操作

BMP动画

5.8 OpenGL编程简介 OpenGL是图形硬件的软件接口之国际标准，可用来开发交互式三维图形应用程序，它源于SGI公司的GL (Graphics Library)。它适用于所有计算机平台，包括Windows、MacOS、Unix和Linux OpenGL标准由1992年成立的独立协会OpenGL ARB (The OpenGL Architecture Review Board)负责管理 OpenGL标准版本：1.0版(1992.7.1)、2.0(2004.9.7)、3.0(2008.8.11 )、4.0(2010.3.11)，当前最新版为2014年8月11日推出4.5版 微软的Visual C++从2.0起支持OpenGL（ 1.1版）编程，Windows从WinNT / Win95起将OpenGL作为标准设备加以支持

Linux内核与OpenGL视频游戏

1）工作过程 (1) 工作步骤 OpenGL工作过程的主要步骤有： 构造几何要素（点、线、多边形、图像、位图），创建对象的数学描述 在三维空间中放置对象，选择观察点 计算对象的颜色（直接计算或由光照与纹理间接给出） 光栅化——将对象的数学描述和颜色信息转换成屏幕像素（可能执行消隐和对像素的操作）

(2) 操作种类 几何操作 针对每个顶点的操作——模型取景矩形变换、纹理坐标变换、传递到几何要素装配 几何要素装配——随着几何要素的类型而不同，有明暗处理、平面剪裁、剔除检验，最后根据点图案、线宽、点尺寸等生成像素段，并给其赋上颜色和深度值 像素操作 将主机读入的像素经放大、偏置和映射处理后写入纹理内存，可在纹理映射中使用或光栅化成像素段 对从帧缓存读入的像素数据，执行像素传输操作（放大、偏置、映射、调整）后，以适当的格式压缩并返回给主存 像素拷贝操作 = [(解)压缩 +] 传输操作 像素段操作——纹理化产生纹素、雾效果计算、反走样处理、剪裁处理、α检验、模板检验、深度缓冲区检验、抖动处理、逻辑操作/混合操作、颜色屏蔽/指数屏蔽

OpenGL的模块与操作顺序

2）相关库

Unix与Windows平台 OpenGL库与应用程序的关系 GLU = OpenGL Utility Library GDU = Graphics Device Utility WGL = Windows Graphics Library

辅助库中的若干三维物体绘制函数 void auxWireSphere(GLdouble); void auxSolidSphere(GLdouble); void auxWireCube(GLdouble); void auxSolidCube(GLdouble); void auxWireBox(GLdouble, GLdouble, GLdouble); void auxSolidBox(GLdouble, GLdouble, GLdouble); void auxWireTorus(GLdouble, GLdouble); void auxSolidTorus(GLdouble, GLdouble); void auxWireCylinder(GLdouble, GLdouble); void auxSolidCylinder(GLdouble, GLdouble);

void auxWireIcosahedron(GLdouble); void auxSolidIcosahedron(GLdouble); void auxWireOctahedron(GLdouble); void auxSolidOctahedron(GLdouble); void auxWireTetrahedron(GLdouble); void auxSolidTetrahedron(GLdouble); void auxWireDodecahedron(GLdouble); void auxSolidDodecahedron(GLdouble); void auxWireCone(GLdouble, GLdouble); void auxSolidCone(GLdouble, GLdouble); void auxWireTeapot(GLdouble); void auxSolidTeapot(GLdouble);

如何使用OpenGL库函数 想在程序中使用gl、glu或aux开头的OpenGL库函数时，必须包含对应的头文件： #include <gl/gl.h> #include <gl/glu.h> #include <gl/glaux.h> 并在项目设置中添加对应的库文件：选Project/Settings菜单，在弹出的Project Settings对话框中选Link页，在中间的Object/Library Modulas域中添加opengl32.lib glu32.lib glaux.lib

3）数据类型 为了独立于计算机平台，OpenGL有各种自定义的基本数据类型 最常用的是GLfloat、HGLRC 后缀用于函数与变量的命名

库类型 + 功能名 （+ 参数数目 + 参数类型 [+ 向量符]） 4）函数命名 OpenGL的库函数的名称一般为： 库类型 + 功能名 （+ 参数数目 + 参数类型 [+ 向量符]） 例如： glColor3ub // 核心库的颜色定义函数，参数为三个无符号字节数 glVertex3fv // 核心库的顶点定义函数，参数为浮点数数组(三个一组) gluLookAt // 工具库的设置观察点函数（参数为9个双精度浮点数） wglMakeCurrent // Windows扩展库的产生当前渲染描述表函数（两个参数：HDC和HGLRC） auxInitWindow // 辅助库的初始化窗口函数

5）渲染函数范围 OpenGL通过把一组操作用glBegin和glEnd括起来(似C语言的{和})，来管理图形。如画一个二维的正方形： void DrawGLSquare() { // X-Y平面中的正方形 glBegin(GL_LINES); // 逆时针画边线框 // 画左边线 glVertex3f(-1.0f, 1.0f, 0.0f); // 似MoveTo glVertex3f(-1.0f, -1.0f, 0.0f); // 似LineTo // 画下边线 glVertex3f(-1.0f, -1.0f, 0.0f); glVertex3f(1.0f, -1.0f, 0.0f); // 画右边线 glVertex3f(1.0f, -1.0f, 0.0f); glVertex3f(1.0f, 1.0f, 0.0f); // 画上边线 glVertex3f(1.0f, 1.0f, 0.0f); glVertex3f(-1.0f, 1.0f, 0.0f); glEnd(); }

6）矩阵栈 在OpenGL中使用矩阵进行渲染三维场景所需要的数据计算 用glPushMatrix和glPopMatrix函数来将矩阵压栈和出栈，还可以用glScalef和glRotatef等函数对栈顶的矩阵进行缩放和旋转等修改 例如： glLoadIdentity(); // 设置当前矩阵为单位矩阵（无缩放和旋转） glColor3f(1.0f, 0.0f, 0.0f); // 设置绘图颜色为红色 DrawGLSquare(); // 画正方形

glPushMatrix(); glScalef(2.0f, 0.5f, 0.0f); // x方向的尺寸放大一倍, y方向的尺寸缩小一倍 glColor3f(0.0f, 1.0f, 0.0f); // 设置绘图颜色为绿色 DrawGLSquare(); // 画扁矩形 glPopMatrix(); glRotatef(45.0f, 0.0f, 0.0f, 1.0f); // 沿z轴旋转45度 glColor3f(0.0f, 0.0f, 1.0f); // 设置绘图颜色为蓝色 DrawGLSquare(); // 画菱形 glScalef(0.5f, 0.5f, 0.0f); // x方向与y方向的尺寸都缩小一半 glColor3f(1.0f, 1.0f, 0.0f); // 设置绘图颜色为黄色 DrawGLSquare();// 画小菱形

正方形及其矩阵变换

7）渲染描述表 Windows应用程序使用设备描述表(DC)进行图形输出，Windows GDI管理DC，并提供所需的各种设置与绘图函数 但OpenGL却不使用标准的Windows DC，而是使用一种渲染描述表(RC = Rendering Context)。与DC相似，RC也用于保存在给定窗口中渲染一个场景所需的各种绘图信息 一个RC可同时供多个线程使用，但是在同一时间一个线程只能有一个RC 与DC不同的是，OpenGL不需要句柄或指向RC的指针（因为只能有一个RC），RC是隐含在绘图命令的调用中的，所有的OpenGL命令都由当前RC来接受和处理

DC与RC的关系

联系RC与DC 为了使OpenGL能在Windows中工作，必须有一种将RC与DC联系起来的机制，这需要使用Windows扩展库中的若干函数，如： HGLRC wglCreateContext(HDC); // 生成RC BOOL wglDeleteContext(HGLRC); // 删除RC BOOL wglMakeCurrent(HDC, HGLRC); // 激活RC 因为OpenGL与Windows在像素格式方面不一致，所以在初始化时，必须有一个协商过程，协商的结果就是RC 这一协商过程需要几个GDI函数来处理，而它们都需要一种复杂的像素格式描述符结构：

typedef struct tagPIXELFORMATDESCRIPTOR { // pfd WORD nSize; // 结构大小 WORD nVersion; // 版本 DWORD dwFlags; // 标志 BYTE iPixelType; // 像素类型= PFD_TYPE_RGBA或PFD_TYPE_COLORINDEX BYTE cColorBits; // 颜色位数 BYTE cRedBits; // 红色位数 BYTE cRedShift; // 红色偏移 BYTE cGreenBits; // 绿色位数 BYTE cGreenShift; // 绿色偏移 BYTE cBlueBits; // 蓝色位数 BYTE cBlueShift; // 蓝色偏移 BYTE cAlphaBits; // α值位数 BYTE cAlphaShift; // α值偏移

BYTE cAccumBits; // 光栅缓存位数 BYTE cAccumRedBits; // 光栅缓存红色位数 BYTE cAccumGreenBits; // 光栅缓存绿色位数 BYTE cAccumBlueBits; // 光栅缓存蓝色位数 BYTE cAccumAlphaBits; // 光栅缓存α值位数 BYTE cDepthBits; // 深度缓存位数 BYTE cStencilBits; // 图案缓存位数 BYTE cAuxBuffers; // 辅助缓存位数 BYTE iLayerType; // 层类型（现已不使用） BYTE bReserved; // 保留（设定覆盖和铺垫的位面数） DWORD dwLayerMask; // 层掩膜（现已不使用） DWORD dwVisibleMask; // 可视掩膜（透明的颜色） DWORD dwDamageMask; // 损伤掩膜（现已不使用） } PIXELFORMATDESCRIPTOR;

标志dwFlags的常用取值 PFD_DRAW_TO_WINDOW PFD_DRAW_TO_BITMAP PFD_SUPPORT_GDI PFD_SUPPORT_OPENGL PFD_DOUBLEBUFFER PFD_SWAP_LAYER_BUFFERS

关联RC与DC的例子 PIXELFORMATDESCRIPTOR pfd = { sizeof(PIXELFORMATDESCRIPTOR), // 结构大小 1, // 版本号 PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL | PFD_DOUBLEBUFFER, PFD_TYPE_RGBA, // 像素类型 24, // 24b颜色 0, 0, 0, 0, 0, 0, // 颜色位数与偏移 0, 0, // α值位数与偏移 0, 0, 0, 0, 0, // 光栅缓存位数 32, // 32b深度缓存 0, 0, // 无图案缓存和辅助缓存 0, // 层类型（现已不使用） 0, // 保留 0, 0, 0 // 不支持掩膜 };

m_hDC = GetDC()->GetSafeHdc(); // 获取DC句柄 int nPixelFormat = ChoosePixelFormat(m_hDC, &pfd); // 在DC支持的像素格式中选择与pfd最匹配的像素格式 SetPixelFormat(m_hDC, nPixelFormat, &pfd); // 设置DC的像素格式 m_hRC = wglCreateContext(m_hDC); // 创建一个与DC匹配的RC wglMakeCurrent(m_hDC, m_hRC); // 设置调用线程的当前RC为m_hRC，将m_hRC与m_hDC关联在一起

8）例子 为了说明如何用VC开发OpenGL程序，我们看一个简单的例子： 建立一个SDI的MFC项目GL 在项目设置中添加对应的库文件：opengl32.lib glu32.lib glaux.lib 在视图类CGLView中包含OpenGL的头文件： #include <gl/gl.h> #include <gl/glu.h> #include <gl/glaux.h> 在视图类CGLView中定义类变量： HGLRC m_hRC; HDC m_hDC;

在视图类CGLView的PreCreateWindow函数中修改窗口的创建结构，以剪掉子窗口和兄弟窗口 (这是OpenGL所要求的) ： BOOL CGLView::PreCreateWindow(CREATESTRUCT& cs) { cs.style |= WS_CLIPSIBLINGS | WS_CLIPCHILDREN; return CView::PreCreateWindow(cs); } 在视图类CGLView中添加WM_CREATE的消息响应函数OnCreate，在该函数中初始化OpenGL： int CGLView::OnCreate(LPCREATESTRUCT lpCreateStruct) { if (CView::OnCreate(lpCreateStruct) == -1) return -1; // TODO: Add your specialized creation code here PIXELFORMATDESCRIPTOR pfd = { sizeof(PIXELFORMATDESCRIPTOR),

1, PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL |PFD_DOUBLEBUFFER, PFD_TYPE_RGBA, 24, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 32, 0, 0, 0, 0, 0, 0, 0 }; m_hDC = GetDC()->GetSafeHdc(); int nPixelFormat = ChoosePixelFormat(m_hDC, &pfd); SetPixelFormat(m_hDC, nPixelFormat, &pfd); m_hRC = wglCreateContext(m_hDC); wglMakeCurrent(m_hDC, m_hRC); glClearColor(0.0f, 0.0f, 0.0f, 0.0f); // 设置背景为黑色 return 0; }

为了避免内存泄漏，在应用程序退出时，必须删除所创建的RC。这需要为视图类添加WM_DESTROY的消息响应函数OnDestroy： void CGLView::OnDestroy() { CView::OnDestroy(); wglMakeCurrent(NULL, NULL); // 选出RC wglDeleteContext(m_hRC); // 删除RC } 为了使RC适应用户对窗口大小的调整，必须为视图类添加WM_SIZE的消息响应函数OnSize。可在此函数中重置映射和模型矩阵、重建观察窗口和视锥： void CGLView::OnSize(UINT nType, int cx, int cy) { CView::OnSize(nType, cx, cy); glViewport(0, 0, cx, cy); // 设置视口范围（有变形） glViewport(0, 0, min(cx, cy), min(cx, cy)); // 设置视口范围为cx与cy的最小值 glMatrixMode(GL_PROJECTION); // 设置投影矩阵 glLoadIdentity(); // 装入单位矩阵

gluPerspective(30, 1, -3, 3); // 设置透视投影矩阵（y方向30度、xy方向的纵横比为1、z方向的近远剪切平面的距离分别为1和3） glMatrixMode(GL_MODELVIEW); // 设置模型视图矩阵 glLoadIdentity(); // 装入单位矩阵 } 在OnDraw函数中绘制OpenGL图形： void CGLView::OnDraw(CDC* pDC) { CGLDoc* pDoc = GetDocument(); ASSERT_VALID(pDoc); // TODO: add draw code for native data here gluLookAt(0, 0, 10, 0, 0, 0, 0, 1, 0); // 设置观察点位置 DrawRects(); // 画矩形（参见4)与5)） gluLookAt(5, 5, 10, 0, 0, 0, 0, 1, 0); // 设置观察点位置 glColor3f(1.0f, 1.0f, 0.0f); // 设置绘图颜色 auxWireSphere(2.0); // 画球面网格 //auxWireTeapot(1.8); // 画茶壶网格 SwapBuffers(m_hDC); // 切换缓冲区

茶壶网格

球面网格

9）绘制球面网格 除了调用辅助库函数外，也可自己编写绘制球面网格的函数： #include <math.h> #define RAD (3.14159265358979 / 180) void CGLView::SphereGrids(float R, int da, int db, int dx, int dy) { GLfloat x, y, z, r; int i,j; for (i = 0; i <= 180; i += db) { // draw horizontal lines glBegin(GL_LINE_LOOP); r = (GLfloat) (R * sin(i * RAD)); z = (GLfloat) (R * cos(i * RAD)); for (j = 0; j < 360; j += dx) { x = (GLfloat) (r * cos(j * RAD)); y = (GLfloat) (r * sin(j * RAD)); glVertex3f(x, y, z); }

} glEnd(); for (j = 0; j <= 360; j += da) { // draw vertical lines glBegin(GL_LINE_LOOP); for (i = 0; i <= 180; i += dy) { r = (GLfloat) (R * sin(i * RAD)); z = (GLfloat) (R * cos(i * RAD)); x = (GLfloat) (r * cos(j * RAD)); y = (GLfloat) (r * sin(j * RAD)); glVertex3f(x, y, z);

SphereGrids(2,10,10,5,5)的输出结果图

10）改变观察位置 使用户可以通过鼠标或键盘操作，动态修改观察点的位置，达到旋转物体、调整物体大小的目的： void CGLView::OnKeyDown(UINT nChar, UINT nRepCnt, UINT nFlags) { int hDegree0 = hDegree, vDegree0 = vDegree, times; if (ctrl) times = 10; else times = 1; switch (nChar) { // change view degree and distance case VK_ADD: // + case 187: // += case 190: // >. r += times * dr; break;

case VK_SUBTRACT: // - case 189: // -_ case 188: // <, r -= times * dr; break; case VK_UP: vDegree -= times; break; case VK_DOWN: vDegree += times; break; case VK_LEFT: hDegree += times; break; case VK_RIGHT: hDegree -= times; break; case VK_CONTROL: ctrl = TRUE; } if (hDegree < 0) hDegree += 360; else if (hDegree > 360) hDegree -= 360; if (vDegree < -180) vDegree += 360; else if (vDegree > 180) vDegree -= 360; if (r != r0 || hDegree != hDegree0 || vDegree0 != vDegree) Invalidate(); CView::OnKeyDown(nChar, nRepCnt, nFlags);

void CGLView::GetEye(double r, int hd, int vd, GLdouble &ex, GLdouble &ey, GLdouble &ez) { ex = r * sin(vd * RAD) * cos(hd * RAD); ey = r * sin(vd * RAD) * sin(hd * RAD); ez = r * cos(vd * RAD); } void CGLView::OnDraw(CDC* pDC) { CGLDoc* pDoc = GetDocument(); ASSERT_VALID(pDoc); // TODO: add draw code for native data here GLdouble ex, ey, ez; glClearColor(0,0,0,0); glClear(GL_COLOR_BUFFER_BIT); glLoadIdentity(); GetEye(r, hDegree, vDegree, ex, ey, ez); gluLookAt(ex, ey, ez, 0, 0, 0, 0, 1, 0); glColor3f(1.0f, 1.0f, 0.0f); // 设置绘图颜色 auxWireTeapot(1.5);

BOOL CGLView::OnEraseBkgnd(CDC* pDC) { return TRUE; char buf[40]; sprintf(buf, "r = %.4g, hDegree = %d, vDegree = %d", r, hDegree, vDegree); pDC->TextOut(10, 10, buf); } 11）防止闪烁 为了屏蔽Windows缺省用白色擦除背景时，造成画面闪烁。可以在视图类中添加对消息WM_ERASEBKGND的响应函数OnEraseBkgnd，在该函数中返回TRUE，以屏蔽掉Windows用白色擦除背景，从而避免了画面的闪烁。如： BOOL CGLView::OnEraseBkgnd(CDC* pDC) { return TRUE; //return CView::OnEraseBkgnd(pDC);

调整观察位置

12）其他 显示列表 模型变换 灯光设置 纹理贴图 材料特性 特殊效果

5.9 WebGL 由于HTML 5的兴起以及XHTML的没落，与XML对应的X3D的使用并不广泛 当前最热门的网页2D/3D图形动画技术，是与HTML 5对应的WebGL HTML 5（http://www.w3.org/TR/html5/） 是从2004年起由W3C和WHATWG共同开发的一种网页描述新标准 相比现用的于1999年底推出的HTML 4.01版，增加了许多新功能（包括页面排版、地理定位、本地数据存储、交互式2D/3D图形和多媒体等） 并获得了（新版本）主流浏览器的广泛支持 2014年10月28日W3C发布了HTML 5推荐标准

3D接口技术的发展

5.9.1 概述 WebGL（Web Graphics Library，万维网图形库）是一种（不需要安装插件，就可直接）在支持HTML5的Web浏览器的画布元素canvas中绘制交互式3D与2D图形和动画的JavaScript API，它基于（OpenGL API 的子集）OpenGL ES 2.0，它们都由美国的非营利的组织Khronos Group（科纳斯组织，http://www.khronos.org/）设计与管理 Khronos Group于2000年由NVIDIA、Intel、SGI、Sun、ATI等公司创立，成员包括Mozilla、Opera、苹果等约100个公司。从2006年7月31日起，OpenGL标准也交由该组织控制 OpenGL ES（OpenGL for Embedded Systems，针对嵌入式系统的OpenGL) 是OpenGL 三维图形 API 的子集，专门为手机、平板电脑、游戏主机和PDA等嵌入式设备而设计的。1.0版于2002年推出、2.0版于2007年3月推出、3.0版于2012年8月6日推出，当前最新版本是2015年10月10日推出的3.2

WebGL 的版本 1.0——2011年2月10日推出。 1.0.1——2012年1月27日推出。 1.0.2——2013年3月1日推出。 WebGL 1.0的新版本和WebGL 2.0还在开发过程中 网址：https://www.khronos.org/registry/webgl/specs/latest/

支持WebGL的桌面浏览器 Mozilla Firefox（马赛克杀手 火狐） —— 从2011年3月22日推出的4.0版开始支持，默认激活 Google Chrome（谷歌 铬） —— 从2011年2月3日推出的9.0版开始支持，默认激活 Microsoft Internet Explorer（微软 因特网探险家） —— 从2013年10月17日推出的（包含在 Windows 8.1中）11.0版开始支持。较旧的Windows版本可以安装第三方插件来支持，如IEWebGL（http://www.iewebgl.com/） Apple Safari（苹果 游猎） —— 从2012年7月25日推出的（在 Mac OS X上运行的）6.0版开始支持，但在默认情况下禁用 Opera（歌剧） ——从2012年6月14日推出的12版开始支持，也需自己手工激活 Microsoft Edge（微软 边缘/锋利/刀刃）——于2015年7月29日随Windows 10推出，也支持WebGL

5.9.2 例子 下面是若干谷歌网页上的例子（http://designmodo.com/webgl-chrome/）： 5.9.2 例子 下面是若干谷歌网页上的例子（http://designmodo.com/webgl-chrome/）： 1．水母（http://aleksandarrodic.com/p/ jellyfish/） 2．水族馆（http://webglsamples.google code.com/hg/aquarium/aquarium.html） 参考代码见DOC文档和谷歌网页

WebGL的水母例

WebGL的水族馆例

作业 平时作业6（选做）： 平时作业7（必做）： 1）实现公爵位图动画。 2）编制OpenGL程序，绘制自定义正方形及其矩阵变换，绘制自定义球面和辅助库中的各种曲面，动态改变观察位置。 平时作业7（必做）： 1）用新版Chrome等浏览器显示SVG例RedCirle.svg和anim.svg（参见5.6.5小节）。 2）浏览谷歌的WebGL例（参见5.9.2小节）。

大作业参考选题 大作业参考选题6：编写一个功能强大，界面友好的OpenGL程序，包括：设置颜色、改变视点、显示列表、模型变换、灯光设置、纹理贴图、材质特性、特殊效果等等。 大作业参考选题7：编写一个功能强大，界面友好的Java 3D程序。 大作业参考选题8：图形动画开发接口和语言：OpenGL、OpenGL ES、WebGL、Java3D、Direct3D、VRML、X3D、SVG/ Flash/ Silverlight中某一个或某几个的理论探讨（包括：历史、发展、标准、功能、系统、接口、特点、适用范围、比较、示例或实现等等）、方法对比或应用开发。

复习思考题 影视与动画都是利用什么原理来工作的？ 影视与动画的帧率各是多少？ 影视与动画的差别在哪里？ 影视与动画哪个被先发明的？ 给出动画的定义，动画片的英文是什么？ 给出动画的制作过程，其中与电影制作反差最大的是哪一步？ 关键帧和中间画有什么区别？ 依据什么给计算机动画分类？最常用的分类有哪些？

常用的动画制作软件有哪些？ 二维和三维图形（动画）的事实与国际标准有哪些？ 给出VRML、X3D和SVG的英文原文与中文译文。 VRML和X3D之间有什么关系？后者有哪些主要优势？ 与Flash相比，SVG有哪些优点？ X3D与SVG的共同点是什么？ 如何制作位图动画？ BMP动画编程有哪些主要步骤？

OpenGL是一个什么标准？其中GL的含义是什么？ OpenGL第一个版本是什么时候推出的？最新版本是多少？VC支持的是哪个版本？ OpenGL工作过程的主要步骤有哪些？ OpenGL ES与OpenGL是什么关系？ WebGL与OpenGL ES又是什么关系？ OpenGL ES和WebGL各应用于什么领域？ 为什么WebGL比X3D更受欢迎？