2D Grafik JOGL

[Runtime]

Hi Leute,

ich hab mich mal mit JOGL auseinander gesetzt und bin ein bisschen enttäuscht 🙁. Nirgends hab ich etwas gefunden wie man mit JOGL Linear- oder Radialgradients zeichnen könnte. Wie kann ich das machen? Und warum finde ich nichts?

 

[Marco13]

Etwas vorgefertigtes wie "GradientPaint" gibt es da eben nicht. (Du solltest nicht speziell nach so etwas in JOGL, sondern in OpenGL allgemein suchen, da findet man eher was). Je nachdem, wie viel Aufwand man da reinstecken will (und WO man hin zeichnen will) gäbe es da unterschiedliche Ansätze.

 

[Runtime]

Wie könnte man das so lösen, dass es nicht zuviel Zeit frisst?

 

[Marco13]

Arbeitszeit oder Rechenzeit? (Genau darum geht es 😉 )

Wenn das ganze aber nur "irgendwie" auf den Bildschirm gebracht werden soll, würde man natürlich einfach ein Rechteck (GL_QUAD) malen, bei dem alle Eckpunkte unterschiedliche Farben haben. Für ein Radiales GradientPaint würde man einen rechteckigen TRIANGLE_FAN malen, bei dem der Mittelpunkt die gewünschte Farbe hat. In beiden Fällen übernimmt OpenGL das Interpolieren. Wenn man noch irgendwie an die Farben rankommen will, (und/oder das mit GL >= 3.2 und daher mit einem eigenen Shader gemacht werden soll) wird's aufwändiger....

Bestimmt postet Fancy gleich ein paar Beispiele 🙂

 

[Runtime]

Arbeitszeit oder Rechenzeit?

Wo ist der Unterschied?

 

[Marco13]

Es ging darum, dass man oft diw Wahl ein, ein Programm mit 10 Zeilen zu schreiben, das 1 Minute lang rechnet, oder ein Programm mit 100 Zeilen, das 10 Sekunden lang rechnet (und im übertragenen Sinn: Bei OpenGL geht's meistens um letzteres 😉 ).
Also, wo sollen die Daten hin? Einfach irgendwie auf den Bildschirm, oder in ein PBO, oder einen Array (oder in ein BufferedImage :autsch: ) ?

 

[Guest2]

Moin,

und auch: Wo kommen die Daten her und wie sehen die konkret aus.

Ein linearer Farbverlauf auf einem Dreieck ist ja keine Raketenwissenschaft. 😉
Z.B. bei nehe im 3. Tutorial. Ein radialer auf einem Dreieck, wäre da schon spannender. 😉 Wobei mir ehrlich gesagt der Sinn nicht klar wäre. (Außer das man danach wohl weis wie shader funktionieren 😉)

Gruß,
Fancy

 

[Runtime]

Ich will z. B. ein Polygon mit einem Linearen Gradient füllen, der von einem Punkt zum ander geht, die auch ausserhalb des Polygons sein können.

 

[Guest2]

Entweder Du rechnest für Deinen Gradienten kurz die Farbwerte an den einzelnen Eckpunkten aus und setzt die Farben der Vertices entsprechend (innerhalb des Polygons interpoliert OpenGL dann (hoffe ich zumindest, schon ewig kein Polygon mehr gezeichnet)) oder Du schreibst einen Fragmentshader, der die beiden Koordinaten und Farben des Gradienten als uniforme Variablen bekommt und die Farbe des Fragments entsprechend berechnet.

Grundsätzlich ist ein Polygon aber schon hässlich. Schöner ist es, seine Geometrie zu triangulieren.

Gruß,
Fancy

 

[Runtime]

Ich kenn mich noch nicht so mit JOGL aus, von Shadern hab ich noch nie etwas gehört.
Warum sind Polygons hässlich?
Wie würde ich ein Polygon mit einem MultiLinearGradient oder RadialGradient füllen?

 

[Marco13]

Polygone sind häßlich, weil sie konkav und nicht-planar sein können. Die Grafikkarte kann ohnehin nur Dreiecke, alles andere sind Pseudo-Vereinfachungen für den Benutzer.

Aber in deinem Fall geht es ja nur um 2D...?

Hast du dir schon einen "Rahmen" gebastelt, so dass JOGL erstmal läuft? In Richtung des o.a. Nehe-Beispiels?

 

[Guest2]

Shader haben nur indirekt was mit jogl zu tun. Eigentlich sind die ein Teil von OpenGL, mit dem man "eine Art von Berechnungsvorschrift" definieren kann, welche genau beschreibt, wie "Geometrien" dargestellt werden sollen. Man hat damit wesentlich mächtigere Möglichkeiten zu bestimmen, wie etwas dargestellt wird. Allerdings ist der Einstig in die Shader auch "wesentlich" schwieriger.

Polygone sind hässlich, weil sie nicht von der Grafikkarte dargestellt werden können. Der Grafikkartentreiber wandelt alles, was kein Dreieck ist, per Software in Dreiecke um. Wenn man ein Polygon einfach per glVertex definiert, geschieht dies wohl auch für jedes Frame neu.

Insbesondere können durch die Triangulierung merkwürdige Effekte entstehen, welche man von einem Polygon so nicht erwarten würde. Z.B. der oben angedeutete Ansatz mit der Farbberechnung für die Eckpunkte eines Polygons um einen linearen Gradient darzustellen:

package yc021;

import java.awt.Frame;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.io.IOException;

import javax.media.opengl.GL;
import javax.media.opengl.GL2;
import javax.media.opengl.GLAutoDrawable;
import javax.media.opengl.GLEventListener;
import javax.media.opengl.awt.GLCanvas;
import javax.media.opengl.fixedfunc.GLMatrixFunc;

import com.jogamp.opengl.util.Animator;


public class Poly implements GLEventListener {


    private static final float[] g1pos    = { -1f, -0f };
    private static final float[] g2pos    = { +1f, +0f };

    private static final float[] g1col    = { 1f, 0f, 0f };
    private static final float[] g2col    = { 0f, 1f, 0f };

    private static final float   g1g2dist = (float)(Math.pow(g2pos[0] - g1pos[0], 2) + Math.pow(g2pos[1] - g1pos[1], 2));

    private GL2                  gl;


    @Override
    public void init(final GLAutoDrawable drawable) {

        gl = drawable.getGL().getGL2();

    }


    @Override
    public void display(final GLAutoDrawable drawable) {

        gl.glClear(GL.GL_COLOR_BUFFER_BIT);
        gl.glBegin(GL2.GL_POLYGON);
        setVertex(+0.0f, -1.0f);
        setVertex(+1.0f, -0.0f);
        setVertex(+0.0f, +1.0f);
        setVertex(-1.0f, +0.0f);
        gl.glEnd();

    }


    private void setVertex(final float... pos) {

        final float factor = ((pos[0] - g1pos[0]) * (g2pos[0] - g1pos[0]) + (pos[1] - g1pos[1]) * (g2pos[1] - g1pos[1])) / g1g2dist;

        final float r = (1 - factor) * g1col[0] + factor * g2col[0];
        final float g = (1 - factor) * g1col[1] + factor * g2col[1];
        final float b = (1 - factor) * g1col[2] + factor * g2col[2];

        gl.glColor3f(r, g, b);
        gl.glVertex2f(pos[0], pos[1]);

    }


    @Override
    public void reshape(final GLAutoDrawable drawable, final int x, final int y, final int width, final int height) {

        gl.glMatrixMode(GLMatrixFunc.GL_PROJECTION);
        gl.glLoadIdentity();
        gl.glMatrixMode(GLMatrixFunc.GL_MODELVIEW);
        gl.glLoadIdentity();

    }


    @Override
    public void dispose(final GLAutoDrawable arg0) {

    }


    public static void main(final String[] args) throws IOException {

        final Poly base = new Poly();
        final Frame frame = new Frame();
        final GLCanvas canvas = new GLCanvas();
        final Animator animator = new Animator(canvas);

        canvas.addGLEventListener(base);
        frame.add(canvas);
        frame.setSize(500, 400);
        frame.addWindowListener(new WindowAdapter() {


            @Override
            public void windowClosing(final WindowEvent e) {

                new Thread(new Runnable() {


                    public void run() {

                        animator.stop();
                        System.exit(0);

                    }

                }).start();
            }
        });

        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
        animator.start();

    }

}

Sieht im Ergebnis erstmal so aus:

Also so wie man es erwarten würde. Verschiebt man nun die Koordinaten des Gradienten:

    private static final float[] g1pos    = { -0f, -0f };
    private static final float[] g2pos    = { +1f, +0f };

Sieht das Ergebnis immer noch erwartungsgemäss aus:

Ändert man nun aber die Reihenfolge des Polygons auf:

        gl.glBegin(GL2.GL_POLYGON);
        setVertex(+1.0f, -0.0f);
        setVertex(+0.0f, +1.0f);
        setVertex(-1.0f, +0.0f);
        setVertex(+0.0f, -1.0f);
        gl.glEnd();

Ist es leider vorbei:

Der Hintergrund ist einfach: OpenGL transformiert das Polygon in Dreiecke. Die Dreiecke werden dargestellt, indem die Farben der Eckpunkte linear über die Kanten interpoliert werden. Linear über die Kanten der Dreiecke ist aber nicht zwangsläufig linear über die Fläche des Polygons.

Abhilfe würden hier nur Shader bringen, da dort der Farbwert für jeden einzelnen Pixel berechnet werden kann, unabhängig der Geometrie. Aber Shader sind eben nicht so einsteigerfreundlich und ihmo sollte man schon etwas OpenGL Erfahrung haben, ehe man dort einsteigt.

Gruß,
Fancy

 

[Marco13]

Bestimmt postet Fancy gleich ein paar Beispiele 🙂

😀 :smoke:

 

[Guest2]

😀

Gruß,
Fancy

 

[Runtime]

Würde man mit Shadern auch RadialGradients hinbringen?

 

[Guest2]

Ja, das wäre kein Problem. Einfach den Abstand zwischen dem gewünschten Zentrum und dem aktuellen Fragment berechnen und anhand dessen dann die Farbe des Fragments bestimmen.

Im Verhältnis zu dem, was es braucht, ehe man den ersten eigenen Shader wirklich verstanden hat, ist das aber Kindergeburtstag. Ein paar OpenGL Grundlagen sollten vorher schon sitzen.

Gruß,
Fancy

 

[Runtime]

Kennst du eine Library, mit der man Shapes definieren kann, Effekte wie GaussianBlur, MotionBlur, Outer/InnerGlow usw. und das ganze OpenGL basiert ist?

 

[Guest2]

Nein, leider nicht. Aber vielleicht bietet eine der fertigen Engines das, was Du suchst, dann könnte auch der Nachbarthread interessant sein / werden.

Gruß,
Fancy

 

[Runtime]

Ok geht mir zu lange. Kennst du ein gutes tut über Shader?
Edit:
Oder könntest du ein Beispiel machen mit Shader?