![見出し画像](https://assets.st-note.com/production/uploads/images/75900765/rectangle_large_type_2_fb6b7e49a538840d885b2d0662dd3a46.png?width=1200)
Instagramの新規ストーリーエフェクト紹介! 【勤勉エンジニアの怠惰ブログ】
インスタグラムで『もこもこ耳』のストーリーエフェクトを公開しました!
はじめに
本記事では『もこもこ耳』のエフェクト作成の経緯についてまとめていきたいと思います。
開発経緯
![](https://assets.st-note.com/img/1649172520137-jZUDQQIqCj.png?width=1200)
毛並みを表現するためにBlenderのfurを作成しましたが、出力した3DデータをSparkAR内で扱うことができませんでした。
![](https://assets.st-note.com/img/1649172693105-AMUCXYojrt.png?width=1200)
SparkAR内で毛並みを含んだオブジェクトは表示できなかったので他の方法を模索することにしました。
SparkAR内で毛並みを表現する
そこで毛並みのあるテクスチャを用意して、球状のオブジェクトに10層ほどのマテリアルとして適用し、透明度を内側から外側に向かって低く、色を外側から内側に向かって濃くなるようにプログラムすることで毛並みを表現することが可能でした。
![](https://assets.st-note.com/img/1649172925713-CsGJyfgKYw.jpg?width=1200)
それとBlenderでカチューシャを作成し、その上にもこもこの球体を設置し、『もこもこ耳』の完成です。
![](https://assets.st-note.com/img/1649173235691-5vuBf1XYRA.png?width=1200)
まとめ
本記事では、SparkARで毛並みを表現することができた『もこもこ耳』のエフェクトを紹介しました。
いいねが多ければ、もこもこのオブジェクトをSparkARのみで表現する方法をまとめたいと思います。
Blender関連記事
Spark AR関連記事
AR関連記事
最後に
我々Flutterラボは、大阪の梅田にあるコワーキングスペース『ONthe UMEDA』の料金プランとしてモバイルアプリ開発が学べるプログラミングスクールを運営しております。
オンラインではなく対面で学びたい方におすすめです。
※オンラインをご希望の方はFlutterラボのオンラインスクールをおすすめします。
以下のような方に適したプログラミングスクールです。
大阪でFlutterを学びたい方
オフラインで現役エンジニアに教わりたい方
プログラミングの基礎から学びたい方
アプリを開発してみたい方
初心者からスマホアプリをリリースしたい方
スタンダードコース
Flutter学習用のカリキュラムに合わせて、プログラミングの基礎からアプリ開発の応用まで学べるコースです。
プロコース
ご自身で開発したいアプリを、設計からリリースまですべてサポートするコースです。
無料体験をご用意しておりますので、ぜひ気軽にTwitterのDMか、特設WEBサイトからお問い合わせください。