그래픽스 프로그래밍

그래픽스 프로그래밍그래픽스 프로그래밍

그래픽스 프로그래밍 개요그래픽스 프로그래밍 개요

본 교재의 접근 방법 프로그래밍 지향적

내 용 최소한의 API 함수 소개 2 차원 프로그램 작성 시어핀스키 가스켓 예를 활용

시어핀스키 가스켓 OpenGL APIOpenGL API 기본요소와 속성기본요소와 속성 색상색상 관측관측 제어함수제어함수 가스켓 프로그램 다각형과 순환

시어핀스키 가스켓시어핀스키 가스켓

Sierpinski 라는 수학자가 만듦시어핀스키 삼각형이라고도 함프랙탈 기하학의 한 예 자기 유사성을 가짐

알고리즘알고리즘

1) 삼각형 내부에서 임의의 시작점 선택2) 세 정점 중 임의의 한 점 선택3) 시작점과 선택된 정점의 중간점 계산4) 중간점에 점을 찍음5) 이 새로운 점을 시작점으로 대치6) 단계 2 로 돌아감

프로그램 형식프로그램 형식

main(){ initialize_the_system(); for (some_number_of_points) { generate_a_point(); display_the_point(); } cleanup();}

OpenGLOpenGL 에서 정점의 표현에서 정점의 표현

glVertex*() * = nt 또는 ntv 형태

n : 차원 t : 데이터 형 ( 정수 : I, 실수 : f, double : d ) v: 배열에 대한 포인터

예 ) glVertex2i(GLint xi, GLint yi) glVertex3f(GLfloat x, GLfloat y, GLfloat z) GLfloat vertex[3];

glVertex3fv(vertex)

기하학적 객체의 정의기하학적 객체의 정의

선분glBegin(GL_LINES); glVertex2f(x1, y1);

glVertex2f(x2,y2);glEnd();

한쌍의 점glBegin(GL_POINTS); glVertex2f(x1,y1); glVertex2f(x2,y2);glEnd();

시어핀스키 가스켓 프로그램시어핀스키 가스켓 프로그램

기하학적 데이터의 표현 방법에 대한 고려 배열을 사용

typedef GLfloat point2[2];point2 p;

GLfloat p[2]; 와 동일

Display Display 함수 함수 –– 한 점 생성한 점 생성

void display(void){ typedef GLfloat point2[2]; // x, y 좌표 데이터 정의 point2 vertice[3]= {{0.0,0.0}, {250.0, 500.0}, {500.0,0.0}}; // 삼각형 static point2 p = {75.0, 50.0}; // 초기 시작점

int j, k; int rand(); // 난수 발생기

Display Display 함수 함수 (con’t)(con’t)

for (k=0; k < 5000; k++) { j = rand() % 3; // 3 꼭지점중 임의의 하나 선택 p[0] = (p[0] + vertice[j][0]) / 2.0; // X 좌표 생성 p[1] = (p[1] + vertice[j][1]) / 2.0; // Y 좌표 생성 glBegin(GL_POINTS); glVertex2fv(p); // 생성된 점의 출력 glEnd(); } glFlush(); // 버퍼를 비움 = 강제 출력 }

남은 문제들남은 문제들

색상 선택 화면상에서 이미지의 위치 이미지의 크기 윈도우 생성 절단 화면에 이미지 표시 시간

좌표계좌표계

초기 그래픽스 시스템에서는 정점의 위치를 출력장치상의 단위로 명시

장치 독립적인 그래픽스의 출현으로 세계 좌표계 ( 문제 좌표계 ) 와 장치 좌표계 ( 래스터 좌표 , 화면좌표 ) 가 분리

프로그래머는 세계 좌표계에서의 좌표를 명시 그래픽스 시스템이 장치 좌표계로 변환

좌표계 변환좌표계 변환

OpenGL APIOpenGL API

그래픽스 시스템 : 블랙 박스로 간주

사용자 프로그램

그래픽스 시스템

입출력장치

함수 호출 출력

데이터 입력

그래픽스 함수의 그룹그래픽스 함수의 그룹

기본 요소 함수 : 점 , 선분 , 다각형 , 문자열 등속성 함수 : 색 , 선의 두께 , 글자체 등관측함수 : 합성 카메라 설정변환 함수 : 회전 , 이동 , 크기 변환 등 객체 변환입력 함수 : 키보드 , 마우스 등의 입력 처리제어 함수 : 윈도우 시스템과의 통신 , 초기화 ,

에러 처리 등

OpenGL OpenGL 인터페이스인터페이스

라이브러리 구성 GL : 기본 라이브러리 GLU : GL 보다 상위 객체 , 기능 지원 (U =

utility) GLUT : 윈도우 시스템과의 인터페이스 (UT =

utility toolkit)OpenGL

응용 프로그램

Xlib, Xtk

프레임 버퍼

X- 윈도우 시스템 환경에서의 라이브러리 구성

기본 요소와 속성기본 요소와 속성

기본 요소에 대한 논쟁 최소주의

점 , 선 , 다각형 , 문자열 등 최소한의 요소 만 지원 이식성 우수 – 모든 하드웨어에 의해 지원

최대주의 원 , 곡선 , 곡면 , 입체 등의 다양한 요소 지원 보다 복잡한 응용 개발이 용이 , 이식성이 약함

OpenGL 중간적인 입장

GL : 작은 기본 요소 집합 GLU : GL 로부터 유도된 풍부한 객체 제공

기본 요소기본 요소

OpenGL 기본 요소 정점들의 집합으로 표현됨

type : 정점들의 해석 방법을 정의

glBegin(type); glVertex*( . . .); : glVertex*( . . .);glEnd();

기본 요소 기본 요소 (con’t)(con’t)

점과 선분형

다각형의 기초다각형의 기초

다각형 닫혀있고 내부를 가진 객체 여러 가지 표시 방법

채워진 객체 다각형 표시 방법

단순 다각형단순 다각형

단순 다각형 두 변이 교차하지 않음 명확하게 정의된 내부를 가짐

단순 다각형 비단순 다각형

볼록 다각형볼록 다각형

볼록 객체 (convex object) 객체 내부 임의의 두 점 사이의 선분 위의 모든

점이 객체 내부에 존재 예 ) 삼각형 , 사면체 , 사각형 , 원 , 구 , 평행

육면체

33 차원 모델링과 삼각형차원 모델링과 삼각형

전형적인 렌더링 알고리즘 정점들이 평평한 볼록 다각형이어야 올바르게 작동

3 차원 볼록 검사 검사가 쉽지 않음 : 다각형이 평평하지 않을 수 있음 세 정점은 항상 평평한 볼록 삼각형을 정의 보통 삼각형을 사용하여 3 차원 객체를 모델링

OpenGLOpenGL 에서 다각형에서 다각형

다각형 : 볼록 다각형만 지원삼각형과 사변형 : 다각형보다 효율적인 렌더링

OpenGLOpenGL 에서 다각형 에서 다각형 (con’t)(con’t)

띠와 부채꼴 (strips and fans)

문자열 문자열

종류 획 (stroke) 문자열 래스터 문자열

획 문자열 ( 벡터 문자열 ) 선분과 곡선으로 문자 윤곽을 정의 확대 또는 회전시켰을 때 문자의

세밀함과 모양이 유지됨

문자열 문자열 (con’t)(con’t)

래스터 문자열 단순하고 빠름 비트맵으로 정의됨 확대하면 거친 모양이 됨

곡선 객체곡선 객체

곡선 /곡면과 같은 객체를 생성하기 위한 접근 방법 근사 방법 : 기본 요소들을 사용해서 근사

원 : n 개의 변을 가진 정다각형

수학적 접근 방법 곡선 : 다항식을 이용하여 정의

속성속성

속성 객체가 어떻게 표현되는가를 정의 속성은 시스템 상태의 일부임

한번 설정되면 변경되기 전까지 계속해서 유지됨

즉시 모드 객체가 정의될 때 현재의 속성 값에 따라 화면에

즉시 디스플레이 됨 화면에 출력된 객체에 대한 정보를 저장해두지

않음

속성 속성 (con’t)(con’t)

각 기하학적 형은 해당 속성 집합을 가짐 점 : 색 , 크기 선분 : 색 , 두께 , 종류 ( 실선 , 단선 , 점선 ) 다각형 : 채우기 방법 획 문자열 : 높이 , 너비 , 서체 , 종류

색상 색상 (Color)(Color)

색상 모형 RGB 색상 모형

프레임 버퍼의 값이 R, G, B 각 성분 값을 나타냄 많은 메모리 필요 ( 예 : 1280 X 1024 X 24bit =

3.75MB)

색상 색상 (con’t)(con’t)

색상 요소 표시 특정 하드웨어에 독립적이기 위해 0.0 에서 1.0 사이의

값으로 표시 예 ) glColor3f(1.0, 0.0, 0.0); /* R, G, B 순서 */

4 색 체계 (RGBA) A = 알파 채널 (alpha channel)

0.0 : 완전 투명 ---- 1.0 : 완전 불투명 안개 효과 , 이미지 결합 등에 사용 예 ) 윈도우를 흰색으로 지우기

glClearColor(1.0, 1.0, 1.0, 1.0); glClear();

색상 속성의 설정색상 속성의 설정

시어핀스키 가스켓 프로그램의 속성 설정 화면의 초기화 색

glClearColor(1.0, 1.0, 1.0, 1.0); 색상의 지정

glColor3f(1.0, 0.0, 0.0); 점의 크기 설정

glPointSize(2.0); /* 단위 : 화소수 */

관측 관측 (Viewing)(Viewing)

2 차원 관측 이차원 세계에서 사각 영역을 취하고 그것의

내용을 화면의 정해진 영역으로 옮기는 것 사각 영역 : 관측 사각형 ( 절단 사각형 )

22 차원 관측차원 관측

관측사각형

3 차원 그래픽스의 특수한 경우 관측 사각형이 3 차원 관측 공간 (viewing

volume) 내에서 z = 0 인 평면 내에 있음 디폴트 관측 공간 : 중심에 원점을 가진 2 X 2 X

2 입방체

직교 관측직교 관측

앞의 관측은 직교 투영의 특수한 경우임 점 (x,y,z) 를 (x,y,0) 으로 투영

OpenGL 에서 직교 투영의 명시 void glOrtho(left, right, botom, top, near, far) void gluOrtho2D(left, right, bottom, top) /* near=-1.0, far=1.0

행렬 모드 행렬 모드

그래픽스 파이프라인의 행렬 모델 - 관측 행렬 투영 행렬

각 행렬은 단위 행렬에서 시작하여 일련의 변환 행렬을 곱하여 갱신

행렬 모드 현재 갱신하는 행렬을 지정 디폴트 모드 : 모델 - 관측 행렬 모드

이차원 관측 사각형 설정이차원 관측 사각형 설정

glMatrixMode(GL_PROJECTION);glLoadIdentity();gluOrtho2D(0.0, 500.0, 0.0, 500.0);glMatrixMode(GL_MODELVIEW);

좌하단 구석이 이차원계의 원점인 500 X 500 관측 사각형을 정의

제어 함수제어 함수

윈도우 시스템과의 상호 작용 초기화 : glutInit(int *argcp, char **argv) 윈도우 생성 : glutCreateWindow(char *name) 기본 특성

glutInitDisplayMode(GLUT_RGB | GLUT_DEPTH | GLUT_DOUBLE);

GLUT_RGB : RGB 색 모델 (cf. GLUT_INDEX) GLUT_DEPTH : 은면 제거GLUT_DOUBLE : 더블 버퍼링 (cf. GLUT_SINGLE)

glutInitWindowSize(480, 640); /* 윈도우 크기 */ glutInitWindowPosition(0,0); /* 윈도우 위치 */

타이틀

좌상단 (0,0)

종횡비 종횡비 (Aspect Ratio)(Aspect Ratio)

종횡비 (Aspect Ratio) 높이에 대한 너비의 비율 관측 사각형의 종횡비와 윈도우의 종횡비가 같지

않으면 왜곡 현상

시역 시역 (Viewport)(Viewport)

디스플레이 윈도우 내의 사각형 영역void glViewport(GLint x, GLint y, GLsizei w, GLsizei

디폴트로 전체 윈도우

main main 함수함수

이벤트 처리 void glutMainLoop(void)

프로그램이 이벤트 처리 루프를 시작하게 함 시어핀스키 프로그램

• 처리할 이벤트가 없음• 종료키가 입력될 때까지 화면에 그래픽스 유지

윈도우의 디스플레이 제어 void glutDisplayFunc(void (*func) (void))

윈도우가 다시 디스플레이 되어야 한다고 판단될 때마다 호출되는 함수 이름

가스켓 프로그램가스켓 프로그램

#include <GL/glut.h>

void myinit(void)

glClearColor(1.0, 1.0, 1.0, 1.0); // 흰색의 화면

glColor3f(1.0, 0.0, 0.0); // 적색으로 그리기

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(0.0, 500.0, 0.0, 500.0);

glMatrixMode(GL_MODELVIEW);

가스켓 프로그램 가스켓 프로그램 (con’t)(con’t)

void display(void){ typedef GLfloat point2[2]; // x, y 좌표 데이터 정의 point2 vertice[3]= {{0.0,0.0}, {250.0, 500.0}, {500.0,0.0}}; // 삼각형 int j, k; long rand(); // 난수 발생기 point2 p = {75.0, 50.0}; // 초기 시작점

glClear(GL_COLOR_BUFFER_BIT); // 윈도우 클리어

for (k=0; k < 500000; k++) { j = rand() % 3; // 3 꼭지점 중 임의의 하나 선택 p[0] = (p[0] + vertice[j][0]) / 2.0; // X 좌표 생성 p[1] = (p[1] + vertice[j][1]) / 2.0; // Y 좌표 생성 glBegin(GL_POINTS); glVertex2fv(p); // 생성된 점의 출력 glEnd(); } glFlush(); // 버퍼를 비움 = 강제 출력 }

void main(int argc, char** argv){ void myinit(), display();

glutInit(&argc,argv); // 초기화 glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(500,500); //500 X 500 윈도우 설정 glutInitWindowPosition(0,0); // 윈도우를 화면의 좌측 상단에 glutCreateWindow("The Gasket Program"); // 윈도우 생성 glutDisplayFunc(display); // Gasket 출력 함수 호출 myinit(); // 속성 설정 glutMainLoop(); // Event Loop }

실행 결과실행 결과

Visual C++Visual C++ 을 이용한 을 이용한 OpenGL OpenGL 프로그램 작성프로그램 작성

필요한 파일들 라이브러리

opengl32.lib, glu32.lib 는 Visual C++ 에서 제공됨 glut32.lib 를 내려 받고 해당 경로에 복사

• C:\Program Files\Microsoft Visual Studio\VC98\lib DLL 파일

opengl32.dll, glu32.dll 파일을 시스템에서 기본 제공 glut32.dll 파일을 내려 받아 C:\windows\system32

디렉토리에 복사 헤더 파일

gl.h, glu.h glut.h 를 내려 받고 해당 경로에 복사

• C:\Program Files\Microsoft Visual Studio\VC98\include\GL

컴파일 방법컴파일 방법

책의 예제 프로그램 소스 파일을 더블클릭 Build 메뉴에서 Rebuild All 을 선택 *.dsw, *.dsp 등 프로젝트 파일을 자동으로 생성 예상되는 에러들

헤더 파일 또는 라이브러리 찾기 오류• 경로 지정 : Tools 메뉴의 Directories 탭에서 Include Files

항목과 Library Files 항목 확인

링크 에러링크 에러

링크시에 함수가 정의되어 있지 않다는 에러 Project 메뉴의 Settings 부메뉴의 Link 탭 선택 opengl32.lib, glu32.lib, glut32.lib 가 포함되도록

예제 예제 (simple_use_defaults.c)(simple_use_defaults.c)

#include <GL/glut.h>void display(void){

glClear(GL_COLOR_BUFFER_BIT); /* clear window */

/* draw unit square polygon */glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5);

glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5);glEnd();

glFlush();}

int main(int argc, char** argv){ glutCreateWindow("simple"); glutDisplayFunc(display); glutMainLoop();}

예제 예제 (simple.c)(simple.c)

#include <GL/glut.h>void display(void){

glClear(GL_COLOR_BUFFER_BIT); /* clear window */

/* draw unit square polygon */glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5);

glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5);glEnd();

glFlush();}

void init(){ /* set clear color to black */ glClearColor (0.0, 0.0, 0.0, 0.0); /* set fill color to white */ glColor3f(1.0, 1.0, 1.0);

/* set up standard orthogonal view with clipping */ /* box as cube of side 2 centered at origin */ /* This is default view and these statement could be removed */ glMatrixMode (GL_PROJECTION); glLoadIdentity (); glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0); }

int main(int argc, char** argv){ /* Initialize mode and open a window in upper left corner of screen */ /* Window title is name of program (arg[0]) */ glutInit(&argc,argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(500,500); glutInitWindowPosition(0,0); glutCreateWindow("simple"); glutDisplayFunc(display); init(); glutMainLoop();}

예제 예제 (simple.c) (con’t)(simple.c) (con’t)

/* Recursive subdivision of triangle to form Sierpinski gasket */#include <GL/glut.h>typedef float point2[2];

/* initial triangle */point2 v[]={{-1.0, -0.58}, {1.0, -0.58}, {0.0, 1.15}};int n;

void triangle( point2 a, point2 b, point2 c) /* display one triangle */{

glBegin(GL_TRIANGLES); glVertex2fv(a); glVertex2fv(b); glVertex2fv(c);

glEnd();}

다각형과 순환다각형과 순환

void divide_triangle(point2 a, point2 b, point2 c, int m)

{ /* triangle subdivision using vertex numbers */

point2 v0, v1, v2;

int j;

if(m>0)

for(j=0; j<2; j++) v0[j]=(a[j]+b[j])/2;

for(j=0; j<2; j++) v1[j]=(a[j]+c[j])/2;

for(j=0; j<2; j++) v2[j]=(b[j]+c[j])/2;

divide_triangle(a, v0, v1, m-1);

divide_triangle(c, v1, v2, m-1);

divide_triangle(b, v2, v0, m-1);

else(triangle(a,b,c)); /* draw triangle at end of recursion */

다각형과 순환 다각형과 순환 (con’t)(con’t)

void display(void) {

glClear(GL_COLOR_BUFFER_BIT);

divide_triangle(v[0], v[1], v[2], n);

glFlush();

void main(int argc, char **argv) {

n=atoi(argv[1]);

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB );

glutInitWindowSize(500, 500);

glutCreateWindow("3D Gasket");

glutDisplayFunc(display);

myinit();

glutMainLoop();

다각형과 순환 다각형과 순환 (con’t)(con’t)

그래픽스 프로그래밍

Documents

고급 컴퓨터 그래픽스

헬로! 파이썬 프로그래밍(개정증보판) : 쉽고 재미있게 프로그래밍 배우기

윈도우 프로그래밍 II ( Visual C++ MFC 프로그래밍 )

프로그래밍 언어의 기본 개념과 주요 프로그래밍 언어

10분만에 이해하는 프로그래밍

프로그래밍 언어와 역사

컴퓨터 프로그래밍 2 Week 1 : 프로그래밍 개발과정

bash 쉘 프로그래밍

그래픽스 및 웹 응용설계

병렬 프로그래밍 패러다임

DB 구축과 프로그래밍

자바 5.0 프로그래밍

2016학년도 2학기 컴퓨터 프로그래밍 실습class.gnu.ac.kr/~ejsja/comp2015/01.pdf · 프로그래밍 언어와 컴파일러 프로그래밍 언어 인간과 컴퓨터가

11 장 컴퓨터 그래픽스 및 멀티미디어

게임 프로그래밍 I

3 장 컴퓨터 그래픽스

AWT 프로그래밍

시스템 프로그래밍 실습

64bit 프로그래밍

JDBC 프로그래밍