Introduction to Computer Graphics Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 3 Rev. by SYO This presentation 2004, MacAvon Media Productions 2009-03-12 Multimedia 1
Visual Representation 그림은글보다직관적이다.
Computer Graphics 정지이미지및애니메이션이미지의제작및디스플레이 Scanner 로인쇄된이미지의 digitization Digital Camera 로이미지를 capture Video camera 로 frame 을 grab Graphics package 를이용하여이미지를제작 Data 를 Visualization
Computer Graphics: Image and Graphics 학술적인구분으로 이미지 (Image) 카메라를통하여입력받은그림 기술영역 : 화상처리 Digital Photo, Satellite Image, X-ray image 그래픽스 (Graphics) 사람이만든그림. 기술영역 : 컴퓨터그래픽스 Animation, 3-D graphics 양쪽이결합될수있다. Ex. medical images, X-ray, MRI scan images 단면이미지가 3D volume rendering 기술에의하여 3 차원 graphics data 로변환됨.
CT: Computed Tomography CT scan images 3-D Volume Rendering bone removed, vessels shown
이미지의 Rendering 이미지는화소 (pixel) 의배열로서디스플레이됨. 화소 : ( 정 ) 사각형의임의의색을가진점. Rendering : 원하는이미지를구성하기위하여각화소에적절한색값을주는과정. 화소들은광학적으로통합되어사람의눈에는연속적인 tone 으로보인다. Image data (model) 가컴퓨터에저장됨. 파일, 메모리에저장되고응용프로그램이이를 rendering 하여디스플레이하여준다.
Image = Array of pixels Pixels
Bitmapped and Vector Graphics Bitmapped graphics 이미지가화소값의배열로 modeling 된다. Rendering: 논리적인화소값을 screen 상에서표현할실제화소색의값으로 mapping 함. Scaling, clipping 과정이필요함. Vector graphics 이미지는곡선및기하학적인형태를수학적인표현으로 modeling 된다. Rendering: 수학적인표현으로부터각화소의값을계산한다. 2, 3차원변환및가시화과정
Production of Graphics -Vector Graphics Modeling Rendering paradigm Modeling 기하학적인형식으로 3 차원 model 을생성하고 Rendering model 을이차원의이미지로변환함.
Vector Graphics Representation: Pen-Plotter Model
Pen-Plotter Model
Vector Graphics : Pen-Plotter Model Drawing Functions moveto(x,y); lineto(x,y); Ex. 사각형그리기 moveto(0,0); lineto(1,0); lineto(1,1); lineto(0,1); lineto(0,0);
Vector Graphics : Pen-Plotter Model 기하학적인객체의모델링 : 꼭지점을차례로나열함. 렌더링 : 꼭지점을연결하면객체를그릴수있음. Ex. OpenGL : Graphics Programming Library % OpenGL : Triangle glbegine(gl_triangle); glvertex(0,0,0); glvertex(0,1,0); glvertex(1,0,0); glend(); (0,1 ) (0,0 ) (1, 0)
Memory Requirements Bitmapped w * h pixel 사이즈의이미지에서화소당 c bytes 의 depth 를가진다면 - 이이미지를저장하는데필요한전체메모리의양은 w*h*c bytes Vector 이미지의복잡도에따라다르다 ( 기본형태요소의개수, 형태의복잡성등 ) 보통 vector graphics 가 bitmapped graphics 보다더작은메모리를차지함.
Memory Requirements 128 px x 20 px blue outline filled in red Bitmap using 24 bits per pixel, 128x128x3 = 48kbytes Vector specified in SVG: <path fill= #F8130D" stroke= #1E338B" stroke-width="20" d="m118,118h10v10h108v118z"/> 86 bytes (plus 198 bytes SVG boilerplate)
Image Editing Vectors drawing programs 그래픽객체를선택하고 (shapes, paths, 등 ) 크기, 위치, 각도등을변형 속성을바꾼다. stroke and fill, 등 Visio, Adobe Illustrator Bitmaps painting programs 화소의영역을선택 효과, 필터등을적용한다. PhotoShop, PaintBrush
Transformation( 변환 ) Vector : Objects Bitmap : Pixel location and value
Scaling Transformation( 확대, 축소변환 ) Vectors Scaling 은저장된그래픽표현에수학적연산을가함으로서가능하다. (rendering 하기전 ) 어떠한크기로 Scaling 하더라도곡선, 직선은매끈하게렌더링할수있다. Bitmaps 화소값을보간한다. 다소복잡한알고리즘이필요함. 품질이떨어질수있다. blurring, jaggedness 등
Vector Graphics 의 scaling 크기변환 (0,1) (1,1) (0,2) (2,2) (0,0) (1,0) (0,0) Original x 2 (2,2) x 2 scaling Transformation 꼭지점변환 : (x, y) (x * 2, y * 2) 후 변환된꼭지점을 Rendering 함.
Vector Graphics 의 Rotation z 축을중심으로반시계방향으로 theta 만큼회전.
BITMAPPED IMAGE RESIZE EXAMPLE 보통화소값은정수좌표위치에서만정의되어있다. 변환후소수좌표위치의화소값이필요한경우가있다. 이때보간 (interpolation) 이필요함. 예 ) x 2 Resize 인경우화소의개수가 4 배로늘어남.? 화소의값은어떻게계산하는가?
Resizing Bitmapped Images -Interpolation 보간 (Interpolation) 의개념 온도추정의예 Linear Interpolation Curve
Interpolation Techniques 화소사이위치의새화소의값을생성. 최소인접보간법 (Nearest neighbor interpolation) 가장가까이위치한화소의값을취함. 빠르다, 그러나한개의입력화소값이여러개로복제되므로 block 화현상이발생할수있다. 양선형보간 (Bilinear interpolation) 새로운화소값을인접한네개화소의가중합으로계산함. 즉, 거리에반비례하는가중치를가진다. 3 번의선형보간이필요함. 이외에 Higher order interpolation, cubic convolution interpolation
Bilinear Interpolation 화소값을계산할위치에서인접한네개의이웃화소의화소값을입력으로사용 3 번의선형보간. 중심일경우에는단순평균값 x (x,y) y
y x
Bicubic Interpolation 4 x 4 neighborhood pixels better quality, but more processing time Standard for photoshop, printer, digital camera
Artifacts from Interpolation Interpolating Bitmapped Graphics may cause Aliasing Effect We need antialiasing to remove aliasing effect
Anti-Aliasing 배경과객체의경계부근의화소에중간색을부여함.
Rotation 새로운위치의화소의값이필요하게됨. 보간법
Optical and Digital Zoom Digital zoom resizes the image interpolation
Vectors & Bitmaps 의결합 Rasterize vectors : vector bitmap vector properties 를모두잃게된다. Trace bitmaps : bitmap vector 어렵다. 근사치만을구할수있다. Bitmaps 을 vector drawing program 에서 import 객체 (objects) 로서취급함.
Bitmap Vector: Vectorizaion
Bitmap Vector : Autotrace Vectorization Strategies 이미지에서경계부분을찾아서서로다른부분으로나눈다. 1. 윤곽 (contour) 를추적함. 2. 경계 (Edge) 를찾는다.
층 (Layers) 이미지가여러장의투명층이겹쳐져서구성된다고생각. 각투명층에서로다른객체를그릴수있음. 통합된이미지를구성하기위하여여러층을겹친다. 이미지의각객체를따로취급할수있다. Compositing: 각층의투명도를조절하여다양한방법으로여러층을결합 (digital collage) 그래픽소프트웨어에사용됨.
Layers
Combine two pictures Blending
파일형식 (File Formats) 다양한그래픽파일형식이사용됨. 이미지데이터를 encoding 하는방법이다르다. Bitmaps 이미지의압축방법 무손실 (Lossless) 압축된데이터로부터윈래의이미지를그래로복원할수있다. 손실 (Lossy) 복원시약간의정보가손실된다. 이미지는근사적으로복원된다. 손실압축방법이무손실보다압축효율이월등하게좋다.
WWW Bitmapped Formats GIF (Compuserve Graphics Interchange Format) Lossless, 256 colours (indexed), transparency patent by Unisys, used by Compuserve
WWW Bitmapped Formats JPEG (Joint Photographic Experts Group) Lossy (variable quality), millions of colours PNG (Portable Network Graphics) W3C Lossless, variable number of colours, W3C standard, but not used widely
Vector Formats SVG (Scalable Vector Graphics) W3C standard, not presently widely used 2-D vector graphics SWF (Small Web Forma, Shockwave Flash) Primarily for vector animation, but can be used for still vector graphics; de facto standard EPS (Encapsulated PostScript) Primarily print, use declining, superseded by PDF