2018年に始めたジュニのInstagram、先日、1000フォロワーに到達しました！

＼1000フォロワー！やった！／

というわけで、さらにもっと多くの人に見てもらえるように、これまでの投稿した画像を紹介する
オリジナルコンテンツをWebGL／GLSLを活用して作成しました！

▶ こちらからアクセス！

コンテンツの制作過程をご紹介

技術用語寄りになりますが、コンテンツの制作過程を少しご紹介いたします。

1. モデリング

まずはBlenderでバクをモデリングします。出来上がった3Dモデルはメッシュ情報をglTF形式、頂点データはJSON形式の2パターンで書き出しました。２パターンに分けた理由としては、glTF形式の頂点データを使うと頂点の重なり部分でインスタ画像が2重に表示されてしまったり最終的な絵の調整がしづらかったためです。

2.モデル読み込み + テクスチャの作成

つぎにThree.jsにバクのモデルを読み込ませて、テクスチャを設定します。テクスチャにはインスタグラムの投稿を一枚の画像にまとめた図のようなデータを使用します。このデータを、頂点ごとに異なった投稿写真が描画されるようにマテリアルを作成しアタッチします。

3.シェーダー

タイルの形状とバクの形状の頂点座標を切り替えるシェーダーを作成しアタッチします。JavaScriptでタイミングの制御などを行い、ダイナミックな表現を実現しました。

３D／シェーダーを使ったコンテンツ、新しい表現がいろいろできるようになります…ね！

というわけで、３DやWebGLに強い、エンジニア・デザイナーの大募集中！です！⇣⇣⇣⇣⇣

https://www.wantedly.com/projects/203234

ではまた。

ジュニ・岡村