😇 はじめに
今回は簡単に、3Dアニメーション実装で「ツイストする画像」のご紹介です。
こちらはCodeMafiaさんの「Not Equal」で学んだ内容となります。
🌸 今回取り扱うエフェクト
🌸 この記事で分かること／できること
- glslify、glsl-rotateについて
- transition（CSS）と、GLSLの比較
🌸 対象者
- WebGL、Three.js 未経験・初心者
😇 3Dツイスト画像の仕組みを理解する
🌸 今回のコード（ツイスト画像の部分）
vertex.glsl
precision mediump float;
#pragma glslify: easeCubic = require(glsl-easings/cubic-in-out)
#pragma glslify: rotate = require(glsl-rotate/rotate)
varying vec2 vUv;
varying float vDelay;
attribute float aDelay;
uniform float uProgress;
const float HALF_PI = 1.570796327;
void main() {
vUv = uv;
vDelay = aDelay;
vec3 pos = position;
float delay = clamp(uProgress * 1.2 - aDelay * 0.2, 0., 1.);
float progress = easeCubic(delay);
pos.z -= 200.;
// 画像ツイスト
vec3 axis = vec3(-1.0, -1.0, 0.0);
pos = rotate(pos, axis, 4.0 * HALF_PI * progress);
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
🌸 glslifyとは？
glslify（グリスリファイ）とは、GLSL（シェーディング言語）のコードを簡単にモジュール化・再利用できるようにするツールのこと。
GLSLでは、よく使う関数が再利用できるようにいっぱい用意されてて、それを呼び出して使うんですね。
今回のようなツイスト画像だと、自身でゼロから実装してるとかなり大変かと思います。
用意されてるものは、ありがたく使っちゃいましょう。
▼モジュール呼び出し（rotate）
#pragma glslify: rotate = require(glsl-rotate/rotate)
▼関数利用（rotate）
// 画像ツイスト
vec3 axis = vec3(-1.0, -1.0, 0.0);
pos = rotate(pos, axis, 4.0 * HALF_PI * progress);
▼rotate関数のそれぞれ引数は以下です。
- pos：回転させたい座標やベクトル
- axis：回転の軸（XYZ）を示す3次元ベクトル
-
4.0 * HALF_PI * progress：回転角度の大きさを指定（→1回転、2回転などきっちり止まるように計算。ここは説明省略します
）
🌸 CSSとGLSLの比較（長所・短所）
以下でみてもらうとわかるように、それぞれ良し悪しあるようで。
CSSは軽いけども、3Dを本格的に表現となると、なかなか厳しいかもしれん。。
適材適所で、実装方法変えてくと良さそうですね。
| 特徴 | CSS | GLSL |
|---|---|---|
| 実装難易度 | 低い | 高い |
| 3D・複雑な変形 | 不向き | 得意 |
| 軽量・高速 | 非常に軽い | やや重め |
| 動的インタラクション | 弱い | 強い |
| 学習コスト | 低い | 高い |
| リッチ表現 | 制限あり | 上限なし |
😇 参考資料
おわりに／まとめ
今回は glsl-rotateで、簡単に3Dツイストする画像の実装方法を確認できました。
CSSからさらに表現の幅が広がるため、身につけておくと良さそうです。