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

WebAssembly によりウェブで利用可能になったツールのショーケース。

Thomas Nattestad
Thomas Nattestad

WebAssembly を使用すると、デベロッパーは他の言語からウェブに新しい高性能機能を導入できます。過去数年間、デベロッパーはこうした可能性を最大限に活用してきました。この記事では、WebAssembly のおかげで利用できる新機能の一部をご紹介します。

すぐに使用できるツールとライブラリ

では、早速本題に入りましょう :D

SQLite

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

FFmpeg.wasm

FFmpeg は、動画、音声、その他のマルチメディア ファイルやストリームを処理するための一連のライブラリとプログラムで構成される、無料のオープンソース ソフトウェア プロジェクトです。wasm コンパイル済みバージョンGitHub リポジトリ)では、これらの機能をすべてブラウザで直接実行できます。

ユニバーサル シーン記述(USD)

Universal Scene Description(USD)は、コラボレーション、非破壊編集、グラフィック データに関する複数のビューと意見の有効化に重点を置いた 3D コンピュータ グラフィック データのフレームワークです。これは、Pixar、Autodesk、Nvidia などの企業がサポートする業界標準です。ウェブでのサポートはまだ始まったばかりですが、Autodesk はすでにウェブベースの USD ビューアをオープンソース化しています。こちらで確認できます。

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 とスレッドがこれらのワークロードのパフォーマンスを向上させる方法については、Modern WebAssembly Chrome Dev Summit トークのこのセクションをご覧ください。

ココス

Cocos は、デベロッパーがクロス プラットフォーム サポート(ウェブを含む)でゲームを構築できる、強力で人気のあるゲームエンジンです。これは、wasm を介してウェブ エクスポートを可能にするゲームエンジンの長いリストに加わります。始める前に、Cocos エディタに移動し、こちらの手順に沿って操作します。

まとめ

これらの具体的な例に加えて、WebAssembly が新しいウェブ機能のペースを変える可能性があるという点でも、期待できる点はたくさんあります。Chrome では、デベロッパーがウェブ機能を向上させるための開発資金を調達できる高度なウェブアプリ ファンドも設立されています。

PexelsAnn Marie Kennon によるヒーロー画像。