H Kang’s

Computer Graphics

Lecture 0.
Introduction

Prof. HyeongYeop Kang

siamiz_hkang@korea.ac.kr
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 2

Low-level language → High-level representation

▪ A field of study focused on how to transform the numerical data processed by
machines into visual information that humans can perceive.
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 3

Loe-level language → High-level representation

▪ Machines handle data in numerical form, whereas humans perceive the world
in images.
▪ Therefore, we need a set of rules that bridge numbers and images.
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 4

We need a set of rules that bridge numbers and images

▪ Let’s define a way to represent points, lines, and surfaces using the numbers a
computer understands.
▪ Place points in a three-dimensional space, connect two points to form a line,
and connect three points to form a surface.
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 5

We need a set of rules that bridge numbers and images

▪ Next, let’s establish a method for applying color to objects.
▪ Think of it like using square sheets of colored wallpaper—just as you’d paste
the wallpaper onto a surface, you apply color to the object.
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 6

We need a set of rules that bridge numbers and images

▪ Let’s decide how to represent light.
▪ Consider the angle at which light hits the object, the angle at which it’s
reflected, and the observer’s viewpoint to determine brightness.
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 7

We need a set of rules that bridge numbers and images

▪ Let’s decide how to represent animation.
▪ Consecutive changes of images produce an illusion of movement (or motion).
▪ In film, producing a frame often takes as long as minute or hour for a single frame (off-
line rendering). In return, photorealistic frames will be obtained.
▪ In game, at least 30 frames should be rendered in a second.

Consecutive frames produce an illusion of movement

 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 8

Now that we’ve established a set of “rules,” we need to refine them.

▪ We need refined software and hardware (or system)
• Software: implements the rules we’ve introduced
• Hardware that accelerates their execution.
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 9

Now that we’ve established a set of “rules,” we need to refine them.

▪ Software developers create and distribute libraries that make it easier to
program these established rules quickly.

D3D12_INPUT_ELEMENT_DESC inputElementDesc = {}; // Set layout block

inputElementDesc.SemanticName = "POSITION";
inputElementDesc.Format = DXGI_FORMAT_R32G32B32_FLOAT; // 3floats
inputElementDesc.InputSlot = 0;
inputElementDesc.AlignedByteOffset = 0;

commandList-
>IASetPrimitiveTopology(D3D_PRIMITIVE_TOPOLOGY_TRIANGLELIST); // Set
primitive topology

D3D12_VERTEX_BUFFER_VIEW vbView = {}; // Bind vertex buffer block

vbView.BufferLocation = vertexBuffer->GetGPUVirtualAddress();
vbView.StrideInBytes = sizeof(Vertex); // Specifies the size in bytes of each
vertex entry.
vbView.SizeInBytes = vertexBufferSize; // Specifies the size in bytes
commandList->IASetVertexBuffers(0, 1, &vbView);

…
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 10

Now that we’ve established a set of “rules,” we need to refine them.

▪ We need software and hardware that can apply these established rules more
quickly and in more diverse ways.
▪ Let’s formalize this into a pipeline so that we can handle it in a more intuitive
way!
Resource view

Optional fixed function

Optional shader stage

Required shader stage

Input assembler Vertex shader Hull shader Tessellator Domain shader Geometry shader Rasterizer Pixel shader Output merger

Vertex buffer views (VBVs) Render target views (RTVs)

Stream output
Index buffer view (IBV) Depth-stencil view (DTV)
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 11

Now that we’ve established a set of “rules,” we need to refine them.

▪ Hardware manufacturers create chips and drivers to accelerate these pipeline-
based processes.

https://en.wikipedia.org/wiki/CUDA
 IIIXR LAB

What is a Computer Graphics ?

Prof. H. Kang
p. 12

Now that we’ve established a set of “rules,” we need to refine them.

▪ CG programmers/researchers use and improve these established rules to
develop technologies:
▪ Realism
▪ Interactivity

▪ These are the fundamental scope of the computer graphics.

 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 13

Why Interactable & Realistic?

▪ Interactable
• Many computer graphics applications rely on user input to
shape the experience.
• When a 3D scene responds to user actions it becomes
more engaging.

▪ Realistic
• The closer graphics are to real life, the easier it is for users
to accept and trust what they see on screen.
+ Interactivity
+ Realism
▪ Therefore, providing an interactive and realistic experience is =?
crucial for usability and overall functionality.
 IIIXR LAB
Prof. H. Kang
p. 14
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 15

Let’s Better Simulate Light

▪ It doesn’t look realistic without shadows.
▪ Let’s define shadows by exploring the space from the positions of the light source
and the observer.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 16

Let’s Better Simulate Light

▪ To replicate how light behaves in the real world, we need concepts that go beyond
just angles of incidence and reflection.
▪ Let’s take into account light absorption, diffuse reflection on microfacets, and the
law of energy conservation.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 17

Let’s Better Simulate Light

▪ Light isn’t reflected only once.
▪ We should consider not just direct light, but also indirect light.
 IIIXR LAB
Prof. H. Kang
p. 18
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 19

Let’s Also Represent Physical Phenomena

▪ How can we represent fluids or gases? With triangles? Maybe not..
▪ Let’s use techniques such as volumetric subdivisions or particle-based rendering
instead of sticking to just points, lines, and planes.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 20

Let’s Also Represent Physical Phenomena

▪ Let’s explore how to represent various physical phenomena (such as fluid flow and
gas diffusion) in a virtual environment.
▪ Accurately reproducing these phenomena requires enormous computational power.
▪ We need to address the challenge posed by limited computing resources.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 21

Let’s Also Represent Physical Phenomena

▪ We may simplify well-understood physical phenomena, but our goal is to achieve
results that look convincing.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 22

Let’s Also Represent Physical Phenomena

▪ Let’s also depict phenomena such as magnetism accurately.
▪ In particular, pay close attention to the stability of simulations and the equilibrium
of forces.
 IIIXR LAB
Prof. H. Kang
p. 23
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 24

Let’s Represent Characters

▪ The movement of a character with joints is different from the movement of a
typical object.
▪ We need an efficient data representation method that can depict jointed characters.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 25

Let’s Represent Character Motion

▪ We also need a way to handle a character’s movements by converting them into
data.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 26

Let’s Adapt the Character‘s Shape

▪ We need an easy way to incorporate various character attributes (such as height
and body shape) and apply the resulting animations to match these attributes
seamlessly.
 IIIXR LAB
Prof. H. Kang
p. 27
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 28

Let’s Explore Ways to Save Computing Resources for Rendering

▪ More realistic rendering consumes more computing resources.
▪ If we want to render planet-sized data obtained from satellites in real time (like in
the images below), we need special techniques.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 29

Let’s Explore Ways to Save Computing Resources for Rendering

▪ We might not need to render every object in an environment at the highest fidelity.
▪ Let’s dedicate more resources to objects that are close by, because viewers probably
won’t notice less detail on distant objects anyway.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 30

Let’s Explore Ways to Save Computing Resources for Physics Computation

▪ Could we perform various physics computations more quickly?
▪ Since people might not notice small inaccuracies, approximating real behavior
might be a good way to speed things up.
 IIIXR LAB

Towards Interactable and Realistic Experience

Prof. H. Kang
p. 31

Let’s Explore Ways to Save Computing Resources for Physics Computation

▪ Again, can we run these physics calculations more efficiently?
▪ Let’s see if we can handle large-scale physical phenomena in real time.
 IIIXR LAB
Prof. H. Kang
p. 32
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 33

Combining AI technology with graphics technology

▪ If we can handle even larger quantities of data faster and more convincingly, might
we eventually be able to mimic reality?
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 34

Advantages of AI Technology (1)

▪ AI excels at discovering complex patterns in large datasets.
▪ If we already have “reality” as the correct answer, AI can discover patterns from
that answer.
▪ It automatically and effectively reproduces natural phenomena that are hard to
model using pure mathematics.
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 35

Advantages of AI Technology (2)

▪ Sometimes AI-based computations can be faster than traditional algorithmic
methods.
▪ Algorithmic attempts to model reality often incur a huge computational burden,
whereas AI computations can be relatively straightforward.

VS.
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 36

Advantages of AI Technology (3)

▪ Through distribution-based learning, AI can partially mimic human creativity and
behavior patterns.
▪ AI can perform tasks that once seemed impossible to automate through simple
imitation and that used to require a human touch.
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 37

Let’s Learn How to Render the Light

▪ Instead of creating equations to model light, let’s learn the function of “light”
directly from real-world data.
▪ Rather than deriving formulas, we can train AI using “reality” as the correct answer.
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 38

Let’s Learn How to Move the Character

▪ Rather than manually defining a character’s movements, let’s learn the motion
function itself from real examples.
▪ By analyzing vast amounts of walking data, the AI can learn how characters should
move.
 IIIXR LAB
Prof. H. Kang
p. 39
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 40

Let’s Learn How to Express Emotions or Characteristics

▪ Instead of defining how to represent emotions, learn from motion data that already
expresses emotion.
▪ By studying movement imbued with emotion, we can learn how to reproduce it
(introverted, extroverted, etc.).
Introverted Extroverted
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 41

Let’s Learn the relationship between 2D layout and 3D data

▪ Define the relationship between 2D layouts and 3D data, and let the AI learn it.
▪ It’s not just a simple matter of “before and after” data; we can define arbitrary
relationships and have the AI learn them.
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 42

Let’s Learn How to Represent Aging

▪ Rather than defining how to represent aging, infer the intermediate process from
the final, aged result.
▪ If we can obtain before/after data, we can also infer the relationship in between.
 IIIXR LAB
Prof. H. Kang
p. 43
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 44

Let’s Link the Meaning of Natural Language with the that of Visual Information
▪ Instead of manually defining an algorithm for how language and visual data relate,
let’s learn these relationships from large-scale datasets.
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 45

Let’s Exploit the LLM

▪ Leverage the inference capabilities and common sense of LLMs.
▪ Knowledge gained through language can eventually enable human-like reasoning.
▪ Let’s use that to drive various animations, planning tasks, and collaborative
scenarios.
 IIIXR LAB
Prof. H. Kang
p. 46
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 47

Let’s Apply AI to complete many other CG-related tasks

▪ Transferring user movements into virtual reality.
 IIIXR LAB

AI for CG
Prof. H. Kang
p. 48

Let’s Apply AI to complete many other CG-related tasks

▪ Generating full-body motion from sparse points (an application of motion capture).
 IIIXR LAB

End
Prof. H. Kang
p. 49

Computer Graphics?
▪ For those who want to create a virtual world indistinguishable from reality.
▪ If we can represent a world that cannot be told apart from the real one within a
virtual space, then the space of what humans can utilize will expand enormously.
▪ This marks a pivotal technological breakthrough—one significant enough to say
that a new era has begun.

I hope you enjoy this class!

▪ More 3D game graphics related videos can be found in IIIXR LAB YouTube.
 IIIXR LAB
Prof. H. Kang
p. 50

Thank You
Prof. Hyeongyeop Kang

Contact:
siamiz_hkang@korea.ac.kr

Youtube channel:
@IIIXRLab

Lab homepage:
http://iiixr.korea.ac.kr/
 IIIXR LAB

Reference
Prof. H. Kang
p. 51

https://commons.wikimedia.org/wiki/File:NVIDIA_RTX_4090_Founders_Edition_-_Verpackung_(ZMASLO).png
https://commons.wikimedia.org/wiki/File:Diffuse_reflection.svg
https://commons.wikimedia.org/wiki/File:Physically_Based_Rendering_Sample_2.png
https://en.wikipedia.org/wiki/CUDA
https://commons.wikimedia.org/wiki/File:Direct_lighting.png
https://commons.wikimedia.org/wiki/File:Global_illumination1.png
https://en.wikipedia.org/wiki/Navier%E2%80%93Stokes_equations
https://en.wikipedia.org/wiki/File:Viscosities.gif
https://commons.wikimedia.org/wiki/File:DrivAer_SST-URANS-DDES_Comparison.png
https://commons.wikimedia.org/wiki/File:Particle_Emitter.jpg