Outline-Objekt (normale Skalierung + Stencil-Maske) three.js

8

Seit einiger Zeit versuche ich herauszufinden, wie man in meinem Spiel eine Objektauswahl skizziert. (So ​​kann der Spieler das Objekt über alles andere sehen, mit der Maus überfahren)

So sollte das Ergebnis aussehen:

Die Lösung, die ich verwenden möchte, sieht so aus:

  1. Ebene 1: Zeichnen Sie das Modell in regelmäßigen Schattierungen.
  2. Ebene 2: Zeichnen Sie eine Kopie in roter Farbe, skaliert entlang Normalen mit dem Vertex-Shader.
  3. Maske: Zeichnen Sie eine schwarze / weiße flache Farbe des Modells, um es als Stencil-Maske für die zweite Ebene zu verwenden, um das Innere auszublenden und Ebene 1 anzuzeigen.

Und hier kommt das Problem. Ich kann wirklich keine guten Lernmaterialien über Masken finden. Kann ich die Innenseiten von der Umrissform abziehen? Was mache ich falsch?

Ich kann nicht herausfinden, wie ich meine Render-Pässe stapeln soll, damit die Maske funktioniert. : (

Hier ist eine jsfiddle-Demo

%Vor%

Ich habe auch keine Ahnung, ob ich das Renderziel oder den Renderer für die Quelle des Komponisten verwenden soll. :( Sollte ich überhaupt den ersten Pass im Composer haben? Warum brauche ich den Copy Pass? So viele Fragen, ich weiß. Aber es gibt einfach nicht genug Ressourcen, um daraus zu lernen, ich habe seit Tagen gegoogelt.

Danke für irgendeinen Rat!

    
Eskel 20.04.2014, 14:22
quelle

2 Antworten

15

Hier ist eine JS-Geige mit funktionierender Lösung. Bitte. :)

Ссылка

Aktualisierung mit nur zwei Render-Pässen (Kredit an WestLangley): Ссылка

Die fehlenden Teile waren:

%Vor%     
Eskel 21.04.2014, 13:13
quelle
2

Jetzt denke ich, dass ich eine etwas einfachere Lösung gefunden habe, aus der THREEx-Bibliothek. Es skaliert das Mesh vor, so dass Sie keinen Echtzeit-Shader dafür benötigen. Ссылка

    
Eskel 18.05.2014 11:21
quelle

Tags und Links