Los videos de Three.js WebGLRenderered no se reproducen en teléfonos Android
El ejemplo de textura de video a continuación no parece funcionar en el teléfono Android LG Nexus, aunque todos los demás ejemplos que no son de video funcionan, incluido el ejemplo de YouTube en three.js.
¿Alguien más tiene este problema? Estoy tratando de renderizar video usando THREE.WebGLRenderer para poder usar el efecto estéreo con el kit VR (como google carton). Hasta ahora, solo los videos renderizados CSS3DRenderer / Canvas parecen funcionar en el teléfono. Pero no puedo usar estos renderizadores porque el efecto estéreo no funciona con estos renderizadores (es decir, efecto = nuevo THREE.StereoEffect (renderizador);)
http://mrdoob.github.io/three.js/examples/webgl_materials_video.html
Por favor, avíseme si hay que renderizar videos con efecto estéreo.
ACTUALIZACIÓN --------------- CÓDIGO EN MANO (Adaptado dehttp://stemkoski.github.io/Three.js/Video.html)
<!doctype html>
<html lang="en">
<head>
<title>Video Texture (Three.js)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- <link rel=stylesheet href="css/base.css"/> -->
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/effects/StereoEffect.js"></script>
<div id="ThreeJS"></div>
<script>
var container, scene, camera, renderer, controls, stats, effect, element;
var video, videoImage, videoImageContext, videoTexture;
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer( {antialias:true} );
//effect = new THREE.StereoEffect(renderer);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
element= renderer.domElement;
//effect.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( element );
// CONTROLS
controls = new THREE.OrbitControls( camera, element );
element.addEventListener('click', fullscreen, false);
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
///////////
// VIDEO //
///////////
// create the video element
video = document.createElement( 'video' );
//video.id = 'video';
video.type = ' video/mp4; codecs="theora, vorbis" ';
video.src = "video/sintel.ogv";
video.load(); // must call after setting/changing source
video.play();
videoImage = document.createElement( 'canvas' );
videoImage.width = 320;
videoImage.height = 240;
videoImageContext = videoImage.getContext( '2d' );
// background color if no video present
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );
videoTexture = new THREE.Texture( videoImage );
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, overdraw: true, side:THREE.DoubleSide } );
// the geometry on which the movie will be displayed;
// movie image will be scaled to fit these dimensions.
var movieGeometry = new THREE.PlaneGeometry( 240, 100, 4, 4 );
var movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );
movieScreen.position.set(0,50,00);
scene.add(movieScreen);
camera.position.set(0,150,300);
camera.lookAt(movieScreen.position);
window.addEventListener('resize', resize, false);
setTimeout(resize, 1);
}
function update() {
resize();
camera.updateProjectionMatrix();
controls.update();
}
function animate()
{
requestAnimationFrame( animate );
render();
//update();
}
function fullscreen() {
video.play();
console.log(video);
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
}
}
function resize() {
var width = container.offsetWidth;
var height = container.offsetHeight;
//console.log(container, width,height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
//effect.setSize(width, height);
}
function render()
{
if ( video.readyState === video.HAVE_ENOUGH_DATA )
{
videoImageContext.drawImage( video, 0, 0 );
if ( videoTexture )
videoTexture.needsUpdate = true;
}
renderer.render( scene, camera );
}
</script>
</body>
</html>