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

関連記事

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

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

記事を読む

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

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

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

記事を読む

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

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

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

記事を読む

WordPressの記事内でJavaScriptを動かす

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

記事を読む

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

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

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

記事を読む

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 ↑