チュートリアル
概要

概要

チュートリアルでは NotEqual 会員限定ライブラリ negl の簡単な使い方について紹介しています。 negl は応用編（旧実践編）のコードをベースとした WebGL サイト作成ライブラリです。その為、基礎編、応用編をまだ受講していない方はそちらをご覧になってから以降の内容を見るとより理解が深まります。

基礎編を見る応用編を見る

実装例

以下の 2 つのサイトは実際に negl を使って作成したサイトになります。 ソースコードもダウンロード可能ですので、ご自身の制作の参考にしてみてください。

Travelサイトを見るジブリサイトを見る

negl とは？

negl は WebGL や three.js を用いた Web サイトを簡単に作成することのできるライブラリです。 negl を使うことで WebGL へのインタラクション、画面制御などを簡単に行うことができます。

  • エフェクト組み込み HTML タグに目印をつけるだけで 3D グラフィクスのエフェクトを簡単に適用することができます。

  • エフェクトの位置、大きさ制御 使い慣れた HTML、CSS を用いて WebGL のメッシュの位置や大きさを制御することができます。

  • レスポンシブ スクロール位置制御や画面幅の変更によるレイアウト変更なども CSS で行うことができます。

  • パフォーマンスの最適化 パフォーマンスの最適化などは裏で全て自動的に行っています。

  • 再利用性 新しいエフェクトもコードを配置するだけで、すぐに利用できる状態になります。

  • エフェクトのインタラクション メッシュに対する UI イベント（ホバー、クリック、スクロールなど）を簡単に実装することができます。

  • シームレスな画面遷移 画面リロードを発生させず画面遷移を行う SPA トランジションを簡単に作成することができます。

実行環境

推薦環境は応用編と同じく、以下の通りです。 まだインストールしていないソフトウェアがある場合はインストールを行って受講してください。

💡

VScode の拡張機能である WebGL GLSL Editor (opens in a new tab) をインストールしておくと、WebGL のファイルをハイライトしてくれるのでコードを読みやすくなります。

インストール

まずは negl のテンプレートを PC で動かしてみましょう。 このテンプレートは negl を動かすためのシンプルな構成になっています。 以下の手順でインストールしましょう。

  1. negl テンプレート（negl-template.zip）をダウンロードします。
    negl テンプレート
  2. ダウンロードしたファイルを解凍して VSCode で開きます。
  3. ターミナルを開き、以下のコマンドを実行して必要な依存関係をインストールします。 （VScode では、ターミナルはctrl + @で開くことができます。）
pnpm install

negl をインストールしよう

先ほどダウンロードしたテンプレートを開くと./src/scripts/vendor/neglフォルダに negl ライブラリが同封されていることが確認できると思います。 以下のコマンドで negl ライブラリをインストールしてください。

pnpm install ./src/scripts/vendor/negl

すると package.json に以下の依存関係が注入されていると思います。

package.json
"dependencies": {
  "negl": "link:./src/scripts/vendor/negl",
  // 環境によっては以下のようになっていることもあります。
  "negl": "file:.\\src\\scripts\\vendor\\negl",
}

これで JS ファイルから negl ライブラリをインポートして使用できる状態になります。

💡

link:やfile:の意味


dependenciesの中で link: や file: が付いた依存関係はローカルPCの上のパッケージの読み込みを意味します。この記述は、特定のパッケージをオンライン上ではなく、ローカルのファイルシステムから参照したい場合に使用します。

フォルダの構成を確認しよう

negl-template は vite (opens in a new tab) ベースのプロジェクトです。基本的なファイルしか配置していない状態ですので、用途に合わせて自由にお使いください。

negl-templateフォルダ構成
negl-template
├─node_modules						    # インストールされた各種パッケージの配置場所
├─public						        # 画像や動画、フォントファイルの配置場所
└─src
  │  index.html						    # HTMLファイル
  │
  ├─scripts
  │  │  index.js						# JavaScriptのエントリーポイント
  │  │
  │  ├─parts
  │  │  └─glsl
  │  │      └─shader-util               # 各エフェクトで使用しているシェーダ部品
  │  │              coverUv.glsl
  │  │              curl-noise.glsl
  │  │              grayscale.glsl
  │  │              parabola.glsl
  │  │
  │  └─vendor
  │      └─negl                         # neglライブラリ
  │
  └─styles
      │  style.scss                     # スタイルのエントリーポイント
      │
      └─vendors
              css-reset.css             # Reset CSS
Not Equalへようこそneglのページ構成