読者です 読者をやめる 読者になる 読者になる

Windows 7のEclipseのフォントをきれいなものにする

Eclipse Font
Windows 7のEclipse3.7では、フォントを変更してもフォントリンクが機能しません。
だから、ConsolasMeiryoKe_ConsoleをリンクしてEclipseのフォントをConsolasにしても、Eclipse上では次の画像のように日本語がMS ゴシックで表示されてしまい、とても不釣り合いです。
f:id:dai1741:20120215235148p:image

ConsolasとMeiryoKe_Consoleのフォントリンクのやり方は、Windows7 搭載マシンを買ってきてやったことまとめ - IT戦記をみるととてもわかりやすいです)

そのため、WindowsのEclipseできれいなフォントを使うためには、もう少し違う方法を使う必要があります。
具体的には、次の2つのどちらかになります。

RictyやVLゴシックをgdi++と合わせて使う

RictyVLゴシックを使う方法は、以下で説明するフォント合成よりもいくらか手軽です。
この2つのフォントはWindows以外でも使える(条件付きで)フリーのフォントで、フォントリンクに依存していません。そのため、Eclipseでもきれいに表示されます。

この2つのフォントのインストール方法は上記リンク先のページを参考にしてください。
どちらのフォントも多少インストール方法がやや特殊ですが、検索すれば情報がたくさん出てきます。

ただこの2つのフォントは、ClearTypeありのWindowsと相性が悪く、そのままだときれいに表示できません。
これは、gdi++ Heliumを使うと解決します。使い方は、マニュアルを見てください。
(gdi++にはいくつか種類があって、Herium版でなくても同じように使えるかもしれませんが、自分が試したところFreetype版だとAndroid SDKとの相性が悪いらしくEclipseが頻繁に落ちたので、Helium版をお勧めします。)

FontForgeを使ってConsolasとMeiryoKe_Consoleを合成

ConsolasMeiryoKe_Consoleを合成する方法は、とても面倒です。
フォントを合成するためにはFontForgeを使います。
 
WindowsでFontForgeを使うには、Cygwinを使うのが手っ取り早いです。
ここではCygwinはインストールされているとして、FontForgeを使うには、次のページを参考にFontForgeCygwinにインストールしてください。 

FontForge の cygwin (MS-Windows) へのインストール手順

X11のインストールするソフトは上記ページでは細かく指定されていますが、現在(2011/7/20)の配布物とはあまり一致していないので、X11カテゴリ内のソフトををまとめてインストールしていいと思います。
 
次に、MeiryoKeとttfname3.exeを次のサイトからダウンロードしてください。
ブログ内記事で取りあげたソフト・ファイルのDL情報 『ことば・その周辺』
 
そうしたら、次のページに書いてあることをそのままやってください。これでMeiryoKe_ConsoleとConsolasを合成できます。
MeiryoKe_ConsoleとConsolasの合成方法 - GONE WITH THE MEDICINE
 
生成したフォントをインストールしたら正常に使えるはずです。ちょっと斜体がきついのが気になるけどいい感じになります。
 
また、上記ページの方法で合成する以外に、MeiryoKe_ConsoleにConsolasを貼り付けして、Consolasの斜体を10度のskewで定義してフォントを作るという方法もあります。
このようにするとフォントが厳密には等角にならないんですが、上記の合成方法よりも斜体が多少見やすくなるのが、個人的には好みです。
が、肝心の合成方法を失念してしまいました。これはひどい…orz

比較画像

MairyoKe_Console+Consolas。日本語がやや大きいけどきれい。数字の6がなんか変…?
f:id:dai1741:20120215235150p:image

MairyoKe_Console+Consolas(斜体は10度のskew)。一部の文字が等幅じゃないし、カーニングがおかしい。それ以外は良好。
f:id:dai1741:20120215235151p:image
 
Ricty。きれい。そしてConsolas自前合成よりは手軽。でもgdi++必要なのが個人的には面倒に感じたり。
f:id:dai1741:20120215235154p:image
 
MeiryoUI+Consolas。だいたいいい感じだけど、半角スペースが等角じゃないのはちょっと・・・。
f:id:dai1741:20120215235152p:image
 
Courier New。Eclipseデフォルトのフォント。こうしてみると文字が細いな。
f:id:dai1741:20120215235149p:image 

無料版Unityとバージョン管理システム

Unity vcs

Pro版のUnity3Dでは、500ドル追加で払うと「Asset Server」というUnity専用のバージョン管理システムを使うことができるほか、外部のバージョン管理システムを使うこともできる

無料版でも、一見すると外部バージョン管理システムを適用できそうに見える。

実際、適用するだけならできるんだけど、かなり問題が多く本来の使い方(マージやブランチングなど)はできない。

主な問題点は次の3つ。

  • Unityは多くのファイルをバイナリで管理している。バイナリファイルは変更が競合したとき、一般にマージできない。
  • UnityはAssetのメタデータを[Project Root]/Libraryディレクトリで管理している。このディレクトリの内容は頻繁に変わり、変更の追跡が困難。
  • LibraryディレクトリとAssetディレクトリの内容が整合しないとプロジェクト全体が破損する。このため、変更内容が競合しなくてもマージできない。

やるとするなら、プロジェクト全体をバージョン管理下に置いて一切ブランチを切らずマージもしないか、ソースコードとテクスチャだけバージョン管理するかくらいしかない。

自分もUnityプロジェクトを1つGitHubに上げてみたけど、これはソースコードのみを管理している。)

参考:

CC-BY-ND (表示・改変禁止)なBGMを自作の動画で流すこと

Copyright

結論:クリエイティブコモンズの改変禁止(CC-BY-ND)は、二次的著作物を作ってはいけないという意味。動画にクリエイティブコモンズ準拠のBGMを付ける行為は、原則的にクリエイティブコモンズでの二次的著作物に当たる。そのため、CC-BY-NDなBGMを動画に付けることはできない。

趣味で作った動画にクリエイティブコモンズのBGM入れたいなと思ったんだけど、使おうと思ったBGMがCC-BY-ND(表示・改変禁止)だった。

こういった曲を動画のBGMにしていいものかと疑問に思った。自分は最初、音声ファイルにエンコード以外の編集を加えず、動画でBGMを丸々流すのであれば、改変には当たらないのではないかと考えた。

「動画 BGM クリエイティブ コモンズ alter」で検索して最初に見たのが、このページ。
CCライセンスでの孫コピー制限の可否と、"改変不可"コンテンツの一部利用。 - あそことは別のはらっぱ。

動画と同期するような形で音楽を使ってはいけないとのことだが、これの意味することがよくわからなかった。

次に見たページ:[ポ] クリエイティブ・コモンズの解釈 - ...My cup of tea...

曲に合わせる形で映像的なエフェクトやなんかを載せて、映像作品に昇華してはいけないという解釈をしていたとのことだ。

よくわからなかったので、原典を見たら、以下のような記述が。

For the avoidance of doubt, where the Work is a musical work, performance or phonogram, the synchronization of the Work in timed-relation with a moving image ("synching") will be considered an Adaptation for the purpose of this License.

意訳:「誤解を生まないために書くと、CCを適用した作品が音楽・演技・演奏による作品のとき、その作品に動画を時間的に同期したものは二次的著作物とみなされる。」

んー、音楽の時間と動く画像のフレームを一致させてるのも二次的著作物なら、動画に使うのはダメか。

以下は蛇足だけど、音と画像のフレームが厳密に一致しているのでないのなら問題なさそう。1つのHTMLページで動画と音楽を別のプラグインオブジェクトにするとか。不格好だし面倒だが。

そう考えると、ニコニコ動画@BGMはおそらく上記のsynchingに該当しない。あざといな…!

プロジェクト管理用ツールとかの簡単なメモ

vcs

自分には全然知らない領域の話。とりあえず調べたことをメモ。

開発ツールの用語の一言説明と、代表的なツール(ソフトやサービス)を書いています。

自分はgit以外のほとんどのツールを使ったことがないので、書いてる内容は多分に偏向してると思います。
変なところは突っ込みを入れてもらえるとありがたいです。

バージョン管理システム

プロジェクトのバージョン(差分)を管理する。

  • Git 分散型 ブランチ切るのとマージするのが早い 小規模プロジェクト・OSS向き
  • Subversion 集中型 細かいアクセス制限とか部分的コミット/チェックアウトとかできる 大規模プロジェクト・権限の差が大きなプロジェクト向き
  • CVS 集中型 最近はあまり使わない
  • Mercurial 分散型 gitほどの自由度はないがその分使いやすく、ディレクトリ別管理もできる。バイナリファイルの扱いも高効率
  • Bazaar プロジェクト管理もできるらしい

バージョン管理システムのクライアント

GUIバージョン管理システムを使えるようにするソフト。

プロジェクトホスティングサービス

バージョン管理ソフトが利用するホスト(サーバー)+α(簡易プロジェクト管理システムなど)を提供するサービス

プロジェクト管理ツール(バグ管理システム

プロジェクトの管理ポータル的な物(チケットシステムや工数管理機能など)を提供する。ロードマップとか生成する。

継続的インテグレーションツール(CI)

プロジェクトの定期ビルド・テストを行う。

テスト管理システム

具体的なテスト方法を管理する何か。CIから呼ばれたり、コミット時に呼ばれたりすることも。

Eclipse3.7のワークスペースの設定情報をシンボリックリンクで共有する

Eclipse
Eclipseはワークスペース単位で設定を区別している。
このおかげでプロジェクトの種類ごとに違う設定を適用できるので、規約の違う複数のプロジェクト群があるときには重宝するのだと思う。
 
しかし自分にはそういう要求はないので、ユーザーごとに同じ設定を使えるようにしてほしいと思う。が、Eclipseにそれを陽に実現する手段はないようだ。
非公式には何かやり方があるんじゃないかなと思ったけど、意外に見当たらない。


Clone workspace in eclipse - Stack Overflow

このページによると、
  • 設定を保存しているフォルダ「.metadata」はワークスペース直下から移動できない
  • 設定データに絶対パスが多く含まれている
といった問題があるので単純に設定フォルダを共有するだけでは無理みたい。
 
ここの2番目の回答によると、「.metadata/.plugins/org.eclipse.core.runtime/.settings」をコピーすればいいらしい。
さらにそれをDropboxを使ってシンボリックリンクを貼ることも可能。
が、上記のページでも指摘されているように、.settingsフォルダ内の設定ファイルにはところどころに絶対パスの設定が含まれている。設定の共有はローカル内にとどめておいた方がよさげ。
なので自分はDropboxは使わないでシンボリックリンクだけを使う方向でやることにした。
 
 
Eclipseを終了し、設定を共有したいワークスペースの\.plugins\org.eclipse.core.runtimeフォルダで、こんな感じに打てばいい(管理者権限が必要)
> move .settings .org.settings
> mklink /d .settings "共有設定情報があるフォルダ(共有したい.settingsフォルダを別の場所にコピーしたものがよさそう)"
 
バッチファイルはこれ。管理者権限と事前のディレクトリパスの入力が必要。あまり便利じゃないしもしかすると何かのデータを破壊するかもしれない。バッチわからん。。。
 
今のところうまく動いている。パースペクティブの設定は共有されないみたいだけど、まあいいか。
パースペクティブの設定のコピーはFile→Switch Workspace→OtherでCopy SettingsのWorkbench layoutを選択すればいい。symlinkで共有してもいいのかな?

この作業で気づいたけどEclipseCoderってパスワード平文で保存してるんだね…酷いや。 
  

 
後になって気づいたけど、シンボリックリンクを使うよりも安全で簡単そうな設定管理方法があるらしい。
 
Pulseというサービスを使ってEclispeのプラグイン構成と設定をクラウド上で管理。個人なら無償。

Blender 2.58 初心者のメモ

3DCG Blender
何このソフト 初見殺しすぎる…
 
とりあえず乱雑にメモしておく。
バージョンはBlender2.58です。

2011/11/23】以下の記述は英語版のBlenderを使っているが、Blender2.60では正式に日本語対応となった。
でも、日本語化がちょっと中途半端。翻訳が平易でない用語を中心に英語のまま。
あと、日本語化するとUIの動作が極端に遅くなる。自分の環境では、今まで5秒程度で起動していたのが5分程度かかり、今まで一瞬で開けていたメニューが開くのに5秒程度かかるようになった。
遅さがきついので、結局英語に戻した。
 


Blenderとは

Blenderは3DCG制作ソフト。オープンソースで無料。高機能。

 
日本語のマニュアルはこれ:Doc:JA/2.5/Manual - BlenderWiki 一部未翻訳
 

割とどうでもいいこと
 
Blender初心者がまず知っておくべき3つのこと:
  • よくわからないボタンには安易に触れてはならない。戻せなくなる。
  • よくわからないキー入力を安易にしてはならない。戻せなくなる。
    • Ctrl+U押して次回起動後におかしくなること多々
    • 「元に戻す」がビューごとに対応するので、Ctrl+Zも慣れないうちは難しい
  • 他の3Dグラフィックスソフトの操作法に関する知識や経験は、ほとんど当てにならない。
    • もちろん3DCGの普遍的な知識は有用です
要するにBlenderの操作方法は驚くほど直観的でないってことです。
 
Blenderの解説記事で散見される、説明なしに使われる用語・略語:
  • LMB:左マウス ボタンクリック
  • MMB:中マウスボタンクリック
  • RMB:右マウスボタンクリック
  • Numpad:テンキー


割とどうでもいいこと2

Blenderが使用するpythonのバージョンは次の通り。これ未満でもこれより大きくても認識しない。

Blender2.48a:python2.5
Blender2.48b~2.49:python2.6
Blender2.5x :python3.0

Blender2.5のwin版ではpythonがバンドルされているから、pythonのバージョンを気にする必要はほとんどない。
 

Get Started with Blender ≪ Blender Cookie ここを見ながら慣れる。
 
日本語の解説動画もいくつかいいのがあった(blenderチュートリアル 超基礎編 ‐ ニコニコ動画とか)けど、日本語の初心者向けチュートリアルはほとんどBlender2.49以前の説明だった。Blender2.5とBlender2.4は表面的な部分が色々と違いすぎる…。
 
…と思ってたら2.5の日本語解説あったあああ これ→Blender入門講座|導入編|これは何? - YouTube


Blender: Interface and Navigation ≪ Blender Cookie インターフェースとナビゲーション
 
3Dビューの画面を回転するにはホイールクリック+ドラッグ、平行移動にはShift+ホイールドラッグ、拡大縮小にはホイールスクロールor Ctrl+ホイールドラッグ。
 
画面の向きを軸に合わせるには後述のキーボードショートカットを使う。中段のメニューバーのViewからも選べる。
f:id:dai1741:20120215015309p:image
慣れないうちはメニューバーから使うべきだけど、正面(numpad1)・上面(numpad7)・カメラ(numpad0)の3つは最初からショートカットキーで慣れたほうがはかどる気がする。
 
向き キー Num Lock時に押すもの
正面 numpad 1 j
下回転 numpad 2 k
右側 numpad 3 l
左回転 numpad 4 u
視点を無限遠/有限遠に numpad 5 i
右回転 numpad 6 o
上側 numpad 7 7
上回転 numpad 8 8
後ろ側 ctrl numpad 1 ctrl j
左側 ctrl numpad 3 ctrl l
下側 ctrl numpad 7 ctrl 7
カメラから見る numpad 0 m
これ上の動画見ながら写してるけどどっかにまとまってないのかな?
 
あといくつかよく使うもの
効果 キー Num Lock時に押すもの

選択オブジェクトだけ表示/全て表示
3D View左上に(Local)と書かれていたら選択オブジェクトだけ表示されている。
f:id:dai1741:20120215015244p:image

numpad / /
選択オブジェクトに注目
numpadでないピリオド(.)を押すとPivot Pointが3D Cursorに変わってしばらく悩むので押さないように。
numpad . .

プロパティビューを出す
オブジェクトのxyz座標や回転状態が数値で見れる。
f:id:dai1741:20120215015245p:image

n n
ツール棚(?)を出す
いくつかの機能へのショートカットがある。
f:id:dai1741:20120215015246p:image
t t
ノートPCだと設定変更しないとNumLock幼いといけないのが不便だなあ。Emulate Numpadは使いにくいし、ピリオドとか認識してくれない…。


 
 
効果 やること 中段のメニューバーでの位置
全てのオブジェクトを選択/解除 a Select→Select/Deselect All
オブジェクトの矩形選択 b Select→Border Select
3D manipulator widget
(選択したオブジェクトの移動・回転・拡大縮小をGUIでできるの)
の有効化/無効化
3D Viewの下部にある赤青緑な3本の棒のボタンを押す
f:id:dai1741:20120215015247p:image
 
translate(平行移動)状態にする 3D manipulator widgetボタンの右側の矢印ボタンを押す  
rotate(回転)状態にする 3D manipulator widgetボタンの右側の曲線のようなボタンを押す  
scale(拡大縮小)状態にする 3D manipulator widgetボタンの右側の下の図のボタンを押す
f:id:dai1741:20120215015248p:image
 
移動 右ドラック。もしくはgキーを押す。
平行移動状態(下図の状態)のとき矢印を左ドラッグすれば平行移動。
f:id:dai1741:20120215015249p:image
Object→Transform→Grab/Move
回転 回転状態のとき中心部周辺を左ドラッグ。あるいはrキーを押す。
軸色の曲線をドラッグすれば平行回転。
Object→Transform→Rotate
拡大縮小 拡大縮小状態のとき中心部周辺を左ドラッグ。あるいはsキーを押す。
軸色の直線をドラッグすれば平行スケール。
Object→Transform→Scale
選択したオブジェクトの複製 shift d Object→Duplicate Objects
選択したオブジェクトを消す xかDel Object→Delete...
Edit(編集)モードにする。
編集モードになると頂点・辺・面をオブジェクトと同じように選択できるようになる。
ちなみにここまでの説明ではObjectモードになっていましたはず。

f:id:dai1741:20120215015251p:image
この辺のリストボックスからEdit Modeを選ぶ。
もしくはTabキーを押す。

頂点・辺・面どれを選択するかは下図のボタンで決める。
f:id:dai1741:20120215015252p:image

 
選択した頂点・辺・面を複製して引き延ばす。
ただの箱がこんなの↓になるよ。
f:id:dai1741:20120215015253p:image
eキーを押してドラッグ。 Mesh→Extrude Region
新しいオブジェクトを追加する shift aを押すか、上部メニューバーノAddを押す  
選択した頂点を消す
つながってる辺・面も消える。
Editモードでx押してDelete Vertices Mesh→Delete
選択した辺を消す
つながってる面も消える。
Editモードでx押してDelete Edges Mesh→Delete
選択した面を消す Editモードでx押してDelete Faces Mesh→Delete
選択した頂点からたどれる全てを消す Editモードでx押してDelete All Mesh→Delete
選択した頂点間に面(点3~4個のとき)もしくは辺(点2個のとき)を追加 Editモードでf Mesh→Faces→Make Edge/face
選択した頂点(3つ以上)間に辺を補いつつ面を追加 Editモードでalt f Mesh→Faces→Fill
edge loopの頂点を複製 Editモードでctrl r  
矩形減算選択 b押した後にホイールクリックドラッグ。  
スペシャル
よく使われる機能の一覧的なもの。というかSubdivide(辺や面の分割)メニューバーになくない?
w  
頂点をクリック位置に追加 Editモード 無選択状態でctrl 左クリック  
 
他のソフトに慣れたせいでマウス右ドラッグで選択オブジェクトが移動するのに違和感がある。
 
一部の機能はキーボードショートカットやメニューバーを使うよりも、左側のツール棚を使ったほうが楽?
 

Blender: Intro to Materials ≪ Blender Cookie マテリアル(材質)の基礎
 
 
f:id:dai1741:20120215015254p:image
画面右側、図の赤色で囲った部分がプロパティパネル。矢印のやつがMaterial(マテリアル / 材質)だ。
f:id:dai1741:20120215015255p:image
+ボタンを押すと新しいマテリアルを作る。その左側のテキストボックスでマテリアルの名前を変えられる。
f:id:dai1741:20120215015256p:image
Diffuse(拡散反射)のところで物体の色変えられる。その下のSpecular(鏡面反射)でテカりの色とテカりの強さを決められる。
 
Transparent(透明度)やMirror(反射)などのレンダリングに時間がかかるものは、適用しても3D Viewでは表示されない。
表示を確認するには上部メニューのRender→Render Image (F12)を押す(もしくはプロパティパネルのSceneのRenderのImageを押す)。
レンダリング画面から戻るにはRender→Show/Hide Render View (F11)を押す(プロパティパネルのSceneから来たときはEscapeキーも可)。
 
やたーここまでの知識でこんなんできたよー
f:id:dai1741:20120215015257p:image
 

Blender: Intro to Animation ≪ Blender Cookie アニメーションの基礎
 
画面下の横長のがタイムライン。緑の縦線と丸で囲った数字が現在のフレームを表している。
f:id:dai1741:20120215015258p:image
 
フレームレートはプロパティパネルのシーンのところにある。
f:id:dai1741:20120215015259p:image
緑の縦線をドラッグすれば現在のフレームが変化する。
オブジェクトを選択した状態の3D View上でiキーを押す(もしくは中段メニューバーのObject→Animation→Insert Keyframe...を押す)と、キーフレームの挿入メニューが出る。
LocRotScaleを選択すると、現在選択中のオブジェクトの位置と回転状態と拡大状態を現在のフレームに記録する。キーフレームが存在するフレームはタイムライン上に黄色い縦線が表示される。
f:id:dai1741:20120215015300p:image
 
この状態で対象フレームを変えて、オブジェクトを動かし、再度キーフレームを挿入し、下側にある再生ボタンで再生すると、オブジェクトがアニメーションする。
録画ボタンを押すと自動でオブジェクトを動かすたびにキーフレームが挿入される。
f:id:dai1741:20120215015301p:image
 
これは超基礎のアニメーション解説だけど、ほかにも物理演算とかアーマチュアとかIKとかあるよ。


 
レンダリングはプロパティパネルのSceneから。
f:id:dai1741:20120215015302p:image
一番上のImageをクリックすると実際にレンダリングされる。アニメーションはAnimationから。画面サイズはResolutionで設定。アンチエイリアスはその下ので。
余談だけどアンチエイリアスBlenderが自前で生成しているようなので、グラボでアンチエイリアスが使えない自分のPCとしてはうれしい(笑)
 
画像出力はOutputから。avi出力も可。mpegやH.264エンコードもある。
 

 
ライトは5種類ある。
Point Light:豆電球のような点ライト
Sun Light:太陽光のような無限遠からの平行な光
Spot Light:スポットライト
Hemi Light:天空光。無限の半径を持つ半球から降り注ぐ、乱反射したような光
Area Light:部屋の照明のような大きさのある光
 
 
ライトは色や強さや影響範囲を変えられる。
ライトはAdd→Lampで新しいのが作れる。
 
環境光(Ambient Light)やImage-based LightはプロパティパネルのWorldのEnvironment Lightingで指定できる。
 
 


UVマッピングとTexture paintのやりかた。

UVとは座標系(u,v)のことなのだそうな。

まず3Dのポリゴンを2Dに展開する(Unwrapする)ための準備として、オブジェクトにSeam(切り取り線)を付ける作業をする。(基本図形では不要。その場合は専用の展開方法を選ぶ)
Editモードで辺を適当に選択して、ツールビューのMark Seam(もしくはMesh→Edges→Mark Seam)をクリックする。
すると、下図のようにSeamが赤線で表示される。
f:id:dai1741:20120215015303p:image
(この図ではなぜかギザギザに切ってるけど、面倒なのでEdge Loopできるべき)

SeamをつけたらツールビューのUnwrap(もしくはMesh→UV Unwrap...→Unwrap)をクリック。そしてF11を押してUV/Image Editorを表示する。
そうすると、下図のような2D上に展開されたオブジェクトが表示されるはず。
f:id:dai1741:20120215015304p:image

※もし直前のレンダリング結果が表示されていたら、×を押してそれを消す。
f:id:dai1741:20120215015305p:image

そこからテクスチャペイントしたりUVマッピングしたり。
外部のペイントソフトやドローソフトでUVテクスチャを作成するには、UVs→Export UV LayoutでUVのレイアウトを保存し、それを編集する。
保存時はUVレイアウトは必要ないので非可視化を忘れずに。
f:id:dai1741:20120215015306p:image

作ったUV画像を実際にオブジェクトに適用するには、UV画像をテクスチャに登録して、そのテクスチャを該当オブジェクトの材質に貼り付ければいい。
f:id:dai1741:20120215015307p:image

で、描画するとこうなる。画像が手抜きすぎてわかりにくいな。
f:id:dai1741:20120215015308p:image


 
参考になるページのメモ
 
Object ToolsのShadingをSmoothに変えるとフォンシェーディングができる。
 
平面を軸まわりに一回転させて立体を作る。
 
ブール演算はandとかorとかxorとか。この動画ではandつかてる
 
アーマチュア(骨格)のつけ方。アーマチュアの構成単位パーツのことをボーンという。
 
トゥーンシェーディングのやり方。基本的には材質のDiffuseとSpecularのシェーダーをToonに変えればいい。
 

HTML5+jQueryでテーブルアート生成

JavaScript jQuery
HTML5Drag and Drop APIを使えば、ネイティブファイルの情報をドラッグアンドドロップjavascriptに渡すことができる。
HTML5File APIを使えば、ネイティブファイルの情報からbase64形式のデータurlを得ることができる。
JavascriptのImageクラスを使えば、データurlをソースとして画像を生成することができる。
HTML5canvasを使えば、キャンバスに描画された画像の任意のピクセルのrgba値を得られる。
 
ということは、Javascriptだけで任意のローカル画像のテーブルアートを生成できるじゃないか!
そんなわけで、テーブルアートを生成するjQueryプラグインを作ってみました。
実用性皆無。しかもテーブルアートは6年以上前に微妙に流行ったものなので、今や存在すら知らない人がほとんど。まさに誰得。
(万が一HTMLだけで画像表示する必要があるなら、MHTML使いましょう。というか、そんな必要性が発生しないようにしましう)
 
デモとソースコードはGitHubにあります。