Javascript Three.js WebGL动画在Android 5.1.1棒棒糖上的网络视图中显示重影

我正在使用WebGL和three.js构建一个增强现实应用程序。我想使用带有WebGL的透明web视图来显示叠加在视频提要上的3D内容。问题是，通过将WebGLRenderer

alpha:true

传递给

WebGLRenderer

构造函数，将WebGLRenderer设置为透明时，会产生不良的重影效果

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    var canvas = document.getElementById("webGLCanvas");
    var renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
    renderer.setSize( window.innerWidth, window.innerHeight );

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
    var cube = new THREE.Mesh( geometry, material );
    cube.position.z = -5;
    scene.add( cube );

    render();

    function render()
    {
        requestAnimationFrame(render);
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
    }

旋转立方体的动画运行时，如下所示：

如果我没有将

alpha:true

传递给

WebGLRenderer

构造函数，重影问题就会消失，但是我的画布和web视图是不透明的

这是Android棒棒糖上Chrome/WebView中的一个bug，还是有更好的方法

---

编辑：我应该提到，在iOS 8+上的web视图中运行时，这段代码没有重影问题。

这是OpenGL提供的，因此我假设在WebGL中也可以，但在渲染每个帧之前，您应该清除颜色缓冲区。您能确认您正在执行此操作吗？谢谢您的建议，但是在

渲染器之前添加
渲染器.clear（）
。渲染（场景、摄影机）

并没有什么不同。另外，设置

renderer.autoClear=true

或

renderer.autoClearColor=true

也没有帮助。我以为WebGL允许您调用OpenGL函数？例如，不能

glClear（GL\u COLOR\u BUFFER\u BIT）或等效物——例如
glClearBufferfv（GLU颜色，…）？我对在视频提要（TextureView/SurfaceView）上合成WebView alpha中的WebGL有些怀疑。我确实建议听一下Android Backstage的WebView插曲：并可能将错误报告提交给：根据您的建议，我尝试了
renderer.context.clear（renderer.context.COLOR\u BUFFER\u BIT）
，它可能会更直接地与GL上下文交互，但没有效果。