如何在Open GL ES 2.0中创建正确的斜角效果片段着色器？

Question

我很高兴在GLSL中为OpenGL ES2.0编写片段着色器，我试图创建一个片段着色器，为给定的图形创建斜角效果。这是我到目前为止所能做到的 （忽略下墙和其他纹理，只查看应用斜角效果的顶部）：

这里有什么期望的结果：

注意对角线上阴影的差异，它们比水平边缘更浅。注意从对角线边缘到水平或垂直的过渡。还要注意斜面的厚度。我希望尽可能接近这个理想的结果。

现在我使用的片段着色器相当简单，这里是代码：

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 v_texCoord;
uniform sampler2D s_texture;
uniform float u_time;

void main()
{
    vec2 onePixel = vec2(0, 1.0 / 640.0);

    vec2 texCoord = v_texCoord;

    vec4 color;
    color.rgb = vec3(0.5);
    color += texture2D(s_texture, texCoord - onePixel) * 5.0;
    color -= texture2D(s_texture, texCoord + onePixel) * 5.0;

    color.rgb = vec3((color.r + color.g + color.b) / 3.0);
    gl_FragColor = vec4(color.rgb, 1);
}

我需要将哪些内容添加到着色器以创建所需的效果？

Answer 1

我认为您展示的示例并非完全使用片段着色器代码完成。这可能是通过斜角几何体来完成的，这可以通过几何着色器完成，除了ES中不存在，所以我要么使用像Blender这样的创作工具来对模型进行斜角处理，也可以使用纹理来做凹凸贴图技术。

Answer 2

使用斜角效果的最佳方法是使用Blender或其他编辑器修改网格。

如果您确实希望使用Shader实现此目的，可以使用专门用于隐藏边缘的凹凸贴图。

可能有一些多次传递和渲染缓冲区解决方案，但对这些解决方案知之甚少。您可以从深度缓冲区中找到边缘。但就性能而言，这并不是最好的方式。

我最近发现了一种没有特殊纹理和改变几何形状的斜角效果的方法（这就是为什么我回答这个问题:)。但它确实需要修改顶点数据：您需要实际向每个顶点添加其他法线向量。因此，您必须转换网格以专门使用该着色器。 article