WebGLからPNGを出力
WebGLからPNGを出力するのは簡単です。「toDataURL」を使うことで、画像データをBase64文字列化した状態で取得できます。
注意しなければならない点は、画像のテクスチャを読み込む際、レンダリングが行われ、画像が表示される前に「toDataURL」を使っても、意図した画像は出力できないということです。そういった場合は、すべての画像が読み込まれるのを待つか、ユーザーに表示を確認してもらい、ボタン等で出力処理を行うようにする必要があります。
以下、WebGLからPNGを出力する「crocro.bc.outputPng.js」を掲載します。
//= サンプル:WebGLからPNGを出力 //== WebGLからPNGを出力 crocro.bc.outputPng = function() { // 変数の初期化 var d3 = crocro.bc.d3; // 3D格納用 var plt; // 要素の作成と格納 plt = crocro.bc.mkCnvsTxtr(); d3.scene.add(plt); crocro.bc.render(); // PNGの出力 var png = crocro.bc.getPng(); window.open(png, "_blank"); }; //== PNGの取得 crocro.bc.getPng = function() { return crocro.bc.d3.renderer.domElement.toDataURL('image/png'); };
まとめ
これまで作成した各部品を合成して、1コマだけの簡易コマ表示を行います。また、集中線やフキダシ、箱人形の腕や足の部品を操作対象にして、移動、回転、拡縮の操作もできるようにします。そして、作成したコマをPNGで出力するボタンも付けます。
以下、まとめ部分のソースコード「crocro.bc.viewCompo.js」を掲載します。そして次ページでは、いくつかポイントを解説します。
//= サンプル:まとめ //== まとめ crocro.bc.viewCompo = function() { // 変数の初期化 var d3 = crocro.bc.d3; // 3D格納用 var obj; var bgPth = "./img/bg.jpg"; d3.tgts = []; d3.nms = [ "背景", "フキダシ", "集中線", "キャラ全体", "頭", "胴", "右腕", "左腕", "右足", "左足" ]; d3.rttTyp = [ 0, 0, 0, 0, 0, 0, 1, 1, 1, 1 ]; //======================================== // 要素の作成と格納 // 背景 obj = crocro.bc.mkImgTxtr1(bgPth, true); obj.scale.x = 2.2; obj.scale.y = 2.2; obj.position.z = -200; d3.scene.add(obj); // シーンに追加 d3.tgts.push(obj); // 背景に追加 // フキダシ obj = crocro.bc.mkFukidasi(false); obj.position.x = -220; obj.position.y = 200; obj.position.z = 100; obj.scale.x = 1.3; obj.scale.y = 1.3; d3.scene.add(obj); // シーンに追加 d3.tgts.push(obj); // 操作対象に追加 // 集中線 obj = crocro.bc.mkFlash(0x000000); obj.position.x = 200; obj.scale.x = 2; obj.scale.y = 2; d3.scene.add(obj); // シーンに追加 d3.tgts.push(obj); // 操作対象に追加 // 箱人形キャラ obj = crocro.bc.mkBoxChar(); obj.position.x = 200; obj.position.y = -100; d3.scene.add(obj); // シーンに追加 d3.tgts.push(obj); // 操作対象に追加 d3.tgts = d3.tgts.concat(obj.children); // 子要素を操作対象に追加 crocro.bc.render(); //======================================== // マウスUIの作成 crocro.bc.useMouse_mkUI(); // マウス操作の作成 crocro.bc.useMouse_setMouse(); // 操作対象UIの作成 crocro.bc.viewCompo_mkUI(); // 先頭を選択 d3.tgt = d3.tgts[0]; // 終了処理 crocro.bc.setFinalize(function() { var d3 = crocro.bc.d3; // 3D格納用 d3.tgt = null; d3.tgts = null; d3.nms = null; d3.rttTyp = null; }) }; //== 操作対象UIの作成 crocro.bc.viewCompo_mkUI = function() { // 変数の初期化 var d3 = crocro.bc.d3; // 3D格納用 //======================================== // UIの作成 var ui = crocro.bc.ui; ui.append("<br>"); for (var i = 0; i < d3.tgts.length; i ++) { // ラジオボタンを作成 var rdo = $('<input type="radio">') .attr("name", "uiTgtPrts") .attr("id", "uiTgtPrts_i" + i) .attr("value", i); // 先頭を選択 if (i == 0) { rdo.attr("checked", true) } // UIに追加 ui.append(rdo); // ラベルを作成 ui.append( $('<label>') .attr("for", "uiTgtPrts_i" + i) .text(d3.nms[i]) ); } // 変更時のイベントを追加 $('input[name="uiTgtPrts"]:radio').change( function() { var tgtNo = $(this).val(); crocro.bc.d3.tgt = d3.tgts[tgtNo]; // 回転操作の変更 if (d3.rttTyp[tgtNo] == 0) { crocro.bc.changeRtt = crocro.bc.changeRttBasic; } else { crocro.bc.changeRtt = crocro.bc.changeRttPole; } }); //======================================== // 出力ボタンを作成 ui .append("<br>") .append( $('<input type="button">') .val("PNG出力") .click(function() { var png = crocro.bc.getPng(); window.open(png, "_blank"); }) ); }; //== 基本の回転操作 crocro.bc.changeRttBasic = function(tgt, difX, difY) { tgt.rotation.y += difX / 100; tgt.rotation.x += difY / 100; } //== 棒状の物体の回転操作 crocro.bc.changeRttPole = function(tgt, difX, difY) { tgt.rotation.z += difX / 100; tgt.rotation.x += difY / 100; }