边缘像素在使用片段着色器映射的纹理中重复答案

【问题标题】：Edge pixels repeated in texture mapped with fragment shader边缘像素在使用片段着色器映射的纹理中重复
【发布时间】：2018-07-08 15:28:12
【问题描述】：

我正在尝试使用片段着色器复制笔触。 here is my demo。查看动画开始时的拉伸边缘。

我用三个.js 进行了这个设置：

material = new THREE.ShaderMaterial( {
    side: THREE.DoubleSide,
    uniforms: {
        time: { type: 'f', value: 0 },
        uvRate: {
            value: new THREE.Vector2(1,3.7) // aspect ratio of image
        },
        texture: {
            value: THREE.ImageUtils.loadTexture('img/stroke.png')
        },
    },
    vertexShader: vertex,
    fragmentShader: fragment
});

plane = new THREE.Mesh(new THREE.PlaneGeometry( 1,1, 1, 1 ),material);

顶点着色器计算纵横比：

uniform vec2 uvRate1;
void main() {
    vUv1 = uv - 0.5;
    vUv1 *= uvRate.xy;
    vUv1 += 0.5;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`

片段着色器通过一些数学运算来缩放 UV 以进行“刷”

// math behind this https://www.desmos.com/calculator/8qdmw3a91w
float scale1(float coord,float progress){
    coord = coord/progress;
    if(coord<0.88) {
        final = coord*progress;
    } else{
        final = pow( (3.*coord - 2.4),3.) + 0.75 + coord/8.;
        final *= progress;
    }
    return final;
}


void main() {
    float p = clamp(fract(time/20.) + 0.3, 0.,1.);  // 0.3 -> 1.0
    vec2 newuv = vUv1;
    newuv.x = scale1(vUv1.x,p);

    gl_FragColor = texture2D(texture,newuv);
}

但我得到了这种优势：

有人知道这背后的原因是什么吗？又该如何解决呢？

【问题讨论】：

标签： three.js glsl fragment-shader

【解决方案1】：

这可能与纹理包裹有关，因为它默认夹紧到边缘。 (三.ClampToEdgeWrapping)

尝试在初始化后更改纹理的 wrapS 和 wrapT 属性，例如。

plane.material.uniforms.texture.wrapS = plane.material.uniforms.texture.wrapT = THREE.RepeatWrapping;

【讨论】：

感谢您的创意！试过了，不幸的是它没有删除那些边缘=（
另一件事可能是您修改了顶点和片段着色器中的“纵横比”......而不是修改它们中的纵横比，为什么不直接使用缩放矩阵来修改平面？即 plane.scale = new THREE.Vector3(width,height,1);其中 width 和 height 是您根据要缩放平面的程度输入的值。
这是没有任何纵横比计算的外观，still effect present