【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
そんなわけで入門編はこれで終わり。
