webgl transparency not working on some computers, why?

Question

I am using Three JS to blend a video texture onto a canvas.

I'm trying to make it so that the background of the videotexture is transparent but what ends up happening is the video is only transparent on some computers and not all.

Below is a screenshot of what it looks like on a computer where it is not showing as transparent. (ironically this will appear transparent if your computer does not suffer this problem)

I am trying to figure out why this is. Here's what I've concluded:

• This is not browser dependent as the problem occurs on different browsers.

• This is not OS dependent. I've seen this problem sometimes on Mac and sometimes on Windows.

• This is not monitor dependent because I switched monitors with my QA guy. My QA guy currently sees the transparent box. On my computer I don't. Switching monitors with my QA guy results in me using his monitor but not seeing the transparent box. He however still sees the transparent box despite using my monitor. Ergo, it isn't a monitor problem.

So the question is, what is happening here and what could be causing this transparency problem?

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, edited code to reflect JS Fiddle

https://jsfiddle.net/ytmbL69q/

Answer 1

Guessing it could be a graphic card issue depending on the pc being used.

Three.js is a library that is used on top of webgl for simplicity plus alot of other goodies..

In saying that, graphics cards play a huge role in webgl and how shaders display graphics, not all support everything and not all are universal.. Maybe hence your issue... what you can is firstly check your machines graphics, brand etc..They generally have a document giving info on each cards version of gsls support or look at writing your own shaders to accomadate...

"at this time I was not able to comment"