Uniform Punktarrays und Verwalten von Fragment Shader Koordinatensystemen

Question

Mein Ziel ist es, ein Array von Punkten an den Shader zu übergeben, ihre Entfernung zum Fragment zu berechnen und sie mit einem Kreis mit einem Gradienten abhängig von dieser Berechnung zu malen.

Zum Beispiel:

(Aus einem working example I set up on shader toy)

Leider ist es mir nicht klar, wie ich soll die Koordinaten für die Verarbeitung in den Shader übergeben berechnen und konvertieren.

Was ich derzeit versuche ist, zwei Array von Floats - eine für x-Positionen und eine für y-Positionen von jedem Punkt - an den Shader durch eine Uniform übergeben. Dann innerhalb des Shader durch jeden Punkt durchlaufen wie so:

#ifdef GL_ES 
precision mediump float; 
precision mediump int; 
#endif 

uniform float sourceX[100]; 
uniform float sourceY[100]; 
uniform vec2 resolution; 

in vec4 gl_FragCoord; 

varying vec4 vertColor; 
varying vec2 center; 
varying vec2 pos; 

void main() 
{ 
    float intensity = 0.0; 

    for(int i=0; i<100; i++) 
    { 
     vec2 source = vec2(sourceX[i],sourceY[i]); 
     vec2 position = (gl_FragCoord.xy/resolution.xy); 
     float d = distance(position, source); 
     intensity += exp(-0.5*d*d); 
    } 

    intensity=3.0*pow(intensity,0.02); 

    if (intensity<=1.0) 
     gl_FragColor=vec4(0.0,intensity*0.5,0.0,1.0); 
    else if (intensity<=2.0) 
     gl_FragColor=vec4(intensity-1.0, 0.5+(intensity-1.0)*0.5,0.0,1.0); 
    else 
     gl_FragColor=vec4(1.0,3.0-intensity,0.0,1.0); 
} 

Aber das funktioniert nicht - und ich glaube, es kann sein, weil ich versuche, mit der Pixel ohne sie richtig zu übersetzen Koordinaten zu arbeiten. Kann mir jemand erklären, wie man das macht?

Update:

Das aktuelle Ergebnis ist: Der Code der Skizze ist:

PShader pointShader; 

float[] sourceX; 
float[] sourceY; 


void setup() 
{ 

    size(1024, 1024, P3D); 
    background(255); 

    sourceX = new float[100]; 
    sourceY = new float[100]; 
    for (int i = 0; i<100; i++) 
    { 
    sourceX[i] = random(0, 1023); 
    sourceY[i] = random(0, 1023); 
    } 


    pointShader = loadShader("pointfrag.glsl", "pointvert.glsl"); 
    shader(pointShader, POINTS); 
    pointShader.set("sourceX", sourceX); 
    pointShader.set("sourceY", sourceY); 
    pointShader.set("resolution", float(width), float(height)); 
} 


void draw() 
{ 
    for (int i = 0; i<100; i++) { 
    strokeWeight(60); 
    point(sourceX[i], sourceY[i]); 
    } 
} 

während der Vertex-Shader ist:

#define PROCESSING_POINT_SHADER 

uniform mat4 projection; 
uniform mat4 transform; 


attribute vec4 vertex; 
attribute vec4 color; 
attribute vec2 offset; 

varying vec4 vertColor; 
varying vec2 center; 
varying vec2 pos; 

void main() { 

    vec4 clip = transform * vertex; 
    gl_Position = clip + projection * vec4(offset, 0, 0); 

    vertColor = color; 
    center = clip.xy; 
    pos = offset; 
} 

Answer 1

Update:

Basierend auf den Kommentaren scheint es zwei verschiedene Ansätze verwechselt haben:

1. Zeichnen Sie ein einzelnes Vollbild Polygon, in den Punkten passieren und den Endwert einmal pro Fragment mit einer Schleife im Shader berechnen.
2. Zeichnen Sie die Begrenzungsgeometrie für jeden Punkt, berechnen Sie die Dichte für nur einen Punkt im Fragment-Shader und verwenden Sie additive Überblendung, um die Dichten aller Punkte zu summieren.

Das andere Problem ist Ihre Punkte in Pixel angegeben werden, aber der Code erwartet eine 0 auf 1 Bereich, so ist d groß und die Punkte sind schwarz. Behebung dieses Problems als @RetoKoradi describes sollte die Punkte ansprechen, die schwarz sind, aber ich vermute, dass Sie Ramp Clipping Probleme finden werden, wenn viele in unmittelbarer Nähe sind. Das Übergeben von Punkten in den Shader begrenzt die Skalierbarkeit und ist ineffizient, es sei denn, die Punkte decken das gesamte Ansichtsfenster ab.

Wie unten, denke ich bei Ansatz 2 ist besser. Um den Code zu, entfernen die Schleife neu strukturiert, nicht besteht in der Anordnung von Punkten und verwendet center als Koordinatenpunkt statt:

//calc center in pixel coordinates 
vec2 centerPixels = (center * 0.5 + 0.5) * resolution.xy; 

//find the distance in pixels (avoiding aspect ratio issues) 
float dPixels = distance(gl_FragCoord.xy, centerPixels); 

//scale down to the 0 to 1 range 
float d = dPixels/resolution.y; 

//write out the intensity 
gl_FragColor = vec4(exp(-0.5*d*d)); 

Draw this to a texture (von Kommentaren: opengl-tutorial.orgcode und this question) mit additiven blending:

glEnable(GL_BLEND); 
glBlendFunc(GL_ONE, GL_ONE); 

Jetzt wird die Textur enthalten intensity, wie es nach dem ursprünglichen Schleife war.In einem anderen Fragment-Shader während eines Vollbild-Pass (ein einzelnes Dreieck zeichnen, die das gesamte Ansichtsfenster abdeckt), weiter mit:

uniform sampler2D intensityTex; 
... 
float intensity = texture2D(intensityTex, gl_FragCoord.xy/resolution.xy).r; 
intensity = 3.0*pow(intensity, 0.02); 
... 

---

Der Code, den Sie gezeigt haben, ist in Ordnung, vorausgesetzt, du bist ein vollständigen Zeichnung Screen-Polygon, so dass der Fragment-Shader für jedes Pixel einmal ausgeführt wird. Potentielle Probleme sind:

• resolution nicht korrekt
• die Punktkoordinaten sind nicht in dem Bereich eingestellt ist, 0 bis 1 ist auf dem Bildschirm.
• Obwohl kleinere, d wird durch das Seitenverhältnis gestreckt, so dass Sie möglicherweise besser skalieren die Punkte bis Pixel Koordinaten und Tauchabstand von resolution.y.

Dies ähnelt der Erstellung eines Dichtefelds für 2D metaballs. Um die Leistung zu optimieren, sollten Sie die Dichtefunktion für jeden Punkt so begrenzen, dass sie nicht für immer andauert und die Discs dann in eine Textur mit additivem Mischen einspritzt. Dies spart die Verarbeitung der Pixel, die ein Punkt nicht beeinflusst (genau wie in der verzögerten Schattierung). Das Ergebnis ist das Dichtefeld oder in Ihrem Fall pro Pixel intensity.

Diese sind ein wenig verwandten:

• 2D OpenGL ES Metaballs on android (noch keine Antworten)
• calculate light volume radius from intensity
• gl_PointSize Corresponding to World Space Size

Answer 2

Es sieht aus wie der Punkt Zentrum und Fragmentposition sind in verschiedenen Räumen koordinieren wenn Sie sie subtrahieren:

vec2 source = vec2(sourceX[i],sourceY[i]); 
vec2 position = (gl_FragCoord.xy/resolution.xy); 
float d = distance(position, source); 

Auf der Grundlage Ihrer Erklärung und Ihres Codes sind source und source in Fensterkoordinaten angegeben, was bedeutet, dass sie in Pixeleinheiten angegeben sind. gl_FragCoord ist im selben Koordinatenraum. Und obwohl Sie das nicht direkt zeigen, nehme ich an, dass resolution die Größe des Fensters in Pixeln ist. Diese

bedeutet:

vec2 position = (gl_FragCoord.xy/resolution.xy); 

die normierte Position des Fragments innerhalb des Fensters berechnet, im Bereich von [0,0, 1,0] für beide x und y. Aber dann in der nächsten Zeile:

float d = distance(position, source); 

Sie subtrace source, die noch in Fensterkoordinaten ist, von dieser Position in normierten Koordinaten.

Da es sieht aus wie Sie den Abstand in normalisierten Koordinaten wollte, was Sinn macht, werden Sie auch source normalisieren müssen:

vec2 source = vec2(sourceX[i],sourceY[i])/resolution.xy;