27th August, 2023
Session 4: Graphics Pipelining
Introduction
Everwonderedhowapplicationsdraw
themselvestothescreen?
Letstakealook,shallwe?
Scene
Let'stalkabout
Asceneisessentiallytheprocessofcompositing
multiplelayersofimagesourcesintoone.
Whatdoescompositingmean?
GraphicsPipeline
Agraphicspipelineisaseriesofstagesincomputergraphicsthattransforms3Dscenedataintoa2Dimage.Itbegins
bypositioningandshapingbasicelementslikevertices(fancytermforcorners).Theseshapesarethenturnedinto
pixelsthroughrasterization.Pixelsarethencoloredandlitupbasedontexturesandlighting,andfragmentsare
processedforvisibilityandeffects.Thefinalresultisadetailed2Dimagedisplayedonascreen.
• Letsdelveintosomeofthesmallersubpartsofgraphics-pipeliningnow.
Layers
•
Wallpaper layer
Your phone has multiple layers / planes
where components of your display reside:
Recents layer​
Icon and widget layer
Notification-shade layer
Application layer
Recap…
• Scenesarejustacombinationofmultiplelayers.
• Layersareessentiallypartsofadesktopcomprisingascenethathousea
particularelementsuchasapplications/wallpaper/icons.Simplyputthey
containvarioustextures.
• Compositionistheprocessofcreationofscenes.Acompositorperforms
composition.
GDSC KIIT Huddle Session 4 - "Graphics Pipelining"
Whatis
GPU?
WhatlanguagedoestheGPU
understand?
DoesittalkinbinaryorC?
So here'saquestionforyou,
OpenGL
WhatisOpenGL?
OpenGL is an interface to talk to the GPU with the aforementioned GLSL language. We can
tell the GPU exactly what to draw and where, it will do exactly that and nothing more.
Eg: Fill the entire display with black pixels and draw 1 red pixel at the coordinate (10,10)
.(10,10)
Buffers
WhatisBuffers?
Buffersareanintegralpartoftheentire
graphicspipeline.
Buffersaremadebycallingthemmap
systemcall.
TypesofBuffers:
● A special type of buffer which is
only used for dumping pixel data and
is not actually drawn to the screen.
Renderbuffer:
01
● The buffer where applications
cannot write their pixel data to, but
can be presented to the screen.
DisplayBuffer:
02
Recap…
• Nowthatweknowabitmoreofthepuzzle,Ihopeyoucanseewhatthecompositors
taskis:
Thecompositor’smissionissimple:takeabunchofpixelbuffersfromclients(e.g.your
webbrowser’swindow(chrome)oryourtexteditor’s(vscode)),drawthemtogetherona
largerbufferanddisplaythelargerbufferonyourscreen.
GDSC KIIT Huddle Session 4 - "Graphics Pipelining"
• Imagineyourcomputermonitororscreenasawindowthrough
whichyouseethedigitalworld.Therefreshrateislikethespeed
atwhichthiswindowupdatestheimagesitdisplays.It'smeasured
inHertz(Hz),whichrepresentsthenumberoftimespersecond
thescreenrefreshesorupdates.
• Soessentiallyspeaking,weneedtoupdatethescreen60times
everysecondtokeepthesceneup-todatewiththebuffer
content.
• Whileahigherrefreshrateisgreatforgamingorwatchingaction-
packedvideos,fortaskslikereadingdocumentsorcoding,a
lowerrefreshratemightworkjustfinewithoutaffectingyour
experience.
GDSC KIIT Huddle Session 4 - "Graphics Pipelining"
VariableRefreshRate
What if your GPU's rate of creating scenes doesn't match the refresh rate of your montior?
EG: Your GPU is producing 100 frames per second, however your monitor is a 60 Hz
monitor.
Outcome: You won't be able to view any new frames unless the previous ones have been
flushed out of the buffer. Another possible outcome is stuttering all over your screen.
This is where VRR comes in: Variable Refresh Rate (VRR) is like a real-time communication
between your monitor and graphics card. It adjusts the screen's refresh rate based on how
fast your graphics card is working, preventing issues like screen tearing and stuttering
during tasks like gaming. This technology, found in NVIDIA G-Sync and AMD FreeSync,
ensures smoother and more synchronized visuals, enhancing your overall experience.
DamageTracking
Now, what do you think happens when none of the buffers that make up a scene change between any of
the frames in 1 render cycle ( 60 times per second / 60 hz).
Answer: None of the scene components change however we're still drawing the scene 60 times per
second which is very wasteful of resources and computing time!
Eg: If you want to change 1 part of your drawing, would you rather trash it all or just redraw the required
area?
This is where damage tracking comes in:
Damage tracking in rendering involves keeping track on which parts of a scene need to be redrawn.
When objects change or move, only those portions are recalculated and redrawn, saving computational
resources.
It's like updating only the altered parts of a painting instead of redoing the entire artwork. This efficient
process helps in faster image generation and is crucial for real-time graphics, as it optimizes rendering
workload for better performance.
v
Damage Tracking Demonstration
•
•
ImagineclientAtobeanormaldesktop
window(WhatsApp?)
ImageclientBtobeanotherdesktop
window(Slack?)
Letsanalyzethispicture:
This is known as "tearing" and it is the
compositors task to fix.
Lets try to understand the problem by
breaking it down into digestible chunks.
GDSC KIIT Huddle Session 4 - "Graphics Pipelining"
• Toavoidtheabovediscussedproblemwemakesurenew
scenesaredumpedintoa"renderbuffer"whichis
specificallyusedfordrawing.Afterdrawingiscomplete,it
isswappedwithanotherbufferknownasthe"display
buffer".
• Asyoucansee,thissolvedthepreviousrace.Oncethe
applicationisdonewritingtotherenderbuffer,theold
displaybufferbecomesthenewrenderbuffer.Whilethe
currentrenderbufferbecomesthenewdisplaybufferand
getsdrawntothescreen.
• Hencenewupdatestotheapplicationwillnotstartwriting
tothebufferwhichisbeingusedtopresent,thereby
solvingtearing.
GDSC KIIT Huddle Session 4 - "Graphics Pipelining"
GDSC KIIT Huddle Session 4 - "Graphics Pipelining"
GDSC KIIT Huddle Session 4 - "Graphics Pipelining"
• Writerenderes/contributetocomplexgraphicssoftwaresuchasblender
Sowhereexactly
isthisknowledgeused?
• Compositors.
• Scientificemulationsandvisualizations
• VirtualReality(VR)andAugmentedReality(AR)
• Implementinganimationsandothervisualeffects
click to see visual effects
GDSC KIIT Huddle Session 4 - "Graphics Pipelining"
•
ThankYou!
GDSC KIIT Huddle Session 4 - "Graphics Pipelining"

More Related Content

PPTX
Technologies Used In Graphics Rendering
PDF
Improving Shadows and Reflections via the Stencil Buffer
PPT
Gpu presentation
PDF
The Power of WebGL - Hackeando sua GPU com JavaScript
PPTX
Introduction to Computer graphics
DOCX
HA5 – COMPUTER ARTS BLOG ARTICLE – 3D: The Basics
PDF
Understanding Hardware Acceleration on Mobile Browsers
PDF
Understanding hardware acceleration on mobile browsers presentation
Technologies Used In Graphics Rendering
Improving Shadows and Reflections via the Stencil Buffer
Gpu presentation
The Power of WebGL - Hackeando sua GPU com JavaScript
Introduction to Computer graphics
HA5 – COMPUTER ARTS BLOG ARTICLE – 3D: The Basics
Understanding Hardware Acceleration on Mobile Browsers
Understanding hardware acceleration on mobile browsers presentation

Similar to GDSC KIIT Huddle Session 4 - "Graphics Pipelining" (20)

PDF
Better DITA Graphics for a Multi-Screen World
DOCX
HA5 – COMPUTER ARTS BLOG ARTICLE – 3D: The Basics
DOCX
3D - The Basics
PDF
Computer Graphics Notes
PPT
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
PPTX
Datt 2501 week 11
PDF
(2) gui drawing
PDF
LightWave™ 3D 11 Add-a-Seat
PDF
Motion graphics Terminology
PPTX
Looking glassrenderinglt en
DOCX
Ha4 constraints
PPT
Visibility Optimization for Games
PPT
Visibility Optimization for Games
PPTX
FGS 2011: Making A Game With Molehill: Zombie Tycoon
PDF
High DPI for desktop applications
PPTX
Working with Shader with Unity
PPTX
Advanced Silverlight
PPTX
Making High Quality Interactive VR with Unreal Engine Luis Cataldi
PPTX
Making High Quality Interactive VR with Unreal Engine Luis Cataldi
PPTX
The Rendering Pipeline - Challenges & Next Steps
Better DITA Graphics for a Multi-Screen World
HA5 – COMPUTER ARTS BLOG ARTICLE – 3D: The Basics
3D - The Basics
Computer Graphics Notes
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Datt 2501 week 11
(2) gui drawing
LightWave™ 3D 11 Add-a-Seat
Motion graphics Terminology
Looking glassrenderinglt en
Ha4 constraints
Visibility Optimization for Games
Visibility Optimization for Games
FGS 2011: Making A Game With Molehill: Zombie Tycoon
High DPI for desktop applications
Working with Shader with Unity
Advanced Silverlight
Making High Quality Interactive VR with Unreal Engine Luis Cataldi
Making High Quality Interactive VR with Unreal Engine Luis Cataldi
The Rendering Pipeline - Challenges & Next Steps
Ad

Recently uploaded (20)

PPTX
ai_satellite_crop_management_20250815030350.pptx
PPTX
Graph Data Structures with Types, Traversals, Connectivity, and Real-Life App...
DOC
T Pandian CV Madurai pandi kokkaf illaya
PDF
August 2025 - Top 10 Read Articles in Network Security & Its Applications
PPTX
ASME PCC-02 TRAINING -DESKTOP-NLE5HNP.pptx
PDF
Present and Future of Systems Engineering: Air Combat Systems
PPTX
Petroleum Refining & Petrochemicals.pptx
PPTX
AUTOMOTIVE ENGINE MANAGEMENT (MECHATRONICS).pptx
PPTX
CN_Unite_1 AI&DS ENGGERING SPPU PUNE UNIVERSITY
PDF
20250617 - IR - Global Guide for HR - 51 pages.pdf
PPTX
Chemical Technological Processes, Feasibility Study and Chemical Process Indu...
PDF
Beginners-Guide-to-Artificial-Intelligence.pdf
PPTX
Sorting and Hashing in Data Structures with Algorithms, Techniques, Implement...
PPTX
Chapter 2 -Technology and Enginerring Materials + Composites.pptx
PDF
Cryptography and Network Security-Module-I.pdf
PDF
Applications of Equal_Area_Criterion.pdf
PDF
Computer System Architecture 3rd Edition-M Morris Mano.pdf
PPTX
A Brief Introduction to IoT- Smart Objects: The "Things" in IoT
PPTX
Software Engineering and software moduleing
PDF
Design of Material Handling Equipment Lecture Note
ai_satellite_crop_management_20250815030350.pptx
Graph Data Structures with Types, Traversals, Connectivity, and Real-Life App...
T Pandian CV Madurai pandi kokkaf illaya
August 2025 - Top 10 Read Articles in Network Security & Its Applications
ASME PCC-02 TRAINING -DESKTOP-NLE5HNP.pptx
Present and Future of Systems Engineering: Air Combat Systems
Petroleum Refining & Petrochemicals.pptx
AUTOMOTIVE ENGINE MANAGEMENT (MECHATRONICS).pptx
CN_Unite_1 AI&DS ENGGERING SPPU PUNE UNIVERSITY
20250617 - IR - Global Guide for HR - 51 pages.pdf
Chemical Technological Processes, Feasibility Study and Chemical Process Indu...
Beginners-Guide-to-Artificial-Intelligence.pdf
Sorting and Hashing in Data Structures with Algorithms, Techniques, Implement...
Chapter 2 -Technology and Enginerring Materials + Composites.pptx
Cryptography and Network Security-Module-I.pdf
Applications of Equal_Area_Criterion.pdf
Computer System Architecture 3rd Edition-M Morris Mano.pdf
A Brief Introduction to IoT- Smart Objects: The "Things" in IoT
Software Engineering and software moduleing
Design of Material Handling Equipment Lecture Note
Ad

GDSC KIIT Huddle Session 4 - "Graphics Pipelining"