Three.jsとTypeScriptによるWebGL開発環境

下記ZIPファイルでThree.jsとTypeScriptによる開発をすぐに試せます。

本文では展開したZIPファイルのpackage.jsonがあるディレクトリをプロジェクトディレクトリとし、すべてのパスをプロジェクトディレクトリからの相対パスで表します。

TypeScriptを利用するメリット

Three.jsはJavaScriptのライブラリですが、TypeScriptにも対応しています。TypeScriptはJavaScriptのスーパーセットで、次のようなメリットがあると考えています。

型がある

JavaScriptは動的型付け言語ですが、TypeScriptには型があります。これにより、強力な入力補完が効いたりエラーチェックができたりするため開発効率が圧倒的に向上します。書いていて気分がいいです。

他のファイルをインポートできる

Three.jsでシェーダーを利用する場合、JavaScriptだとファイル読み込みがやや不便でシェーダーコードをJavaScriptの文法上の文字列として扱う必要があります。TypeScriptのimportを利用するとシェーダーを個別のファイルとして分離することができ、シェーダー開発時にエディタの補完の恩恵を受けられます。

開発環境の構築

Node.jsが動かせる環境があれば十分です。構築方法としては下記のいずれかになります。

• Node.jsのDockerコンテナを利用
  • 既存の環境を汚したくない・すでにDockerを動かせる状態にある場合におすすめです。
  • WindowsでDockerを利用するにはWSL2の有効化とDocker Desktopのインストールが必要です。
• システムのNode.jsを利用
  • Dockerをすぐに動かせる環境でない場合はこちらが早いと思います。

Node.jsのDockerコンテナを利用

プロジェクトディレクトリで下記コマンドを利用してDockerコンテナをビルドします。

$ make build

Dockerコンテナが作成されて起動します。make stopでコンテナを停止できます。使用できるmakeコマンドはMakefileにあります。

システムのNode.jsを利用

https://nodejs.org/ja/より、Node.jsをインストールします。

プロジェクトディレクトリの構成と説明

.
├── .devcontainer/ <- VSCodeリモートコンテナ用
├── .vscode/       <- VSCodeの設定ファイル
├── dist/          <- ビルドされたソースコードがここに出力される
├── src/           <- TypeScriptやシェーダーなどソースコード
├── Dockerfile         <- Dockerコンテナ作成用ファイル
├── Makefile           <- Dockerコマンドをラップ
├── package-lock.json  <- npmパッケージ(依存関係を含めてすべて。編集はしない)
├── package.json       <- npmパッケージ(開発者が任意に編集する)
├── tsconfig.json      <- TypeScript設定ファイル
└── webpack.config.js  <- ビルド設定ファイル(Webpackの設定)

開発

パッケージのインストール

$ npm install

ビルド

$ npm run build

$ npm run watch

表示の確認

Dockerコンテナを利用している場合

DockerコンテナにはNginxがインストールされているため、http://localhostをブラウザで開くとdistに出力されたファイルを確認できます。

システムのNode.jsを利用している場合

dist/index.htmlをブラウザで開きます。

デバッグ

ブラウザの開発者ツールでデバッグコンソールを確認できます。多くのブラウザでF12キーを押すと開きます。シェーダーのエラーも出力されます。

VSCodeユーザー向けの情報

VSCodeにRemote Development拡張機能パックをインストールしてプロジェクトディレクトリを開くと、Dockerコンテナにリモート接続して開発できます。.devcontainerや.vscodeはそれ用です。