マガジンのカバー画像

AQ CASE＆KNOWLEDGE

29
本
アクアリングの事例やナレッジを紹介するマガジンです。 実際のプロジェクトで、アクアリングが強みとする「UI/UX」「共創的課題解決」がどのように発揮されているのか、PJメンバーか… もっと読む
運営しているクリエイター

#WebGL

ブラザーSDGsストーリー リニューアル WebGL舞台裏

こんにちは、AQUARING かに です。 今回は今年２月にサイトリニューアルを担当した Brother様 の「ブラザーSDGsストーリー」サイトの WebGL の舞台裏をご紹介します。 リニューアルの経緯リニューアル前のサイトでも同じキャラクターを用いた表現をしていましたが、旧サイトではアニメーション付きの glTF モデルを WebGL でリアルタイムで再生する形で実装していました。 幅広いデバイスでのキャラクターのクオリティ担保やローディング軽量化などを考慮した結果、

かに

ORIGAMI LETTER フロントエンドBreakdown

こんにちは、AQUARING かに です。 昨年制作したブラザー工業さまの「ORIGAMI LETTER」が今年4月にiFデザインアワード2021 コミュニケーションデザイン部門でゴールドを受賞しました！🎉 このWebサイトでは、Webサイト上で折り紙を折るDigital Origami Letterと、プリントした折り紙を折るPrinted Origami Letterの、2つ方法でメッセージを送ることができます。 今回はCanvas2DやWebGLなどのフロントエン

かに

AQUARINGサイトリニューアル フロントエンドBreakdown

こんにちは、AQUARING かに です。 今回は昨年12月にリニューアルしたAQUARINGサイトのフロントエンドについて解説していきます。 WebGL表現まずGLSLとp5.jsで２種類のスケッチを作成しました。 メタボール円のスケッチ（GLSL） 距離関数を用いてふたつの円を重ねて、44行目のstep関数を通すことで画像を二値化してマスクを作成し、最後に水色で塗っています。 この行をコメントアウトすると二値化前の状態が確認できます。 mask = step(0.5

かに