►
From YouTube: RustFest Paris 2018 - Vector graphics rendering on the GPU in Rust with Lyon by Nicolas Silva
Description
Our next speaker, Nicholas, made
a vector thing that's worth the wait
A renderer for you
and your GPU
Now frenetic applause would be great
Lyon is a collection of low level tools to render 2D vector graphics on the GPU, useful for games as well as other applications benefiting from vector graphics (map renderers, web browsers, graphical user interfaces, creative coding, etc.). This presentation will start with a very short overview of the type of functionalities lyon provides, followed by a deep dive into how lyon approaches rendering and how it relates to other GPU based vector graphics rendering tools.
(Limerick by @llogiq)
https://paris.rustfest.eu/sessions/lyon-vector-graphics-rendering-in-rust
A
B
B
So
before
I
get
into
the
details
of
Leo.
I
just
want
to
get
the
terminology
straight.
So,
on
the
one
hand
you
have
raster
graphics.
So
typically
your
your
you
know
typical
image
format
like
a
PNG
or
JPEG
like
something
that
you
display
on
the
screen
by
using
a
uniform
grid
of
pixels,
and
it
you
working
with
uniform
grids
of
width
of
pixels,
is
really
convenient
for
a
lot
of
things,
but
also
comes
with
some
challenges.
B
For
instance,
you
you
need
to
think
about
the
resolution
at
which
you
offer
your
content
and
the
resolution
at
which
you
present
it
and
when
the
two
don't
match,
which
they
usually
don't,
you
need
to
figure
out
how
to
scale
your
content.
To
this
to
the
resolution
at
which
you
present
it
and
sometimes
well,
you
will
get
artifacts
like
you
know,
a
blurry
mess
or
a
pixelated
mess,
and
it's
not
necessarily
a
very
pleasant
to
deal
with
as
a
Content
author.
Sometimes
your
your
resolutions
also
kind
of
change.
B
Sometimes
you
need
to
you
know,
present
on
a
phone
or
on
a
PC
with
different
sort
of
screen,
sizes
and
and
raster
graphics
is
sort
of
like
the
fundamental
building
block
of
presenting
anything
on
the
screen,
but
for
thering
it
has
like
a
few.
A
few
disadvantages
fala
size
being
one
of
one
of
them
as
well,
but
on
the
other
hand,
you
vector,
graphics
and
when
I
talk
about
vector,
graphics
well,
think
about
it.
B
So
there
it
is,
in
my
case,
on
a
day
to
day
basis.
You
you
guys
interact
with
vector,
graphics
content
like
all
the
time.
For
instance,
I
I
was
talking
about
web
browsers
in
web
pages,
but
also
Maps
typically
will
make
use
of
vector
graphics,
because
this
kind
of
content
needs
to
be
transferred
over
the
network
and
vector
graphics
are
like
a
more
sort
of
expressive
and
compact
representation.
That
is
independent
of
the
resolution.
So
let
me
see
if
it
can
zoom
on
that
thing
right.
B
So
this
is
an
SVG
that
I
exported
from
from
OpenStreetMap
and
as
you
zoom
on
it,
you
can
see
that
it
doesn't
turn
into
a
blurry
mess
or
a
pixelated
thing,
and
but
it
doesn't
stop
there,
like
all
of
your
apps
nowadays
like
modern
apps
use,
vector
graphics
for
icons
for
text,
for
you
know
rendering
diagrams.
For
you
know,
all
of
the
UI
typically
now
is.
Is
you
know,
directives
to
render
things
rather
than
just?
B
Things
like
animating
that
diagram
or
you
know,
making
transitions
or
or
whatnot
video
games
are
also
an
area
where,
where
you
can
do
fun
things
with
vector,
graphics
right,
you
could
have
interesting,
gameplay
mechanics
that
rely
on
the
idea
of
having
of
presenting
things
at
different
scales,
for
instance,
what
if
I
want
to
zoom
on
that
Lady
Bird
over
there
right?
You
can
do
interesting
things
with
vector,
graphics
and
and
again.
The
file
size
is
a
big
issue
for
for
video
games
today,
be
it
2d
or
3d
games.
B
They
tend
to
ship
gigabytes
and
gigabytes
of
texture
memory
these
days
and
and
if
you
start
thinking
about
in
terms
of
vector
graphics,
then
you
can.
You
can
make
that
like
a
lot
smaller
and
maybe
even
think
about
shipping
your
game
over
over
the
network,
which
it's
really
hard
like
if
you,
if
you
try
to
if,
for
instance,
you
yourself,
try
to
you,
know,
publish
Rayman
origin
on
web
browser
that
will
have
they
would
have
this
like.
B
Oh,
we
have
ten
gigabytes
of
texture
memory
that
we
need
to
string
over
the
network
and
that's
a
bit
of
an
issue,
and-
and
you
could
do
a
lot
of
stuff
that
you
you
don't
usually
see
on
a
lot
of
games,
2d
games
because
of
the
the
the
problem
you
know
of
being
fixed
to
a
certain
resolution,
for
instance,
maybe
assume
in
a
character
and
better
to
better
show
like
expressions
and
put
some
end
phase
and
and
and
sort
of
in.
Hence
the
the
storytelling
that
way.
B
But
the
challenge
with
working
with
vector,
graphics
everywhere,
is
that
today's
computers
and
phones
and
and
screens
in
general,
have
a
lot
of
pixels
really
a
lot
of
them
and
they
be
it
you're,
really
underpowered
CPU
on
the
phone
or
overpowered
a
CPU
on
your
computer.
They
actually
struggle
to
go
through
these
4k
screen
and
you
know
like
set
the
color
of
every
pixels
at
interactive
framerate.
B
If
you,
if
you
think
about
this,
this
tiger
thing
that
I
showed
you
earlier,
it's
built
upon
layers
and
layers
and
layers
of
shapes,
which,
which
means
that
if
you
draw
things
back
to
front
you
will
you're
gonna
touch
like
pixels.
Quite
quite
a
few
times
and
you're
gonna
hit
this
memory
bandwidth
limit.
That
is,
it's
pretty
hard
good
to
get
by
on
a
4k
screen,
whatever
the
power
of
your
CPU
is
so,
how
did
we
go
about
fixing
this?
This
is.
This
is
interesting
okay.
B
The
other
way
actually
like
how
do
our
manufacturers
make
GPUs
so
that
you
can
play
games,
and
these
GPUs
are
made
to
perform
a
certain
certain
kinds
of
things
really
really
fast,
so
that
you
can
play
games
and
if,
as
a
web
browser
or
an
application
that
needs
to
render
vector
graphics,
we
can
leverage
what
the
hardware
vendors
have
built
for
game
developers.
Then
then,
maybe
wiki
we're
hunting
we're
onto
something.
So
the
basic,
primitive
that
all
video
games
are
based
on
these
days
is
triangles
like
meshes
are.
B
What
we
call
a
mesh
is
the
way
we
that
we
represent
these
3d
models.
You
know
by
like
representing
them
with
with
triangles
around
the
surface,
and
then
you
know
supplying
some
textures
on
them
and
then
animating
that
in
a
3d
world
and
GPUs
are
pretty
much
designed
to
render
triangles
very
fast
and
touch
a
lot
of
pixels
very
fast,
using
triangle
rasterization.
So
that's
interesting.
What
can
we
do
with
this?
B
Another
thing
that
I
want
to
touch
on
quickly
and
and
if
I
have
time,
I'll
sort
of
get
back
to
that
towards
the
end
of
this
presentation
is
that
in
order
to
solve
the
problem
of
things
being
rendered
in
in
the
front
and
in
the
back
in
the
3d
world,
the
how
to
Ravenna
came
up
with
this
idea
of
having
a
def
buffer
so
like
this
or
z-buffer,
as
as
we
sometimes
call
it,
which
is
kind
of
like
a
buffer
that
contains
the
depth
of
every
pixel.
And
so
it
lets.
B
You
make
sure
that
if
you
draw
something
and
it's
behind
something
that
you've
already
drawn,
then
the
pixels
they're
behind
are
gonna
be
discarded,
rather
than
covering
the
thing
that
you've
already
drawn
and
it
started
as
a
way
to
sort
of
solve
the
problem
or
of
rendering
3d
worlds,
but
it
actually
ended
up
being
a
great
tool
to
avoid
writing
into
memory.
It's
actually
a
lot
more
complicated
than
like
just
a
buffer
in
memory
like
the
hardware.
It's
like
really
hand-tuned
and
optimized.
It's
you
know
your
kacal
representation.
B
It
all
tries
to
avoid
as
much
memory
bandwidth
traffic
as
possible,
because
this
is
pretty
much
the
the
bottleneck
in
video
games
today.
So
how
do
we
go
about
doing
this
kind
of
stuff
in
lyon?
Ru
is
based
on
the
same
idea
as
those
video
game,
video
games,
which
is
to
take
vector,
graphics
and
turn
them
into
this
soup
of
triangles
this.
This
triangle
mesh
that
you
can
feed
the
GPU
and
then
the
GPU
gets
really
good.
It's
rendering
them
and
this
process
of
taking
a
shape.
B
You
know
an
SVG
path
or
what-have-you
into
a
triangle.
Mesh
is
called
tessellation.
Sometimes
people
also
call
it
triangulation
so
generating
the
tessellation
for
convex.
Polygons
is
actually
quite
easy.
You
can
just
pick
of
ethics
and
then
loop
through
the
other
vertex
in
order,
and
then
just
you
know,
add
triangles
and
it
will
work
out,
but
most
interesting
path
or
vector
shapes
are
are
not
convex
at
all.
So
we
need
to
to
figure
something
out
for
this.
B
There
is
one
kind
of
polygon
that
is
that
has
interesting
properties,
it's
not
as
easy
as
convex
polygons,
but
it's,
but
it
will
turn
out
useful.
It's
what
I
call
why
monotone
polygons?
You
can
also
have
X
monotone
polygons.
Basically,
the
idea
is,
you
want
to
have
polygons
that
are
monotone
along
a
certain
axis
and
in
the
case
of
the
I'm,
using
the
y-axis,
a
Y,
mono
and
polygon.
B
B
This
is
where,
like
the
the
things
sort
of
splits
into
two
things
and
in
terms
of
algorithms,
if
we
can
figure
out
how
to
decompose
polygons
so
that
we
don't
have
any
merge,
vertex
or
split
vertex,
then
we
might
be
onto
something,
and
there
is
a
pretty
efficient
algorithm
for
doing
this,
which
I'm
gonna
give
you
sort
of
a
bit
of
a
walkthrough.
It's
actually
like
more
of
a
run-through
and
I'm
gonna.
B
It's
very
like
I'm
gonna,
oversimplify
all
of
this,
because
if
I
had
to
explain
the
entire
algorithm,
it
would
be
taking
like
three
hours
and
it
would
be
painful
for
everyone
in
this
room,
including
me.
So
what
I
just
want
is
to
give
you
sort
of
a
an
intuition
of
how
these
things
work.
When
you
go
home
tonight,
you
probably
won't
be
like
oh
I'm
coding,
a
monotone
Desolator
before
I'm
before
going
to
sleep,
but
at
least
you'll
have
some
sort
of
an
intuition
of
how
this
works.
B
So
imagine
a
horizontal
line,
an
image,
imaginary,
horizontal
line
that
goes
through
your
geometry
from
top
to
bottom
and
as
we
stop
at
each
vertex,
we
remember
the
list
of
all
of
the
vertices
that
intersect
with
this
image.
In
your
a
line
which
I
will
from
now
on,
call
the
sweep
line,
and-
and
so
we
add
those
those
edges
to
that
list
and
then
as
we
proceed,
we
remove
edges
and
that
were
that
are
not
intersecting
anymore
from
from
the
sweep
line.
B
So
as
we
go
through
in
Y
order,
we
maintain
that
list
and
then
eventually
we
run
into
one
of
those
vertices
that
we
don't
want
to
have
a
norm
on
polygons.
So,
as
this
dramatic
red
background
indicates
we're
into
a
place
where
we
need
to
do
something,
and
thanks
to
the
nature
and
the
structure
of
this
sorted
list
of
edges
that
we
have
in
our
swept
line,
it's
very
easy
to
find
the
next
edge.
B
That
is
directly
on
the
left
of
the
current
vertex
that
we
want
to
connect
to
something
then
go
up,
that
edge,
say,
select
this
vertex
and
then
insert
a
new
edge
there
and
now
we're
happy
because
we
we
no
longer
have
this.
This
split
vertex
that
was
there,
was
making
us
so
sad
and
having
like
a
red
background
at
all.
So
we
continue.
B
We
continue
and
we
run
into
another
instance
of
a
type
of
vertex
that
we
don't
want
the
infamous
merge
back
vertex
and
again
we
have
our
dramatic
red
background,
but
in
this
instance
there
is
actually
nothing
that
we
can
do,
because
if
we
were
to
try
to
connect
this
guy
with
some
other
vertex
that
we've
visited
before
then
we
wouldn't
be
well
like.
We
would
still
have
this.
This
sort
of
v-shaped
merge
vertex
that
we
that
we're
trying
to
avoid.
B
So
we
have
to
remember
that
there's
a
merge
vertex
that
we
need
to
resolve
later
and,
as
it
turns
out
in
the
next
iteration
I
am
under
I
am
under
this.
This
merge
vertex,
which
means
that
basically
I
am
at
a
point
that
is
between
those
two
edges
that
are
like
around
this.
This
much
of
that
sex.
You
probably
guess,
probably
don't
see
the
bottom
of
the
slates
very
much
sorry
about
that,
and
we
we
remembered
that
we
had
something
to
fix
up
there.
We
insert
a
new
edge
and
there
we
go.
B
We
have
or
monotone
polygons
the
utakome
decomposed,
and
so
this
is
like
sort
of
the
general
idea
of
the
algorithm
and
it's
it's
been
like
sort
of
documented
in
the
literature
like
forever
this.
This
pretty
good
literature
about
this.
So
if
you're
interested,
you
can
look
into
this
one
thing
that
is
interesting
about
Leon
is
that
I
started
by
implementing,
like
so
the
the
naive
and
common
algorithm
for
first
figuring
this
stuff
out,
and
basically
it's
it's
composed
of
three
phases.
B
In
the
first
phase,
you,
you
need
to
take
your
arbitrary
shape
that
might
have
self
intersections
and
resolve
your
your
self
intersections
and
decompose
your
polygon
into
polygons
that
don't
have
so
like
into
several
polygons
that
don't
have
self
intersections.
Then
you
go
through
each
of
these
polygons
and
you
do
this.
This
monotone
polygon,
the
compositing
that
I
just
showed
you
and
then
you
go
through
all
of
those
monotone
polygons,
and
you
do
this.
B
This
ping-ponging
of
the
to
insert
the
the
actual
triangles
that
are
the
output
of
your
algorithm
and
so
I
implemented
this,
and
it
was
working.
Okay,
the
performance
was
sort
of
on
par
with
what
the
other
tessa
leaders
we're
doing,
but
if
you
think
about
it,
all
of
those
passes
are
processing
their
input
and
producing
their
outputs
in
the
same
order
like
top
to
bottom.
B
But
in
order
to
do
this
at
running
to
more
edge
cases
and
basically
the
algorithm
from
their
owns
like
diverge,
like
a
lot
from
the
sort
of
official
common,
monofin
pong
and
tessellation
algorithm,
so
it's
a
pretty
unique
algorithm.
Actually.
So
now,
let's
look
at
what
things
look
like
when
we
take
the
triangle
view
of
something
that
we've
tessellated,
oh
by
the
way,
I
didn't
I
forgot
to
tell
you,
but
this
this
entire
slide
deck
is
a
rust
program
that
uses
Lyon
to
render
SVG
elements.
B
So
if
I
press
W
I
can
see
the
wireframe
view
I
can
you
know
like
do
this
in
any
slide,
and
it
was
a
terrible
idea,
but
but
I'm
happy
about
it.
Anyways
so,
like
the
in
case
of
maps,
I
think
that's
sort
of
like
it.
I
really
like
this.
This
kind
of
view,
it's
it's
kind
of
fun
to
see
like
how
this?
What
would
we
actually
sending
for
the
GPU
is
those
triangles
right
there?
B
B
And,
and
in
in
this
case,
actually
for
for
the
benefit
of
the
demo,
like
I
was
talking
about
resolution
independence,
but
I
zoom
in
to
things
like
you're
gonna
start
seeing
angles,
and-
and
this
is
supposed
to
be
like
perfectly
round.
This
is
because
right
now
the
only
worked
with
polygons
and
doesn't
work
with
curse,
and
so
in
order
to
render
curves
I
first
have
to
flatten
curves
into
you
know,
a
series
of
line
segments,
and
this
is
deffend
of
the
resolution.
B
So
normally
what
you
want
to
do
is
as
people
zoom
you
let
sort
of
re
tessellate
things
so
that
the
thing
is
always
sort
of
like
nice
and
round,
but
for
the
day,
if
I
did
this
and
then
I
couldn't
I
couldn't
zoom
on
the
demo
and
have
you
like?
Have
a
look
at
the
beautiful
triangles
of
that
ladybird
over
there?
B
So
I?
Actually
I
was
talking
about
about
the
the
filling
algorithm
we
can
do.
The
same
thing
for
strokes.
Strokes
are
actually
like
a
lot
easier.
We
just
follow
the
path
and
insert
a
strip
of
triangles
along
the
thing
and
then
for
joins
and
and
caps.
We
we
just
do
some
specific
distillation,
depending
on
what
kind
of
stuff
that
we
want
to
do.
Lyon
currently
supports
the
typical
things
I
can
do
in
SVG.
B
It's
a
very
simple
extort:
okay,
I'll
go
rhythm
is
very
simple:
it's
actually
something
I
did
more
just
because,
but
I
was
more
interested
in
the
filling
algorithm
I'm
starting
to
run
out
of
time,
so
I'm
gonna
quickly
glance
over
this
this
one.
So
this
is
a
slide
that
I
took
from
a
web
brand
represents
a
shinai
gave
a
little
while
ago,
and
the
main
idea
is
that,
if
we're
gonna
render
things
back
to
front
which
sort
of
makes
sense
from
like
it's,
it's
kind
of
intuitive
to
you
know,
go
through
we're.
B
Seeing
render
things
back
to
phones
so
that
you
don't
have
like
something
stomping
over
there,
something
that
should
be
on
the
front
of
it
right.
But
if
you
do
this,
it
means
that
you're
gonna
touch
pixels
a
lot
of
a
lot
of
times
and
if
you
make
shapes
and
it's
sort
of
wasteful
to
draw
something
and
to
cover
it
in
the
next
in
the
next
roll
call.
B
Leo
has
been
like
around
since
a
lot
longer
than
Pathfinder
actually,
but
the
difference
is
that
Patrick
is
actually
working
like
in
his
like
it
professionally
on
Pathfinder,
whereas
you
know
is
more
of
a
site.
R&Amp;D
project
of
mine,
Pathfinder's
algorithm
is
so
passenger
actually
has
two
algorithms.
B
The
one
I'm
most
interested
in
is
the
second
one,
because
it's
the
one
that's
sort
of
similar
to
that
tries
to
fill
the
similar
similar
initiative
to
what
I'm
doing
in
the
new
and
Pathfinder
actually,
instead
of
generating
triangles,
it
will
generate
what
Patrick
called
what
is
it
colder
this
busy
road?
It's
like
a
strip
like
this,
but
instead
of
having
this
a
quad
shaped
with
straight
edges
on
the
sides,
it
will
actually
handle
curves
on
the
side,
and
so
you
go
through
your
geometry
from
top
to
bottom.
B
B
So
a
shader
is
a
little
program
that
you
run
on
the
GPU
to
evaluate
the
curves,
so
this
different
trade-offs
like
if
you're
just
rendering
polygons
it's
really
hard
to
beat
mu,
because
you
know
is
just
like
doing
exactly
what
GPUs
have
been
doing
since
they've
been
invented,
so
they
are
actually
just
like
using
all
of
the
capabilities
of
the
triangle
rasterizer.
But
if
you
need
to
do
like
a
lot
of
curves
and
have
very
precise,
anti-aliasing
Pathfinder
has
like
more
advanced
solutions.
B
So
I
think
that
you
guys,
if
anyone
wants
to
do
vector,
graphics
in
on
the
GPU,
no
rush,
you
should
check
out
at
both
and
see
what
works
best
for
you.
It's
it
has
like
those.
Those
two
approaches
have
different
trade-offs.
For
instance,
loon
will
generate
like
twice
like
half
of
the
geometry
that
Pathfinder
would
generate,
for
instance,
so
it
has
like
a
different
memory
and
then
performance
trade-off,
but
but
you'll
get
probably
like
nicer,
curves
and
anti-aliasing
and
pipeline
there.
B
So
what
what's?
What's
next
in
leo?
So
lately,
if
you,
if
you're
looking
the
repository,
you
haven't,
been
pushing
a
lot
of
stuff
because
I'm
sort
of
playing
on
my
own,
with
ideas
to
sort
of
advance
the
state
of
the
art
of
motion
isolation
a
bit
further,
so
one
of
the
like
the
biggest
problem
with
monotone
polygon
tessellation
is
that
it
tends
to
generate
those
really
thin
triangles
because
of
the
way
we
we
do.
B
The
the
triangulation
of
the
moment
in
shape-
and
these
thing
triangles
are
not
really
nice
for
you
GPU
for
reasons
that
I
won't
have
time
to
to
explain
here.
But
if
you
do
a
tessellation
that
looks
more
like
this
you're
gonna
get
better
performance.
It's
it's
hard
to
build
an
intuition
of
why
that
is.
B
This
is
like
really
like
research,
research,
research.
This
is
a
hard
problem
and
then
sort
of
going
at
it
and
have
been
going
in
it
for
a
while
and
it's
quite
interesting,
but
it
might
take
a
while
to
complete
before
I
stop
I
just
want
to
give
a
big
shout
out
for
the
19
people
who
contributed
to
the
project.