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で

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

【javascript/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

jQueryにおけるcreateElement

jQueryでcreateElementに変わる関数は単純で、例えばvar dom = docume

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

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

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

記事を読む

MMDなどの3Dモデルが閲覧・共有できるニコニ立体が面白い

いよいよニコニ立体のサービスが開始されました。色々な3D作品が既にたくさん投稿されています。

記事を読む

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

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

記事を読む

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

つぼみの3DCGモデルが配布される

公式サイトでつぼみさんの3Dモデルデータが配布が開始されているようです。これをそのまま3Dプリンタで

記事を読む

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

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

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

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

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

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

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

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

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

OpenCV3.1をopencv_contrib付きでVisual Studio2013でビルドしてインストールする

はじめに OpenCV3.1でトラッキングがしたいと思いインストーラ

→もっと見る

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