Fix coordinate transformation in shader for position and rotation

Transform screen coordinates to texture coordinates (90° CW rotation):
- Position: (x,y) -> (y, 1-x)
- Angle: θ -> θ + 90°

Applied in linearFocusDistance, radialFocusDistance, and sampleBlurred
to fix preview not matching UI overlay position and rotation.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-01-29 16:53:34 +01:00
commit a99b6f222f

View file

@ -24,11 +24,14 @@ varying vec2 vTexCoord;
// Calculate signed distance from the focus region for LINEAR mode // Calculate signed distance from the focus region for LINEAR mode
float linearFocusDistance(vec2 uv) { float linearFocusDistance(vec2 uv) {
// Center point of the focus region // Center point of the focus region
vec2 center = vec2(uPositionX, uPositionY); // Transform from screen coordinates to texture coordinates (90° rotation)
// Screen (x,y) -> Texture (y, 1-x)
vec2 center = vec2(uPositionY, 1.0 - uPositionX);
vec2 offset = uv - center; vec2 offset = uv - center;
// Adjust angle by -90 degrees to compensate for portrait texture rotation // Adjust angle by +90 degrees to compensate for the coordinate transformation
float adjustedAngle = uAngle - 1.5707963; // The position transform is a 90° CW rotation, so angles transform as θ + 90°
float adjustedAngle = uAngle + 1.5707963;
float cosA = cos(adjustedAngle); float cosA = cos(adjustedAngle);
float sinA = sin(adjustedAngle); float sinA = sin(adjustedAngle);
@ -41,7 +44,9 @@ float linearFocusDistance(vec2 uv) {
// Calculate signed distance from the focus region for RADIAL mode // Calculate signed distance from the focus region for RADIAL mode
float radialFocusDistance(vec2 uv) { float radialFocusDistance(vec2 uv) {
// Center point of the focus region // Center point of the focus region
vec2 center = vec2(uPositionX, uPositionY); // Transform from screen coordinates to texture coordinates (90° rotation)
// Screen (x,y) -> Texture (y, 1-x)
vec2 center = vec2(uPositionY, 1.0 - uPositionX);
vec2 offset = uv - center; vec2 offset = uv - center;
// Adjust for aspect ratio to create ellipse // Adjust for aspect ratio to create ellipse
@ -50,7 +55,8 @@ float radialFocusDistance(vec2 uv) {
offset.x *= screenAspect; offset.x *= screenAspect;
// Apply rotation // Apply rotation
float adjustedAngle = uAngle - 1.5707963; // Adjust angle by +90 degrees to compensate for the coordinate transformation
float adjustedAngle = uAngle + 1.5707963;
float cosA = cos(adjustedAngle); float cosA = cos(adjustedAngle);
float sinA = sin(adjustedAngle); float sinA = sin(adjustedAngle);
vec2 rotated = vec2( vec2 rotated = vec2(
@ -107,7 +113,8 @@ vec4 sampleBlurred(vec2 uv, float blur) {
vec2 blurDir; vec2 blurDir;
if (uMode == 1) { if (uMode == 1) {
// Radial: blur away from center // Radial: blur away from center
vec2 center = vec2(uPositionX, uPositionY); // Transform from screen coordinates to texture coordinates (90° rotation)
vec2 center = vec2(uPositionY, 1.0 - uPositionX);
vec2 toCenter = uv - center; vec2 toCenter = uv - center;
float len = length(toCenter); float len = length(toCenter);
if (len > 0.001) { if (len > 0.001) {
@ -117,7 +124,8 @@ vec4 sampleBlurred(vec2 uv, float blur) {
} }
} else { } else {
// Linear: blur perpendicular to focus line // Linear: blur perpendicular to focus line
float blurAngle = uAngle; // Adjust angle for coordinate transformation
float blurAngle = uAngle + 1.5707963;
blurDir = vec2(cos(blurAngle), sin(blurAngle)); blurDir = vec2(cos(blurAngle), sin(blurAngle));
} }