基礎から始める本格 WebGL スクールの受講生を募集します！

2014年11月開講決定

iOS が WebGL に対応したことで、これからますます需要が高まっていくことが予想される WebGL――

しかし実際にそれを扱えるフロントエンドエンジニアはまだまだ少ないのが現実です。

本スクールは、今まで 3D プログラミングを全く経験したことがない方、あるいは多少の知識はあるがもっとしっかり基本を固めておきたい方を対象とした、基礎から取り組む WebGL 習得のための本格基礎講座です。

WebGL 開発支援サイト wgld.org の管理人である doxas こと杉本雅広が責任を持って講義をお送りします。

開講は 11 月からを予定。以下詳細をご確認いただいて、ぜひ参加をご検討いただければと思います。

想定する受講者

本スクールでは、受講していただいた方が自力で、スクラッチで記述した WebGL コンテンツを扱えるようになるまでをしっかりサポートします。全く 3D プログラミングに携わったことがない方でも、必ず WebGL のコンテンツを自作できるようになります。

今後、本格的に WebGL 案件が増加していくことが確実視されている今だからこそ、基本をしっかり習得して頂ければと思っています。

講義では WebGL 特有の実装だけでなく、3D プログラミング全般に流用できる基礎知識からしっかり扱っていきます。ベクトル・行列・クォータニオンといったいかにも難しそうなキーワードは、本スクールを受講し終えたころには全く恐くなくなっていると思います。

ただし前提として、最低限 javascript の基本的な知識を有していることが必要です。本スクールでは、javascript の実装方法の基本については原則として解説しません。目安として、メソッド・プロパティ・クロージャといった用語の意味がなんとなくでもわかっている、jQuery などを利用していても構わないので、自分で一通りのサイト構築を行ったことがある、といった程度の知識や経験がないとちょっと苦しいかもしれません。ただ基本的にはそれほど難しい javascript の実装を行うわけではないので、javascript に関しての知識はそれほどなくても大丈夫ですのでご安心ください。少し javascript を触ったことがある程度……というデザイナーさんなんかでも大丈夫だと思います。

もちろん、可能な限りは javascript に関する部分もサポートしつつ解説していきますが、javascript を全く触ったことがないという方は、まずご自身で javascript の基本を習得されてから本スクールにご参加いただくほうがいいと思います。次回開催はまだ未定ですが、いずれ必ず実施したいと考えています。

尚、3DCG のモデリングソフト(例：Blender)などのスキルは無くても問題ありません。WebGL による実装のコーディングがメインの内容となり、逆にモデリングソフトに関する技術解説等はありませんのでご注意ください。

それらも踏まえつつ、本スクールは次のような方に特におすすめの内容となります。

• 自分で WebGL のプログラムが組めるようになりたい
• ライブラリの中身でどのようなことが起こっているのか知りたい
• 今後のために 3D プログラミングに触れておきたい
• 業務で利用するかもしれないので基礎を磨いておきたい
• なんか面白そう ← これも大事！

もちろん、基本の習得だけではなく WebGL の応用テクニックや見栄えのするデモの作り方など、一歩踏み込んだ内容までを解説する予定です。先行してしっかり WebGL の基本を身に着け、ぜひ業務やプライベートのプログラミングに活用してみてください。

講師紹介

杉本 雅広(すぎもと まさひろ)

WebGL 開発支援サイト wgld.org という WebGL 入門のための、開発支援サイトを 2012 年より運営しています。初心者にもわかりやすく解説することを常に念頭に置きつつ、中級者以上のレベルの人たちにも役に立つようなコンテンツを配信しています。

2014 年に入ってからは積極的に WebGL 関連の勉強会などに登壇。WebGL の普及と、WebGL に携わるすべての人の力になるべく奮闘中です。

• 2014年1月：日本WebGL開発者フォーラム を発足
• 2014年6月：Tokyo WebGL Meetup に登壇
• 2014年9月：jsstg 2014 夏のjavascriptシューティングゲーム祭り 主催
• 2014年9月：3DCG Meetup #04 に登壇

場所・時間など

スクールの開催には、渋谷にある Stocker.jp / Space をお借りします。

期間は 2014 年 11 月 4 日(火曜日) から翌年の 2015 年 2 月 10 日(火曜日)まで、毎週 1 回、火曜日開催となります。

年末年始の期間(12 月 22 日 ～ 1 月 12 日)は会場として利用させていただく Stocker.jp / Space がお休みになりますので、講義もお休みとなります。従って講義自体は 2015 年 2 月 10 日 までで全 12 回となります。料金を予告なく変更することはありませんが、会場等の都合で講義日が若干ずれる可能性はあります

講義時間は各回 19:30 ～ 22:00 の 2 時間半で、総計 30 時間となります。

年末のお休みに入るまでには、3D プログラミングの基本やシェーダの基礎はしっかり習得できるようにカリキュラムを組んでいます。年末年始のお休み中でも充実の自主制作ができると思います。

料金・お支払

料金のお支払いは銀行振込で、一括でお支払いいただくことも、分割してお支払いいただくこともできます。入学金のような余計な料金はいただきませんので、純粋に受講料のみのお支払となります。

一括ですと、105,000 円（税込 113,400 円）です。

分割でお支払いただく場合は、4 か月に分割で 30,000 円（税込 32,400 円）x 4 回となります。

募集人数

募集人数は最大 20 名まで。

完全先着順となります。

細かくサポートするためにもこの人数が上限になりますのでご了承ください。

受講者にご用意いただくもの

会場となる Stocker.jp / Space は無線 LAN 完備ですが、事前に Google Chrome の最新版をインストールしたノートパソコンをご用意ください。

機器の貸し出し等はありませんので、ご注意ください。

パソコンは Mac でも、Windows でも大丈夫です。講義で利用するサンプルプログラム等は、あらかじめその時点での最新版の Chrome で、両 OS 環境でテストしておきますのでご安心ください。

カリキュラム紹介

当スクールのカリキュラムをご案内します。

受講される方の個々のレベルに合わせて詳細まで解説します。下記の概要をご覧になって不安に感じられる方もいらっしゃるかもしれませんが、きちんと概念や意味を理解できるように場合によっては個別に詳細な解説を行う方針ですのでご安心ください。

01.本当は恐くない WebGL

3D プログラミング習得に最適な WebGL。どうして WebGL で 3D プログラミングを始めるのが最適なのか、初めて WebGL に挑戦するには何からやったらいいのかなど、まずは実際に WebGL に触れてみることでその手軽さと楽しさを実感してみましょう。

当スクールでは、いきなり初回から、画面上に WebGL によるレンダリングを行うところまでチャレンジすることができます。

• ベクトル？　ポリゴン？　頂点？　それってなんなの？
• どうして WebGL は敷居が低いと言われているの？
• 簡単な図形一つ描くのにもすごく大変なんでしょう？
• WebGL を利用するとどんなことができるようになるの？

02.WebGL におけるレンダリング

WebGL などの 3D プログラミングがどうして「難しい」と言われてしまうのか。WebGL が実際に画面に何かを描き出すための手続きを一つずつ見ていきながら、あえて、WebGL の下準備の大変さを体験してみましょう。

最初はすごく難解に感じるかもしれませんが、一つ一つ見ていけば理解すること自体はけして難しくはありません。それに一つ一つの処理の重要性と意味合いに関する理解が深まれば、冗長な下準備など些細な問題のように感じられるようになるはずです。

• 一つ一つの手続きにどんな意味があるのかを知ろう
• バッファやプログラムオブジェクトなど、WebGL 特有の聞きなれないオブジェクトについて理解を深めよう
• 最もスタンダードな WebGL の基本的な実装について考えてみよう

03.シェーダと GLSL

近年の高度なグラフィックス処理には欠かせないシェーダという概念。もちろん WebGL でもシェーダは非常に重要な役割を果たします。

シェーダの役割とはなんなのか。そしてシェーダを記述するにはどうしたらいいのか。GLSL とはいったいなんなのか。シェーダの基本をしっかり学習します。

• シェーダにはどんな種類や役割があるのか知ろう
• シェーダを記述するというのはどういうことなのか、またどのように記述したらいいのかを知ろう
• シェーダと javascript との関係性について理解しよう

04.行列とクォータニオン

3D プログラミングの世界では、WebGL に限らず、必ず行列やクォータニオンなどの数学的な難しい話が出てきます。

これらは 3D プログラミングにおいて確かに避けては通れない概念なのですが、無駄に難しそうなイメージばかりが先行しているような気がします。行列とはなんなのか、そしてなぜ行列が重要なのか、使い方から簡単な概念の理解までしっかり行います。

• 行列ってなんなの？
• 行列を使うと何がうれしいの？
• 行列やクォータニオンって具体的にどう使えばいいの？

05.様々なライティングテクニック

ライティングには様々な種類や手法が存在します。そしてそれらを用途に合わせて適切に組み合わせることで、よりリッチなレンダリング結果を得ることができます。

ライティングの基本をしっかり学習します。

• ライティングの基本について知ろう
• いろいろなライティングの手法について知ろう
• ライティングをより美しく見せるには？

06.テクスチャマッピング

ライティングに続いてはテクスチャについて取り上げます。

WebGL はブラウザ上で動作するため、テクスチャを利用する上で少々独特な手順やルールがあります。また、WebGL ならではの優位性などについても解説します。

テクスチャを極めればかなり見栄えのするものが作れるようになりますので、しっかり理解できるようにサポートします。

• テクスチャとはなんなのかについて知ろう
• どのようなリソースを利用できるのか、その利用するための準備などについて知ろう
• WebGL ならではの有用なテクニックを活かそう

07.ブレンディングとブレンドファクター

CSS では色の指定にアルファ値を設定することで DOM Element を自由に透過させたりすることができます。もちろん、WebGL でもそのような半透明などの処理を行うことができ、これを知ることでより柔軟な 3D プログラミングが行えるようになります。

ブレンディングについてしっかり理解するセクションです。

• アルファブレンドってどうすれば実装できるの？
• ブレンドについて理解しているとなにがうれしいの？
• シェーダとブレンドの関係について理解しよう

08.シェーダによるエフェクトテクニック

これまでのセクションでは WebGL そのものに関する実装が多かったですが、本セクションではシェーダの深遠な世界に一歩踏み込んでみます。

シェーダ側でプログラマブルにレンダリング結果を操作できるようになると、さらに複雑な効果や柔軟な実装が可能になります。

• プログラマブルシェーダの利便性について知ろう
• トゥーンシェーダを実装してみよう
• シェーダを利用してフォグ(霧)を実装してみよう

09.フレームバッファ

WebGL にはフレームバッファという概念があります。これを利用することで様々なエフェクトやテクニックの実現が可能になります。

フレームバッファの使い方とその活用方法についてしっかり学習します。

• フレームバッファってなんなの？
• フレームバッファを使うと何がうれしいの？
• オフスクリーンレンダリングについて知ろう

10.ポストエフェクトテクニック

ポストエフェクトとは、一度レンダリングが完了した状態のシーンに、さらに追加のエフェクトを掛けるテクニックです。

フレームバッファをうまく利用することで、特殊な効果を加えたレンダリングを行うことができるようになります。

• シーン全体にブラーを掛けるポストエフェクト
• ポストエフェクトならエッジの検出もできる？
• 正射影行列の使い方のポイントを押さえておこう

11.環境マッピング

まるで磨き抜かれた金属のような、光を完全に反射する物体を描くには環境マッピングというテクニックが使われます。もちろん WebGL でもこのような効果を生み出すことが可能です。

環境マッピングを習得できれば、ガラスにうっすらと風景が映り込むようなシーンもレンダリングすることができるようになります。

• 環境マッピングとはなんなのか知ろう
• 環境マッピングの手法について知ろう
• 動的な環境マッピングを実装してみよう

12.深度値とシャドウマッピング

3D プログラミングにおける影の表現は鬼門の一つです。

WebGL を利用してシャドウマッピングを行うための基本と、それに必要となる基本的な数学的な概念を理解しましょう。

• シャドウマッピングに必要な座標系について知ろう
• 影が描かれる仕組みを理解しよう
• 様々な影の表現手法について知ろう

受講のご連絡・お問い合せ

スクールの受講をご希望の方はお問合せフォームよりご連絡ください。追ってこちらからご連絡差し上げます。

募集人数以上のご応募をいただいた場合には、完全先着順となりますのでご了承ください。

その他、ご質問等は上記お問合せフォームよりご連絡いただければ随時お答えします。