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(ギットハブ)・・パッケージ管理システム

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

 

2 Shares

7 Pockets

【JavaScript】の環境構築の仕方 webpackとbabel【昭和と令和なJavaScript】

https://coinbaby8.com/javascriptes6-webpack-babel.html

プログラミングの歴史において、『JavaScript(ジャバスクリプト)』ほど、栄光と挫折を味わった言語はないんじゃないかと思ったりします。こちらの記事に面白おかしく書いてありますが、JavaScriptの歴史をざっくりまとめたよ!1995年生まれで、ポケモン赤・緑とタメというポケモン世代な言語で、戦国時代暗黒時代新時代の幕開けそしてもはやJavaScriptではない世界まで駆け抜けた『JavaScript』。例えるならビリギャルのように、偏差値35でグレた時代から慶応ボーイに成り上がり、さらには『イーロン・マスク』よろしく宇宙に飛び出すよ...

参考記事
【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 https://github.com/aokitashipro/threejs.git

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

『threejs』フォルダが作成されるので、フォルダの中に移動して、

cd threejs

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

npm install

Sponsored link

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

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

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

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

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

アオキ

GLSLモジュール化(部品化)も試そうと、test.glslファイルも後から追加しております。

『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 はこちらの記事も参照ください。

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

 

2 Shares

7 Pockets

【JavaScript】の環境構築の仕方 webpackとbabel【昭和と令和なJavaScript】

https://coinbaby8.com/javascriptes6-webpack-babel.html

プログラミングの歴史において、『JavaScript(ジャバスクリプト)』ほど、栄光と挫折を味わった言語はないんじゃないかと思ったりします。こちらの記事に面白おかしく書いてありますが、JavaScriptの歴史をざっくりまとめたよ!1995年生まれで、ポケモン赤・緑とタメというポケモン世代な言語で、戦国時代暗黒時代新時代の幕開けそしてもはやJavaScriptではない世界まで駆け抜けた『JavaScript』。例えるならビリギャルのように、偏差値35でグレた時代から慶応ボーイに成り上がり、さらには『イーロン・マスク』よろしく宇宙に飛び出すよ...

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

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

アオキ

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

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のサンプル付き）

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

TypeScript + Webpack + Three.js + Shader

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

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

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

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

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

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

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

アオキ

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

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

アオキ

ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m