计算机图形学电子教案c2

1、计算机图形学电子教案c22.1.1 计算机图形外部设备CRT（Cathode-ray tube）阴极射线管 CRT（Cathode-ray tube）阴极射线管CRT:电子枪（由灯丝、阴极和控制栅组成） 在靠近阴极的前方有一个控制栅，它是个柱状的金属杆、加上负电压后，能够控制通过其中间小孔的带负电的电子束的强弱。当控制栅上的负电压足够大时，它可以截止电子束，此时，对应的荧光屏上的点是黑的。CRT:聚焦系统 聚焦系统通过电场或磁场控制电子束，使电子束“变细”，保证轰击荧光屏时产生的亮点足够小。为了提高显示系统的分辨率，聚焦系统是关键之一。CRT:加速电极加速电极加有正的高电压(达几万伏)，使经过

2、聚焦的电子束高速运动。加上正的高电压CRT:偏转系统（由垂直偏转板和水平偏转板组成）偏转控制可以来用静电场，也可以采用磁场，控制电子束在水平方向上和竖直方向上的偏转。最大偏转角度是衡量偏转系统性能的最重要指标。为什么大屏幕显示器的前后径比小屏幕显示器的前后径长?CRT:荧光屏荧光物质受电子束一次轰击之后发光，亮度会迅速衰减。持续发光时间持续发光时间指的是电子束离开某点后，该点亮度值衰减到初始值的110所需的时间。用于图形显示设备的大多数荧光物质的持续发光时间为l 0到60毫。如果种荧光物质的持续发光时间为40毫秒，则大约刷新频率为？CRT:彩色阴极射线管彩色阴极射线管(1)射线穿透法（主要用于

3、画线显示器中）原理 应用：画线显示器 优点：成本低 缺点：只能产生有限几种颜色(红橙黄绿） 特点： 电子束的速度决定了屏幕上光点的颜色荧光涂层 产生颜色低速电子束较低速电子束较高速电子束高速电子束电子束(2) 影孔板法： 原理：影孔板被安装在荧光屏的内表面，用于精确定位像素的位置外层玻璃影孔板荧光涂层 1）影孔板的类型： 点状影孔板 大多数球面 与柱面显象管 栅格式影孔板Mitsubishi（三菱）的Diamondtron（钻石）与 Sony的Trinitron（特丽珑）显象管 栅格式影孔板 LG的 Flatron 显象管CRT:2）点状影孔板工作原理）点状影孔板工作原理红、绿、蓝三基色三色荧

4、光点三个电子枪CRT:这种方法利用人们眼睛在超过一定距离后分辨力不高的特性，产生与直接混色法相同的效果3）点状影孔板工作原理）点状影孔板工作原理(续续)CRT:分辨率 用乘法形式来表示，如800600 ，其中“800”表示屏幕上水平方向显示的像素数，“600”表示垂直方向显示的像素数。所以分辨率就是指画面的解析度由多少像素构成，其数值越大图象就越清晰。 CRT（阴极射线管）显示器的实际分辨率不仅与显示尺寸有关，还由显像管点距和视频放大电路提供的视频带宽等因素决定。CRT:显示器能够同时显示的颜色个数a.如果电子枪只有开、关两个状态，则只能产生2*2*2=8种颜色CRT:b.如果每个电子枪有25

5、6个等级，则显示器能同时显示256*256*256=16M 种颜色，此时称为真彩系统如图是一个具有如图是一个具有24位面的帧位面的帧缓冲存储器，红、绿、蓝各缓冲存储器，红、绿、蓝各8个位面，其值经数模转换控个位面，其值经数模转换控制红、绿、蓝电子枪的强度制红、绿、蓝电子枪的强度，每支电子枪的强度有，每支电子枪的强度有256(8位位)个等级，则能显示个等级，则能显示256*256*256=16兆种颜色，兆种颜色，16兆种颜色也称作兆种颜色也称作(24位位)真彩真彩色。色。CRT:点距:点距是指显像管内壁相邻两个同色荧光点的间距，水平点距水平点距是指这两个荧光点之间在水平方向的距离。CRT:点距点

6、距:如果把屏幕上三个最临近的同色荧光点连接起来，就构成一个等边三角形，此等边三角形的边长就是点距。该等边三角形底边上的高即边长在水平方向的投影，其长度就是水平点距(如图所示)。CRT: 大多数球面 与柱面显象管 Mitsubishi（三菱）的Diamondtron（钻石）与 Sony的Trinitron（特丽珑）显象管LG的 Flatron 显象管CRT:荧光像素由红、绿、蓝（R、G、B）三个相邻荧光点才构成一个彩色的荧光像素。像素是指在显示器屏幕上显卡所能控制的最小区域。 显像管内壁的荧光点（荧光像素）的位置无法改变，而像素点的位置是随显卡输出分辨率的变化而变化的，故荧光像素与像素的概念是不

7、同的。CRT:用可显示区域的宽和高分别除以水平和垂直点距，就可得到显示器在水平和垂直方向最多可以显示的点数。mm点距显示器为例，则求其最大分辨率 ？（提示：mm ）CRT: 则水平和垂直方向有效显示尺寸水平和垂直方向有效显示尺寸约为 :280mm和210mm 水平点距水平点距 mm0.866 = 0.2425mm 水平可用荧光像素点数水平可用荧光像素点数= 水平有效显示尺寸/水平点距 = 280mm / 0.2425mm = 1154 垂直可用荧光像素点数垂直可用荧光像素点数= 垂直有效显示尺寸/垂直点距 = 210mm / 0.28mm = 750 该显示器的实际分辨率实际分辨率最大为:11

8、54750 （标准分辨率）。 超过这个模式，如显卡输出12801024 分辨率的信号，显示器只能将这12801024个像素的信息罗列到1154750 个荧光像素之中。光栅扫描显示系统光栅扫描显示系统特点特点：光栅扫描帧帧：完成一次扫描所产生的图像扫描线，水平回扫期，垂直回扫期绘图过程绘图过程： 其原理是利用了人们眼睛的视觉残留特性和荧光粉的余辉作用光栅扫描显示系统光栅扫描显示系统简单的光栅扫描图形显示系统的结构光栅扫描显示系统光栅扫描显示系统逻辑部件逻辑部件：帧缓冲存储器（Frame Buffer）， 视频控制器（Video Controller），显示处理器（Display Processo

9、r）， 阴极射线管（CRT：Cathode-ray Tube）较为典型光栅扫描图形显示系统的结构帧缓冲存储器帧缓冲存储器作用作用：存储屏幕上像素的颜色值简称帧缓冲器，俗称分辨率M*N、颜色个数K与显存大小V的关系可以同时显示16兆种颜色的显示系统称为真彩系统 CPU或显示处理器扫描转换光栅扫描显示系统光栅扫描显示系统光栅扫描显示系统光栅扫描显示系统带宽T与分辨率、帧频F的关系显存问题高分辨率和真彩要求有大的显存 1024*768真彩模式需要3M字节显存解决办法解决办法：（1） 增加显存;（2）采用（Lookup Table）也称（Color Table）技术.带宽问题与显存问题带宽问题与显存问

10、题查色表工作原理带宽问题高分辨率和高刷新频率要求有高带宽（设1024*768/85模式需要85M带宽） 一般为B = r(x)r(y)V 实际为：为了避免信号在扫描边缘的衰减，保证图像的清晰 解决办法解决办法： 隔行扫描隔行扫描（现在已经基本不用，主流显示器都采用逐行扫描逐行扫描方式）隔行扫描的工作原理隔行扫描的工作原理：把一帧分为两场，即奇数场偶数场场频场频：定义为：2*帧频 光栅显示系统的特点光栅显示系统的特点（1）优点）优点：成本低易于绘制填充图形色彩丰富刷新频率一定，与图形的复杂程度无关易于修改图形（2）缺点）缺点：需要扫描转换会产生混淆，即会出现直线段不直、图形边界呈阶梯状等现象 新

11、型显示器（）Liquid crystal displayfluorescent lcolour filtersliquid crystal layer 新型显示器（）() 计算机图形输入设备 计算机图形输入设备（续）光学鼠标。发光二极管、微型摄像头、光学引擎和控制芯片数据手套(3) (3) 计算机图形输出设备计算机图形输出设备2.1.2 2.1.2 计算机图形软件计算机图形软件(1)几何造型平台 (2)CAD/CAM CAD/CAM (续)(3) 计算机动画软件 Poser人体动画软件 Metacreations公司(4)可视化软件 2.1.3 2.1.3 图形标准图形标准 图形标准的产生与发

12、展历史图形标准的产生与发展历史（1）发展历程诸侯割据诸侯割据标准讨论标准讨论标准形成标准形成图形标准的产生与发展历史（续）图形标准的产生与发展历史（续）（2）两类标准官方标准（标准组织制定）：GKS (Graphical Kernel System) PHIGS (Programmings Hierachical Interactive Graphics System) 工业标准（事实上的标准）：SGI 等公司的 OpenGL，微软公司的 DirectX，X财团的 Xlib，Adobe 公司的 PostScript 等等。图形标准的产生与发展历史（续）图形标准的产生与发展历史（续）2.2 基于

13、Windows的图形程序设计方法2.2 OpenGL介绍 2.2.1 OpenGL的主要功能 OpenGL的主要功能（续）OpenGL的主要功能（续）OpenGL的主要功能（续）2.2.2 GLUT库介绍GLUT 代表代表OpenGL Utility Tookit。Mark J.Kilgard 为了使为了使OpenGL应用程序应用程序结构能够真正独立于窗口系统构思了结构能够真正独立于窗口系统构思了GLUT库。库。Introduction to GLUTGLUT is an OpenGL add-onnot part of the standard, but shipped with most

14、implementationsprovides a platform-independent way toget a context (window or fullscreen)read keyboard and mousecreate menusperform animationsuses the call-back event modelregister call-back or service functions with GLUT to handle each type of eventGLUT calls the appropriate event handling function

15、 as each event happensUsing GLUTint main(int argc, char* argv)/ initialise GLUT & pass in command-line argumentsglutInit(&argc, argv);/ get a context/ register callbacks for GLUT/ let GLUT manage things from hereglutMainLoop三三;/ note that glutMainLoop三三 never returnsreturn 0;/ so this is nev

16、er runGetting a windowed context/ window position (hint only, may be overridden by GLUT)glutInitWindowPosition(100, 100);/ window dimensions (hint only, may be overridden by GLUT)glutInitWindowSize(300, 300);/ context features/ e.g. double= double-buffered (front/back)/ rgb= 24-bit context/ depth=24

17、 = at least 24-bit depth buffer/ see for moreglutInitDisplayString(double rgb depth=24);/ open window with titleglutCreateWindow(GL_POLYGON);Getting a fullscreen context/ dont need to specify window size or position/ but context features are still requiredglutInitDisplayString(double rgb depth=24);/

18、 open context in entire screen if possibleglutEnterGameMode三三;Functions to register callbacksglutDisplayFunc三register the function that is called whenever the content of the window needs to be drawnglutReshapeFunc三register the function that is called when the user resizes the windowglutKeyboardFunc三

19、register the function that is called when a key is pressedglutSpecialFunc三register the function that is called when a special key is pressed (eg., cursor/function keys)Functions to register callbacksglutMouseFunc三register the function that is called when a mouse button is clicked or releasedglutMoti

20、onFunc三register the function that is called when the mouse is moved in a window while one or more mouse buttons is pressedglutIdleFunc三register the function that is called when theres nothing else to douseful for animating a scene Sle GLUT programint main(int argc, char* argv)/ initialise GLUTglutIn

21、it(&argc, argv);glutInitWindowPosition(350, 500);glutInitWindowSize(300, 300);glutInitDisplayString(double rgb depth=24);glutCreateWindow(GL_POLYGON);/ register callbacks for GLUTglutDisplayFunc(ViewScene);/ let GLUT manage things from hereglutMainLoop三三;return 0;Sle GLUT program (cont.)void Vie

22、wScene(void)glClearColor(1.0, 1.0, 1.0, 1.0);/ clear the bufferglClear(GL_COLOR_BUFFER_BIT);glColor3f(1.0, 0.0, 0.0);/ draw in redglPolygonMode(GL_FRONT, GL_LINE); / wireframe modeglBegin (GL_TRIANGLES);glVertex2f (-0.5, 0.5);glVertex2f (0.2, -0.2);glVertex2f (0.2, 0.4);glVertex2f (0.5, -0.6);glVert

23、ex2f (0.6, 0.1);glVertex2f (-0.4, -0.2);glEnd三三; / done sending dataglutSwapBuffers三三;/ display the output2.2.3 OpenGL的绘制流程和原理 点数据评价器逐点操作基元匹配显示列表像素数据像素操作纹理存储器光栅化基片操作帧缓冲区具体可参看辅助电子教材OpenGL红宝，第8页：OpenGL渲染管道2.2.4 VC开发OpenGL绘图程序 (64位WIN7操作系统放在” C:WindowsSysWOW64”下2.运行visual c+ 20XX，file-new project 新建空的w

24、in32 console appliction在右侧solution Explorer下右键点击新建工程的Source Files,弹出菜单，选择add-new item.,选择C+ File(.cpp)在新建的文件中输入以下代码测试下 #include #include int main(int argc, char* argv)glutInit(&argc, argv);glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);glutInitWindowSize (250, 250);glutInitWindowPosition (100, 100

25、);glutCreateWindow (hello);init 三;/见下一页glutDisplayFunc(display);/见下页glutMainLoop三;return 0; /* ISO C requires main to return int. */编译没问题就OK了void display(void)/* clear all pixels */glClear (GL_COLOR_BUFFER_BIT);/* draw white polygon (rectangle) with corners at* (0.25, 0.25, 0.0) and (0.75, 0.75, 0.0

26、)*/glColor3f (1.0, 0.0, 1.0);glutWireTeapot(0.5);/* dont wait!* start processing buffered OpenGL routines*/glFlush 三;void init (void)/* select clearing (background) color */glClearColor (0.0, 0.0, 0.0, 0.0);/* initialize viewing values */glMatrixMode(GL_PROJECTION);glLoadIdentity三;glOrtho(-1.0, 1.0,

27、 -1.0, 1.0, -1.0, 1.0);VC开发OpenGL绘图程序（续）编译并运行。注意运行时应保证屏幕的颜色在编译并运行。注意运行时应保证屏幕的颜色在16位以上，如位以上，如图。图。三维物体绘制函数三维物体绘制函数包括了两种形式网状体和实心体，如绘制:立方体glutWireCube三和 glutSolidCube三长方体glutWireBox三环形圆纹面glutWireTorus三圆柱glutWireCylinder三二十面体glutWireIcosahedron三八面体glutWireOctahedron三四面体glutWireTetrahedron三十二面体glutWireDod

28、ecahedron三圆锥体glutWireCone三茶壶glutWireTeapot三绘制实心体Wire更换成Solid就可以 openGL函数介绍典型格式:glEnable三, glDisable三glVertex*三glNormal*三glMaterial*三glColor*三C语言风格,无重载函数glColor3f(red, green, blue)glColor4f(red, green, blue, alpha)glColor4fv(array *)函数的命名模式glColorntv()n=3 or 4, for 3 or 4 parameterst=data typebGLbyte

29、8-bit integersGLshort16-bit integeriGLint32-bit integerfGLfloat32-bit floatdGLdouble64-bit floatubGLubyte8-bit unsigned integerusGLubyte16-bit unsigned integeruiGLubyte32-bit unsigned integerv=vector data (array)例:glColor3ub(255,255,255);glColor3f(1.0, 1.0, 1.0);glColor4f(1.0, 1.0, 1.0, 1.0);glColor

30、4fv(objectColor)float objectColor = 1.0, 1.0, 1.0, 1.0;GL_POINTSevery vertex generates a pointglPointSize(10);glBegin (GL_POINTS);glColor3f(1.0,0.0,0.0);/ 设置红色设置红色glVertex2f (-0.5, 0.5);glColor3f(0.0,1.0,0.0);/ 设置绿色设置绿色glVertex2f (0.2, -0.2);glColor3f(0.0,0.0,1.0);/ 设置蓝色设置蓝色glVertex2f (0.2, 0.4);glC

31、olor3f(1.0,1.0,0.0);/ 设置黄色设置黄色glVertex2f (0.5, -0.6);glColor3f(1.0,0.0,1.0);/ 设置粉色设置粉色glVertex2f (-0.4, -0.2);glColor3f(0.0,0.0,0.0);/ 设置黑色设置黑色glVertex2f (0.6, 0.1);glEnd三三;123456GL_LINESevery pair of vertices generates a lineglLineWidth(8.0);glBegin (GL_LINES);glColor3f(1.0,0.0,0.0);/ 设置绘图颜色设置绘图颜色g

32、lVertex2f (-0.5, 0.5);glVertex2f (0.2, -0.2);glColor3f(0.0,0.0,1.0);/ 设置绘图颜色设置绘图颜色glVertex2f (0.2, 0.4);glVertex2f (0.5, -0.6);glColor3f(1.0,0.0,1.0);/ 设置绘图颜色设置绘图颜色glVertex2f (-0.4, -0.2);glVertex2f (0.6, 0.1);glEnd三三;123456GL_LINE_STRIPevery vertex adds to the poly lineglBegin (GL_LINE_STRIP);glVer

33、tex2f (-0.5, 0.5);glVertex2f (0.2, -0.2);glVertex2f (0.2, 0.4);glVertex2f (0.5, -0.6);glVertex2f (-0.4, -0.2);glVertex2f (0.6, 0.1);glEnd三三;123456GL_LINE_LOOPevery vertex adds to the poly line, glEnd三 closes the loopglBegin (GL_LINE_LOOP);glVertex2f (-0.5, 0.5);glVertex2f (0.2, -0.2);glVertex2f (0.2

34、, 0.4);glVertex2f (0.5, -0.6);glVertex2f (-0.4, -0.2);glVertex2f (0.6, 0.1);glEnd三三;123456GL_TRIANGLESevery vertex triplet generates a filled triangleglBegin (GL_TRIANGLES);glVertex2f (-0.5, 0.5);glVertex2f (0.2, -0.2);glVertex2f (0.2, 0.4);glVertex2f (0.5, -0.6);glVertex2f (0.6, 0.1);glVertex2f (-0

35、.4, -0.2);glEnd三三;123456GL_TRIANGLESevery vertex triplet generates a wireframe triangleglPolygonMode (GL_FRONT, GL_LINE);glPolygonMode (GL_BACK, GL_LINE);glBegin (GL_TRIANGLES);glVertex2f (-0.5, 0.5);glVertex2f (0.2, -0.2);glVertex2f (0.2, 0.4);glVertex2f (0.5, -0.6);glVertex2f (-0.4, -0.2);glVertex

36、2f (0.6, 0.1);glEnd三三;123456GL_TRIANGLE_STRIPevery vertex after the first two generates a trianglenote vertex orderglPolygonMode (GL_FRONT, GL_LINE);glPolygonMode (GL_BACK, GL_LINE);glBegin (GL_TRIANGLE_STRIP);glVertex2f (-0.8, 0.5);glVertex2f (-0.4, -0.2);glVertex2f (0.0, 0.4);glVertex2f (0.2, -0.4

37、);glVertex2f (0.5, 0.3);glVertex2f (0.8, -0.5);glEnd三三;123456v1, v2, v3, then v3, v2, v4 (note the order), thenv3, v4, v5, and so on. GL_TRIANGLE_FANevery vertex after the first two generates a trianglethe first vertex is the centrenote vertex orderglPolygonMode (GL_FRONT, GL_LINE);glPolygonMode (GL_BACK, GL_LINE);glBegin (GL_TRIANGLE_FAN);glVertex2f (-0.5, -0.6);glVertex2f (-0.8, -0.2);glVertex2f (-0.4, 0.3);glVertex2f (0.1, 0.3);glVertex2f (0.4, 0.0);glVertex2f (0.3, -0.7);glEnd三