three.js で始めて WebGL スクラッチ実装の基本を押さえる！ フロントエンドエンジニアのための本格 WebGL 基礎スクール

2017 年 4 月開講

WebGL の最初のバージョンが正式勧告されてから、早いもので 6 年になりました。

意外にも、その登場からはそれなりに時を経ている WebGL は、近年ではリッチなグラフィックスをブラウザ上で表現するための技術のひとつとして確実に浸透してきています。

フロントエンドの著名なアワード等が存在感を放つ海外だけでなく、最近は日本でも、WebGL を利用した美しく楽しいウェブサイトを目にする機会がより一層増えました。

本スクールは、そんな WebGL を基礎からしっかりと習得することを目指す、国内唯一の WebGL 専門カリキュラムを組んだスクールです。フロントエンドに関連する技術のなかでも、とりわけ難易度が高い傾向のある WebGL ですが、今後はその必要性やスキルに対する需要がどんどん高まっていくことはもはや間違いないでしょう。

本スクールの講義を通して WebGL や 3D プログラミングの基礎を磨き、受講者の方々がより豊かになれることを目指して、今年も WebGL スクールを開催することに致しました。WebGL に興味があるという方や、3D の基礎やシェーダの基礎を身に着けたいという方など、WebGL に興味をお持ちでしたらぜひ一度下記募集要項をご覧いただき、受講をご検討いただければと思います。

WebGL スクールの本講義カリキュラム

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

• 杉本 雅広（本講義を担当）
• @h_doxas
• WebGL 開発支援サイト wgld.org 運営
• WebGL スクールや勉強会の主催

本講義では、WebGL を含むいわゆる 3D API の基本的な考え方や作法を始めとした、基本から応用までを扱います。

「WebGL ってそもそも何？」

「three.js と WebGL の関係って？」

「WebGL にとってのシェーダって何？」

「自分で 3D 作品を作るなんて本当にできるの？」

WebGL というキーワードは聞いたことがあっても、実際にそれがどのように画面に美しい映像を描き出しているのか、そのプロセスを理解している人はフロントエンド界隈だとかなり少ないと思います。本講義では WebGL 特有の表現やテクニックについてだけでなく、3D プログラミング全般に有用な概念までを広く取り扱います。

また、初期の段階では、いきなり WebGL でフルスクラッチの実装をつくるのではなく three.js を用いてまずは 気軽に 3D に慣れるところからスタート します。3D の開発は、はじめはとても難しく感じる部分が多いかもしれませんが、しっかりと初心者の方もサポートしていきますので安心してください。

なお、最後まで three.js を使っていくというスタイルのスクールではありませんので、その点はご注意ください。three.js はあくまでも導入のために利用し、中盤以降は WebGL をピュアな実装に近い形で利用します。そうすることで、WebGL の本来の API の使い方やポイント、また 3D プログラミング全般に利用できる、幅広い 3D 開発の知識を得ることが本スクールの目指すべき到達点となります。

後半にはシェーダを使ったポストエフェクトの実装など、高度な内容にもチャレンジします。基本から応用まで、しっかりと無理なく身につけていただけるように工夫した内容となっています。

今回も豪華講師陣によるプラスワン講義を開催！

今期も、昨年までと同様にプラスワン講義を行います。

これは本講義では得られないような、よりリアルな現場の開発目線での WebGL との向き合い方や、エフェクト表現のコツなどを外部講師を招いて講義してもらうというもの。

本講義はまさに「授業」という感じですが、プラスワン講義ではもう少し軽い雰囲気で、より広い様々な視点から WebGL と付き合っていく方法について学ぶことができます。

今回のプラスワン講義の特別講師陣を簡単に紹介します。

小山田 晃浩

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML／CSS設計、及び実装。また、SVG、Canvas、WebGLなどのWebグラフィック技術の扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。

Yomotsu net

@yomotsu

プラスワン講義タイトル

three.js で 3D モデルデータを取り込んでみよう

諸星 一行

目黒で働くイベント企画屋エンジニア。xRealityと嫁ちゃんが好き。日本バーチャルリアリティ学会認定VR技術者。VR開発者向けコミュニティVR Tech Tokyo運営責任者。Web屋出身なのでWebVRを積極的に推している。

@ikkou

プラスワン講義タイトル

ブラウザでここまで出来る！A-FrameではじめるWebVR

東倉 司

SHIFTBRAIN.inc所属のインタラクティブ・デザイナー。主にフロントエンドを担当しており、アニメーションを得意とする。Awwwardsの審査員もつとめる。

SHIFTBRAIN Inc.

@oneslocus

プラスワン講義タイトル

WebGL サイトにおけるエフェクトとコンポーネント化について

池田 亮

フリーランスのフロントエンドエンジニア。WebGL等を使ったインタラクティブ性の高い実装が得意。富山在住。

ikeryou.jp

@ikeryou

プラスワン講義タイトル

WebGLを使った演出表現の制作工程

荒井 祐一郎

Front-end / Creative Developer @ homunculus inc.

主にWebGLを使ったプロモーション / コーポレートサイトを作っています。最近、Unityも始めました。

homunculus Inc. | 株式会社ホムンクルス

Yuichiroh Arai

@yuichiroharaiJP

プラスワン講義タイトル

WebGLとの楽しい付き合い方

フロントエンドを牽引する講師たち

上記五名の特別講師陣が今回の WebGL スクールのプラスワン講義を担当してくれます。

yomotsu こと 小山田さん は、three.js を日本でもいち早く利用していた一人。かなりいろいろなところで講演活動なども行っているので、講演をご覧になったことがある方もいらっしゃるかもしれませんね。

今回は、より具体的な three.js の活用方法として、モデルデータの読み込みやそれを利用した描画テクニックなどについてお話してくださる予定です。

ikkou さん は、実務でフロントエンド実装を行いながらも、最近では VR 関連のイベントを企画運営するなど精力的に活動されていらっしゃいます。

実質的に WebGL を利用することが前提となる場合が多い WebVR の実装についても詳しく、今回のプラスワン講義でもそのあたりを中心に VR 関連技術に広く言及してくださる予定です。また、受講者された方たちには WebVR の体験会などもやれたらいいですね！ とご提案いただいてますので、ikkou さんの担当講義の日には WebVR コンテンツを実際に体験してもらうこともできるようになる予定です。

東倉さん は、SHIFTBRAIN.Inc で活躍されているフロントエンドエンジニアで、実際に WebGL を利用した案件を複数経験されています。

実は東倉さんは、WebGL スクールの 第一期生さん なんですが、スクールで得た知識をムダにすること無く、その後の案件へうまく利用されており私も何度も驚かされました。今回はエフェクトの使い方や、コンポーネント化することでより運用しやすくする工夫などをお話してくれる予定です。

池田さん は WebGL 案件も自ら手掛けるフリーランスのフロントエンドエンジニアさんです。

以前、イベントで池田さんが登壇者として話していらっしゃるところを聴講者として拝見したことがあるんですが、そのときに画面に映し出されていた自家製の WebGL エフェクトコンポーザのレベルの高さに、驚かされたのを覚えています。

今回のプラスワン講義では、実際に案件で WebGL を扱っていくうえで、チームメンバーとどのようにプロジェクトを進めていくのかなど、かなり現場の経験に則した内容をお話してくださる予定です。

荒井さん はホムンクルス所属の開発者で、そのレベルの高いシェーダ実装などは海外でも頻繁に話題に上ります。

先日公開されたばかりの流体のデモ（Fluid - Experiments - Yuichiroh Arai）は、相変わらずのハイセンス作品に仕上がっています。GPGPU も使いこなすその手腕には私も頭が上がりません。

荒井さんには以前、GLSL シェーダスクールでも講義をお願いしたことがありましたが、今回は WebGL を楽しむ！ という単純そうで難しそう（？）なテーマについてお話してくれます。たくさんの WebGL 事例を手掛けてきた荒井さんの見る「楽しい WebGL の世界」は、私も一個人としてとても気になります……

と、かなり豪華なメンバーが揃った今期の WebGL スクール。

私、杉本 雅広も含めた六名で、初心者だけでなく中級者以上を目指す方々にとっても有益となるテーマを取り入れて進めていきます。いろいろな講師から、様々な目線で語られる WebGL の話をぜひ楽しみにしていてください。

スクール全八回スケジュール

本スクールは、4 月 22 日（土曜日）に第一回が開催となります。

講義は隔週土曜日で、二週間ごとに講義が一回という感じになりますが、途中ゴールデンウィーク期間中は講義はお休みとなります。

上記は、本講義の内容です。

プラスワン講義は、各回の本講義終了後に行います。

本講義のあと、各々の回ごとに講師をバトンタッチしながら行う感じですね。

タイムスケジュールは、本講義のあと、プラスワン講義を行うスタイル。

適宜、休憩時間等を設けて進める形となります。

開催場所

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

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

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

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

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

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

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

受講料について

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

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

※すべて内税、会場利用料金込みです

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

たとえば一時的に収入が不安定な時期であるなど、なにかしらの事情がある場合はご相談いただければできるかぎり対応しますので、お気軽にご相談ください。

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

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

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

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

募集人数

今回のスクールでは、募集人数は 最大 40 名まで です。

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

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

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

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

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

受講料のお支払いは、銀行振込でお願いしています。クレジットカード等での決済はお受けできませんのでご了承ください。

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

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

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

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

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

各自ご用意いただくもの

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

スクールの受講にあたり、Windows か Mac のノートパソコンをご自身でご用意いただく必要がありますので、その点はご注意ください。

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

お問い合わせ

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