three.js の基礎からピュア WebGL 実装でのシェーダテクニックまでを徹底解説！ WebGL スクール 2018 募集開始します

2018 年 4 月開講決定！

例年、各分野のプロフェッショナルを講師としてお招きしつつ開催している、国内唯一の WebGL 特化型スクールですが……

私自身は、毎年毎年、実は開催するべきかどうか悩むことも結構多かったりします。ただ、各方面から「今年は開催しないのですか？」といった開催の要望や応援メッセージなどいただくこともこれまた実は結構多くて、今年も開催することに致しました。

これまで運営してこれたことも十分に奇跡的というか、本当にいろいろな方の支えがあってのことだと思っています。今年もこうして、ひとまず開催の告知ができるところまで持ってこれたことが、私自身にとってはひときわ感慨深いです。いつもありがとうございます。

さて、そんな WebGL スクール 2018 ですが、本日より申込みの受け付けを開始します。詳細は以下の記事をご覧いただき、じっくりご検討いただいた上でお申込みいただければと思います。

学ぶことができる内容は？

WebGL スクールの本講義は、主催者である杉本 雅広（すぎもとまさひろ）が責任を持って担当します。

• @h_doxas | Twitter
• WebGL 開発支援サイト wgld.org 運営
• WebGL スクールや勉強会の主催

今年の WebGL スクールは、前半は three.js を使って「3D プログラミングの雰囲気に慣れる」ことからまずはスタートします。

WebGL に限らず、3D プログラミングという分野は感覚をつかむまでに多大な苦労を伴う場合が多いです。初めて見聞きするような数学の話が出てきたり、いかにも専門用語のようなキーワードがたくさん登場したり、なにかと挫折につながる罠が大量に仕掛けられている……そんな印象を持っているひとも少なくないのではないでしょうか。

本スクールでは、まず最初は three.js などのライブラリのちからを適宜拝借しながら、少しずつ 3D に慣れていくスタイルで進めていきます。

中盤以降は、three.js で実装する場合とピュア WebGL で書いている場合の違いや、three.js を使っている場合でも応用の利くような汎用的なシェーダテクニックなどを扱っていくことになります。後半は本来の WebGL の API を活用した内容が多くなりますが、それらを通じて 3D プログラミング全般に関する基礎を固めていくことが最終的な目的になります。

three.js さえ使いこなせれば別にピュア WebGL について知る必要はないのでは？ と思う方もいるかもしれません。しかし、three.js のソースコードを読み解いたり、あるいは 3D プログラミングの原則をしっかり身につけたりするためには、WebGL の API がどのように振る舞い、どのような特徴を持っているのか、それらを知っていることは非常に大きな意味を持ちます。

本スクールでは、そういったなかなか普段のフロントエンドの開発では知り得ない、3D プログラミング特有の知識やテクニックについてもしっかりと扱います。

想定する受講者は？

前述のとおり、本スクールではまず前半はライブラリを使いながら、3D に慣れてもらうことを主題に講義を始めていくかたちになります。

3D プログラミングは初めてという方でも安心してご参加いただけるように、スライドやサンプルはかなり詳細なものを用意するよう努めています。昨年はスライド等の数が 10、サンプル数は 70 個以上ありました。やりすぎ感（笑）

基本的に資料は毎年新しく刷新して、そのときの JavaScript や WebGL の置かれている状況にできるだけ沿った内容になるようにしています。場合によっては JavaScript の書き方そのものに言及する場合もありますので、普段そこまで JavaScript を書いていないという方でもご参加いただけると思います。ただ、JavaScript の書き方そのものを講義するわけではなくあくまでも WebGL に関連した技術を講義する形ですので、全くプログラミング経験が無いという方はさすがにちょっと内容が難しくなってしまうかもしれません。

たとえば本業はウェブデザイナーだけど、少しなら JavaScript が書ける、という感じであれば、そこまで JavaScript について心配は要らないでしょう。というのは、WebGL の場合はそもそも JavaScript の文脈とはちょっと違った書き方をする場合もありますし、JavaScript に精通しているかどうかよりも、新しい知識にいかに柔軟に対応できるかを問われる部分が多分にあるからです。

これまでにも、本業は HTML コーダーやウェブデザイナーだけど WebGL を知りたくて参加したという受講者さんはたくさんいらっしゃいました。スクールの運営方針としてはできるだけ各受講者のレベルに合わせて対応するかたちですので、あまり過度に心配せずご検討いただければと思います。

• WebGL 興味がありどのようなことが実現できるのか知りたい
• 3D プログラミング全般に関する知識を深めたい
• 3DCG がどのように描かれているのか原理や背景を知りたい
• ウェブ技術のスキルアップとして WebGL について知りたい
• WebGL や three.js 等を利用して作品を作ってみたい
• 表現手段のひとつとしてシェーダや GLSL について理解を深めたい
• シェーダによる表現の幅を広げたい

※どのような内容やレベル感なのか気になる方は、気軽にまずはお問い合わせください。

プラスワン講義

本スクールではもう毎年恒例になった感がありますが……今年もプラスワン講義をカリキュラムに取り入れています。

プラスワン講義とは、WebGL スクールの本来のカリキュラムとは別に、各分野で活躍・活動されている外部講師を招いて課外授業を行ってもらうようなイメージで、本講義の内容だけでは扱うことが難しいような、専門性に特化した手法や考え方を知ることができる講義です。

今年もとても魅力的な講師陣になりました。

以下、簡単にですが紹介します。

小山田 晃浩

小山田さんは yomotsu のハンドルネームで WebGL 界隈ではおなじみなので、ご存知の方も多いと思います。

株式会社ピクセルグリッド所属で、WebGL や three.js、SVG や Canvas に CSS まで、とにかくグラフィックスやウェブの技術に広く精通されており、特に three.js に関しては国内でも指折りの使い手と言っていいでしょう。

今年は three.js でのモデルデータの扱いなどについてお話いただける予定です。基本的なモデルデータの読み込みのやり方や、Blender からのデータのエクスポート方法など、トータルにカバーした内容にしていただけるとのこと。

今まさに注目を集めている、glTF と呼ばれるモデルデータ用のファイルフォーマットについても言及してくださるとのことなので、ぜひ楽しみにしていてください。

Yomotsu net

@yomotsu

小林 陽一

小林さんは株式会社つみきでインターフェース開発室 室長を務めていらっしゃる、まさにフロントエンドの世界で活躍されている開発者さんです。

three.js を中心に据えつつも、シェーダを利用した表現が非常に多彩かつ独創的で、ポートフォリオサイトに掲載されている作品群はインタラクティブ性も高くとてもかっこいいものが多いです。

今回のプラスワン講義では実際の現場目線で見た WebGL の活用方法など、より実践的な内容にフォーカスした three.js の講義をしてくださる予定です。実は小林さんは私の GLSL スクールの受講者のひとりでもあるのですが、現場での経験値で言えば私なんかよりもはるかに豊富な経験をお持ちですので、私も講義を聴講できるのが楽しみです。

yoichi kobayashi | www.tplh.net

紫 勇磨

紫 勇磨さんは murasaki の名前で活動されているフリーランスのビジュアルアーティスト。

three.js を利用して様々なジャンルで活動されている WebGL 界隈ではある意味で特異点的な存在だと個人的には思っています。

たとえば昨年は、なんと渋谷にある某巨大液晶に three.js を使ったデモが採用されるなど、そのアーティストとしての活動範囲の広さには私も驚かされるばかりです。

実は紫氏は過去の WebGL スクールの受講者のひとりでもあり、個人的には非常に感慨深いものがあります……

今回は、クリエイティブコーディングの勘所にフォーカスした「魅せる技術」について語ってくれる予定です。

@murasaki_0606

嶋田 有紀

嶋田さんは自作の WebGL ライブラリが商業案件に複数採用されるなど、WebGL に限らず CG の原理や技術全般に高い技術を持つエンジニアさんです。

現在も、その自作ライブラリが採用された案件や VR 系の技術を扱う企業とのお仕事をされているらしく、UE4 関連の勉強会の主催や、R&D Slack コミュニティを牽引するなど、WebGL だけでなく様々なジャンルで活躍されています。

今回のプラスワン講義では、商業案件に採用されるほどの自作ライブラリを作ってきた技術やノウハウも含めた、3D 開発等に役立つ様々なテクニックを講義してくださる予定です。

R&D Slack Wiki

webgl-learning R&D Slack Wiki

石井 翔

石井さんは八歳のときからプログラミングを始め、高校生のときには DirectX を叩いていたということですから、まあその才能のスケールには本当に驚かされます。

現在は Grimoire.js というウェブ向けの 3D フレームワークの開発を牽引するなど、やはりプログラミングというフィールドにおいて、いまも多彩な才能を発揮され続けています。

今回のプラスワン講義では、ウェブの未来を構想して開発が続けられている国産 WebGL 用フレームワーク Grimoire.js を利用して、無理なくウェブサイトに WebGL を導入する方法について講義してくださる予定です。

※追記

石井さんの講義では、WebVR の次の世代の API となる WebXR や、GamepadAPI、CSS3D まで、WebGL と一緒に使うと表現力や新しい可能性広がる API を紹介してくださる予定とのことです！

kyasbal-1994 (kyasbal)

Grimoire.js - WebGL framework for Web development -

開催時期・講義時間

今回の WebGL スクールは、2018 年の 4 月 21 日（土曜日）に第一回が開催となります。

ゴールデンウィーク期間中は、受講されるみなさんにとってもなにかとプライベートな用事が立て込む時期でもありますので、講義はお休みになります。

第二回講義は 5 月 12 日から再開し隔週土曜日で行っていきます。二週間ごとに講義が一回という感じで続き、全八回となります。

さらに、中盤の第四回からはプラスワン講義もスタートします。

こちらは WebGL に関するスキルをお持ちのプロフェッショナルのみなさんから、各々の得意とする分野や技術について、じっくりと話を聞くことができる課外授業的な位置づけです。

本講義のあと、約一時間程度のプラスワン講義という形で行います。

講義は、14 時から開始します。

本講義が、14:00 ～ 17:30 までを目安に。プラスワン講義が 17:30 ～ 18:30 までとなります。

途中、適宜休憩時間を設けつつ進めていきます。

開催場所

スクールの開催場所は、例年お世話になっています コワーキングスペース茅場町 Co-Edo となります。

コワーキングスペース茅場町 Co-Edo

〒104-0033 東京都中央区新川1-3-4 PAビル5F

こちらのコワーキングスペースは、茅場町駅から徒歩数分で、非常にアクセスもよく会場の設備もしっかりしています。（Wi-Fi や各席に備えられた電源等を無償で利用できます）

大きめのプロジェクターを利用して講義しますので、ハンズオン形式でコードを見ながら講義する際も、受講者からしっかり視認性高くプレゼンテーションできるとてもよい会場です。

アクセスについては、以下のページに非常にわかりやすくまとまっています。参考にしてみてください。

コワーキングスペース茅場町 Co-Edo: 交通・アクセス

受講料について

以下、受講料の一覧です。全て 内税表記 ですので、下記料金以外に余分な消費税等をいただくことはありません。

また、会場利用代金は受講料に含まれています ので、当日現地にて別途お支払いをいただくこともありませんのでご安心ください。

※すべて内税、会場利用料金などを含みます

受講料は原則として前払いでお願いしています。これは単に いたずらや、事前連絡のない突然のキャンセル等を避けるため です。

たとえば一時的に収入が不安定な時期であるなど、なにかしらの事情がある場合はご相談いただければできるかぎり対応しますので、お気軽にご相談ください。個人運営のスクールなので、そのあたりは受講者さんの都合に合わせてできる限り調整します。

また、スクールの受講が確定するのは、申し込みいただいてから、折り返しこちらからご連絡を差し上げたあとになります。※これもいたずらなどの防止のためです。

お申し込みフォームから、必要事項をご入力いただき、お申し込みください。こちらから、遅くとも２～３日以内にはご連絡差し上げますのでそこで 確認が取れ次第スクールの受講が確定 となります。

特に、折り返しのご連絡を差し上げる都合上、メールアドレスの間違いにはご注意ください。また、 3 日以上経過してもこちらからのご連絡が届かない場合は、どこかでフィルタに掛かってしまったなど間違いが起こっている可能性もありますので、そういった場合は遠慮せず確認のご連絡をいただければと思います。

繰り返しになりますが フォームからの申し込み送信時点では受講が確定した状態ではありません ので、ご注意いただければと思います。

募集人数

募集人数は 最大 40 名 です。

こちらは基本的に 完全先着順 となります。

お申し込みをいただいた日時をベースに、先着順で、順次参加が確定する形になります。

もし、支払いのことや講義内容のことで疑問や質問がある場合は、まずはお問い合わせください。一度申し込んだら最後、無理に取り立てるみたいなことは一切ありません。

できる限り多くの方に、有意義な体験を提供できたらという気持ちで運営しています。まずはお気軽にご相談いただければと思います。

お支払い方法とお申し込み

受講料のお支払いは、銀行振込でお願いしています。クレジットカード等での決済は個人で運営していることもありお受けするのが難しいのでご了承ください。

企業宛での請求書の発行や、領収証の発行等、必要に応じて対応できますのでお気軽にご相談ください。

お申し込みは、以下のフォームより、お願いします。

※ お申し込みフォームはこちらから

くれぐれも、入力間違いなどにご注意ください。

こちらから返信メールを送信させていただき、連絡が取れた方から受講が確定します。メールアドレスの記入にはご注意ください。

各自ご用意いただくもの

当スクールでは、機材の貸出等は一切行っておりません。

スクールの受講にあたり、ノートパソコン等の実行環境についてはご自身でご用意いただく必要がありますので、その点はご注意ください。

また、サンプル等の配布するリソースについては Google Chrome での実行を前提に作成していますので、あらかじめ Chrome をインストールしておいていただければ、よりスムーズに受講が可能です。

お問い合わせ

なにかご不明な点や、ご意見等がありましたら当サイトのお問合せページよりご連絡ください。できる限り迅速に返信させていただきます。