基礎を身につける本講義と実践的なノウハウの詰まったプラスワン講義！ WebGL スクール 2019 募集開始します
2019 年 4 月開講！
WebGL 1.0 が正式に勧告されたのは 2011 年の 3 月のこと……
そう、実はもう 8 年も前のことなんですね。
現在では WebGL は次のバージョンとなる 2.0 も勧告されており、ウェブの表現力向上だけでなく、機械学習にも（特殊な形で）活用されるなど、いまも少しずつその存在感を大きくしています。恐らく、数年のうちにはコンピュートシェーダなどの新たな機能がさらに追加され、どんどんウェブ技術の一角として無くてはならない存在に変わっていくでしょう。
近年では実際に WebGL を利用した事例も次々と発表されていて、最近ではアワード系のサイトでは WebGL を使っているものを目にすることも、けして珍しいことではなくなってきています。
日本でも、WebGL を活用した事例が多く公開されるようになってきていますし、WebGL の存在に注目しているという人も多いのではないでしょうか。
今年も、3D プログラミングの基礎からしっかり学べる WebGL スクール、第六期を 2019 年 4 月より開講します。
WebGL スクールの開催に寄せて
WebGL スクールを今年も開催しようと私が考えたのは、WebGL そのものが、新たなステージに到達したように感じたからです。
これまではどちらかというと、WebGL の普及活動のひとつとして、また先鋭的な技術の習得を目指す人たちの手助けができればという気持ちで、WebGL スクールを開催してきました。別途開催している GLSL のスクールも含めると、もう述べ人数で 300 名近くの受講者の方々がいらっしゃることになり、本当にありがたいことだなと思っています。
今現在はもう既に、WebGL は「当然あるべきウェブの技術のひとつ」として、また「3D プログラミングの入門環境」として、その WebGL の持つ優位性を、もっと多くの人の利益につなげる努力をしていくべき段階なのだろうと思います。WebGL を使えるのが当たり前とまでは、言うつもりはありません。でも間違いなく、その技術を習得することに意味のある存在に、WebGL は成長してきたと私自身は思っています。
このスクールはどんな内容なの？
WebGL スクールの本講義は、主催者である杉本 雅広（すぎもとまさひろ）が責任を持って担当します。
- @h_doxas | Twitter
- WebGL 開発支援サイト wgld.org 運営
- WebGL スクールや勉強会の主催
今年の WebGL スクールも、昨年と同様に、前半戦ではまずは three.js を使って「3D プログラミングの雰囲気に慣れる」ことからスタートします。
WebGL に限らず、3D プログラミングという分野は感覚をつかむまでに多大な苦労を伴う場合が多いです。初めて見聞きするような数学の話が出てきたり、いかにも専門用語のようなキーワードがたくさん登場したり、なにかと挫折につながる罠が大量に仕掛けられている……そんな印象を持っているひとも少なくないのではないでしょうか。
本スクールでは、まず最初は three.js などのライブラリのちからを適宜拝借しながら、少しずつ 3D に慣れていくスタイルで進めていきます。
中盤からは、WebGL 本来の API の仕組みや、CG がレンダリングされるという事象そのものについての解説など、より踏み込んだ内容を扱っていきます。three.js によって実現した技術をピュア WebGL で再現したりするなかで、API の使い方に慣れながら、より深く 3D プログラミングやシェーダプログラミングに取り組めるようカリキュラムを組んでいきます。
なかには、three.js さえ使いこなせれば別にピュア WebGL について知る必要はないのでは？ と思う方もいるかもしれません。
しかし WebGL の API そのものの仕組みを理解していることで、three.js や Pixi.js といった、WebGL に関連するライブラリの使い方や、あるいは使いこなしかたには、絶対に差が生まれます。より低いレイヤーの知識を持っているからこそ実現できる技術や、応用例が、たくさんあるのですね。
本スクールでは、そういったなかなか普段のフロントエンドの開発では知り得ない、3D プログラミング特有の知識やテクニックについてもしっかりと基礎から扱っていきます。もちろん、シェーダを駆使した表現のコツなど、よりわかりやすくビジュアルに寄与するような内容も、後半戦ではたくさん登場します。
想定する受講者は？
前述のとおり、本スクールではまず前半はライブラリを使いながら、3D に慣れてもらうことを主題に講義を始めていくかたちになります。
3D プログラミングは初めてという方でも安心してご参加いただけるように、スライドやサンプルはかなり詳細なものを用意するよう努めています。
基本的に資料は毎年新しく刷新して、そのときの JavaScript や WebGL の置かれている状況にできるだけ沿った内容になるようにしています。今年あたりはもう、JavaScript については ES2015 を基準にしたコードになると思います。ただ、JavaScript の書き方そのものを講義するわけではなくあくまでも WebGL に関連した技術を講義する形ですので「全くプログラミング経験が無い」という方はさすがにちょっと内容が難しくなってしまうかもしれません。
また、今年は WebGL 2.0 ではじめて利用できるようになった機能なども、後半は少し取り入れたいなと思っています。
講義のなかでその場で理解するまでには至ることができなくても、そういった最新の技術に触れるなかで、なにかきっかけを掴むことができるということも、あるかもしれないと思うからです。
これまでにも、本業は HTML コーダーやウェブデザイナーだけど WebGL を知りたくて参加したという受講者さんはたくさんいらっしゃいました。スクールの運営方針としてはできるだけ各受講者のレベルに合わせて対応するかたちであること、また Slack 等を通じて、できる限り個別に私自身が対応するようにするなどしていますので、あまり過度に心配せずご検討いただければと思います。
- WebGL 興味がありどのようなことが実現できるのか知りたい
- 3D プログラミング全般に関する知識を深めたい
- 普段は Unity などを使っているが 3D の基礎を身に着けたい
- 3DCG がどのように描かれているのか原理や背景を知りたい
- ウェブ技術のスキルアップとして WebGL について知りたい
- WebGL や three.js 等を利用して作品を作ってみたい
- 表現手段のひとつとしてシェーダや GLSL について理解を深めたい
- シェーダによる表現の幅を広げたい
- WebGL 2.0 など新しい技術の概要をつかみたい
おおよそ、上記のような要望を持っている方々にとって有益なスクールになるようカリキュラムを組んでいます。
プラスワン講義
本スクールではもう毎年恒例になった感がありますが……今年もプラスワン講義をカリキュラムに取り入れています。
プラスワン講義とは、WebGL スクールの本来のカリキュラムとは別に、各分野で活躍・活動されている外部講師を招いて課外授業を行ってもらうようなイメージで、本講義の内容だけでは扱うことが難しいような、専門性に特化した手法や考え方を知ることができる講義です。
今年もとても魅力的な講師陣になりました。
以下、簡単にですが紹介します。
白江 崇志（SRETKS）
白江さんは、国内では珍しい Babylon.js を利用した WebGL 事例で知られるエンジニアさんです。
と、いかにもバリバリのエンジニアさんっぽい感じで書きましたが、デザインや Blender による 3D モデリングなどもこなすというマルチな才能をお持ちの方です。当サイトでも、年賀コンテンツなどで「Blender での自作モデル ＋ Babylon.js 実装」のサイトを何度かご紹介させていただいたりしています。
今年はなんと、WebGL スクールなのに Blender を利用したモデリングの講義を白江さんのほうで行ってくれる予定です。このプラスワン講義では「自分がつくった3DモデルをWebGLで動かしてみたいエンジニア・デザイナー向けに、Blender初心者でも手早くシンプルに3Dキャラを作れるようになることを目指します」とのこと。
私も Blender は使いこなせていないので、これは期待大です！
もちろん、白江さんのプラスワン講義で受講者自らモデリングした 3D モデルの自作データは、次に紹介する小山田さんの講義にそっくりそのままバトンタッチして引き継がれます。つまり、白江さんのプラスワン講義で作った自作 3D モデルを、小山田さんの講義で実際に読み込んで描画してみよう！ というところまで行うという連携した講義の形になっています。
小山田 晃浩（Yomotsu）
小山田さんは yomotsu のハンドルネームで WebGL 界隈ではおなじみなので、ご存知の方も多いと思います。
株式会社ピクセルグリッド所属で、WebGL や three.js、SVG や Canvas に CSS まで、とにかくグラフィックスやウェブの技術に広く精通されており、特に three.js に関しては国内でも指折りの使い手と言っていいでしょう。
最近では WebXR などの最新技術にもしっかりとアンテナを張ってらっしゃって、私もいろいろイベントなどでお会いしたときに教わることが多いです。
今年のプラスワン講義は、前述のとおり白江さんの講義で作った自作モデルを含む、3D のモデルデータを WebGL を使って描画する仕組み、さらにはボーンの仕込み方やアニメーションのさせ方なども含めて、小山田さんのほうでしっかりカバーしてくれる予定になっています。
自分でモデリングした 3D モデルのデータが、自分で動かせるというのはなんとも楽しみです。
小渕 豊（@FMS_Cat）
続いての講師は FMS_Cat こと小渕豊さんです。
小渕さんは現在ピクシブ株式会社で、同社が提供する WebGL を利用したプラットフォーム VRoid Hub の開発に携わっています。
VRoid は最近大きく話題になりましたよね。VRoid で制作したモデルをアップロードして楽しむことができるウェブのプラットフォームが、VRoid Hub です。
VRoid Hub のウェブサイトでは、VRoid で制作されたクリエイターたちの作品を実際に WebGL で動かしている様子をリアルタイムのレンダリングで閲覧することができます。
今回のプラスワン講義では、そういった本格派の WebGL を活用したウェブサービスを実装する上での開発秘話、また three.js を利用した実装においてもピュアな WebGL の知識がいかに役に立ったか、といった内容で講義をしてくださる予定です。
山田 啓太（@P5Aholic）
四人目の講師は、なめらかサンショウウオこと山田啓太さんです。
ウェブを通じたクリエイティブコーディング、Processing を用いた表現など、ご存知の方も多いのではないでしょうか。
昨年から順次公開されている Web Graphics Experiments や Web UI Experiments は、本当に彼だけが持っている独自の感性が見る人を圧倒してくる作品群になっていて、とても素晴らしいものばかりです。
今回の講義では、実際に彼が制作を行う開発フローや裏話（？）も含む、より実践的で現場で役立つ WebGL 活用術を披露してくれます。
開催時期・講義時間
今回の WebGL スクールは、2019 年の 4 月 20 日（土曜日）に第一回が開催となります。
ゴールデンウィーク期間中は、受講されるみなさんにとってもなにかとプライベートな用事が立て込む時期でもありますので、講義はお休みになります。
第二回講義は 5 月 11 日から再開し隔週土曜日で行っていきます。二週間ごとに講義が一回という感じで続き、全八回となります。
| 日時 | 講義内容 | |
|---|---|---|
| 第一回 | 04月20日（土） | 3D 開発や WebGL・シェーダについて知ろう |
| 第二回 | 05月11日（土） | three.js の基本機能を使いこなそう |
| 第三回 | 05月25日（土） | 3D 開発に必要な最低限の数学知識を知ろう |
| 第四回 | 06月08日（土） | レンダリングの流れとシェーダの役割を知ろう |
| 第五回 | 06月22日（土） | WebGL・GLSL の骨格と 3D API の雰囲気を知ろう |
| 第六回 | 07月06日（土） | テクスチャやブレンドなどのテクニックを知ろう |
| 第七回 | 07月20日（土） | シェーダをより深く理解し操る技術を知ろう |
| 第八回 | 08月03日（土） | WebGL 2.0 などハイエンドな実装について知ろう |
さらに、中盤の第四回からはプラスワン講義もスタートします。
こちらは WebGL に関するスキルをお持ちのプロフェッショナルのみなさんから、各々の得意とする分野や技術について、じっくりと話を聞くことができる課外授業的な位置づけです。
本講義のあと、１時間 ～ ２時間程度のプラスワン講義という形で行います。
| 担当講師 | 講義内容（まだ仮です） | |
|---|---|---|
| 第四回 | 白江 崇志 | フロントエンジニアもさっくりつくろう 3D（２時間の講義を予定） |
| 第五回 | 小山田 晃浩 | 3DモデルをWebブラウザーで表示する |
| 第六回 | 小山田 晃浩 | ボーンによる3Dモデルのアニメーション |
| 第七回 | 小渕 豊 | Three.jsで3Dキャラクターを動かすまでに必要な知識（仮） |
| 第八回 | 山田 啓太 | UIをリッチに表現するWebGL活用 |
| 講義時間（目安） | |
|---|---|
| 本講義 | 14:00 ～ 17:15 |
| プラスワン講義 | 17:30 ～ 18:30 |
講義は、14 時から開始します。
本講義が、14:00 ～ 17:15 までを目安に。
プラスワン講義が 17:30 ～ 18:30 までとなります。
途中、適宜休憩時間を設けつつ進めていく形です。
開催場所
スクールの開催場所は、例年お世話になっています コワーキングスペース茅場町 Co-Edo となります。
〒104-0033 東京都中央区新川1-3-4 PAビル5F
こちらのコワーキングスペースは、茅場町駅から徒歩数分で、非常にアクセスもよく会場の設備もしっかりしています。（Wi-Fi や各席に備えられた電源等を無償で利用できます）
大きめのプロジェクターを利用して講義しますので、ハンズオン形式でコードを見ながら講義する際も、受講者からしっかり視認性高くプレゼンテーションできるとてもよい会場です。
アクセスについては、以下のページに非常にわかりやすくまとまっています。参考にしてみてください。
受講料について
以下、受講料の一覧です。全て 内税表記 ですので、下記料金以外に余分な消費税等をいただくことはありません。
また、会場利用代金は受講料に含まれています ので、当日現地にて別途お支払いをいただくこともありませんのでご安心ください。
| 支払い形態 | 受講料 | 備考 |
|---|---|---|
| 一般（一括） | 125,000 円 | 一括支払いで分割に比べて 25,000 円割引 |
| 一般（分割） | 150,000 円 | 分割回数や一回の支払額は相談して無理ない範囲で決めます |
※すべて内税、会場利用料金などを含みます
受講料は原則として前払いでお願いしています。これは単に いたずらや、事前連絡のない突然のキャンセル等を避けるため です。
たとえば一時的に収入が不安定な時期であるなど、なにかしらの事情がある場合はご相談いただければできるかぎり対応しますので、お気軽にご相談ください。個人運営のスクールなので、そのあたりは受講者さんの都合に合わせてできる限り調整します。
また、スクールの受講が確定するのは、申し込みいただいてから、折り返しこちらからご連絡を差し上げたあとになります。※これもいたずらなどの防止のためです。
お申し込みフォームから、必要事項をご入力いただき、お申し込みください。こちらから、遅くとも２～３日以内にはご連絡差し上げますのでそこで 確認が取れ次第スクールの受講が確定 となります。
特に、折り返しのご連絡を差し上げる都合上、メールアドレスの間違いにはご注意ください。また、３日以上経過してもこちらからのご連絡が届かない場合は、どこかでフィルタに掛かってしまったなど間違いが起こっている可能性もありますので、そういった場合は遠慮せず確認のご連絡をいただければと思います。
繰り返しになりますが フォームからの申し込み送信時点では受講が確定した状態ではありません ので、ご注意いただければと思います。
募集人数
募集人数は 最大 50 名 です。
こちらは基本的に 完全先着順 となります。
お申し込みをいただいた日時をベースに、先着順で、順次参加が確定する形になります。
もし、支払いのことや講義内容のことで疑問や質問がある場合は、まずはお問い合わせください。一度申し込んだら最後、無理に取り立てるみたいなことは一切ありません。
できる限り多くの方に、有意義な体験を提供できたらという気持ちで運営しています。まずはお気軽にご相談いただければと思います。
お支払い方法とお申し込み
受講料のお支払いは、銀行振込でお願いしています。クレジットカード等での決済は個人で運営していることもありお受けするのが難しいのでご了承ください。
企業宛での請求書の発行や、領収証の発行等、必要に応じて対応できますのでお気軽にご相談ください。
お申し込みは、以下のフォームより、お願いします。
くれぐれも、入力間違いなどにご注意ください。
こちらから返信メールを送信させていただき、連絡が取れた方から受講が確定します。メールアドレスの記入にはご注意ください。
各自ご用意いただくもの
当スクールでは、機材の貸出等は一切行っておりません。
スクールの受講にあたり、ノートパソコン等の実行環境についてはご自身でご用意いただく必要がありますので、その点はご注意ください。
また、サンプル等の配布するリソースについては Google Chrome での実行を前提に作成していますので、あらかじめ Chrome をインストールしておいていただければ、よりスムーズに受講が可能です。
また、プラスワン講義で利用する Blender などのツールについては、また別途、講義が近くなりましたら順次アナウンスしていきます。
お問い合わせ
なにかご不明な点や、ご意見等がありましたら当サイトのお問合せページよりご連絡ください。できる限り迅速に返信させていただきます。
