デサント公式ブランド『ALLTERRAIN(オルテライン)』の2017AWプロダクトサイトのフロントエンドの実装を担当いたしました。
全体的にあえて余計な演出を省くシンプルな実装になっておりますが、一番の見せ場であるTOPに関しては、WebGLを使って実装した変形マスクエフェクトスクロールやテキスト残像エフェクトなど特にこだわった作りになっております。
ぜひPCとスマホ両端末でご覧ください。
デサント公式ブランド『ALLTERRAIN(オルテライン)』の2017AWプロダクトサイトのフロントエンドの実装を担当いたしました。
全体的にあえて余計な演出を省くシンプルな実装になっておりますが、一番の見せ場であるTOPに関しては、WebGLを使って実装した変形マスクエフェクトスクロールやテキスト残像エフェクトなど特にこだわった作りになっております。
ぜひPCとスマホ両端末でご覧ください。
three.jsでディスプレイスメントマップフィルタ実装したデモ作ったら思った以上に使えそうなのでメモ&共有。
(自信ないけどディスプレイスメントマップフィルタってこうことやってると思う。たぶん、、)
まず、planeなmeshを敷き詰めたsceneをオフスクリーンレンダリングしたものを、フィルタ効果用のマスクテクスチャとして使用(デモのshowMaskをONにしたときの画面がその効果用テクスチャ)↓
そして、このテクスチャマスクをずらしたい絵↓にかぶせる(実際にかぶせるわけじゃなくてイメージ)
マスクテクスチャの赤(R)をx軸のずらす量、緑(G)をy軸のずらす量として使用してて、(GLSLでいうとtexture2D()の第2引数のオフセット値として使用してる)
動的に色を変えることでずらす量をアニメーションさせてる。showMaskフラグをぽちぽちするとイメージしやすいかも。
適応後はこんな感じ。
このフィルタってデモみたくぐにゃぐにゃさせたいときに使うもんだと思ってたけど、パラメータによってはソリッドな演出も実装できて幅が広そう。
マスクテクスチャ次第でもっとファンキーなのが期待できる。
ソースはこちら。よかったら参考にしてください。
github.com
DESCENTE(デサント) スペシャルコンテンツの背景演出部分のWebGLプログラミングを担当いたしました。
再形成を繰り返し、日が経ち成長していいくにつれ、ユーザーの期待感を高められるような力強いビジュアルを目指しました。
スマホは若干最適化しておりますが、ほぼ同じビジュアルを体験できます。ぜひ両端末でご覧ください。
そして、ビジュアルがFIXするまでの過程がわかるメイキング映像も用意しましたのでそちらもせひご覧ください。
WebGLメイキング映像
DESCENTE(デサント) スペシャルコンテンツ WebGLメイキング
クリエイティブチームschoolのwebサイトのフロントエンドを担当いたしました。
TOPのWebGLを使った動画加工エフェクトやメニューの展開時アニメーション、トランジションエフェクトなど細かい部分にこだわりました。ぜひご覧ください。
いわゆるvideo要素のcurrentTime進めてキャプチャしてcanvasへ表示するやつ。
もっと手間かかるかと思ってたけど、THREE.VideoTextureのおかげでだいぶスマートに実装できた。
使用頻度高そうなので忘れないようにメモる。
・デモはこちら
https://ikeryou.github.io/inlineMovie/
・github
GitHub - ikeryou/inlineMovie: スマホでの動画インライン再生テスト
・ソースメモ
スマホでの動画インライン再生 for WebGL