【three.jsのお勉強 #3】WebGL入門者の会に行ってきた
three.jsのお勉強シリーズ
- 入門してみる
- 一旦2次元に立ち返る
- WebGL入門者の会に行ってきた ← 今日はこれ
勉強会に行きましたよ
引き続きWebGLの勉強続けていますが今回は、とても今の僕にはありがたい勉強会を見つけたのでそれに行ってきての感想を書きたいと思いますー。
がっつり全部まとめてるわけじゃないのでご容赦ください。
ちなみにこれでした。
LT紹介
とりあえず感想を言いたいなって思ったもののみ紹介します。
数学(道具)を手に入れよう
@edo_m18さんによる発表。
3Dコンテンツを作るにあたって数学は必ず必要なものになります。その数学を、「こういう表現をしたいときはこんな風に使う」と言ったように逆引きで解説していたのがとてもわかりやすかったです。
あの説明の仕方をされると普通に数学を勉強して実装に入るよりもずっと楽しくできそう。
doxasさん WebGLがすきです2016
wgld.orgやWebGL総本山を運営している@h_doxasさんによる発表。
資料は発見できませんでした。
技術的な話はなく、doxasさんのこれまでの歴史的な話でした。
エンジニア歴が1年ちょっととか初めてプログラミングしたのは20代後半になってからとか驚きのエピソードが聞けて面白かったです。
好きだからやれたっていうマインドの部分のお話は僕みたいな人間にはとても勇気をもらえるものでした。聞けてよかった。
special objects with effects in three.js
PixelGridのエンジニアであり、僕が勝手にとてもとても尊敬している@yomotsuさんの発表です。
これも資料発見できず無念…。
普通にオブジェクトを配置しただけでは難しい処理をWebGLで表現するときの工夫について話していました。
とても実践的な内容で、ほぉ〜〜ってなりながら見てました。yomotsuさんは実際にオンラインゲームをする中で見つけた気になるグラフィックを自分で考えて工夫して実装しているそうで、そんな試行錯誤が感じられる発表でした。
LTいろいろ
多くの方がLTをされていたのですが、WebGL入門者の会というテーマはなんだったのかという内容のLTばかりでわりと興奮してました。
僕も追いついていきたい。
まとめ
今回は勉強会に参加するだけではなく、懇親会でしっかり懇親しようっていう目標持って参加した(今更)のですが、多くのエンジニアの方とお話ができてモチベーションにつながりました。やっぱりはじめからこうするべきだったんだ…。
なかでも、初めてyomotsuさんとお話することができて、僕が今つまづいてる部分についての相談に対して優しくアドバイスしていただけたのがとても嬉しかった。そして今やるべきことが見えたのでとても良い１日になりましたとさ。
こんな感じです。
引き続きお勉強していきます。
スプラローラークリーナーを手に入れた
ついに手に入れた
Twitterで誰かが投稿しているのを見てから欲しくて欲しくてたまらなくてゲーセンを巡ってみたら速攻で見つかったけれどUFOキャッチャーが決して得意ではない僕には手の届かない高嶺の花だったこいつ、スプラローラークリーナー。
たまたま僕の周りに元ゲーセン店員のプロがいたのでお願いしたら取ってくれた。神に感謝。
開封の儀
美しい。心が揺さぶられる。
紫のコロコロ部分いいなあってなってたけどこれ決して粘着テープが紫なわけではなくて紫の紙で覆ってただけだった。
だからコロコロ部分は普通のコロコロと同じように白かった。
使い勝手
普通。普通のコロコロ。
市販の取り替え用コロコロが使えるので掃除の度にイカになった気持ちが味わえて幸せ。
実は僕は少し前からうさぎを飼っているのでコロコロの頻度が異常に増えた。
かわいいだろ。
なのでそんな僕としてはコロコロの満足度を高めることはかなりQoLに影響を与えることになる。
つまり今回の新規アイテムゲットの効果は非常に高いです。素晴らしいです。
ちなみに
僕のNintendoIDはnabeliwoです。ヒッセンを愛しています。
S30あたりを延々とうろうろしすぎて消耗し始めてる残念なイカという現状ですが今必死にS+への道を邁進してるので誰か一緒にイカやってください。
今日はこんな感じです。
【three.jsのお勉強 #2】一旦2次元に立ち返る
three.jsのお勉強シリーズ
- 入門してみる
- 一旦2次元に立ち返る ← 今日はこれ
- WebGL入門者の会に行ってきた
やったこと
WebGLの勉強ということで3次元の考え方だったり計算だったりを学んでいるのですが、そういえば前に2次元のベクトルとかそこらへんの話を勉強して作ってみたりしたけれど全然覚えてねえやってことに気付いてしまったのでちょっとおさらいしてみました。
まあ3次元の計算をするために2次元の知識が必要かと言われるといらない気もするので決して道をまっすぐ進む中での項目というわけではないので、ただただ振り返りたいなっていう気持ちから回り道しております。
使った教材はこれ。
- 作者: Steve Fulton,Jeff Fulton,安藤慶一
- 出版社/メーカー: オライリージャパン
- 発売日: 2012/01/21
- メディア: 大型本
- 購入: 1人 クリック: 27回
- この商品を含むブログ (6件) を見る
canvasについての本だしそして若干古いのですが、これの5章の「数学と物理学とアニメーション」ってとこがとても勉強になります。
なので今回はそこで取り扱われているサンプルを写経しつつ覚えておきたいとこをメモとして残していきたいと思います。
※今回書くことは全てx軸y軸のみの2次元上での計算の話です。WebGL勉強シリーズの一つなのでWebGLカテゴリーにしちゃったけれど3次元全然関係ないです。そしてちなみに僕は学生から卒業した瞬間勉強してきた数学の知識が全て抜け落ちたためここに書くことはとても初歩的な話になります。
覚えておきたいとこ
2地点間の直線距離
ピタゴラスの定理 を使うことで2地点間の直線距離を測ることができます。
公式は A² + B² = C² です。
x軸y軸の座標に置き換えると、
2地点間の距離は、(第2の地点のx値から第1の地点のx値を引いた差の2乗)と(第2の地点のy値から第1の地点のy値を引いた差の2乗)を合算した値の平方根に等しい。
ってことになります。
これはさすがに僕も覚えていた。けれどよく使いそうでぱっと出てこなそうなのでしっかり記憶しておきたい。
JavaScriptだと2乗は x ** 2 で求められるし、平方根は Math.sqrt(x) で求められる。
角度の単位
角度の単位は「度」ではなく ラジアン を使います。
ただ、数値自体は「度」を使った方がわかりやすいため、角度を扱う場合は毎回「度」からラジアンに変換する必要があります。
公式は ラジアン = 度 * Math.PI / 180 です。
三角法
ベクトル移動の処理を書く場合に三角法が必要になります。
その前にまず、ベクトルの定義は以下のようになります。
大きさと向きを有する量
2地点間の距離でのオブジェクトの移動は難しい考え方をすることなく書くことができるのですが、開始地点だけがあって終了地点がない場合のオブジェクトの移動はちょっとだけ難しくなります。その場合は、ベクトルを使って処理します。
そしてベクトルに沿った動きを計算する際には、コサインとサインを使うことができます。
簡単に言うと コサインはxに関連 し、 サインはyに関連 するって考えれば良いようです。
つまり、1フレームあたりに移動する距離(x軸)は以下のようにわりだすことができます。
Math.cos(radians) * speed
radiansはベクトルの向きで、speedはベクトルの大きさになります。
y軸の移動距離は、Math.cos()をMath.sin()に変更することでわりだせます。
壁との衝突
壁(平面)にぶつかったときは、 入射角と反射角は等しい という反射角の法則を使って、ベクトルの向き(角度)を変更してやる必要があります。
x軸の壁にぶつかった場合は、現在のベクトルの角度を180から引き 、y軸の壁にぶつかった場合は 現在のベクトルの角度を360から引く ことで新たなベクトルの角度をわりだすことができます。
壁との衝突判定自体は簡単なので省きます。
オブジェクト同士の衝突
弾性衝突 、つまり運動量保存の法則を実現するようにオブジェクト同士の衝突後のベクトルの変化の処理の書き方。
衝突判定
まずはそもそもオブジェクト同士が衝突するかどうかを求めないといけないです。
2つのオブジェクトの次のフレームの地点同士を結ぶ直線距離を ピタゴラスの定理 を使って求めます。2つのオブジェクトではなく、2つのオブジェクトの次のフレームの地点ってのが大事です。ぶつかっているかではなく次のフレームでぶつかるかどうかを判定しないとくっついた状態もしくは食い込んだ状態になってしまうからです。
直線距離を求めることができたら、その距離と2つのオブジェクトの半径の和を比較して、直線距離の方が短いもしくは等しい場合は衝突することがわかるので、2つのオブジェクトのベクトルを変更してあげる必要があります。
ベクトルの変更
ここで出てきた公式が一応「公式だからこうなる」ってことでわかったけれど実際の流れが見えていないです…。
ベクトルの変更に必要な値は、2つのオブジェクトの質量と衝突時の速度と角度です。これらの値を使って衝突の角度を求めて2つのオブジェクトのベクトルを回転させて速度を更新します。
衝突の角度を求めるには Math.atan2() を使います。中身がいまいちわかってないですが、2地点の座標を引数として渡すことで衝突の角度を出せます。
とりあえずタンジェントの逆関数であるということはわかった。
オブジェクトの現在の角度から衝突の角度を引いて、それのコサイン(x軸の場合)かサイン(y軸の場合)に速度をかけたものが新たな角度になります。
そして、運動量保存の法則に基づいて新たな速度をわりだすのですが、ここの公式がちょっと難しいです。
velocity1 = ((mass1 - mass2) * velocity1 + 2*mass2 * velocity2) / (mass1 + mass2) velocity2 = ((mass2 - mass1) * velocity2 + 2*mass1 * velocity1) / (mass1 + mass2)
1と2の数字はそれぞれのオブジェクトを示しています。massは質量、velocityはベクトルです。
そして最終的な速度が求まったところで衝突の角度が維持されるように回転し直すっていうところでまた計算が出てきたのですがここらへんちんぷんかんぷんになりました。
一応書き方としては知ったので、こうすれば衝突後の値の変更はできるってのはわかったのですが理解からは程遠い…。数学をしっかり勉強しなきゃいけないっぽい…。誰か助けて…。
円運動
一定の円に沿って均一的に移動するオブジェクトの位置は以下の方程式を使って求めることができます。
x = 円の半径 * コサイン(角度) y = 円の半径 * サイン(角度)
これを使いつつ、フレームごとに角度を微妙に変えていけば同じところを回転し続けるオブジェクトが作れる。
サンプルつくってみました
最後に、勉強したことを応用して簡単なサンプルを書いてみました。
書いてみたと言っても、1年半くらい前に作ったものをソースコード見直してもう一度書いてみただけのですが…。
canvas領域をクリックするとランダムなサイズと色と角度をもったボールが生成されます。
下のボタンを押すとボールに重力と摩擦と弾性が生じます。
まあそれだけの簡単なサンプルなのですが、ここまでやったら大体の2Dの基礎はおっけーな気がしました。
おわりに
今回は2D上でオブジェクトを動かしました。
オライリーのサンプルはなかなか出来がよくって順番通りこなしていけば基礎が身につくのでおすすめです。
2Dで学んだことは3Dでも活かせそうな気配がびんびんだったのでここで身につけた基礎をひっさげてこれ以降はまたthree.jsの勉強に戻っていきたいと思います。
今回サンプルをやってみてのソースコードはGitHubにあがっております。
threejs-suburi/2d_canvas at master · nabeliwo-suburi/threejs-suburi
『フロントエンドエンジニアのための現在とこれからの必須知識』読んでみた
『フロントエンドエンジニアのための現在とこれからの必須知識』を読んでみたので感想をぱぱーっと。
フロントエンド界隈の著名人たちの共著だったので興味をあって読んだ感じです。
- 作者: 斉藤祐也,水野隼登,谷拓樹,菅原のびすけ,林優一,古沢宏太
- 出版社/メーカー: マイナビ出版
- 発売日: 2016/01/28
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
フロントエンドで第一線でやってる人向けではない
対象読者としては、フロントエンド初学者だったり現在バックエンドやってる人でフロントの今を全体的にさらってみたい的な人だったりかと思います。
今現在フロントエンドエンジニアとしてばりばりやってる人に対してはおさらい的な感じになるかと思います。
ただ個人的には Service Worker の話だったり HTTP/2 の話だったりがいまいち雰囲気しかわかってなかったものが知識を深めることができたので良かったです。
あとは「パフォーマンス改善」のトピックも勉強になることが多かった。
初学者の方やバックエンドの方でフロントに興味ある方は実際にいろいろいじる前に一読してみることをおすすめします。
【three.jsのお勉強 #1】入門してみる
three.js始めました
前々からいろいろ触って遊んでたりとかはしていたんだけれど、今回本格的に勉強しようと思いましてまた1から勉強しております。 その勉強の過程を乗せておこうかなと思っております。 今日からGWで僕は10連休なわけです。後半は旅行に行くので前半だけですが全力で学んでいく姿勢。
three.jsのお勉強シリーズ
- 入門してみる ← 今日はこれ
- 一旦2次元に立ち返る
- WebGL入門者の会に行ってきた
とりあえず入門から
そんなわけでまずは入門編ということで普段からお世話になっているCodeGridを読みつつサンプルコード写経しつつポイントをおさえていきます。
CodeGridでの入門
僕が勝手にとても尊敬している @yomotsu さんによるWebGLの基礎からthree.jsの使い方までの記事。
生のWebGLはGLSL(OpenGL Shading Language)という正直難しい言語で扱わなければいけなくて、その記述の多さをサンプルコードで示しつつ、それを解決してくれるthree.jsの紹介と使い方までを一通り教えてくれている。
これで概念的な部分とthree.jsの基本はおさえられた。
GLSL (OpenGL Shading Language) はGLslangとしても知られ、C言語をベースとした高レベルシェーディング言語である。これはアセンブリ言語やハードウェアに依存した言語を使わないで、開発者がグラフィックスパイプラインを直接制御できるようにOpenGL ARB (Architecture Review Board) で策定された。
Wikipedia 様より
高レベルシェーディング言語…
ちなみにCodeGridのトップページはthree.jsで作ったロゴが表示されていてとてもクールな感じです。
ドットインストールでの入門
最初の触りとしてみんな大好きドットインストールです。
旧版と新版があって、これはthree.jsのリビジョンが違うのと作ってるものも違います。当然だけど新版のがクオリティ高かった。
CodeGridの方で基本的な概念は理解したけれどもう1パターン入門くらいのサンプルに触れたかったのでやってみた感じ。
やっぱりドットインストールは簡単に一通りの使い方をさらえるので良いですとても良い。
注意事項
今回僕が使ってみた2つのサービスはどちらも有料で、無料の範囲だと一部コンテンツしか見られないものになってます。
けれどもお金を払う価値が十分あるコンテンツを提供しているサービスなので僕は月額課金してます。良いサービスにはお金を払っていきたい。
勉強中のソースコード
GitHubで全部あげています。
現時点の、CodeGridとドットインストールをやっただけの素振り用レポジトリをタグつけて置いてます。
Release 1.0.0 · nabeliwo-suburi/threejs-suburi
そんなわけで入門編はこれで終わり。
はてぶはじめました
ごあいさつ
真夜中秘密工作員っていうブログをやっていたんだけれど去年飽きてしまって。 なので新しいポートフォリオとしての意味も含めたブログを今年の頭くらいから作り始めていたんだけれど、かっこいいの作ろうってこだわりまくってたら一向に完成する気配が見えなくて…。 でもブログ書きたかったからブログの部分ははてぶに分離してしまうことにした。
ポートフォリオの方は今後もこだわりつつ作っていってそのうち日の目を見ることになってくれれば嬉しいな。
これを見ろと言いたい
ロゴがとてもかっこよく仕上がってるでしょう。そうでしょう。これは @3_9 っていう後輩のデザイナーが作ってくれた。素晴らしい。 ちなみにPCじゃなきゃロゴ見られないはず。
そんなわけで
はてぶ高頻度で書いていくと思います。技術系の話だったりゲームとかアニメとかの話だったりたまにポエムだったりを綴っていきまする。
よろしくどうぞ。
