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
