JsARtoolkit Alpha vidéo

Question

Je suis trynig pour ajouter sur le marqueur une vidéo alpha o juste une vidéo avec troisjs et JSARtoolkit, les objets fonctionnent bien mais quand j'essaye avec un .mov la caméra est arrêtée et n'a aucune erreur sur la console.

que je suis ce tutoriel pour ajouter une vidéo https://makc3d.wordpress.com/2014/04/01/transparent-video-texture-in-three-js/

Script - JS TROIS.

meshes = []; 
mixers = []; 
var hemisphereLight; 
var pointLight; 
var camera; var controls; 
var clock = new THREE.Clock; 
window.ARThreeOnLoad = function() { 
ARController.getUserMediaThreeScene({maxARVideoSize: 320, cameraParam: 'Data/camera_para-iPhone 5 rear 640x480 1.0m.dat', 
onSuccess: function(arScene, arController, arCamera) { 

    _arsc = arScene; 
    _arcon = arController; 
    _arcam = arCamera; 

    document.body.className = arController.orientation; 

    var renderer = new THREE.WebGLRenderer({antialias: true}); 
    if (arController.orientation === 'portrait') { 
     var w = (window.innerWidth/arController.videoHeight) * arController.videoWidth; 
     var h = window.innerWidth + 100; 
     renderer.setSize(w, h); 
     renderer.domElement.style.paddingBottom = (w-h) + 'px'; 
    } else { 
     if (/Android|mobile|iPad|iPhone/i.test(navigator.userAgent)) { 
      renderer.setSize(window.innerWidth, (window.innerWidth/arController.videoWidth) * arController.videoHeight); 
     } else { 
      renderer.setSize(arController.videoWidth, arController.videoHeight); 
      document.body.className += ' desktop'; 
     } 
    } 

    document.body.insertBefore(renderer.domElement, document.body.firstChild); 

    var tick = function() { 
     arScene.process(); 
     arScene.renderOn(renderer); 
     requestAnimationFrame(tick); 
    }; 
    tick(); 


ChromaKeyMaterial = function (url, width, height, keyColor) { 
THREE.ShaderMaterial.call(this); 

video = document.createElement('video'); 
video.loop = true; 
video.src = url; 
video.load(); 
video.play(); 

var videoImage = document.createElement('canvas'); 
if (window["webkitURL"]) document.body.appendChild(videoImage); 
videoImage.width = width; 
videoImage.height = height; 

var keyColorObject = new THREE.Color(keyColor); 

var videoImageContext = videoImage.getContext('2d'); 
// background color if no video present 
videoImageContext.fillStyle = '#' + keyColorObject.getHexString(); 
videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height); 

var videoTexture = new THREE.Texture(videoImage); 
videoTexture.minFilter = THREE.LinearFilter; 
videoTexture.magFilter = THREE.LinearFilter; 

this.update = function() { 
    if (video.readyState === video.HAVE_ENOUGH_DATA) { 
     videoImageContext.drawImage(video, 0, 0); 
     if (videoTexture) { 
      videoTexture.needsUpdate = true; 
     } 
    } 
} 

this.setValues({ 

    uniforms: { 
     texture: { 
      type: "t", 
      value: videoTexture 
     }, 
     color: { 
      type: "c", 
      value: keyColorObject 
     } 
    }, 
    vertexShader: document.getElementById('vertexShader').textContent, 
    fragmentShader: document.getElementById('fragmentShader').textContent, 

    transparent: true 
}); 
} 

ChromaKeyMaterial.prototype = Object.create(THREE.ShaderMaterial.prototype); 



// var camera = new THREE.PerspectiveCamera(); 
// camera.position.set(0, 150, 900); 
// camera.lookAt(scene.position); 
// scene.add(camera); 

renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setClearColor(0xffffff); 
// document.getElementById('demo').appendChild(renderer.domElement); 

// var controls = new THREE.OrbitControls(camera, renderer.domElement); 



var movieMaterial = new ChromaKeyMaterial('video_video.mov', 242, 421, 0xd400); 
var movieGeometry = new THREE.PlaneGeometry(60, 105, 4, 4); 

var girls = [] 
for (var i = 0; i < 5; i++) 
    for (var j = 0; j < 5; j++) 
     if ((i + j) % 2 == 0) { 
      var movie = new THREE.Mesh(movieGeometry, movieMaterial); 
      movie.position.set(0, 53, 0); 

      var girl = new THREE.Object3D(); 
      girl.position.set(150 * (i - 2), 0, 150 * (j - 2)); 

      girl.add(movie); 
      arController.loadMarker('Data/patt.hiro', function(markerId) { 
       markerRoot = arController.createThreeMarker(markerId); 
       markerRoot.add(girl); 
       // arScene.scene.add(camera); 
       arScene.scene.add(markerRoot); 
      }); 

      girls.push(girl); 
     } 


// animate 
var animate = function() { 
    // controls.update(); 

    movieMaterial.update(); 

    requestAnimationFrame(animate); 
} 

animate(); 
}}); 

delete window.ARThreeOnLoad; 

}; 

if (window.ARController && ARController.getUserMediaThreeScene) { 
ARThreeOnLoad(); 
} 

Answer 1

Les fichiers .mov ne sont pas autorisés pour les appareils Android, utilisez mp4. pour la transparence j'ai fait AR pour mobile en utilisant Unity et Vuforia, les actifs sont une "vidéo spéciale" et un shader qui utilise "luma cut". Vuforia: it is possible play a Movie texture with alpha in iOS? Je l'ai également fait et je l'explique pour le traitement dans cet article: Video with alpha channel in Processing Espérons que c'est assez clair, bonne chance!