JsARtoolkit Alpha video

Question

我是在标记上添加alpha视频o只有一个带有threxjs和jsartoolkit的视频，这些对象正常工作，但是当我尝试使用.mov时，相机就不会停止，并且没有控制台上的错误。

我正在关注本教程添加视频https://makc3d.wordpress.com/2014/04/01/transparent-video-video-texture-in-three-js/

脚本-JS三。

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

.mov文件对于Android设备不允许使用MP4。对于透明度，我使用Unity和Vuforia为移动设备完成了AR，资产是一个"特殊视频"，并且是使用" Luma Cut"的着色器。Vuforia：有可能在iOS中使用Alpha播放电影纹理吗？我也这样做了，并在这篇文章中解释了用于处理：与Alpha Channel一起处理的视频希望它足够清楚，祝你好运！