在Fragment Shader中包装图像时出现奇怪的线条
在Fragment Shader中包装图像时出现奇怪的线条
提问于 2021-05-26 05:58:47
我已经用THREE.js做了一个简单的片段着色器。它读取每个像素的坐标，向x分量添加一个值(如果该值大于1，则换行为0)，并在这个新位置返回背景图像的颜色。这样做的效果是将背景图像移到屏幕上，并将屏幕外的部分包裹起来。问题是在图像的边缘被移动的地方有时会出现一条黑线：
下面是我的代码：
var vertexShader = `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
var fragmentShader = `
varying vec2 vUv;
uniform sampler2D background;
void main() {
float x = mod(vUv.x + 0.47, 1.0);
float y = vUv.y;
gl_FragColor = texture(background, vec2(x, y));
}
`;
$(document).ready(function() {
var plotElement = $("#plot");
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 0, 1000);
renderer.setSize(500, 500);
plotElement.append(renderer.domElement);
var background = new THREE.TextureLoader().load('https://wearablewearyphase.davidbrock1.repl.co/background.png');
var material = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
uniforms: {
background: {
value: background
},
},
});
geom = new THREE.PlaneBufferGeometry(1, 1);
mesh = new THREE.Mesh(geom, material);
scene.add(mesh);
camera.z = 1;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
});<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="plot"></div>
</body>
</html>
我非常确定这行不在原始图像中：
边界应该完全不可见，因为左侧和右侧是相同的颜色。此外，这条线只在某些换挡距离(例如49%和47%，但不是50%或48% )中出现。我发现，如果我使输出大于背景图像，线条就会消失，但我不希望这样做。
是什么导致了这条线，我如何防止它？
注意:我只是以"mod“函数为例。最初，我让另一个程序(另一个着色器)计算每个像素的x和y坐标，并将它们保存在另一个纹理中作为红色和绿色分量。然后，碎片着色器在图像中查找这些坐标。
我在尝试创建像this这样的动画时遇到了这个问题。线条开始在屏幕上到处出现，看起来不太好。
Stack Overflow用户
发布于 2021-05-27 05:40:23
之所以会发生这种情况，是因为片段着色器跨像素插入值。因此，一个像素列接近1.0，下一个是在1.0 - 0.0之间的整个纹理的非常压缩的版本，下一个从0.0开始。
绕过此行为的最简单方法是设置your texture's wrapping mode to THREE.RepeatWrapping并删除mod()，以便当纹理高于1.0时，它将再次从左侧自动重新开始。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67696069
复制相关文章
相似问题
腾讯云开发者
