Javascript 如何使用Three.js renderer.info对象调试WebGL错误？

我已经创建了一个具有新功能的玩具程序，现在我正在将其集成到一个更大的程序中。目前，这两个程序都以精简的调试形式显示使用

ShaderMaterial

和

BufferGeometry

渲染的纹理的

PointClouds

。现在我正在尝试调试一个WebGL错误，它现在在大程序中，但不在玩具中：

GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source and destination textures of the draw are the same.

我注意到，尽管在两个程序中运行相同的可视化，但它们提供的

renderer.info

对象中存在差异

没有错误的玩具程序控制台显示：

render: Object
    calls: 1
    faces: 2
    points: 0
    vertices: 6

render: Object
    calls: 2
    faces: 2
    points: 20
    vertices: 6

出现错误的程序的控制台显示：

render: Object
    calls: 1
    faces: 2
    points: 0
    vertices: 6

render: Object
    calls: 2
    faces: 2
    points: 20
    vertices: 6

这两个项目表面上应该做同样的事情。这个额外的电话和额外的分数是否与问题有关？我浏览了Three.js WebGLRenderer.js脚本，认为这些值是在处理点云几何体的区域中设置的

在无错误的玩具程序（顶部列表）中，无论我向云中添加了多少纹理图像点，

渲染器.info

对象的

点

值保持为零，可视化都会正确渲染，并且没有错误。但是，在另一个有错误的程序（第二个列表）中，

points

值跟踪我添加到云中的点数，可视化效果正确呈现，但我收到一条错误消息。在这两种情况下，我都没有弄清楚如何影响

呼叫的数量

有人能帮助我更好地理解这些事情，以及它们与此错误消息的关系吗？谢谢

更新：

后来我了解到，如果我从带有错误的程序中的场景中删除
点云
，错误就会消失，并且
renderer.info
对象看起来像玩具程序中的对象，但当然玩具仍然显示
点云
，并且没有错误。我用新的几何体和材质代替了
点云
，并返回了错误消息，因此错误似乎不是特定于
点云
。也许EffectComposer的构造有问题：

var container, renderer;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var lightComposer, lightCamera, lightLight, lightScene, lightCloud;

function init() {

    renderer = new THREE.WebGLRenderer( {
        antialias : false,
        alpha : true
    } );
    var ctx = renderer.getContext();
    ctx.disable( ctx.DEPTH_TEST );
    renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
    renderer.setClearColor( 0x000000, 0 );
    renderer.autoClear = false;

    container = document.getElementById( 'ThreeJS' );
    container.appendChild( renderer.domElement );

    lightScene = new THREE.Scene();

    lightCamera = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, 1, 1000 );
    lightCamera.position.set( 0,0,1000 );
    lightCamera.lookAt( lightScene.position );

    lightLight = new THREE.PointLight( 0xffffff );
    lightLight.position.set( 100,250,0 );
    lightScene.add( lightLight );

    var shaderCopy = THREE.CopyShader;
    var effectCopy = new THREE.ShaderPass( shaderCopy );
    effectCopy.renderToScreen = true;

    // COMPOSER
    var rtParameters = {
        minFilter : THREE.LinearFilter,
        magFilter : THREE.LinearFilter,
        format: THREE.RGBFormat,
        stencilBuffer: false
    };

    var rtWidth  = SCREEN_WIDTH;
    var rtHeight = SCREEN_HEIGHT;

    lightComposer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
    lightCloud = LightCloudMaker.getCloud( SCREEN_WIDTH, SCREEN_HEIGHT );
    lightScene.add( lightCloud );//***If I remove this the error goes away, if I add a plain cube in its place the error returns. Both the PointCloud and Cube are displayed when the error occurs
    var renderLight = new THREE.RenderPass( lightScene, lightCamera );
    lightComposer.addPass( renderLight );
    lightComposer.addPass( effectCopy );

    animate();   
}

function animate() {

     requestAnimationFrame( animate );
     render();
}

function render() {
    renderer.clear(); 
    lightComposer.render();
}

更新2:

当场景中有任何可见对象时，我似乎在大程序中得到了错误-一个
点云
，一个
立方体
，甚至是
AxisHelpers
。当我移除这些可见对象时，错误就消失了。把这些放在玩具程序中没有问题-没有错误。在大程序和玩具程序中，对象都显示得很好；区别在于是否存在错误消息

更新3:

我发现，如果我注释掉两个程序中的复制着色器过程（
lightComposer.addPass（effectCopy）；
），图像将不再渲染（因为复制过程是渲染到屏幕的过程），但我仍然可以读取两个程序中渲染过程的
render.info
值。结果是有益的。如果没有复制过程，两个渲染过程都会为调用、面、点和顶点生成相同的值。例如，以下是简单多维数据集的值（在两个程序中相同）：

现在，当我将复制过程添加回两个程序时，结果不同：

玩具程序，执行无误：

render: Object
    calls: 1
    faces: 2
    points: 0
    vertices: 6

有错误的大程序：

render: Object
    calls: 2
    faces: 14
    points: 0
    vertices: 42

在Web GL错误的大程序中，您可以看到
renderer.info
对象显示缓冲区现在包含渲染过程的结果（立方体值）和复制过程的结果（网格）。执行时不会出错的玩具程序仅显示复制过程（网格）的值。为什么在大项目中要将这些价值加在一起？正如错误所说，读写缓冲区是相同的，这就是这些值所反映的。这是怎么回事？谢谢你在正确的方向上所做的一切

新信息：在使用控制台时，我还发现错误直到第二次通过渲染功能显示时才会出现。这可能是信息性的，或者从GPU返回错误时通常会有延迟吗？
可能会向我们展示您的着色器材质code@2pha-感谢您的关注，我添加了一个更新。见上文。我开始添加ShaderMaterial代码，直到我想到尝试上面的实验。让我知道你的想法。