Web上でかっこいい3D表現ができるという事で始めた『Three.js(スリージェイエス)』。
『Three.js(スリージェイエス)』には最初から便利機能が山ほど含まれているのですが、
なかでも『GLSL(シェーダー)』を織り交ぜる事でより自由に表現ができるようになるということで、
まずは環境づくりからといろいろググり、まとめてみることにしました。
Three.jsでGLSL(シェーダー) 環境構築 webpackとbabel
『Three.js』は js とつくとおり、プログラミング言語『JavaScript(ジャバスクリプト)』で書かれています.
『JavaScript』は2015年以前と以降でガラッと書き方が増えた言語で。
という事で、環境構築することにしました。
新しい『JavaScript ES6』に対応するには、大きく3つのツール+アルファが必要になります。
- babel(バベル)・・新しい書き方を古い書き方に変換する
- webpack(ウェブパック)・・複数のファイルをまるっとまとめてくれる
- Node.js(ノードジェイエス)・・JavaScriptをミドルウェアで使える
- GitHub(ギットハブ)・・パッケージ管理システム
参考記事
参考記事
【Node.js入門】各OS別のインストール方法まとめ(Windows,Mac,Linux…)
【初心者向け】Gitのインストール方法をわかり易く解説(画面付き)
Three.jsでGLSL(シェーダー) 環境構築 git cloneしてnpm install
『GitHub』上に 『thee.js』で『GLSL(シェーダー)』を使うための最小構成ファイル群を保存しています。
こちらにアクセスして、
『Clone or downlaod』をクリックし、右側のコピーボタンを押します。
コマンドプロンプトで、任意のフォルダに移動した後に、下記コマンドを入力します。
git clone https://github.com/aokitashipro/threejs.git
『git clone』コマンドでGitHub上のファイル一式をダウンロードできます。
『threejs』フォルダが作成されるので、フォルダの中に移動して、
cd threejs
『npm install』と入力すれば、必要なファイルがまるっとインストールされます。
npm install
Three.jsでGLSL(シェーダー) 環境構築 フォルダ構成
『npm install』した後はこんなフォルダ構成になっています。
『srcフォルダ』の中に開発用ファイルが入っています。
『src/shader』フォルダの中に、2つの『(GLSL)シェーダー』ファイルを入れています。
- vertexShader.vert ・・頂点シェーダ
- fragmentShader.frag ・・フラグメントシェーダ
『glsl-loader』を含めているため、『GLSL』ファイルの分割もできます。
『GLSL』ファイルから『GLSL』ファイルを読み込む方法の抜粋。
#pragma glslify: test = require("test.glsl")
『distフォルダ』に公開用のファイルが生成されます。
他のファイルは以下。
- package.json ・・npm installでインストールされるファイル群
- webpack.config.js ・・ webpack設定ファイル
package.json と webpack.config.js はこちらの記事も参照ください。
参考記事
コマンドプロンプトで、『npm run dev』と入力する事で、
『distフォルダ』にファイルが生成されます。
index.html をダブルクリックして、こんな立方体が動いていればOKです。
Three.jsでGLSL(シェーダー) 環境構築 プラスアルファ
今回は最小構成にしているので、
TypeScriptやSassも対応希望となれば
下記記事も参考にしてみてください。
Webpackの細かい設定はこちらが参考になると思います。
【2019年版】webpack 4 個人的設定まとめ
このサイトのベースに、
- npm run dev・・開発用ビルド(ソースマップあり)
- npm run build・・本番ビルド
- npm run start・・開発用サーバー
- npm run watch・・監視
を設定しています。
他の参考サイト
最新版で学ぶwebpack 4入門 – Babel 7でES2019環境の構築（React, Vue, Three.js, jQueryのサンプル付き）
TypeScript + Webpack + Three.js + Shader
本格的な開発となれば、面白法人カヤックさんの記事が参考になると思います。
※Three.jsファイルが500KBサイズもあり、バンドルすると警告メッセージが表示されたので、CDNにしています。
Three.jsでGLSL(シェーダー) 環境構築 まとめ
『JavaScript』には大きく2つの書き方があり、
新しい書き方となると環境構築がちょっと大変で、
しかも『GLSL(シェーダー)』読み込みもさせたいということで、
全くの初心者にはちょっとハードルが高いかも？と思いつつ、
一度作ってしまえば、後が楽だなとも思います。
『Three.js』関係ではこんな記事も読まれています。
1. 3Dプログラムの基本を【Three.js】でまとめてみた【初心者向け】2. 【Three.js】で『GLSL(シェーダー)』を使う環境構築の仕方 【初心者向け】
3. 【WebGL】入門 わかりやすく【図解】してみた
4. 【Three.js】用語や関数のまとめ【3Dプログラム】※随時更新
アオキのツイッターアカウント。
この記事へのコメントはありません。