统一点阵列和管理片段着色器坐标系统

Question

我的目标是将一个点数组传递给着色器,计算它们与碎片的距离,并用一个渐变的圆圈绘制它们,这个圆形取决于该计算.

例如:

(从我在着色器玩具上设置的工作示例)

不幸的是,我不清楚如何计算和转换在着色器内传递的处理坐标.

我目前正在尝试将两个浮点数 - 一个用于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 的描述解决这个问题应该可以解决黑色点的问题，但我怀疑当许多点非常接近时，您会发现斜坡剪切问题。将点传递到着色器会限制可扩展性并且效率低下，除非这些点覆盖整个视口。

如下所示，我认为坚持方法 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.org 代码和这个问题）：

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元球创建密度场非常相似。为了提高性能，您最好限制每个点的密度函数，这样它就不会永远持续下去，然后使用加法混合将圆盘喷射到纹理中。这可以节省对点不影响的像素的处理（就像延迟着色一样）。结果是密度场，或者在您的情况下是每像素intensity。

这些有点相关：

• Android 上的 2D OpenGL ES Metaballs（尚无答案）
• 根据强度计算光体积半径
• gl_PointSize 对应世界空间大小