2015-11-10

書籍、How to Drawはスケッチのステップアップに最適

book

本屋で見つけた良書。高額の部類に入る本だけど平積みになっていた。

スコット・ロバートソンのHow to Draw -オブジェクトに構造を与え、実現可能なモデルとして描く方法-
posted with amazlet at 15.11.09
スコット・ロバートソン Scott Robertson トマス・バートリング Thomas Bertling
ボーンデジタル
売り上げランキング: 3,711
Amazon.co.jpで詳細を見る

アニメのような絵を描くような本は、ピンキリでたくさん出版されているけれど、こういうメカニカルなアートの描き方がしっかり載っている本はなかなかない。それも、ここまで詳細に書いてあるのは初めてみた。ざっと目を通した感じだと、全体がチュートリアルのような形式になっているので、ステップアップしやすい気がする。線の引き方を知らないレベルでもオッケー。実際、フリーハンドでの直線の引き方が載っている。

さっそくやってみたが、直線引くの難しい。。。しかし、なるべくフリーハンドで直線と楕円を描くことで作画の速度が上がるとのこと。そして、作画の速度が上がることによって、時間単位に描ける枚数が増えて上手くなることを考えると必須のスキルなんだろう。

パースの取り方や考え方について、とても丁寧に説明されている。補助線の引き方から説明してあるが、それもなぜその線が必要なのかが書いてあるので分かり易い。CGとの関係も書いてあり勉強になる。というより、普段CGに慣れ親しんでいる人こそピンとくるのではないだろうか。
元々、絵を描くのは苦手なのだが、少しでもまともな図が描けると仕事においても役に立つだろうから、空いている時間に練習してみようと思っている。

ちなみに、続編として質感の描き方の本も出ている。こっちも気になっている。

スコット・ロバートソンのHow to Render ：アイデアを明確に伝える　光と影、反射の描き方
posted with amazlet at 15.11.09
スコット・ロバートソン Scott Robertson トマス・バートリング Thomas Bertling
ボーンデジタル
売り上げランキング: 9,871
Amazon.co.jpで詳細を見る

2015-11-10

コンピュータグラフィックスを買いなおした

book

１つ前の版を持っていたけど、買いなおした。前の版は2004年に初版が出た。CGの技術はこの10年で大きく変わってるので厚さがだいぶ増した。辞書的に使うことが多いから、最新の情報が載っている方が都合がいい。

コンピュータグラフィックス

posted with amazlet at 15.11.09

CGーARTS協会
売り上げランキング: 15,850

Amazon.co.jpで詳細を見る

リアルタイムグラフィックスの技術の進歩、プログラマブルシェーダ、物理ベースアニメーション、などなど。改定された内容は、下のリンクにある。この10年でどんな変化があったかがわかるだろう。
https://www.cgarts.or.jp/book/cg_engineer/img/cg-v1.2.pdf

同じくCG-ARTSの本で、ディジタル画像処理も持っているけど、こっちも新しいのがでているので気になる。まぁ、こちらは会社に何冊かあるので、買うほどではないと思うけど。

ディジタル画像処理[改訂新版]

posted with amazlet at 15.11.09

画像情報教育振興協会
CGーARTS協会
売り上げランキング: 8,159

Amazon.co.jpで詳細を見る

2015-10-27

openFrameworksでGLSLレイマーチング

dev GLSL openFrameworks

フラグメントシェーダが動かせるようになったらやってみたかったレイマーチング。ようやく環境が揃ったので実際にコードを書いて動かしてみました。

とりあえず、この辺を参考に。

GLSL Graphics Compo向けのレイマーチング向けのチュートリアルです

とりあえず、球体と床を表示させテクスチャを貼ってみるところまで。コード自体は、リンクのサイトの通りなんですけど。まぁ、自分で書いてみるのとコードを見るだけとは結構違いますからね。思ってたより簡単に書けるみたいです。

f:id:deis:20151025023952p:plain

f:id:deis:20151025023953p:plain

このくらいなら、うちのMacでも60fps出せるみたい*1。これで色々と遊べそうな雰囲気です。いつか音楽と組み合わせてDemoを作ってみたいところ。

openFrameworksを使ってGLSLで遊ぶ方法については、こちら。

hellkite.hatenablog.com

*1:撮った瞬間はFPSが落ちるらしく、スクリーンショットでは57fpsになっていますが。

2015-10-26

MacにOpenCVを入れて、openFrameworksから使ってみる

dev openFrameworks opencv

今考えている開発対象はiOSがメインですが、検証はMacでできた方がいいかな？というわけで、Mac版でのopenFrameworksでもOpenCVを入れてみました。

OpenCVのインストール

自前でソースからビルドしてみようと思ったのですが、homebrewでインストールしてみます。あまり時間がなかったので。openFrameworksが32bitなのでビルド設定として、32bitを追加しました。

$ brew tap homebrew/science
$ brew install opencv3 --32-bit --with-ffmpeg --with-gstreamer --with-jasper --with-openni --with-python3

インストールに成功すると、/usr/local/Cellar/opencv3/3.0.0にライブラリが入ってきます。こいつをopenFrameworksから使えれば、環境構築としては、完了です。

openFrameworksでOpenCV

openFrameworksから使うといっても、通常のXcodeプロジェクトと同じです。C++万歳。
通常通り、openFrameworksのProjectGeneratorを使ってプロジェクトを作成します。次に、Search Pathsを編集。Header Search Pathsに、/usr/local/Cellar/opencv3を追加、recursiveに変更しておきます。
次にライブラリファイルを追加します。Build Phasesを開き、LinkBinary With Librariesを表示、FinderでOpenCVのdylibをドラッグアンドドロップで追加。
Finderでusr/を開きたいときは、ターミナルから以下のコマンドで開けます。

$ open /usr

で、ビルドすればおしまい。。のはずが...

こんなエラーが出た。

file was built for x86_64 which is not the architecture being linked (i386)

えー。と思って、fileコマンドで確認してみた。

$ file libopencv_video.3.0.0.dylib 
libopencv_video.3.0.0.dylib: Mach-O 64-bit dynamically linked shared library x86_64

あれ？64bit...
INSTALL_RECEIPT.jsonを確認しても、ちゃんと32bitの指定になっているみたいなんだけど。何度やっても同じ、ついでにOpenCV 2.4.9を--32-bitを指定してビルドしてみたけど結果は変わらず。
iOSのときと同じようにソースからビルドしないとダメ？hellkite.hatenablog.com

まぁ、今回に限らずopenFrameworksが64bitに対応していないっぽいのは結構きつい。早くopenFrameworksが64bit化してくれないかしら。

2015-10-19

openFrameworksで流行のフラグメントシェーダを試す

openFrameworks GLSL

興味はあったけど、なかなか手が出せなかったフラグメントシェーダによるお絵かき。これまでもシェーダに挑戦しようとしてみると環境の整備に時間がかかってしまい、絵を出すまでがつらかった。
それが、openFrameworksなら、すぐにできる！

ofApp.h

		ofShader shader;		// シェーダオブジェクト

ofApp.cpp

void ofApp::setup(){
	ofSetWindowShape( 600, 600 );
	ofSetFrameRate(60);
}

void ofApp::draw(){
	shader.load("", "shader.frag");

	shader.begin();				// beginからendまでShaderが有効になる
	shader.setUniform1f("time", ofGetElapsedTimef());
	shader.setUniform2f("resolution", ofGetWidth(), ofGetHeight());
	ofRect(0, 0, ofGetWidth(), ofGetHeight());		// このRectがshaderの色で塗られる
	shader.end();

	ofSetColor(255, 0, 0);
	string fpsStr = "frame rate: "+ofToString(ofGetFrameRate(), 2);
	ofDrawBitmapString(fpsStr, 30,30);
}

これだけ。後は、shader.fragにシェーダを描けばいい。シェーダファイルは、bin/dataの中に入れておけばいい。ちなみに、この書き方だとフレームが更新されるたびにシェーダをコンパイルする。負荷になるかと思ったけど、簡単なシェーダならフレームレートに影響しない。それより、シェーダを更新すると次の瞬間には画面に反映されることの方が重要。試行錯誤がストレスなくできる。
とっかかりとして、このチュートリアルをやってみる。
tau_medialab150623.pdf - Google ドライブ

こんな絵が描けた。実際には、グネグネ波が動く。