UV Remap Function HLSL

2024-11-09 11:27 UTC gpt-4o Open in ChatGPT ↗

Here’s an HLSL function to remap a float2 UV value from one range to another for use in Unity shaders. This function remaps the input uv value from the range specified by srcMin and srcMax to the range defined by destMin and destMax:

float2 RemapUV(float2 uv, float2 srcMin, float2 srcMax, float2 destMin, float2 destMax)
{
    // Normalize the uv from the source range
    float2 normalizedUV = (uv - srcMin) / (srcMax - srcMin);

    // Scale and shift to the destination range
    float2 remappedUV = destMin + normalizedUV * (destMax - destMin);

    return remappedUV;
}

Explanation:

uv: The input float2 value to remap.
srcMin and srcMax: Define the range of the input values.
destMin and destMax: Define the range of the output values.

You can use this function in your shader by passing the appropriate ranges for the input and output UV mappings.

ok let’s say I read from a bbox (minx, maxx, miny, maxy) and scale my UVs so that the region of interest convers the entire uv range.

   float2 uv = remap(i.uv, float2(0,0), float2(1,1), _Min ,_Max);

however, i want to preserve the ratio of the bbox, and not stretch the image unproportionally

To ensure that the aspect ratio of the bounding box is preserved when remapping the UV coordinates, you’ll need to modify the remapping to scale the UVs proportionally within the destination region. Here’s an HLSL function that accounts for preserving the aspect ratio of the bounding box:

float2 RemapPreserveAspectRatio(float2 uv, float2 srcMin, float2 srcMax, float2 bboxMin, float2 bboxMax)
{
    // Calculate the source dimensions (should typically be [0,1] range)
    float2 srcSize = srcMax - srcMin;

    // Calculate the bounding box dimensions
    float2 bboxSize = bboxMax - bboxMin;

    // Calculate aspect ratios
    float srcAspect = srcSize.x / srcSize.y;
    float bboxAspect = bboxSize.x / bboxSize.y;

    // Determine the scale factor to preserve aspect ratio
    float2 scaleFactor;
    if (srcAspect > bboxAspect)
    {
        // Source is wider than the bbox, scale based on width
        scaleFactor = float2(1.0, bboxAspect / srcAspect);
    }
    else
    {
        // Source is taller than the bbox, scale based on height
        scaleFactor = float2(srcAspect / bboxAspect, 1.0);
    }

    // Center the UVs with padding to maintain aspect ratio
    float2 centeredUV = uv * scaleFactor + 0.5 * (1.0 - scaleFactor);

    // Remap to the bounding box with preserved aspect ratio
    float2 remappedUV = bboxMin + centeredUV * (bboxMax - bboxMin);

    return remappedUV;
}

Explanation:

uv: The input UV coordinates (typically from [0, 1] range).
srcMin and srcMax: Define the input source range (commonly [0,0] to [1,1]).
bboxMin and bboxMax: Define the destination bounding box range for remapping.
The function calculates the aspect ratios of the source and bounding box and applies a scale factor to preserve the aspect ratio while centering the UVs.

This approach ensures that the remapped region fills as much of the bounding box as possible without stretching or distorting the image. The centeredUV calculation helps maintain the aspect ratio and places any necessary padding symmetrically.

To ensure that the largest side of the bounding box fits while preserving the aspect ratio, you need to scale down the shorter side to match the bounding box size without cropping. This approach adjusts the scale so that the content fits entirely within the bounding box, potentially leaving padding on the shorter dimension.

Here’s how you can modify the function to achieve that:

float2 RemapFitLargestSide(float2 uv, float2 srcMin, float2 srcMax, float2 bboxMin, float2 bboxMax)
{
    // Calculate the source dimensions (should typically be [0,1] range)
    float2 srcSize = srcMax - srcMin;

    // Calculate the bounding box dimensions
    float2 bboxSize = bboxMax - bboxMin;

    // Calculate aspect ratios
    float srcAspect = srcSize.x / srcSize.y;
    float bboxAspect = bboxSize.x / bboxSize.y;

    // Determine the scale factor to fit the largest side
    float2 scaleFactor;
    if (srcAspect > bboxAspect)
    {
        // Source is wider, scale to fit height
        scaleFactor = float2(bboxAspect / srcAspect, 1.0);
    }
    else
    {
        // Source is taller, scale to fit width
        scaleFactor = float2(1.0, srcAspect / bboxAspect);
    }

    // Scale UVs while maintaining aspect ratio and fit within the bounding box
    float2 fittedUV = (uv - srcMin) / srcSize * scaleFactor + (1.0 - scaleFactor) * 0.5;

    // Remap to the bounding box
    float2 remappedUV = bboxMin + fittedUV * (bboxMax - bboxMin);

    return remappedUV;
}

Explanation:

The function calculates a scale factor to ensure that the largest dimension fits while maintaining the aspect ratio.
Padding is applied symmetrically along the shorter dimension, ensuring that the content fits entirely within the bounding box without cropping.
fittedUV scales and centers the UVs appropriately before remapping to the target bounding box.

This approach will ensure that the largest dimension fits while preserving the aspect ratio, with the shorter dimension potentially having padding.

You’re correct; my previous response did not achieve the desired behavior correctly for maintaining aspect ratio without stretching and ensuring that the largest side fits within the bounding box. Here’s how you can properly achieve the desired effect, where the UV coordinates are scaled proportionally, fitting the largest side while preserving the aspect ratio and avoiding stretching:

Corrected Function:

float2 RemapFitLargestSidePreserveAspectRatio(float2 uv, float2 srcMin, float2 srcMax, float2 bboxMin, float2 bboxMax)
{
    // Calculate the source dimensions (typically in the [0, 1] range)
    float2 srcSize = srcMax - srcMin;

    // Calculate the bounding box dimensions
    float2 bboxSize = bboxMax - bboxMin;

    // Calculate aspect ratios
    float srcAspect = srcSize.x / srcSize.y;
    float bboxAspect = bboxSize.x / bboxSize.y;

    // Determine the scale factor to fit the largest side without stretching
    float scale;
    if (srcAspect > bboxAspect)
    {
        // Fit based on width (scale height proportionally)
        scale = bboxSize.x / srcSize.x;
    }
    else
    {
        // Fit based on height (scale width proportionally)
        scale = bboxSize.y / srcSize.y;
    }

    // Calculate the scaled UV size
    float2 scaledSize = srcSize * scale;

    // Center the UVs within the bounding box
    float2 padding = (bboxSize - scaledSize) * 0.5;
    float2 centeredUV = bboxMin + padding + ((uv - srcMin) / srcSize) * scaledSize;

    return centeredUV;
}

Explanation:

The function calculates the scale factor based on fitting the largest dimension while preserving the aspect ratio.
scale is determined by comparing the aspect ratios, ensuring that the entire source fits within the bounding box without any stretching.
The UV coordinates are centered by adding padding in the shorter dimension.

Key Points:

The largest side of the bounding box is fit, with any extra space evenly distributed as padding along the shorter side.
The aspect ratio is preserved, and there is no stretching. The content is fully contained within the bounding box.

Thank you for the clarification. You want to fit the largest side so that the entire content fits within the bounding box, preserving the aspect ratio, with potential padding on the shorter side to maintain that ratio (essentially ensuring a “fit” behavior, not cropping or filling).

Here’s how you can correctly achieve this “fit” behavior without cropping:

Corrected Function for Aspect-Ratio Preserving Fit:

float2 RemapFit(float2 uv, float2 srcMin, float2 srcMax, float2 bboxMin, float2 bboxMax)
{
    // Calculate the source dimensions (typically in the [0, 1] range)
    float2 srcSize = srcMax - srcMin;

    // Calculate the bounding box dimensions
    float2 bboxSize = bboxMax - bboxMin;

    // Calculate aspect ratios
    float srcAspect = srcSize.x / srcSize.y;
    float bboxAspect = bboxSize.x / bboxSize.y;

    // Determine the scale factor to fit the largest dimension within the bounding box
    float scale;
    if (srcAspect > bboxAspect)
    {
        // Source is wider, scale to fit based on width
        scale = bboxSize.y / srcSize.y; // Fit to height
    }
    else
    {
        // Source is taller, scale to fit based on height
        scale = bboxSize.x / srcSize.x; // Fit to width
    }

    // Calculate the scaled size of the source
    float2 scaledSize = srcSize * scale;

    // Calculate padding needed to center the content in the bounding box
    float2 padding = (bboxSize - scaledSize) * 0.5;

    // Scale and center the UV coordinates
    float2 fittedUV = ((uv - srcMin) / srcSize) * scaledSize + bboxMin + padding;

    return fittedUV;
}

Explanation:

The function scales the UV coordinates to ensure that the entire source fits within the bounding box, preserving the aspect ratio.
It computes the scale factor to fit the largest dimension of the source content within the bounding box dimensions.
Padding is calculated and applied to center the content within the bounding box, ensuring no cropping occurs.
The aspect ratio is preserved without stretching or cropping. The content “fits” entirely within the bounding box, with possible padding on the shorter side to maintain the aspect ratio.

This approach will ensure that the largest side fits entirely within the bounding box, and any extra space is evenly distributed as padding on the shorter side. This behavior matches the “fit” requirement you described.

To create a function that performs brightness correction on shadows, midtones, and highlights, we can break down the correction into three ranges of the input values and apply separate adjustments to each. Here’s a function in HLSL that achieves this:

HLSL Function for Shadows, Midtones, and Highlights Correction:

float3 AdjustShadowsMidtonesHighlights(float3 color, float shadowStrength, float midtoneStrength, float highlightStrength)
{
    // Define ranges for shadows, midtones, and highlights
    float3 shadows = saturate(color * 2.0);          // Shadow range (low end of color values)
    float3 midtones = saturate(2.0 * (color - 0.25)); // Midtone range (middle color values)
    float3 highlights = saturate((color - 0.5) * 2.0); // Highlight range (high end of color values)

    // Apply strength adjustments
    float3 adjustedShadows = shadows * shadowStrength;
    float3 adjustedMidtones = midtones * midtoneStrength;
    float3 adjustedHighlights = highlights * highlightStrength;

    // Combine the adjusted values, preserving their respective ranges
    float3 result = lerp(color, adjustedShadows, shadows);
    result = lerp(result, adjustedMidtones, midtones);
    result = lerp(result, adjustedHighlights, highlights);

    return saturate(result); // Clamp final output to [0, 1]
}

Explanation:

The function divides the input color (assumed to be in the [0,1] range) into three regions: shadows, midtones, and highlights.
The shadowStrength, midtoneStrength, and highlightStrength parameters control the brightness adjustment for each range.
saturate ensures that values remain within [0,1].
Linear interpolation (lerp) is used to blend the original color with the adjusted values for each range.

Usage Example:

shadowStrength = 1.2 can be used to brighten shadows.
midtoneStrength = 0.8 can be used to darken midtones.
highlightStrength = 1.1 can be used to brighten highlights.

This function allows for fine-grained control over the brightness of shadows, midtones, and highlights in a color image, providing a simple but effective way to perform tonal adjustments.

Yes, we can enhance this approach further by introducing a more sophisticated adjustment that also targets enhancing the contrast in details within each tonal range (shadows, midtones, and highlights). To achieve this, we can use a method similar to a contrast curve adjustment combined with the initial strength adjustments. Here is an improved function that aims to increase contrast in details while applying brightness corrections for shadows, midtones, and highlights:

Improved Shadows, Midtones, and Highlights with Detail Contrast Enhancement:

float3 AdjustSMHWithDetailContrast(float3 color, float shadowStrength, float midtoneStrength, float highlightStrength, float detailContrast)
{
    // Define masks for shadows, midtones, and highlights
    float3 shadows = saturate(1.0 - smoothstep(0.0, 0.25, color));  // Shadow mask (inverted for smooth transition)
    float3 midtones = saturate(smoothstep(0.2, 0.8, color));        // Midtone mask with a smoother transition
    float3 highlights = saturate(smoothstep(0.75, 1.0, color));     // Highlight mask

    // Calculate adjustment factors for each tonal region
    float3 adjustedShadows = color * pow(1.0 + shadowStrength, shadows) * (1.0 + detailContrast * (shadows - 0.5));
    float3 adjustedMidtones = color * pow(1.0 + midtoneStrength, midtones) * (1.0 + detailContrast * (midtones - 0.5));
    float3 adjustedHighlights = color * pow(1.0 + highlightStrength, highlights) * (1.0 + detailContrast * (highlights - 0.5));

    // Blend the adjustments for each region with the original color
    float3 result = lerp(color, adjustedShadows, shadows);
    result = lerp(result, adjustedMidtones, midtones);
    result = lerp(result, adjustedHighlights, highlights);

    return saturate(result); // Clamp output to [0, 1]
}

Key Improvements:

Smooth Transitions: Smoothstep functions are used to create smoother, more natural transitions between shadows, midtones, and highlights.
Detail Contrast: The detailContrast parameter boosts contrast in details for each range, which helps to enhance fine features without overexposing or underexposing the image.
Exponential Adjustment: The pow function provides a more flexible non-linear control over the intensity of adjustments in each range.

Explanation:

shadows, midtones, and highlights define masks for their respective tonal regions with smooth transitions to avoid harsh boundaries.
The adjustment for each region is combined with a detail contrast enhancement factor, which increases the local contrast of details within each region.
This approach retains detail contrast and makes the adjustments more perceptually pleasing.

Usage:

Adjust shadowStrength, midtoneStrength, and highlightStrength to control brightness corrections.
Increase or decrease detailContrast to enhance or reduce contrast in fine details within each tonal range.

This method provides more control over tonal correction while also enhancing contrast, which can give the image more depth and visual impact.

To specifically increase contrast and enhance details, we can focus on applying a contrast adjustment that enhances local detail while preserving overall image structure. This can be done using an improved local contrast enhancement technique, such as applying a basic contrast curve and introducing a sharpening effect to enhance detail.

Function for Increasing Contrast and Enhancing Details

Here’s an HLSL function that does just that:

float3 EnhanceContrastAndDetails(float3 color, float contrastStrength, float detailEnhance)
{
    // Step 1: Increase Contrast
    float3 contrastedColor = lerp(0.5, color, contrastStrength); // Move color toward or away from mid-gray

    // Step 2: Enhance Local Details (unsharp masking technique)
    float3 blurredColor = tex2D(_MainTex, i.uv + float2(-0.001, 0.0)).rgb * 0.2 +
                          tex2D(_MainTex, i.uv + float2(0.001, 0.0)).rgb * 0.2 +
                          tex2D(_MainTex, i.uv + float2(0.0, -0.001)).rgb * 0.2 +
                          tex2D(_MainTex, i.uv + float2(0.0, 0.001)).rgb * 0.2 +
                          color * 0.2; // Simple blur kernel
    float3 detail = color - blurredColor; // Extract details
    float3 enhancedColor = contrastedColor + detail * detailEnhance; // Add enhanced details

    return saturate(enhancedColor); // Clamp the result to [0, 1]
}

Explanation:

Contrast Adjustment: The lerp function moves the color values towards or away from a mid-gray value (0.5), effectively increasing or decreasing contrast. The contrastStrength parameter controls the intensity of this adjustment.
Detail Enhancement: A simple unsharp masking technique is used to enhance details. This involves creating a blurred version of the input color and then extracting details by subtracting the blurred version from the original color. The detailEnhance parameter controls the amount of detail enhancement applied.

Usage:

contrastStrength: Controls the amount of contrast. Higher values increase contrast.
detailEnhance: Controls the enhancement of fine details. Increasing this value boosts detail clarity.

Important Note:

This approach is simple but effective for basic contrast and detail enhancement. For more sophisticated detail enhancement, a more advanced approach like bilateral filtering or frequency separation can be used, but this simple function works well for many use cases.

Yes, you can perform Sobel edge detection in HLSL to enhance the edges in an image. The Sobel operator detects edges by applying horizontal and vertical gradient filters to the image, highlighting areas where there is a rapid change in intensity.

Here’s a basic HLSL function to perform Sobel edge detection on a texture:

Sobel Edge Detection in HLSL

float SobelEdgeDetection(float2 uv, sampler2D tex)
{
    // Sobel filter kernels for horizontal and vertical edge detection
    float3 Gx[3] = { float3(-1, 0, 1), float3(-2, 0, 2), float3(-1, 0, 1) };
    float3 Gy[3] = { float3(1, 2, 1), float3(0, 0, 0), float3(-1, -2, -1) };

    float texelSize = 1.0 / 512.0; // Adjust based on your texture size
    float2 texOffset[8] = {
        float2(-texelSize, texelSize),   // Top-left
        float2(0.0, texelSize),         // Top
        float2(texelSize, texelSize),   // Top-right
        float2(-texelSize, 0.0),        // Left
        float2(texelSize, 0.0),         // Right
        float2(-texelSize, -texelSize), // Bottom-left
        float2(0.0, -texelSize),       // Bottom
        float2(texelSize, -texelSize)   // Bottom-right
    };

    // Sample the texture at each offset and apply Sobel filters
    float3 sample[8];
    for (int i = 0; i < 8; i++)
    {
        sample[i] = tex2D(tex, uv + texOffset[i]).rgb;
    }

    // Calculate the Sobel response for X and Y directions
    float3 edgeX = Gx[0] * sample[0] + Gx[1] * sample[1] + Gx[2] * sample[2] +
                   Gx[0] * sample[3] + Gx[2] * sample[4] +
                   Gx[0] * sample[5] + Gx[1] * sample[6] + Gx[2] * sample[7];

    float3 edgeY = Gy[0] * sample[0] + Gy[1] * sample[1] + Gy[2] * sample[2] +
                   Gy[0] * sample[3] + Gy[2] * sample[4] +
                   Gy[0] * sample[5] + Gy[1] * sample[6] + Gy[2] * sample[7];

    // Calculate the magnitude of the gradient
    float edgeMagnitude = length(edgeX) + length(edgeY);
    return saturate(edgeMagnitude); // Clamp the result between 0 and 1
}

Explanation:

Sobel Filters: Gx and Gy are the Sobel kernels used to detect edges in the horizontal and vertical directions, respectively.
Texture Sampling: The function samples the neighboring pixels using the defined offsets to compute the gradients.
Gradient Magnitude: The magnitude of the gradient gives the intensity of the edge.
texelSize: This determines the distance between samples. Adjust it based on your texture resolution (e.g., 1.0 / textureWidth).

Usage:

Apply this function within a pixel shader, passing the texture coordinates (uv) and the sampler (tex) of the texture you want to process.
The output value represents the intensity of detected edges, with higher values corresponding to stronger edges.

This approach effectively highlights edges in the image using the Sobel operator, making it suitable for edge detection tasks in shaders.

For a more computationally inexpensive edge detection approach, you can use a simplified version that relies on a basic difference-of-neighbor pixels technique. This method detects edges using fewer texture samples and performs less computation than the Sobel operator.

Cheaper Edge Detection Function

Here’s a basic HLSL function for a simpler edge detection:

float SimpleEdgeDetection(float2 uv, sampler2D tex, float texelSize)
{
    // Offsets for sampling neighboring pixels
    float2 offsets[4] = {
        float2(-texelSize, 0.0), // Left
        float2(texelSize, 0.0),  // Right
        float2(0.0, -texelSize), // Bottom
        float2(0.0, texelSize)   // Top
    };

    // Sample the center pixel
    float3 centerColor = tex2D(tex, uv).rgb;

    // Accumulate the absolute difference with neighbors
    float edgeStrength = 0.0;
    for (int i = 0; i < 4; i++)
    {
        float3 neighborColor = tex2D(tex, uv + offsets[i]).rgb;
        edgeStrength += length(centerColor - neighborColor); // Magnitude of color difference
    }

    return saturate(edgeStrength); // Clamp the result to [0, 1]
}

Explanation:

Sampling Neighbors: This function samples the four immediate neighbors (left, right, bottom, and top).
Color Difference Calculation: It calculates the magnitude of the difference between the center pixel and its neighbors. A larger difference indicates a stronger edge.
Cheaper Computation: Unlike the Sobel filter, this method does not require convolutions or as many texture reads, making it much cheaper and faster.

Parameters:

texelSize: This value determines the size of the sampling offset. For example, if your texture size is 512x512, you can set texelSize = 1.0 / 512.0.

Usage:

This approach works well for detecting edges with lower computational cost and can be useful in scenarios where performance is critical. However, it may not be as accurate or detailed as the Sobel operator for fine-grained edge detection.

To make the edges pop out more prominently, you can apply a power function to the detected edge strength. This will enhance the contrast of the edges, making strong edges appear even more distinct.

Here’s how you can modify the previous function to include a power operation for this enhancement:

Modified Simple Edge Detection with Power Enhancement

float SimpleEdgeDetectionWithPower(float2 uv, sampler2D tex, float texelSize, float edgePower)
{
    // Offsets for sampling neighboring pixels
    float2 offsets[4] = {
        float2(-texelSize, 0.0), // Left
        float2(texelSize, 0.0),  // Right
        float2(0.0, -texelSize), // Bottom
        float2(0.0, texelSize)   // Top
    };

    // Sample the center pixel
    float3 centerColor = tex2D(tex, uv).rgb;

    // Accumulate the absolute difference with neighbors
    float edgeStrength = 0.0;
    for (int i = 0; i < 4; i++)
    {
        float3 neighborColor = tex2D(tex, uv + offsets[i]).rgb;
        edgeStrength += length(centerColor - neighborColor); // Magnitude of color difference
    }

    // Apply a power function to enhance the edges
    edgeStrength = pow(edgeStrength, edgePower);

    return saturate(edgeStrength); // Clamp the result to [0, 1]
}

Explanation:

Edge Strength Calculation: The function computes the initial edge strength using the difference between the center pixel and its neighbors.
Power Function Application: The pow function is applied to edgeStrength with edgePower as the exponent. This boosts the contrast of detected edges. Values greater than 1 for edgePower will make stronger edges more pronounced, while values less than 1 will make them less pronounced.
Clamping: The result is clamped between 0 and 1 using saturate().

Parameters:

texelSize: Controls the sampling distance.
edgePower: Controls the amount of enhancement applied to the edge strength. Typical values might be in the range of 1.5 to 3.0 for boosting the prominence of edges.

Usage:

Setting a higher edgePower value will make the edges more prominent and pronounced, creating a “pop-out” effect.
You can experiment with different values of edgePower to get the desired level of edge enhancement for your specific use case.