統一點陣列和管理片段着色器座標系統

Question

我的目標是將一個點數組傳遞給着色器，計算它們到片段的距離並用一個帶有漸變色的圓圈繪製它們，具體取決於該計算。

例如：

（從working example I set up on shader toy）

不幸的是，我不清楚我應該如何計算並通過轉換處理着色器內的座標。

我目前正在嘗試的是通過兩個浮點數組 - 一個用於x位置，一個用於每個點的y位置 - 通過統一着色器。然後着色器內通過每個點重複，像這樣：

#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); 
} 

但是，這並不工作 - 我相信這可能是因爲我努力工作，與像素不正確轉換這些座標。任何人都可以向我解釋如何使這項工作？

更新：

目前的結果是： 草圖的代碼是：

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]); 
    } 
} 

，而頂點着色器：

#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

更新：

基礎上，似乎你混淆了兩種不同的方法的註釋：

1. 繪製一個全屏幕的多邊形，通過在點，並使用着色器循環每個片段一旦計算出最終值。
2. 爲每個點繪製邊界幾何圖形，計算片段着色器中僅一個點的密度，並使用加法混合來求和所有點的密度。

的另一個問題是在像素中給出你的觀點，但是代碼需要一個0到1的範圍內，所以d大，點是黑色的。解決這個問題爲@RetoKoradi describes應該解決黑點問題，但是我懷疑當很多接近時你會發現斜坡限制問題。將點傳入着色器會限制可伸縮性，並且效率不高，除非點覆蓋整個視口。

如下，我認爲堅持方法2更好。調整你的代碼它，消除環路，不點的數組中傳遞，並使用center爲點座標，而不是：

//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)); 

​​（從評論：opengl-tutorial.orgcode和this question）與添加劑blending：現在

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

紋理將包含intensity，因爲它是你原來的循環之後。在全屏通期間另一個片段着色器（繪製一個覆蓋整個視口一個三角形），繼續：

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

---

你所示的代碼是好的，假設您繪製的全屏幕多邊形所以片段着色器爲每個像素運行一次。潛在的問題是：

• resolution沒有範圍爲0正確
• 點座標未設置爲1的屏幕上。
• 儘管較小，d將被縱橫比所拉伸，所以您可能會更好地將點像素座標和潛水距離縮放resolution.y。

這看起來非常類似於爲2D metaballs創建密度字段。爲了提高性能，您最好限制每個點的密度函數，以便它不會永遠持續下去，然後使用添加劑混合將光盤噴射到紋理中。這可以節省處理點不影響的像素（就像在延遲着色中一樣）。結果是密度字段，或者在您的情況下，每像素intensity。

這是一個有點相關：

• 2D OpenGL ES Metaballs on android（無解答）
• calculate light volume radius from intensity
• gl_PointSize Corresponding to World Space Size

Answer 2

它看起來像點中心和片段的位置在不同的座標空間當你減去他們：

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

根據您的說明和代碼，source和source位於窗口座標中，這意味着它們以像素爲單位。 gl_FragCoord位於相同的座標空間中。即使你沒有直接顯示，我認爲resolution是以像素爲單位的窗口大小。

這意味着：

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

計算窗口內的片段的歸一化的位置，在範圍[0.0，1.0]爲x和y。但隨後下一行：

float d = distance(position, source); 

你部分追蹤source，這仍然是在窗口座標，在歸一化座標這個位置。

因爲它看起來像你想在歸一化座標的距離，這是有道理的，你還需要正常化source：

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