HSV Shader Graph - Hue Saturation Value color space explained & how to use it in Unity

EDIT: Unity does indeed provide a node to do this conversion. Which means you can likely skip the "HSV conversion math" section of this video (2:22 to 4:20). The rest is still relevant as it's focused on how & why to use these nodes, it just turns out you can use Unity's node instead of mine.

Thanks to the commenter Michał Jaglewicz for pointing this out! Unity node: https://docs.unity3d.com/Packages/com...

How to use an HSV shader graph. Hue Saturation Value, or HSV, is an alternative way to represent color from RGB. HSV is useful when you need to affect the colors of your image in an HSV centric way (such as hue shift, or saturation boost), but also often useful for in-shader math. There are many scenarios where it’s easier to do color-conditional math in HSV color space.

I have created RGB to HSV and HSV to RGB shader graph subgraphs and put them up on github here: https://github.com/gamedevbill/Tutori...

These shader graph nodes should work with URP, LWRP, and HDRP in Unity.

This video will go over the math involved in the conversion at a high level, and then focus on some usage examples. For a more thorough exploration of the math, see the written version of this tutorial here: https://gamedevbill.com/hsv-shader-gr...

Chapters:
0:00 Intro
0:56 HSV concepts
2:22 HSV conversion math
4:20 Dragon example
8:36 Improvement to old video
10:08 Saturation example

Assets used:
* Gaia 2 - https://assetstore.unity.com/packages...
* (free) dragon - https://assetstore.unity.com/packages...

Shirt used: https://amzn.to/2GKEjDo
Monster truck used: El Toro Loco https://amzn.to/2FeXtk7

**** Update for Shader Graph 10.x
This video was made with Shader Graph 8.2
If you are using Shader Graph 10.x there are a couple key differences:

The create shader options have moved within a sub-menu called "Universal Render Pipeline, and some are renamed. So "Create--Shader--PBR graph" becomes "Create--Shader--Universal Render Pipeline--Lit Shader Graph"
The per-input settings that were in the blackboard are now in the "Graph Inspector" within the "Node Settings". You must have the input selected to see its settings in that window.
Some other settings that were on-node are now also in that Graph Inspector, though you can generally ignore these.
If you want to generate a code shader from the graph, you do so on the graph asset inspector (not on the master node as you did in 8.2). Now select the graph asset, and hit "View Generated Shader" button in its inspector.
****

HSV manipulation can be a great tool to adjust the mood of your game, or even make it more colorblind friendly.

HSV logic can be especially helpful during full screen effects. It can be easier to do a chroma-key identification using the Hue. For info on how to apply shader graphs to full screen post-processing, see my video covering full screen shaders in URP:    • Old Movie Shader Graph - Plus Full Sc...  

#ShaderGraph #Unity #Shader