将点从正方形更改为矩形

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

Now I would need each square to look like a rectangle with size: x: 0.7, y: 1.

要执行您想要的操作，您必须将纹理坐标的 x 分量缩放“1.0/0.7”。结果，纹理出现在正方形上，就好像它被挤压成矩形一样。之前修改坐标0.5，之后修改坐标-0.5，使得挤压对称于四边形的中心。

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

Could I achieve this by making the square partially transparent?

在片段着色器中使用 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 );

将点从正方形更改为矩形

Change Points from squares to rectangles

shader

glsl

fragment-shader

three.js