webgl透明度无法在某些计算机上运行,​​为什么?

时间:2015-04-23 20:19:42

标签: three.js transparency alphablending

我正在使用Three JS将视频纹理混合到画布上。

我正在努力使视频纹理的背景透明,但最终发生的事情是视频在某些计算机上是透明的而不是全部。

下面是计算机上显示的透明效果的屏幕截图。 (具有讽刺意味的是,如果您的计算机没有遇到此问题,这将显得透明)enter image description here

我想弄清楚为什么会这样。以下是我的结论:

  • 这不依赖于浏览器,因为问题出现在不同的浏览器上。

  • 这不依赖于操作系统。我有时在Mac上看到这个问题,有时在Windows上看到过。

  • 这不依赖于显示器,因为我用我的QA人切换了显示器。我的QA家伙目前看到透明盒子。在我的电脑上,我没有。用我的QA人切换显示器导致我使用他的显示器但没有看到透明盒子。然而,尽管使用我的显示器,他仍然看到透明盒子。问题,这不是监视器问题。

所以问题是,这里发生了什么以及可能导致这种透明度问题的原因是什么?

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()

编辑:添加JS FIDDLE,编辑代码以反映JS Fiddle

https://jsfiddle.net/ytmbL69q/

1 个答案:

答案 0 :(得分:1)

猜测它可能是一个显卡问题,具体取决于所使用的电脑。

Three.js是一个在webgl之上使用的库,为了简单而且还有很多其他好东西。

在说,图形卡在webgl中扮演着巨大的角色,着色器如何显示图形,并非所有都支持所有内容而不是全部都是通用的......也许因此你的问题......你能做的就是首先检查你的机器图形,品牌等等。他们通常有一个文件,提供gsls支持的每个卡片版本的信息,或者看看编写自己的着色器以适应... ...

"此时我无法发表评论"