3

WebGL機能にThree.jsを使用して、JavaScriptで遅延ウェブカメラビューアを実装しようとしています。

ウェブカメラから取得したフレームを保存する必要があるため、しばらくすると表示されます (数ミリ秒から数秒)。canvasと を使用して、 Three.js なしでこれを行うことができgetImageData()ます。jsfidle で例を見つけることができます。

キャンバスなしでこれを行う方法を見つけようとしていますが、Three.jsTextureまたはDataTextureオブジェクトを使用しています。ここに私がしようとしているものの例があります。Texture問題は、イメージを( imageis of type HTMLVideoElement) から別のイメージにコピーする方法が見つからないことです。

機能的にはrotateFrames()、FIFO のように、古いフレームが失われ、新しいフレームが置き換えられる必要があります。しかし、ライン

frames[i].image = frames[i + 1].image;

テクスチャ データではなく、参照をコピーするだけです。これを行う必要があると思いますが、またはDataTextureから取得できません。DataTextureTextureHTMLVideoElement

何か案が？

警告:カメラが必要で、ブラウザがサンプルを動作させるためにカメラを使用できるようにする必要があります。そして明らかに、更新されたブラウザが必要です。

4

1 に答える 1

2

これはあなたが探しているものですか??

http://fiddle.jshell.net/m4Bh7/10/

編集：

function onFrame(dt) {
    if (video.readyState === video.HAVE_ENOUGH_DATA) { /* new frame available from webcam */
        context.drawImage(video, 0, 0,videoWidth,videoHeight);
        frames[framesNum - 1].image.data = new Uint8Array(context.getImageData(0,0,videoWidth, videoHeight).data.buffer);
        frames[framesNum - 1].needsUpdate = true;
    }
}

これが最も重要な部分です。フレームのコピーを作成し、dataTexture にデータとして保存します。 

function rotateFrames() {
    for (var i = 0; i != framesNum - 1; ++i) {
/*
         * FIXME: this does not work!
         */
        frames[i].image.data = frames[i + 1].image.data;
        frames[i].needsUpdate = true;
    }
}

これにより、フレーム内のテクスチャからテクスチャにデータがコピーされます。

新しいバージョン:http://fiddle.jshell.net/hWL2E/4/

function onFrame(dt) {
    if (video.readyState === video.HAVE_ENOUGH_DATA) { /* new frame available from webcam */
        context.drawImage(video, 0, 0,videoWidth,videoHeight);
         var frame = new THREE.DataTexture(new Uint8Array(context.getImageData(0,0,videoWidth, videoHeight).data.buffer) ,videoWidth,videoHeight);
        frames[framesNum - 1] = frame;
        frames[framesNum - 1].needsUpdate = true;
        sprites[framesNum - 1].map = frames[framesNum - 1];
    }
}

ビデオ画像のフレームごとに新しいテクスチャを生成します。

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

    }
}

これがそれをより良くするものです。使用されたテクスチャを再利用するため、GPU に再送信する必要はありません。

于 2012-09-26T12:58:11.443 に答える