closing the distance between cpu and gpu with signed
TRANSCRIPT
default
Next up...
1 Some Concepts
2 Signed Distance Fields
3 Use Cases
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 2/24
default
2D Rendering: The Postscript Model
Dominant 2D renderingmodel for at least 30 years.Essentially models a 2Dplotter.Used by major APIs likeQPainter and Canvas.
moveTo(10, 10)
lineTo(10, 30)
lineTo(30, 30)
lineTo(30, 10)
lineTo(30, 10)
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 3/24
default
3D Rendering: The GPU
Pratically every moderncomputer has one.Massively parallel.Originally designed toaccelerate 3D.
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 4/24
default
Programmable Shaders
Small programs that getexecuted by the GPU.Written in GLSL or othershading language.Various stages existcorresponding to differentparts of pipeline.
1 // Vertex Shader2 uniform mat4 modelViewProjection;3 in vec4 vertexPosition;4 void main()5 {6 gl_Position = vertexPosition *
modelViewProjection;7 }89 // Fragment Shader
10 out vec4 color;11 void main()12 {13 color = vec4(1.0, 0.0, 0.0, 1.0);14 }
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 5/24
default
Next up...
1 Some Concepts
2 Signed Distance Fields
3 Use Cases
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 6/24
default
The Problem
It would be nice if we could use the GPU to acceleraterendering complex 2D items.
But The PostScript model is inherently serial, while the GPU ismassively parallel.
So We need a new rendering model for 2D shapes.
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 7/24
default
Example: Circle
sdf (~p) = ‖~p‖ − r
Where:~p is a 2D vector in range 〈−1,1〉r is the radius of the circle.
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 8/24
default
Turning Math to Image
sdf (~p) = ‖~p‖ − r
-1.0 1.0
-1.0
1.0
r = 0.5
AB
C
A ~p = 0.00.5 Distance = 0.0
B ~p = 0.750.75 Distance = 0.56
C ~p = −0.25−0.25 Distance = -0.15
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 9/24
default
On the GPU
1 uniform float radius;2 uniform vec4 color;34 in vec2 uv;56 out vec4 out_color;78 void main()9 {
10 float distance = length(uv) -radius;
11 out_color = vec4(distance);12 }
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 10/24
default
An Actual Circle
1 uniform float radius;2 uniform vec4 color;34 in vec2 uv;56 out vec4 out_color;78 void main()9 {
10 float distance = length(uv) -radius;
11 out_color = distance > 0.0 ?12 vec4(0.0) : color;13 }
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 11/24
default
Antialiasing
1 uniform float radius;2 uniform vec4 color;34 in vec2 uv;56 out vec4 out_color;78 void main()9 {
10 float distance = length(uv) -radius;
11 out_color = mix(color, vec4(0.0),12 clamp(distance * 100.0, 0.0,
1.0));13 }
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 12/24
default
Operations
Annular Round Outline
Union Subtract Intersect
Translate Rotate Scale
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 13/24
default
Next up...
1 Some Concepts
2 Signed Distance Fields
3 Use Cases
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 14/24
default
Rendering Circles
Rendering circles is a tricky problem in 3D graphics.Standard geometric approach provides an approximation.
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 15/24
default
Pie Charts
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 16/24
default
Line Charts
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 17/24
default
Kirigami’s Cards
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 18/24
default
ShadowedRectangle
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 19/24
default
ShadowedTexture
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 20/24
default
New Cards
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 21/24
default
Putting It Together
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 22/24
default
Closing
Special Thanks To:Inigo Quilez
https://iquilezles.org/
Links
KQuickCharts https://invent.kde.org/framework/kquickcharts/
Kirigami https://invent.kde.org/framework/kirigami/
Author Arjen HiemstraMatrix: @ahiemstra:kde.org
Closing the Distance Between CPU and GPU with Signed Distance Fields — Arjen Hiemstra 23/24