OpenGL 着色器中图像的径向显示

Question

我正在尝试使用 OpenGL ES 中的着色器径向显示图像的着色器概念。最终目标是通过在呈现完整圆形进度纹理的片段着色器中丢弃片段来创建圆形进度条。

我已经对我的想法进行了编码 here in ShaderToy，因此您可以尝试一下。我似乎无法让它工作，而且由于无法调试，我很难找出原因。

这是我的片段着色器的 glsl 代码：

float magnitude(vec2 vec)
{
    return sqrt((vec.x * vec.x) + (vec.y * vec.y));
}

float angleBetween(vec2 v1, vec2 v2)
{
    return acos(dot(v1, v2) / (magnitude(v1) * magnitude(v2)));
}

float getTargetAngle() 
{
    return clamp(iGlobalTime, 0.0, 360.0);
}

// OpenGL uses upper left as origin by default
bool shouldDrawFragment(vec2 fragCoord)
{
    float targetAngle = getTargetAngle();

    float centerX = iResolution.x / 2.0;
    float centerY = iResolution.y / 2.0;
    vec2 center = vec2(centerX, centerY);

    vec2 up = vec2(centerX, 0.0) - center;
    vec2 v2 = fragCoord - center;

    float angleBetween = angleBetween(up, v2);

    return (angleBetween >= 0.0) && (angleBetween <= targetAngle);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
  vec2 uv = fragCoord.xy / iResolution.xy;
  if (shouldDrawFragment(fragCoord)) {
    fragColor = texture2D(iChannel0, vec2(uv.x, -uv.y));
  } else {
    fragColor = texture2D(iChannel1, vec2(uv.x, -uv.y));
  }
}

它从底部两边扫出来。我只是想让它从一个笔直向上的向量中扫出，并按顺时针方向移动。

Answer 1

试试这个代码：

const float PI     = 3.1415926;
const float TWO_PI = 6.2831852;

float magnitude(vec2 vec)
{
    return sqrt((vec.x * vec.x) + (vec.y * vec.y));
}

float angleBetween(vec2 v1, vec2 v2)
{
    return atan( v1.x - v2.x, v1.y - v2.y ) + PI;
}

float getTargetAngle() 
{
    return clamp( iGlobalTime, 0.0, TWO_PI );
}

// OpenGL uses upper left as origin by default
bool shouldDrawFragment(vec2 fragCoord)
{
    float targetAngle = getTargetAngle();

    float centerX = iResolution.x / 2.0;
    float centerY = iResolution.y / 2.0;
    vec2 center = vec2(centerX, centerY);

    float a = angleBetween(center, fragCoord );

    return a <= targetAngle;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
  vec2 uv = fragCoord.xy / iResolution.xy;
  if (shouldDrawFragment(fragCoord)) {
    fragColor = texture2D(iChannel0, vec2(uv.x, -uv.y));
  } else {
    fragColor = texture2D(iChannel1, vec2(uv.x, -uv.y));
  }
}

解释：

我所做的主要更改是计算两个向量之间的角度的方式：

return atan( v1.x - v2.x, v1.y - v2.y ) + PI;

这是v1和v2的差向量的角度。如果你交换 x 和 y 值，它会改变 0 角所在的方向，即如果你试试这个：

return atan( v1.y - v2.y, v1.x - v2.x ) + PI;

圆从右开始，而不是从上开始。你也可以反转atan的值来改变动画的方向。

在计算夹角时你也不需要担心向上向量，注意代码只取中心点和当前片段坐标之间的夹角：

float a = angleBetween(center, fragCoord );

其他说明：

记住计算是以弧度为单位，而不是度数，所以我及时更改了夹具（尽管这并没有真正影响输出）：

return clamp( iGlobalTime, 0.0, TWO_PI );

您有一个与您的函数之一同名的变量：

float angleBetween = angleBetween(up, v2);

这应该避免，因为并非所有实现都对此感到满意，在我更改它之前我无法在我当前的机器上编译你的着色器。

Answer 2

仅更改以下两个函数

float getTargetAngle() 
{
    return clamp(iGlobalTime, 0.0, 6.14);
}

bool shouldDrawFragment(vec2 fragCoord)
{
    float targetAngle = getTargetAngle();

    float centerX = iResolution.x / 2.0;
    float centerY = iResolution.y / 2.0;
    vec2 center = vec2(centerX, centerY);

    vec2 up = vec2(centerX, 0.0) - center;
    vec2 v2 = fragCoord - center;


  if(fragCoord.x>320.0)// a half width
  {
    up += 2.0*vec2(up.x,-up.y);
    targetAngle *= 2.;
  }
  else  
  {
    up -= 2.0*vec2(up.x,-up.y);
    targetAngle -= 1.57;
  }
    float angleBetween = angleBetween(up, v2);

    return (angleBetween >= 0.0) && (angleBetween <= targetAngle);
}

OpenGL 着色器中图像的径向显示

Radial reveal of image in OpenGL shader

opengl-es

fragment-shader

opengl-es-2.0