[Solved] Edge highlight on animated model

Hi monkeys,

So I got to the part where I would like to highlight objects in the world, when the user interacts (click, hover, …) with them. I messed with some shaders, I actually looked at Shaderblowlib and then trial-and-error’ed my way until I got something working. (Use the vertices of the model, push them ‘outwards’ using the normals)

This works great, until I play an animation on my model. This highlight method uses the normal pose of the model.
Left: model with highlight on
right: model with highlight on and playing ‘idle’ animation

Is it possible to add an highlight this way, or am I doing something incredibly stupid?

relevant code parts:

outline.frag:

#ifdef EDGE_COLOR
    uniform vec4 m_EdgeColor;
#endif

void main(){

    #ifdef EDGE_COLOR
        gl_FragColor = m_EdgeColor;
    #else
        gl_FragColor = vec4(0.0);
    #endif

}

outline.vert:

uniform float m_EdgeSize;

uniform mat4 g_WorldViewProjectionMatrix;
uniform mat4 g_WorldViewMatrix;
uniform mat3 g_NormalMatrix;
uniform mat4 g_ViewMatrix;

attribute vec3 inPosition;
attribute vec2 inTexCoord;
attribute vec3 inNormal;

void main(){
    if (m_EdgeSize != 0.0) {
        vec4 pos = vec4(inPosition, 1.0);
        vec4 normal = vec4(inNormal, 0.0);

        normal = normalize(normal);
        pos = pos + normal * m_EdgeSize;

        gl_Position = g_WorldViewProjectionMatrix * pos;
    } else {
        gl_Position = vec4(1000.0,1000.0,1000.0,1000.0);
    }
}

Sceneprocessor:

public class EdgeColorProcessor implements SceneProcessor {

    private static final String EDGE_COLOR_TECHNIQUE = "EdgeColor";
    private RenderManager rm;
    private ViewPort vp;

    @Override
    public void initialize(RenderManager rm, ViewPort vp) {
        this.rm = rm;
        this.vp = vp;
    }

    @Override
    public void reshape(ViewPort vp, int w, int h) {
    }

    @Override
    public boolean isInitialized() {
        return rm != null;
    }

    @Override
    public void preFrame(float tpf) {
    }

    @Override
    public void postQueue(RenderQueue rq) {
        this.rm.setForcedTechnique(EDGE_COLOR_TECHNIQUE);
        this.rm.renderViewPortQueues(this.vp, false);
        this.rm.setForcedTechnique(null);
    }

    @Override
    public void postFrame(FrameBuffer out) {
    }

    @Override
    public void cleanup() {
    }

}

Either you have to 100% do your highlighting in the shader (and/or animate all related meshes) or you have to turn off hardware skinning if you are doing any CPU-side calculations.

1 Like

thx for the reply!
I guess for now I’ll just add an AmbientLight to the spatial to ‘highlight’ it and add the ‘do your highlighting 100% in the shader’ as a todo on my backlog :slight_smile: