メインコンテンツへスキップ

All Posts

News bits

ChartGPU 0.1が公開、WebGPUベースの高性能チャートライブラリ

WebGPUを活用した新しいオープンソースのチャートライブラリ「ChartGPU」が公開された。Canvas2Dや従来のWebGLベースのライブラリでは困難だった、100万点を超える大規模データセットの60fpsでのスムーズなレンダリングを実現する。

主な特徴:

  • WebGPUネイティブ: CPU負荷を抑え、GPUの計算能力を最大限に活用
  • 多様なチャート: Line, Area, Bar, Scatter, Pie, Candlestickに対応
  • インタラクション: ズーム、パン、ツールチップなどの操作がスムーズ
  • React対応: chartgpu-react パッケージによる容易な統合

現在はWebGPUをサポートするChrome, Edge, Safariなどのモダンブラウザで動作する。FirefoxはWebGPUが開発中のため未対応。

出展:ChartGPU/ChartGPU

主要なブラウザで WebGPU がサポート

高性能3DグラフィックスとGPU計算を実行するための新しいAPI「WebGPU」が、Chrome、Edge、Firefox、Safariのすべての主要ブラウザで正式にサポートされた。 これにより、ブラウザ内でのAAA級ゲーム、複雑な3Dモデリング、高度なAIアプリケーションの実行が可能になる。

各ブラウザの対応状況:

  • Chrome/Edge: Windows (Direct3D 12), macOS, ChromeOS (v113以降), Android (v121以降)
  • Firefox: Windows (v141以降), macOS Tahoe (v145以降)
  • Safari: macOS Tahoe, iOS/iPadOS/visionOS 26

また、Babylon.js、Three.js、PlayCanvas、ONNX Runtimeなどの主要ライブラリもすでにWebGPUをサポートしている。

出展:主要なブラウザで WebGPU がサポートされるようになりました

Safari 26.0、Web GPUやScroll-driven Animationsなど多数の新機能

Safari 26.0リリース。多数の新機能が追加。

  • CSS
    • Scroll-driven Animationsのサポート
    • CSS Anchor Positioningのサポート
    • animation-rangeの::markerサポート
    • progress()のサポート
    • overflow-blockとoverflow-inlineのサポート
    • margin-trim: block inlineのサポート
    • contrast-color()のサポート
    • text-wrap-style: prettyのサポート
    • 絶対配置のalign-selfとjustify-selfサポート
      • position: absolute; align-self: center;による中央寄せなどが可能
  • HTML
    • SVG icons及びdata:URL iconsのサポート
      • faviconやスタートページなどのアイコンとしてSVG及びData URLを利用出来るように
    • HDR画像のサポート
    • 任意のWebサイトをWebアプリにするサポート
  • JavaScript/Web API

出展:Safari 26.0 Release Notes

Chrome 121

Chrome 121 がリリースされました。

https://developer.chrome.com/blog/new-in-chrome-121?hl=en

Qualcomm および ARM の GPU を搭載した Android 12 以上のデバイスにおいて、WebGPU がデフォルトで有効になりました。他にも WebGPU の機能がいくつか追加されています。

https://developer.chrome.com/blog/new-in-webgpu-121?hl=ja

DOM API などではないですが、ブラウザ自体の機能として生成 AI を利用したタブの整理、テーマの作成、フォーム入力支援機能が追加されました。

https://blog.google/products/chrome/google-chrome-generative-ai-features-january-2024/

他、CSS の変更としては、font-palette による CSS アニメーションのサポート、scrolllbar-color と scrollbar-width によるスクロールバーのカスタマイズ、::spelling-error::grammer-errorを利用したスペルエラーや文法エラーのカスタマイズが出来るようになりました。

Deno 1.39

2023 年 12 月 14 日に Deno 1.39 がリリースされました。

https://deno.com/blog/v1.39

次のような変更がありました。

  • WebGPU API の再導入
  • HTML 形式のカバレッジレポートを表示 deno coverage --html
  • Jest の expect と互換があるstd/expectが追加
  • コマンドライン引数をパースするstd/cliの追加

From WebGL to WebGPU

https://developer.chrome.com/en/blog/from-webgl-to-webgpu/

WebGL と WebGPU の比較記事が Chrome for Developers で公開されました。

WebGPU では、コンピューティングシェーダーなど処理が効率的なだけでなく、WebGL のように多くのグローバル状態を持たずステートレス、非同期が基本になっているなど、開発者体験も向上しています。

Chrome 113

Chrome 113 がリリース。

出展:New in Chrome 113

#WebGPU API

WebGL にはいくつか問題がありました。

  • WebGL の登場以降、新たなネイティブ GPU API が登場しましたが、OpenGL(WebGL)に更新は予定されていないため、新機能が利用できない
  • WebGL はグラフィックをキャンバスにレンダリングするというケースを前提にしていたため、GPGPU などは不得意

WebGPU はこれらの問題に対応した WebGL の後継として作られ、最新 GPU API との互換性向上、GPGPU のサポート、より高度な GPU 機能へのアクセスを提供します。

また API は Promise が使える他、関数名などもまともなため、WebGL と比べるとかなり使いやすくなっています。とはいえ、実際利用する際は何らかのライブラリを使うことが多いと思います。既に有名な WebGL ライブラリは WebGPU サポートに取り込んでおり、特に Babylon.js は完全なサポートを既に提供しています。

https://doc.babylonjs.com/setup/support/webGPU

#レスポンスヘッダーの上書き

DevTools でレスポンスヘッダーを上書きできるようになりました。

https://developer.chrome.com/blog/new-in-devtools-113/

#CSS update Media Query

https://developer.chrome.com/blog/css-update-media-query/

あまり使う機会はないと思いますが、デバイスのリフレッシュレート(デバイスのアニメーションや更新の頻度)によってスタイルを分けることが出来ます。

jsx
@media (update: slow) {
   // ....
}

リフレッシュレートは以下の 3 つから選びます。

fast:通常のコンピュータやスマホなど

slow:電子書籍リーダーなど

none:紙に印刷されるドキュメントなど

著者について

Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.

In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.

In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.

In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.

I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.