Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
71
Help us understand the problem. What is going on with this article?
@edo_m18

Three.jsで動画をテクスチャに指定する

More than 5 years have passed since last update.

[2015.05.21 追記]
どうやら最新版(r72)ではvideo要素をそのままテクスチャとして使う方法があるようです。
サンプルもありました。

ざっくりとその記述だけ抜き出すと、こんな感じで非常に手軽に利用できます。

videoTexture
video = document.getElementById( 'video' );

texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

下の記事はその前に書いたもので、比較的低レイヤーでのやり方です。


Three.jsのサンプルにあったものを抜粋。
基本的なフローは

  1. video要素を生成(あるいは取得)
  2. videoをキャプチャするcanvas要素を生成(あるいは取得)
  3. canvas要素をtextureに指定
  4. 生成したtextureを元にマテリアルを生成
  5. loop updateの中でcanvasを更新し、さらにtextureオブジェクトのneedsUpdateをtrueに指定

という手順で、あとは勝手にThree.jsが更新してくれる。

videotexture.js
//video要素とそれをキャプチャするcanvas要素を生成
var video = document.createElement('video');
video.src = "some.mp4";
video.load();
video.play();

var videoImage = document.createElement('canvas');
videoImage.width = 480;
videoImage.height = 200;

var videoImageContext = videoImage.getContext('2d');
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height);

//生成したcanvasをtextureとしてTHREE.Textureオブジェクトを生成
var videoTexture = new THREE.Texture(videoImage);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

//生成したvideo textureをmapに指定し、overdrawをtureにしてマテリアルを生成
var movieMaterial = new THREE.MeshBasicMaterial({map: videoTexture, overdraw: true, side:THREE.DoubleSide});
var movieGeometry = new THREE.PlaneGeometry(10, 10, 4, 4);
var movieScreen = new THREE.Mesh(movieGeometry, movieMaterial);
movieScreen.rotation.y = THREE.Math.degToRad(90);

scene.add(movieScreen);

//loop updateの中で実行
if (video.readyState === video.HAVE_ENOUGH_DATA) {
    videoImageContext.drawImage(video, 0, 0);
    if (videoTexture) {
        videoTexture.needsUpdate = true;
    }
}
71
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
edo_m18
現在はUnity ARエンジニア。 主にARのコンテンツ制作をしています。 最近は機械学習にも興味が出て勉強中です。 Unityに関するブログは別で書いています↓ https://edom18.hateblo.jp/
unity-game-dev-guild
趣味・仕事問わずUnityでゲームを作っている開発者のみで構成されるオンラインコミュニティです。Unityでゲームを開発・運用するにあたって必要なあらゆる知見を共有することを目的とします。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
71
Help us understand the problem. What is going on with this article?