Grafika komputer 2

25
GRAFIKA KOMPUTER OpenGL Math

Transcript of Grafika komputer 2

Page 1: Grafika komputer 2

GRAFIKA KOMPUTER

OpenGL Math

Page 2: Grafika komputer 2
Page 3: Grafika komputer 2

Cartesian Coordinate in Real World

• Setiap titik ditentukanlokasinya melalui pasangannilai x dan y

• Nilai koordinat x bertambahpositif dari kiri ke kanan dan nilai y bertambah positif daribawah ke atas

(0,0)Su

mbu

ySumbu x

(3,5)

Page 4: Grafika komputer 2

OpenGL Right Handed Coordinates

Page 5: Grafika komputer 2

koordinat cartesian digambarulang ke layar komputer makasecara visual lokasi titik tersebutakan berubah

Cartesian Coordinate on Your Screen

(0,0)

Sum

bu

y

Sumbu x

(3,5)

Page 6: Grafika komputer 2

We use 4 sets of OpenGL Libraries

•Core OpenGL (GL)

•OpenGL Utility Library (GLU)

•OpenGL Utility Library Toolkit (GLUT)

•OpenGL Extension Wrangler Library (GLEW)

Page 7: Grafika komputer 2

Core OpenGL

consists of hundreds of commands, which begin with a prefix "gl"(e.g., glColor, glVertex, glTranslate, glRotate). The Core OpenGLmodels an object via a set of geometric primitives such as point, lineand polygon.

Page 8: Grafika komputer 2

GLU

built on‐top of the core OpenGL to provide important utilities (such as setting camera view and projection) and more building models (such as qradric surfaces and polygon tessellation). GLU commands start with a prefix "glu" (e.g., gluLookAt, gluPerspective).

Page 9: Grafika komputer 2

GLUT

GLUT is designed for constructing small to medium sized OpenGL programs. While GLUT is well‐suited to learning OpenGL and developing simple OpenGL applications, GLUT is not a full‐featured toolkit so large applications requiring sophisticated user interfaces are better off using native window system toolkits. GLUT is simple, easy, and small.

Page 10: Grafika komputer 2

OpenGL is designed to be independent of the windowing system or operating system. GLUT is needed to interact with the Operating

System (such as creating a window, handling key and mouse inputs); it also provides more building models (such as sphere and torus).

GLUT commands start with a prefix of "glut" (e.g., glutCreatewindow, glutMouseFunc). GLUT is platform independent, which is built on top of platform‐specific OpenGL extension such as GLX for X Window System, WGL for Microsoft Window, and AGL, CGL or Cocoa for

Mac OS.

Page 11: Grafika komputer 2

GLEW

GLEW is a cross‐platform open‐source C/C++ extension loading library. GLEW provides efficient run‐time mechanisms for determining which OpenGL extensions are supported on the target platform.

Page 12: Grafika komputer 2

Parameter

Specifies the primitive or primitives that will be created from vertices presented between glBegin and the subsequent glEnd. Ten symbolic constants are accepted:

GL_POINTS, GL_LINES, GL_LINE_STRIP, GL_LINE_LOOP, GL_TRIANGLES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN,

GL_QUADS, GL_QUAD_STRIP, GL_POLYGON

Page 13: Grafika komputer 2

Example

glBegin(GL_POLYGON);

……..

glEnd();

Page 14: Grafika komputer 2

Clearing

glClear(GL_COLOR_BUFFER_BIT);

glBegin(GL_POLYGON);

……..

glEnd();

glFlush();

Pixels are stored in bitplanes, so clear it once you were done

Page 15: Grafika komputer 2

What’s that for?

GL_COLOR_BUFFER_BIT

Performs the clear operation on one or more buffers at the same time

glFlush()

Forces execution before the gathering is complete

Page 16: Grafika komputer 2

Colors in OpenGL

OpenGL use a RGB Color Model

RGB stands for the colors red, green and blue: the additive primary colors. Each of these colors is given a value, in OpenGL usually a

value between 0 and 1. 1 means as much of that color as possible, and 0 means none of that color. We can mix these three colors

together to give us a complete range of colors, as shown to on the left.

https://www.khronos.org/registry/OpenGL-Refpages/gl2.1/xhtml/glColor.xml

Page 17: Grafika komputer 2

Example

glColor3f(0.5f, 0.0f, 1.0f); // (0.5, 0, 1) is

half red and full blue, giving dark purple.

Page 18: Grafika komputer 2

void display() {

glClear(GL_COLOR_BUFFER_BIT);

glBegin(GL_QUADS);

glColor3f(0.5f, 0.0f, 1.0f); // purple

glVertex2f(-0.75, 0.75);

glColor3f(1.0f, 0.0f, 0.0f); // red

glVertex2f(-0.75, -0.75);

glColor3f(0.0f, 1.0f, 0.0f); // green

glVertex2f(0.75, -0.75);

glColor3f(1.0f, 1.0f, 0.0f); // yellow

glVertex2f(0.75, 0.75);

glEnd();

glFlush();

}

Page 19: Grafika komputer 2

Mixed Color in RGB

• glColor3f (0.0, 0.0, 0.0) Black

• glColor3f (1.0, 0.0, 0.0) Red

• glColor3f (1.0, 1.0, 0.0) Yellow

• glColor3f (0.0, 1.0, 0.0) Green

• glColor3f (0.0, 1.0, 1.0) Cyan

• glColor3f (0.0, 0.0, 1.0) Blue

• glColor3f (1.0, 0.0, 1.0) Magenta

• glColor3f (1.0, 1.0, 1.0) White

• glColor3f (0.5, 0.5, 0.5) Gray

http://prideout.net/archive/colors.php

Page 20: Grafika komputer 2

Linear Mapping Color

Color hack mapping: x/R

R = 255 Colors

x = Color’s Mapping Number

Page 21: Grafika komputer 2

Drawing Primitives

glVertex*() : Specifies vertex coordinates

Example:

glVertex2f(): Specifies vertex coordinates on 2 axis (float)

glVertex3f(): Specifies vertex coordinates on 3 axis (float)

https://www.khronos.org/registry/OpenGL-Refpages/gl2.1/xhtml/glVertex.xml

Page 22: Grafika komputer 2

void displayMe(void) {

glClear(GL_COLOR_BUFFER_BIT);

glBegin(GL_POLYGON);

glVertex2f(0.0, 0.0);

glVertex2f(0.5, 0.0);

glVertex2f(0.5, 0.5);

glVertex2f(0.0, 0.5); glEnd();

glFlush();

}

Page 23: Grafika komputer 2

Tugas Kelompok

Kelompok 1 : API GrafisKelompok 2 : Kordinat Kartesian 2 Axis

Kelompok 3 : Perangkat Input Grafis

Kelompok 4 : Perangkat Output Grafis

Kelompok 5 : Kordinat Kartesian 3 Axis

Kelompok 6 : GLUT

Kelompok 7 : RGB Color

Kelompok 8 : Bangun Datar Primitif

Page 24: Grafika komputer 2

The Rules are

• Presentasi dalam Bahasa inggris

• Desain presentasi menarik dan mudah dibaca

• Presentasi dikumpul paling lambat tanggal 28 Maret 2017 pukul 23:00 di [email protected], dan dipresentasikan pada tanggal 30 maret

• Telat kumpul dianggap gugur atau tidak mendapat nilai

• Plagiat dianggap gugur

• Rekomendasi sumber harus kredibel, seperti dokumentasi software, jurnal, pendapat ahli, dan wiki (blog bisa diambil dan isinya harus bisadipertanggungjawabkan oleh presenter apabila hasilnya tidak sesuai)

Page 25: Grafika komputer 2

KasihTerima