Working color picker UI

This commit is contained in:
2020-07-22 22:37:16 -07:00
parent e57bed6ed9
commit 10da3dd402
28 changed files with 515 additions and 591 deletions

View File

@ -1,9 +1,14 @@
Shader "ConformalDecals/UI/ColorSlider"
Shader "ConformalDecals/UI/Color Slider"
{
Properties
{
_Color("Color", Color) = (0,0,0,0)
_Radius("Radius", Float) = 4
_OutlineGradient("Outline Gradient Step", Range (0, 1)) = 0.6
_OutlineOpacity("Outline Opacity", Range (0, 0.5)) = 0.1
_OutlineWidth("Outline Width", Float) = 3
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
@ -68,6 +73,10 @@ Shader "ConformalDecals/UI/ColorSlider"
float _Radius;
float4 _Color;
float _OutlineGradient;
float _OutlineOpacity;
float _OutlineWidth;
struct appdata
{
float4 vertex : POSITION;
@ -92,13 +101,10 @@ Shader "ConformalDecals/UI/ColorSlider"
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 color = 1;
color.a = saturate(0.5 - sdRoundedUVBox(i.uv, _Radius));
float4 color = 1;
#ifdef HUE
color.rgb = HSL2RGB(float3(i.uv.y, 1, 0.5));
color.rgb = HSV2RGB(float3(i.uv.y, _Color.y, _Color.z));
#endif //HUE
#ifdef RED
@ -113,6 +119,14 @@ Shader "ConformalDecals/UI/ColorSlider"
color.rgb = float3(_Color.r, _Color.g, i.uv.x);
#endif //BLUE
float rrect = sdRoundedUVBox(i.uv, _Radius);
float gradient = smoothstep(_OutlineGradient, 1 - _OutlineGradient, i.uv.y);
float outlineOpacity = _OutlineOpacity * smoothstep(-1*_OutlineWidth, 0, rrect);
color.rgb = lerp(color.rgb, gradient, outlineOpacity);
color.a = saturate(0.5 - rrect);
#ifdef UNITY_UI_CLIP_RECT
color.a *= UnityGet2DClipping(i.worldPosition.xy, _ClipRect);
#endif

View File

@ -1,10 +1,14 @@
Shader "ConformalDecals/UI/HSLSquare"
Shader "ConformalDecals/UI/HSV Square"
{
Properties
{
_Hue("Hue", Range(0,1)) = 0
_Color("Color", Color) = (0,0,0,0)
_Radius("Radius", Float) = 4
_OutlineGradient("Outline Gradient Step", Range (0, 1)) = 0.6
_OutlineOpacity("Outline Opacity", Range (0, 0.5)) = 0.1
_OutlineWidth("Outline Width", Float) = 3
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
@ -57,10 +61,14 @@ Shader "ConformalDecals/UI/HSLSquare"
#pragma multi_compile_local _ UNITY_UI_CLIP_RECT
#pragma multi_compile_local _ UNITY_UI_ALPHACLIP
float _Hue;
float _Radius;
float4 _ClipRect;
float _Radius;
float4 _Color;
float _OutlineGradient;
float _OutlineOpacity;
float _OutlineWidth;
struct appdata
{
float4 vertex : POSITION;
@ -90,7 +98,13 @@ Shader "ConformalDecals/UI/HSLSquare"
color.a = saturate(0.5 - sdRoundedUVBox(i.uv, _Radius));
color.rgb = HSL2RGB(float3(_Hue, i.uv.x, i.uv.y));
color.rgb = HSV2RGB(float3(_Color.x, i.uv.x, i.uv.y));
float rrect = sdRoundedUVBox(i.uv, _Radius);
float gradient = smoothstep(_OutlineGradient, 1 - _OutlineGradient, i.uv.y);
float outlineOpacity = _OutlineOpacity * smoothstep(-1*_OutlineWidth, 0, rrect);
color.rgb = lerp(color.rgb, gradient, outlineOpacity);
#ifdef UNITY_UI_CLIP_RECT
color.a *= UnityGet2DClipping(i.worldPosition.xy, _ClipRect);

View File

@ -4,6 +4,11 @@ Shader "ConformalDecals/UI/Color Swatch"
{
_Color("Color", Color) = (0,0,0,0)
_Radius("Radius", Float) = 4
_OutlineGradient("Outline Gradient Step", Range (0, 1)) = 0.6
_OutlineOpacity("Outline Opacity", Range (0, 0.5)) = 0.1
_OutlineWidth("Outline Width", Float) = 3
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
@ -61,6 +66,10 @@ Shader "ConformalDecals/UI/Color Swatch"
float _Radius;
float4 _Color;
float _OutlineGradient;
float _OutlineOpacity;
float _OutlineWidth;
struct appdata
{
float4 vertex : POSITION;
@ -89,6 +98,12 @@ Shader "ConformalDecals/UI/Color Swatch"
color.a = saturate(0.5 - sdRoundedUVBox(i.uv, _Radius));
float rrect = sdRoundedUVBox(i.uv, _Radius);
float gradient = smoothstep(_OutlineGradient, 1 - _OutlineGradient, i.uv.y);
float outlineOpacity = _OutlineOpacity * smoothstep(-1*_OutlineWidth, 0, rrect);
color.rgb = lerp(color.rgb, gradient, outlineOpacity);
#ifdef UNITY_UI_CLIP_RECT
color.a *= UnityGet2DClipping(i.worldPosition.xy, _ClipRect);
#endif

View File

@ -8,4 +8,10 @@ inline float3 HSL2RGB(float3 hsl) {
return hsl.z - a * max(-1, min(k - 3, min(9 - k, 1)));
}
inline float3 HSV2RGB(float3 hsv) {
int3 n = int3(5, 3, 1);
float3 k = (n + hsv.x * 6) % 6;
return hsv.z - hsv.z * hsv.y * max(0, min(1, min(k, 4 - k)));
}
#endif