CPT205 W1

This is the note of CPT205(Computer Graphics).
包括了Lecture还有Lab的内容，是在预习笔记上增加了一些内容。

---

The lecture of this week is mainly discussing about Introduction: hardware and software.

---

Lecture

What is Computer graphics?

‘Computer Graphics’ is concerned with all aspects of producing pictures or images using a computer. There are three closely related meanings, each representing a different perspective on the same thing.

• the images that you see on the computer screen
• the computer code that is used to create the images
• a mathematical model of the real-world (which is sometimes called the virtual world)

When working at the most advanced levels of Computer Graphics, the computer graphics specialist will

• create a virtual world
• implement the virtual world in computer code
• run the code to see life-like images on the computer screen

---

How do the individual subjects relate?

Two subjects are at the heart of computer graphics:

• 2D Computer Graphics
• 3D Computer Graphics

---

What are the application areas?

• Display of information
• Design
• Simulation and animation
• User interfaces

---

Hardware and Software

• Graphics Hardware
  • Input, Processing and Output Devices
  • Framebuffers
  • Pixels and Screen Resolution
• Graphics Software
  • Techniques (Algorithms, Procedures)
  • Programming Library / API (OpenGL, JOGL and so on)
  • Not our focus: High level Interactive Systems (Maya, Studio Max, Unity, AutoCAD and so on)

---

Graphics devices

1. Input Devices
2. Processing Devices
3. Output Devices

In this order!

---

Framebuffer

What is framebuffer?

A block of memory, dedicated to graphics output, that holds the contents of what will be displayed.

What is pixel?

An element of the framebuffer.

---

Framebuffer in memory

If we want a framebuffer of 640 pixels by 480 pixles.
How many bits should we allocate?
framebuffer = 640*480 bits
Q: What do more bits get you?
A: More values to be stored at each pixel.

---

bit depth

Number of bits allocated per pixel in a buffer.

---

How much memory we allocate to store the color at each pixel?
Common Aswer: 32bits RGBA

32 bits perpixel (true colour)

• 8 bits for red, green, blue and alpha
• potential for 256 reds, greens and blues
• total colours: 16,777,216 (more than the eye can distinguish)

---

Data type refresher

7 types of data type refresher:

• bit - a 0 or 1. Can represent 2 unique values.
• byte - 8 bits or 256 values.
• word - 32 bits or 4,294,967,296 values.
• int - 32 bits.
• float - 32 bits.
• double - 64 bits.
• unsigned byte - 8 bits.

---

How much memory is on our graphic card?

三种，分别是: 640 * 480, 1024 * 768, 1600 * 1200

• 640 * 480 * 32 bits = 1,228,800 bytes
• 1024 * 768 * 32 bits = 3,145,728 bytes
• 1600 * 1200 * 32 bits = 7,680,000 bytes

---

Framebuffer -> monitor

The values in the framebuffer are converted from a digital (1s and 0s representation, the bits) to an analog signal that goes out to the monitor. This is done automatically (not controlled by your code), and the conversion can be done while writing to the framebuffer. 帧缓冲区中的值被从数字转换为输出到监视器的模拟信号。这是自动完成的，转换可以在写入framebuffer时完成。

---

Image quility issues

• Screen resolution
• Colour
• Refresh rate
• Brightness
• Contrast
• Sensitivity of display to viewing angle

---

Pixels

Pixel: The most basic addressable image element in a screen

• CRT: Colour triad (RGB phosphor dots)
• LCD: Single colour element

Screen resolution: measure of number of pixels on a screen. (m by n)

• m: Horizontal screen resolution
• n: Vertical screen resolution

---

Video formats

• NTSC: 525x480,30f/s, interlaced
• PAL: 625x480,25f/s, interlaced
• VGA: 640x480,60f/s, non-interlaced
• SVGA: 800x600,60f/s, non-interlaced
• RGB: 3 independent video signals and synchronisation signal, vary in resolution and refresh rate. 3个独立的视频信号和同步信号，不同的分辨率和刷新率。

---

Raster display 光栅/显像

• Cathode Ray Tubes 阴极射线管 (CRTs), most “tube” monitors you might see. Used to be very common, but big and bulky.
• Liquid Crystal Displays 液晶显示器 (LCDs), there are two types transmissive (laptops, those snazzy new flat panel monitors) and reflective (wrist watches).

---

Cathode ray tubes (CRTs)

Strong electrical fields and high voltage. 强电场和高电压 Very good resolution. 非常好的分辨率 Heavy, not flat. 重，不平

---

Liquid crystal displays (LCDs)

Flat 平 Light weight 轻重量 Low power consumption 低能耗

---

Graphics software

How to talk to the hardware?
Algorithms, Procedures, Toolkits & Packages
(Low Level –> High Level)

---

Programming API

which helps to program in labs

• OpenGL (our focus)
• JOGL (Open GL for Java)
• etc.

Special purpose software

not so important in our module

• Excel, Mathlab…
• AutoCAD, Studio Max…

---

Lab

Understand how to create 2D and 3D graphic images using C++ and OpenGL graphics library.
我用的是MacOS，所以戏比较多。

---

安装虚拟机

选择的是Parallels，目前使用的是试用版。下载之后点击安装win10，再安装visual studio。

配置第一个OpenGL

1. 解压freeglut至文件夹
2. Visual Studio打开创建空白文件 (C++)
3. 修改配置 (细节见Lab文件)
4. 点击运行

#define FREEGLUT_STATIC   // Define a static library for calling functions
#include <GL/freeglut.h>  // Include the header file

void renderScene(void) // Function for geometric creation
{
    // Clear the buffer to the predefined color and depth value
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    //Move origin of current user coordinate system to the screen center: similar to a reset operation
    glLoadIdentity();
    glBegin(GL_TRIANGLES);        // Start draw TRIANGLE function
    glVertex3f(-0.5, -0.5, 0.0);  // Set coordinates of first vertex
    glVertex3f(0.5, 0.0, 0.0);    // Set coordinates of second vertex
    glVertex3f(0.0, 0.5, 0.0);    // Set coordinates of last vertex
    glEnd();                      // End draw TRIANGLE function
    glutSwapBuffers();            // Refresh the screen to display the graphics
}

int main(int argc, char* argv[])   // Standard main function
{
    glutInit(&argc, (char**)argv);     // Initialization
    // Define display mode: depth buffer, double buffer and RGBA color
    glutInitDisplayMode(GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGBA);
    glutInitWindowPosition(100, 100);  // Define the location of the window
    glutInitWindowSize(320, 320);      // Define the size of the window
    glutCreateWindow("Hello OpenGL");  // Create a window called “Hello OpenGL”
    glutDisplayFunc(renderScene);      // Set the first function
    glutMainLoop();                    // Enter the GLUT event processing loop
    return 0;                          // Return an integer value
}

---

Reference

1. XJTLU MC PowerPoint slides (CPT205 Lecture1 & Lab1)