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

関連記事

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

javascriptにおけるfor文の書き方

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

記事を読む

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

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

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

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

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

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

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

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

→もっと見る

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