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

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

three.jsのlinewidth効かへんメモ

ある程度太めのライン(2D)をうにょうにょさせたいっていう要望があって、
それならthree.jsのLineBasicMaterialのlinewidth設定すれば一発だろうと思ってて、
即「できます!」って答えたんだけど、
このプロパティまったく効かへん。。。
なに設定してもずっと1pxの細い線のまま、、
前できてたような気がしたんだけど記憶違いだったか、、

ウニョ線は色々汎用性の高い表現なので、
できればWebGLでできるように無理やり解決しておきたくて、
(Canavsなら線幅変えられる。何回もやったことあったなと思ってたのはたぶんCanvasのことだった)
調べたらTubeBufferGeometryっていうよさそうなのがあって、
これカメラ固定して表示したらまんま2Dのラインだな。
と思って試したらそれっぽくなった。

f:id:ikeryou:20170317205247p:plain
線太くするテスト

アニメーションさせるときに頂点一から計算し直したりしてるからやりすぎ注意。まだ改善できそう。

githubにもUPしたので興味ある方はぜひ。

ウニョ線書いてるクラスはここ

【仕事】 DESCENTE 2017SS特設サイト

ss2017.descente.jp

DESCENTE(デサント) 2017SS特設サイトTOPページのフロントエンドを担当いたしました。
シンプルな構成ではありますが、WebGLを使った商品切り替えエフェクト、ページ全体のトランジションなどを工夫し、単調になりすぎずユーザーが特別感を感じられるように心がけて実装しました。
PC、スマホと同じ演出となっていますのでぜひ両端末でご覧ください。

f:id:ikeryou:20170307170136g:plain
f:id:ikeryou:20170307171929p:plain
f:id:ikeryou:20170302150250p:plain

Webサイトリニューアル

ikeryou.jp

僕のやってることや仕事の実績などは完全にこのブログに集約することにして自分のサイトもリニューアル。このブログへの扉ページ的な位置付けにしました。背景とか結構自分好みにぐにょぐにょさせてます(テキストは日々思ってることがランダムで表示されます!)。PCとSPどっちも見れるのでよかったらぜひ!

f:id:ikeryou:20170303205213g:plain
f:id:ikeryou:20170307172140p:plain