WebGLの入門者向けハンズオンを行ったのでまとめてみる


今回、縁があって[WebGLの入門者向けハンズオン](http://connpass.com/event/25563/)を行いました。
今までハンズオンという形式でやったことが少なく、今回は2〜3時間という長い時間、ひとりで話をする予定だったので準備が大変でした( ;´Д`)

が、アンケート結果を見るにほとんどの方に満足いただけたようでよかったです。

↓当日の状況はこんな感じ
![当日の状況](https://qiita-image-store.s3.amazonaws.com/0/5616/e478c1b2-501f-744d-3442-84899a79712e.jpeg "当日の状況")

![scene.jpg](https://qiita-image-store.s3.amazonaws.com/0/5616/7726fdff-7853-566f-2992-fcc6f8f9c19f.jpeg "scene.jpg")



## コンセプト

今回のハンズオンのコンセプトは

**「事前に準備したデモコンテンツの制作を通して、Three.jsの制作手法に慣れてもらう」**


という内容で構成しました。

事前に準備したのはこんな感じのものです↓
![デモ映像](https://qiita-image-store.s3.amazonaws.com/0/5616/93e443e5-f2f5-d799-4268-8617c530d96a.jpeg "デモ映像")



Three.jsのお作法と、プリミティブな形状の設置、ライティング、そしてテクスチャとモデルの読み込み、という3Dコンテンツを構成する大事な要素に絞ってそれらの制作手法に触れてもらうことを目標にしました。
（[ちなみに実際に公開したデモはこちら](http://edom18.github.io/WebGL-HandsOn-for-beginner/)）


## 工夫した点

ハンズオンを開催する前に、他のハンズオンはどう進めているのかを事前にちょっと調べてみて、その中でよさそうなものをパクりましたｗ

具体的に言うと、あらかじめやることをSTEPごとにまとめ、その[進捗状況表](https://docs.google.com/spreadsheets/d/1LLqRVPChDuy5Q_U2XhiSxvaKfl7pigVDiRMqlMPMtpc/edit?pref=2&pli=1#gid=0)をGoogleのSpreadsheetに記述しておきます。
そしてその進捗状態を参加者の方に実際に入れてもらうことで遅れている人に合わせて進行することができました。

また、事前に用意した[STEPごとの完了状態が確認できるリスト](http://edom18.github.io/WebGL-HandsOn-for-beginner/list.html)も用意しておきました。


## スライド

ハンズオンを始める前に、事前知識として @yomotsu 先生と WebGLやってる人なら知らない人はいない @doxas 師匠にお願いをして、WebGLとはなにか、Three.jsとはなにか、という内容で15分くらいの軽いトークをしてもらいました。

そのときのスライドはこちら↓

doxasさんによる「 **WebGLってそもそもなんなの？ ささっと押さえる基本の基本** 」
[![WebGLってそもそもなんなの！？　ささっと押さえる基本の基本](https://qiita-image-store.s3.amazonaws.com/0/5616/f955d8fa-55d8-c287-8a68-6478886af0fb.jpeg "WebGLってそもそもなんなの！？　ささっと押さえる基本の基本")](https://doxas.org/slide/webglhands201603/)
[https://doxas.org/slide/webglhands201603/](https://doxas.org/slide/webglhands201603/)


yomotsuさんによる「 **Understanding three.js** 」
[![Understanding three.js](https://qiita-image-store.s3.amazonaws.com/0/5616/26f72ce6-f675-a6b4-3ac7-f7c1d15e55f9.png "Understanding three.js")](https://speakerdeck.com/yomotsu/understanding-three-dot-js-r75)
[https://speakerdeck.com/yomotsu/understanding-three-dot-js-r75](https://speakerdeck.com/yomotsu/understanding-three-dot-js-r75)



また、自分の方でも事前に準備していたスライドがあるのでおまけとして載せておきます↓
[![WebGL入門ハンズオン](https://qiita-image-store.s3.amazonaws.com/0/5616/368bec0c-d8e4-3f20-f01d-80f7b9f254ad.jpeg "WebGL入門ハンズオン")](http://www.slideshare.net/hirumakazuya/webgl-60091344)
[http://www.slideshare.net/hirumakazuya/webgl-60091344](http://www.slideshare.net/hirumakazuya/webgl-60091344)



## ハンズオンを終えてみて

メンバーの中にワークショップやスクールの経験者がいてくれたおかげで、色々事故りそうだったものを無事に終えることができました。感謝！

そして全体的な進行の感想としては、思いもしなかったところで躓く人がいたり、逆に全然問題なくやっていって全然違うことをやってる人もいたりして、学校の先生って大変なんだなーというのを痛感しました。

そしてもうひとつ思ったのは、最後にやったディスカッションとコンテンツ制作はとても楽しかったなーということ。

自分が解説する形で進行するものとは別に、チームごとに分かれてディスカッションしてもらい、デモに手を入れる形でDOMのイベントと連携してなにか面白いことをやってくれ、とオーダーしてみなさんにやってもらいました。
例えばボタンを押したらデモのテーブルが回ったり、みたいなのですね。

中にはすでにWebGLでコンテンツを作っている方もいて、そのデモを見せてもらったりしました。
（今回参加したのは、作ってみたものの全体的にふわっとした認識だったからじっくりやってみたかったとのこと）

やはりなにをするにしても、読むだけ・見るだけではなくて、実際に自分の頭で考えて手を動かすことがいい学習になるし、楽しめるんだなーと思いました。

余談ですが、本当にブログになにかを書いて発信することはとても大事なことだと思っています。
自分の理解が深まるし、他人には感謝されるし、間違ってたら指摘してくれるし、そして情報を発信していくと不思議と情報が集まってくる。もういいことづくめです。


閑話休題。


これだけ長い時間かけてのハンズオンは初体験だったのでだいぶ緊張していましたが、終わったあとは意外と手応えがありました。
プログラムを書いていると（特に3Dや数学的な部分）、さらっと出てくるところが「？？」となったりして手が止まることが多いんですよね。
理解しちゃえばなんてことないことでも、それまでが大変。
自分自身で学んでいる仮定で、何度、隣に詳しい人がいて聞けたらいいと思ったか。

なので、そうしたことをすぐに確認できるという意味でもハンズオンはとてもよかったのかなと思っています。
そして次回は、WebVRについて似たようなことやりたいね、という話をしているので、もし実現したらまた告知したいと思います( *'-')



## 今回のハンズオンに協力してくれたメンバー

![doxasさん](https://qiita-image-store.s3.amazonaws.com/0/5616/9cb4f734-5c68-a145-fa5f-a7f7da159097.png "doxasさん") doxasさん（[wgld.org](https://wgld.org/)の中の人）

![yomotsuさん](https://qiita-image-store.s3.amazonaws.com/0/5616/41372f87-31f5-39b2-63e0-e9f2aac61e64.png "yomotsuさん") yomotsuさん（[ヨモツネット](http://yomotsu.net/)の中の人）

![mattari_pandaさん](https://qiita-image-store.s3.amazonaws.com/0/5616/f555fabd-74b7-fa54-cb21-4c331a70908a.png "mattari_pandaさん") mattari_pandaさん

![hitoyamさん](https://qiita-image-store.s3.amazonaws.com/0/5616/bc0b929d-89bb-8dab-fc01-a1745a974c5b.png "hitoyamさん") hitoyamさん

![木下さん](https://qiita-image-store.s3.amazonaws.com/0/5616/a17b8c0f-50bb-95e5-7c07-58573c95b357.png "木下さん") 木下さん（[teratail](https://teratail.com/)の中の人）

![のびすけさん](https://qiita-image-store.s3.amazonaws.com/0/5616/40d3413c-9e41-003b-c9c8-2948d4a1449f.png "のびすけさん") のびすけさん

![わたくし](https://qiita-image-store.s3.amazonaws.com/0/5616/445333f5-5e71-437c-a365-9645be847a64.png "わたくし") えど


そして最後に記念撮影ｗ
![P3270116.jpg](https://qiita-image-store.s3.amazonaws.com/0/5616/cc792e6c-f6e9-11ac-b7cb-0a33d5cc18c5.jpeg "P3270116.jpg")