Graphite is a 2D open source image editing software, like graphics creation software.
And the idea, the end graphite is to be able to parametically design art, so what we do
is that we have like everything is based on a note graph, and in this case we have an arc node,
which then goes and the arc node has a few parameters, we then feed the arc node into
a stroke node, which actually makes it visible, that's the white lines we see there,
and then we can really repeat these to get fancy shapes.
And the idea is that we can change the parameters after the fact to influence how the
artwork looks, but maybe to give you a bit of like rounding what graphite is, this is like
this is from my talk last year, but it's basically a fairly standard editor, you have
a tool shelf on the left, and we have a layer panel on the right, so that's what you would
be familiar with from other software, and we also have a properties panel, which is used to edit
the parameters for the nodes, and we do have a note graph, which you can see here, this
note graph is essentially the same information you have in the layer panel at the bottom
right, but in the note graph you have the ability to use a note more than once, and in the
layer panel that would just be displayed as two copies of the same node, yeah, and you might,
well you see that, well this was the talk for first and last year, this is a new year, and
a lot has changed since then, so like we did a couple of things, we had a major focus on improving
the editor performance, and polishing the editor UX and UI, but another big thing we've been working
on is our desktop app, so graphite has from the ground up being developed as sort of with
the native and desktop philosophy, so currently graphite is only available as a web app, but
all the logic is written in Rust and executed wire back to assembly, using a message passing
interface, not MPI, but like a message protocol for the interaction, and basically the only thing
we had to do to the native is that we run all the note graph and a rendering code natively,
and we only render the UI in the browser, and we do that since like for one graphite in Rust,
the iTunes are not as mature yet, and this allows us to build a cohesive user experience that
works the same across web and native, and some might reject and say, wow, so you just
bundled an electron app or just bundled the web app, but that's actually not the case, so in graphite,
we only render the UI using the browser, so that's the green part you can see here, that is usually
not latency sensitive, and the browser is just a pretty good tool to render your eyes, but everything
that matters is like we render ourselves, and we use a off screen like CF instance to render
the browser UI to a texture, then composite this together in our native app, and I mentioned
that graphite is only available as a desktop as a web app currently, so you might be wondering,
well what's the state of the desktop app, and I can tell you that this whole time,
we've actually been in graphite, we made a small hack to allow it to go full screen and present
slides, so this is our graphite desktop app, and now we will go through a bit like a few more features
that we've worked on in the last year, so one of the things that graphite allows you to do
is to build like parametric designs and procedural designs, so you can see that like as a, this is
sort of grid, and if we look at the no graph representation, we can see that in the bottom here,
this is essentially a grid, so right on the right hand side we, well every node is a function,
so to speak, and a function can be evaluated with parameters, we have these sort of static parameters,
which we can set in the properties panel, so here you can see that we can set some static parameters,
which we can also change parameters at runtime, and in this case we have the instance on points
node on the right, and this instance on points node evaluates everything going into the instance input,
multiple times, so we have a grid at the bottom, that's the grid structure you can see, and we then
evaluate this node chain, this function chain, with the position input, we can then use the
instance position to build the shape, and this is a fairly powerful paradigm because it allows you to
procedurally generate out, and we also take that step further, in the next example, we have
like a snowflake kind of thing, and the graphite consists of two things, it's the editor UI,
and it's the note graph engine, and he can use the note graph engine as a standalone, using for
example the CLI, and in the future we want to build embedded applications where you can just
export a graphite document basically as a shared library and embedded in other applications,
but another part of the experience is our editor tools which allow you to modify the word graph,
so here we have the, we have this star shape, and it looks sort of like a fractal,
and this is just two instances of the same shape copy paste it into each other, so for every end
point of the star we instance a new star, and this gives us this fractal nature, and we can use the editor
tools to manipulate our representation, and we can like you saw the number of points have changed,
we can change the radius, and this allows us to build these powerful procedural effects to get
you nice looking pictures without having to do a bunch of manual effort.
All right, next we'll talk about clipping masks, so let's another new feature we've added,
and with all these features like most of these features, they are just notes, so developing a
feature and adding a feature in graphite is as simple as basically writing a single function, which is
then like which is then turned into a note that you can use in the editor, and clipping is
a feature of the SVG spec, and we try to support most of what SVG supports, and if we
get rid of this text and run simple shape, we can enable clipping, which takes basically the
color information from one shape, and the structure information from the other, and it allows us to
get these fancy effects, and this is compositing only effect, so we don't need to do Boolean operations
so it's also very high performance and easy to do, we can also expand the stroke radius,
and now you can see we have this target we can move around, and again like what you see in the background,
that's just we, and that's all procedurally generated, yeah, now to our next slide, so you can
see this cute little custom item, and this is another example of what you do with graphite,
so this is another note we added, it's the point of position note, and the point of position note
just gives access to the point of position in our document space, and we can then use the point of
position to like offset the location of the eyes, to look at the direction you're pointing
to, and what happens at a more like, this is a very simple note graph, so you can take
a bit of a closer look, what happens here is that we have this left-to-right data flow, which is
very obvious if you look at the slides and look at the note graph, if data going from left
to right, but what is a bit less obvious is the data going from right to left, because every note
is an essence of function, so we have, for example, the transform note, which takes a shape as
input, and outputs a shape, and what we do in graphite actually is that we link these functions
together, so the normalize note is a function, which calls the point of position function,
you can then call the, like, the combined function as one, and the essentially here entire artwork
becomes one, huge function, which you can evaluate with the current viewport position, and in this
case, the current point of position, and the current time, and this is another thing we've added
over the last year, animation, and all of our animation is fairly simple, we just have an animation
time note, which we can connect to, for example, the rotation input, for the transform note,
and this allows us to add animation to lots of artworks without having to build a huge animation
system, so this was very easy to implement, and we have another demo for you, like we can take
this step further, and build something essentially fully interactive, as you can see here,
so the note graph is a purely functional program language, and we don't really have a way of
representing state in the note graph, so you might have seen that even if he doesn't,
and doesn't try to catch the wall, we still don't lose, but I mean, maybe that's just a feature.
All right, another note that was added was the blend shape note, and you can see here on the
left-hand side we have two serve paths, and what we do in the note is we have one note,
which takes two paths as input, or like any collection of paths, and we can then
interpolate between them, and here we can increase the number of interpolations and get this
sort of 3D-looking effect, and you might have seen throughout the presentation, and also
like on the right side, this allows you to do some pretty cool procedure-looking effects,
and if we now, like this does not just work for regular strokes, and for four lines,
we can also use a dashed line, and we can use a dashed line to give you these sort of
interesting looking patterns, which look a bit like aliasing and artifacts, but that cannot be
useful, and one thing you might wonder is, isn't that a very inefficient way of doing 3D rendering,
and the answer to that is yes, but we've spent a lot of time and effort on making
graphite fast enough, so you can do silly things like this, and it still just works perfectly fine.
Another thing we added is the data panel, it's basically a way of
introspecting the data that flows through the note graph, so you can enable this panel, and you
can then look at the vector data that has actually returned from the individual notes,
you can also enter a gate further, look at the nested structure, and this allows you to
take a look at what goes wrong in graphite, because we thought, well, it would be unfair if
artists wouldn't have the joy of debugging code, but it is a legitimately useful tool, especially
if you work on more complex nested artworks. All right, and that essentially,
brings us to our slide, and this is, again, procedurally generated, and if you have, I would
ask you to please scan the QR code and try to give us a star on GitHub, because graphite can do
a lot of things, and potentially, we have in the note graph a note that hypothetically, potentially,
does a web request to the GitHub API, and as you can see, at least one person has already
given us a star, we can take a quick look at the note graph, for that example, so
another one. Yeah, it's essentially just, we do a get request to the GitHub API, and from the
get request, we can then extract the JSON star gases count as, like, from the JSON object that
is returned, and feed that into our text node, and we are, yeah, we're not forming GitHub's API,
it's a throttle to five requests per second, but yeah, this allows us to have a live count of the
GitHub stars, and this is actually a nice motivating factor, and can everyone, I can recommend everyone
to implement something like this, because it's just cool, whenever you open the app, there are a few
more stars, it's just, yeah, a nice motivating. It can also see the QR code, for example,
is, of course, generated in graphite, it's just a note that we use, and we can also use a different
QR code, so this would be the QR code for the graphite website, and, well, that's the joy
of doing live demos. Yeah, but you can theoretically, like, if you would, where to change the text,
you could change this to go to graphite.ard, as you can see on the slide there, and this is also
where you can reach us. We do most of our development coordination on our Discord, but you can also
reach us via GitHub, create issues, and one thing we're looking for in particular is help with
packaging or desktop app, so we're working on, like, we do have a functioning mix bundle, but
other packages would be very welcome. But, yeah, I think we'll end a bit early, so we have more
time for questions, which they are hopefully many. So, thank you very much. Thank you.
So, questions? Okay, can we?
Thank you. Thanks for the presentation. The interactive features are the animation features.
When you export the document, the project, what formats does that export to?
Yes, that is actually a question we get a lot. So, currently, we don't have a native export
for animated pictures yet, so something that would be fairly easy to add is something like give
export. But, yeah, it's not been a focus yet, but this also illuminates another potential
like strength of graphite, because what you can do, and we will work on making that a dedicated
feature is to export the no-graph as a graphite executable within a better render engine essentially.
So, you could, for example, build a game UI in graphite with values driven by a node,
just input into the app, and then you could re-render, like you could render your game UI and
embed graphite into your game engine. That answers the question. Right?
Okay. So, just one of the back. So, they write just the use of I should find in the people what
Hello. I didn't even know about this tool very, very cool. I'm wondering if you are
planning to have some kind of library, so that other applications can render graphite projects.
So, are you asking about whether we have a library so other projects can render graphite documents?
Yes, yes. Yes. Absolutely. For the animation, this seems very cool to be able to embed these things into
other things. So, we do have a, like, we do have a CLI, like basically the no-graph execution engine
is already a library, and you can use, we have two consumers of that library, it's the editor
UI, and the CLI application, but you could use the library on its own to render graphite documents,
and also use the node system to build it, like you could particularly generate,
or programmatically generate nodes, and documents, which you could then render. Does that
answer the question? Yes. So, it seems like it's already possible today.
So, you, like you could, you could today already just use the in-graph execution engine as a
library, and use that in any rust project, and you get a, like a WGPU texture out, which you can then
use in your compositing. Like that is possible, but the user experience is not optimized for that use case yet.
We've got time for more questions in the chat there. Another question is, is our next speaker
already in room? Yeah. Thank you for the talk. I want to ask what, what has been so far
the experience of using WebGPU for, well, both rendering, and also, I guess you could use it for
compute as well. Generally, the experience has been pretty good. So, we took, like on the browser,
we started out by basically just on every frame returning an SVG to the browser,
and using the browser rendering engine to render this, and we also still have that as a default,
and it's like on the browser that's still the default, and we slap that as a fallback.
So, we had, like, gave the WGPU ecosystem more time to mature, but by now, our experience has been
pretty good, and most things just work. Cool. Thank you. Do we have the next speaker in the room?
Thank you. I wasn't sure you understood. Okay. Wonderful. Can we have the big round of applause for
the graph I created? Very nice, specialisation.