如何增加片段着色器中像素之间的空间？答案

【问题标题】：How do you increase the space between pixels in a fragment shader?如何增加片段着色器中像素之间的空间？
【发布时间】：2021-12-12 21:50:08
【问题描述】：

我目前正在开发一个着色器，以实现我想要实现的非常普通的效果。这有点难以解释，但基本要点是我试图“拉开”像素艺术图像的像素。

你可以在这个 jsfiddle 看到我目前的进步，无论多么小： https://jsfiddle.net/roomyrooms/Lh46z2gw/85/

当然，我可以轻松地扭曲图像，并使其远离中心的位置拉伸得越远。但这会使它平滑地扭曲和扭曲，并且所有像素保持连接（无论它们是否被挤压/涂抹/等）

我想获得一个像素之间的空间被拉伸而不是像素本身被拉伸的效果。有点像你在桌子上刷沙子。沙粒的大小保持不变，只是离得更远了。

欢迎任何想法！谢谢。到目前为止，这是我在代码方面得到的：

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform highp vec4 inputSize;
uniform float time;

vec2 mapCoord( vec2 coord )
{
    coord *= inputSize.xy;
    coord += inputSize.zw;

    return coord;
}

vec2 unmapCoord( vec2 coord )
{
    coord -= inputSize.zw;
    coord /= inputSize.xy;

    return coord;
}

void main(void)
{
    vec2 coord = mapCoord(vTextureCoord);
    float dist = distance(coord.x, inputSize.x/2.);
    coord.x += dist/4.;
    coord = unmapCoord(coord);
    gl_FragColor = texture2D(uSampler, coord);
}`

编辑：在此处添加了我要达到的效果的说明：

我可以从这些方面得到一些东西：

使用模数，但它在处理过程中丢弃了一半的图像。

【问题讨论】：

标签： filter shader webgl pixi.js

【解决方案1】：

你可以：

discard 一些片段（在某些移动设备上很慢）
使用模板蒙版仅在您想要的地方绘制
为你不想要的那些画透明像素alpha=0。
最后，您可以绘制一组点或 squire 并移动它们。

【讨论】：

我试图在这里说明我想要达到的效果：i.gyazo.com/23d03a887d2e1c752ce87730b292ccf0.png 是否可以使用上述方法来做一些事情？其中实际内容仍然保留/不丢弃，只是跨片段/像素移动。

【解决方案2】：

据我所知，片段着色器将在三角形中的每个像素上运行。您只能告诉它将该像素设置为什么颜色。在您的示例中，您已经复制了像素列，因此如果您将坐标拉伸 2 倍然后丢弃所有其他列，则可以丢弃一些像素而不会丢失任何源图像的像素。

vec2 coord = mapCoord(vTextureCoord);
if(coord.x < 100.0 && floor(coord.x/2.0)==floor((coord.x+1.0)/2.0))
    discard;

【讨论】：