【日本語字幕あり】3DCG の基礎講座を無料で!Interactive 3D Graphics Course With Three.js & WebGL

Udacity

ここ最近オンラインで Interactive 3D Graphics Course With Three.js & WebGL – Udacity という講座を受講していました。この講座が公開されたのは1年以上前のようですが、three.js を使ってはいるものの 3D にあまり造詣の深くない俺には非常に勉強になったのでご紹介します。Javascript がある程度書ける人が対象となると思います。

Udacity について

Udacity はMOOC(Massive Open Online Course)と呼ばれるオンライン学習サービスの一つで、企業などと連携して昨今必要とされているプログラミングやテクノロジーの講座を提供しています。ざっと見てみるだけでも Google、Salesforce、Facebook とのコラボ講座が用意されています。基本的には無料で受講することができます。以下は Udacity の紹介動画です。

Interactive 3D Graphics の内容

今回ご紹介する講座は Maya3DS MAXAutoCAD などの 3D ソフトウェア開発で知られる AutoDesk の提供で、Autodesk のエンジニアである Eric Haines さんが講師を務めます。以下は講座の紹介動画です。

概要は以下の通りです。

Lesson 1: Introduction
Lesson 2: Points, Vectors, and Meshes
Lesson 3: Colors and Materials
Lesson 4: Transforms
Lesson 5: Matrices
Lesson 6: Lights
Lesson 7: Cameras
Lesson 8: Textures and Reflections
Lesson 9: Shader Programming
Lesson 10: Interaction and Animation

インタラクティブ3Dグラフィック 講座詳細 | UDACITY on Edmapsでは日本語で紹介されていますので、日本語で読みたい方はどうぞ。

1

講座中の風景はこんな感じ。YouTube の CC ボタンから字幕(英語、日本語)を表示出来るだけでなく、プレイヤーの下の方で Transcript もダウンロードできるので英語が聞き取れなくても読んで理解できるんじゃないかと思います。講義、小テスト、確認テストという構成です。各テストは選択式のものから実際にコードを書いてみるものまであって、なかなか一筋縄では行きません。

2

正解を選ぶ形式のテスト。

3

Javascript や GLSL を実際に記述するテスト。

受講してみる

Interactive 3D Graphics Course With Three.js & WebGL – Udacity から無料で始めることができます。

4

$150 / Month という文字が目に入って身構えてしまいますが、View courseware を選んでユーザー登録をすればそのまま受講開始できます。有料にすると講師の方からフィードバックをもらえたり Certificate がもらえたりという特典があるので、自分で走るよりもトレーナーをつけて効果的なトレーニングをしたいタイプの方やお金を払った方が気合が入るという方はまず Start Free Trial で2週間無料体験をしてみると好いでしょう(クレジットカード登録必須)。俺は無料で気楽な聴講生気分でやってます。

受講した感想など

Lesson1 の Refresh Rate の辺りから早くも躓き始め、Lesson5 の Matrices の序盤で完全に挫折しそうになりました。その後 Lights、Cameras、Textures… と楽しいところが続くので何とかここを乗り切りたいところ。途中から分からなくてもとりあえず最後まで行こうというノリでやってました。勉強法としては間違ってるかもしれませんが「分からなかったら100回読め」と「分からなかったら飛ばせ」を都合良く使い分けて生きてます。

今まで適当に three.js のサンプルを弄ってみたり GLSL SandboxStack Overflow を彷徨いながら WebGL で遊んでいましたが、今回体系的に勉強することで頭の中に点在していた各種用語や機能が線で繋がったような気がします。例えば three.js で知りたい事があって関連サイトを見ていると three.js の本サイトで多様なサンプルが紹介されているから見てみたらえんちゃうとよく書いてあります(俺も書いてます)。中には見た目でもうスゲーのは分かるものの技術的にどんな事をやっているのか、何がスゴいのか分からないものが多かったのですが、その方法論が適用される理由や歴史的経緯を講座を通して学ぶことで既視のサンプルに対して今まで無かった視点を持つことができました。

同時に更に多くの点も出来たのでこれをまた線で繋げられるようにしたいです。別にリアルな 3D が作りたかった訳では無いんですが、やってると楽しくなってきますね。Textures and Reflections の講義が一番ワクワクしました。

3DCG には数学の知識も必要なのでそれなりに用語が出てきます。Dot product (内積)、Matrix(行列)、normal(法線ベクトル)などなど…。文系で学生時代に微分積分も行列も勉強した記憶が無く、プログラミングを勉強して初めて知った用語が多い事もあり、どうせコード書くのは英語だし英語の勉強も兼ねているので英語で学べば好いんじゃないかと思ってます。とか言いつつ日本語で勉強してもきっと分からんものが英語で簡単に分かるはずもなく、理解できなかった箇所を重点的にもう2、3周はする予定です。日本語字幕が表示できるのは終わってからこの記事を書こうと調べている間に気づきました。

講義内容自体も然る事ながら、動画の下にある Instructor Notes が大変充実していて参考になります。長年 CG 業界に携わってきたインストラクターの方がご自身の経験を基に初心者用に纏めているので今日から使えるお役立ち情報から、豆知識まで盛り沢山。例えばここに無料の Cubemap 用素材があるとか 3D 業界のデモでよく使われる(らしい)ティーポットの歴史とか。

全てに日本語字幕がついている訳では無いですが、Udacity には今回ご紹介した以外にも面白そうな講座があるので興味がある方は覗いてみて下さい。小テストの形式などに若干違いはあるかもしれませんが、基本的なところは変わらないんじゃないかと思います。

おまけ

最近読んだ three.js の本です。kindle 版が安いので(俺のリンクから買うのが)お勧めです。

Daily GLSL Sketch on GLSL Sandbox 30

友人の @matthanns@TimRolls_ が1年間毎日 Processing やそのフレームワークである Hype 等を使って Generative art を投稿していく SuperColony というサイトをやってて、まねしごんぼでコピーキャットな俺も何かやりたいけど1日1時間程度で終わるのが好いよねということで GLSL Sandbox を使ってかねてから興味のあった GLSL (ここでは fragment shader のみ)で遊ぶことにしました。

流石に1年間はテンションが持つ気がしなかったのでまずは30日で区切ることに。ちなみに GLSL でできることは多々あると思うのですが現時点の俺は「GPU を使って少ないコード量でもすごいことやってそうなアニメーションが作れるもの」程度の認識でやってます。

以下参考にしているサイトです。

WebGL – OpenGL ES 2.0 for the Web
WebGL Reference Card の3、4ページ目が GLSL 関連です。
Webグラフィックをハックする(最終回):WebGLの能力を引き出すプログラマブルシェーダー (1/5) – @IT
Three.js 前提の記事ですが、2/5 と 3/5 が GLSL 関連です。
Pixel Shaders: An Interactive Introduction to Graphics Programming
ウェブカムを使ったサンプルが楽しいですが BasicquasicrystalNoise あたりでまずはお勉強。
WebGL 開発支援サイト wgld.org
硬派な WebGL 情報サイト。GLSL のカテゴリーにチュートリアルがあります。
demoscene.jp
デモシーンの情報サイトです。
WebGL halftone shader: a step-by-step tutorial
GLSL でのハーフトーンパターンのチュートリアルです。
Into to GLSL – Google Slides
GLSL について分かりやすく説明してくれている解説スライドです。

以下は GLSL Sandbox 上でのチュートリアルです。完全コピペ可の素晴らしさ。

GLSLで簡単2Dエフェクト « demoscene.jp
GLSL で光の点をぐるぐるアニメーションさせるやつ書いてみた – 凹みTips
7 Lines GLSL Graphics Compoに挑戦してみよう!
なんだか雲行きの怪しい雑記帖 週アレ(12) GLSLで遊ぶ(GLSL Sandbox)

さて、スケッチの方は昨日一区切りついたので以下まとめです。WebGL 対応のブラウザで見てみてください(Chrome 推奨ですが 2014年7月16日現在 Safari 以外だいたい見れるはず)。スケッチによっては負荷がかかってPC がフリーズしてしまう可能性中なのでこの機会に大事なファイルは保存しておくことをお勧めします。

001

1/30 glslsandbox.com/e#17529.0

002

2/30 glslsandbox.com/e#17549.0

003

3/30 glslsandbox.com/e#17566.1

004

4/30 glslsandbox.com/e#17586.0

005

5/30 glslsandbox.com/e#17602.0

006

6/30 glslsandbox.com/e#17627.0

007

7/30 glslsandbox.com/e#17668.2

008

8/30 glslsandbox.com/e#17690.0

009

9/30 glslsandbox.com/e#17726.1

010

10/30 glslsandbox.com/e#17739.0

011

11/30 glslsandbox.com/e#17790.0

012

12/30 glslsandbox.com/e#17825.2

013

13/30 glslsandbox.com/e#17850.0

014

14/30 glslsandbox.com/e#17860.0

015

15/30 glslsandbox.com/e#17886.0

016

16/30 glslsandbox.com/e#17920.0

017

17/30 glslsandbox.com/e#18401.0

018

18/30 glslsandbox.com/e#17959.0

019

19/30 glslsandbox.com/e#17586.0

020

20/30 glslsandbox.com/e#18120.0

021

21/30 glslsandbox.com/e#17886.1

022

22/30 glslsandbox.com/e#17886.2

023

23/30 glslsandbox.com/e#17886.3

024

24/30 glslsandbox.com/e#18243.0

025

25/30 glslsandbox.com/e#18263.0

026

26/30 glslsandbox.com/e#18285.0

027

27/30 glslsandbox.com/e#18303.2

028

28/30 glslsandbox.com/e#18331.0

029

29/30 glslsandbox.com/e#18349.0

030

30/30 glslsandbox.com/e#18386.0

以上です。初心者なので意味もよく分からないまま GLSL Sandbox 上の既存ステキスケッチや、チュートリアルサイトにあるものをコピペして関数を調べて値を変えてみる、他のスケッチで使った関数やどっかで見た数式を適当に使ってみるというのを繰り返しています。Tofino に遊びに行って何日か中断したり、後半ややだれてしまった感否めませんがどうにか終えました。

GLSL Sandbox にはユーザー登録等が無いため誰がどれを作ったのか分かりません。なので俺は Twitter のアカウントと通し番号を署名として入れました。他の人のスケッチを軽く fork しただけのものでも厚かましく自分の署名を入れてるので気が引けるのですが、fork 先のリンクや参照先は残しています。

少し充電期間を置いてまた GLSL やりたいと思います。もう少し思い通りに作れるようになってきたら Shadertoy に挑戦したい~\(^o^)/

Update: 参考サイト追加しました。参考サイトの位置をスケッチの上にしました。

鼻血が出るほどチョコをくれ!WebGLで鼻血ブー!!

いや~バレンタインデーですね〜おめでとうございます。さて、japan webgl developers 企画の Happy Valentin + WebGL に若い人には通じないんじゃないかしらとドキドキ、鼻血を出しながら参加させて頂きました。以下の画像かリンクから WebGL 対応のブラウザでご覧ください。

booo

鼻血ブー | WebGL Experiments

オプションとして鼻血のシュミレーションができます。右上にある parameter をクリックするとスライダー群が表示されます。chocolate がチョコレートの摂取量を表しておりまして、他の各値も適当に弄ると鼻血の出方が変わりますので貴方好みのスタイルが見つかるかもしれません。あまり摂取し過ぎると環境によっては鼻血どころか死んでしまう(フリーズする)かもしれないのでご注意ください。

改めまして「チョコレートを食べ過ぎると鼻血が出る」という説がありますね。これはスイーツ男子である上にモテ期があった気がしない俺の憧れの状況でしてゲタ箱開けたらドッサリとかリアカー引いて帰らなきゃいけないとか俺こんなに食べきれないからお前持って帰っていいよといった類のものか、あんまり甘いもの食べちゃダメよということであると解釈しています。

それとは別に広く普及しているオールドスクールといってもいいかもしれない漫画表現として性的興奮を感じた時に鼻血が出るというものがありますが、このいわゆる鼻血ブーのオリジネーターは赤塚不二夫先生と並ぶギャク漫画界の巨匠谷岡ヤスジ先生。リアルタイムで読んでいた作品はありませんが、特徴的なセリフと爽やかなエログロそしてワンパターンな作品群が好きでよく読んでいました。

できたものはガキ夫がチョコレートを食べて鼻血を出すという俺の知る限りあり得ない状況になってはいるのですが、先日映画『The Monuments Men』を観た後漫画における伝統的表現を後世に残していきたいという使命感をより強くしまして、この2つを組み合わせてチョコレートを食べ過ぎて鼻血を出したい君(=俺)の夢を託すことにしました。数年前円盤での文化デリックの POP 寄席にて映画メッタメタガキ道講座 DVD の監修及びデザインをされた宇川直宏さんが谷岡ヤスジ作品のキャラクターのいくつかはイラレで簡単に描けちゃうと仰っていたのを思い出し、DVD のパッケージをトレースしました。今回はバレンタイン企画でありながら二人のド天才谷岡ヤスジ先生、宇川直宏さんリスペクトってことでやっております。

作り方はというと、three.js の particle system を使用し「これはパーティクルじゃない鼻血だッ!」と断定すれば万事 OK です。パーティクル用画像の部分に黒の四角が見えてしまうのが難点、世の three.js のパーティクルサンプルの背景が黒いのはこの辺も一因かと思ったり…解決策知ってる方いたら教えてほしいです。読み込みのタイミングかな。元となるパーティクルは炎のパーティクル (1) | three.js から拝借しています。

この鼻血のアイデアは以前からあって、その昔 Wonderfl で作った鼻毛時計も同じようなものです。全く成長の見られない己を憂いつつ Web カメラや Arduino を使ってどうにかリアルな鼻血表現が出来ないかと考えてもいますが、今回はこの辺で。

ひとしきり鼻血を出したらチョコレイト・ディスコで踊りまくりましょう。
それでは皆様 Happy Valentine! 俺は友達の結婚おめでとうパーティに行ってくるよ〜

WebGLで遊ぼう!コードを書かなくてもわりと楽しめるオンラインエディタまとめ

Graphical Web Advent Calendar 2013 – Adventar 24日目の記事です。

オンラインでコードを書いて実行できるエディタは沢山あります。例えば JavaScript、CSS、HTML を書けるものだと jsdo.itJS BinJSFiddleCodePen などが有名だと思いますが、今日は WebGL が楽しくなる愉快なオンラインエディタたちをご紹介したいと思います。

ここ2、3ヶ月 three.js を使って WebGL で遊んでいる( chimana.co )のですが、WebGL を使うには何かと準備が必要なため俺みたいな根性無しは three.js のような便利ライブラリを使ったとしても分かりやすく気持ちイイところに辿り着く前にめげてしまいかねません。今日ご紹介するエディタたちは WebGL 興味あるけど何したらいいか分からへんという方でも GUI のパラメータを変更したり数値を少し変えるだけで劇的に変化を起こすこともできるし、見ているだけでも十分楽しめるものも多いので取っ掛かりとして最適だと思います。とっつきにくい初期設定などについて考えるのは楽しくなっちゃってもっと深く勉強してみたいと思えた後でも遅くありません。

以下、リンク先のサイトを参照する場合は WebGL をサポートしているブラウザを使用してください。IE11 でも WebGL をサポートし始めたようですが信用していないので、最新の Chrome か Firefox 推奨です。

WebGL & three.js ことはじめ

1. _playGnd

http://threejsplaygnd.brangerbriz.net/

_playGnd-1

WebGL で3Dやってみたいけど3Dの世界を構築するのって色々面倒くさいんでしょって人向けです。three.js に予め実装されている幾可学形状を用いて three.js の基本的な機能を試すことができます。3Dに関しては Flash で Papervision3d を少し齧った程度だった俺はこれのおかげで three.js を続けることができました。今でも折に触れこれを使って機能を確認しています。

_playGnd-2

GUI で幾可学形状をカスタムして生成されたコードを editor にコピペして表示の確認ができます。アニメーションもスニペットとして用意されているので、これもコピペで実装できます。ちょっと見難いですが archive でこのアプリを使用して作られたギャラリーを見ることもできます。以下は The Creators Project での紹介動画です。

three.js wiki を参考にしながら _playGnd で動かしてみるのが一番分かりやすい three.js の始め方だと今のところ思っています。

ジェネレーター

2. GEO Editor

http://marcinignac.com/projects/geo-editor/

three.js でデフォルトで用意されているものより複雑な幾何学形状を GUI を使って作ることができます。obj データとして出力できるので生成したものを 3D ソフトに取り込むことができます(three.js でも使えます)。触っているとこんな感じ↓のができます。

geo-1

Box でも話題のインタラクティブアーティスト GMUNK さんがこのアプリを使用して生成したオブジェクトを MAYA で加工したシリーズを残しています。以下の動画で作成の過程を見ることができます。

3. InParticular

http://lawriecape.co.uk/threejs/

inparticular-1

WebGL versionWebGL ShaderLab version がおすすめです。生成したイメージを画像として保存することができます。パラメータを弄るだけで多彩なビジュアルを作り出せるという好例。CLEAR DOWN でイメージを消去、REDRAW TO THESE でイメージを生成します。消去せずに REDRAW すると塗り重ねられるので、また違ったイメージが生成できるかもしれません。RANDOMISE と RANDOMISE SHADERS をポチポチ押していくだけでも十分楽しめます。Flickr に作者の方が生成したイメージがアップされています。
InParticular – Three JS WebGL test – a set on Flickr

余談ですが、これを見つける前に俺もこういうジェネレータ作りたいと思って作ったのが Sphere Particles | WebGL Experiments です。ディティールが甘く今イチ拡張性の高くないものができてしまいました。精進したいものです。

4. sparkseditor

http://jeromeetienne.github.io/sparkseditor/

プログラミングでアニメーションと言ったらとりあえずパーティクルという人もおられると思います。これは sparks.js というパーティクル作成用のライブラリを使ったエディタで、数値を変えることでメガ粒子砲のようなものから火炎放射器のようなのまで作ることができます。適当に弄ってみるとこんなの↓が作れます。

sparks

以下は解説動画です。

パーティクルエディタなら探せば色々ありそうですね。こんな機能を使っていずれ鼻血ブーシミュレータを作りたいなーと考えています。

シェーダー(GLSL)

WebGL では全ての描画にシェーダー (vertex shader, fragment shader) が必要となります。three.js に用意されているものだけでも幅広い表現は可能ですが、より凝った表現をしたり最適化が必要になったりすると、自らシェーダーを書くことは避けられません。World Wide Maze では CPU が物理演算でビジーになりがちなので、CPU (JavaScript) で書くほうが簡単な処理でも、極力シェーダー (GLSL) で書くことで、GPU を使うようにしました。海の波の表現はもちろん、ボールが登場するときのメッシュや、ゴールの花火もほぼシェーダーで表現されています。

さくーしゃさんも仰っておられるように、シェーダーを自分でガリガリ書いていくことが WebGL の一番美味しいところと心得ました。シェーダーは ProcessingopenFrameworks、Objective-C でも使えるということなのでここで覚えておくと可能性は広がりますね。Instagram のフィルターもシェーダーで実装されているそうです。シェーダーって何やねんって方は WebGLの能力を引き出すプログラマブルシェーダー (1/5)が参考になるかもしれません。

5. GLSL Sandbox

http://glslsandbox.com/

GLSL Sandbox Gallery

俺は参考として紹介したサイトを一読しただけではさっぱり分からなかったし、この手のプログラミング経験の無い方にはいきなりシェーダーを書くのって結構大変だと思いますので、まずは作例に触れてみましょう。このサイトは更新頻度も高く作品数が多い(軽く触っただけで保存されちゃったようなものも多いけど)ので、暫くこのサイトを見て過ごせると思います。俺は初めてこのサイトを見つけた時は楽しすぎて次から次へとずーーーーっと何時間も見続けたためゲロ吐きそうになりました。iTunes のビジュアライザが好き人なんかはかなり面白いのではないでしょうか?慣れてきたら既存のコードをカスタムしたり新しく自分のシェーダーを作ったりしてみましょう。

以下にお気に入りをいくつか(趣味が偏っていますご了承ください)。

http://glslsandbox.com/e#12897.0

GLSL Sandbox-8

http://glslsandbox.com/e#12456.0

GLSL Sandbox-4

http://glslsandbox.com/e#7140.6

GLSL Sandbox-5

http://glslsandbox.com/e#10591.0

GLSL Sandbox-7

http://glslsandbox.com/e#12054.0

GLSL Sandbox-9

6. Shadertoy

https://www.shadertoy.com/

Shadertoy BETA-1

これも見ているだけでも最高に楽しい系。ただ最近のマシンじゃないと見るのしんどいかもしれません。俺の MacBook Late 2008 だと時々フリーズしちゃいます…。シェーダーの入力パラメータとして音、映像,マウス座標,Web カメラなども利用できかなり凝った作品が作れるため、凄腕アーティストたちが圧倒的クオリティの作品をアップしています。

YouTube にも ShaderToy のみで作成された映像がアップされています。

お気に入りをいくつか。マシンによっては表示が遅くなるかもしれないので注意です。

Buoy

Buoy-1

Flame

Flame

Main Sequence Star

Main Sequence Star-1

参考:[SIGGRAPH]リアルタイムレンダリングの最先端が集結するイベント「Real-time Live!」レポート(前編) – 4Gamer.net

7. Pixel Shaders

http://pixelshaders.com/

pixel-shaders

使えるサンプル多数!自分でシェーダーを書いてみたくなったあなた、入門用に最適なサイトです。ちょっとしたエフェクトの作り方が紹介されています。↓のようなウェブカメラを利用したサンプルも面白いので色々弄ってみましょう。

pixel-shaders-examples

8. Yet.Another.Shader.Editor.

http://yase.chnk.us/

yase

シェーダーを使用したパーティクルジェネレーター。こういう風に自分仕様のエディタ作ってリアルタイムコーディングやるのいいなぁ。以下は作者の Ryan Alexander さんのプレゼン。このエディタを使って生成した作品も紹介されています。

グラフィカルプログラミング

9. ThreeNodes.js

http://idflood.github.io/ThreeNodes.js/

three-node-editor

これも面白そう、なんだけどグラフィカルプログラミングは MaxPure Data を少し齧った程度なので使い方わかんない…。Pure Data 慣れたら帰ってきます。上が編集画面で、下が再生画面。

three-node-player

開発ツール

10. Shader Editor – Firefox Developer Tools

https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor

ff-shader-editor

Firefox 27 からの新機能。ブラウザでシェーダーがデバッグできるようになりました。普段 grunt を使ってコードを修正するとブラウザが更新されるようにして作業しているのですが、これも便利ですね。2013年12月25日現在、Firefox Nightly Buildsからダウンロードした Aurora で利用できます。以下は解説動画です。

VJ やりたい

11. Sliider

http://www.udart.dk/2013/11/01/introducing-sliider-vjing-with-a-web-browser/

slider

オンラインエディタとは言えないのですが、来年は WebGL で VJ やるでーと思ってうろうろしていたら Mac の VJ 用アプリを見つけました。ウェブサイトをミックスできてデモを見る限り自分のやりたいことはある程度できてしまいそう。プレビュー版ではクロスフェーダーなどのコントロールがまだできないみたいです(OS10.8.5で試用)が、期待期待。以下は紹介動画です。

その他

他にも色々あります。殆ど使ったことが無いのですが軽く紹介していきます。

12. WebGL playground

http://webglplayground.net/

こちらもシェーダーエディタ。

13. Shdr Editor

http://shdr.bkcore.com/

他のシェーダーエディタは fragment shader のみ対応しているものが多いですが、3D モデルに対して fragment shader も vertex shader も両方書くことができます。

14. Kick.js | Shader editor | Particle shader

http://www.kickjs.org/example/shader_editor/shader_editor.html

WebGL ライブラリ kick.js のエディタ。

15. RADIATOR

http://radiator.ahoi.in/

電波ビジュアライゼーションジェネレータ。

16. Frame.js

http://mrdoob.github.io/frame.js/editor/

Mr.Doob 氏の three.js リアルタイムタイムライン式エディタ。超楽しそう、なんだけど使い方がよく分からん…。

以上です。眺めているだけでもちょっと数値を変えるだけでも十分楽しくないですか?基礎から始められるに越したことはないですが続かなくては元も子も無いので、まずは楽しければ全て好しだと思っています。他にもおすすめのエディタなどありましたら Twitter とかで教えて頂けると嬉しいです。Happy WebGL!

Update: 2013/12/26
three.js r64 リリースに伴い本家からエディタが出ていることにこれ書いた後に気づきました!
http://threejs.org/editor/