GLSL/WebGLを活用したコンテンツを公開！

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

ではまた。

ジュニ・岡村

Invitation from 株式会社ジュニ

If this story triggered your interest, have a chat with the team?

株式会社ジュニ's job postings

GLSL/WebGLを活用したコンテンツを公開！

Masahiro Okamura

株式会社ジュニ / 代表取締役／プランナー

1 Likes

『アソビゴコロxテクノロジー』ジュニは、自由で、ユニークな発想とテクノロジーを掛け合わせ新たな体験を生み出すクリエイティブ・エージェンシーです。企業のブランディングやプロモーション、キャンペーン、インスタレーション、新規事業開発まで企画設計からデザイン、システム開発まで一貫しておこないます。【事業範囲・活動領域】ジュニの案件は、大手クライアントとの直接取引が７割以上です。有名IPのプロモーションや大規模なサービス開発、リアルイベントのインスタレーション開発、ブランドをイチからつくりあげる案件など多種多様です。また、これまでのノウハウを活かした自社事業開発も積極的に行っています。ブロックチェーン技術を活用したNFTアート事業やバーチャルギャラリー開発など、デジタルを軸に新たな体験を生み出しています。・サービス企画開発（例:大手エンタメ企業のライブ配信サービスの企画／開発／クリエイティブ全般）・Webサイト（ブランドサイト、コーポレートサイト、キャンペーンサイト等）・ブラウザアプリ（例:ARアプリ、ゲーム）・グラフィック（グッズ等のプロダクト、ポスター等）・自社事業開発（デジタルを軸にしたアート事業など）【ジュニの実績】制作実績は以下をご覧ください。・JUNNI サイト https://junni.co.jp/ ・X（旧Twitter） https://twitter.com/junni_jp ・ジュニのスペシャルサイト『Junni.is...』 https://next.junni.co.jp/ ・NFTプロジェクト『Fluffy Hugs』スペシャルサイト https://nft.fluffyhugs.io/ ・NFTコレクション『CNP HUGS』バーチャルギャラリー https://cnp-hugs-vg.artworks-gallery.store/ 【ジュニの受賞歴】・Awwwards(Honorable mention):2023 ・Awwwards(Site of the Day):2022 ・Awwwards(Developer Award):2022 ・FWA OF THE DAY(FWA):2022 ・TECHNICAL ACHIEVEMENT(The Webby Awards):2020 ・Website Of The Day(CSS Design Awards):2019 ・Site of the Day(CSS WINNER):2019 ・FWA OF THE DAY(FWA):2019 ・ANA WonderFLY CREATIVE AWARD:2017 ・STAR(CSS WINNER):2017 ・WINNER OF THE DAY(CSS REEL):2017 ・CSS Design Awards(Special kudos):2017 ・Design Of The Day(DesignAwards.Asia):2017 ・HONORABLE MENTION(AWWWARDS):2017 ・DellGraphic Pro × ブレーン Creative Award:準GP:2013 ・販促会議コンペティションファイナリスト:2013

Like Masahiro Okamura's Story

Let Masahiro Okamura's company know you're interested in their content

GLSL/WebGLを活用したコンテンツを公開！

▶ こちらからアクセス！

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

1. モデリング

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

3.シェーダー

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

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

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

株式会社ジュニ

コンテンツ

Weekly ranking