SNAPCHAT AR: SHADER GRAPH

November 2019

Lens Studio has been updated to v2.3, and I personally think this is one of its most important updates to date.

The key new feature is the Shader Graph Editor – I got to play around with the beta for a while, and on this page I am sharing my research and basic setups to give you a head start.
My goal will be to demystify the Shader Graph, so you can start playing around in it without having the feeling like things are getting too complicated.

I’m starting off with a basic introduction, then it gets more technical, and at the end you’ll find a long list of downloads to learn from!
For a video tutorial, see Ben Knutson’s Shader Graph Introduction on youtube!

Follow me on Instagram or Twitter to see my most recent work!

Introduction to the Shader Graph Editor

To explain what it is for, let’s start a new Lens Studio project right away.
I will get to the Shader Graph Editor in a few steps, but it’s good to see how to get there first.

 

We’re going to build our own Post Effect in the Shader Graph editor, so we first need to have the basic Post Effect setup.
Make a “Screen Image” object in your Scene, and delete everything else:

 

lens studio tutoriallens studio tutorial

 

 

Then, add a ‘Graph Empty’ material to your Resources.

 

lens studio graph editor tutorial

 

 

If you drag this new material in the Screen Image’s ‘Material’ in the Inspector, it will show up with no options at all. You can’t even choose a texture.
And it only outputs a white color, ’cause we’re not giving it anything to do. This is a completely empty material right now.

 

lens studio tutorial

 

 

To give this material something to do, go to Window > Panels > Shader Graph Editor.
A new window will pop up. Make it full screen, that’s the easiest way to keep oversight when working in this editor.

 

Lens Studio Shader Graph Editor tutorial

 

 

You’ll see this material is not entirely empty – there already is a “Shader” node in it. A ‘node’ is one of these blocks you can drag around in the graph:

 

lens studio shader graph editor tutorial

 

All materials have this Shader node, and they should be the last step in your material.
You should place your other nodes from left to right, so they connect to this Shader node at the end!

 

 

 

 

Let’s build something really simple. For instance, we want to make the material display a texture we can choose in the Inspector.
First, the Shader node needs to be set to “Post Effect” – click on it, then change the value in the list on the right side of the screen. This will tell Lens Studio this material is not for 3D objects, but for Post Effects.

(I will get to 3D shaders later.)

 

lens studio shader graph editor tutorial

 

 

Now we need the texture. This is where we are actually going to lay down the first node! Press TAB to add a new node, and search for “Texture 2D Parameter”. Place it somewhere in your graph.

 

Lens Studio Shader Graph

 

As you can see, the Texture node has a purple square on the right side (with the text ‘Color.rgba’), and the Shader node has one on the left side. If you click and drag one of the squares, you can connect it to the other.

 

Lens Studio Shader Graph

 

This basically explains everything you need to understand about nodes:
a node is a block that takes information (in this case Color, from the texture), it then does something with that information, and exports it for another node to use.
From left to right.
Make sure you always know what kind of information you’re putting into the node, and what you’re getting as a result!

 

 

In this case, the Texture 2D Parameter has the word “Parameter” in the name, which means it gets its information from the user through the Inspector panel.

If you look at the Screen Image back in your project panel, you’ll see there now is an option to add a texture!
By default, if there is no Texture added, this purple/black checkerboard is shown. But you can add any texture to this material you like.
Add the Device Camera Texture, for instance, to get the camera input in your shader!

 

lens studio tutorial shader graph editor

 

 

 

 

 

As you can see when scrolling through the TAB list in the Graph Editor, there are a lot of nodes to choose from.

Most are simple mathematical operations (like Multiply or Add), because that’s what nodes do.
They take information, do some mathematical operation on it, and pass it through to the next node.
“Information”, in this context, means a number. So the color red will be represented by a number (between 0 and 1 – 0 for least red, and 1 for most red),
and the same goes for green and blue.

This is what we’ve got so far: a texture, directly hooked up to a Shader node set to Post Effect.

 

lens studio tutorial shader graph editor

 

 

This gets the texture color information from the Inspector panel, and outputs that as the shader. That’s not very interesting.

The texture data is RGBA data – which is just 4 numbers (for each pixel in the texture): Red, Green, Blue, Alpha (=transparency).
Since they’re just numbers, you could, for instance, multiply this texture by another number, which will change the brightness of the image.

 

Add a Multiply node to this graph. You can hold shift and drag it on top of the line to make it connect automatically.

 

Lens Studio Shader Graph Tutorial

 

 

This node multiplies by 1 by default, which means nothing changes. (Don’t worry, this is as mathematical as this tutorial will get.)

Now, add a Float Parameter node. The Float Parameter is a node that generates a number. The number can be chosen by the user from the Inspector panel.
All “Parameter” nodes are green, which is an easy indicator that these get their information from the Inspector panel back in your Lens Studio project.

 

Lens Studio Shader Graph Tutorial node

 

 

Maybe you have already noticed that this Float Value node only outputs a data type called ‘x’ (and it is red instead of purple). Fortunately, Lens Studio does not care about different kinds of data.
If you multiply it, it will simply convert it or change the input of the node. In this case, it is changing the input of the Multiply node as soon as you connect it (notice how it changed from B.rgba to B.r in the Multiply node).

It does not matter that the line is going from ‘x’ to ‘r’, by the way. They are both just one channel of information and the letter it gets makes no difference to how it is calculated.

 

Lens Studio Shader Graph Tutorial parameter

 

So what does this setup do?
It multiplies all channels of the first input of the Multiply node (r, g, b, a) with the single channel of the second one.

Click on the Float Parameter node and change its Title on the right side of the screen so you can find it in the Inspector.
I called it ‘Exposure’.

 

Shader Graph Lens Studio Explained

 

 

When you click on the material in your Resources panel back in your project, you will actually see this ‘Exposure’ value with a custom number next to it! This will now change how bright the shader is.
In my case, I added the shader to a Screen Image component in the Scene, and then used the Device Camera Texture as Texture input.

What’s happening here is that each pixel gets a value from the Texture, and that value is then multiplied by your number (which changes its exposure). And that resulting value is shown in this Post Effect.

 

 

Shader Graph Lens Studio Explained

 

 

 

See Accessing materials through JavaScript if you want to change this exposure value with your own script!

 

 

 

 

Some nodes have complete effects built-in already, like the Sepia node. If you replace the Multiply node with that one (and hook up the Float Parameter to the Sepia’s Amount input), it will instantly give you the sepia colors of the Texture (and you can still use the Exposure parameter to change it! Maybe change the title of that Float Parameter to “Sepia Amount”).

 

Shader Graph Lens Studio Explained

 

 

Shader Graph Lens Studio Explained

 

 

 

 

This example project can be downloaded all the way at the bottom of the page. I did make it a bit more advanced, so go check it out and see if you can figure out how it works!

Accessing materials through JavaScript

All green ‘Parameter’ nodes in the Shader Graph can be accessed using code! Which is great, because you can use that to animate your materials, or make them interactive.

 

If you want to access a float value in your material with the title “Exposure”, make sure you know the “Script Name” value for the parameter node (which is right below its “Title” value).

This is where you can find the Script Name:

 

Shader Graph Lens Studio Explained

 

So in this case the Script Name is set to “Tweak_N2”. Let’s change that to “Exposure” to make it more readable!

Then, you can then get/set its value with this code, where “Exposure” is the Script Name of the Float Parameter. This will set it to a value of 5:

 

 

The only input required for this script is the material itself

 

You can also change it up a bit, and ask for the Mesh Visual component that has this material on it instead:

 

 

 

 

 

To animate it, the easiest way that does not require any maths would be to use Tweens!
You can use the Tween Value script (or multiple, using the Tween Chain), and apply its resulting value to the material.

This ‘Balloonify’ material is a good example of how Tweening helps make things look smooth:

 

lens studio vertex displacement shader graph

 

 

To download the project files for this one or for other Shader Graph examples, see the downloads down below!

Vertex displacement

Dislacement

 

 

Vertex displacement is the best. It lets the Shader drive the position of each vertex on the mesh, which can give you this kind of result:

 

 

 

 

 

 

I’m going to start right away with a demonstration. We’ll be making a wobbly sphere, like the example above.

Make a sphere in your scene, and add a “Graph PBR” material to it (which you can make in the Resources panel).
The Graph PBR is simply a preset of a Shader Graph material that already has the right nodes for the main textures, so we can skip the boring stuff and get straight to displacement.
You should start off with this preset of a sphere:

 

lens studio shader graph tutorial

 

 

Open up the Shader Graph panel. Move all the texture stuff out of view – we need some space to work. Do keep it connected, though.

 

lens studio shader graph tutorial

 

 

As you can see in the Shader node, there also is a World Position (Vertex) input. That’s what we’re going to be working with.
Since these are absolute world position values, it means the values are not relative to the mesh. For instance, giving it a value of 0 will make the object invisible (since all vertices will then be at the same position: [0, 0, 0]).
To make the mesh wobble, we will need the current vertex position first. The wobble needs to be added on top of that.

You can get the current vertex world positions with the node called ‘Surface Position’. Connect it to the World Position input in the Shader node, and nothing will change. Which makes sense – you’re giving it the same information it already had.

 

lens studio shader graph tutorial

 

 

Now we can add any values to this Surface Position we like!
For instance, if you make an Add node, connect it to this line, and connect an ‘Elapsed Time’ node to the second input of the Add node:

 

lens studio shader graph tutorial

 

 

The sphere will now slowly move up, to the right and towards you. In a diagonal direction. Change the Multiplier parameter in the Elapsed Time node to make it go faster or slower.

How does this work? And why is it moving diagonally?

 

lens studio shader graph tutorial

 

 

The Surface Position data has 3 dimensions: x, y, and z. If you add one-dimensional data from a node like the Elapsed Time node (which outputs a number in seconds) to all of those values, they will all go up.

A positive number on the X-axis is going to the right, one on the Y-axis is moving up, and one on the Z-axis is pointing towards you.
If you get all three at once, it means it will diagonally point in the combined direction of up, right, towards you.
So to make it move away, to the left, and downwards, diagonally, you’d simply have to multiply the Elapsed Time node by -1.

The reason I am explaining this behaviour, is that it will be coming back later. It’s a side effect of working with three dimensions.

 

If you want it to move on the X axis only (left to right), you could add a ‘Combine’ node between the Elapsed Time and the Add.
Only connect it to the x input of the Combine, so the y and z will stay at 0. The ‘w’ can be ignored for now.

This way, only the X-axis will receive that value from Elapsed Time. The other two will remain at their original position!

 

lens studio shader graph tutorial

 

 

 

 

Now we’re going to generate that wobbly randomness, using a Voronoi noise node.

The Voronoi Noise node generates a random pattern, based on the seed you give it. In the case of 3D models, you can give it the UV map of the model!

Temporarily connect the Voronoi Noise node to the Shader color input – that way you can see what’s happening!
Also, connect the Seed input to a ‘Surface UV Coord’ node, which gives the object’s UVs.

 

lens studio shader graph tutorial

lens studio shader graph editor explained nodes

 

That’s looking pretty good. You can even connect that Elapsed Time node to the Offset input of the Voronoi Noise, so it will be animated!
Of course, we will be using this in the Vertex Displacement later. But for now, let’s keep it visible by having it connected to the Shader color.

 

 

 

The next step in making a wobbly sphere is making this noise work in both directions.

We want the wobbles to go inwards and outwards the sphere, which means the noise values will have to go into negatives as well.
Right now, as is the default, the Voronoi Noise is only giving values between 0 and 1 (black and white). We want it to be -1 to 1, so it moves in both directions.
To remap these values, simply add a Remap node and set it to Range In: 0 to 1, and Range Out: -1 to 1.

 

lens studio shader graph editor explained nodes

 

 

Now, the noise is ranging from -1 to 1, which we can’t really see in the Preview, since 0 and everything below it is shown as black.
Let’s reconnect the PBR node that was already there to the Shader color input.

 

lens studio shader graph editor explained nodes

 

 

Now, let’s add that Surface Position node to the output of the Remap node (so the noise is added to the mesh), and connect that result to the World Position (Vertex) input of the Shader node!

 

lens studio shader graph editor explained nodes

Shader Graph Lens Studio

 

The result in the preview is barely visible, but it is there. To make it more extreme, add a Multiply node with any higher value in it (I use 30) directly after the Remap node (before the Add node):

 

lens studio shader graph tutorial

 

 

Now you can really see some animated displacement!

The last thing we need to do, is to get rid of that diagonal direction in the displacement.
This is, like with the example I showed earlier, caused by having the same value added in all three axes. In this case, that value is the Voronoi noise.
It is the same in all three directions, so let’s create three different versions for it!

 

Copy the Voronoi Noise two more times, and connect the Surface UV node and Time Elapsed nodes that were already there to those new ones as well.

 

lens studio shader graph editor explained voronoi noise

 

Next, we’re going to need some variation. For the second Voronoi Noise, place an Add node between it and the Elapsed Time node. Enter some random, high value (like 1000).
Now do the same for the third noise, but make it even higher (2000).

 

lens studio shader graph editor explained voronoi noise

 

 

All three noises will now be different values, but how do you join them together into one stream of data that we can plug into the Remap node?
That’s what a ‘Combine’ node is for. Plug all values in their respective input in the Combine, and you’ve got it bundled up for Remapping. And that’s it!

This, by the way, is a basic version of what’s going on in that Triplanar Noise subgraph you can find in all those preset materials from the Material Library!

 

Shader Graph Lens Studio

 

 

 

You can actually preview this noise, which is a cool looking effect in itself. Temporarily connect the output of the Combine node to the Color input of the Shader node, and you’ll see this colorful, animated texture.
I turned down the value in the Multiply node a bit, too, just to make it look better.

 

 

 

 

 

 

Now that the displacement works, we want it to be more customizable! For instance, the Scale input (xy) in the Voronoi Noise nodes should be exposed in the Inspector, so you can play around with the scale (in both directions, x an y, separately).

To do that, add a Float Parameter and set it to Channels: xy, Title: scale,
and connect it to all three Scale inputs of the Voronoi nodes. You can now change the noise scale from the Inspector!

Keep in mind that this Lens Studio default Sphere object only has a certain amount of vertices in it – if you want a higher resolution for displacement, you’ll have to make your own mesh in another 3D software.
Or download my high res Sphere object down below.

 

Lens Studio Graph Editor Shader MaterialLens Studio Graph Editor Shader Material

 

A good exercise would be to try and make another parameter that gives you the option to set the overall noise displacement amount!
It’s not a very difficult challenge, but it’s a good check to see if you understand how this works. I have added this parameter to the download for this project file down below!
In this download, the Sphere mesh is also of a much higher resolution to make the distortion more visible. This mesh can be downloaded separately at the bottom of the page as well.

 

 

This distortion method is fine for most meshes, but if you are working with a sphere, you will see a hard line in your displacement (depending on the scale of the noises):

 

sphere noise problem line

 

To learn about why this is happening – and how you can fix it – check out the section Triplanar noise & Voronoi on spheres.
In that section, I will explain what the Triplanar Noise subgraph does, and I will demonstrate how to make your own version of it that uses Voronoi noises.
It will be slightly more complex, so you’ll need to understand this section first before diving into that one.

 

This new Triplanar Voronoi subgraph will also be included as a material in the download for this wobbly sphere!
This is what the seamless, more organic Triplanar Voronoi noise looks like:

 

 

 

 

Please keep in mind that there are many ways to get a cool looking distortion effect. You don’t have to closely follow this tutorial – in fact, in the case of a spherical mesh, it is probably better to not have three different Voronoi Noises and instead multiply one noise value by the Surface Normal directions!
This way, the mesh will still be wobbly, but only in the direction of the normals. Which makes it look more like it’s boiling and less like it’s just randomly moving around.

You could also use a Simplex noise instead of a Voronoi one, which will give you a result closer to the ‘Jello’ material in Lens Studio’s Material Library!

 

 

 

 

 

I have made an example PBR Graph Editor material that you can download at the bottom of this page,
it’s called ‘Displacer’ and it is like a standard PBR material except it has a bunch of Vertex Displacement options in it!
Opening it in the Shader Graph is also a great way to learn if you’re new to it.

 

This is what Displacer’s material options look like:

 

lens studio displacement material PBR

 

 

 

All parameters in this material are easily accessible via script. Using a simple script to modify the Distortion along Normals could, for instance, be used to make this ‘balloonify’ setup (project file download at the bottom of the page):

 

lens studio vertex displacement shader graph

 

 

 

 

 

 

 

Projections

 

 

And now for something completely different: projection distortion.
I will be demonstrating how to make the following surprisingly simple effect
(again, project files can be downloaded at the bottom of this page).

 

 

 

This effect is setup the following way:

First, there’s a plane with a high vertex count.
The Device Camera Texture (the video coming from the user’s phone) is then ‘beamed’ onto that surface, from the perspective of the virtual camera.
Then, the plane is distorted while still having this texture on it, and rendered on top of the camera input.

 

 

Let’s start with step 1! Go get that high resolution geometry. The default Lens Studio plane is not good enough, since it only has 4 vertices. We’ll need something closer to this:

 

lens studio projection

 

Make one yourself in a 3D software, or get it in the download for this demo down below!

Now, to set up the scene, add the Plane object and add a Device Camera Tracker to the camera.
You should see the purple checker board on the ground at this point.

 

Lens Studio tutorial projection

 

 

Next up, we’re going to make an Empty Graph material and give it a Texture node. Connect the Texture node to the Shader.
If you then apply this material (I called it ‘Distortion’) to the plane, you can give the plane a texture.

 

Lens Studio projectionLens Studio tutorial projection

 

 

Sadly, though, when you apply the Camera Device Texture to this Texture input, the camera input is not properly skewed. It looks like this:

 

Lens Studio tutorial projection

 

Which makes sense – it’s just displaying the camera texture as a flat image on the plane.
We want it to be projected (‘beamed’) from the virtual camera position from where we’re looking at it.
So, every frame, the Plane should update its UVs to make the texture seem flat and aligned to the phone screen, when looked at it from the virtual camera’s perspective.

This little bit of code can do that:

 

 

Just put this in a Script file and place that on your Plane object.
You then have to select the Mesh Visual called ‘plane’ and the Camera called ‘cam’ for it to work, but this should not be too difficult since there is only one of them each in your scene.
Set this script to ‘Frame Updated’ and the plane will seem to disappear!

It did not actually disappear, but its texture is exactly the same as what’s behind it. So you don’t see it. If you don’t believe that, you can temporarily set the script to ‘Tapped’ and see how it actually updates its camouflage every time you tap the screen!

 

 

Now we can go ahead and distort this plane using the Shader Graph!
I’m going through distortion one more time here, but keep in mind that there are a billion different and cool kinds of effects you can make with this,
so this tutorial is giving you more of a head start than an actual final result.

 

Just a quick introduction to vertex displacement: there’s X, Y and Z information going in that Shader node, and all three are just numbers.
I only want the Y number to change, because Y is the up/down axis and I want that to happen.
To demonstrate what changing the Y value does, place a Surface Position node and connect it to the Shader.
Now, split it and recombine it again. This will give you control over all three axis separately.

 

Lens Studio tutorial projection

 

 

You can now, for instance, add an Add node to the line of the Y-axis, and enter some random amount. I used 100 as the value to add.

 

Lens Studio tutorial projection

 

 

As you can see, the entire plane is going up and it is taking its contents along with it. Those squiggly stretching lines you see are just the last known pixels to this material stretching all the way to the end of the plane, as it doesn’t know what those values are (the Device Camera Texture has reached its end at the bottom).

 

Get rid of the Add node, and grab a Voronoi Noise node instead! Throw the Surface Position in its Seed input, and multiply the noise by something like 100. You’ll now see these waves.

 

Lens Studio tutorial projectionLens Studio tutorial projection

 

 

Why waves?
The world space position we’re using for the Voronoi Noise is xyz, while the seed input is only xy. This means the z information is not used for seeding the noise, and you can see that in those waves as they’re not changing in the z-axis (away/towards you)!
On the other hand, the Y axis is used, but is totally useless since the plane has the same Y value everywhere.

So we need to swap the y axis with the z axis before it goes into the Voronoi Seed input.
Grab another Combine node and wire it like this:

 

Lens Studio tutorial projection

 

As you can see, I reused that Split node that was still there. No need for making a node if it already exists.
Sidenote: you can also use the Swizzle node for this. Set it to ‘xz’

This channels the z output of the Surface Position to the y input of the noise seed (and it leaves x intact)! Now, the noise will be properly wavy:

 

Lens Studio tutorial projection

 

 

Dial down the Multiply node a bit, and add an Elapsed Time node to the Offset input of the Voronoi noise. This will make it animate, which looks way cooler.

 

 

 

The scaling of this noise is not right yet, though. By default the Voronoi Noise scale in the node is set to (10, 10), but because we’re working on quite a large scale I’d just go down to something like (0.018, 0.018). That looked right for me.
You can always plug the output of a node into the Color input of the Shader node to see what it looks like!

 

The only annoying thing left is that there are no smooth edges. Because of that, you can still see this pixel stretching at the bottom, and the end of the plane is clearly visible.
To fix that, we need to tell the Voronoi Noise to smoothly lower its output value as it reaches an edge of the plane.

We can find the edges of the plane using a Surface Position node like the one we already made earlier, except you’ll need to make a new one as its ‘Space’ setting needs to be set to ‘Object’ this time (instead of ‘World’).
Plug it into the color of your shader to preview it – this is the data it is giving us:

 

Lens Studio tutorial projection

 

This is actually really useful, as it gives us a value of -1 to 1 in each direction.
Red -1 is left, red 1 is right (x-axis).
Green -1 is down, green 1 is up (y-axis).
Blue -1 is near, blue 1 is far (z-axis).

We don’t see the green one, as the plane is exactly at position 0 in height.
And the waves don’t count, because they’re calculated after this Surface Position node is getting its data.

 

 

In order to tell the noise to be at its strongest in the middle and weaker as it reaches one of the edges, we need to multiply the output of the noise by a map of the plane that has a value of 1 in the middle and a value of 0 around the edges.
Believe it or not, but we’re actually almost there. Think about it this way: the red channel is already doing a smooth ramp towards the edge on the right. It’s just doing the same but in negative values on the left.
Split this Surface Position output into three different channels, and only plug the red into the color. Now, add an ‘Abs’ node in between. That already is a ramp going from 1 to 0 to 1, indicating edges from left to right!

 

Lens Studio tutorial projection

 

That ramp on the left is nothing new, it’s just the negative values inversed so they’re above 0 and thus visible (which is what the Abs node does).

Now, do the same for the z channel (which is blue), and add them both together:

 

Lens Studio tutorial projectionLens Studio tutorial projection

 

 

Look at that! The middle is dark, towards the edges it gets brighter! Because both edges are overlapping, the values will get really bright (with values over 1).
Add another Add node to this, and set it to -1. That way, we can be sure that the maximum value will be 1.
(since, without the added -1, the maximum value of both edges combined is 1 + 1 = 2. And 2 minus 1 will get us back to 1. Quick maths.)

One last thing, the colors are inverted. White means higher values, which means more noise. And we want the most noise to be in the middle and not around the edges.
So add a ‘One Minus’ node (which is literally a node that does ‘1 – value’) to invert these colors.
Now there’s white where the noise should be, and black where it shouldn’t be.

 

Lens Studio tutorial projectionLens Studio tutorial projection

 

 

The output of the Texture node can be plugged back into the Color input of the Shader, and the One Minus node should be multiplied by the noise output.

Add a ‘Clamp’ node between the One Minus and the Multiply node, since the One Minus will probably create lots of negative values we can now simply cut off (which is what Clamp does).
You don’t need to change any settings of the Clamp node; it’s already set to clamping everything that’s not between 0 and 1.

This is our final graph, and the noise should now only be visible in the middle of the mesh!

 

 

Lens Studio tutorial projection

 

 

Download at the bottom of the page!

Face Mesh distortion

 

 

Now that we have looked at vertex displacement and UV projection, we can combine these two features with the new Face Mesh.
You can make weird face distortion effects like these with it:

 

 

 

This is built entirely using the same techniques as mentioned in Displacement and Projections, except the mesh is now the new Face Mesh object!

 

lens studio face mesh

 

 

When working with the front facing camera and doing vertex displacements, make sure to add a Device Tracking component to your camera!
This will use the gyroscope to figure out the rotation of the phone, and it will prevent the vertices on your mesh from rotating along with the camera when you’re changing their positions in the Shader Graph editor using their World Position.

 

lens studio device tracking

 

 

The Face Mesh can be used like any other mesh, meaning the snap() function in JavaScript and the vertex displacement in the shader graph will both work!
The project files for this particular example (‘Face Glitch’, link to lens here) can be downloaded at the end of the page.

Feedback loops

This section is not about Loop nodes – see the Useful tips & tricks section for that!
Instead, I will show some techniques you can use for iterating over the same image, commonly called a ‘feedback loop’.

It means you take the result of your first iteration, and plug it back into the new one. Over time, it can create complex effects that look really cool if done right!

 

Still working on this, sorry. It’ll be cool though. Stay tuned.

Triplanar noise & Voronoi on spheres

triplanar voronoi noise subgraph

 

Click here to download the Triplanar Voronoi Noise subgraph and an example project.
Or keep reading to see how it is made, and why it is a good alternative to the built-in Triplanar Noise!

 

 

Spheres never have perfect UVs (because of the map projection problem, like with maps of planet Earth).
So, at some scale, there will always be an inaccuracy in the texture or shader you apply to it – the UVs will simply never be precise enough.

But an even bigger problem arises when using noises on spheres: The UVs of the mesh are not a closed loop, even though the mesh is.
Meaning, the UVs go from 0 to 1, and then somewhere on the mesh there’s a hard edge going back to 0 on the UVs.
Which looks like this:

 

sphere noise problem line

(Image of a Lens Studio default sphere with Voronoi noise applied to it, using the Surface UV Coords as its seed.)

 

This is normal behaviour for spheres – they have to have a cut somewhere if you want the texture to not look stretched.
To better understand that, look at the UVs of a sphere:

 

lens studio sphere uv triplanar noiselens studio sphere uv triplanar noise

 

It might look good on the sphere, but at one point the numbers 7, 8, 9… have to go back to 0.
When generating a noise, it uses these UV coordinates to determine the noise shape – which means this cut back to 0 will give a hard edge.

 

 

So how do you add a noise to a sphere?

 

The Triplanar Noise subgraph (used in some Material Library materials, like ‘Jello’) doesn’t seem to have this problem, but it is not working with Voronoi noises.
Instead, it uses the Simplex noise.
Let’s look at how this Triplanar Noise subgraph deals with the UV problem first, before we make a Triplanar Voronoi Subgraph!

 

The Triplanar Noise subgraph (screenshot below) uses the Object Space Surface position, so it ignores the UV coords entirely.
This is why there is no visible seam: the Object Space Surface Position is a gradient in all 3D directions that goes on forever. Not just 0 to 1 mapped to the mesh.

 

triplanar noise lens studio

 

 

Then, it uses 3 different noise nodes to get a noise value for each direction (x, y, and z).
These are averaged (added together and divided by 3), in order to get the final value for this noise.

The problem with this approach is that in each individual direction, stretching will occur (because the noises are only projected from one plane each time).
This is what the three noises in the Triplanar Noise subgraph look like individually for respectively x, y, and z:

 

noise x sphere uv

noise y sphere uv

noise z sphere uv

 

 

This means that, when the values are averaged, these stretches will not entirely disappear. They will still be in there, just less visible.
And the resulting values will be much softer and washed out, because every pixel is the average of three different values. This is the final Triplanar Noise output:

 

noise triplanar sphere uv

 

 

For the ‘Jello’ material in the Material Library, this is totally fine. But if you want to make a more stylized type of noise on a sphere, it will be pretty difficult to change the look of this.
Also, since the Simplex noise does not have an ‘offset’ value, the only type of animation you can do with it is a 3d translation. This can be done in all 3 directions, of course, but it still does not look as organic as the Voronoi offset.
This means the ‘Jello’ material is not really having an animated distortion – its distortion is static, but moving through space (all three noises individually, before being averaged together).

If you look at its noise, you can see it’s only doing these stacked translations blended together, and not an actual animation.
The first gif is of the Triplanar Noise, and the second one shows the Offset animation on a Voronoi noise:

 

 

 

The Voronoi has a much nicer distinct animation type to it, because the patches in the noise are moving individually. But then again, this Voronoi noise still has that line running through the sphere (on the backside of it), because of that UV problem.

 

So how do we get an animated Voronoi noise that’s actually seamless on the entire surface of the sphere, without stretching?
This is where that ‘offset’ value of the noise comes in handy.

We will project individual Voronoi noises onto the mesh from three axes,
using the offset for the remaining axis for every projection, and multiplying those results together. This will keep the shapes intact without stretching, and it will be seamless.

 

Before I start explaining that, let’s first look at the end result for this new, Voronoi-based, seamless noise on a sphere (two different scales):

 

 

 

As you can see, that typical Voronoi style is still in there.
It changed a bit because all three axes are multiplied together, but it still looks much more organic than the original Triplanar noise.
Of course, the style you need is completely dependent on your project, but it’s nice to have the choice.
For comparison, this is the Triplanar Noise:

 

 

 

 

The Triplanar Voronoi subgraph I am going to be making here can also be downloaded at the bottom of the page, including an example project!

 

To start off, make three individual Voronoi noises based on the Surface Position (object space) – make sure to use the Swizzle node to change the incoming seed axes for each of these noises.
This means, for the xy-plane, make a noise like this:

 

lens studio triplanar projection voronoi

 

 

Do the same for the other two planes (xz and yz in the Swizzle), and check that the three individual noises look like this on the mesh:

 

lens studio triplanar projection voronoi

lens studio triplanar projection voronoi

lens studio triplanar projection voronoi

 

 

 

To get rid of the stretching, the offset should be wired to the one axis not used for each noise.
So make another Swizzle and give it the one letter of ‘xyz’ that’s not in the first Swizzle:

 

voronoi noise offset seed

 

 

 

This way, two axes will show a normal noise, and the third one will leave a trail of this noise in depth (which is what the offset does). This is best displayed on a cube:

 

 

 

To get this animated result, make sure you add a Time Elapsed node to the value that goes into the Offset of the Voronoi noise. And set a custom Scale in the Voronoi noise.
Multiply the Offset input by the same value as the noise scale, but also multiply it with another value that makes it look less stretched. A factor of 10 is ideal.

This is what the graph looks like after these changes:

 

voronoi noise offset

 

 

Now, we’re gonna wanna make this work in all three directions. So copy the Swizzles twice, plug them in to the other two noises, and add random big numbers (like 1000 and 2000) to their seeds. This will make sure we don’t get any visible repetition.
Multiply the noises together, and that should be all! The graph is too big to show on a screenshot, but you can download the subgraph and check if out for yourself! (Example project + subgraph with comments!)

I also added some other features to it, like switching between seeing the noise or the cells output. And quick customizations to the noise, like brightness and offset, which saves some time when you’re working with it.

 

Here’s a demo of what the Triplanar Voronoi can do, applied to the vertex positions (along normals).
This Lens Studio project file is included in the downloads down below, as well as the subgraph file!

 

 

Useful tips & tricks

Oversight

 

 

Node graphs easily get messy. Here are some tips on keeping them under control:

 

 

If you have a lot of lines in one place, you can click and drag on the lines to make an elbow in it! It’ll help with not getting everything tangled.

 

lens studio shader graph tutorial

 

 

 

Use comments! It’s just like with programming – after a while, you won’t remember what everything was for, and you’ll really thank past-you if they had used comments.
You can make a comment via the TAB menu:

 

lens studio shader graph tutorial

 

 

 

And always keep a lot of distance between nodes. Enough to be able to place another node in between them, without having to rearrange your whole graph at a later time.

 

lens studio shader graph explained

 

 

 

 

Use ‘P’ to give a selected node a preview thumbnail.

 

 

lens studio node preview

 

 

 

 

 

Loop nodes

 

 

Loop nodes are a great way of telling the shader to do the same thing over and over again, and collecting all those results.

I’ve made a material that blurs an image using a Loop node, which is way too slow to actually use in real life.
So what we’re about to do is totally useless, but it is a good demo for the Loop node. This will be the end result of this Post Effect:

 

lens studio shader graph loop

 

 

We need to start with a Shader (Post Effect), and a texture parameter.

You could also get a Screen Texture node instead of a Texture Parameter, and use the Texture Sampler to get the current texture from the screen. This way, it’d be a real Post Effect that applies the effect to whatever is underneath it. I have included this option in the download down below, but for now I’m going with a Texture Parameter.

Set the Texture coords to ‘Custom’! We’re going to mess up those coords.

 

lens studio loop tutorial

 

Coordinates are like the UV map in 3D models – they tell the material where to place the texture. So let’s give it a Surface UV Coord (0) node.

There also is a Surface UV Coord (1), but this is only used when you have alternative UVs in you mesh or something like that. Not important for now.

 

lens studio loop node explained

 

Search for a node called “Scatter Coords”. This will literally make a mess of your coordinates, which is kind of what we want. It already looks a little bit like a blur, except the displacement is way too sharp.

 

lens studio scatter coords

Shader Graph loop scatter coords

 

 

We basically want it to do this, but like 40 times. And then get the avarage result for that. That’ll make it look like a blur, without the sharpness of the displaced pixels all over the image.

You could manually copy the whole setup 40 times and connect them all to a node that takes the avarage at the end, but that would be way too much work. The loop node is going to save time here, just add it after the Texture node like so:

 

Shader Graph loop

 

As you’ll see in the node settings, the Loop Mode is already set to ‘Avarage’ by default. And Iterations is set to 4.
This means it does the same thing 4 times and takes the avarage of all results.

But something is still missing, since all 4 loops are exactly the same right now. We need it to make variations for each loop, which is what the Loop Iteration node is for. Connect it to the Scale parameter of the Scatter Coords node.

 

lens studio scatter coords

 

This means on the first loop, the Scatter Coords node will have a scale of 0. On the second loop, the scale will be 1. On the third, it’ll be 2. It’s adding one for each loop.
Add a Multiplier with a very low number (like 0.1) right after the Loop Iteration node to make the increments a lot smaller.

And connect the Loop Iterations to the Scatter Coords Seed input as well! We don’t want it to use the same seed for every loop.

 

Shader Graph loop scatter coords

 

 

 

The last step is to increase the amount of loops! It will scatter the image just a little bit per loop and take the avarage of all loops, which means that the more loops you have the blurrier it gets.
You can also change the scaling (that Multiply with a value of 0.1) to change the blur size.

For good blurring quality, it should loop at least 40 times. Which makes it way too slow for the avarage phone. But hey, at least you now know how to use the Loop node.

 

 

 

 

 

Bool groups

 

 

If you’re working with Parameter nodes (which give you UI elements in the Inspector to use), it’s nice to keep that user-friendly and clean.
A good way to categorise these parameters is by adding them to so-called Bool groups. This will only show the parameter when a certain bool is set to true, like so:

 

lens studio tutoriallens studio shader graph

 

The Bool Group Parameter node (with the title “Custom Texture”) drives the Switch node, and the Texture 2D Parameter is set to this bool group.
Which means that, when the user has disabled the bool, the texture input will be hidden.

 

lens studio shader graph

lens studio shader graph

If you have any questions/suggestions, let me know!