@evil roy
I use something similar on my waveform seekbar, not exactly the same but close enough. Can't remember where I got it from but here's the code. Use this as effect source for your waveform seekbar frontend settings. Configure your colors (tip: highlight and selection colors works best when matched example bright blue and dark blue) select mix down to mono and select front center (mono).
texture tex : WAVEFORMDATA;
sampler sTex = sampler_state
{
Texture = (tex);
MipFilter = LINEAR;
MinFilter = LINEAR;
MagFilter = LINEAR;
AddressU = Clamp;
};
struct VS_IN
{
float2 pos : POSITION;
float2 tc : TEXCOORD0;
};
struct PS_IN
{
float4 pos : SV_POSITION;
float2 tc : TEXCOORD0;
};
float4 panelBackgroundColor : BACKGROUNDCOLOR; // 'Background color' - whole panel background
float4 waveHighlightColor : HIGHLIGHTCOLOR; // 'Highlight color' - for played part
float4 selectionColor : SELECTIONCOLOR; // Not used
float4 waveUnplayedColor : TEXTCOLOR; // 'Foreground color' - for unplayed part
float cursorPos : CURSORPOSITION;
bool cursorVisible : CURSORVISIBLE;
float seekPos : SEEKPOSITION;
bool seeking : SEEKING;
float4 replayGain : REPLAYGAIN;
float2 viewportSize : VIEWPORTSIZE;
bool horizontal : ORIENTATION;
bool flipped : FLIPPED;
bool shadePlayed : SHADEPLAYED;
float4 colorDodge(float4 baseColor, float4 blendColor)
{
return saturate(baseColor / (1 - blendColor));
}
float4 linearDodge(float4 baseColor, float4 blendColor)
{
return saturate(baseColor + blendColor);
}
float4 multiply(float4 baseColor, float4 blendColor)
{
return saturate(baseColor * blendColor);
}
float4 getSeekAheadColor()
{
float4 color = colorDodge(waveHighlightColor, 0.4);
color.a = 0.5;
return color;
}
float4 getSeekBackColor()
{
return float4(1.0, 1.0, 1.0, 0.5);
}
float4 getWaveTopColor()
{
return colorDodge(waveHighlightColor, 0.57);
}
float4 getReflectionHightlightColor()
{
float4 color = waveHighlightColor;
color = multiply(color, 0.75);
color = linearDodge(color, 0.6);
return color;
}
float2 getPixelSize()
{
float2 pixelSize = horizontal
? 1 / viewportSize.xy
: 1 / viewportSize.yx;
return pixelSize;
}
/*
Split waveform into bars.
Waveform texture contains upper half-waves (positive peaks) in Green channel
and negative ones in Red. Negative values are ignored to make reflection later.
*/
float4 rmsSampling(float2 tc, float2 pixelSize, inout bool isGap)
{
float rmsData;
float mainAxisLength = (horizontal ? viewportSize.x : viewportSize.y);
if (ceil(mainAxisLength * tc.x) % 3 < 0.1)
{
rmsData = tex1D(sTex, tc.x).g;
}
else if (ceil(mainAxisLength * tc.x) % 3 < 1.1)
{
rmsData = tex1D(sTex, tc.x - pixelSize.x).g;
}
else
{
isGap = true;
// Height of a gap equals to height of the smallest neighbour bar
float leftPeak = tex1D(sTex, tc.x - (2 * pixelSize.x)).g;
float rightPeak = tex1D(sTex, tc.x + pixelSize.x).g;
rmsData = min(leftPeak, rightPeak);
}
return rmsData;
}
float4 getWaveColor(float2 tc, float2 pixelSize, int pixelBar, int cursorBar, float barCoverage, float4 bgColor, bool isGap)
{
bool isBeyondSeek = tc.x > seekPos;
float4 seekAheadColor = getSeekAheadColor();
float4 seekBackColor = getSeekBackColor();
float4 seekColor = isBeyondSeek ? seekBackColor : seekAheadColor;
float4 waveTop = getWaveTopColor();
float4 waveBottom = waveHighlightColor;
float4 color = (cursorBar < pixelBar ? waveUnplayedColor : lerp(waveBottom, waveTop, tc.y));
if (pixelBar == cursorBar)
{
if (seeking)
{
if (isBeyondSeek)
{
color = lerp(color, seekColor, seekColor.a);
color = lerp(color, waveUnplayedColor, barCoverage);
}
else
{
color = lerp(color, lerp(waveUnplayedColor, seekColor, seekColor.a), barCoverage);
}
}
else
{
color = lerp(color, waveUnplayedColor, barCoverage);
}
}
else if (seeking)
{
bool afterCursor = tc.x + pixelSize.x > cursorPos;
float4 seekColor = isBeyondSeek ? seekBackColor : seekAheadColor;
if ((afterCursor + isBeyondSeek) == 1)
{
color = lerp(color, seekColor, seekColor.a);
}
}
if (isGap)
{
color = lerp(color, bgColor, tc.y * 0.35 + 0.5);
}
return color;
}
float4 getReflectionColor(float2 tc, float2 pixelSize, int pixelBar, int cursorBar, float barCoverage, float4 bgColor, bool isGap)
{
float4 color;
float4 reflectionUnplayedColor = multiply(waveUnplayedColor, 0.8980);
float4 reflectionHighlightColor = getReflectionHightlightColor();
if (isGap)
{
color = bgColor;
}
else if (pixelBar == cursorBar)
{
color = lerp(reflectionHighlightColor, reflectionUnplayedColor, barCoverage);
}
else
{
color = cursorPos < tc.x + pixelSize.x ? reflectionUnplayedColor : reflectionHighlightColor;
}
return color;
}
float4 evaluate(float2 tc)
{
float mainAxisLength = (horizontal ? viewportSize.x : viewportSize.y);
float2 pixelSize = getPixelSize();
bool isGap = false;
float rmsData = rmsSampling(tc, pixelSize, isGap);
tc.y += 0.5;
// Reflection
if (tc.y < 0)
{
// Invert upper half-waves to imitate reflection
rmsData = 1 - rmsData;
// Squeeze reflection
tc.y *= 3.5;
}
rmsData -= 0.5;
rmsData *= 2.5;
bool above = abs(tc.y) > abs(rmsData);
float4 bgColor = panelBackgroundColor * ((0.93 - (tc.x * 0.08)) + ((tc.y * 0.1) - 0.07));
if (above || abs(tc.y) < 1.33 * pixelSize.y)
{
return bgColor;
}
int pixelBar = ceil(mainAxisLength * (tc.x + pixelSize.x) / 3.0);
int cursorBar = ceil(mainAxisLength * cursorPos / 3.0);
float barCoverage = (cursorBar * 3.0 - (mainAxisLength * cursorPos)) / 3.0;
float4 color = tc.y > 0
? getWaveColor(tc, pixelSize, pixelBar, cursorBar, barCoverage, bgColor, isGap)
: getReflectionColor(tc, pixelSize, pixelBar, cursorBar, barCoverage, bgColor, isGap);
return color;
}
PS_IN VS(VS_IN input)
{
float pixelWidth = horizontal
? 1 / viewportSize.x
: 1 / viewportSize.y;
PS_IN output = (PS_IN)0;
// Move left to fill 1st empty pixel
output.pos = float4(input.pos - float2(pixelWidth, 0), 0, 1);
if (horizontal)
{
float firstBarAlignment = (flipped ? 2*pixelWidth : -2*pixelWidth);
output.tc = float4((input.tc.xy + float2(1.0 + firstBarAlignment, 0)) * float2(0.5, 1.0), 0, 1);
}
else
{
float firstBarAlignment = (flipped ? 3*pixelWidth : -1*pixelWidth);
output.tc = float4((-input.pos.yx + float2(1.0 + firstBarAlignment, 0)) * float2(0.5, 1.0), 0, 1);
}
if (flipped)
{
output.tc.x = 1.0 - output.tc.x;
}
return output;
}
float4 PS(PS_IN input) : SV_Target
{
float4 color = evaluate(input.tc);
return color;
}
technique Render9
{
pass
{
VertexShader = compile vs_2_0 VS();
PixelShader = compile ps_3_0 PS();
}
}
technique10 Render10
{
pass P0
{
SetGeometryShader(0);
SetVertexShader(CompileShader(vs_4_0, VS()));
SetPixelShader(CompileShader(ps_4_0, PS()));
}
}
This is what it looks like:
Topic: Discussion of "Default UI Gallery" (Read 412587 times)
previous topic - next topic