National Taiwan Normal University

Simple OpenGL Program (point & line)

Chen Jing-Fung (2006/11/13) Assistant Research Fellow,

Digital Media Center, National Taiwan Normal University

2

Displayers

• CRT & Flat-panel Display

http://www.plasmadepot.com/plasmatv/plasmatv101.html

3

CRT (Cathode ray tube)

• Cutaway rendering of a color CRT

http://en.wikipedia.org/wiki/Cathode_ray_tube

Electron guns

Electron beams

Focusing coils

Deflection coils

Anode connection Display Mask

Phospfor layer

Close-up of the Phospfor layer

4

TFT LCD (Thin Film Transistor Liquid Crystal Display)

• TFT LCD has a sandwich-like structure with liquid crystal filled between two glass plates.

http://www.plasma.com/classroom/what_is_tft_lcd.htm

5

PDP (Plasma Display Panel)

• A plasma TV is sometimes called an "emissive" display — the panel is actually self-lighting.

• The display consists of two transparent glass panels with a thin layer of pixels sandwiched in between.

http://www.plasmadepot.com/plasmatv/howplasmaworks.html

6

What is different?

• CRT – Electrostatic deflection of the electron

beam • LCD

– Back light module • PDP

– Tiny colored fluorescent lights

7

DIY your projector

http://www.audiovisualizers.com/madlab/lcd_proj.htm

http://en.wikipedia.org

Cutaway rendering of the projector Fresnel Lens

Conventional Lens

5.5’’ LCD + VCD player = $169 USD

USD$200

8

Basic video-controller refresh operations

Raster-Scan Generator

y Register x Register

Memory Address Pixel Register

Frame Buffer

Intensity

Horizontal and Vertical Deflection Voltage

9

Frame Buffer

• Cartesian reference frame with origin at the lower-left corner of a video monitor

x

y

10

Coordinate representations

1 1

1

Plotter

Other Output

Device Coordinates

Video Monitor Modeling (local or master)

Coordinates World

(Cartesian) Coordinates

Normalized Coordinates

Viewing & Projection Coordinates

11

• Coordinates: – Modeling (m), World (w), Viewing (v),

Projection (p), Normalized (n), Device (d)

• (xmc, ymc, zmc) -> (xwc, ywc, zwc) -> (xvc, yvc, zvc)

-> (xpc, ypc, zpc) -> (xnc, ync, znc) -> (xdc, ydc)

12

Graphs system

• User program, Graphics system, I/O devices

Function calls Output

I/O devices Graphics

system

Data Input

User

program

13

Application Programming Interface (API) Functions

• Divide API functions into seven groups: – Primitive functions – Attribute functions – Transformation functions – Viewing functions – Input functions – Control functions

14

Primitive & Attribute

• Primitive functions - graphics output primitives – Character strings & geometric entities

• Points, lines, areas and shapes (2D, 3D)

• Attribute functions - Properties of the output primitives – Describe how a particular primitive is to be

displayed • Color specifications, line styles, text styles and area-

filling patterns …

15

Viewing

• Select a view of the scene -> type of projection -> location on monitor

• Other routines: – Managing the scene display area

• Specifying its position, size and structure

• Identified visible objects and applied lighting conditions (3D)

16

Software standards - GL

• Graphics Library (GL) a widely used package in the graphics community – Goal: fast, real-time rendering and package was being

extended to other hardware systems. – International Standard Organization (ISO)

• Graphical kernel system (GKS) 1984 – 2D & 3D

• Programmer’s Hierarchical Interactive Graphics Standard (PHICS)

– Increase: object modeling, color specification, surface rendering…

– PHICS+ (3D)

17

Software standards - OpenGL

• OpenGL : a hardware-independent version of GL in the early 1990s.

• The graphics package is maintained and updated by OpenGL Architecture Review Board.

• Language binding – C and C++

18

Other Graphics Packages

• Graphics libraries – Java 2D (Java applets)

– Java 3D

– Mathematica

– Matlab

– Maple…

19

Introduction to OpenGL

• Overview OpenGL based on VC++ – http://dev.yesky.com/424/2080424.shtml

• Basic OpenGL Syntax – Function names in OpenGL basic Library

• Ex: glBegin, glClear, glCopyPixels…

– Arguments in Function (interval: _ ) • Ex: GL_2D, GL_RGB, GL_POLYGON…

– Specific data types • Ex: GLbyte, GLshort, Glint…

20

OpenGL – Related Libraries

• GL: basic core library (prefix: gl)

• OpenGL Utility (GLU): (prefix: glu) – Setting up viewing and projection matrices

– describing complex objects with line and polygon

– Displaying quadrics and B-splines

– Processing the surface-rendering operations

– Other complex tasks

21

OpenGL- Display window

• OpenGL Extension: – X Window System (GLX) - Prefix: plX

– Apple GL (AGL) - Prefix: agl

– Microsoft Windows system (WGL) - Prefix: wgl

– IBM OS/2 (Presentation Manager to OpenGL: PGL) - Prefix: pgl

22

OpenGL Utility Toolkit (GLUT)

– Provide a library of functions for interacting with any screen-windowing system. • Prefix: glut

• Contain: describing and rendering quadric curves and surfaces

• Download: (glut-3.7.6-bin.zip ~117 KB) http://www.xmission.com/~nate/glut.html

23

How to Use GLUT?

• Put 3 files from ``glut-3.7.6-bin.zip’’ in your project directory. – README-win32.txt

• glut32.dll to %WinDir%\System

• glut32.lib to $(MSDevDir)\..\..\VC98\lib

• glut.h to $(MSDevDir)\..\..\VC98\include\GL

24

Setup for a OpenGL Program 1/5

• Microsoft Visual C++ 6.0 – Step 1: create a Win32 Console Application project

25

Setup for a OpenGL Program 2/5

– Step 2:Press Alt-F7 project -> settings...->Link

– Step 3:add opengl32.lib glu32.lib glut32.lib into Object/library modules

26

Setup for a OpenGL Program 3/5

• Microsoft Visual C++ .Net – Step 1:create Win32 console project

27

Setup for a OpenGL Program 4/5

– Step 2: select ―empty project‖

28

Setup for a OpenGL Program 5/5

– Step 3:select project->property…->linker -> input

– Step 4: add opengl32.lib glu32.lib glut32.lib

29

Header Files 2/1

• Include the header file the OpenGL core library – #include <windows.h>

• With Microsoft Windows

– #include <GL/gl.h> • Basic core library

– #include <GL/glu.h> • Object-oriented toolkit & 3D application

30

Header Files 2/2

• Use GLUT to handle the window-managing operations. – #include <GL/glut.h>

• gl.h, glu.h (redundant and could affect program portability)

• Need to include c++ code – #include <stdio.h> #include <stdlib.h> #include

<math.h>…

• ISO/ANSI standard for c++ – Include: cstdio, cstdlib and cmath

31

Display-Window Management Using GLUT

2/1 • Initialization function

– glutInit(&argc, argv);

• Create display window (DW) and caption – glutCreateWindow(―An Example OpenGL Program‖);

• Assign our picture to DW – Ex: describing a line segment – glutDisplayFunc(lineSegment);

• But DW is not yet. More GLUT function -> complete the window-processing operations – glutMainLoop( ); <- the last line (check all input devices –

mouse or keyboard)

32

Display-Window Management Using GLUT

2/2

• Top-left corner of the video display (50,100) – glutInitWindowPosition(50, 100);

• Display window of OpenGL: width=400 pixels and height= 300pixels – glutInitWindowSize(400, 300); 100

50

300 400

Display window

• A single refresh buffer & RGB mode – glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)

33

A complete OpenGL Program 2/1

• Set background color: white – glClearColor(1.0, 1.0, 1.0, 0.0); <- alpha value is

as a ``blending’’ parameter.

• Get the assigned window color displayed – glClear(GL_COLOR_BUFFER_BIT);

• Set object color – glColor3f(1.0, 0.0, 0.0);

34

A complete OpenGL Program 2/2

• OpenGL processes our picture (2D line) through the full 3D viewing operations – “project’’ – glMatrixMode(GL_PROJECTION);

• Map rectangle – glOrtho2D(0.0, 200.0, 0.0, 150.0);

• Cartesian endpoint coordinate – glBegin(GL_LINES);

glVertex2i(180, 15); glVertex2i(10, 145); glEnd();

35

36

Display function

User define

37

Point Specification

• OpenGL functions – glVertex*();<-The coordinate values

– EX:

• C++ class or structure – Ex:

x

y glBegin (GL_POINTS);

glVertex2iv (p1); //i: integer glVertex2iv (p2); glVertex2iv (p3);

glEnd ();

p1

p2

p3 Class wcPt2D { Public: GLfloat x, y;

};

wcPt2D pointPos;

pointPos.x = 120.75; pointPos.y = 45.30;

glBegin (GL_POINTS); glVertex2f (pointPos.x, pointPos.y); glEnd ();

38

OpenGL Line functions

glBegin (*); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p3); glVertex2iv (p4); glVertex2iv (p5);

glEnd ();

p1

p2

p3

p4

p1

p2

p3

p4

p5 p1

p2

p3

p4

p5

Primitive line generated with GL_LINES

polyline generated with GL_LINE_STRIP

Closed polyline generated with GL_LINE_LOOP

39

Line-drawing algorithms 2/1

• A straight-line segment in a scene is defined by the coordinate positions for the endpoints of the segment.

• Line is compose of the nearest pixel positions along the line path between the two endpoints.

• Ex: point (10.48, 20.51)->(10,21)

40

• The Cartesian slope-intercept equation for a straight line – y=m*x+b – slope m=(yend-y0)/(xend-x0) – Intercept b=y0-m*x0

• Digital differential analyzer Dx = 1, yk+1 = yk + m Dy = 1, xk+1 = xk + 1/m

• Steps? ?? Dx = -1 ? or Dy = -1 ?

x0 xend

y0

yend

Dy Dx

Line-drawing algorithms 2/2

xk xend

yk

yend

Dy

Dx

National Taiwan Normal University

How to a parameter drawing line?

42

Bresenham’s line algorithm 3/1

• Bresenham’s line is an accurate and efficient raster line-generating algorithm

• Use only incremental integer calculations.

• Determine at next sample point whether to plot. – The negative-slope line:

if start point (50, 50), next point? • (51, 50) or (51, 49)

43

Analysis Bresenham’s line algorithm

• The scan-conversion process: – Set the positive slope < 1.0 and start point (x0, y0)

– Let the kth step in this process, therefore, the displayed pixel (xk, yk) • Next pixel (xk+1, yk) or (xk+1, yk+1)

– The sampling position xk+1, depend on (dlow- dup) • The label vertical pixel separations from dlow and dup

• Pk=Dx(dlow-dup) is the same as the sign of (dlow- dup) – If yk ~ line, (dlow< dup), then pk< 0

– Next pk+1 ?

– First parameter p0 ?

xk+1

yk

yk+1 m 1-m

44

Bresenham’s line algorithm 3/3(m<1.0)

• Step 1: Input left endpoint (x0, y0) • Step 2: Set the color for frame-buffer position (x0, y0) • Step 3: Calculate Dx, Dy, 2Dy and 2Dy-2Dx

– If yk+1>yk, p0=2Dy-Dx, else yk+1<yk, p0=2Dy+Dx

• Step 4: The decision parameter pk+1 – If pk<0 & next point is (xk+1, yk)

• pk+1= pk+2Dy

– Else next point is (xk+1, yk+1) • pk+1= pk+2Dy-2Dx

• Step 5: return step 4 Dx-1 times

xk

yk

yk+1

yk+2

yk+3

xk+1 xk+2 xk+3

y

xk+1

yk

yk+1

y = mx + b

m 1-m

45

Bresenham’s line example

• Start point: (20, 10)

• End point: (30, 18)

46

Homework

• HW 1: Draw line from (30, 150) to (200, 10) – Hint : line-drawing algorithm

– If you use one decision parameter to do, you will get the reward.

• HW 2: Plot the regular polygon (3, 4, 5, cycle)

47

Two important points of Homework

• Explain (30%)

• Program (70%)

48

References

• .Net Education website: – http://yes.nctu.edu.tw/DotNet/index.ht

m

• Mathworld – http://mathworld.wolfram.com/