Shader Graph & AR Core
In the second year of my study, there was a course where I could choose my own learning outcomes and learn about a topic that I find interesting. The first learning outcome I chose was Unity Shader Graph and the second outcome is AR Core.
In computer graphics shaders are small programs that run on the graphics card. They are used to ”shade” 3D models. Nowadays shaders are used for a lot more applications besides shading objects. Shaders are usually written with code, but Unity made a new tool called ”Shader Graph”. This new tool can be used to create shaders visually with node-based scripting.
Note-based scripting can be used to connect nodes to each other to modify data. Each node can be seen as a little machine: you provide the machine with some input, the machine will modify your data and outputs your new data.
Before this course, I had never really worked with Shader Graph before. I started by downloading the Unity Shader Graph example package. I started analyzing how each shader worked, and I tried to understand what each node in the graph did. After that, I watched a few YouTube videos and then I quickly started to play around with Shader Graph myself. Playing around with Shader Graph myself was the most effective way to learn. I also quickly realized how easy the YouTube videos seemed but how difficult it actually was to get your desired result. Shader Graph really is a tool that takes a lot of practice before you get good at it.
After I felt comfortable with the tool I started to work on some shaders. Here are all the shaders I made:
1. TV Static noise
This is the first shader I made: some good old static noise. It’s basically just a gradient noise with a large scale that rotates it’s UV over time.
2. Automatic Tileable texture
At the time I was also working on a procedural city generator, so I thought it would be useful to have a shader that automatically tiles a texture on an object. For example: put a brick or window texture in the shader and it will automatically tile the texture based on the object’s scale.
My goal was to create a portal shader. I achieved this by using the Polar Coordinates node. This node translates a UV to polar coordinate space and this is what causes the “tornado effect”. By putting in different textures some really awesome results can be created.
4. Flower Generator
I was playing around with the fraction nodes to get a better understanding of them. At this point, I kind of created the flower shape by accident. I really like how this shader turned out.
5. Psychedelic Circle
My favorite nodes in Shade Graph are all the noise nodes. So many fun things can be done with noise, especially when noises are combined! The twirl node makes the circles look really abstract and this inspired me to give it a psychedelic feel.
6. Psychedelic Mandala
I’ve got to admit that at this point I almost got lost in the world of psychedelics… But again, noise is really fun! This shader is mainly a mix of the previous psychedelic mandala and the portal shader.
7. Texture Warp
Yes, I made another psychedelic shader…
Now I really wanted to challenge myself. Most of the previous shaders were created by playing around with different nodes, but this time I wanted to set a goal before I start making a shader. My goal was to make clouds. For this shader I used Vertex displacement, this means that I do not only manipulate the texture of the object but also the shape of the object itself. The Main layer in the shader creates the overall shape of the cloud and on top of that the Detail Shape is added which makes the clouds look rougher. The output is used as a height map to displace the vertices of the 3D object. With a primitive cube this shader wouldn’t work because it doesn’t have enough triangles. The more triangles the object has, the more detailed and smoother this shader will look. The 3D object used in the video is a plane that’s subdivided 100 times.
I did the same process again. I set a goal before I started to work on the shader: I wanted to create a lava flow shader. The Rotate points, colorize and emission elements are the same as in the cloud shader. The Radial Shear node in the graph causes the “Lava Flow” effect, it makes the lava flow in a non-linear direction which makes it a lot more interesting to look at.
AR Core is an Augmented Reality development kit made by Google. AR Core has all the basic functionality that’s needed to create mobile augmented reality applications. I wanted to create a shader showcase app where I could showcase all the shaders I made with Shader Graph. Quickly after I downloaded the sdk I discovered that AR Core doesn’t support the Lightweight render pipeline (LWRP). To use Shader Graph you need to use the LWRP or the High Defenition Render Pipeline (HDRP), which is also not supported.
So I changed my goal a bit. I saw a video of the Oculus Connect 6 conference where they handed out paper badges that can be scanned with an augmented reality app to see a map of the building. This inspired me and I came with the idea to make my own Augmented Reality Business Card. I wanted to create a business card that comes to life when you scan it with an augmented reality app.
Before I started to develop the app I first wanted to try out all the possibilities with AR core, so I made a few small prototypes. The hardest part about getting AR Core to work was actually setting up the Android SDK and JDK. When I had a basic understanding of AR Core, I focused on designing my business card. I made multiple designs and asked feedback from family and friends and this is the result.
Now I could start working on the application. I used the Augmented Image scene as a template. You can really easily add images to the AugmentedImage-Database, all the images in the database will be recognizable. I set up a prefab with the business card and I added a rotate animation. I also created a word-space based particles. By setting the particles to world-space a really realistic effect is created, because the particles move independently from the AR image and prefab.
AR Core gives each image a quality score on a scale of 0-100 based on how trackable the image is. Images with less repetition have a higher quality score. Since a business card is not a real photo but an abstract piece there is a lot of repetition in it. I got a quality score of zero but I tried it anyway. Even though the score showed a low quality, the tracking still worked pretty well and I am really satisfied with the final result. I could have improved the tracking quality if I had made the image less repetitive. For example, I could have added a picture of myself on the business card.