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

Opengl es OpenGL着色器中图像的径向显示,opengl-es,opengl-es-2.0,fragment-shader,Opengl Es,Opengl Es 2.0,Fragment Shader,我正在玩一个着色器概念,使用OpenGL ES中的着色器径向显示图像。最终目标是通过丢弃渲染完整循环进度纹理的片段着色器中的片段来创建循环进度条 我已经把我的想法编码好了,这样你就可以玩了。我似乎无法让它工作,而且由于没有调试的方法,我很难找出原因 以下是片段着色器的glsl代码: float magnitude(vec2 vec) { return sqrt((vec.x * vec.x) + (vec.y * vec.y)); } float angleBetween(vec2 v

我正在玩一个着色器概念,使用OpenGL ES中的着色器径向显示图像。最终目标是通过丢弃渲染完整循环进度纹理的片段着色器中的片段来创建循环进度条

我已经把我的想法编码好了,这样你就可以玩了。我似乎无法让它工作,而且由于没有调试的方法,我很难找出原因

以下是片段着色器的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));
  }
}
浮动幅度(vec2-vec)
{
返回sqrt((vec.x*vec.x)+(vec.y*vec.y));
}
浮动角度(vec2 v1,vec2 v2)
{
返回ACO(点(v1,v2)/(幅值(v1)*幅值(v2));
}
float-getargetangle()
{
回位夹(iGlobalTime,0.0、360.0);
}
//默认情况下,OpenGL使用左上角作为原点
bool shouldDrawFragment(vec2 fragCoord)
{
float targetAngle=getTargetTangle();
浮动中心x=iResolution.x/2.0;
浮动中心y=iResolution.y/2.0;
vec2中心=vec2(centerX,centerY);
vec2向上=vec2(中心x,0.0)-中心;
vec2 v2=fragCoord-中心;
浮动角度之间=角度之间(向上,v2);
返回(angleBetween>=0.0)&(angleBetween尝试以下代码:

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));
  }
}
这是v1和v2之间差向量的角度。如果交换x和y值,将改变0角度所在的方向,即,如果尝试以下操作:

return atan( v1.y - v2.y, v1.x - v2.x ) + PI;
圆圈从右边开始,而不是向上。您还可以反转atan的值以更改动画的方向

在计算两者之间的角度时,您也不需要担心上方向向量,请注意,代码只取中心和当前frag坐标之间的角度:

float a = angleBetween(center, fragCoord );
其他注意事项:

请记住,计算单位是弧度,而不是度,因此我更改了钳制时间(尽管这并不真正影响输出):

您有一个与某个函数同名的变量:

float angleBetween = angleBetween(up, v2);

这是应该避免的,因为不是所有的实现都对此感到满意,我无法在我当前的机器上编译您的着色器,直到我更改了它。

只更改下面的两个函数

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);
}
float getTargetTangle()
{
回位夹(iGlobalTime,0.0,6.14);
}
bool shouldDrawFragment(vec2 fragCoord)
{
float targetAngle=getTargetTangle();
浮动中心x=iResolution.x/2.0;
浮动中心y=iResolution.y/2.0;
vec2中心=vec2(centerX,centerY);
vec2向上=vec2(中心x,0.0)-中心;
vec2 v2=fragCoord-中心;
如果(fragCoord.x>320.0)//半宽
{
向上+=2.0*vec2(向上x,-向上y);
目标角*=2。;
}
其他的
{
向上-=2.0*vec2(向上x,-向上y);
目标角-=1.57;
}
浮动角度之间=角度之间(向上,v2);

return(angleBetween>=0.0)和&(angleBetween)看起来不错。它是Android还是IOS?两者都有调试工具。这不好,因此我的问题在这里。我在shader toy上运行了代码。平台不重要,这是一个一般的着色器问题。这正是我想要的。在ShaderToy上更新了我保存的着色器。谢谢。
float angleBetween = angleBetween(up, v2);
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);
}