[環境構築]WebGLを動かすにあたって

こんにちは！

みなさんWebGLって知っていますか？

最近3DグラフィックのWeb技術に興味を持ちまして、WebGLのTechブログを書いていこうと思います。

その第一弾としてWebGL、Three.js を動かす環境構築を行なっていきます。

まずWebGLってなに

簡単に言うと、Webブラウザ上で3Dグラフィックのレンダリングをする技術です。

プラグインなどの導入も不要で対応ブラウザもChrome、FireFox、Safariをはじめ多くのブラウザで動作可能です。

WebGLとThree.jsって何が違うの？

WebGlの機能を簡単に使用できるようにした機能群がThree.jsです。

Three.jsで再現することができない画面描写も存在するのでその場合はWebGLを使用することになります。

WebGL Three.jsの例

ここからフロントエンド開発においてよく使用されるビルドツール「Vite」を使用し、実際にWebGLを動かしてみましょう！

一緒にVSCodeを開いてやってみてください。

Viteってなに？

Viteは「次世代フロントエンドツール」と呼ばれるものです。

ざっくりいうとフロントエンド開発を行う上で必要な環境周りをいい感じにまとめてくれているものです。

具体的には下記のようなものが含まれます。

• 開発サーバー
• HMR
• バンドラ
• プラグインシステム,,,etc

開発者体験にフォーカスしていて、セットアップが非常に簡単にでき、扱いやすいAPIが用意されています。

Viteプロジェクトを作成しよう

ここからViteプロジェクトの作成、開発サーバーの立ち上げまで一緒にやりましょう！

1. Viteプロジェクトの作成する
   下記コマンドをターミナルで実行
   
2. 依存関係のインストール
   作成したフォルダに移動し依存関係のインストールをしていきます
   
3. 開発サーバーの起動
   下記コマンドでローカルの開発サーバーを起動します。
   
   http://localhost:5173にアクセスするとサーバーが立ち上がっていることを確認できます。
   

本番用のビルドについて

下記コマンドで本番用アプリケーションをビルドすることができます！

npm run build

ビルドされたものはdistディレクトリに出力されるので、distフォルダ内のファイルを本番サーバーにホストすれば公開することができます。

viteの設定ファイルについて

設定の内容はvite.config.jsという名前で配置されています。

よく使われる設定は下記になります。公式ドキュメントにも記載があるので合わせて目を通しておくと知見が深まって一皮剥けます。

https://ja.vite.dev/config/