Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0913030731 1 1 Lesson 1: Kỹ thuật đồ họavàHiệnthực ảo Computer Graphics And Virtual Reality z Kỹ Thuật đồ họacơ sở z Kỹ Thuật đồ họatiêntiến z Hiệnthực ảo-VRML Le Tan Hung hunglt@it-hut.edu.vn 2 A Brief History of Computer Graphics 1885 - CRT (Cathode Ray Tube) 1887 - Edison patents motion picture camera 1888 - Edison and Dickson record motion picture photos on a wax cylinder 3 A Brief History of Computer Graphics 1926 – J.L. Baird invents the television. 30 line vertical, black and red scan . 4 Computer Graphics: 1960-1970 z 1960 William Fetter (Thuật ngữ kỹ thuật đồ hoạ máy tính (Computer Graphics) z 1960 - SAGE (Semi-Automatic Ground Environment System) Bút sáng z 1960-1963 Dự án Sketchpad tại MIT z 1963 Ivan shutherland (hộinghị Fall Joint Computer - lần đầutiênkhả năng tạomới, hiểnthị và thay đổi đượcthực hiệntrongthờigianthựctrênmàn CRT ) z Wireframe graphics z Display Processors z Storage tube z Ivan Sutherland’s PhD thesis at MIT – Vấn đề tương tác người máy – Loop z Display something z User moves light pen z Computer generates new display – Sutherland tạo ra rất nhiều thuật toán cho CG 5 A Brief History of Computer Graphics 1963 z IBM creates the 360 models – One of the First General Purpose Mainframes z SRI develops the mouse. 6 A Brief History of Computer Graphics z 1966 Ralph Baer creates the 1 st comsumer CG product: – Odyssey Pinball z 1967 – GE introduces first full colour real time flight simulator for NASA Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0913030731 2 7 Lịch sử phát triển 1970-1980 z CG:1970-1980 z Raster Graphics z Beginning of graphics standards – IFIPS z GKS: European effort – Becomes ISO 2D standard z Core: North American effort – 3D but fails to become ISO standard 8 A Brief History of Computer Graphics 1973 z Michael Crichton’s “Westworld” uses 2D graphics z First time computer is used for image manipulation. z Featured scenes that showed audiences the world viewed by the eye circuitry of a synthetic human (played by a very real Yul Brenner) in a future Western theme park. This effect was achieved with 2D computer graphics tools mostly derived from image processing techniques. 9 A Brief History of Computer Graphics 1974 z Intel develop the 8080 processor. 1975 z Mandelbrot plots fractals z Bill Gates starts Microsoft 1976 z Steve Jobs and Steve Wozniak start Apple. 1977 z Academy of Motion Pictures Art and Sciences introduces Visual Effects category for Oscars. 10 A Brief History of Computer Graphics z 1977 Star Wars wins oscar for special effects. z 1978 Superman wins oscar for special effects z 1979 Alien wins oscar for visual effects. z 1980 The Empire Strikes Back wins oscar for visual effects. 11 80-90 z CG: 1980-1990 – Special purpose hardware z Silicon Graphics geometry engine – VLSI implementation of graphics pipeline – Industry-based standards z PHIGS z RenderMan – Networked graphics: X Window System – Human-Computer Interface (HCI) 12 A Brief History of Computer Graphics 1981 IBM introduces the first IBM PC (16 bit 8088 chip) •Raiders of the Lost Ark wins an oscar for visual effects. Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0913030731 3 13 A Brief History of Computer Graphics 1982 z The Genesis Effect (ILM) for Startrek II is the first all computer animated visual effects shot for film. 14 A Brief History of Computer Graphics 1983 z First Coke Polar Bears Commercial z 1984 PIXAR Opens 15 A Brief History of Computer Graphics 1985 z The Last Starfighter is the first live action feature film with realistic computer animation of highly detailed models. 1989 z The Abyss is the first movie to include convincing 3D character animation. 16 Lịch sử phát triển 90-00 z CGraphics: 1990-2000 z OpenGL API z Tạo ra bộ phim hoạt hình hoàn chỉnh đầu tiên (Toy Story) z Khả năng mới của phần c ứng – Texture mapping – Blending – Accumulation, stencil buffer z CGraphics: 2000-03 z Photorealism z Graphics cards for PCs dominate market – Nvidia, ATI, 3DLabs z Game boxes and game players push the market z CGraphics trở thành công cụ cho công nghiệp sản xuất phim: Maya, Lightwave 17 A Brief History of Computer Graphics 1995 z Quake Released by Id Software z Toy Story becomes the first fully 3D computer animation feature film. 18 A Brief History of Computer Graphics 1996 z Independence Day wins oscar for visual effects. 1997 z Titanic wins oscar for visual effects. z PIXAR wins oscar for best short film: Geri’s Game. Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0913030731 4 19 A Brief History of Computer Graphics 1998 z Armageddon z Mouse Hunt z Bugs Life 1999 z The Matrix z Star Wars: The Phantom Menace z Disney’s Tarzan 20 A Brief History of Computer Graphics 2000 z Sony Playstation II z Walking with Dinosaurs z Disney’s Shrek 2002 Microsoft’s XBOX 21 Kỹ thuật đồ họavitính. z Definition (ISO) – Method and Technologies for converting data to and from a graphics devices via a computer z Computer Graphics (Kỹ thuật đồ hoạ máy tính) là mộtlĩnh vựccủa Công nghệ thông tin mà ở đó nghiên cứu, xây dựng và tậphợp các công cụ (mô hình lý thuyếtvàphần mềm) khác nhau để: z kiếntạo, lưutrữ, xử lýCácmôhình(model) vàhìnhảnh (image) của đốitượng z Computer graphics deals with all aspects of creating images with a computer Interactive Computer Graphics: - user controls contents, structure, and appearance of objects and their displayed images via rapid visual feedback. 22 Kỹ thuật đồ hoạđiểm (Sample based-Graphics) z Các mô hình, hình ảnh của các đốitượng đượchiểnthị thông qua từng pixel (từng mẫurờirạc) z Đặc điểm: – Có thể thay đổi thuộctính – Xoá đitừng pixel của mô hình và hình ảnh các đốitượng. – Cácmôhìnhhìnhảnh đượchiểnthị như mộtlưới điểm (grid) các pixel rờirạc, – Từng pixel đềucóvị trí xác định, đượchiểnthị vớimộtgiátrị rờirạc (số nguyên) các thông số hiểnthị (màu sắchoặc độ sáng) – Tậphợptấtcả các pixel của grid cho chúng ta mô hình, hình ảnh đối tượng mà chúng ta muốnhiểnthị 23 Bitmap Bitmap lines,areas, SRGP library Pascal / C program X Window System Graphics hardware Image image formats, compression, transfer graphics algorithms colour positions 24 Graphical Model Rendering Output Device Rendering Parameters Kỹ thuật đồ hoạ vector z Mô hình hình học (geometrical model) cho mô hình hoặc hình ảnh của đốitượng z Xác định các thuộc tính củamô hình hình học này, z Quá trình tô trát (rendering) để hiển thị từng điểmcủamôhình, hình ảnh thựccủa đốitượng z Vector = geometrical model + rendering Khoa CNTT - HBK H ni Email: hunglt@it-hut.edu.vn Tel: 0913030731 5 25 Vớ d v hỡnh nh ho Vector 26 Muscle ModelWireframe Model Skeletal Model Skin Hair Render and Touch up â Walt Disney and TSL 27 Raster and Vector Graphics z Raster Hỡnh nh v mụ hỡnh ca cỏc vt th c biu din bi tp hp cỏc im ca grid Thay i thuc tớnh ca cỏc pixel => thay i tng phn v tng vựng ca hỡnh nh. Copy c cỏc pixel t mt hỡnh nh ny sang hỡnh nh khỏc. z Vector Khụng thay ithuctớnhcatng imtrctip X lý vitng thnh phn hỡnh hcc s canúvthchin quỏ trỡnh tụ trỏt v hinth li. Quan sỏt hỡnh nh v mụ hỡnh cahỡnhnh v s vt nhiugúc khỏc nhau bng cỏch thay i im nhỡn v gúc nhỡn. 28 Phõn loicỏclnh vcca Computer Graphics Kỹ thuật phân tích và tạo ảnh Đồ hoạ hoạt hình và nghệ thuật Kỹ thuật nhận dạng Xử lý ảnh Đồ hoạ minh hoạ CAD/CAM System Kỹ thuật đồ hoạ Kiến tạo đồ hoạ Xử lý đồ hoạ 29 Phõn loitheoh to K thut ho hai chiu: l k thut ho mỏy tớnh s dng h tohai chiu(h tophng), s dng rt nhiutrongk thutx lý bn , th. K thut ho ba chiu: l k thut ho mỏy tớnh s dng h toba chiu, ũi hirt nhiutớnhtoỏnvphctphnnhiu so vik thut ho hai chiu. Kỹ thuật đồ hoạ Kỹ thuật đồ hoạ 2 chiều Kỹ thuật đồ hoạ ba chiều 30 Phõn loitheochcnng z K thutx lý nh (COMPUTER IMAGING) z K thutnhndng (Computer Vision techniques attempt to provide meaning to computer) images. z K thuttng hp nh (Computer Graphics) z Geometry modelling Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0913030731 6 31 Các ứng dụng tiêu biểucủakỹ thuật đồ họa z Xây dựng giao diệnngười dùng (User Interface) z Tạo các biểu đồ trong thương mại, khoa học, kỹ thuật, minh họa z Tựđộng hoá văn phòng và chế bản điệntử z Thiếtkế vớisự trợ giúp của máy tính (CAD_CAM) z Lĩnh vựcgiải trí, nghệ thuậtvàmôphỏng z Điềukhiển các quá trình sảnxuất (Process Control) z Lĩnh vựcbản đồ (Cartography) GIS 32 33 34 Pixar: Monster’s Inc. Square: Final Fantasy 35 Computer Aided Design (CAD) 36 CAD-CAM application Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0913030731 7 37 38 Mô hình Hệđồhọa  Mô hình hệ thống  Mô hình chức năng  Các chuẩncủahệđồhoạ 39 Application program Graphics system Graphics hardware Input and output devices Core, GKS, GKS-3D CGI (device interface) CGM (metafile) PHIGS (3D and realtime) X-window PHIGS+ (PEX) IGES OpenGL DirectX Metafiles Operating system Mô hình hệ thống đồ họa 40 Hệ thống đồ hoạ (Graphics System) z Interface between application software and graphics hardware system z Consists of input subroutines and output subroutines accepting input data or commands from a user and converting internal representations into external pictures on screen, respectively z Phầnmềm đồ hoạ hệ thống: – Là tậphợpcáclệnh đồ hoạ củahệ thống (graphics output commands), – Thựchiệncôngviệchiểnthị cái gì (what object) và chúng sẽđượchiểnthị như thế nào (how). – Phầnmềm đồ hoạ hệ thống là phầnmềmxâydựng trên cơ sở mộtthể loạiphần cứng nhất định và phụ thuộc vào phầncứng. z Phầncứng đồ hoạ: – Là tậphợpcácthiếtbịđiệntử (CPU, bộ nhớ màn hình) giúp cho việcthựchiệncác phầnmềm đồ hoạ. 41 concerned with: - hardware - how to display (rasterization) concerned with: - modeling - modeling transf. - color models - material property - lighting property G U I MODELING RENDERING DISPLAYING what is a table, a car, • •• ( to describe) to the computer Geometric Engine (to capture) the description create 2D image from 2D / 3D models Rendering Engine generate image on screen (to show) the image Raster & Display Engine concerned with : - viewing & projection - drawing & clipping primitives - local illumination & shading - texture mapping Thành phần trong chức năng của kỹ thuật đồ hoạ 42 3D Graphics Over World Wide Web 3D Graphics Over World Wide Web SRGP library Pascal / C program X Window System Graphics hardware Image image formats, compression, transfer graphics algorithms colour Drawing packages transformation of objects 3D Graphics projections lighting,shading lines,areas, positions Video WWW Animation WWW VRML Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0913030731 8 43 Các chuẩn giao diện củahệđồhoạ z GKS (Graphics Kernel System): chuẩnxácđịnh các hàm đồ hoạ chuẩn, được thiếtkế như mộttậphợp các công cụđồhoạ hai chiềuvàbachiều. – GKS Functional Description, ANSI X3.124 - 1985. – GKS - 3D Functional Description, ISO Doc #8805:1988. z CGI (Computer Graphics Interface System): hệ chuẩnchocácphương pháp giao tiếpvớicácthiếtbị ngoạivi. z CGM (Computer Graphics Metafile): xác định các chuẩnchoviệclưutrữ và chuyển đổi hình ảnh. z VRML (Virtual Reality Modeling Language): ngôn ngữ thựctại ảo, mộthướng phát triển trong công nghệ hiểnthịđược đề xuấtbởi hãng Silicon Graphics, sau đó đã đượcchuẩn hóa như mộtchuẩncôngnghiệp. z PHIGS (Programmers Hierarchical Interactive Graphics Standard): xác định các phương pháp chuẩn cho các mô hình thời gian thực và lập trình hướng đối tượng. – PHIGS Functional Description, ANSI X3.144 - 1985. – PHIGS+ Functional Description, 1988, 1992. 44 Non-official industry standards Các chuẩncủahệđồhoạ z OPENGL thư viện đồ họa của hãng Silicon Graphics, được xây dựng theo đúng chuẩn của một hệ đồ họa. – SGI’s OpenGL 1993 z DIRECTX thư viện đồ hoạ của hãng Microsoft – Direct X/Direct3D 1997 45 OpenGL z Software interface to graphics hardware z Client-server model z 250 distinct commands z Object specification + image generation z Simple primitives: points, lines, polygons (pixels, images, bitmaps) z 3D rendering z Commands interpreted using client-server model – Client (Application) issues commands – Server (OpenGL) interprets and processes commands – Frame buffer configuration done by the window system 46 z Window tasks z User input z Complicated shapes – OpenGL Utility Library (GLU) – Window system support libraries z GLX / WGL / PGL – OpenGL Utility Toolkit (GLUT) – OpenInventor For portability, there are no commands for these. OpenGL-related Libraries 47 z Direct control of graphics hardware z Direct control of input/output devices, and sound Application program Application program Windows system Windows system Direct sound Direct draw Direct 3D Direct input Windows API Windows API Direct X …… DirectX 48 OpenGL Design Goals z SGI’s design goals for OpenGL: – High-performance (hardware-accelerated) graphics API – Some hardware independence – Natural, terse API with some built-in extensibility z OpenGL has become a standard (competing with DirectX) because: – It doesn’t try to do too much z Only renders the image, doesn’t manage windows, etc. z No high-level animation, modeling, sound (!), etc. – It does enough z Useful rendering effects + high performance – Open source and promoted by SGI (& Microsoft, half-heartedly) Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0913030731 9 49 MànhìnhCRT Raster Displays (early 70s) like television, scan all pixels in regular pattern use frame buffer (video RAM) to eliminate sync problems RAM ¼ MB (256 KB) cost $2 million in 1971 50 MànhìnhCRT SONY Trinitron CRT NEC Hybrid Mask Hitachi EDP Standard Dot-trio 51 Display Technology: Raster CRTs z Raster CRT pros: – Allows solids, not just wireframes – Leverages low-cost CRT technology (i.e., TVs) – Bright! Display emits light z Cons: – Requires screen-size memory array – Discreet sampling (pixels) – Practical limit on size (call it 40 inches) – Bulky – Finicky (convergence, warp, etc) 52 Các thiếtbị hiểnthị dạng điểm 53 CRT Displays Advantages z Fast repsonse (high resolution possible) z Full color (large modulation depth of E-beam) z Saturated and natural colors z Inexpensive, matured technology z Wide angle, high contrast and brightness Disadvantages z Large and heavy (typ. 70x70 cm, 15 kg) z High power consumption (typ. 140W) z Harmful DC and AC electric and magnetic fields z Flickering at 50-80 Hz (no memory effect) z Geometrical errors at edges 54 LCD-Liquid Crystal Display z A transmissive technology z Works by letting varying amounts of a fixed-intensity white backlight through an active filter z Organnic crystals that lign themselves together z When external force is applied they realign themselves z This is used to change polarisation and filter light Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0913030731 10 55 Display Technology: LCDs z Transmissive & reflective LCDs: – LCDs act as light valves, not light emitters, and thus rely on an external light source. – Laptop screen: backlit, transmissive display – Palm Pilot/Game Boy: reflective display 56 LCD Displays Advantages z Small footprint (approx 1/6 of CRT) z Light weight (typ. 1/5 of CRT) z Low power consumption (typ. 1/4 of CRT) z Completely flat screen - no geometrical errors z Crisp pictures - digital and uniform colors z No electromagnetic emission z Fully digital signal processing possible z Large screens (>20 inch) on desktops Disadvantages z High price (presently 3x CRT) z Poor viewing angle (typ. +/- 50 degrees) z Low contrast and luminance (typ. 1:100) z Low luminance (typ. 200 cd/m2) 57 Màn hình Plasma z Plasma display panels – Similar in principle to fluorescent light tubes – Small gas-filled capsules are excited by electric field, emits UV light – UV excites phosphor – Phosphor relaxes, emits some other color 58 Display Technology z Plasma Display Panel Pros – Large viewing angle – Good for large-format displays – Fairly bright z Cons – Expensive – Large pixels (~1 mm versus ~0.2 mm) – Phosphors gradually deplete – Less bright than CRTs, using more power 59 Display Technology: DMDs z Digital Micromirror Devices (projectors) – Microelectromechanical (MEM) devices, fabricated with VLSI techniques 60 Display Technology: DMDs z DMDs are truly digital pixels z Vary grey levels by modulating pulse length z Color: multiple chips, or color-wheel z Great resolution z Very bright z Flicker problems [...]... Buffer 10 24 65 66 11 Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0 913 0307 31 Framebuffers: Indexed-Color Framebuffers: Hi-Color Hi-Color was a popular PC SVGA standard Packs pixels into 16 bits: An indexed-color (8-bit or PseudoColor) framebuffer stores one byte per pixel (also: GIF image format) This byte indexes into a color map: How many colors can a pixel be? Still common on low-end displays... trick: color-map animation 67 – – 5 Red, 6 Green, 5 Blue Sometimes just 5,5,5 Each pixel can be one of 216 colors Hi-color images can exhibit worse quantization artifacts than a well-mapped 8-bit image 68 – – – – – – – X : 0 ÷ Xmax 2 màu/ 1 bit Y : 0 ÷ Ymax 16 màu/ 4 bit 256 màu/ 8bit 216 màu/ 16 bit 224 màu/ 24 bit 640 × 480 × 16 → Video RAM = 2MB 10 24 × 10 24 × 24 → Video RAM = 24MB 69 12 ... Framebuffers: True-Color Store indices (usually 8 bits) in framebuffer Display controller looks up the R,G,B values before triggering the electron guns A true-color ( 24-bit or 32-bit) framebuffer stores one byte each for red, green, and blue Each pixel can thus be one of 224 colors Pay attention to Endian-ness How can 24-bit and 32-bit mean the same thing here? Color Lookup Table 0 DAC 14 Pixel color = 14 RGB... gồm các phân tử huỳnh quang được kích thích Mịn, không to như các hạt tinh thể và không phát nhiệt Có thể tạo màn hình rộng loại OLEDs 61 Transparent Flexible Light-emitting, and quite bright (daylight visible) Large viewing angle Fast (< 1 microsecond offon-off) Can be made large or small – The display of the future? OLEDs hoạt động tương tự cơ chế của LEDs bán dẫn – – – 62 Display Technologies: Organic...Khoa CNTT - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0 913 0307 31 Màn hình hữu cơ Organic LED Arrays Display Technologies: Organic LED Arrays Organic Light-Emitting Diode (OLED) Arrays – – OLED pros: – – Cấu trúc là màng chất dẻo mỏng: – – – – Màng film cấu tạo bởi các phần tử hữu... – Not quite there yet (96x64 displays) except niche markets Cell phones (especially back display) Car stereos – – – Not very robust, display lifetime a key issue Currently only passive matrix displays 16 bits per pixel = ? bits red, ? bits green, ? bits blue DAC Passive matrix: Pixels are illuminated in scanline order (like a raster display), but the lack of phosphorescence causes flicker Active matrix: . - ĐHBK Hà nội Email: hunglt@it-hut.edu.vn Tel: 0 913 0307 31 1 1 Lesson 1: Kỹ thuật đồ họavàHiệnthực ảo Computer Graphics And Virtual Reality z Kỹ Thuật đồ họacơ sở z Kỹ Thuật đồ họatiêntiến z Hiệnthực. vcca Computer Graphics Kỹ thuật phân tích và tạo ảnh Đồ hoạ hoạt hình và nghệ thuật Kỹ thuật nhận dạng Xử lý ảnh Đồ hoạ minh hoạ CAD/CAM System Kỹ thuật đồ hoạ Kiến tạo đồ hoạ Xử lý đồ hoạ 29 Phõn loitheoh. loạiphần cứng nhất định và phụ thuộc vào phầncứng. z Phầncứng đồ hoạ: – Là tậphợpcácthiếtbịđiệntử (CPU, bộ nhớ màn hình) giúp cho việcthựchiệncác phầnmềm đồ hoạ. 41 concerned with: - hardware - how to display (rasterization)