Question

我试图找出正确的数学运算并转换片段着色器中显示的曲线。

我尝试完成的是在局部坐标系中定义曲线，例如正弦曲线，旋转它然后平移它。像这样：

这是在MATLAB中使用以下代码完成的：

dens = 1080;
x = linspace(-1.0, 1.0, dens);        
y = 0.1*sin(25.0*x);

imax = 25;
for i = 1:imax    

    %transformation matrix:
    ang = (i/imax)*0.5*3.14;
    c = cos(ang); s = sin(ang);          
    T = [c,-s;s,c];

    %translation:
    P = [0.5;0.5];

    %transformed coordinates:
    xt = T(1,:)*[x;y] + P(1);
    yt = T(2,:)*[x;y] + P(2);

    plot(xt,yt);
    xlim([0 1.0]); ylim([0 1.0]); drawnow;
end

对于GLSL测试我使用Book of Shaders Editor和以下代码（也可以交互式here）：

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;

// Plot a line on Y using a value between 0.0-1.0
float plot(vec2 st, float pct){
  return  smoothstep( pct-0.02, pct, st.y) -
          smoothstep( pct, pct+0.02, st.y);
}

float plotTransformed(vec2 st, float pct, vec2 transl, float ang){

    float c = cos(ang); float s = sin(ang);    
    mat2 trans = mat2(c,-s,s,c);    
    st = trans * st;

    st -= transl;

    return  smoothstep( pct-0.02, pct, st.y) -
          smoothstep( pct, pct+0.02, st.y);
}

void main(void) {
    bool use_plot_function = true;

    float mx =  max(u_resolution.x, u_resolution.y);
    vec2 uv = gl_FragCoord.xy /mx;
    vec3 color = vec3(0.4,0.4,0.4);

    //some screen position:
    vec2 p = vec2(0.5, 0.5);

    //the curve:
    vec2 cp = vec2(
        uv.x,
        0.08*sin(uv.x*40.0)
    );

    //the angle to rotate:
    float ang = -0.4 * 3.14 * sin(u_time);

    //Transform coordinates:
    float c = cos(ang); float s = sin(ang);    
    mat2 trans = mat2(c,-s,s,c);    
    vec2 cp_t = trans * cp;    
    cp_t +=p;



    if(use_plot_function){
        //Attempt 1: plot unrotated original curve translated upwards: 
        float curve1 = plot(uv, cp.y + p.y);
        color.g *= curve1;    

        //Attemp 2: plot the transformed curve using plotTransformed, rotates first, then translates:
        float curve2 = plotTransformed(uv, cp.y, p, ang);
        color.r *= curve2;

        //Attempt 3: curve is transformed first then ploted:
        float curve3 = plot(uv, cp_t.y);
        color.b *= curve3;
    }            
    else{
        float plotThk = 0.02;

         //Attempt 1: change color based on distance from unrotated original curve: 
        float dist = distance(uv, cp + vec2(0.0, p.y));
        if(dist < plotThk)
            color.g *= (1.0 -dist)/plotThk;   

        //Attempt 2: change color based on distance from transformed coordinates:
        dist = distance(uv, cp_t);
        if(dist < plotThk)
            color.r *= (1.0 -dist)/plotThk;   

    }

    gl_FragColor = vec4(color,1.0);
}

在上面的代码中，有两种模式可以切换，use_plot_function设置为false或true。

第一种模式尝试使用函数plot(）＆amp; plotTransformed()。第二种模式根据与计算的曲线坐标的距离为片段设置颜色。

将use_plot_function设置为true的第一种模式的结果：

将use_plot_function设置为false的第二种模式的结果：

显然，我误解了如何在片段着色器中完成此操作。

如何在GLSL片段着色器中正确定义转换曲线？

Answer 1

对于简单的sinwave而言，懒得查看代码看起来太复杂了但在Vertex着色器中旋转要简单得多，但是如果你坚持使用片段着色器，我会：

通过基础向量定义旋转坐标系

uniform float a;               // rotation angle [rad]
vec2 U = vec2(cos(a),sin(a)); // U basis vector (new x axis)
vec2 V = vec2(-U.y,+U.x);     // V basis vector (new y axis)
vec2 O = vec2(0.5,0.5);       // O origin (center of rotation in global coordinates)

这将使您能够计算任何片段的旋转位置...因此，如果您的片段在范围<-1,+1>中未旋转的位置是：

uniform vec2 pos;

然后pos的旋转位置为：

float u=dot(pos-O,U);
float v=dot(pos-O,V);

如果需要，您甚至可以从u，v转换回x，y：

pos=O + u*U +v*V;

<强>参数

对于我们通常使用参数的任何曲线。在你的情况下，它是sinwave的角度wjich也是旋转坐标的x坐标（等于some_constant0 + u*some_constant1）。
片段中的参数曲线

所以当我们有参数时，我们只计算曲线点的y，计算我们的碎片位置到它的距离，如果距曲线厚度的一半更远，则丢弃碎片......
```
const float half_thickness=0.02;
vec2 dP;
float u,v;
u=dot(pos-O,U);
v=0.08*sin(u*40.0);
dP=O + u*U +v*V - pos;
if (length(dP)>half_thickness) discard;
// here output your color
```

这就是你只需渲染单个QUAD覆盖你的屏幕（或曲线）并传递旋转角度。这是我的尝试（全部放在一起）......

<强>顶点：

//------------------------------------------------------------------
#version 420 core
//------------------------------------------------------------------
layout(location=0) in vec2 in_pos;
out smooth vec2 pos;
//------------------------------------------------------------------
void main(void)
    {
    pos=in_pos;
    gl_Position=vec4(in_pos,0.0,1.0);
    }
//------------------------------------------------------------------

<强>片段：

//------------------------------------------------------------------
#version 420 core
//------------------------------------------------------------------
in smooth vec2      pos;
out layout(location=0) vec4 col;
//uniform float a;                  // rotation angle [rad]
const float a=0.3;                  // rotation angle [rad]
const float half_thickness=0.02;    // curve half thicess
//---------------------------------------------------------------------------
void main(void)
    {
    vec2 U = vec2(cos(a),sin(a)); // U basis vector (new x axis)
    vec2 V = vec2(-U.y,+U.x);     // V basis vector (new y axis)
    vec2 O = vec2(0.5,0.5);       // O origin (center of rotation in global coordinates)in smooth vec3      pos;    // ray start position

    vec2 dP;
    float u,v;

    u=dot(pos-O,U);
    v=0.08*sin(u*40.0);
    dP=O + u*U +v*V - pos;
    if (length(dP)>half_thickness) discard;

    col=vec4(0.2,0.3,0.5,1.0);
    }
//---------------------------------------------------------------------------

正如您所看到的，我使用了硬编码的颜色和角度。您可以使用均匀颜色更改角度和颜色，也可以使用 VBO / VAO 或glColor中的直接颜色...

如果您想围绕屏幕中心旋转，则使用O(0.5,0.5)，然后使用O(0.0,0.0)代替...

GLSL片段着色器

1 个答案: