ブックマーク / techblog.kayac.com (2)

  • 【WebGL】three.js : soft particle - KAYAC engineers' blog

    ~ この記事はTech KAYAC Advent Calendar 2020の18日目の記事になります ~ こんにちは!クライアントワークチーム・フロントエンドエンジニアの深澤です。web や unity の実装を担当しています。 今日は three.js で soft particle (ソフトパーティクル)を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴 実装方針 three.jsでの実装 JavaScript GLSL 改善点 霧の表現 最後に ソフトパーティクルについて ソフトパーティクルとは おおまかに一言でまとめると「深度値の比較をして透過率

    【WebGL】three.js : soft particle - KAYAC engineers' blog
  • WebGL2でCPUベースのレイトレーシングをやってみた - KAYAC engineers' blog

    この記事はKAYAC Advent Calendar 2021の22日目の記事になります。 こんにちは!ハイカジチームの深澤と申します。 今回は実際の業務とは関係なく、自由研究的にやってみたことの記事になります。 数ヶ月ほど前に iOS15, macOS Monterey が登場し、ついに iOS / macOS ともに safari で WebGL2 が標準で使えるようになりました。この出来事はWebフロント界隈からするととても嬉しいお知らせでした。 そのことを思い出し、アドベントカレンダーでは WebGL2を使った何かを題材にしようと決め、前々からやってみたかった「ブラウザでCPUベースでレイトレをし3Dモデルを表示する」ことに取り組んでみたという経緯になります。 ここでいう「CPUベース」とは、「レイトレのピクセル計算をjavarcript側で行うこと」を指します。 目次 目次 はじ

    WebGL2でCPUベースのレイトレーシングをやってみた - KAYAC engineers' blog
  • 1