Intro to Procedural Geometry, Part 1

A tutorial on the basics of coding procedural geometry in Unity.

Advertisements

If you follow me on Twitter, you’ll know that I posted a poll to determine the content of this tutorial! With almost half the votes, an introduction to procedural geometry was the winner.

So, this tutorial will teach you the bare basics of creating procedural geometry in Unity!

Unity has a tutorial on creating a plane in code, but it’s lacking in pictures and assumes that you already know what “vertices” and “triangles” mean. A few other people have written good tutorials on procedural geometry, but I wanted to write one that easily flows into the other procedural geometry tutorials that I write.

Although this tutorial uses Unity, all of the concepts (other than the specific calls to Unity’s API) are applicable to most other engines.

This tutorial assumes you know:

  • Basics of using Unity (creating objects, attaching scripts, using the inspector)
  • How to code in C# (or at least a similar language)

This tutorial will teach you:

  • The high-level of how 3D geometry is represented in code (vertices and triangles)
  • How to use these concepts to create geometry with code
  • How to use Unity’s Mesh API to create geometry
  • How to create a plane mesh in code
  • How normals & UVs work (part 2)
  • How to create other basic 3D shapes (part 2)

Here’s what we’re going to learn to create today! It’s not fancy, but it’s important to understand all of the basics before moving on.

planeScreenshot

Continue reading “Intro to Procedural Geometry, Part 1”

Waving Grass Shader in Unity

A tutorial on how to write an animated waving grass shader in Unity/CG.

Hey y’all! Today, I want to show y’all how I made this wavy grass shader in Unity. The lighting is a simple cel shader, which I covered in a post on cel shading, so we’re going to focus on the vertex animation that creates the wave!

Shout-out to this Low-Poly Foliage asset pack, which is where I got the grass models from.

I took a bit of feedback from the Reddit posts I made about this blog! Redditor aramanamu had some great suggestions, a couple of which I got several times, so I decided to implement them in this post:

comment1

comment2

I hope this is what you were looking for! I highlighted code comments in orange, and I included in-progress screenshots for every step of this tutorial. ^^

If you have feedback about these tutorials, don’t be afraid to PM me on Reddit, contact me on Twitter, or comment on this post ❤

For your reference during the tutorial, here’s the final code for this shader, under an open-source licence:

-> Link to final code for Unity Grass Wave Shader

Now, on with the tutorial!

Continue reading “Waving Grass Shader in Unity”

Ice Shader in Unity

A tutorial in CG/ Unity on how to write an icy shader with a distortion effect.

Hey y’all! Today, I want to show you how I created this ice / crystal shader. There are three parts to this effect:

  1. The transparency with opaque, white edges
  2. The iridescent bumpy texture
  3. The distortion effect behind the ice

All of these effects are reusable for other kinds of shaders.

For example, if you’re successful, you’ll be able to apply the distortion effect to anything, like the water shader!

watergif

For your reference during the tutorial, here’s the final code for the shader.

–> Link to final code for Unity Ice Shader

 


Continue reading “Ice Shader in Unity”

Animated Dotted Outline Shader in Unity

A tutorial on how to write an animated dotted outline shader in Unity/CG.

Earlier, I wrote a tutorial on how to create a cel shader with an outline effect. For the sake of not repeating that explanation, refer to that tutorial to learn how to draw the basic outline.

You can apply this outline effect to any kind of lighting or other shader properties, since it’s in its own pass.

Here’s the final code for you to reference:

–> Link to final code for Unity Dotted Outline Shader

Continue reading “Animated Dotted Outline Shader in Unity”

Cel Shader with Outline in Unity

A tutorial on how to write a shader in Unity with cel/toon lighting and an outline effect.

Today, I want to cover two super popular topics for shaders in Unity:

  1. How to create cel-shaded lighting
  2. How to create an outline effect

In addition to this code, you may want to check out the Unity graphics settings for this tutorial, which are important for lighting a cel-shaded game well.

If you like this post, be sure to follow me on Twitter 🙂

If you’ve never written shader code before, or used Unity, you still may get plenty out of this post, because the algorithms used to write the cel shader and the outline are applicable to any shader. If you do write shader code in Unity, you’ll find the rest of the techniques extra helpful 🙂

This is the end result, applied to an adorable Boston Terrier model made by amazing artist Kytana Le:

finished dog shader

And here’s the full code for you to reference while following the tutorial:

–> Link to final code for the cel and outline shader

Continue reading “Cel Shader with Outline in Unity”

Unity Graphics Setup

A guide for the best graphics settings for a stylized or cel-shaded project.

Hey y’all, I want to share with you the settings I used related to rendering in Unity for these tutorials. These settings make a HUGE difference with respect to quality, especially with the kinds of stylized shaders that I write- Unity seems to be set up for smooth-shaded rendering by default.

I highly encourage you to explore the meaning behind all of the settings I’m presenting to you. Read up on Forward vs. Deferred rendering; learn what anti-aliasing means; don’t just accept these settings and go. I’m still learning everything myself! And we’ll be much better off having power over these settings instead of constantly Googling why something isn’t working.

Continue reading “Unity Graphics Setup”

Dissolve Shader in Unity

A tutorial on how to write a dissolve shader in Unity with colored edges and a gradual fade.

After I posted my cel shader tutorial, I asked for more tutorial ideas on Twitter. A mutual of mine requested help:

Welp, here’s that tutorial, Brannan! XD It doesn’t have ALL of the qualities that you requested, but I think it does the trick for a magical-fade effect.

With this shader, you’ll be able to tune the color, speed, fade speed, size, and texture of the dissolve. For example, in the gif below, the green lingers longer, and the dissolve happens faster.

dissolve4

For reference, here’s the final code for the shader. Note that it includes code for a cel shader, so if you want to use the effect in your own lighting scheme, you’ll need to adapt this code for your needs.

–> Link to final code for Unity Dissolve Shader

Continue reading “Dissolve Shader in Unity”