AQ CASE＆KNOWLEDGE

本

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

運営しているクリエイター

#プログラミング

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

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

p5.jsでshadowBlurにグラデーションを適用する

こんにちは、AQUARING かにです。 p5.js で drawingContext.shadowBlur を使うと簡単にシャドウを描画することができますが、drawingContext.shadowColorには単色しか設定できませんよね。今回は shadowBlur にグラデーションを適用する方法を紹介します。最終的なコードはページ下部の追記220401：p5.Image.mask()でアルファマスクするにあります。黒背景に白でシャドウを描画let d

GLSL Tips #02 輪郭のジャギーをなめらかにする

こんにちは、AQUARING かにです。今回はGLSLでテクスチャをマスクする際によくある輪郭のジャギーをなめらかにする方法について書いていきます。 GLSL側で円形のマスクを作成するコードを例に説明していきます。マスクがジャギる例まず普通に円形のマスク関数を書くと以下のようになります。 precision mediump float;varying vec2 vTexCoord;/** * 円形マスク * @param {vec2} uv UV座標 * @pa

GLSL Tips #01 レイヤーの結合

こんにちは、AQUARING かにです。 WebGLやopenFrameworksなどでGLSLを書くたびに毎回「どうやるんだっけ？」となることが多々あるので、こまめに記事にして備忘録として残していこうと思います。今回はレイヤーの結合についてです。距離関数で描いた複数の円を重ねるコードを例に説明していきますが、テクスチャを使ったマスクでも同様の処理でレイヤーを結合できます。背景レイヤーと結合precision highp float;varying vec2 v

JavaScript(ES2015~)でウィンドウサイズをシングルトンライクに管理する

こんにちは、AQUARING かにです。ウィンドウのリサイズ時やCanvas表現の実装などでよく使う window.innerWidth, window.innerHeight ですが、みなさんウィンドウサイズのユーティリティクラスは作っていますか？せっかくクラスで綺麗にカプセル化していても、ウィンドウサイズが必要になるたびに毎回 window の変数を取りに行くのはクラス外に依存する記述が増えてあまり良くないですよね。そこで今回は、プロジェクト全体で共有するウィ