Triangolo gradiente su OpenGL

Question

Sto cercando di fare un triangolo come quello in alto a destra nella figura seguente:

Il problema è che quello che voglio realizzare è un gradiente di colore da vertici 1 e 2 proiettati da C.

Per quanto ne so questo non è possibile poiché il vertice C deve avere un proprio colore, che si fonderà anche nei colori 1 e 2, come nel triangolo sinistro dell'immagine . Se si imposta C su un colore del punto medio, questo genera un risultato indesiderato, poiché più alto è il triangolo, meno visibili sono i colori dell'altro vertice.

La riga C1 deve essere nera e la linea C2 deve essere bianca.

C'è un modo per ottenere questo in OpenGL?

Answer 1

Ci sono due modi, ma non so quale abbia più senso per l'applicazione. A un livello molto alto:

1. Mappare una trama al triangolo. Poiché la sfumatura è molto uniforme, non è necessario avere una risoluzione molto elevata e puoi lasciare che il filtro lineare faccia il lavoro per te.

2. Utilizzare uno shader. Più lavoro da impostare, ma anche più flessibile, e ti dà un risultato 'perfetto' a qualsiasi scala/risoluzione.

---

Update: se avete intenzione di utilizzare uno shader, l'idea è la seguente.

Passare uno varying vec2 coords dallo shader del vertice allo shader del frammento. Impostare il valore per il punto 1 su 0,0, per il punto 2 su 1,0 e per il punto C su 0,1. Per ottenere questi valori nel vertex shader, utilizzare attribute. I valori variabili verranno interpolati sul triangolo, proprio come farebbero le coordinate e i colori delle texture. Quindi la variabile coords è mappato al triangolo in questo modo:

y 
1 +-----+ 
    |\ | 
    |#\ | 
    |##\ | 
    |###\ | 
    |####\| 
0 +-----+ x 
    0  1 

Lo shader frammento riceve un valore coords da qualche parte dentro l'area hash. Per calcolare la quantità di ciascun colore che è necessario miscelare, calcolare la linea attraverso coords e 0,1 e trovare l'intersezione con l'asse x. Grazie al sistema di coordinate coords, questa è una semplice operazione: basta dividere coords.x per coords.y. Chiama questo f. (Si noti che questo darà la divisione per zero nel punto C, ma questo è previsto come mai definito il colore lì. È possibile verificare che in modo esplicito nello shader, se si desidera.)

Indicando coords con c e che rappresenta il linea con . personaggi, f finisce da qualche parte tra 0 e 1:

y 
1 +-----+ 
    |\ | 
    |.\ | 
    |#c\ | 
    |#.#\ | 
    |##.#\| 
0 +--f--+ x 
    0  1 

Ora diciamo che avete uniform vec4 colour1 e uniform vec4 colour2 per definire il colore al punto 1 e 2, rispettivamente.Quindi è una semplice questione di combinare questi: prendendo la frazione f di colour2 e 1-f frazione di colour1 e aggiungendoli insieme. La funzione GLSL mix fa esattamente questo.