【WebGL】three.js : soft particle - KAYAC engineers' blog
~ この記事はTech KAYAC Advent Calendar 2020の18日目の記事になります ~ こんにちは！クライアントワークチーム・フロントエンドエンジニアの深澤です。web や unity の実装を担当しています。 今日は three.js で soft particle （ソフトパーティクル）を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴 実装方針 three.jsでの実装 JavaScript GLSL 改善点 霧の表現 最後に ソフトパーティクルについて ソフトパーティクルとは おおまかに一言でまとめると「深度値の比較をして透過率
WebGL2でCPUベースのレイトレーシングをやってみた - KAYAC engineers' blog
この記事はKAYAC Advent Calendar 2021の22日目の記事になります。 こんにちは！ハイカジチームの深澤と申します。 今回は実際の業務とは関係なく、自由研究的にやってみたことの記事になります。 数ヶ月ほど前に iOS15, macOS Monterey が登場し、ついに iOS / macOS ともに safari で WebGL2 が標準で使えるようになりました。この出来事はWebフロント界隈からするととても嬉しいお知らせでした。 そのことを思い出し、アドベントカレンダーでは WebGL2を使った何かを題材にしようと決め、前々からやってみたかった「ブラウザでCPUベースでレイトレをし3Dモデルを表示する」ことに取り組んでみたという経緯になります。 ここでいう「CPUベース」とは、「レイトレのピクセル計算をjavarcript側で行うこと」を指します。 目次 目次 はじ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
