【CSS】filterやcanvasを使わずにテキストにぼかし処理をかけたように見せる
動的にテキストにぼかし（ブラー）をかける場合、cssのfilterプロパティを使ったり、Context2DやWebGLで画像処理的にブラーをかける方法が考えられます。
今回は、それ以外の方法であたかもブラー処理を施しているかのように見せる手法を考えてみました。
text-shadowとcolorのみを操作します。
こちらがデモになります。
See the Pen Easy Text Blur by takumifukasawa (@takumifukasawa) on CodePen.
text-shadowは横のオフセット,縦のオフセット,ぼかしのサイズ,色の4つの値を指定することができます。
colorをtransparentにしてベタ塗りをなくし、text-shadowで縦横のオフセットを0にし中心を基準に影を広げることがポイントです。
p { font-size: 18px; line-height: 1.6em; letter-spacing: 0.07em; color: transparent; text-shadow: 0 0 6px rgba(0, 0, 0, 0.8); }
余談
text-shadowのブラー処理のロジックが気になったので調べてみました。
W3Cのドラフトにはこう書かれていました。
https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow
This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for box-shadow [CSS-BACKGROUNDS-3]. (But note that spread values and the inset keyword are not allowed.)
つまり、text-shadowの要素はbox-shadowとして解釈されるようです。
続いてbox-shadowの項目を見てみます。
https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow
box-shadowのblurについて説明しているshadow-blurの項目にはこう書かれていました。
https://www.w3.org/TR/css-backgrounds-3/#shadow-blur
Note this means for a long, straight shadow edge, the blur radius will create a visibly apparent color transition approximately the twice length of the blur radius that is perpendicular to and centered on the shadow’s edge, and that ranges from almost the full shadow color at the endpoint inside the shadow to almost fully transparent at the endpoint outside it.
ロジックを理解できたわけではないのですが、どうやらいわゆるカーネルを用いた画像処理的な方法ではなく、独自の複雑な処理を施しているのでしょうか。
もし詳しい方がいらしたらぜひご教授いただきたいです。
【UE4】LeapMotion と Niagara を連携させる
先日、LeapMotionを入手しました。LeapMotionはざっくり言うと手を検出するデバイスです。VR向けのコントローラーとして使われることもあるみたいです。
これまで LeapMotion を使ったことがなかったので、いろいろ遊んでみることにしました。UE4とNiagaraとの連携をやってみます。今回は、1秒ごとに手の形に応じてパーティクルを表示する機能を作ってみます。
UE4のNiagaraとLeapMotionを連携させてみた。手の形に応じてパーティクルを発生させる。#UE4 #leapmotion pic.twitter.com/E6mr6RdS9F
— takumifukasawa (@takumifukasawa) 2020年2月24日
サンプルはこちらにアップしました。
環境
- Windows10
- UE4.23.1
LeapMotionの導入
1. PC
ツールのインストール
まず、LeapMotionのsetupを行う必要があります。こちらからセットアップツールをダウンロード → 中に入っているセットアップ用のファイルを開き、インストールを進めます。
起動確認
インストールしたら、LeapMotionが問題なく起動するかを確認してみます。
インストールされたLeapControlPanelをダブルクリックすると、LeapMotionのコントロールパネルが有効になります。
インストールの場所などを特にカスタマイズしなかった場合はおそらく C:\Program Files\Leap Motion\Core Services に入っているはずです。
有効になると、タスクバーにこのようなアイコンが表示されます。右クリックしてビジュアライザーを開くと、手を検出したボーンのビジュアライズアプリが立ち上がります。
これで、LeapMotionが無事にPCで扱える状態になりました。 余談ですが、ビジュアライズアプリのアイコンを見るどうやらUnityで作られているようですね。
2. UE4
LeapMotion のプラグインを有効化
UE4でLeapMotionを使う場合、Pluginsから有効にするだけでLeapMotionを使う準備ができます。有効にしたら再起動が必要です。
Niagara のプラグインを有効化
NiagaraはUE4の新しいVFXツールで、立ち位置的にはこれまでのCascadeパーティクルに変わるとされています。
Niagaraを使うには、 Niagara と Niagara Extra を有効化にし、こちらもエディターを再起動する必要があります。Niagaraは扱いとしてはまだβ版のようですね。
Niagaraの作業
任意のSkeletalMeshからパーティクルを発生させるアセットを作成していきます。両手から発生させたいので、パーティクルのアセットは1つにし、SkeletalMeshを差し替えることのできるような構造になっているのがよさそうです。Niagara の実装はこちらを参考にさせていただきました。
Niagara System, Niagara Emitter を作成
Niagaraアセットの構成はこちらの記事がとてもわかりやすく解説してくださっています。
今回は、Niagara System と Niagara Emitter の2つのアセットを使っていきます。それぞれ FX_HandParticleSystem, FX_SurfaceParticle と名付けました。
Niagara Emitter で SkeletalMesh からパーティクルを発生させる機能をつくり、Niagara System から Niagara Emitter の SkeletalMesh を指定できるように設定を変更していきます。
Niagara のアセットを作る際にテンプレートを選ぶことができるのですが、Niagara System の方はテンプレートなしで、Niagara Emitter は Simple Sprite Burst テンプレートを使用します。
↓ Niagara System
↓ Niagara Emitter
Niagara Emitter: SkeletalMesh からパーティクルを発生させる
先ほど作った Niagara Emitter は、モジュールを足したり消したりして以下のような構成にしました。重要なものをピックアップしていきたいと思います。
ポイントは Spawn Burst Instanteneous と Initialize Mesh Reproduction Sprite です。
Spawn Burst Instanteneous でパーティクル発生時に一定個数のパーティクルを発生させます。今回は Spawn Count を3000とし、Emitter Life Cycle の NextLoopDuration を 1としました。これで、1秒間隔で3000個発生させるパーティクルとなります。また、 Initialize Particle の LifeTime も1秒以内に収まるようにします。
いよいよメッシュの表面からパーティクルを発生させる部分に入ります。Initialize Mesh Reproduction Sprite モジュールを追加すると、SkeletalMesh の表面からパーティクルを発生させることができます。ここに手のメッシュを指定するのですが、これは LeapMotion のプラグインを有効化すると、そのフォルダの中に入っています。
ここまでの作業で、手の形からパーティクルが発生されるようになりました。
Niagara System: SkeletalMesh の指定
つづいて Niagara System で SkeletalMesh を自由に変更できるようにしていきます。変更可能にしておくことにより NiagaraSystem 1つでいくつもの SkeletalMesh に対応させることができます。
始めに作った Niagara System を開き、Track から先ほどの Niagara Emitter を追加します。
Userの中にSkeletalMesh型の変数を追加します。ここではUser.SkeletalMeshと命名しました。次に、追加した変数を Initialize Mesh Reproduction Sprite の Mesh にドラッグします。すると、紫の鎖のようなマークとともに SkeletalMesh から User.SkeletalMesh に切り替わったかと思います。これで、発生源の SkeletalMesh を 変数から参照できるようになりました。
LeapMotion を扱う Actor を作成
ここでは、手の動きと Niagara を連携させる処理を作っていきます。具体的な処理は実際にダウンロードして中身を見ていただければと思います。この Actor はBP_LeapDesktopActorと命名しました。
そもそも UE4 上で LeapMotion による手の動きと SkeletalMesh の連動は、手の SkeletalMesh に設定した Animation のインスタンスに対して 毎フレームごとに手の動きを更新する構造になっているようです。
Actor を作るにあたって、LeapMotion と手の動きを連携しつつ、手の表示もし、エフェクトと連携も行う Actor を Level 上に配置するだけで使えるようになることが再利用のしやすさ的にも理想なのですが、一つ問題があります。
それは、手のアニメーションと Niagara を連携させるためには、Level に配置した Niagara System の SkeletalMesh の Source に Actor を指定する 必要があること。具体的にはここです。
その理由から SkeletalMesh Actor を Level 上に配置することが必須となったため、このような中身にしました。大きなポイントは3つです。
- 手の動きを反映させる SkeletalMesh Component は Actor に追加したままで、非表示にしておく
- 代わりに、手を表示する SkeletalMesh Actor を Level 上で配置する
- 変数で SkeletalMesh を受け取るようにし、Blueprint内で その SkeletalMesh の Animation を更新する
これで、Level 上に SkeletalMesh Actor を置きつつ手の動きを Niagara に連携させることを実現しました。
Event Graph
アニメーション更新メソッド（右手）
Level に配置
LeapMotion を取り扱う Actor を配置し、子に Niagara System のアセットと SkeletalMesh を配置します。エフェクトと手の位置を合わせるため、position や rotation をゼロにしておきます。
注意点は親の Actor の rotation で、LeapMotion のデバイスの位置や向きに応じて回転を合わせます。
また、Niagara の Override Parameters で手ごとの Default Mesh と Source を指定します。
完成
あとは好きなように色やサイズなどを調整します。
注意点
GPUパーティクルを有効にするとなぜかパーティクルが表示されなくなります。そのため現状CPUパーティクルのみ有効です。 他のSkeletalMeshでは問題なく動いたので、Niagaraの設定などを深堀りする必要がありそうです。こちらは調査中です。
参考
【UE4】LeapMotionを導入するとエディターが落ちやすくなるときの対策
環境
- Windows10
- UE4.23.1
起こったこと
UE4 で LeapMotion を使うには、プラグインを有効にし、LeapMotion Content / ExamplesのLeapDesktopActorをLevelに配置するだけで手の動きに連動したメッシュの表示を行うことができます。
しかし、Actorを配置したあとに何回か実行を繰り返すとエディターが落ちるようになりました。再起動しても現象は変わらずでした。
解決策
LeapDesktopActor の Event Graph を開くと、Event End Play イベントの Set Leap Event のModeがLEAP MODE VRでした。
今回はデスクトップ向けで使っていたので、これをLeap Mode DESKTOPにします。自分の場合はこうすると落ちなくなりました。
↓
備考
github の readme で Set Leap Event の項目を見ると、Set basic global leap tracking options. Useful for switching tracking fidelity or desktop/vr tracking mode. と書いてありました。つまりこのメソッドはトラッキングの設定を変えるための用途のようです。
トラッキングの設定がEvent BeginPlayとEvent EndPlayで違っていた理由は調べてもよくわからなかったので、正しい解決法かは分かりません。ただ、開発するプラットフォーム向けに揃えておいた方がよさそうだと思ったので、設定を変更しました。
