きっかけ WSL2でviteを使って開発していたのですが、しばらく立ち上げているとHMRが応答せずWSLを落とさなければならない、ということが頻発していました。 開発環境としては、 ファイルそのものはWindowsOS側で管理 エディターはVSCodeやRiderなどWindowsOS…

WebGL2がiOS15から有効になり、WebGL1までは拡張機能となっていた MRT（Multiple Render Target）が標準機能になりました。 MRTを使って実現しやすくなることの中に、DeferredShadingが含まれます。今回はthreejsでDeferredShadingを実現する方法を探りまし…

ポストプロセス的に反射表現を実現する方法である Screen Space Reflection を実装してみました。 サンプルリポジトリはこちらになります。 github.com 環境 Unity 2021.3.23f1 built-in pipeline forward rendering 前段 リアルタイムレンダリングのラスタ…

デモのgitはこちらです。 github.com 環境はこちらです。 Unity 2021.3.26f built-in pipeline 色も調整できるようにしてみています。 現実とリアルタイムグラフィクスの壁 Ambient Occlusion は直訳すると「環境遮蔽」です。 室内に目を向けると、天井と壁…

GLTFのUV座標系について知識不足だったので、メモを残しておきたいと思います。 結論、GLTF自体のフォーマットでは以下の図のようにUV座標は左上が原点（左上が(0,0)で右下が(1,1)）に設定されています。 ※画像は下記URLの図をスクショしたもの glTF™ 2.0 Sp…

生のWebGLを書いているときにCubeMap（環境マップ）がサンプルされる軸についてややこしくなったので整理したいと思います。 具体的には、WebGL2においてCubeMapの色を取得するために texture(samplerCube, vec3) で呼び出す際、 「どうサンプルされるのが正…

デモはこちらにおきました。 デモ https://takumifukasawa.github.io/float-to-rgba-tester/ リポジトリ GitHub - takumifukasawa/float-to-rgba-tester: float to rgba tester こちらが計算部分のjavascriptのソースになります。 class FloatPacker { stati…

おそらく特殊な状況だったと思うのですが、メモしておきます。 経緯としては、IdeaVimのアラート音を消したいためにideavimrcを編集していたのですが反映されない現象に出くわしていました。 RiderでVimのキーバインドを使う場合、IdeaVimを使うことになりま…

ちょっとハマったのでメモです。 WebWorkerのpostMessageでデータを送るとき、渡すことのできるデータとそうでないデータがあります。 これは構造化複製アルゴリズムが適用されているからです。たとえばFunctionオブジェクトは送ることができません。 develo…

Photoshopのレイヤーモードには、加算、乗算など様々な種類があります。 下のレイヤーに対して上のレイヤーの色をどう重ねるかの方式の設定になります。 WebGLで言うところのBlendModeに近い処理ですね。 例えば加算を設定した結果どういう色になるかは、感…

$ for i in *.webm; do ffmpeg -i "$i" "${i%.*}.mp4"; done を叩くことで一括変換できます。 もし mov にしたい場合は mp4 を mov に変更すればフォーマットが mov になります。

紙に火をつけると、どんどん炎が広がり紙が燃えていき、やがて消えてなくります。 ディゾルブシェーダーの境界にあたる部分は、燃えている場所・焦げている場所にあたると思います。 その境界からなにかしらのパーティクルを出してみたいなと考えていて、今…

簡易サーバーを立ち上げる際は python の HTTP Server を使うことが多いのですが、python2系とpython3系で微妙にコマンドが違います。 それぞれのバージョンで HTTP Server 用のモジュールが異なるためです。 具体的には、python3系だと python -m http.serv…

jsでシングルトン的なことを実現する場合、module や import / export を使用できる環境下では例えばこのように export でインスタンスを渡すことでシングルトン的な振る舞いをさせることができます。 module.exports = new Klass(); export default new Kla…

2の累乗判定をするときに、ビット演算だとかなりシンプルになることを知ったのでそのメモになります。 こちらがその関数です。 const isPowerOfTwo = x => (x & (x - 1)) === 0 原理は以下のようなものです。 数値が2の累乗の場合は必ず最上位ビットのみが1…

MacのvscodeでUnity C#の補完が効かなくなったので原因を探りました。 起こっていたこと 環境は、 mac OS は big sur, unity は 2019.4.25f です。 vscode の Omnisharp Log を見てみると、大きく2つのエラーが発生していました。 Could not load file or as…

現象 Timeline の graph view で key の位置やイージングの調整をしたいとき、下の画像のようにカーブ全体が表示されないという現象が度々発生して困ることが多くありました。 [Edit] -> [Shortcuts...] を覗いてみても、カーブ全体を表示するようなショート…

画像圧縮をする際、jpegminiやimagealphaなどのアプリを使ったりPCにインストールしたcli経由で行うことが多かったのですが、これらの方法だと画像圧縮の方法がプロジェクトの各人に依存してしまうという問題があります。 そこで、画像圧縮ツールもnpmで管理…

1年半ほど前にクローズになった、jsdoitというソースコード共有サービスがあります。 サービスが稼働している時は500以上のコードを上げていて、サービスクローズ前に全てのコードをローカルに落として個人のgoogle driveに保管していたのですが、パッと見返…

内容は短めですが、よく使うのでそのメモになります。 複雑なアニメーションなど、とあるPromiseがresolveになったら違うPromiseの状態の監視を始めたい場合が頻繁にあります。 thenで繋いでもよいのですが、Promiseが増えるごとにthenの記述も合わせて増え…

firebase functions と firebase hosting を併用しているプロジェクトで Basic認証をかけている時の Basic認証の対象の挙動が分からなかったので確認しました。 firebase で Basic認証をかける firebase で Basic 認証をかけるためには functions を使用する…

three.js で soft particle （ソフトパーティクル）を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 ...

ファイルアップローダーを作成する際、ファイルサイズを表示する場合にデザイン的に以下のあたりに気を使うことが多いのかなと思っています。 ファイルの容量に応じて適切な単位に切り替える 小数点以下第何位まで表示するか 例えば約3MBのファイルをアップ…

ここ3ヶ月ぐらいはずっと Nextjs SSR x typescript なフロントエンド開発を行っていました。 hooksが導入されてからのReactは初めてでしたが、hooksはロジックを分離するのにとてもいい方法だと感じました。 Reactのデザインパターンは、コンポーネントをど…

追記（2020/07/05） 解決法を発見しました。 onPlayerReadyでsetVolume(0)かmute()を呼んで明示的に音声をオフにしてからplayVideoを呼ぶと自動再生されました。 ↓ 検証コードはこちらになります codepen.io ただ、自動再生後に音量をスライダーなどで変えて…

WebWorkerのスクリプトを別ファイルではなくバンドルファイルに含めたい場面があったので、インラインで記述する方法を試しました。 developer.mozilla.org blob経由でworkerスクリプトのオブジェクトURLを生成することによって実現させました。 ただ欠点と…

先日、GatsbyJSでサイトを構築していた際、Basic認証がかけられた開発環境用のサーバーにビルドしたファイル群を置くと、表題のようにページをロードする度にBasic認証の入力を求められてしまう現象が発生しました。iOS13 safariでは発生し、PC Chrome では…

以前LeapMotionを入手した際に、UE4のNiagaraと連携させてみました。 takumifukasawa.hatenablog.com 今回はUnityでVFXGraphと連携させてみたいと思います。 最終的にはこのようなものをつくっていきます。 環境 方針 1. LeapMotionの導入 2. Unityプロジェ…

最終的なデモはこちらです。ビルボードの板ポリのパーティクルを生成しています。 See the Pen 【Threejs】Billboard Shader: Particles by takumifukasawa (@takumifukasawa) on CodePen. ビルボードとは いつ使うか three.jsでビルボード 考え方・実装方法…

※内容は以前書いたこちらの記事と同じでさらに文章に校正を加えたものになります。jsdo.itをデモとして使っていたのですがjsdo.itがクローズになってデモが動作しなくなったのでデモをcodepenに移したためです。 CSSスプライトアニメーションをGPUレンダリン…