3 장 컴퓨터 그래픽스

3.1 벡터 그래픽과 비트맵 이미지

3.2 벡터와 비트맵의 통합

3.3 레이어

3.4 파일 포맷

2014-1 학기1 멀티미디어시스템

컴퓨터 그래픽스 디지털 형태로 저장된 정지 이미지를 만들고 ,

편집하고 , 디스플레이 하는 SW/HW 기술 : 스캐너로 , 인화된 이미지를 디지털화 디지털 카메라로 , 이미지를 캡쳐 비디오 카메라로 , 프레임을 캡쳐 그래픽 패키지를 이용 , 디지털 형태의 이미지 생성 데이터를 시각적인 형태로 표현하여 이미지 제작

2014-1 학기2 멀티미디어시스템

렌더링 (Rendering) 이미지는 픽셀 (pixel) 의 배열 형태로 모니터 등에

디스플레이 됨 .

사각형 ( 보통 , 정사각형 ) 의 색상 점 . 프로그램 ( 즉 , Web 브라우저 ) 이 이들 픽셀에

적절한 색깔을 주어 원하는 이미지를 생성함 .

픽셀들의 색상은 광학적으로 혼합되어 연속적인 색조를 만듦 .

프로그램은 이미지의 모델 (model) 을 유지해야 함 .

파일로 저장되어 있고 , 프로그램이 읽어 들여 사용 .

2014-1 학기3 멀티미디어시스템

비트맵과 벡터 그래픽

비트맵 그래픽 : 이미지를 픽셀 값들의 배열 형태로 모델링 . 논리 픽셀 (logical pixel) 을 화면 상의 물리 픽셀

(physical pixel) 로 직접 매핑하여 렌더링 . 스케일링 (scaling) 과 클리핑 (clipping) 이 요구될 수도

있음 . 벡터 그래픽 : 이미지를 선 , 사각형 , 등의

수학적 표현으로 모델링 . 기술된 내용으로 , 픽셀을 계산하여 렌더링 .

2014-1 학기4 멀티미디어시스템

메모리 요구사항 비트맵 : w x h 개의 픽셀을 가진 이미지에서 ,

픽셀 당 c 바이트를 사용하면 총 whc 바이트가 필요 .

벡터 : 도형의 복잡도에 따라 요구 공간이 달라짐 . ( 얼마나 도형이 많은지 , 경로의 수 , 등… ) 보통은 , 벡터 그래픽이 비트맵보다 크기가 적음 .

2014-1 학기5 멀티미디어시스템

메모리 요구사항 가로 , 세로가 128 개 픽셀인 정사각형의 바깥

테두리는 20 픽셀의 파란색으로 , 내부는 적색으로 채울 때 , 비트맵의 경우 : 픽셀 당 24 비트를 사용하면 ,

128x128x3 = 48kbytes SVG 로 기술한 벡터의 경우 : <path fill="#F8130D" stroke="#1E338B"

stroke-width="20" d="M118,118H10V10h108V118z"/>

86 bytes ( + 198 bytes SVG boilerplate)

2014-1 학기6 멀티미디어시스템

이미지 편집

벡터 : 드로잉 (drawing) 프로그램 개별적으로 그래픽 객체를 선택 ( 도형 , 선 , 등 ..) 크기 , 위치 , 각도 , 등…을 변환 속성을 변경 : 스트로크와 채움 등 ..

비트맵 : 페인팅 (painting) 프로그램 픽셀의 영역을 선택 효과와 필터를 적용

2014-1 학기7 멀티미디어시스템

스케일링 (Scaling)

벡터 (Vector) :

스케일링은 , 저장되어 있는 기술에 대하여 , 간단한 수학적 조작으로 가능

곡선이나 선들은 어떤 크기든 자연스러움 유지

비트맵 (Bitmap) : 픽셀 값들에 대한 보간을 구함

다소 복잡한 알고리즘

보통 , 질의 저하 , 블러링 (blurring), … 등이 발생함 .

71

2014-1 학기8 멀티미디어시스템

벡터와 비트맵의 통합 벡터를 래스트화 (Rasterize) :

벡터의 특성이 모두 없어짐 . 비트맵을 트레이스 (Trace) :

어려우며 , 대략적인 형태만 얻을 수 있음 . 비트맵을 벡터 드로잉 프로그램 속으로 임포트

: 개별적인 객체로 취급함 .

대략적인 비트맵 형태를 얻기 위하여 , 벡터에 복잡한 스트로크를 적용함 .

73–75

2014-1 학기9 멀티미디어시스템

레이어 (Layer) 그래픽과 , 특히 비트맵에서 유용하며 , 양쪽

모두 사용 가능한 조직적인 방식 : 비트맵 이미지의 부분들을 분리하거나 조작하는

것을 가능하게 함 . 그림 위에 올려 놓는 투명한 아세테이트

용지의 디지털 버전 : 색깔이 없는 픽셀이나 그래픽 객체 영역은

투명하므로 , 더 아래 층에 있는 것을 볼 수 있음 . 합성 (Compositing) – 여러 가지의 혼합 모드

(blending mode) 를 이용하여 레이어들을 합치는 것 .(digital collage)

75–78

2014-1 학기10 멀티미디어시스템

파일 포맷 (File Format) 매우 다양한 그래픽 파일 포맷이 존재함 . 이미지 데이터의 인코딩 방법이 다름 . 추가적인 정보의 형태나 크기도 다름 . (Bitmap) 압축 방식이 서로 다름 .

무손실 (Lossless) – 압축 후 원래와 똑같은 이미지 재생 손실 (Lossy) – 일부 정보가 손실 , 대략의 이미지 재생

2014-1 학기11 멀티미디어시스템

WWW 의 비트맵 포맷

GIF (Compuserve 의 Graphics Interchange Format) 무손실 방식 , 256 색상 ( 인덱스 방식 )

JPEG (Joint Photographic Experts Group) 손실 방식 ( 가변적 압축률 ), 수 백만 색상

PNG (Portable Network Graphics) 무손실 방식 , 가변적 색상 수 , W3C 의 표준

2014-1 학기12 멀티미디어시스템

벡터 포맷 (Vector Format)

SVG (Scalable Vector Graphics) : W3C 의 표준 , 현재는 널리 쓰이지 않음 .

SWF (Flash) : 원래는 벡터 애니메이션 용 , 그러나 정지된 벡터

그래픽에도 사용함 . 사실상의 표준 . EPS (Encapsulated PostScript) :

주로 프린트 시에 사용 .

2014-1 학기13 멀티미디어시스템