CODEWITHSUNDEEP
opengl-esglslshaderembossbevelled
Eddy Borja
Eddy Borja

Reputation: 1658

How do I create a proper bevel effect fragment shader in Open GL ES 2.0?

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?

Upvotes: 1

Views: 2655

Answers (2)

Iurii Selinnyi
Iurii Selinnyi

Reputation: 524

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

Upvotes: 0

ClayMontgomery
ClayMontgomery

Reputation: 2832

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.

Upvotes: 0

Related Questions