我正在使用 Three JS 将视频纹理混合到 Canvas 上。
我正在尝试使视频纹理的背景透明,但最终发生的是视频仅在某些计算机上而不是所有计算机上透明。
下面是它在未显示为透明的计算机上的外观的屏幕截图。 (具有讽刺意味的是,如果您的计算机没有遇到此问题,这将显示为透明)
我想弄清楚为什么会这样。这是我得出的结论:
所以问题是,这里发生了什么以及可能导致这种透明度问题的原因是什么?
JS fiddle 代码
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 ,编辑代码以反射(reflect) JS fiddle
https://jsfiddle.net/ytmbL69q/
最佳答案
猜测可能是显卡问题,具体取决于所使用的电脑。
Three.js 是一个在 webgl 之上使用的库,为了简单起见,还有很多其他的好东西..
也就是说,显卡在 webgl 以及着色器如何显示图形中扮演着重要的角色,并不是所有的都支持所有东西,也不是所有的都是通用的。他们通常有一个文档,提供有关 gsls 支持的每个卡版本的信息,或者查看编写自己的着色器以适应...
“此时我无法发表评论”
关于three.js - webgl 透明度在某些计算机上不起作用,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29833535/