読者です 読者をやめる 読者になる 読者になる

テクスチャ使ったディスプレイスメントマップフィルタ

three.jsでディスプレイスメントマップフィルタ実装したデモ作ったら思った以上に使えそうなのでメモ&共有。
(自信ないけどディスプレイスメントマップフィルタってこうことやってると思う。たぶん、、)

ikeryou.github.io

まず、planeなmeshを敷き詰めたsceneをオフスクリーンレンダリングしたものを、フィルタ効果用のマスクテクスチャとして使用(デモのshowMaskをONにしたときの画面がその効果用テクスチャ)↓
f:id:ikeryou:20170519171049j:plain

そして、このテクスチャマスクをずらしたい絵↓にかぶせる(実際にかぶせるわけじゃなくてイメージ)
f:id:ikeryou:20170519171054j:plain

マスクテクスチャの赤(R)をx軸のずらす量、緑(G)をy軸のずらす量として使用してて、(GLSLでいうとtexture2D()の第2引数のオフセット値として使用してる)
動的に色を変えることでずらす量をアニメーションさせてる。showMaskフラグをぽちぽちするとイメージしやすいかも。
適応後はこんな感じ。
f:id:ikeryou:20170519172847j:plain

このフィルタってデモみたくぐにゃぐにゃさせたいときに使うもんだと思ってたけど、パラメータによってはソリッドな演出も実装できて幅が広そう。
マスクテクスチャ次第でもっとファンキーなのが期待できる。

ソースはこちら。よかったら参考にしてください。
github.com

【仕事】 DESCENTE スペシャルコンテンツ

xxxxxxxx.descente.com

DESCENTE(デサント) スペシャルコンテンツの背景演出部分のWebGLプログラミングを担当いたしました。
再形成を繰り返し、日が経ち成長していいくにつれ、ユーザーの期待感を高められるような力強いビジュアルを目指しました。
スマホは若干最適化しておりますが、ほぼ同じビジュアルを体験できます。ぜひ両端末でご覧ください。

そして、ビジュアルがFIXするまでの過程がわかるメイキング映像も用意しましたのでそちらもせひご覧ください。

f:id:ikeryou:20170209170443g:plain
f:id:ikeryou:20170209171012p:plain

WebGLメイキング映像

DESCENTE(デサント) スペシャルコンテンツ WebGLメイキング

WebGL使ったスマホでの動画インライン再生

いわゆるvideo要素のcurrentTime進めてキャプチャしてcanvasへ表示するやつ。
もっと手間かかるかと思ってたけど、THREE.VideoTextureのおかげでだいぶスマートに実装できた。
使用頻度高そうなので忘れないようにメモる。

・デモはこちら
https://ikeryou.github.io/inlineMovie/

・github
GitHub - ikeryou/inlineMovie: スマホでの動画インライン再生テスト


・ソースメモ

スマホでの動画インライン再生 for WebGL

Unityメモ

参考サイトを忘れないようにメモ

シェーダー 定義済値
http://qiita.com/edo_m18/items/591925d7fc960d843afa

カスタムイメージエフェクト
http://www.f-sp.com/entry/2015/08/11/185815

スクリプトリファレンス
https://docs.unity3d.com/jp/540/ScriptReference/index.html

シェーダー セマンティクス
http://qiita.com/sune2/items/fa5d50d9ea9bd48761b2

シェーダー
http://tips.hecomi.com/entry/2014/03/16/233943

あみかけシェーダー
http://qiita.com/beinteractive/items/7a6c680f5807b1e37c9a

プレハブのインスタンス化
https://docs.unity3d.com/jp/540/Manual/InstantiatingPrefabs.html

頂点もにょもにょさせる
http://naochang.me/?p=121

シェーダーサンプル
https://docs.unity3d.com/ja/current/Manual/SL-VertexFragmentShaderExamples.html

シェーダーに値おくる
http://qiita.com/edo_m18/items/0a65ab0c99325b24ec59

回転
http://qiita.com/utah/items/005e34e6888b0b6c63c3

ワイヤーフレーム表示
http://qiita.com/2dgames_jp/items/231a18454348cfebd49d