Three.js 在使用片段着色器映射的纹理中重复的边缘像素
我正在尝试用片段着色器复制笔刷笔划。请参见动画开始处的拉伸边 我有三个.js的设置:Three.js 在使用片段着色器映射的纹理中重复的边缘像素,three.js,glsl,fragment-shader,Three.js,Glsl,Fragment Shader,我正在尝试用片段着色器复制笔刷笔划。请参见动画开始处的拉伸边 我有三个.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 imag
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以“刷牙”
//这背后的数学https://www.desmos.com/calculator/8qdmw3a91w
浮动比例1(浮动坐标、浮动进度){
协调=协调/进展;
如果(协调1.0
vec2-newuv=vUv1;
newuv.x=scale1(vUv1.x,p);
gl_FragColor=纹理2D(纹理,新UV);
}
但我有这样的优势:
有人知道这背后的原因吗?以及如何解决它吗?这可能与纹理包裹有关,因为默认情况下纹理包裹夹持到边缘。(3.claptoedgewrapping) 尝试在初始化后更改纹理的包裹和包裹属性,如
plane.material.uniforms.texture.wrapS=plane.material.uniforms.texture.wrapT=THREE.RepeatWrapping;感谢您的想法!尝试了一下,不幸的是它没有删除这些边=(另一件事可能是您对“纵横比”的修改)在顶点和碎片着色器中…与其修改其中的纵横比,为什么不使用缩放矩阵来修改平面?即plane.scale=新的三个矢量3(宽度、高度、1);其中“宽度”和“高度”是根据要缩放平面的程度输入的值。下面是在不计算纵横比的情况下平面的外观,
// 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);
}