Javascript
デモはこちらにおきました。 デモ https://takumifukasawa.github.io/float-to-rgba-tester/ リポジトリ GitHub - takumifukasawa/float-to-rgba-tester: float to rgba tester こちらが計算部分のjavascriptのソースになります。 class FloatPacker { stati…
ちょっとハマったのでメモです。 WebWorkerのpostMessageでデータを送るとき、渡すことのできるデータとそうでないデータがあります。 これは構造化複製アルゴリズムが適用されているからです。たとえばFunctionオブジェクトは送ることができません。 develo…
内容は短めですが、よく使うのでそのメモになります。 複雑なアニメーションなど、とあるPromiseがresolveになったら違うPromiseの状態の監視を始めたい場合が頻繁にあります。 thenで繋いでもよいのですが、Promiseが増えるごとにthenの記述も合わせて増え…
追記（2020/07/05） 解決法を発見しました。 onPlayerReadyでsetVolume(0)かmute()を呼んで明示的に音声をオフにしてからplayVideoを呼ぶと自動再生されました。 ↓ 検証コードはこちらになります codepen.io ただ、自動再生後に音量をスライダーなどで変えて…
WebWorkerのスクリプトを別ファイルではなくバンドルファイルに含めたい場面があったので、インラインで記述する方法を試しました。 developer.mozilla.org blob経由でworkerスクリプトのオブジェクトURLを生成することによって実現させました。 ただ欠点と…
先日、GatsbyJSでサイトを構築していた際、Basic認証がかけられた開発環境用のサーバーにビルドしたファイル群を置くと、表題のようにページをロードする度にBasic認証の入力を求められてしまう現象が発生しました。iOS13 safariでは発生し、PC Chrome では…
最終的なデモはこちらです。ビルボードの板ポリのパーティクルを生成しています。 See the Pen 【Threejs】Billboard Shader: Particles by takumifukasawa (@takumifukasawa) on CodePen. ビルボードとは いつ使うか three.jsでビルボード 考え方・実装方法…
リアルタイムレンダリングにおいてアウトラインを生成する方法はいくつかあります。 背面カリングを利用した方法や、ポストプロセスによる生成が主かと思います。 今回は前者の、背面カリングを使ったアウトライン表現を行ってみたいと思います。 デモ 手法…
はじめに 作ったもの 環境 CPU版 デモ コード GPU版 デモ コード 比較 結果 参考 はじめに ブラウザでレイマーチングを行うには、WebGLを使ってシェーダーで書くのが一般的なやり方かと思います。むしろ、高いFPSを実現するにはそれ以外の方法は実質難しいは…
