takumifukasawa’s blog

WebGL, Shader, Unity, UE4

Javascript

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

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

【Javascript】Promiseを直列実行

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

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 では…

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

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

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

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

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

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