opengl-es - 用于勾勒 2D 图像的 OpenGL ES 着色器

Question

我正在使用 OpenGL 2.0 开发 2D iOS 游戏，我想知道是否可以编写一个着色器来勾勒出带有发光的图像。所有图像都是 2D Sprite 。我看到的用于勾勒轮廓的着色器示例适用于 3D 对象，因此我不确定 2D 图像是否可能。

Answer 1

你会接受一个边缘检测过滤器(比如 Sobel)，产生像 the Wikipedia article 中所示的图像吗？ ，然后对结果进行高斯模糊以柔化边缘并赋予其更多光泽，然后将该图像合成到您的场景中？

在实践中，您可能只是重用您见过的 3d 轮廓着色器——尽管理论上您可以检查深度量(在 ES 中进行一些扩展工作)，但我见过的每一个都只是渲染图像上的 2d 效果。

编辑:进一步考虑，拉普拉斯算子可能比 Sobel 更容易应用，因为它可以作为简单的卷积着色器来完成(如地方 like this 中所述)。虽然为了在移动设备上安全，您可能希望最多坚持使用 3x3 内核，并为每个效果编写不同的着色器，而不是使用数据来做。所以例如粗略的高斯模糊，详细写出:

void main()
{
    mediump vec4 total = vec4(0.0);
    mediump vec4 grabPixel;

    total +=        texture2D(tex2D, texCoordVarying + vec2(-1.0 / width, -1.0 / height));
    total +=        texture2D(tex2D, texCoordVarying + vec2(1.0 / width, -1.0 / height));
    total +=        texture2D(tex2D, texCoordVarying + vec2(1.0 / width, 1.0 / height));
    total +=        texture2D(tex2D, texCoordVarying + vec2(-1.0 / width, 1.0 / height));

    grabPixel =     texture2D(tex2D, texCoordVarying + vec2(0.0, -1.0 / height));
    total += grabPixel * 2.0;

    grabPixel =     texture2D(tex2D, texCoordVarying + vec2(0.0, 1.0 / height));
    total += grabPixel * 2.0;

    grabPixel =     texture2D(tex2D, texCoordVarying + vec2(-1.0 / width, 0.0));
    total += grabPixel * 2.0;

    grabPixel =     texture2D(tex2D, texCoordVarying + vec2(1.0 / width, 0.0));
    total += grabPixel * 2.0;

    grabPixel = texture2D(tex2D, texCoordVarying);
    total += grabPixel * 4.0;

    total *= 1.0 / 16.0;

    gl_FragColor = total;
}

拉普拉斯边缘检测最终看起来相似但具有不同的常数。

作为优化，您应该尽可能在顶点着色器中而不是在片段着色器中计算出相对采样点，因为变化的限制是这样的，因为这样做将避免依赖纹理读取。