Cyanilux

Game Dev Blog & Tutorials

Contents

Most of the tutorials below are for the Universal Render Pipeline (URP), but content may still work in other pipelines, such as the Built-in Render Pipeline (BiRP) and High Definition Render Pipeline (HDRP). It may need adjusting in some places due to HDRP using Camera-Relative rendering which makes World space relative to the camera position (e.g. try using Absolute World spaces instead).

Sections :

Looking for a place to start? Check out my Intro to Shaders and Intro to Shader Graph posts!

Resources / Editor Tools :

If you have shader related questions, can join and post in my discord (button below). Also if you found this site useful, consider sharing a link with others or donating!

Discord Join my discord! 💬

Tutorial Posts

(Posts explaining general shader-related topics or shader graph nodes.)

Local UVs for Sprites in Sprite Sheet/Atlas

A small post explaining how to convert the UVs of a sprite sheet (or sprites packed in an atlas) into local 0-1 coordinates across each sprite in the shader

Shader Graph
HLSL
2D

Custom Renderer Features

Goes through examples of Renderer Features and explains how to write Custom Renderer Features and Scriptable Render Passes for Universal RP

URP

Swapping Colours

Examples of how to adjust/swap colours or colour palettes for a given texture/procedural input.

Shader Graph

Writing Shader Code in Universal RP (v2)

Explains how shader code (ShaderLab & HLSL) is written to support the Universal RP

HLSL
URP

Intro to Shader Graph

A detailed introduction on how to use Unity Shader Graph (updated for v12+)! Graph setup, Data types, Understanding Previews, Properties, Keywords, Sub Graphs and more!

Shader Graph
URP
HDRP

Intro to the Shader Pipeline

An introduction to what a Mesh, Shader and Material is in Unity, how to set Shader Properties from C#, various types of Batching, and a brief look at Forward, Forward+ and Deferred rendering paths

HLSL

Depth

A big post explaining everything about Depth : Depth Buffer, Depth Texture / Scene Depth node, SV_Depth, Reconstructing World Position from Depth, etc.

Shader Graph
HLSL

Vertex Displacement

A post explaining how to move vertices in Shader Graph, providing examples such as swaying grass and animated fish and butterflies. Also includes info about recalculating normal vectors.

Shader Graph

Polar Coordinates

A post explaining the Polar Coordinates node

Shader Graph

I also have some older content on my Wordpress blog, such as :

Tutorial Breakdowns

(Tutorials breaking down how to create specific shader effects)

2D Water Shader Breakdown

A water shader intended for 2D, with pixelated highlights, distortion, reflections and simplified shoreline waves/ripples

URP
Shader Graph
2D

Ultraviolet Lights & Invisible Ink

Examples for revealing invisible objects (especially decals, such as fingerprints or hidden messages) based on lights, stencils and other masking methods

URP
Shader Graph

Book (w/ Turnable Pages) Breakdown

A book with pages that flip/turn via vertex displacement, and selects a portion of a texture containing all pages.

URP
Shader Graph

Rain Effects Breakdown

A few rain effects, including particles setup, and shaders for ripples in water/puddles and rain interacting with surfaces

Shader Graph

Waterfall Shader Breakdown

A waterfall shader that interacts with a sphere to part the flowing water. Uses a signed distance field and alpha clipping.

URP
Shader Graph

Fractured Cube Breakdown

Uses a shader which displaces (scales/rotates) vertices of a prefractured mesh with pivots baked into UV maps

URP
Shader Graph
Blender

Snowglobe Breakdown

Glass globe shader with background refraction & reflection. Particles are contained inside which inherit Rigidbody movements.

URP
Shader Graph
VFX Graph

Tentacle Shader Breakdown

A shader that uses vertex displacement to simulate a tentacle grabbing / wrapping around an object

URP
Shader Graph

Tornado Shader Breakdown

A shader applied to a few layers of alpha-clipped scrolling noise, with vertex displacement to make it wobble

URP
Shader Graph

Sword Slash Shader Breakdown

A shader applied to a ring mesh that pans a texture along it to create a swipe/slash effect

URP
Shader Graph

Holofoil Card Shader Breakdown

A shader that replicates the Holographic Foil effects on Trading Cards. Also explains the stencil shader effect on the card window.

URP
Shader Graph

Soft Foliage Shader Breakdown

Soft shaded foliage shader that uses alpha clipping with foliage texture and a small amount of vertex displacement to simulate wind. Applied to a mesh consisting of intersecting quads generated from a particle system

URP
Shader Graph

Crystal Shader Breakdown

An unlit/glowing crystal shader with a colour gradient based on object space Y position, and refraction via Scene Color node

URP
Shader Graph

Fire/Flame Shader Breakdown

A shader which distorts the UVs with noise for sampling a fire texture or shape generated using ellipse nodes

URP
Shader Graph

Sprite Glow/Outline Shader Breakdown

A shader which uses a signed distance field stored in the sprite texture's alpha channel to create an outline/glow (and inner-glow) effect, with control over the colour and thickness

URP
Shader Graph
2D

Sprite Stencil Overlay Breakdown

An example of using the RenderObjects feature on the Forward Renderer to produce an overlay effect for sprites (not compatible with the 2D renderer)

URP
Shader Graph
2D

Dissolve Shader Breakdown

A shader which uses noise and step functions to discard pixels to create a dissolving effect. Also provides examples for dissolving based on height / Y and using view space position as UVs to avoid seams

URP
Shader Graph

Toon Glass Shader Breakdown

A shader which produces solid diagonal lines across a quad's surface that moves with the camera position to simulate toon-like glass reflections

URP
Shader Graph

Fog Plane Shader Breakdown

Two examples of vertical fog effects produced using the depth texture (scene depth)

URP
Shader Graph

Cloud Shader Breakdown

A shader applied to a flat subdivided plane where vertices are offset vertically based on layered noise, moving at different rates, to create a cloud effect. Also uses scene depth to produce a softer transition with intersecting game objects

URP
Shader Graph

Forcefield Shader Breakdown

A forcefield shader using fresnel effect for glowing edges, scene depth for object intersections and scene colour to produce ripples/distortion

URP
Shader Graph

Forcefield Shader Breakdown (Simple)

A simple version of a forcefield shader, using fresnel effect for glowing edges and scene depth for intersections with objects in the scene

URP
Shader Graph

Jellyfish Shader Breakdown

A shader that displaces vertices based on sine waves in order to animate a Jellyfish mesh

URP
Shader Graph

Water Shader Breakdown

A water shader that uses the scene color to produce distortion/refractions and reconstructs a position from the scene depth to project caustics on underwater objects

URP
Shader Graph

Whirlpool Shader Breakdown

A shader that uses polar coordinates to offset vertices as well as sample a seamless noise texture to create a swirling effect

URP
Shader Graph

Hologram Shader Breakdown

A hologram shader based on sine/fraction nodes to produce repeating horizontal lines and fresnel effect, with optional distortion and glitching effects

URP
Shader Graph

Portal Shader Breakdown

A portal/wormhole shader on manipulating polar coordinates to create a spiralling effect

URP
Shader Graph

Liquid Shader Breakdown

A shader that discards pixels above a certain Y position and renders back faces to fake the top surface of the liquid

URP
Shader Graph

I also have a couple breakdowns that I haven’t copied over yet on my Wordpress blog :

Twitter Threads

(Links to shader-related twitter posts/threads that I've made. I may not have turned these into proper posts/breakdowns but some might have info/graphs shared in comments!)

2024

2023

2022

2021

2020

2019

Other

Jams

Projects / Experiments

Procedural Generation

Misc


© 2019-2024 Cyanilux

License / Usage — Cookies & Privacy — RSS Feed


Hello! This site uses cookies related to Twitter (for showing embedded tweets) & Google Analytics (to provide anonymous stats about which web pages are visited, links clicked, etc). These help with improving the website and letting me know what content is popular. See the Cookies & Privacy page for more info.