takumifukasawa’s blog

WebGL, Shader, Unity, UE4

WebWorkerではプライベートフィールドを渡すことができない

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

【Photoshop】レイヤーモードのオーバーレイの原理

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

【ffmpeg】ディレクトリ内の複数webmファイルを一括でmp4に変換

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

【Unity】ディゾルブシェーダーの境界からパーティクルを出す

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

【Shell】Python2, Python3 のどちらのバージョンでも HTTP Server を立ち上げる Shell Script

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

【Javascript】素のjsでシングルトンクラスを実装する(ver. 2021/7)

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

【Javascript】ビット演算で2の累乗判定する関数

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

【vscode】MacのUnity開発でC#の補完が動かなくなったので対処

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

【Unity】Timelineで枠外に隠れたカーブの全体を表示するショートカット

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

【Node.js】画像群を一括圧縮するスクリプト

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

サービスがクローズしたjsdoitのコードをgithub-pagesに移行するまで

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

【Javascript】Promiseを直列実行

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

【firebase】functions x hosting 環境でBasic認証をかけている時のBasic認証の挙動確認

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

【WebGL】three.js : soft particle

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

【typescript】ファイルの容量を元に適切なファイルサイズの数値と単位を返す関数

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

【React】timeout を管理する様々な custom hooks

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

YoutubeのIFrame Playerでcontrolsをオフにすると自動再生がされない

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

【Javascript】WebWorkerのスクリプトをインラインで記述する

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

【GatsbyJS】Basic認証下でiOS safariからページを開くとリロードする度に認証を求められる場合の対処法

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

【Unity】LeapMotion と VFXGraph を連携させる

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

【three.js】ビルボードシェーダー

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

CSSスプライトアニメーションをGPUレンダリングさせる

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

【WebGL】Google Chrome の Hardware Acceleration 無効時の挙動

WebGL開発をする際に、Chromeのハードウェアアクセラレーションを無効にしたときでもWebGLコンテンツを動作させたい機会があり、挙動を調べる機会があったのでメモとして残しておきます。 設定方法の変更 有効・無効時のブラウザの機能の違い Chrome と CPU…

【three.js】背面カリングを用いたアウトライン表現

リアルタイムレンダリングにおいてアウトラインを生成する方法はいくつかあります。 背面カリングを利用した方法や、ポストプロセスによる生成が主かと思います。 今回は前者の、背面カリングを使ったアウトライン表現を行ってみたいと思います。 デモ 手法…

【Unity】AzureKinectの環境構築・接続

AzureKinectを使う機会があったので、セットアップとミニマムな疎通確認までをまとめておきたいと思います。 azure.microsoft.com 環境 手順 1. Azure Kinect SDK をダウンロード 2. SDKのインストール 3. Unityプロジェクトを作成 4. NuGet をUnityPackage…

【Unity】CSVを読み込むC#クラス

CSVファイルを読み込んでパースするクラスを、MonoBehaviourではなくC#クラスとして欲しい場面があったので作成してみました。 まず、コードの全文はこちらです。 gist.github.com Assets/Resources/ 以下に入っているCSVファイルを読み込みます。 例えば As…

【SparkAR】リムライト風シェーダー

SparkARは、簡単なシェーディングであればパッチエディターでノードを組み合わせることで実現できるのですが、それだけでは難しい表現の場合はJSでスクリプトを書く必要があります。 なぜスクリプトかと言うと、SparkARではシェーダーを直接書くことができず…

【Javascript】ブラウザでシェーダーを使わずにレイマーチングをしてみる

はじめに 作ったもの 環境 CPU版 デモ コード GPU版 デモ コード 比較 結果 参考 はじめに ブラウザでレイマーチングを行うには、WebGLを使ってシェーダーで書くのが一般的なやり方かと思います。むしろ、高いFPSを実現するにはそれ以外の方法は実質難しいは…

【CSS】filterやcanvasを使わずにテキストにぼかし処理をかけたように見せる

動的にテキストにぼかし(ブラー)をかける場合、cssのfilterプロパティを使ったり、Context2DやWebGLで画像処理的にブラーをかける方法が考えられます。 developer.mozilla.org 今回は、それ以外の方法であたかもブラー処理を施しているかのように見せる手…

【UE4】LeapMotion と Niagara を連携させる

先日、LeapMotionを入手しました。LeapMotionはざっくり言うと手を検出するデバイスです。VR向けのコントローラーとして使われることもあるみたいです。 developer.leapmotion.com これまで LeapMotion を使ったことがなかったので、いろいろ遊んでみること…