1

I'm new to writing fragment shaders in GLSL for OpenGL ES2.0 and I'm trying to create a fragment shader that creates a bevel effect for a given graphic. Here's what I've been able to do so far (ignore the lower wall and other texturing, only look at the top part which is where the bevel effect is applied):

Current output

Here's what the desired result should be:

Desired output

Notice the difference in shading at diagonals, they are more lightly shaded than horizontal edges. Notice the transition from diagonal edges to horizontal or verticals. Also notice the thickness of the bevel. I'd like to get as close to this desired result as possible.

Right now the fragment shader I'm using is fairly simple, here's the code:

#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);
}

What would I need to add to my shader to create the desired effect?

genpfault
  • 51,148
  • 11
  • 85
  • 139
Eddy Borja
  • 1,638
  • 17
  • 21

2 Answers2

0

I think the example you have shown was not done entirely with fragment shader code. It was likely done by beveling the geometry, which could be done by a geometry shader, except that does not exist in ES, so I would either use an authoring tool like Blender to do the beveling to your model or maybe use a texture to do a bump mapping technique.

ClayMontgomery
  • 2,786
  • 1
  • 15
  • 14
  • You might be right, though in the end I did manage to write a fragment shader that outputs close enough to the desired effect. – Eddy Borja Jul 14 '13 at 17:09
  • 3
    @EddyBorja you should have shared here your final solution :) I'm on a similar situation... – pertz Nov 12 '14 at 21:49
0

The optimal way to have Bevel effect is to modify mesh with Blender or other editor.

If you do want to achieve this with Shader, it may be possible by using a bump map which is prepared specifically to hide the edge.

There may be some multi pass and render buffer solutions, but don’t know much about those. You can find edges from depth buffer. But it’s not the best way in terms of performance.

I recently found a way to have Bevel effect without special textures and changing geometry (that is why I’m answering this question:). But it does require modifications to vertex data: you need to actually add other normal vectors to each vertex. So you have to convert the mesh to work specifically with that shader. article

Iurii Selinnyi
  • 514
  • 3
  • 11