Bilineare Filterung korrekt so (WebGL)?

[Stephan Theisgen]

Guten Abend!

Ich experimentiere gerade etwas mit WebGl und habe versucht einfach eine 2x2-Textur, bei der eine Ecke rot und die anderen drei Ecken schwarz sind, auf ein Rechteck aus zwei Dreicken zu rendern und dabei bilineare Filterung zu benutzen. Eigentlich brauche ich die Mathematik hinter der Filterung zu einem anderen Zweck (als schöne Grafiken zu erzeugen) und daher war ich vom Ergebnis etwas verwundert. Vielleicht kann mich jemand von Euch erleuchten? ;-)

Ist das Ergebnis denn wirklich mathematisch korrekt so (siehe die Bilder unten)?
Im ersten Bild hat mich schon dieses rote Kreuz irritiert, dann habe ich einfach mal nur alle Pixel eingezeichnet, deren Rot-Wert größer als 0,5 ist (zweites Bild) und das hat mich dann richtig stutzen lassen... Ich hätte ja eine schräge Linie oder vielleicht nur einen Bogen erwartet, aber eine gerade Linie, dann ab der Hälft einen Kreisbogen und dann wieder eine gerade Linie? Wie kommt das zustande?

Ich bin verwirrt :shock:

test2.png (4.21 KiB) 2293 mal betrachtet

test1.png (1.09 KiB) 2293 mal betrachtet

[Krishty]

Aaaalso

Ja, du hast eine 2×2-Texel-Textur.

Deine Texturkoordinaten füllen aber nicht die ganze Ansicht aus. Ich habe dir die Texel-Zentren mal hier grün eingezeichnet:

texel.png (1.61 KiB) 2283 mal betrachtet

Der Pixel unten links ist liegt also bei -0,5 auf U und V. Der oben rechts bei 1,5 U und V. Koordinaten unter 0 werden als 0 interpretiert, und oberhalb 1 als 1 (Texture Clamping). Das erklärt die „geraden Linien“ am Rand – es wird außerhalb der Textur gesamplet.

Betrachtet man nur den Bereich, der von der Textur abgedeckt wird, hast du immerhin Interpolation. Die „Kurve“ kommt möglicherweise von Gammakorrektur; ich weiß nicht, ob die Hardware bei WebGL die vor oder nach der Interpolation durchführen muss. Beides liefert unterschiedliche Ergebnisse; auf Gamma error in picture scaling kannst du es dir ansehen (scroll runter zu den drei Bildern über Fore-explanation).

Gruß

[Stephan Theisgen]

Fast sowas habe ich mir schon gedacht, schon wieder bin ich diesem 0,5-Ding auf den Leim gegangen! Vielen Dank für Deine Erklärung Krishty, dass war wie immer wirklich erhellend.

Ich habe jetzt eine 3x3-Textur erstellt und das Ganze getestet: siehe da, der innere Texel verhält sich wie gedacht. Die Rundungen sind zwar immer noch ungewohnt, aber für meine Anwendung nicht weiter schädlich. Zumindest habe ich es jetzt verstanden und weiß, was ich tun muß. Vielen Dank!

Grüße
Stephan

P.S.: Ich möchte das ganze im übrigen zur Darstellung von Höhenlinien verwenden. Ich weiß noch nicht, ob die ich Daten als Vertex-Attribut und damit als Puffer reinreiche oder als Textur! Deswegen teste ich gerade, was besser zu meinen Daten paßt, was einfacher zu implementieren ist und was mehr Performance bringt.

Texturen haben bisher den Vorteil, dass ich natürlich die benachbarten Werte kennen muss und das beim Texture-Sampling einfach geht. Leider habe ich dort keine garantierte Float-Unterstützung, aber bisher sind alle meine Daten Int32, allerdings könnte sich das in einiger Zeit ändern, dann habe ich aber in WebGl vielleicht auch Float-Texturen.

Bei Vertex-Puffern kann ich nur indirekt auf die Nachbarwerte zugreifen druch den Gradienten, aber das könnte auch reichen, wenn ich die Gradientenfunktion komplett beherrsche.

Bisher ist die Performance mit Texturen besser, vor allem wenn er, wie bei mir im IE, auf Software-Rendering umschaltet. Allerdings können meine Daten beliebige 2D-Dimensionen haben, was beim Laden einigen Aufwand bedeutet, dann muss ich sie auf passende Texturen z.B. 1024x1024 umrechnen. Noch bin ich unentschlossen...

Jetzt weiß ich aber, dass prinzipiell beides funktionieren würde.,,

[Zudomon]

Das "rote Kreuz" das du siehst, müsste Sinnestäuschung sein.

[Krishty]

Alles auf dem Bildschirm ist Sinnestäuschung ;)

Das Kreuz ist tatsächlich da, aber als Unstetigkeit in der Änderungsrate der Farbe. Blödes Auge, will alles glatt …