计算机图形技术 余 莉 yuli110@126.com 7-222
教材和参考书 教材和主要参考书： Diego Cantor, Brandon Jones. WebGL Beginner’s Guide 坎特, 琼斯著，李强译. WebGL编程指南.清华大学出版社.2013.12 Andreas Anyuru. Professional WebGL Programming - Developing 3D Graphics for the Web Andreas Anyuru著, 吴文国译. WebGL高级编程—开发Web 3D图形. 清华大学出版社.2013.6 Interactive 3D Graphics http://www.realtimerendering.com/udacity/?load=demo/unit1-fps.js 清华大学计算机系计算机图形学基础课程主页http://cg.cs.tsinghua.edu.cn/course/
如何学习本课程？ 以课件、教材为主线 勤于实践，熟练WebGL 利用网络资源 课程中心 前一页的链接 随时接受CG的新思想和新进展
本课程的考核方式 考试课 上海建桥学院学生管理规定 第二十条 2、学生缺课累计达到某门课程教学时数三分之一或未完..不得参加该课程考核，该课程必须重修
身边的计算机图形学－电影
身边的计算机图形学－游戏 目前图形硬件发展的动力所在
什么是计算机图形学 计算机图形学:Computer Graphics, CG 研究如何利用计算机表示、生成、处理和显示图形的学科 图形通常由点、线、面、体等几何属性和颜色、纹理、线型、线宽等非几何属性组成
根据处理技术不同，图形可以分为 线框图形：基于线条信息表示的，如工程图、等高线地图、曲面的线框图等 真实感图形：利用计算机生成像照片一样真实的图形 场景表示：曲线曲面造型、实体造型 光照模型：光源、纹理、材质
奥迪汽车效果图和线框图
与相关学科的关系 发展特点：学科交叉、界线模糊、相互渗透 图像生成（计算机图形学） 数字图像 数据模型 模型变换 （计算几何） 图像变换 （图像处理） 模型（特征）提取 （计算机视觉，模式识别） 发展特点：学科交叉、界线模糊、相互渗透
Interactive Gemetric Modeling 一个典型的图形生成过程 3D Scanning Interactive Gemetric Modeling Model Libraries Displacement Mapping
图形学过程：绘制(Rendering) 变换(Transformation) 裁减(Clipping) 投影(Projection) 图像生成 光照明模型(Illumination Model) 物体材质属性 纹理信息(Texture)
图形学过程：图像显示与存储 硬件帧缓存(Hardware Framebuffer):控制三色电子枪发射的电子束强度 存储为磁盘文件 电影胶片记录 视频记录 打印
modeling + Rendering + Animation 计算机图形学的3大主题 modeling + Rendering + Animation
计算机图形学的应用及研究前沿 计算机辅助设计与制造(CAD/CAM) 可视化(Visualization) 真实感图形实时绘制与自然景物仿真 计算机动画 用户接口(User Interface) 计算机艺术
计算机辅助设计与制造（CAD/CAM） CAD/CAM是计算机图形学在工业界最广泛、最活跃的应用领域 飞机、汽车、船舶的外形的设计 发电厂、化工厂等的布局 土木工程、建筑物的设计 电子线路、电子器件的设计 设计结果直接送至后续工艺进行加工处理，如波音777飞机的设计和加工过程
从二维信息中提取三维信息，在三维空间中重新构造出对应的三维形体，恢复形体的点、线、面及其拓扑关系，从而实现形体的重建
科学计算可视化 Scientific Visualization 必要性：直接分析大量的测量数据或统计数据有困难 目标：用图形表现抽象的数据 应用领域：医学图象重建，遥感，流场、气象、核爆模拟，有限元分析……。
可视化 信息可视化：信息流量，商业统计数据，股市行情…
可视化 在医学领域，可视化有着广阔的发展前途 是机械手术和远程手术的基础 将医用CT扫描的数据转化为三维图象，帮助医生判别病人体内的患处
真实感图形实时绘制与自然景物仿真
计算机动画 商业广告、影视特技/片头、动画片 教育、军事、飞行模拟等 1996 Independence Day 因其可视效果获Oscar. Toy Story 成为第一 部具有全三维计算机动画 特点的电影
我国第一部利用计算机辅助摄制的动画片是《咪咪钓鱼》，1991年由北方工业大学和北京电视台合作制作，以二维动画为主。用386微机和C语言编程，利用数字化仪和摄象机产生关键帧，再由计算机在相邻两幅关键帧之间内插生成中间帧，并自动跟踪上色。多层画面叠加在一起，形成完整的画面。10分钟的片子，5人小组花了10个月时间。
军事作战仿真
虚拟现实（Virtual Reality）
计算机艺术 计算机艺术—用计算机软件从事艺术创作 二维平面的画笔程序（如CorelDraw，Photoshop） 图表绘制软件（如Visio) 三维建模和渲染软件包（如3DMAX，Maya）、以及一些专门生成动画的软件（如Alias，Softimage）
用户接口 Macintosh微机首先在商品化产品上用形象的图形表示操作命令，使得普通用户也会用计算机画图、作日常计算。图文形式相结合大大改善了计算机交互操作的用户界面，开辟了计算机应用的很多新领域。
令人震惊的WebGL示例
图形软件标准 第一个官方标准，1977 GKS (Graphics Kernel System) 一些非官方图形软件，广泛应用于工业界，成为事实上的标准 OpenGL(SGI) Direct3D (Microsoft) Xlib（X-Window系统） Adobe公司Postscript
WebGL图形流水线的总体结构 图元装配，根据索引将顶点链接在一起，组成线、面单元 光栅化:决定哪些像素被图元覆盖的过程
HTML5 画布 <!DOCTYPE html> <html> <head> <title> WebGL Beginner's Guide - Setting up the canvas </title> <style type="text/css"> canvas {border: 2px dotted blue;} </style> </head> <body> <canvas id="canvas-element-id" width="800" height="600"> Your browser does not support HTML5 </canvas> </body> </html> 默认值为300*150 可用于DOM
WebGLRenderingContext是一个提供全部WebGL调用的接口 <script> var gl = null; function getGLContext(){ var canvas = document.getElementById("canvas-element-id"); if (canvas == null){ alert("there is no canvas on this page"); return; } var names = ["webgl","experimental-webgl","webkit-3d","moz-webgl"]; for (var i = 0; i < names.length; ++i) { try { gl = canvas.getContext(names[i]); catch(e) {} if (gl) break; if (gl == null){ alert("WebGL is not available"); else{ alert("Hooray! You got a WebGL context"); </script> 用户浏览器对WebGL上下文的识别 WebGLRenderingContext是一个提供全部WebGL调用的接口 <body onLoad ="getGLContext()">
示例 dcantor-webgl-beginners-guide-code\1727_01\ch1_Car.html --allow-file-access-from-files 画布 多边形对象 光照 相机 纹理、颜色、光照。。。
To be continued.
用计算机显示图形： 图像：1。绘制、摄制或印制的形象。 2。图形在媒介上的投影。