jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

公開日: : 3DCG, JavaScript/jQuery, Three.js

スポンサーリンク

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanvasに描かれた3Dの画面を画像として保存しようとした際に割と困惑したのでメモ。

toDataURL

HTML5のcanvasを画像データとして取得するにはcanvasのdomエレメントのtoDataURLメソッドを使うことで画面の画像のURLを文字列として取得することができます。画像の形式はpngかjpegの2種類で、引数に何も指定しなければpng形式の、引数に’image/jpeg’を指定すればjpeg形式の画像が得られます。

例)

var canvas = document.getElementById('canvas');
var imgsrc = canvas.toDataURL('image/png');
document.getElementById("sample").innerHTML = '<img src="' + imgsrc + '">';

キャンバス上に描画したものをid名がsampleのタグ内に画像としてimgタグで設定しています。

Three.jsやjThree.jsでtoDataURLを使う

toDataURLを使えばcanvasに描画した内容を簡単に画像として取得できるように見えるのですがThree.jsやjThree.jsを使った3D描画の場合はちょっとわけがちがってくるようです。実際にそのままtoDataURLメソッドを動かしても、環境によると思いますが、私の場合では結果として真っ黒な画像が出力されてしまいました。

この理由は「preserveDrawingBuffer」プロパティの値を「true」にしていないところにあるようです。このプロパティは描画後のバッファを保存するかどうかの設定のようで、trueにしていなければtoDataURLで得られるものが勝手にクリアされてしまって何も無いという状況に陥っているのではないかと考えられます。

ということでpreserveDrawingBufferの設定を行えばよいのですがこのチェックはレンダラー生成時とtoDataURL使用直前の2か所で行う必要があるようです。

Three.jsの場合

var renderer = new THREE.WebGLRenderer({
    preserveDrawingBuffer: true 
});

Three.jsの場合はWebGLRenderer生成時のプロパティに設定すればよいです。

jThree.jsの場合

<rdr param="preserveDrawingBuffer: true ;"/>

jThree.jsの場合はThree.jsで行っているような処理は全てラップされていて外からは見えないようになっているのでrdrタグにて設定を行います。といってもやることは簡単でrdrタグのparam属性に対して上記のようにpreserveDrawingBufferをtrueにするだけです。このようにすることで内部ではThree.jsの場合で行っている処理と同じものが行われるようになっています。

コンテキストの生成

そして、preserveDrawingBufferをtrueの状態で使うにはその場面の前に次のような指令でcontextを取得した後にtoDataURLすることが必要なようです。

var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
var url = canvas.toDataURL();

デモ

jThree.jsで描画したものを画像として出力するものを作りましたのでそちらも参考にしてみてください。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

javascriptでチェックボックスを一括で変更する方法

チェックボックスのチェックに一つ一つチェックを入れていくのは非常に手間がかかるのでjavascrip

記事を読む

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

【javascript】正規表現文字抽出簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑