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レンダリン…

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

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

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

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

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

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

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

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

環境 Windows10 UE4.23.1 起こったこと UE4 で LeapMotion を使うには、プラグインを有効にし、LeapMotion Content / ExamplesのLeapDesktopActorをLevelに配置するだけで手の動きに連動したメッシュの表示を行うことができます。 しかし、Actorを配置したあ…