将点从正方形更改为矩形

Question

我有一个图像，我分裂成粒子。这些粒子默认为正方形。现在我希望它们看起来像矩形。我知道点数不可能是非均匀比例，但你有建议如何仍然实现这一目标吗？

目前这是自定义片段着色器：

vec2 pUv = gl_PointCoord;
pUv.y = 1. - pUv.y;
vec2 uv = vUv + vSize * pUv;
vec4 texColor = texture2D( texture, uv );
outgoingLight *= texColor.xyz;
gl_FragColor = vec4( outgoingLight, texColor.a * diffuseColor.a );

现在我需要每个方块看起来像一个大小的矩形：x：0.7，y：1。我可以通过使方块部分透明来实现这一点吗？我找不到一个已经完成的例子。

这是我到目前为止的例子：https://jsfiddle.net/7jtvkh0x/

Answer 1

现在我需要每个方块看起来像一个大小的矩形：x：0.7，y：1。

要做你想要的，你要将纹理坐标的x分量缩放'1.0 / 0.7`。结果，纹理出现在正方形上，好像它被挤压成矩形一样。将坐标修改为0.5之前和之后的-0.5，使得挤压对称于四边形的中心。

pUv.x = (pUv.x - 0.5) / 0.7 + 0.5;

我可以通过使方块部分透明来实现这一目标吗？

在片段着色器中使用discard关键字会导致片段的输出值被丢弃。这意味着片段不会修改帧缓冲区并且看起来完全透明。

使用修改后的纹理坐标的x分量大于1.0或小于0.0来丢弃片段，以将四边形剪切为矩形：

if ( pUv.x > 1.0 || pUv.x < 0.0 )
    discard; 

最终的片段着色器可能如下所示：

vec2 pUv = gl_PointCoord;
pUv.y = 1. - pUv.y;
pUv.x = (pUv.x - 0.5) / 0.7 + 0.5;
if ( pUv.x > 1.0 || pUv.x < 0.0 )
      discard;

vec2 uv = vUv + vSize * pUv;
vec4 texColor = texture2D( texture, uv );
outgoingLight *= texColor.xyz;
gl_FragColor = vec4( outgoingLight, texColor.a * diffuseColor.a );