3장 컴퓨터 그래픽스 3.1 벡터 그래픽과 비트맵 이미지 3.2 벡터와 비트맵의 통합 3.3 레이어 3.4 파일 포맷 3장 컴퓨터 그래픽스 3.1 벡터 그래픽과 비트맵 이미지 3.2 벡터와 비트맵의 통합 3.3 레이어 3.4 파일 포맷 멀티미디어시스템 2015-1학기

컴퓨터 그래픽스 디지털 형태로 저장된 정지 이미지를 만들고, 편집하 고, 디스플레이 하는 SW/HW 기술 : 스캐너로, 인화된 이미지를 디지털화 디지털 카메라로, 이미지를 캡쳐 비디오 카메라로, 프레임을 캡쳐 그래픽 패키지를 이용, 디지털 형태의 이미지 생성 데이터를 시각적인 형태로 표현하여 이미지 제작 멀티미디어시스템 2015-1학기

렌더링(Rendering) 이미지는 픽셀(pixel)의 배열 형태로 모니터 등에 디스 플레이 됨. 사각형(보통, 정사각형)의 색상 점. 프로그램(즉, Web 브라우저)이 이들 픽셀에 적절한 색 깔을 주어 원하는 이미지를 생성함. 픽셀들의 색상은 광학적으로 혼합되어 연속적인 색조를 만듦. 프로그램은 이미지의 모델(model)을 유지해야 함. 파일로 저장되어 있고, 프로그램이 읽어 들여 사용. 멀티미디어시스템 2015-1학기

비트맵과 벡터 그래픽 비트맵 그래픽 : 이미지를 픽셀 값들의 배열 형 태로 모델링. 논리 픽셀(logical pixel)을 화면 상의 물리 픽셀 (physical pixel)로 직접 매핑하여 렌더링. 스케일링(scaling)과 클리핑(clipping)이 요구될 수도 있음. 벡터 그래픽 : 이미지를 선, 사각형, 등의 수학적 표현으로 모델링. 기술된 내용으로, 픽셀을 계산하여 렌더링. 멀티미디어시스템 2015-1학기

메모리 요구사항 비트맵 : w x h 개의 픽셀을 가진 이미지에서, 픽셀 당 c 바이트를 사용하면 총 whc 바이트가 필요. 벡터 : 도형의 복잡도에 따라 요구 공간이 달라짐. (얼 마나 도형이 많은지, 경로의 수, 등…) 보통은, 벡터 그래픽이 비트맵보다 크기가 적음. 멀티미디어시스템 2015-1학기

메모리 요구사항 가로,세로가 128개 픽셀인 정사각형의 바깥 테두리는 20 픽셀의 파란색으로, 내부는 적색으로 채울 때, 가로,세로가 128개 픽셀인 정사각형의 바깥 테두리는 20 픽셀의 파란색으로, 내부는 적색으로 채울 때, 비트맵의 경우 : 픽셀 당 24 비트를 사용하면, 128x128x3 = 48kbytes SVG로 기술한 벡터의 경우 : <path fill="#F8130D" stroke="#1E338B" stroke-width="20" d="M118,118H10V10h108V118z"/> 86 bytes ( + 198 bytes SVG boilerplate) 멀티미디어시스템 2015-1학기

이미지 편집 벡터 : 드로잉(drawing) 프로그램 비트맵 : 페인팅(painting) 프로그램 개별적으로 그래픽 객체를 선택(도형, 선, 등..) 크기, 위치, 각도, 등…을 변환 속성을 변경 : 스트로크와 채움 등.. 비트맵 : 페인팅(painting) 프로그램 픽셀의 영역을 선택 효과와 필터를 적용 멀티미디어시스템 2015-1학기

스케일링(Scaling) 벡터(Vector) : 비트맵(Bitmap) : 스케일링은, 저장되어 있는 기술에 대하여, 간단한 수학적 조작으로 가능 곡선이나 선들은 어떤 크기든 자연스러움 유지 비트맵(Bitmap) : 픽셀 값들에 대한 보간을 구함 다소 복잡한 알고리즘 보통, 질의 저하, 블러링(blurring), … 등이 발생함. 멀티미디어시스템 2015-1학기

벡터와 비트맵의 통합 벡터를 래스트화(Rasterize) : 비트맵을 트레이스(Trace) : 벡터의 특성이 모두 없어짐. 비트맵을 트레이스(Trace) : 어려우며, 대략적인 형태만 얻을 수 있음. 비트맵을 벡터 드로잉 프로그램 속으로 임포트 : 개별적인 객체로 취급함. 대략적인 비트맵 형태를 얻기 위하여, 벡터에 복 잡한 스트로크를 적용함. 멀티미디어시스템 2015-1학기

레이어(Layer) 그래픽과,특히 비트맵에서 유용하며, 양쪽 모두 사용 가능한 조직적인 방식: 75–78 레이어(Layer) 그래픽과,특히 비트맵에서 유용하며, 양쪽 모두 사용 가능한 조직적인 방식: 비트맵 이미지의 부분들을 분리하거나 조작하는 것을 가능하게 함. 그림 위에 올려 놓는 투명한 아세테이트 용지의 디지털 버전: 색깔이 없는 픽셀이나 그래픽 객체 영역은 투명하 므로, 더 아래 층에 있는 것을 볼 수 있음. 합성(Compositing) – 여러 가지의 혼합 모드 (blending mode) 를 이용하여 레이어들을 합치는 것.(digital collage) 멀티미디어시스템 2015-1학기

파일 포맷(File Format) 매우 다양한 그래픽 파일 포맷이 존재함. 이미지 데이터의 인코딩 방법이 다름. 추가적인 정보의 형태나 크기도 다름. (Bitmap) 압축 방식이 서로 다름. 무손실(Lossless) – 압축 후 원래와 똑같은 이미지 재생 손실(Lossy) – 일부 정보가 손실, 대략의 이미지 재생 멀티미디어시스템 2015-1학기

WWW의 비트맵 포맷 GIF (Compuserve의 Graphics Interchange Format) 무손실 방식, 256 색상(인덱스 방식) JPEG (Joint Photographic Experts Group) 손실 방식(가변적 압축률), 수 백만 색상 PNG (Portable Network Graphics) 무손실 방식, 가변적 색상 수, W3C의 표준 멀티미디어시스템 2015-1학기

벡터 포맷(Vector Format) SVG (Scalable Vector Graphics) : SWF (Flash) : W3C의 표준, 현재는 널리 쓰이지 않음. SWF (Flash) : 원래는 벡터 애니메이션 용, 그러나 정지된 벡터 그래 픽에도 사용함. 사실상의 표준. EPS (Encapsulated PostScript) : 주로 프린트 시에 사용. 멀티미디어시스템 2015-1학기