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

鼻血が出るほどチョコをくれ!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! 俺は友達の結婚おめでとうパーティに行ってくるよ〜

jQuery イメージスライダーNivo Slider で画像ごとに停止時間を変える

Nivo Slider は 多彩なトランジションを繰り出すスライドショーを簡単に作ることができる高性能 jQuery イメージスライダー。jQuery プラグイン版は無料で使うことができます。

使用方法は下記を参考にしてもらえば好いと想います。
Nivo Sliderの使い方とサンプル | jQueryプラグイン集

トランジションのタイプは、img タグの data-transition 属性でトランジション名を指定することで画像ごとに簡単に変更できるのですが、例えば文字を読ませたい場合に少し長めに止めておきたい、といったように画像毎に停止時間を指定できる機能はデフォルトでは現在(2012/12/27)のところないようです。探してみたところ以下のページでやり方が紹介されていました。
Can I get different pauseTime’s for different slides? / Nivo Slider jQuery Plugin / Discussion Area – Nivo Slider Support

以下のコードを nivoRun function の中のカスタムトランジションに関するコードの後に入れます。圧縮前の jquery.nivo.slider.js (v2.7.1) で言うと 614 行目あたりかな。

if(vars.currentImage.attr('data-timing')){ 
    settings.pauseTime = vars.currentImage.attr('data-timing'); 
    window.clearInterval(timer); 
    timer = ''; 
    if(timer == '' && !settings.manualAdvance){ 
    timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); 
    } 
}

default の pauseTime が 3000 として、以下のように記述すると、3、4枚目の画像で pauseTime が1500と半分になり、5枚目の画像ではまた3000に戻ります。data-timing 属性を持っている時のみ上記のコードは適用されるので、何も指定しない場合は最後に指定した pauseTime が適用されます。

<img src="001.jpg" alt="" />
<img src="002.jpg" alt="" />
<img src="003.jpg" alt="" data-timing="1500" />
<img src="004.jpg" alt="" />
<img src="005.jpg" alt="" data-timing="3000" />

今回は pauseTime を弄っていますが、お望みとあらば同様の方法で slices でも boxCols でも画像毎に指定できるようにカスタムできます。

SWFObject+ExternalInterfaceでのGoogle Analytics設定

FlashとJavaSrciptの連携をするにはExternalInterfaceを使うと便利です。過去記事で面倒なやり方をエントリーしましたが今後はこちらのやり方で行こうと想います。

先日「Google Analytics」がFlashコンテンツのアクセス解析に対応しましたが、こちらのやり方は後でやってみるとして、とりあえずExternalInterfaceを使ってJavaSrciptと連携しGoogle Analyticsを使えるようにしてみます。

こんな感じです。



Continue reading “SWFObject+ExternalInterfaceでのGoogle Analytics設定”

Flash JavaScript Integration Kitを使ってFlashからJavaScriptを操作する

今回やりたいことは、
ボタンを押すと別ウィンドウでFlashのスペシャルサイト表示。
開いたスペシャルサイトから元のページを操作(ページ遷移、focusを当て前面に出す)。
個人的には同じウィンドウで全て遷移して欲しいところですが、これでやってみたいと想います。

サンプル

Continue reading “Flash JavaScript Integration Kitを使ってFlashからJavaScriptを操作する”