All Posts
News bits
ChartGPU 0.1が公開、WebGPUベースの高性能チャートライブラリ
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が開発中のため未対応。
主要なブラウザで WebGPU がサポート
主要なブラウザで 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をサポートしている。
Safari 26.0、Web GPUやScroll-driven Animationsなど多数の新機能
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:URLiconsのサポート- faviconやスタートページなどのアイコンとしてSVG及びData URLを利用出来るように
- HDR画像のサポート
- 任意のWebサイトをWebアプリにするサポート
- SVG icons及び
- JavaScript/Web API
- WebGPUのサポート
- Dialogのtoggleイベントをサポート
- WebCodec APIのAudioEncoderとAudioDecoderをサポート
- URLPattern APIのサポート
- 例:
new URLPattern({pathname: '/notes/:slug' }).test("https://....")
- 例:
- File System WritableStream APIのサポート
- Digital Credentials APIのサポート
- WebAuthn Signal APIのサポート
- Trusted Types APIのサポート
- ユーザー入力に基づいてHTMLの描画やJavaScriptの実行を行う際にXSS攻撃を防止する目的で利用する
Chrome 121
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
Deno 1.39
2023 年 12 月 14 日に Deno 1.39 がリリースされました。
次のような変更がありました。
- WebGPU API の再導入
- HTML 形式のカバレッジレポートを表示
deno coverage --html - Jest の expect と互換がある
std/expectが追加 - コマンドライン引数をパースする
std/cliの追加
From WebGL to WebGPU
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
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 は完全なサポートを既に提供しています。
レスポンスヘッダーの上書き
DevTools でレスポンスヘッダーを上書きできるようになりました。
CSS update Media Query
https://developer.chrome.com/blog/css-update-media-query/
あまり使う機会はないと思いますが、デバイスのリフレッシュレート(デバイスのアニメーションや更新の頻度)によってスタイルを分けることが出来ます。
@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.