From ce5905373a4d001512455e70f7234f5ad09e8caf Mon Sep 17 00:00:00 2001 From: Aiden Date: Tue, 5 May 2026 22:36:52 +1000 Subject: [PATCH] Added new shaders --- .../ControlServer.cpp | 11 ++ .../RuntimeHost.cpp | 1 + shaders/balatro-swirl/shader.json | 114 ++++++++++++++ shaders/balatro-swirl/shader.slang | 49 ++++++ shaders/black-and-white/shader.json | 2 +- shaders/composition-guides/shader.json | 2 +- shaders/dvd-bounce/shader.json | 2 +- shaders/ether/shader.json | 84 ++++++++++ shaders/ether/shader.slang | 40 +++++ shaders/false-color/shader.json | 2 +- shaders/gaussian-blur/shader.json | 2 +- shaders/greenscreen-key/shader.json | 2 +- shaders/lift-gamma-gain/shader.json | 42 +++++ shaders/lift-gamma-gain/shader.slang | 20 +++ shaders/pixelate/shader.json | 2 +- shaders/safe-area-guides/shader.json | 2 +- shaders/singularity/shader.json | 90 +++++++++++ shaders/singularity/shader.slang | 48 ++++++ shaders/studio-color/shader.json | 2 +- shaders/temporal-ghost-trail/shader.json | 2 +- shaders/temporal-low-fps/shader.json | 2 +- shaders/vhs/shader.json | 22 ++- shaders/vhs/shader.slang | 62 ++++++++ shaders/video-cube/shader.json | 2 +- shaders/video-transform/shader.json | 2 +- shaders/waveform-overlay/shader.json | 2 +- ui/package-lock.json | 56 +++++++ ui/package.json | 2 + ui/src/components/LayerCard.jsx | 24 ++- ui/src/components/ParameterField.jsx | 83 ++++++++-- ui/src/components/ShaderPicker.jsx | 37 +++-- ui/src/styles.css | 147 +++++++++++++++--- 32 files changed, 882 insertions(+), 78 deletions(-) create mode 100644 shaders/balatro-swirl/shader.json create mode 100644 shaders/balatro-swirl/shader.slang create mode 100644 shaders/ether/shader.json create mode 100644 shaders/ether/shader.slang create mode 100644 shaders/lift-gamma-gain/shader.json create mode 100644 shaders/lift-gamma-gain/shader.slang create mode 100644 shaders/singularity/shader.json create mode 100644 shaders/singularity/shader.slang diff --git a/apps/LoopThroughWithOpenGLCompositing/ControlServer.cpp b/apps/LoopThroughWithOpenGLCompositing/ControlServer.cpp index a067caa..8ee8d71 100644 --- a/apps/LoopThroughWithOpenGLCompositing/ControlServer.cpp +++ b/apps/LoopThroughWithOpenGLCompositing/ControlServer.cpp @@ -16,6 +16,8 @@ namespace { +constexpr DWORD kStateBroadcastIntervalMs = 250; + bool InitializeWinsock(std::string& error) { WSADATA wsaData = {}; @@ -165,9 +167,18 @@ void ControlServer::BroadcastState() void ControlServer::ServerLoop() { + DWORD lastStateBroadcastMs = GetTickCount(); while (mRunning) { TryAcceptClient(); + + const DWORD nowMs = GetTickCount(); + if (nowMs - lastStateBroadcastMs >= kStateBroadcastIntervalMs) + { + BroadcastState(); + lastStateBroadcastMs = nowMs; + } + Sleep(25); } } diff --git a/apps/LoopThroughWithOpenGLCompositing/RuntimeHost.cpp b/apps/LoopThroughWithOpenGLCompositing/RuntimeHost.cpp index 152197b..b95f6ee 100644 --- a/apps/LoopThroughWithOpenGLCompositing/RuntimeHost.cpp +++ b/apps/LoopThroughWithOpenGLCompositing/RuntimeHost.cpp @@ -1657,6 +1657,7 @@ JsonValue RuntimeHost::SerializeLayerStackLocked() const parameter.set("id", JsonValue(definition.id)); parameter.set("label", JsonValue(definition.label)); parameter.set("type", JsonValue(ShaderParameterTypeToString(definition.type))); + parameter.set("defaultValue", SerializeParameterValue(definition, DefaultValueForDefinition(definition))); if (!definition.minNumbers.empty()) { diff --git a/shaders/balatro-swirl/shader.json b/shaders/balatro-swirl/shader.json new file mode 100644 index 0000000..789eec8 --- /dev/null +++ b/shaders/balatro-swirl/shader.json @@ -0,0 +1,114 @@ +{ + "id": "balatro-swirl", + "name": "Balatro Swirl", + "description": "Animated painterly swirl background. Original by localthunk (https://www.playbalatro.com), adapted from https://www.shadertoy.com/view/XXtBRr.", + "category": "Generative", + "entryPoint": "shadeVideo", + "parameters": [ + { + "id": "spinRotation", + "label": "Spin Rotation", + "type": "float", + "default": -2.0, + "min": -8.0, + "max": 8.0, + "step": 0.05 + }, + { + "id": "spinSpeed", + "label": "Spin Speed", + "type": "float", + "default": 7.0, + "min": 0.0, + "max": 20.0, + "step": 0.1 + }, + { + "id": "spinAmount", + "label": "Spin Amount", + "type": "float", + "default": 0.25, + "min": 0.0, + "max": 1.0, + "step": 0.01 + }, + { + "id": "spinEase", + "label": "Spin Ease", + "type": "float", + "default": 1.0, + "min": 0.0, + "max": 3.0, + "step": 0.01 + }, + { + "id": "pixelFilter", + "label": "Pixel Filter", + "type": "float", + "default": 745.0, + "min": 120.0, + "max": 1600.0, + "step": 1.0 + }, + { + "id": "contrast", + "label": "Contrast", + "type": "float", + "default": 3.5, + "min": 0.5, + "max": 8.0, + "step": 0.05 + }, + { + "id": "lighting", + "label": "Lighting", + "type": "float", + "default": 0.4, + "min": 0.0, + "max": 1.5, + "step": 0.01 + }, + { + "id": "offset", + "label": "Offset", + "type": "vec2", + "default": [0.0, 0.0], + "min": [-1.0, -1.0], + "max": [1.0, 1.0], + "step": [0.001, 0.001] + }, + { + "id": "colour1", + "label": "Colour 1", + "type": "color", + "default": [0.871, 0.267, 0.231, 1.0] + }, + { + "id": "colour2", + "label": "Colour 2", + "type": "color", + "default": [0.0, 0.42, 0.706, 1.0] + }, + { + "id": "colour3", + "label": "Colour 3", + "type": "color", + "default": [0.086, 0.137, 0.145, 1.0] + }, + { + "id": "isRotate", + "label": "Rotate Field", + "type": "bool", + "default": false + }, + { + "id": "sourceMix", + "label": "Source Mix", + "type": "float", + "default": 0.0, + "min": 0.0, + "max": 1.0, + "step": 0.01 + } + ] +} diff --git a/shaders/balatro-swirl/shader.slang b/shaders/balatro-swirl/shader.slang new file mode 100644 index 0000000..ff50938 --- /dev/null +++ b/shaders/balatro-swirl/shader.slang @@ -0,0 +1,49 @@ +float4 balatroSwirl(float2 screenSize, float2 screenCoords, float time) +{ + const float pi = 3.14159265359; + float safePixelFilter = max(pixelFilter, 1.0); + float safeScreenLength = max(length(screenSize), 1.0); + float pixelSize = safeScreenLength / safePixelFilter; + float2 uv = (floor(screenCoords * (1.0 / pixelSize)) * pixelSize - 0.5 * screenSize) / safeScreenLength - offset; + float uvLength = length(uv); + + float speed = spinRotation * spinEase * 0.2; + if (isRotate) + speed = time * speed; + speed += 302.2; + + float newPixelAngle = atan2(uv.y, uv.x) + speed - spinEase * 20.0 * (spinAmount * uvLength + (1.0 - spinAmount)); + float2 mid = (screenSize / safeScreenLength) * 0.5; + uv = float2(uvLength * cos(newPixelAngle) + mid.x, uvLength * sin(newPixelAngle) + mid.y) - mid; + + uv *= 30.0; + speed = time * spinSpeed; + float2 uv2 = float2(uv.x + uv.y, uv.x + uv.y); + + for (int i = 0; i < 5; ++i) + { + uv2 += float2(sin(max(uv.x, uv.y)), sin(max(uv.x, uv.y))) + uv; + uv += 0.5 * float2(cos(5.1123314 + 0.353 * uv2.y + speed * 0.131121), sin(uv2.x - 0.113 * speed)); + float warp = cos(uv.x + uv.y) - sin(uv.x * 0.711 - uv.y); + uv -= float2(warp, warp); + } + + float contrastMod = 0.25 * contrast + 0.5 * spinAmount + 1.2; + float paintRes = min(2.0, max(0.0, length(uv) * 0.035 * contrastMod)); + float c1p = max(0.0, 1.0 - contrastMod * abs(1.0 - paintRes)); + float c2p = max(0.0, 1.0 - contrastMod * abs(paintRes)); + float c3p = 1.0 - min(1.0, c1p + c2p); + float light = (lighting - 0.2) * max(c1p * 5.0 - 4.0, 0.0) + lighting * max(c2p * 5.0 - 4.0, 0.0); + + float safeContrast = max(contrast, 0.001); + float4 base = (0.3 / safeContrast) * colour1; + float4 paint = colour1 * c1p + colour2 * c2p + float4(c3p * colour3.rgb, c3p * colour1.a); + return base + (1.0 - 0.3 / safeContrast) * paint + float4(light, light, light, light); +} + +float4 shadeVideo(ShaderContext context) +{ + float2 screenSize = max(context.outputResolution, float2(1.0, 1.0)); + float4 swirl = balatroSwirl(screenSize, context.uv * screenSize, context.time); + return saturate(lerp(swirl, context.sourceColor, sourceMix)); +} diff --git a/shaders/black-and-white/shader.json b/shaders/black-and-white/shader.json index 1e8a4d0..ed5b97f 100644 --- a/shaders/black-and-white/shader.json +++ b/shaders/black-and-white/shader.json @@ -2,7 +2,7 @@ "id": "black-and-white", "name": "Black and White", "description": "A minimal monochrome shader that converts the decoded video input to grayscale.", - "category": "Built-in", + "category": "Color", "entryPoint": "shadeVideo", "parameters": [] } diff --git a/shaders/composition-guides/shader.json b/shaders/composition-guides/shader.json index de1be82..665daba 100644 --- a/shaders/composition-guides/shader.json +++ b/shaders/composition-guides/shader.json @@ -2,7 +2,7 @@ "id": "composition-guides", "name": "Composition Guides", "description": "Overlays rule-of-thirds guides and a center crosshair for camera alignment and framing.", - "category": "Utility", + "category": "Scopes & Guides", "entryPoint": "shadeVideo", "parameters": [ { diff --git a/shaders/dvd-bounce/shader.json b/shaders/dvd-bounce/shader.json index 15d6f20..3ab93b4 100644 --- a/shaders/dvd-bounce/shader.json +++ b/shaders/dvd-bounce/shader.json @@ -2,7 +2,7 @@ "id": "dvd-bounce", "name": "DVD Bounce", "description": "A transparent bouncing DVD logo sprite that changes color on each screen hit.", - "category": "Built-in", + "category": "Generative", "entryPoint": "shadeVideo", "textures": [ { diff --git a/shaders/ether/shader.json b/shaders/ether/shader.json new file mode 100644 index 0000000..2aa9f54 --- /dev/null +++ b/shaders/ether/shader.json @@ -0,0 +1,84 @@ +{ + "id": "ether", + "name": "Ether", + "description": "Raymarched ether field. Original by nimitz 2014 (twitter: @stormoid), adapted from https://www.shadertoy.com/view/MsjSW3.", + "category": "Generative", + "entryPoint": "shadeVideo", + "parameters": [ + { + "id": "speed", + "label": "Speed", + "type": "float", + "default": 1.0, + "min": 0.0, + "max": 4.0, + "step": 0.01 + }, + { + "id": "depth", + "label": "Depth", + "type": "float", + "default": 2.5, + "min": 0.2, + "max": 8.0, + "step": 0.01 + }, + { + "id": "density", + "label": "Density", + "type": "float", + "default": 0.7, + "min": 0.0, + "max": 2.0, + "step": 0.01 + }, + { + "id": "brightness", + "label": "Brightness", + "type": "float", + "default": 1.0, + "min": 0.0, + "max": 3.0, + "step": 0.01 + }, + { + "id": "contrast", + "label": "Contrast", + "type": "float", + "default": 1.0, + "min": 0.25, + "max": 3.0, + "step": 0.01 + }, + { + "id": "offset", + "label": "Offset", + "type": "vec2", + "default": [0.9, 0.5], + "min": [0.0, 0.0], + "max": [2.0, 2.0], + "step": [0.001, 0.001] + }, + { + "id": "baseColor", + "label": "Base Color", + "type": "color", + "default": [0.1, 0.3, 0.4, 1.0] + }, + { + "id": "energyColor", + "label": "Energy Color", + "type": "color", + "default": [1.0, 0.5, 0.6, 1.0] + }, + { + "id": "sourceMix", + "label": "Source Mix", + "type": "float", + "default": 0.0, + "min": 0.0, + "max": 1.0, + "step": 0.01 + } + ] +} diff --git a/shaders/ether/shader.slang b/shaders/ether/shader.slang new file mode 100644 index 0000000..0a94ccd --- /dev/null +++ b/shaders/ether/shader.slang @@ -0,0 +1,40 @@ +float2x2 rotation2(float angle) +{ + float c = cos(angle); + float s = sin(angle); + return float2x2(c, -s, s, c); +} + +float etherMap(float3 p, float time) +{ + p.xz = mul(rotation2(time * 0.4), p.xz); + p.xy = mul(rotation2(time * 0.3), p.xy); + + float3 q = p * 2.0 + time; + float wave = sin(q.x + sin(q.z + sin(q.y))) * 0.5; + return length(p + float3(sin(time * 0.7), sin(time * 0.7), sin(time * 0.7))) * log(length(p) + 1.0) + wave - 1.0; +} + +float4 shadeVideo(ShaderContext context) +{ + float2 resolution = max(context.outputResolution, float2(1.0, 1.0)); + float2 fragCoord = context.uv * resolution; + float2 p = fragCoord / resolution.y - offset; + float time = context.time * speed; + + float3 color = float3(0.0, 0.0, 0.0); + float d = depth; + + for (int i = 0; i <= 5; ++i) + { + float3 rayPosition = float3(0.0, 0.0, 5.0) + normalize(float3(p, -1.0)) * d; + float rz = etherMap(rayPosition, time); + float f = clamp((rz - etherMap(rayPosition + float3(0.1, 0.1, 0.1), time)) * 0.5, -0.1, 1.0); + float3 light = baseColor.rgb + energyColor.rgb * 5.0 * f; + color = color * light + smoothstep(2.5, 0.0, rz) * density * light; + d += min(rz, 1.0); + } + + color = pow(max(color * brightness, float3(0.0, 0.0, 0.0)), float3(1.0 / max(contrast, 0.001))); + return saturate(lerp(float4(color, 1.0), context.sourceColor, sourceMix)); +} diff --git a/shaders/false-color/shader.json b/shaders/false-color/shader.json index 3d3acf6..11ac283 100644 --- a/shaders/false-color/shader.json +++ b/shaders/false-color/shader.json @@ -2,7 +2,7 @@ "id": "false-color", "name": "False Color", "description": "Maps luminance ranges to exposure-assist colors for camera and shader debugging.", - "category": "Utility", + "category": "Color", "entryPoint": "shadeVideo", "parameters": [ { diff --git a/shaders/gaussian-blur/shader.json b/shaders/gaussian-blur/shader.json index d51826b..3dc9a25 100644 --- a/shaders/gaussian-blur/shader.json +++ b/shaders/gaussian-blur/shader.json @@ -2,7 +2,7 @@ "id": "gaussian-blur", "name": "Gaussian Blur", "description": "Applies a simple Gaussian-style blur to the decoded video input.", - "category": "Built-in", + "category": "Transform", "entryPoint": "shadeVideo", "parameters": [ { diff --git a/shaders/greenscreen-key/shader.json b/shaders/greenscreen-key/shader.json index 500211f..e9c3c98 100644 --- a/shaders/greenscreen-key/shader.json +++ b/shaders/greenscreen-key/shader.json @@ -2,7 +2,7 @@ "id": "greenscreen-key", "name": "Greenscreen Key", "description": "Keys out a green screen background and outputs transparent alpha for compositing.", - "category": "Built-in", + "category": "Keying", "entryPoint": "shadeVideo", "parameters": [ { diff --git a/shaders/lift-gamma-gain/shader.json b/shaders/lift-gamma-gain/shader.json new file mode 100644 index 0000000..233a344 --- /dev/null +++ b/shaders/lift-gamma-gain/shader.json @@ -0,0 +1,42 @@ +{ + "id": "lift-gamma-gain", + "name": "Lift Gamma Gain", + "description": "Basic color grading controls for shadows, midtones, highlights, and overall RGB offset.", + "category": "Color", + "entryPoint": "shadeVideo", + "parameters": [ + { + "id": "lift", + "label": "Lift", + "type": "color", + "default": [0.5, 0.5, 0.5, 1.0] + }, + { + "id": "gamma", + "label": "Gamma", + "type": "color", + "default": [0.5, 0.5, 0.5, 1.0] + }, + { + "id": "gain", + "label": "Gain", + "type": "color", + "default": [0.5, 0.5, 0.5, 1.0] + }, + { + "id": "offset", + "label": "Offset", + "type": "color", + "default": [0.5, 0.5, 0.5, 1.0] + }, + { + "id": "strength", + "label": "Strength", + "type": "float", + "default": 1.0, + "min": 0.0, + "max": 1.0, + "step": 0.01 + } + ] +} diff --git a/shaders/lift-gamma-gain/shader.slang b/shaders/lift-gamma-gain/shader.slang new file mode 100644 index 0000000..f5bf949 --- /dev/null +++ b/shaders/lift-gamma-gain/shader.slang @@ -0,0 +1,20 @@ +float3 applyLiftGammaGainOffset(float3 color) +{ + float3 liftAdjust = (lift.rgb - 0.5) * 0.5; + float3 offsetAdjust = (offset.rgb - 0.5) * 0.5; + float3 gammaAdjust = exp2((gamma.rgb - 0.5) * 2.0); + float3 gainAdjust = exp2((gain.rgb - 0.5) * 2.0); + + float3 lifted = color + liftAdjust; + float3 gained = lifted * gainAdjust; + float3 corrected = pow(saturate(gained), 1.0 / max(gammaAdjust, float3(0.001))); + return corrected + offsetAdjust; +} + +float4 shadeVideo(ShaderContext context) +{ + float4 source = context.sourceColor; + float3 graded = applyLiftGammaGainOffset(source.rgb); + source.rgb = lerp(source.rgb, graded, strength); + return saturate(source); +} diff --git a/shaders/pixelate/shader.json b/shaders/pixelate/shader.json index 27ccc57..92916a3 100644 --- a/shaders/pixelate/shader.json +++ b/shaders/pixelate/shader.json @@ -2,7 +2,7 @@ "id": "pixelate", "name": "Pixelate", "description": "Reduces the effective X and Y pixel count independently to create a low-resolution blocky image.", - "category": "Utility", + "category": "Transform", "entryPoint": "shadeVideo", "parameters": [ { diff --git a/shaders/safe-area-guides/shader.json b/shaders/safe-area-guides/shader.json index a8bb6fe..144ffc5 100644 --- a/shaders/safe-area-guides/shader.json +++ b/shaders/safe-area-guides/shader.json @@ -2,7 +2,7 @@ "id": "safe-area-guides", "name": "Safe Area Guides", "description": "Overlays broadcast action/title safe guides plus optional center marks and aspect matte.", - "category": "Utility", + "category": "Scopes & Guides", "entryPoint": "shadeVideo", "parameters": [ { "id": "showActionSafe", "label": "Action Safe", "type": "bool", "default": true }, diff --git a/shaders/singularity/shader.json b/shaders/singularity/shader.json new file mode 100644 index 0000000..9909bba --- /dev/null +++ b/shaders/singularity/shader.json @@ -0,0 +1,90 @@ +{ + "id": "singularity", + "name": "Singularity", + "description": "Whirling blackhole and accretion disk. Original by XorDev, adapted from https://www.shadertoy.com/view/3csSWB.", + "category": "Generative", + "entryPoint": "shadeVideo", + "parameters": [ + { + "id": "speed", + "label": "Speed", + "type": "float", + "default": 1.0, + "min": 0.0, + "max": 4.0, + "step": 0.01 + }, + { + "id": "scale", + "label": "Scale", + "type": "float", + "default": 0.7, + "min": 0.25, + "max": 1.5, + "step": 0.01 + }, + { + "id": "strength", + "label": "Gravity", + "type": "float", + "default": 1.0, + "min": 0.1, + "max": 3.0, + "step": 0.01 + }, + { + "id": "ringRadius", + "label": "Ring Radius", + "type": "float", + "default": 0.7, + "min": 0.2, + "max": 1.4, + "step": 0.01 + }, + { + "id": "tightness", + "label": "Tightness", + "type": "float", + "default": 1.35, + "min": 0.5, + "max": 3.0, + "step": 0.01 + }, + { + "id": "brightness", + "label": "Brightness", + "type": "float", + "default": 1.0, + "min": 0.1, + "max": 4.0, + "step": 0.01 + }, + { + "id": "colorShift", + "label": "Color Shift", + "type": "float", + "default": 1.0, + "min": -2.0, + "max": 2.0, + "step": 0.01 + }, + { + "id": "center", + "label": "Center", + "type": "vec2", + "default": [0.0, 0.0], + "min": [-1.0, -1.0], + "max": [1.0, 1.0], + "step": [0.001, 0.001] + }, + { + "id": "sourceMix", + "label": "Source Mix", + "type": "float", + "default": 0.0, + "min": 0.0, + "max": 1.0, + "step": 0.01 + } + ] +} diff --git a/shaders/singularity/shader.slang b/shaders/singularity/shader.slang new file mode 100644 index 0000000..b747ac8 --- /dev/null +++ b/shaders/singularity/shader.slang @@ -0,0 +1,48 @@ +float2 singularitySpiral(float2 c, float time, float iterator) +{ + float radiusSq = max(dot(c, c), 0.0001); + float angle = 0.5 * log(radiusSq) + time * iterator; + return float2( + c.x * cos(angle + 0.0) + c.y * cos(angle + 11.0), + c.x * cos(angle + 33.0) + c.y * cos(angle + 0.0)) / max(iterator, 0.001); +} + +float4 shadeVideo(ShaderContext context) +{ + float2 resolution = max(context.outputResolution, float2(1.0, 1.0)); + float2 fragCoord = context.uv * resolution; + float safeScale = max(scale, 0.001); + float safeRingRadius = max(ringRadius, 0.001); + float safeTightness = max(tightness, 0.001); + float time = context.time * speed; + + float2 p = (fragCoord + fragCoord - resolution) / resolution.y / safeScale; + p -= center; + + float iterator = 0.2; + float2 diagonal = float2(-1.0, 1.0); + float2 blackholeCenter = p - iterator * diagonal; + float gravity = iterator * strength / max(dot(blackholeCenter, blackholeCenter), 0.0001); + float2 skew = diagonal / (0.1 + gravity); + + float2 c = float2(p.x + p.y, p.x * skew.x + p.y * skew.y); + float2 v = singularitySpiral(c, time, iterator); + float2 waves = float2(0.0001, 0.0001); + + for (; iterator < 9.0; iterator += 1.0) + { + waves += 1.0 + sin(v); + v += 0.7 * sin(v.yx * iterator + time) / iterator + 0.5; + } + + float diskRadius = length(sin(v / 0.3) * 0.4 + c * float2(2.0, 4.0)); + float disk = 2.0 + diskRadius * diskRadius * (0.25 * safeTightness) - diskRadius; + float centerDarkness = 0.5 + 1.0 / max(dot(c, c), 0.0001); + float rim = 0.025 + abs(length(p) - safeRingRadius) * safeTightness; + float4 redBlueGradient = exp(c.x * float4(0.6, -0.4, -1.0, 0.0) * colorShift); + float4 waveColor = waves.xyyx; + + float4 color = 1.0 - exp(-redBlueGradient / max(waveColor, float4(0.0001, 0.0001, 0.0001, 0.0001)) / disk / centerDarkness / rim * brightness); + color.a = 1.0; + return saturate(lerp(color, context.sourceColor, sourceMix)); +} diff --git a/shaders/studio-color/shader.json b/shaders/studio-color/shader.json index ee61b6e..4e9c6b7 100644 --- a/shaders/studio-color/shader.json +++ b/shaders/studio-color/shader.json @@ -2,7 +2,7 @@ "id": "studio-color", "name": "Studio Color", "description": "A built-in sample shader package that demonstrates the runtime parameter contract.", - "category": "Built-in", + "category": "Color", "entryPoint": "shadeVideo", "parameters": [ { diff --git a/shaders/temporal-ghost-trail/shader.json b/shaders/temporal-ghost-trail/shader.json index 3b9a7e7..5282851 100644 --- a/shaders/temporal-ghost-trail/shader.json +++ b/shaders/temporal-ghost-trail/shader.json @@ -2,7 +2,7 @@ "id": "temporal-ghost-trail", "name": "Temporal Ghost Trail", "description": "Blends older pre-layer input frames into the current layer input for a soft temporal trail.", - "category": "Built-in", + "category": "Temporal", "entryPoint": "shadeVideo", "temporal": { "enabled": true, diff --git a/shaders/temporal-low-fps/shader.json b/shaders/temporal-low-fps/shader.json index a2d10ec..326644b 100644 --- a/shaders/temporal-low-fps/shader.json +++ b/shaders/temporal-low-fps/shader.json @@ -2,7 +2,7 @@ "id": "temporal-low-fps", "name": "Temporal Low FPS", "description": "Holds older source frames to create a deliberate choppy playback look.", - "category": "Built-in", + "category": "Temporal", "entryPoint": "shadeVideo", "temporal": { "enabled": true, diff --git a/shaders/vhs/shader.json b/shaders/vhs/shader.json index cdfc3d4..3f2d35b 100644 --- a/shaders/vhs/shader.json +++ b/shaders/vhs/shader.json @@ -1,8 +1,8 @@ { "id": "vhs", "name": "VHS", - "description": "VHS with wiggle, smear, and YIQ-style color separation inspired by the Godot shader reference.", - "category": "Built-in", + "description": "VHS with wiggle, smear, and YIQ-style color separation inspired by nostalgic analog references.", + "category": "Glitch", "entryPoint": "shadeVideo", "parameters": [ { @@ -95,6 +95,24 @@ "max": 0.2, "step": 0.005 }, + { + "id": "staticAmount", + "label": "Analog Static", + "type": "float", + "default": 0.045, + "min": 0.0, + "max": 0.25, + "step": 0.005 + }, + { + "id": "staticLines", + "label": "Static Lines", + "type": "float", + "default": 0.65, + "min": 0.0, + "max": 1.5, + "step": 0.01 + }, { "id": "noiseSize", "label": "Noise Size", diff --git a/shaders/vhs/shader.slang b/shaders/vhs/shader.slang index 1e8a523..1c501a9 100644 --- a/shaders/vhs/shader.slang +++ b/shaders/vhs/shader.slang @@ -44,6 +44,13 @@ float noiseHash(float2 p) return frac(sin(dot(p, float2(127.1, 311.7))) * 43758.5453123); } +// Gold Noise (c)2015 dcerisano@standard3d.com, adapted for Slang. +float goldNoise(float2 xy, float seed) +{ + const float phi = 1.61803398874989484820459; + return frac(tan(distance(xy * phi, xy) * seed) * xy.x); +} + float grainScalar(float2 uv) { return frac(sin(dot(uv, float2(12.9898, 78.233))) * 43758.5453); @@ -63,6 +70,56 @@ float3 animatedChromaGrain(float2 uv, float time, float2 outputResolution, float return float3(r, g, b) * 2.0 - 1.0; } +float valueNoise2(float2 p) +{ + float2 cell = floor(p); + float2 f = frac(p); + float2 u = f * f * (3.0 - 2.0 * f); + + float a = noiseHash(cell); + float b = noiseHash(cell + float2(1.0, 0.0)); + float c = noiseHash(cell + float2(0.0, 1.0)); + float d = noiseHash(cell + float2(1.0, 1.0)); + + return lerp(lerp(a, b, u.x), lerp(c, d, u.x), u.y); +} + +float tapeLineNoise(float2 uv, float time, float2 outputResolution) +{ + float y = floor(uv.y * outputResolution.y); + float slowLine = valueNoise2(float2(y * 0.021, floor(time * 10.0))); + float fastLine = noiseHash(float2(y * 1.73, floor(time * 59.94))); + float line = (slowLine * 0.7 + fastLine * 0.3) * 2.0 - 1.0; + + float band = sin(uv.y * outputResolution.y * 0.42 + time * 36.0); + return line * (0.65 + 0.35 * band); +} + +float3 analogStatic(float2 uv, float time, float2 outputResolution) +{ + float2 safeResolution = max(outputResolution, float2(1.0, 1.0)); + float2 pixel = floor(uv * safeResolution / max(noiseSize, 0.25)); + float frame = floor(time * 59.94); + float seed = frac(time); + + float2 goldPixel = pixel + float2(0.37, 0.61) + frame; + float snowA = goldNoise(goldPixel, seed + 0.1); + float snowB = goldNoise(goldPixel * float2(0.37, 2.11) + float2(19.0, 41.0), seed + 0.2); + float snowC = goldNoise(goldPixel * float2(1.73, 0.81) + float2(53.0, 7.0), seed + 0.3); + float snow = (snowA * 0.72 + snowB * 0.28) * 2.0 - 1.0; + + float lineNoise = tapeLineNoise(uv, time, safeResolution); + float dropoutSeed = goldNoise(float2(floor(uv.y * safeResolution.y * 0.25) + 1.0, frame + 2.0), seed + 0.4); + float dropout = smoothstep(0.965, 1.0, dropoutSeed); + float fleck = smoothstep(0.988, 1.0, snowA) - smoothstep(0.0, 0.012, snowC); + + float scan = sin(uv.y * safeResolution.y * 3.14159265); + float scanMask = 0.55 + 0.45 * scan * scan; + float lumaNoise = snow * 0.55 + lineNoise * staticLines * 0.45 + fleck * 0.7 + dropout * lineNoise * 1.2; + + return float3(lumaNoise * scanMask, lumaNoise * 0.42, lumaNoise * 0.72); +} + float3 softBloom(float2 uv, float2 outputResolution, float radius) { float2 pixel = 1.0 / max(outputResolution, float2(1.0, 1.0)); @@ -164,6 +221,11 @@ float4 shadeVideo(ShaderContext context) color.rg = lerp(color.rg, float2(color.r, color.g) + speckle.xy * noiseAmount * 0.2 * chunkiness, 0.35); color.b = lerp(color.b, color.b + speckle.z * noiseAmount * 0.28 * chunkiness, 0.5); + float3 staticNoise = analogStatic(context.uv, context.time, context.outputResolution); + float staticMask = lerp(0.45, 1.15, 1.0 - saturate(luma)); + color += staticNoise * staticAmount * staticMask; + color = lerp(color, color + float3(staticNoise.r * 0.22, staticNoise.g * 0.08, -staticNoise.b * 0.08), saturate(staticAmount * 2.0)); + float3 grayscale = float3(luma, luma, luma); color = lerp(color, grayscale, fadeAmount * 0.18); color = color * (1.0 - fadeAmount * 0.08) + float3(0.055, 0.055, 0.065) * fadeAmount; diff --git a/shaders/video-cube/shader.json b/shaders/video-cube/shader.json index 6c7713b..7a1b912 100644 --- a/shaders/video-cube/shader.json +++ b/shaders/video-cube/shader.json @@ -2,7 +2,7 @@ "id": "video-cube", "name": "Video Cube", "description": "Maps the live video onto the faces of a rotating cube in screen space.", - "category": "Built-in", + "category": "Transform", "entryPoint": "shadeVideo", "parameters": [ { diff --git a/shaders/video-transform/shader.json b/shaders/video-transform/shader.json index 67ca809..1f96ae8 100644 --- a/shaders/video-transform/shader.json +++ b/shaders/video-transform/shader.json @@ -2,7 +2,7 @@ "id": "video-transform", "name": "Video Transform", "description": "Zooms, pans, and rotates the video by remapping output pixels back into source UV space.", - "category": "Utility", + "category": "Transform", "entryPoint": "shadeVideo", "parameters": [ { diff --git a/shaders/waveform-overlay/shader.json b/shaders/waveform-overlay/shader.json index e97a1b3..670caa1 100644 --- a/shaders/waveform-overlay/shader.json +++ b/shaders/waveform-overlay/shader.json @@ -2,7 +2,7 @@ "id": "waveform-overlay", "name": "Waveform Overlay", "description": "Draws a lightweight luma waveform overlay along the bottom of the video.", - "category": "Utility", + "category": "Scopes & Guides", "entryPoint": "shadeVideo", "textures": [ { diff --git a/ui/package-lock.json b/ui/package-lock.json index e223cf9..f02f0fa 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -8,6 +8,8 @@ "name": "video-shader-control-ui", "version": "0.1.0", "dependencies": { + "@uiw/color-convert": "^2.10.1", + "@uiw/react-color-wheel": "^2.10.1", "lucide-react": "^0.511.0", "react": "^18.3.1", "react-dom": "^18.3.1" @@ -251,6 +253,16 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.29.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz", + "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.28.6", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz", @@ -1188,6 +1200,50 @@ "dev": true, "license": "MIT" }, + "node_modules/@uiw/color-convert": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/@uiw/color-convert/-/color-convert-2.10.1.tgz", + "integrity": "sha512-/Z3YfBiX+SErRM59yQH88Id+Xy/k10nnkfTuqhX6RB2yYUcG57DoFqb6FudhiQ5fwzKvKf1k4xq9lfT1UTFUKQ==", + "license": "MIT", + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0" + } + }, + "node_modules/@uiw/react-color-wheel": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-wheel/-/react-color-wheel-2.10.1.tgz", + "integrity": "sha512-LnO7CAsfSDfOSUFUeedNycVtx+ODpkGgcgxAT4QindU2BplTcl3mxQJxC1SIszq9zFdGK+1nXhG8N8ZmgvmVYw==", + "license": "MIT", + "dependencies": { + "@uiw/color-convert": "2.10.1", + "@uiw/react-drag-event-interactive": "2.10.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-drag-event-interactive": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/@uiw/react-drag-event-interactive/-/react-drag-event-interactive-2.10.1.tgz", + "integrity": "sha512-eArtX/XdSrg5aQs8CV0vne9vChybw2GkNZCP9H68zjBBzucuYgjURqKBJ/+3jid06YpRZ5zz/YTnAlySqOt0Ag==", + "license": "MIT", + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, "node_modules/@vitejs/plugin-react": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz", diff --git a/ui/package.json b/ui/package.json index 7946c2b..726a157 100644 --- a/ui/package.json +++ b/ui/package.json @@ -9,6 +9,8 @@ "preview": "vite preview" }, "dependencies": { + "@uiw/color-convert": "^2.10.1", + "@uiw/react-color-wheel": "^2.10.1", "lucide-react": "^0.511.0", "react": "^18.3.1", "react-dom": "^18.3.1" diff --git a/ui/src/components/LayerCard.jsx b/ui/src/components/LayerCard.jsx index 939457e..feb2fcf 100644 --- a/ui/src/components/LayerCard.jsx +++ b/ui/src/components/LayerCard.jsx @@ -2,7 +2,6 @@ import { GripVertical, Trash2 } from "lucide-react"; import { postJson } from "../api/controlApi"; import { ParameterField } from "./ParameterField"; -import { ShaderPicker } from "./ShaderPicker"; export function LayerCard({ layer, @@ -19,6 +18,8 @@ export function LayerCard({ onRemove, onLayerParameterChange, }) { + const selectedShader = shaders.find((shader) => shader.id === layer.shaderId); + return (
-
- - postJson("/api/layers/set-shader", { - layerId: layer.id, - shaderId, - }) - } - /> -
- {layer.temporal?.enabled ? (
@@ -118,6 +105,13 @@ export function LayerCard({
)} + {selectedShader?.description ? ( +
+
{selectedShader.category || "Shader"}
+

{selectedShader.description}

+
+ ) : null} +

Parameters

+
); } @@ -48,13 +64,26 @@ function colorValueToHex(value) { return `#${colorComponentToHex(values[0])}${colorComponentToHex(values[1])}${colorComponentToHex(values[2])}`; } -function hexToColorValue(hex, alpha) { - const sanitized = /^#[0-9a-fA-F]{6}$/.test(hex) ? hex.slice(1) : "000000"; +function colorValueToHsva(value) { + const values = [...(value ?? [])]; + while (values.length < 4) { + values.push(values.length === 3 ? 1 : 0); + } + return rgbaToHsva({ + r: Math.round(clamp01(values[0]) * 255), + g: Math.round(clamp01(values[1]) * 255), + b: Math.round(clamp01(values[2]) * 255), + a: clamp01(values[3]), + }); +} + +function hsvaToColorValue(hsva, alpha) { + const rgba = hsvaToRgba({ ...hsva, a: clamp01(alpha ?? hsva.a ?? 1) }); return [ - parseInt(sanitized.slice(0, 2), 16) / 255, - parseInt(sanitized.slice(2, 4), 16) / 255, - parseInt(sanitized.slice(4, 6), 16) / 255, - clamp01(alpha ?? 1), + clamp01(rgba.r / 255), + clamp01(rgba.g / 255), + clamp01(rgba.b / 255), + clamp01(alpha ?? rgba.a ?? 1), ]; } @@ -69,7 +98,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) { sendValue, } = useThrottledParameterValue(parameter, onParameterChange); - const header = ; + const defaultValue = parameter.defaultValue; + const resetDisabled = defaultValue === undefined || valuesMatch(draftValue, defaultValue); + const resetParameter = () => { + if (defaultValue !== undefined) { + sendValue(defaultValue); + } + }; + const header = ( + + ); if (parameter.type === "float") { return ( @@ -151,14 +194,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) { return (
{header} -
- sendValue(hexToColorValue(event.target.value, values[3]))} +
+
+ > + scheduleSendValue(hsvaToColorValue(color.hsva, values[3]))} + /> +
+
diff --git a/ui/src/components/ShaderPicker.jsx b/ui/src/components/ShaderPicker.jsx index 8d27d9a..6913ac8 100644 --- a/ui/src/components/ShaderPicker.jsx +++ b/ui/src/components/ShaderPicker.jsx @@ -12,6 +12,26 @@ function matchesShader(shader, query) { .some((value) => value.toLowerCase().includes(normalizedQuery)); } +function shaderSummary(shader) { + if (!shader) { + return "Search available shaders"; + } + + return shader.description || "No description"; +} + +function ShaderOptionContent({ shader }) { + return ( + <> + + {shader.name} + {shader.category ? {shader.category} : null} + + {shaderSummary(shader)} + + ); +} + export function ShaderPicker({ id, label = "Shader", shaders, value, onChange }) { const [query, setQuery] = useState(""); const [open, setOpen] = useState(false); @@ -38,12 +58,13 @@ export function ShaderPicker({ id, label = "Shader", shaders, value, onChange }) onClick={() => setOpen((current) => !current)} > - {selectedShader?.name ?? "Choose shader"} - - {selectedShader - ? `${selectedShader.category ? `${selectedShader.category} / ` : ""}${selectedShader.id}` - : "Search available shaders"} + + {selectedShader?.name ?? "Choose shader"} + {selectedShader?.category ? ( + {selectedShader.category} + ) : null} + {shaderSummary(selectedShader)}