エフェクトのアニメーションを動かしてみよう
エフェクトとは、ウェブページ上で視覚的な印象や動きを生み出すためのプログラムコードで、 アニメーションだけでなく、色の変化、形の変形、テキストの変動など、多岐にわたる視覚的表現が含まれます。 negl では様々なエフェクトを特定のディレクトリに配置するだけでサイトに表示させることができます。 ここではアニメーションを実際に動かしてみましょう。
エフェクトを追加しよう
テンプレートにエフェクトを追加して、アニメーションを動かしてみましょう。今回は既に完成しているエフェクト（noise-split）を画面に表示しながら学んでいきます。 noise-splitは 2 枚の画像をトランジションさせてくれるエフェクトです。エフェクトはすでに用意されたものを使用することも出来ますし、自分で作成することもできます。自分で作成する場合は基礎編、応用編で WebGL の基礎や negl 内部の仕組みを学ぶ必要があります。
-
noise-splitをダウンロードしましょう。 ダウンロードが完了したら、展開したファイルを glsl フォルダに配置します。
-
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">
<!-- .page-container内の要素を以下のdivとstyleタグに置き換えてください。-->
<!-- POINT data-webglにnoise-splitを設定 -->
<!-- POINT data-tex-2に画像を追加 -->
<div
class="test-effect"
data-webgl="noise-split"
data-tex-1="/img/dog.jpg"
data-tex-2="/img/cat.jpg"
></div>
<style>
.test-effect {
width: 500px;
height: 500px;
}
</style>
</div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>これでエフェクト表示の準備が整いました。
アニメーションを動かしてみよう
lil-gui (opens in a new tab) という GUI ツールを使ってエフェクトのアニメーションを動かしてみましょう。 index.js を以下のように変更してください。
import "../styles/style.scss";
import { setup } from "negl";
// 1. WebGLに値を渡すためのGUIツールをインポート
import lilGUI from "lil-gui";
/* obResolverによってglslフォルダに配置したエフェクトは必要に応じて自動的に読み込まれます。 */
const obResolver = async (type) => {
const module = await import(`./parts/glsl/${type}/index.js`);
return module.default;
};
(async () => {
const { start } = setup({
resolver: {
ob: obResolver,
},
// 2. インポートしたlilGUIをaddonに設定
addon: { lilGUI },
// 3. debugをtrueに変更
debug: true,
});
const negl = await start();
negl.renderStart();
})();- lil-gui (opens in a new tab)を使うことで、ブラウザ上でアニメーションの設定や値の変更を視覚的に確認することができます。
- setup関数の
addonオプションに lil-gui を渡します。 debug: trueと記述することで、デバッグモードになり lil-gui の UI が画面右上に表示されます。
lil-gui が適切に設定できていれば、画面の右上に lil-gui の GUI が表示されます。
UI の中にある> Controlsをクリックしてみましょう。メニューが表示されます。
このメニューには、追加したエフェクトが一覧で表示されます。
エフェクト一覧にある> noise-splitをクリックすると noise-split を動かすためのメニューが表示されます。
シークバーを移動させてprogressの値を変更してみましょう。
noise-split の効果によって、progress のシークバーを動かすと 2 枚の画像がトランジションします。 エフェクトのアニメーションを確認する際は lil-gui の UI を使って動かしてみてください。
裏側で何が起こってるの？
lil-gui の progress の値を変更するとuProgressという 値が内部で変更されます。それによって、WebGL コードに状態が変化していることが通知され、画面の表示が切り替わります。 これは WebGL の Uniform という値の受け渡し方で実現されています。Uniform について詳細を知りたい方は基礎編の WebGL の基礎を確認してください。