Прозрачность webgl не работает на некоторых компьютерах, почему?

Я использую Three JS для смешивания текстуры видео на холсте.

Я пытаюсь сделать так, чтобы фон видеоматериала был прозрачным, но то, что в итоге происходит, - это видео только на некоторых компьютерах, а не на всех.

Ниже приведен снимок экрана о том, как он выглядит на компьютере, где он не отображается как прозрачный. (по иронии судьбы это станет прозрачным, если ваш компьютер не пострадает от этой проблемы) enter image description here

Я пытаюсь понять, почему это так. Вот что я заключил:

  • Это не зависит от браузера, поскольку проблема возникает в разных браузерах.

  • Это не зависит от ОС. Я часто видел эту проблему на Mac, а иногда и на Windows.

  • Это не зависит от монитора, потому что я переключил мониторы с моим парнем QA. Мой парень QA в настоящее время видит прозрачную коробку. На моем компьютере я этого не делаю. Переключение мониторов с моим парнем QA приводит к тому, что я использую его монитор, но не вижу прозрачную коробку. Тем не менее он все еще видит прозрачную коробку, несмотря на использование моего монитора. Ergo, это не проблема с монитором.

Итак, вопрос в том, что здесь происходит и что может вызвать эту проблему прозрачности?

Код скрипта JS

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, отредактированный код, чтобы отразить JS Fiddle

https://jsfiddle.net/ytmbL69q/

Ответы

Ответ 1

Угадав, что это может быть проблема с графической картой в зависимости от используемого компьютера.

Three.js - это библиотека, которая используется поверх webgl для простоты плюс множество других полезных свойств.

Говоря о том, что графические карты играют огромную роль в webgl и как шейдеры отображают графику, не все поддерживают все, а не все являются универсальными.. Может быть, поэтому ваша проблема... что вы можете, во-первых, проверить свою графику машин, бренд и т.д. Они обычно имеют документ, дающий информацию о каждой версии карт поддержки gsls или смотря на создание собственных шейдеров для размещения...

"в это время я не смог прокомментировать"