CG関連

【Three.js】で【GLSL(シェーダー)】を使う環境構築の仕方 【初心者向け】

Web上でかっこいい3D表現ができるという事で始めた『Three.js(スリージェイエス)』。

『Three.js(スリージェイエス)』には最初から便利機能が山ほど含まれているのですが、

なかでも『GLSL(シェーダー)』を織り交ぜる事でより自由に表現ができるようになるということで、

まずは環境づくりからといろいろググり、まとめてみることにしました。

Sponsored link

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のインストール方法をわかり易く解説(画面付き)

アオキ
今回は、『Node.js』と『GitHub』がインストールされている前提で進めます。

Three.jsでGLSL(シェーダー) 環境構築 git cloneしてnpm install

『GitHub』上に 『thee.js』で『GLSL(シェーダー)』を使うための最小構成ファイル群を保存しています。

こちらにアクセスして、

GitHub Threejs環境構築

『Clone or downlaod』をクリックし、右側のコピーボタンを押します。

コマンドプロンプトで、任意のフォルダに移動した後に、下記コマンドを入力します。

『git clone』コマンドでGitHub上のファイル一式をダウンロードできます。

『threejs』フォルダが入るのでフォルダの中に移動して、

『npm install』と入力すれば、必要なファイルがまるっとインストールされます。


Sponsored link

Three.jsでGLSL(シェーダー) 環境構築 フォルダ構成

『npm install』した後はこんなフォルダ構成になっています。

『srcフォルダ』の中に開発用ファイルが入っています。

『src/shader』フォルダの中に、2つの『(GLSL)シェーダー』ファイルを入れています。

  • vertexShader.vert ・・頂点シェーダ
  • fragmentShader.frag ・・フラグメントシェーダ

『distフォルダ』に公開用のファイルが生成されます。

他のファイルは以下。

  • package.json ・・npm installでインストールされるファイル群
  • webpack.config.js ・・ webpack設定ファイル

package.json と webpack.config.js はこちらの記事も参照ください。

参考記事

コマンドプロンプトで、『npm run build』と入力する事で、

『distフォルダ』にファイルが生成されます。

アオキ
試しにdistフォルダの中の bundle.jsを削除してから 『npm run build』 とうつと、生成されるのがわかると思います。

この辺りの設定は『webpack.config.js』 で変えられます。

『npm run build』 して bundle.js ファイルが生成されている状態で、

index.html をダブルクリックして、こんな立方体が動いていればOKです。

アオキ
さぁもりもり開発していくべ。

Three.jsでGLSL(シェーダー) 環境構築 プラスアルファ

今回は最小構成にしているので、
ホットリロードやTypeScript対応希望となれば
下記記事も参考にしてみてください。

参考ソース
最新版で学ぶwebpack 4入門 – Babel 7でES2019環境の構築(React, Vue, Three.js, jQueryのサンプル付き)
こちらの記事をベースに構築しました。

毎日GLSLでアニメーションをつくってる

TypeScript + Webpack + Three.js + Shader

本格的な開発となれば、面白法人カヤックさんの記事が参考になると思います。

WebGLコンテンツの開発フローと抑えどころ

※Three.jsファイルが500KBサイズもあり、バンドルすると警告メッセージが表示されたので、CDNにしています。

※glslify-loaderを使うと複数のシェーダーファイルもまとめられるようなのですが、
うまくまとまらずエラーになっていたので、原因わかり次第追記します。

Three.jsでGLSL(シェーダー) 環境構築 まとめ

『JavaScript』には大きく2つの書き方があり、

新しい書き方となると環境構築がちょっと大変で、
しかも『GLSL(シェーダー)』読み込みもさせたいということで、
全くの初心者にはちょっとハードルが高いかも?と思いつつ、

一度作ってしまえば、後が楽だなとも思います。

アオキ
ぜひ環境構築トライしてみてくださいね。

『Three.js』関係ではこんな記事も読まれています。

1. 3Dプログラミングの基本を【Three.js】でまとめてみた【初心者向け】

2. 【Three.js】で『GLSL(シェーダー)』を使う環境構築の仕方 【初心者向け】

3. 【WebGL】入門 わかりやすく【図解】してみた

4. 【Three.js】用語や関数のまとめ【3Dプログラミング】※随時更新

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事

  1. CG関連

    【GLSL(シェーダー)】でよく使う関数とユーザー関数のまとめ【計算編】※随時更新

    プログラミングでかっこいい映像をつくりたいと覚え始めた『GLSL(シェ…

  2. CG関連

    【TouchDesigner】で『ShaderToys』を使う方法【画像たっぷり】 (動画5-1)…

    連日の『TouchDesigner』で『GLSL』を使ってみる動画のメ…

  3. CG関連

    プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

    2020年から小学校でもプログラミング教育が義務化になり、子ども向…

  4. CG関連

    【Unity】シェーダ(shader)入門 『サーフェスシェーダ』をまとめてみた。※随時更新

    『シェーダ(Shader)』といえばもちろん、頂点シェーダ(ve…

  5. CG関連

    【GLSL(シェーダー)】『レイマーチング』入門その1 距離関数とレイとカメラの設定

    かっこいい『3Dプログラム』をつくりたいとググって見つけた『レイマー…

  6. CG関連

    【3Dプログラム】の基本を【Three.js】でまとめてみた【初心者向け】

    3Dプログラムは難しい・・・なんたって数学多いし用語たっぷりだし・…

Sponsored link

最近の記事

  1. バックエンド

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  2. 学び・教育

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  3. CG関連

    【WebGL】入門 わかりやすく【図解】してみた
  4. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  5. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述