negl を使ってみよう

実際に negl を使う方法を見ていきましょう。 src/scripts/index.jsファイルを開くと、下記のような記述がされています。

これは negl を使う上での最小限の記述になります。

/**
 * 一部抜粋しています。
 */
// 1.negl から setup関数をインポートします。
import { setup } from "negl";
 
(async () => {
  // 2.setup関数を実行して、three.js や WebGL を使った描画の設定を行います。
  const { start } = setup();
 
  // 3.start関数を実行して、setup関数のオプションをもとに negl の初期化を行います。
  const negl = await start();
 
  /**
   * 重要！ start関数を実行後にneglの機能にアクセスすることができます。
   */
 
  //4. 画面への 3D グラフィックスの描画を開始します。
  negl.renderStart();
})();

これが negl を動かすのに最低限必要な記述となります。

各関数の役割について詳しく知りたい方は以下を参照してください。

setup 関数

start 関数

renderStart 関数

この３つの関数は negl を使う上で必ず呼び出す必要がある関数です。それ以外の記述については作りたいものに合わせて適宜追加していきます。

ブラウザで確認してみよう

ターミナルで下記のコマンドを実行することで、開発環境でテンプレートを起動しブラウザで確認することができます。この時、コマンドを実行するカレントディレクトリが negl-template になっていることを確認してください。

pnpm run dev

上記のコマンドを流し、http://localhost:5173の URL をブラウザで開いてみてください。 ブラウザに真っ黒な画面が表示されていれば正しく negl が動いています。

negl にオプションを渡してみよう

negl の setup 関数にオプションを渡してみましょう。まずは簡単に確認するため、真っ黒な画面を真っ赤にしてみましょう。背景色を変更するためには setup 関数の引数に config.world.clearColor を渡します。 index.js ファイルを開き、以下のように変更してみてください。

import { setup } from "negl";
 
(async () => {
  // setup関数にオブジェクトを引数として渡す
  const { start } = setup({
    world: { clearColor: "#ff0000" },
  });
  const negl = await start();
  negl.renderStart();
})();

この状態でブラウザを確認すると、画面が真っ赤になっているはずです。

negl に渡すことの出来るオプション一覧はConfigインターフェイスで確認できます。

💡オプションに用意されていないthree.jsの設定値などを変える方法はあるの？

エフェクトを画面に表示しよう

実際にエフェクトを追加する方法を見てみましょう。 negl を使えば簡単にエフェクトを追加することができます！

今回は一番シンプルなtemplateエフェクトを使って、ブラウザの画面にダミー画像を表示します。

使用したいエフェクトをテンプレートに追加しよう

negl-template/scripts/parts 直下に glsl という名前のディレクトリがあることを確認します。初期状態では、中身は shader-util（エフェクト一覧で使用しているシェーダの共通部品）のみが格納されています。この glsl フォルダに追加したいエフェクトを配置していきます。

エフェクトのダウンロード

エフェクト一覧の中から使用したいエフェクトをダウンロードしましょう。今回はtemplateをダウンロードします。コードのダウンロードはソースコードの右下のをクリックしてください。ソースダウンロードすると、template.zip がダウンロードされると思いますので、zip を解凍して、negl-template/scripts/parts/glslフォルダにフォルダごと配置してください。

negl で読み込み

index.js を開き obResolver を setup 関数のオプションとして渡してください。 obResolver を登録するとパスに一致する JavaScript ファイルをエフェクト表示時に自動的に利用してくれます。

import { setup } from "negl";
 
// obResolver：対象のエフェクトを動的に取得する関数
const obResolver = async (type) => {
  const module = await import(`./parts/glsl/${type}/index.js`);
  return module.default;
};
 
(async () => {
  // obResolverをresolver.obに設定
  const { start } = setup({
    resolver: {
      ob: obResolver,
    },
  });
 
  const negl = await start();
 
  negl.renderStart();
})();

エフェクトを画面に表示させよう

index.js でインポートしたエフェクトを HTML に設定し、画面に表示させましょう。 index.html を開き、タグを追加します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module" src="./scripts/index.js"></script>
  </head>
  <body>
    <div id="global-container">
      <div class="page-container">
        <!-- 下記のタグを追加 -->
        <img
          data-webgl="template"
          data-tex-1="/img/dog.jpg"
          style="width: 50%;"
        />
        <!-- 上記のタグを追加 -->
      </div>
      <canvas id="canvas"></canvas>
    </div>
  </body>
</html>

data-webgl 属性には画面に表示させたいエフェクトの名前を値として設定します。属性の値とエフェクトのディレクトリ名は必ず一致させる必要があります。
data-tex-1 属性には表示させたい画像を設定します。今回はダミー画像を設定しています。
negl ではメッシュの大きさを HTML と CSS で決定しています。今回はチュートリアルのため HTML タグに style 属性を記述し直接スタイルを定義していますが、 CSS で記載する方が一般的です。

これで全ての設定が完了しました！ブラウザで画面を確認してみましょう。エフェクトが正しくインポート・設定されていれば、犬の画像が画面上に表示されます。

犬の画像が表示

neglのページ構成レスポンシブに対応しよう