Graphics Card

Graphics System (1) Graphics System (2) Graphics Card

• Hardware • Software – Applications (developed by • GPUs + memory + bus + Mother board & bus • Components: Mother board & bus
– Motherboard: us and others) interfaces
– OS – GPU:
• CPU, memory, bus, on-board GPU, • Rendering programs • Connected with mother board
– Window system • Rendering,
– Hard disk, network • Visualization tools via a graphics bus:
• Window manager – PCI • General computation
– Graphics card • HCI and GUI kits
• Display server – AGP • Geometrical computing
• GPU • Games
• Client programs – PCI Express • Image processing,
• Memory • Simulators
• Bus – Graphics Libraries • Geometric design tools • Usage of graphics cards – Memory, registers,
• OpenGL, glu, glut, gl es – Rendering acceleration • Keeping data & images,
– Display devices • Word processing
– Image processing • Displaying & buffering
• Printers, screens, projectors, goggles, … • Shading languages and software
– Geometrical computing • Keeping programs
– Input devices drivers (glsl) • … – Massive parallel computing
• Programming libraries – Internal bus & external
• Keyboards, mouse, trackball, sketch boards, touch screens, joy sticks,..
(CUDA, OpenCL, …) • Contents – General purpose computing
• Hands, fingers, and body gestures, – bus
• GUI API (Qt, glui, …) • Models, images, videos Artificial computing (deep
• Sounds and voices learning) … • Data transfer/ interfacing
• Database
CG Architectures 3 CG Architectures 4 CG Architectures 5 CG Architectures 6

Graphics Card Connection Bus PCI Express (PCIe) General Architecture of GPU
• Released in 2002 • Multiple processors
• The graphics card is PICe x
16 bus
CPU • PCI bus is the oldest – Compatible with old PCI bus – Stream Processor , Parallel computing
connected to north one. • Multiple ALUs (cores) in each
Main processor
bridge via a bus. monitor
Graphics
North
memory • AGP is faster. • Lower power consumption – Parallel computing, multiple threads
bridge
card • Serial ports (multiple ports) – Processor clusters
–單晶片系統不採用南 • PCI express is the – Dual direction • Hierarchical memory structure
橋、北橋架構，for –
examples, AMD，Intel
fastest bus. Main memory in the mother board
PCI bus • Newest version: PCIe x 16 – Shared memory in the graphic card

• The bus can be PCI, South

• Transfer speed (clock version 6.x – Local memory for each core/cluster
– speed: 16GB/32GB/126GB for – Registers for ALUs
AGP, or PCI express.
bridge rate) GPU – Memory management
• Bandwidth (bits, wires) – Shared with other peripheral
devices

CG Architectures 7 CG Architectures 8 CG Architectures 9 CG Architectures 10

Other GPU Functionalities Famous GPU Manufacturers Some New Applications Graphics Memory
• A GPU may contain multiple • Nvidia • Artificial intelligence • New features • AKA video memory
ALUs for shading purpose. • ARM – Pattern recognition – Thousands of thread – Several Giga-byte DDR (Dual Data Rate) memory
• It can process multiple • Intel – Deep learning processors (grouped in • For keeping information
vertices in parallel. • AMD (ATI) – Video stream processing clusters)
– Geometrical data: vertex, normal, connectivity, …
• It can render several pixels at • Characteristics of GPU – Multiple ports
• Super-computing – May lacking of display (for
– Textures (very important)
the same time. – Graphics computing – Images
• It can do other general – Lower power consumption • Self-driving cars super-computing)
– Higher computing power – Shading programs (written by programmers)
purpose computing. – Limited functionalities • Cloud computing – Other temporary data: scalars, vectors, matrices,…
– CUDA & OpenCL, for – Lower precision (numerically) • General-purpose – System on chip architecture
examples – Massively parallel – AI computing • On-board or in the graphic card
computing on graphics • Large register file (several megabytes), fast accessing speed.
• Floating and integer arithmetic – System on Chip (SoC) – Innovative
–
processing units
operations are supported More applications, smart-
(GPGPU), … programming/computing • Hierarchical architecture/ controlled by memory controllers
phones, game kits, AR, VR environments
head-mount display, …

CG Architectures 11 CG Architectures 12 CG Architectures 13 CG Architectures 14

Graphical User Interface (GUI)

Graphics Libraries Shading Languages OpenGL ES
Libraries
• Purposes and definition: • We can use OpenGL to render objects.
• For designing GUI of CG application programs – Executed in CPU • For smartphone programming
– Sets of subroutines for designing graphics • Examples • We can replace OpenGL shading routines with our shading
application programs. programs – User interface
– glut – Written by using shading languages
– Rendering and display
– Executed in GPU.
• Famous graphics libraries – glui – Vertex shaders
– – Image processing
– OpenGL, Web GL, GL es, Mini GL, Mesa, … – ImGui –
Pixel shaders (fragment shaders)
Geometrical shaders
– – – More primitive than OpenGL
– DirerctX GTK
–
Tessellation shader
Computational shaders
– X window libraries, Xt, Xm, … – Qt • Shading languages: – But, more flexible (you can design your
– Vtk (for visualization) – X-window and MS window libraries – GLSL rendering methods, ..etc.)
– Cg
– … – … – …, etc. – Limited instruction set
CG Architectures 15 CG Architectures 16 CG Architectures 17 CG Architectures 18

Parallel Programming Language for

Web GL General Purpose GPU Massive Parallel Computation GPU
• Java script API • A GPU contains multiple ALU.
• logo • A computer system may contain more than • GPUs are used for parallel processing in
• 3D & 2D graphics rendering
• Integrated with web • It can be used to perform one GPU. shared memory models.
browsers – Scalar floating point calculation
– Mixed with HTML elements • A GPU contains many ALU. • Currently, several parallel programming
• Accelerated by GPU – Basic vector operations
• Developed from OpenGL ES – Basic matrix operations • Graphics memory are getting larger. languages are available:
& conventional OpenGL
• People use GPU to solve non-graphical • A massive parallel computing environment – CUDA
• Easy to use for smart phone
applications problems. is emerging. – OpenCL
• Limited functionalities
– Massive parallel computing
– Shared memory models
CG Architectures 19 CG Architectures 20 CG Architectures 21 CG Architectures 22

Graphic Programming Environment unctionalities of the Components (1/ ) Functionalities of the Components (2/2)
Deep Learning & GPU
• Programs of graphics : • Window manager (視窗管理)
Graphic software system
software system – To offer users an interactive user interface (environment)
• AI chip = GPU (advanced GPUs) Coordinators between OS and application programs – To create, move, iconfy & kill windows
– Operating System (OS) andler of graphical /O devices
Application Window Application – To create and manage window hierarchy
• Usage: and drivers/mid-ware
Program1 Manager Program2 Displaying buffer contents (swapping buffers), • Main window, sub-windows,…
– Display server Mouse/keyboard/joystick (optional) controlling – To manage window attributes
– Model training (learning) – Window manager • Background/ foreground colors
– Run-time pattern detection – Application programs Drawing primitives, ( ， 、 、 單 ) • Text color, fonts, size, …
– Graphics libraries • Size, position, title, shape, …
– Run-time classification • Rendering subroutines
Display Server : – To handle I/O devices of window systems
• Graphical User Interface Users programs with Graphical User nterface ( GU ) • Mouse/keyboard/… (optional)
– 作為加速器… libraries • Menu system
(GUI) design tools
libraries Producing visual effects – Pop-up menu, menu bar, sliders,
• Multiple GPUs in a single board – Tool kits mage processing/displaying, rendering, CAGD, CAD, • Famous window systems:
• … images
– Many ALU in a single GPU (Nvidia A10, A40, …) animation, games, – X-window, MS Windows, Apples’ Mac OS Window

CG Architectures 23 2023/10/30 GLUT 2 2023/10/30 GLUT 3

Application Program Styles

Graphics Application Programs Components in Applications Typical lowchart of Drawing the modes
We use graphical libraries and programming • An application program is composed of: To display a , we usually follow the following nteractive mode:
– GUI, (windows + menus + I/O devices)
languages to design software for processing, steps:
– rendering subroutines, ( producing results) nteracted with users via menus, keyboard, mouse, and
computing and information – animation procedures, (optional) natural interaction (N ) devices
Graphical libraries enable us to build GU , render – numerical & geometry computing subroutines, (for uipped with GU
computation)
objects, and display results – geometrical transformation subroutines (space
eal time rendering and display
transformation, motions,…) Off line ( atch) mode:
– data structures or data bases, (geometrical, optical, and endering images on background
other data) Storing resulted images in disk files (or buffers)
– network procedures (optional, remote input/display)
nitialization is re uired
– Artificial Intelligence (AI) modules
Complex scene and high uality rendering
2023/10/30 GLUT 4
 vent driven Programming vents Callback unctions The Arbiter
vents: to the window system(and the application are subroutines used to process events
programming paradigm program) (automatically invoked when events happen ) The contains an infinite loop
They come from: They may or may not have arguments t gets an event from the event ueue at each time
eyboard, mouse, joy sticks, touch panel, They are procedures //designed by us Then it sends the event (and data) to a suitable
Windows, menu buttons, Called by the arbiter
Application programs procedure the function, to perform
ach event triggers one callback function computations
vents are kept in the
f no callback function is assigned to an event, that event is
ach event needs some actions from the application ignored
program
An event tells us that something has happened
Needing actions to handle it

Graphical Programming Libraries OpenGL Libraries Usage of GLUT GU Design Using glut
Libraries forGU design: glut, glui, gtk, t, mGui Three libraries are included: General GU design method:
Main purpose is for design Create a (connection between the application
Libraries forrendering (drawing):OpenGL, glu, vtk, the original OpenGL library
Creating connection between application programs and the program and the window system)
extension of gl lib window system (window manager, display server) Define window attributes (title, position, foreground
We use to create user interface and to background color, fonts, )
render objects for GU design (major function) routines,
vent handling mechanism, /O device controlling, simple Define the display mode (color, depth, transparency )
ou are encouraged to learn shading languages, like glsl, volved from SG s GL library GU Create the window(s)
cg,
Please also learn some libraries for GU design, like Available in PC, Unix, Mac OSx and Linux Other functions: Geometric modelling, rendering, text display nitialize parameters and variables (viewing projection)
mGU , glui,
systems egister callback functions for events
Create a hierarchical pop up menu system
note this class is designed for learning fundamental computer graphics
knowledge All example codes are written by using OpenGL1
C like libraries nter the infinite loop (the arbiter)

Steps to Make a Simple GU with GLUT Steps (continued) Steps (continued) Steps (continued)
Step1: make a n with the window system Step define display mode Step 4 Create the window Step stablish a hierarchical menu system
(optional)
Possible display modes This procedure takes a string (window title) as input and Talk about this function later
GLUT G A, GLUT G return an integer as the window D
GLUT S NGL , GLUT DOU L
GLUT D PT , GLUT ALP A, GLUT ST NC L Step nter the infinite loop (of the arbiter)
GLUT ACCUM Step egister callback functions
Step : define geometrical parameters for the window Multiple modes can be combined by using bitwise O operator
The initial position //display event
//reshape event
The window size //keyboard event

vent andling Methods

what to do with events
eyboard vents Mouse vents Callback for Mouse vent
When a mouse button is pressed or released ormat:
We have to declare event The mouse is inside the window a key is pressed void mouse func(int , int , int , int )
handling routines ( callbacks) The key value position of the mouse are returned eturned values: //about the mouse
if(button GLUT L T UTTON state GLUT DOWN) exit(0)
utton D, state, position
The callback function
We have to associate (register) utton D GLUT L T UTTON, GLUT G T UTTON,
callbacks with events void keyboard(unsigned char key, int x, int y) void main( )
GLUT M DDL UTTON
if(key key ) exit(0) State GLUT DOWN, GLUT UP //registration
GLUT s macro
will do the egistration: Position (x, y) // D coordinates in the window
arbiter s job void main()

An example main procedure

Motion vents Window vents Display vent
One button is pressed and the mouse is dragged A window event occurs when This event happens, when
eturn consecutive positions of the mouse The window is created a window shows up,
The window is moved the window is (partially) covered and exposed
The window shape is changed again
The window is covered and then exposed the window is dragged

Major Window vent Types

Display
eshape

Display vent More about vents eshape vents eshape vent Callback
Occurs when: egister the callback:
egister a display event handling routine: The display callback function usually triggers a window pops up, glut eshape unc(my reshape)
/ register the display event callback / the redrawing of the scene the window s size (shape) is changed
What to do ormat of this callback:
視窗 ，
re set the projection matrix (what is
ormat of the callback function this )
re draw the scene (triggers display
Carefully design this procedure event es )

We will talk more about it in subse uent topics Associated information:

The new width and height of the
window

Summary Overview of Menu System Menu utton vents Menu System Creation
in glut
Two major U mechanisms GLUT only provides popup menus Create a menu system with A menu
The arbiter (loop), events, callback functions We did it some Declare a handle (integer)
ierarchical menu system (see this topic later) Single and multi level menus When a menu button is int c menu
A menu contains several buttons ( ) pressed Color Create the handle:
Common events handled by glut ach button represents a functionality eturning the associate value of
Size
eyboard events Users select menu buttons to trigger functionalities the menu button c menu glutCreateMenu(color func)
Mouse events uttons generate input signals (events) umping to the designated Add menu entries (buttons):
Motion event callback function
utton events are handled by callback functions ile
glutAddMenu ntry( white , W T )
Display event One callback for one menu
utton event callbacks ordinary callbacks andling all buttons of this menu glutAddMenu ntry( red , D)
eshape event One callback for one menu Menu callback
Useful for creating user glutAddMenu ntry( green , G N)
Can callbacks be shared by menus es interface glutAddMenu ntry( blue , LU )
See the following slides for building a hierarchical menu system
 One Level Menu (cont ) Callback of Menu utton Multi Level Menu Creation Multi level Menu Creation
Define an 1 level menu system (continued) Define the menu callback: one menu one callback
Create sub menus Create the top menu:
void color func(int value) top m glutCreateMenu(top menu func) / Create the top menu /
Associate the menu with a mouse key: switch(value) //handling individual menu buttons (entries) / create sub menus /
/ associate top menu with right but / case W T : color m glutCreateMenu(color func) nter submenus and entries (optional)
glutAttachMenu(GLUT G T UTTON) myColor 0 myColor 1 myColor 10 glutAddMenu ntry( white , W T )
break glutAddMenu ntry( red , D) glutAddSubMenu( colors , color m) / add color sub menu 1 /
case D: glutAddMenu ntry( green , G N) glutAddSubMenu( file , file m) / add file sub menu /
myColor 0 1 0 myColor 1 myColor 00
glutAddMenu ntry( blue , LU ) glutAddMenu ntry( exit , 1) //we can add entries into the top menu
break
: / Create another sub menu, file menu / glutAttachMenu(GLUT G T UTTON) / associate with right but /
default: file m glutCreateMenu(file func)
break glutAddMenu ntry( clear , M CL A )
Write the top menu callback by yourself
glutAddMenu ntry( uit , M U T)

String Display
The lowchart Character Display
endering a string on the window
Summary
Steps in multi level menu The flowchart Write texts by using glut instructions //the string ended with 0 Creating GU with glut
creation gl asterPos i( x, y) // location to start printing text
Programming style: event driven,
Declare handles of the top (x, y): position in the raster (window)
vents from hardware: keyboard, mouse, motion,
menu and the sub menus vents from window: reshape and display events,
glut itmapCharacter(font, c) //write a character
Create the sub menus one Callback: procedures to handle events and carry out
by one ont GLUT TMAP T M S OMAN 4, //initial position suitable computation,
c the character to write
Create the top menu Menu system: menu entries, basic menu, hierarchical
nter the sub menus menu, callback functions
buttons into the top menu Take home assignment:
Attach the menu system to Designing a GU and ealizing it
a mouse key Create an interactive D drawing panel

ow to draw a simple geometry Attributes

OpenGL as a State Machine
drawing primitives using OpenGL 1 x Attribute
The key steps: What is an (of an object)
n OpenGL environment, basic
1 Define attributes of theobject (primitive) color, size, thickness, opacity, material, or optical property of an object properties (or attributes) are
Color, size, thickness, Color attribute: treated as :( )
Using OpenGL instructions
or points, lines, polygons,
Define geometrical information of the object
, normal vector,
Geometrical attributes:
Using OpenGL instructions Point size for points
Draw the objects using and Line width for lines
Geometrical information are enclosed within these drawing commands illing modes for polygons These properties once defined
Using default OpenGL pipeline Material optical attributes affect all the drawings afterwards,
or polygons
eminder:
Attributes of windows
until they are re defined
ust for basic D or D object without any lighting effect or transformation
What are lighting effects What are transformations onts/font color/
Discuss these topics in later lectures about geometrical transformations and shading Clear color
note Good for OpenGL x, not working for OpenGL 4 x
nitial size, position

OpenGL, G Color Model

uffer /O unctions Set Window ackground Color G
Define Colors, OpenGL Approaches
eading the contents of a buffer ( ) A light ray consists of M
nstruction waves ( )of The instructions
Or the contents of a rectangular block different fre uencies
Contents colors, depths, // Color r, g, b , 0 r, g, b 1
Our eyes can detect only
Set the window background color types of colors: // Color opacity 0 1
Writing data into a buffer ( ) Usage: used in the callback of event to clear ed, Green and lue
are floats //
Locate a position in a buffer the window ( 用 視窗)
Write image data into a buffer A ray of color is sensed ormat of this instruction
and decomposed into
Colors, depths, opacities, G components by our
eyes gl color f
//black color
Displaying buffer contents ( ) Our brains comprehend the
color based on the
Swapping buffers combination of the G
lushing out buffer contents components

Data Types in OpenGL Digression, Other Color Models Define a Position ow to Draw an Object
OpenGL 1 x and x
SL: hue, saturation, light Specify the of a vertex
or portability, OpenGL defines some data Defining a position in the D, D or 4D space
Define its color and other attributes first
types S : hue, saturation, value ut, no geometrical entity (point) is specified Then draw the object:
Most used OpenGL data types: C rCb: Luminance (brightness) , Cr: saturation of OpenGL pipeline will create it //gl egin( ) gl nd() Use to define the object type the
nstructions ( ，不 )
, Cb: saturation of //human skin color mod el // D position
vertex coordinates of the object
types meaning abbreviations Lab: brightness (lightness) , (a /G), (b / ) // D position, integer type Object types include ,
// float p0 array The vertices are enclosed within gl egin() gl nd()
yellow gl asterPos i( x, y) // move to a location in the window
CM : cyan, magenta, yellow, black
The format
(Subtractive color system, for printing images) Drawn by the
gl library name , ertex instruction name , default shader
f float parameters
, and are the parameters

Digression: defining an object Draw Points and Lines Attributes of Point Line Draw a Polygon
asic components: vertices Draw points: Define A polygon is defined by using a se uence of vertices
gl egin(GL PO NTS) / Draw points / gl egin(GL POL GON)
Primitive Geometries
gl ertex f(x, height y, 0) //define the coordinates for(i 0 i side i )
Points vertices Size point size measured by pixels
gl ertex f(10, ) //define the coordinates (vertex i 0 , height vertex i 1 )
Line vertices gl nd() Why float Why not integer gl nd()
Triangle vertices Outside gl egin() gl nd() //otherwise no effect Another example
Draw lines: gl egin(GL POL GON)
Polygon a list of vertices
gl egin(GL L N S) / Draw a line / Define gl ertex f(0, 0)
(Convex polygons only) gl ertex f(pos x, height pos y) //define the coordinates gl ertex f(10, 10)
gl ertex f(x, height y) //define the coordinates gl ertex f(10, 0)
OpenGL vertex不 primitive， gl nd() Width , thickness pixels, 0 for anti aliasing gl nd()
Draw several lines Outside gl egin() gl nd() //define attributes before gl egin()

Define Polygon Color Colored Polygons Order of ertices Special Polygons

Polygons with single color Monotone polygon Multi colored polygon numerate vertices in the following orders: Triangles
glColor f( r,g,b ) gl egin(GL T ANGL S)
gl egin (GL POL GON) All vertices share the Pixel colors are
gl ertex fv(p0)
gl ertex f(x1, y1, z1) same color interpolated by using the ， gl ertex fv(p1)
: vertex colors gl ertex fv(p )
gl nd ()
不 用 gl nd()
Multiple colors
gl egin (GL POL GON)
Don t enumerate vertices in arbitrary order Triangles are the most used polygons in geometrical modeling
glColor f(r1,g1,b1)
gl ertex f(x1, y1, z1) easons:
glColor f(r ,g ,b ) asy to render (filling, shading, ),
gl ertex f(x ,y ,z ) asy to process (clipping, interpolation, ),
: ardware acceleration,
gl nd () Can model any shapes
 Special Polygons illing Modes Polygon aces emind Again
uads defined by using 4 vertices A polygon can be filled or filling modes face and face Any attribute is a state variable
outlined are relative terms Normal ( ) is decided
No longer popular in new version OpenGL
A polygon has two faces The side facing us is the by the right hand rule Once defined, it influences all the following
Come from CAGD tools face, while the other drawing instructions
gl egin(GL UADS) //counterclockwise order ront and back faces side is the face
gl ertex fv(p0) Define drawing mode by using Using the face to Unless, we over rule (re define) it
gl ertex fv(p1) distinguish face type
(discuss this more in the Attributes
gl ertex fv(p )
shading lecture ) Point size, line width, color, drawing mode,
gl ertex fv(p )
gl nd()
n OpenGL, the order of
ace GL ONT, GL AC , vertices decides the face
GL ONT AND AC
normal (counterclockwise)
Mode GL L N , GL LL

Draw uadric Objects Draw a Disk Draw a Sphere Draw a Cylinder

, (circles), and Draw a disk Define its radius, (slices), Define base top radii, height, num of slices, and
Drawn by using commands GLU uadricObj disk NULL and (stacks) num of stacks
Steps of drawing uadric objects : GLU uadricObj sphere NULL gluCylinder(cyliner,
gluDisk( disk, //object name base radius,
1 Declare them
inner radius, gluSphere(sphere, //name top radius,
GLU uadricObj sphere NULL, cylinder NULL, disk NULL
outer radius, radius, //radius height,
nitially NULL
num of slices, slices, // num of slices slices,
Create them
num of ring) stacks) //num of latitude stacks)
if(sphere NULL) sphere gluNew uadric()
curves No top or base circle
Define attributes for them
Center (0,0) Center (0,0,0) xtruding toward z axis
4 Draw them
n the x y plane Center of base circle (0, 0, 0)

Draw Style Attributes uestions rame uffer /O ead from rame uffer
Draw style command: Other attribute The default center of the aforementioned uadric We can read portion contents of the frame ead the contents of a in the frame
glu uadricDrawStyle (sphere, object is (0, 0, 0), the origin
style) commands buffer buffer
This command defines the or example, color: Procedure
fill mode of the uadric ow can we draw a circle centered at the cursors Color buffers (front or back)
object position
xecute this command , G, , A channels,
before drawing the uadric
glColor f(r, g, b)
gl asterpos i(x, height y) //move to new origin Depth buffer,
objects
Options: height window height We can also write image data into these
GLU LL //default (x, y) cursor position buffers
GLU L N
ow can we draw a sphere at an arbitrary D position What is pack alignment
GLU PO NT specially color buffers
GLU S L OU TT Discussed in the geometrical transformation lectures See the next slide

Memory Alignment: Pack and Unpack Memory Alignment xamples Scope of uffer for eading uffer eading xample
ead GA values from the front buffer
Pack and unpack Alignment 4 The starting address of each We can read the contents of a rectangle in a buffer
//declare an G array
item is a multiple of 4 window
gl ead uffer(GL ONT) / select the front buf /
glPixelStorei(GL PAC AL GNM NT, 1) / alighment 1 /

/ ead the front buffer and store its contents in image ,

Alignment 1, the starting address any 視窗 系 (pos x,pos y) is the lower left corner The size is S by S /
統 gl eadPixels( , 00 , //lower left corner, 00 window height
Alignment method: position 系統 不 S , S , //shape of the rectangle
GL G A, // ead G A channels
Specify the starting address (in bytes) for storing GL UNS GN D T , //Convert data into unsigned bytes
each item (pixel values) in the main memory ) // eep data in the array

Write into rame uffer Scope of uffer Writing Define Lower Left Corner The Procedure of uffer Writing
Specify as position (as the lower left corner) in the Select the destination buffer
Write data into a of a buffer Write data into a rectangle in a buffer
current buffer / Select front buffer as destination /
Procedure window
//window height 00 Define unpack alignment
Select the destination buffer, back or front
Define lower left corner
Define unpack alignment
Define the lower left corner
Write data into the destination
Write the data (S , S , //Data size
GL G A, // channels
GL UNS GN D T , //Data type
) //source

When uffer Writing

Automatically save buffer contents
Controlled using a inite State Machine
What s a finite state machine

Create an array to hold the frame buffer data

ead buffer contents into the array
Trigger the reading by using events
ut, only perform the reading after a new drawing operation
Write the buffer contents back when display events occur
So that we don t have to redraw everything each