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

将点从正方形更改为矩形

1 个答案: