WebAssembly が提供するデベロッパー向け新機能

WebAssembly によってウェブで利用できるツールのショーケース

Thomas Nattestad
Thomas Nattestad

WebAssembly を使用すると、デベロッパーは他の言語からウェブに新しい高性能な機能をもたらすことができます。ここ数年、デベロッパーはさまざまな可能性を存分に活用してきました。この投稿では、WebAssembly などのおかげで活用できる新しいツールのごく一部をご紹介します。

それでは早速本題に入りましょう。

SQLite

この SQLite の完全なポートにより、軽量で埋め込みのリレーショナル データベース管理システムを手に入れることができます。詳しくは、この素晴らしいポートとその使用方法を紹介するブログ投稿をご覧ください。

FFmpeg.wasm

FFmpeg は、ビデオ、オーディオ、その他のマルチメディアファイルやストリームを処理するためのライブラリとプログラムのスイートで構成される、無料のオープンソースソフトウェアプロジェクトです。Wasm コンパイル バージョンはこちらGitHub リポジトリ)で、これらすべてをブラウザ内で直接行うことができます。

ユニバーサル シーンの説明(米ドル)

Universal Scene Description(USD)は、コラボレーション、非破壊的な編集、グラフィック データに関する複数の見解や意見の活用に重点を置いた 3D コンピュータ グラフィック データ向けのフレームワークです。Pixar、Autodesk、Nvidia などにサポートされている業界標準です。ウェブサポートはまだ初期段階ですが、Autodesk はすでにウェブベースの米ドルビューアをオープンソース化しています。詳しくはこちらをご覧ください。

CanvasKit

CanvasKit は、Chrome と Android のレンダリング エンジンである Skia です。WebAssembly に直接コンパイルされます。これにより、Skia レンダリング エンジンのほぼすべての機能への簡単な JavaScript API アクセスが可能になります。この機能には、複雑なレンダリング、テキストのシェーピング、アニメーション、インクなどが含まれます。npm パッケージクイックスタート ガイドをご確認ください。

TensorFlow.js

TensorFlow.js は、シンプルな JavaScript API を使用して、TensorFlow の機能をブラウザに直接組み込みます。内部では、GPU と CPU の両方でモデルを最適化し(SIMD 最適化を含む)、パフォーマンスを最大化します。スタートガイドまたは一部のデモをご覧ください。

OpenCV

OpenCV は、主にリアルタイム コンピュータ ビジョン用のプログラミング関数の業界標準です。使いやすい npm パッケージをこちらに用意しています。Emscripten ユーザー向けに、フルビルドを実行するための詳細な手順も用意されています。このようなワークロードのパフォーマンスを SIMD とスレッドがどのように改善するかについては、Chrome Dev Summit の Modern WebAssembly の講演のこちらのセクションをご覧ください。

ココス

Cocos は、デベロッパーがクロス プラットフォームに対応したゲームを開発できる、パワフルで人気のあるゲームエンジンです。Cocos は、ウェブもその対象となっています。このソリューションは、Wasm によるウェブ エクスポートを可能にする多くのゲームエンジンに加わっています。使用を開始するには、Cocos エディタに移動してこちらの手順をご覧ください。

おわりに

これらの具体的な例以外にも、新しいウェブ機能のペースを変える可能性がある WebAssembly の可能性という観点から、注目すべき点が多数あります。Chrome では、Advanced Web Apps Fund も立ち上げています。この基金では、すべてのデベロッパーが利用できるウェブ機能を発展させるための作業の資金として、デベロッパーを支援できます。

Pexels のヒーロー画像(作成者: Ann Marie Kennon