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
  • このエントリーをはてなブックマークに追加

関連記事

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

【MMD】初音ミクをプログラミングで動かすには

MikuMikuDanceという初音ミクをはじめとした3Dモデルを動かすことのできるフリーソフトがあ

記事を読む

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

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

記事を読む

【jquery】iframe内のスクロールイベント設定とスクロール量取得

ページ内に設置したiframeのスクロールイベントおよびスクロール量を取得したかったのでメモ

記事を読む

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

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

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

記事を読む

jQueryにおけるcreateElement

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

記事を読む

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

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

記事を読む

【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

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