OpenGL erhält den Umriss mehrerer überlappender Objekte

Ich hatte gerade eine Idee für mein laufendes Spiel, das mit opengl in c ++ erstellt wurde: Ich möchte einen großen Umriss (5-6 Pixel) auf mehreren überlappenden Objekten haben, wenn der Spieler etwas gewinnt.

Ich dachte, der beste Weg ist, Schablonenpuffer zu verwenden, aber es sind einige Stunden, in denen ich versuche, den Schablonenpuffer außerhalb des Bildschirms zu rendern, und ich kann kein so wahrscheinliches Ergebnis erzielen. Es gibt einige andere Techniken!

Das möchte ich bekommen:

Irgendwelche Ideen?

1. Aktivieren und löschen Sie den Schablonenpuffer.
2. Zeichnen Sie die Objekte und legen Sie den Schablonenpuffer fest. Objekte können halbtransparent usw. sein.
3. Stellen Sie nun den Schablonenmodus so ein, dass nur Pixel geschrieben werden, bei denen die Schablone nicht eingestellt ist.
4. Und zeichnen Sie jedes Objekt erneut, leicht vergrößert, in der gewünschten Rahmenfarbe und ohne Texturen.
5. Deaktivieren Sie den Schablonenpuffer.

Hier ist der Code, der von einem WebGL-Schablonencode angepasst wurde, an dem ich arbeite:

// drawing will set stencil stencil
    gl.enable(gl.STENCIL_TEST);
    gl.stencilFunc(gl.ALWAYS,1,1);
    gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
    gl.stencilMask(1);
    gl.clearStencil(0);
    gl.clear(gl.STENCIL_BUFFER_BIT);
// draw objects
for(var object in objects)
  objects[object].draw();
// set stencil mode to only draw those not previous drawn
    gl.stencilFunc(gl.EQUAL,0,1);
    gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
    gl.stencilMask(0x00);
// draw object halo
for(var object in objects)
  objects[object].drawHalo(1.1,red); // each mesh should be individually scaled e.g. by 1.1
// done
    gl.disable(gl.STENCIL_TEST);

Ich glaube, ich habe diesen Ansatz in RTS-Spielen verwendet, um Halos um ausgewählte Einheiten zu zeichnen, aber es ist lange her und ich kann mich nicht erinnern, ob es Fallstricke und alle Nuancen gibt.

Suchen Sie zunächst alle Objektgruppen, wobei eine Objektgruppe eine Sammlung von Objekten ist, die sich überlappen. Die Standardkollisionserkennung sollte den Job erledigen. Weisen Sie jeder Gruppe eine eindeutige Farbe zu. Jede Farbe würde reichen.

Rendern Sie alle Ihre Objekte als Volltonfarben mithilfe der Gruppenfarbe zu einer Textur.

Erstellen Sie eine neue Gliederungstextur mit denselben Abmessungen wie das Renderziel. Durchsuchen Sie jedes Texel des Renderziels und stellen Sie fest, ob es eine andere Farbe als die umgebenden Texel hat. Wenn dies der Fall ist, ändern Sie das entsprechende Texel in der Gliederungstextur in die gewünschte Linienfarbe.

Nehmen Sie abschließend diese Gliederungstextur und rendern Sie sie über das Bild, das Sie auf dem Bildschirm zeichnen möchten (Sie können dies natürlich gleichzeitig mit der Kantenerkennung in einem Fragment-Shader tun und vermeiden, die Kantenstruktur im ersten zu erstellen Platz).

Wenn Sie diesen Schritt auf der CPU ausführen, indem Sie eine for-Schleife verwenden, um die Texel des Rendering-Ziels zu durchlaufen, ist dies ziemlich langsam, aber wahrscheinlich gut genug, um es zu testen und in einigen Fällen sogar zu verwenden. Um dies in Echtzeit zu verwenden, sollten Sie dies am besten in einem Shader erledigen.

Ein Fragment-Shader für diese Kantenerkennung könnte folgendermaßen aussehen.

precision mediump float;

uniform sampler2D s_texture;

varying vec2 v_texCoord;

void main()
{
    gl_FragColor = vec4(0.0);

    vec4 baseColor = texture2D(s_texture, v_texCoord);
    gl_FragColor += baseColor - texture2D(s_texture, top);
    gl_FragColor += baseColor - texture2D(s_texture, topRight);
    gl_FragColor += baseColor - texture2D(s_texture, right);
    gl_FragColor += baseColor - texture2D(s_texture, bottomRight);
    gl_FragColor += baseColor - texture2D(s_texture, bottom);
    gl_FragColor += baseColor - texture2D(s_texture, bottomLeft);
    gl_FragColor += baseColor - texture2D(s_texture, left);
    gl_FragColor += baseColor - texture2D(s_texture, topLeft);
}

Wobei der zweite Wert in der textur2D-Suche eine 2D-Koordinate relativ zu v_texCoord ist. Sie würden dies anwenden, indem Sie das erste Renderziel als Textur auf einem Vollbild-Quad rendern. Dies ähnelt dem Anwenden von Unschärfeeffekten im Vollbildmodus, z. B. einer Guassian-Unschärfe.

Der Grund für die Verwendung des ersten Renderziels mit Volltonfarben besteht einfach darin, sicherzustellen, dass zwischen verschiedenen überlappenden Objekten keine Kante wahrgenommen wird. Wenn Sie einfach eine Kantenerkennung auf dem Bildschirmbild durchführen, werden Sie wahrscheinlich feststellen, dass es auch Kanten an den Überlappungen erkennt (vorausgesetzt, die Objekte haben unterschiedliche Farben / Texturen / Beleuchtung).