こんにちは、エンジニアのオオバです。

少し前からコチラのスクールに通っておりまして、WebGLを勉強しています。
WebGL スクール第2期の募集を開始します! 2015年5月開講! - WebGL 総本山

→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

メインはWebGLの基本的な内容

以下のような内容で全6回 5時間ぶっ通しでやります。

  1. WebGLとはなにか?
  2. WebGLの基礎を知る
  3. テクスチャとライティング
  4. アルファブレンディングとシェーダーによるエフェクト
  5. 環境マップ、バンプマップ
  6. フラグメントシェーダーによるエフェクト

すでに5回目を終了し、次回が最終回。

ぼくの動機としては、本当はUnityのシェーダー(HLSL)を勉強したかったのですが、シェーダーの考え方自体はWebGL(GLSL)と変わらないということで、気軽にテスト出来る(ブラウザで試せるという意味で)WebGLを学ぶことにしました。

前々からWebGL自体に興味があったのもあります。

5時間ぶっ通しで結構スピード早い授業

2回目くらいまでは既に理解していた内容で退屈でしたが、3回目くらいから、テクスチャマッピング、ライティングを自分で計算して実装したことがとてもエキサイティングでした。

つめ込まれた授業なので、結構スピードが早いです。前回の復習をちゃんとやっていないと、追いつけなくなります。
しかし、講師の@h_doxasが授業後でもメールやTwitter、facebookで質問に答えてくれるため、非常にありがたかったです。

今までは3DCGソフトが勝手に裏側で動いていたものを自分で実装することで内部構造の理解と、どこにリソースがとられるのか、どうやったらパフォーマンスを出せるのかという視点で考えられるようになったと思います。

WebGLの経験がUnityに生きる

WebGLを勉強した経験はUnity開発でも生きる事を確信しています。

3Dゲームが当たり前になっている中、シェーダー知識はフロントエンドエンジニアにとって必須項目になりつつあります。
ちょっと変わった面白い表現をしようとすると、どうしてもシェーダーが関わってきますしね。

このタイミングでこのスクールに参加できたことは大きなアドバンテージになったような気がします。
あとは、復習と経験を重ねてWebGLを自分の手足のようにすることが、とりあえずの目標です。

何事も基礎が大事!

とりあえずHelloWorldしておきました。コチラ

スクールでは、便利なWebGLライブラリ(ThreeJSなど)を使わずにほぼ生のWebGLを使います。先のHelloworldもライブラリを使わずに実装しています(スクールで使用した簡単なラッパーのみ使用)。

そうすることでWebGLの内部構造と処理の流れを正しく理解することができ、応用することが可能です。

今後学んだことの復習をこのブログでまとめていこうと思っています。
その前にスクールで使ったWebGLのラッパーも使わずに生のWebGLを書いてみることから始めるかもしれません。そうしないと本当の意味で理解できていないからです。

ぼく自身も『何事も基礎が大事!』をモットーにしているため、このスクールとはマッチしています。
@h_doxasさん自体が、とてもパワフルな方で毎回刺激を与えてくれます。その度にWebGL頑張ろうって思わせてくれるのもこのスクールの良い所かもしれません。

CEDEC2015にも登壇されるそうです。
WebGLとモバイルウェブの「これまで」と「これから」 そして来たるべきWebGL 2.0へ向けて

興味ある方は、第3回に参加してみてはいかがでしょうか(開催されるか分かりませんが)。

WebGL 総本山

オススメ記事