Webgl-Transparenz funktioniert nicht auf einigen Computern, warum?

Question

Ich verwende Three JS, um eine Videotextur auf eine Leinwand zu mischen.

Ich versuche es so zu machen, dass der Hintergrund der Videotextur transparent ist, aber was letztendlich passiert, ist das Video ist nur auf einigen Computern transparent und nicht alle.

Unten ist ein Screenshot von dem, wie es auf einem Computer aussieht, wo es nicht als transparent angezeigt wird. (Ironischerweise erscheint dies transparent, wenn Ihr Computer dieses Problem nicht hat)

Ich versuche herauszufinden, warum das ist. Hier ist, was ich abgeschlossen habe:

Dies ist nicht Browser abhängig wie das Problem bei verschiedenen Browsern auftritt.

Dies ist nicht vom Betriebssystem abhängig. Ich habe dieses Problem manchmal auf Mac und manchmal unter Windows gesehen.

Dies ist nicht Monitor abhängig, weil ich Monitore mit meinem QA-Typ wechselte. Mein QA-Typ sieht derzeit die transparente Box. Auf meinem Computer nicht. Das Wechseln von Monitoren mit meinem QA-Typ führt dazu, dass ich seinen Monitor benutze, aber die transparente Box nicht sehe. Er sieht jedoch immer noch die transparente Box, obwohl er meinen Monitor benutzt. Ergo, es ist kein Monitorproblem.

Die Frage ist also, was passiert hier und was könnte dieses Transparenzproblem verursachen?

JS Fiddle Code

function init() { 
    // create container, scenes and camera 
    THREE.ImageUtils.crossOrigin = true; 

    container = document.createElement('div'); 
    container.className = "ThreeJSCanvas"; 
    container.id = "ThreeJSCanvas"; 
    document.body.appendChild(container); 

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/(window.innerHeight - 61), 1, 2000); 
    camera.position.z = 100; 
cameraInterface = new THREE.PerspectiveCamera(50, window.innerWidth/(window.innerHeight - 61), 1, 2000); 
    cameraInterface.position = camera.position; 
    cameraInterface.position.z = 100; 

    sceneSprites = new THREE.Scene(); 

    sceneSky = new THREE.Scene(); 


    //renderer 
    renderer3D = new THREE.WebGLRenderer({ 
     antialias: true, 
     preserveDrawingBuffer: true, 
     devicePixelRatio: 1 
    }); 
    renderer3D.autoClear = false; 
    renderer3D.setSize(window.innerWidth, (window.innerHeight - 61)); 
    container.appendChild(renderer3D.domElement); 

    // load background image 
    var loader = new THREE.OBJLoader(); 
    loader.load('https://dl.dropboxusercontent.com/s/1cq5i4rio1iudwe/skyDome.obj', function (object) { 

     skyMesh = object; 

     var ss = THREE.ImageUtils.loadTexture('https://dl.dropboxusercontent.com/s/f7jeyl6cl03aelu/background.jpg'); 
     var texture = new THREE.MeshBasicMaterial({ 
      map: ss, 
      wrapS: THREE.RepeatWrapping, 
      wrapT: THREE.RepeatWrapping, 
      transparent: true, 
      minFilter: THREE.LinearFilter, 
      magFilter: THREE.LinearFilter, 
      opacity: 0.7 
     }); 

     skyMesh.position.y = -80; 
     skyMesh.children[0].material = texture; 
     sceneSky.add(skyMesh); 

    }); 
    createVideo(); 
    animate() 

} 


function createVideo() { 
    video = document.getElementById('video'); 
    video.setAttribute('crossorigin', 'anonymous'); 

    // Create Video Texture for THREE JS 
    var videoTexture = new THREE.VideoTexture(video); 
    videoTexture.minFilter = THREE.LinearFilter; 
    videoTexture.magFilter = THREE.LinearFilter; 
    videoTexture.format = THREE.RGBAFormat; 

    var materialConfig = new THREE.MeshBasicMaterial({ 
     map: videoTexture, 
     color: 0xffffff, 
     blending: THREE.AdditiveBlending, 
     transparent: true, 
     opacity: 1, 
     depthTest: false 
    }); 

    var geometry = new THREE.PlaneBufferGeometry(125, 125); 

    var mesh = new THREE.Mesh(geometry, materialConfig); 


    sceneSprites.add(mesh); 
    video.load(); 
    video.play(); 
} 

function animate() { 
    requestAnimationFrame(animate) 
    render() 

} 

function render() { 
    renderer3D.clear() 
    renderer3D.render(sceneSky, camera); 
    renderer3D.render(sceneSprites, cameraInterface);  
} 

init() 

EDIT: added JS FIDDLE, herausgegeben Code JS Fiddle zu reflektieren

https://jsfiddle.net/ytmbL69q/

Answer 1

Erraten es eine Grafikkarte Problem auf dem PC Wesen abhängig sein könnte benutzt.

Three.js ist eine Bibliothek, die oben auf webgl für Einfachheit und eine Menge anderer Leckereien verwendet wird ..

sagt, dass, Grafikkarten eine große Rolle in webgl spielen und wie Shadern Display-Grafiken, die nicht alle Unterstützen Sie alles und nicht alle sind universal .. Vielleicht ist Ihr Problem ... was Sie können, ist zunächst überprüfen Sie Ihre Maschinen Grafiken, Marke etc. Sie haben in der Regel ein Dokument mit Informationen über jede Kartenversion von GSLS-Unterstützung oder schauen Sie sich Ihre eigenen schreiben Shadern accomadate ...

„zu diesem Zeitpunkt konnte ich nicht kommentieren“