【日本語字幕あり】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 版が安いので(俺のリンクから買うのが)お勧めです。