Texture to DataTexture

by alessandro_pezzato

HTML

<script src="https://github.com/mrdoob/three.js/raw/master/build/three.min.js"></script>
    <div id="container"></div>
    <video id="video"></video>

CSS

#video {
    display: none;
}

JavaScript

var texture = null;
var renderer = null;
var scene = null;
var camera = null;
var video = null;
var time = null;
var sprites = [];
var frames = [];
var framesNum = 4;
var videoWidth = 128;
var videoHeight = 96;

$(function() {
    init();
    animate();
});

function init() { /* renderer */
    var WIDTH = 1024;
    var HEIGHT = 480;
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    var $container = $('#container');
    $container.append(renderer.domElement);

    /* scene */
    scene = new THREE.Scene();

    /* camera */
    var NEAR = 0.1;
    var FAR = 10000;
    camera = new THREE.OrthographicCamera(-10, 10, 10, -10, NEAR, FAR);
    camera.position.z = 300;
    scene.add(camera);

    /* texture from webcam */
    video = $('#video').get(0);
    video.width = videoWidth;
    video.height = videoHeight;
    video.autoplay = true;
    video.style.opacity = 1;
    texture = new THREE.Texture(video);

    var group = new THREE.Object3D();

    /* sprites */
    for (var i = 0; i != framesNum; ++i) { /* instantiate texture */
        var frame = new THREE.Texture(texture); /* instantiate sprite */
        var sprite = new THREE.Sprite({
            map: frame
        });
        sprite.position.set(videoWidth / 2 + videoWidth * (i % 4), videoHeight / 2 + videoHeight * (Math.floor(i / 4)), 0);
        sprites[i] = sprite;
        frames[i] = frame;
        group.add(sprite);
    }
    scene.add(group);

    /* initialize webcam */
    initWebcam();
}

/**
 * called by requestAnimationFrame
 */

function animate() {
    requestAnimationFrame(animate);
    var now = new Date().getTime();
    var dt = now - (time || now);
    time = now;
    onFrame(dt / 1000);
    renderer.render(scene, camera);
}

/**
 * updates sprites' map textures 1 become 0, 2 become 1...
 * (called every second)
 */

function rotateFrames() {
    for (var i = 0; i != framesNum - 1; ++i) {
/*
         * FIXME: this does not work!
         */
       ...