opengl - 将两个具有不同含义的矩形从几何传递到片段着色器

Question

我已将 Cinder 库签名距离字体处理改编为 Delphi，现在正在实现一个转折，以在一次调用中上传多个文本的所有数据，并在缩放时对相对大小进行一些控制(使用统一代替几何着色器中的 1.0001 因子，尚未在此代码中工作)

基本的符号距离处理没有改变，我只是尝试使用几何着色器计算所需的矩形。我了解如何使用 triangle_strip 创建目标矩形(字符必须出现的位置)，但在将 texcoord 传递到片段着色器时遇到问题。

• 目标矩形:输入的topleft.xy + widthheight(尺寸)用于计算屏幕上每个字符的目标矩形。使用 gl_position。

• 纹理源矩形2:texcoordtl+texdimens，左上角点+字体纹理中字符的尺寸。这是我不确定的要点。使用 texcoord 输入/输出参数传递给片段。

我将不胜感激任何研究的指针或途径，并特别想知道我计算 texcoord 坐标并将其传递的方式到片段着色器。

以下记录的数组与 GL_ARRAY_BUFFER 绑定(bind)，并使用一系列 glGetAttribLocation/glEnableVertexAttribArray/glVertexAttribPointer 调用进行描述)

绘图是使用完成的

glDrawArrays(GL_POINTS, 0, numberofelements_in_array );

记录:

  TGLCharacter = packed record // 5*2* single + 1*4 byte color + 1*4 byte detail. = 48 bytes per character drawn
              origin     : TGLVectorf2;  // origin of text   ( = glfloat[2])
              topleft    : TGLVectorf2;  // origin of this character
              widthheight: TGLVectorf2;  // width and heght this chracter
              texcoordtl : TGLVectorf2;  // coordinates topleft in texture.
              texdimens  : TGLVectorf2;  // sizes in texture
              col        : TGLVectorub4; // 4 colors, 1 per rect vertex
              detail     : integer;      // layer. Not used in this example.
              end;

首先是几何代码，因为我预计这里会出现问题:

    #version 150 compatibility
    layout(points) in;
    layout(triangle_strip, max_vertices = 4) out;

    in vec2 gorigin[];
    in vec2 gtopleft[];
    in vec2 gwidthheight[];
    in vec2 gtexcoordtl[];
    in vec2 gtexdimens[];
    in vec4 gcolor[];

    out vec3 fColor;
    out vec2 texcoord;

    void main() {
        // calculate distance cur char - first char of this text
        vec2 dxcoordinate = (gtopleft[0]-gorigin[0]);
        // now multiply with uniform here and calc new coordinate:
        // for now we use uniform slightly close to 1 to make debugging easier and avoid
        // nvidia's shadercompiler to optimize gorigin out.
        // equal to 1, and the nvidia shader optimizes it out.
        vec2 x1y1 = 1.0001*gorigin[0]+dxcoordinate;
        vec2 x2y2 = x1y1+gwidthheight[0]*1.0001;
        vec2 texx1y1 = gtexcoordtl[0];
        vec2 texx2y2 = gtexcoordtl[0]+gtexdimens[0];

        fColor = vec3(gcolor[0].rgb);


        gl_Position = gl_ModelViewProjectionMatrix * vec4(x1y1,0,1.0);
        texcoord = texx1y1.xy;
        EmitVertex();
        gl_Position = gl_ModelViewProjectionMatrix * vec4(x2y2.x,x1y1.y,0,1.0);
        texcoord = vec2(texx2y2.x,texx1y1.y);
        EmitVertex();
        gl_Position= gl_ModelViewProjectionMatrix * vec4(x1y1.x,x2y2.y,0,1.0);
        texcoord = vec2(texx1y1.x,texx2y2.y);
        EmitVertex();
        gl_Position = gl_ModelViewProjectionMatrix * vec4(x2y2,0,1.0);
        texcoord = texx2y2.xy;
        EmitVertex();
        EndPrimitive();
    }

片段代码:

#version 150 compatibility

uniform sampler2D   font_map;
uniform float      smoothness;

const float gamma = 2.2;

in vec3 fColor;
in vec2 texcoord;
void main()
{
  // retrieve signed distance
  float sdf = texture2D( font_map, texcoord.xy ).r;

  // perform adaptive anti-aliasing of the edges
  float w = clamp( smoothness * (abs(dFdx(texcoord.x)) + abs(dFdy(texcoord.y))), 0.0, 0.5);
  float a = smoothstep(0.5-w, 0.5+w, sdf);

  // gamma correction for linear attenuation
  a = pow(a, 1.0/gamma);

  if (a<0.1)
  discard;

  // final color
  gl_FragColor.rgb = fColor.rgb;
  gl_FragColor.a = gl_Color.a * a;
}

我猜顶点代码可能没问题。

#version 150 compatibility

in vec2 anorigin;
in vec2 topleft;
in vec2 widthheight;
in vec2 texcoordtl;
in vec2 texdimens;
in vec4 color;


out vec2 gorigin;
out vec2 gtopleft;
out vec2 gwidthheight;
out vec2 gtexcoordtl;
out vec2 gtexdimens;
out vec4 gcolor;


void main()
{
  gorigin=anorigin;
  gtopleft=topleft;
  gwidthheight=widthheight;
  gtexcoordtl=texcoordtl;
  gtexdimens=texdimens;
  gcolor=color;

  gl_Position = gl_ModelViewProjectionMatrix * vec4(anorigin.xy,0,1.0);;
}

Answer 1

上面的代码有效。问题出在上传代码中，因此上传了错误的顶点数据。我在调试时对上述代码做了一些小修复，并将其添加到问题中，以便问题现在显示工作代码。

这里是一些可能的代码，可以更改片段着色器的最后两行以创建轮廓字体。不过我对此还不太满意。缩小时字体颜色似乎发生变化

  vec3 othercol; // to be added to declarations

..丢弃语句下方的其余着色器变为:

  othercol=vec3(1.0,1.0,1.0);
  if (sqrt(0.299 * fColor.r*fColor.r + 0.587 * fColor.g*fColor.g + 0.114 * fColor.b*fColor.b)>0.5)
    {  othercol=vec3(0,0,0);}

  // final color
  if (sdf>0.25 && sdf<0.75)
     {gl_FragColor.rgb = othercol.rgb;}
     else
     {gl_FragColor.rgb = fColor.rgb;}


  gl_FragColor.a = gl_Color.a * a;
}