ThreeJS：WebglRenderTarget + minFilter：THREE.LinearMipMapLinearFilter =＆gt;奇怪的错误（不是在每台计算机上）

Question

我现在面对Three.js的一个非常奇怪的问题。 我习惯使用Three.js，但我根本不知道发生了什么以及如何解决它。

我想做的事情甚至不复杂......

为了在我的电影中显示文字，我想在画布中绘制一些文字字符，然后将画布绘制到WebGLRenderTarget中。最终结果应该看起来像一个16x16网格（每个单元格测量256x256像素）。

然后，根据我的WebGLrenderTarget及其中的字体，我想创建一种Textfield对象，其中包含我想要绘制的相同数量的网格物体。

我在笔记本电脑上制作了所有代码，一切都按预期工作;我在计算机上得到了相同的结果但是我在办公室使用的计算机上却没有。

问题似乎来自于

的使用

minFilter = THREE.LinearMipMapLinearFilter

应用于我的WebGLRenderTarget。

如果我删除该行，一切都按照执行的方式工作（但我的文本显示为别名）但是如果我尝试使用它，那么整个WebGLRenderTarget内容非常错误（就像内容具有透明度一样，内容就是副本 - 在一个意想不到的位置上加油，然后在某处有一些重叠......）

对不起，用文字解释有点难。

让我告诉你我得到了什么。

如果我不使用LinearMipMapLinearFilter，这是我得到的;这就是我想要的

以下是我在LinearMipMapLinearFilter上应用于WebGLRenderTarget的内容

正如你在第二张图片中看到的那样，“a”，“j”，“k”被写入2次（一次是小而几乎是透明的，另一次是大而没有透明度。但是我从来没有画过我的在WebGlRenderTarget上画了2次，然后它非常非常奇怪，我真的不知道我能做什么......）

在这两种情况下，它不能是着色器问题，因为我使用MeshBasicMaterial渲染我的字体纹理;它很直接。

有人知道这里发生了什么吗？

欢迎任何帮助

谢谢

编辑：

我没有成功重现具有完全相同行为的基本示例，但如果您尝试在“THREE.LinearMipMapLinearFilter”上设置minFilter，则renderTarget保持黑色，而所有内容都按预期使用THREE.LinearFilter

 <script>
    var fovInDegree = 45;
    var w = 512;
    var h = 512;
    var camera = new THREE.PerspectiveCamera(fovInDegree, Math.max(w,h) / Math.min(w,h), 0.1, 9999999 )
    var scene = new THREE.Scene();
    var fovInRadian = Math.PI/180 * fovInDegree
    var focal = (Math.min(w,h)/2) * (Math.cos(fovInRadian/2) / Math.sin(fovInRadian/2));
    camera.position.set( 0, 0,focal);
    camera.aspect = Math.max(w,h) / Math.min(w,h);
    camera.lookAt(scene.position);
    camera.updateProjectionMatrix();

    var container = document.getElementById("container");
    var renderer = new THREE.WebGLRenderer({antialias:true,transparent:true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(w,h);

    container.appendChild(renderer.domElement);


    function start(){

        //------ create a renderTarget --------
        var rttSize = 4096;
        var renderTarget = new THREE.WebGLRenderTarget(rttSize,rttSize,{
            wrapS:THREE.ClampToEdgeWrapping,
            wrapT:THREE.ClampToEdgeWrapping,
            magFilter:THREE.NearestFilter,
            minFilter:THREE.LinearMipMapLinearFilter,
            generateMipmaps:true,
            transparent:true
        })
        var rttScene = new THREE.Scene();
        var rttCamera = new THREE.OrthographicCamera(-rttSize/2,rttSize/2,rttSize/2,-rttSize/2,0,100000)

        //------- create a canvas with text in it
        var canvas = document.createElement("canvas");
        canvas.width = 4096;
        canvas.height = 4096;
        var context = canvas.getContext("2d");
        context.fillStyle = "#ff0000";
        context.font = "70pt Arial";
        for(var i=0;i<15;i++){
            context.fillText("Hello World !",i*50,i*150);
        }



        //------- create a mesh containing the canvas
        var tex = new THREE.Texture(canvas);
        tex.needsUpdate = true;
        var mesh = new THREE.Mesh(new THREE.PlaneGeometry(rttSize,rttSize,1,1),new THREE.MeshBasicMaterial({map:tex}));

        //------- draw the mesh inside the renderTarget
        rttScene.add(mesh);
        renderer.render(rttScene,rttCamera,renderTarget);
        renderer.setRenderTarget(null);

        //------ create another mesh containing the renderTarget.texture
        var texture = renderTarget.texture;
        var result = new THREE.Mesh(new THREE.PlaneGeometry(512,512,1,1),new THREE.MeshBasicMaterial({map:renderTarget.texture}));

        scene.add(result);

        //------ render to screen
        renderer.render(scene,camera);


    }
</script>