Whenever I attempt to use the copyTextureToTexture function to copy texture1 (which contains a loaded image) to texture2 (a datatexture that was created with the same dimensions and format), I encounter severe aliasing artifacts. It seems like most of the GPU filtering is disabled, although anisotropy appears to work partially. I've been struggling for the past 2-3 days to resolve this issue, but I'm still uncertain whether it's a bug in three.js or if there's something I'm overlooking. Any assistance would be greatly appreciated. Feel free to provide a WEBGL solution as well, as long as it can be used in conjunction with three.js.
The test-code below allows you to toggle between the original texture and the copied texture by clicking on the window, so you can compare the artifacts:
var w = window.innerWidth;
var h = window.innerHeight;
var hx = w / 2;
var hy = h / 2;
var camera, scene, renderer, tog1;
var mouseX = 0,
mouseY = 0;
// rest of the code goes here...
body {
color: #000;
font-family: Monospace;
font-size: 13px;
text-align: center;
background-color: #fff;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#info {
position: absolute;
font-weight: bold;
top: 0px;
width: 100%;
padding: 5px;
z-index: 100;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>copyTextureToTexture test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
</style>
</head>
<body>
<div id="info"></div>
</body>
</html>