【ITニュース解説】Using SIMD in WebAssembly (Part 1)

WebAssemblyは、WebブラウザやNode.jsなどの環境で高性能なコードを実行するための技術であり、Webアプリケーションの可能性を大きく広げている。そのWebAssemblyの性能をさらに引き上げる強力な技術の一つがSIMDである。SIMDは「Single Instruction Multiple Data」の略で、日本語にすると「単一命令複数データ」となる。これは、CPUが一度に一つの命令で複数のデータを処理する仕組みを指す。一つずつ個別に処理するのではなく、複数のデータをまとめて効率的に扱うための技術である。この並列処理によって、特に計算量の多い処理を高速化できる。具体的な応用例としては、音声や動画のエンコード・デコード、画像処理、3Dグラフィックスの計算といった分野が挙げられる。これらのアプリケーションでは大量のデータを繰り返し処理する必要があるため、SIMDによる効率化が大きな性能向上につながる。

WebAssemblyにおけるSIMDも、CPUのSIMDと同じ基本的な考え方に基づいている。WebAssemblyのSIMD命令セットは、現状では128ビットという固定長のデータを一度に処理することに特化している。これは、16バイト分のデータを同時に扱えるという意味だ。例えば、32ビットの整数なら4つ、8ビットの整数なら16個といった具合である。主要なWebブラウザやサーバーサイドのJavaScript実行環境であるNode.jsでは、すでにWebAssembly SIMDがサポートされている。具体的には、Google Chromeはバージョン91（2021年5月）以降、Mozilla Firefoxはバージョン89（2021年6月）以降、Apple Safariはバージョン16.4（2023年3月）以降、Node.jsはバージョン16.4（2021年6月）以降で利用可能だ。しかし、全てのユーザーが最新の環境を使っているわけではないため、SIMDを利用する際には、ユーザーの環境がSIMDをサポートしているかを確認することが非常に重要となる。

SIMDをプロジェクトに導入する際は、「プログレッシブエンハンスメント」という考え方を用いることが推奨される。これは、基本的な機能を全てのユーザーに提供しつつ、より新しい技術や機能に対応できる環境のユーザーには、さらに高度な体験を提供する、というアプローチだ。SIMDの場合、具体的にはSIMD命令を利用しない通常のWebAssemblyモジュールと、SIMD命令を利用する最適化されたWebAssemblyモジュールの二つのバージョンを用意する。そして、アプリケーションが実行される環境でSIMDがサポートされているかどうかを検出する。この検出には、wasm-feature-detectというライブラリが便利だ。このライブラリは、SIMDだけでなく、64ビットメモリやマルチスレッドといったWebAssemblyの様々な機能のサポート状況を検出できる。検出結果に基づいて、SIMDが利用できる環境であればSIMD版のモジュールを、利用できない環境であれば非SIMD版のモジュールを動的にロードすることで、幅広いユーザーにサービスを提供しながら、最新環境のユーザーには最高のパフォーマンスを提供できるわけである。

WebAssembly SIMDの命令セットは多岐にわたるが、その基本的な考え方は、複数のデータを一括して処理する点にある。命令は、メモリからデータを読み書きする「ロード/ストア」命令、定数ベクトルを作成する命令、複数の整数や浮動小数点数を同時に計算する「算術演算」命令、複数の値の大小関係や等価性を比較する「比較」命令、ビット単位での操作を行う「ビット演算」命令、データの並び順を変更したり、特定の要素を取り出したりする「レーン操作」命令、異なるデータ型間で変換を行う「型変換」命令などがある。例えば、v128.load命令はメモリから128ビットのデータをベクトルとして読み込み、i8x16.add命令は16個の8ビット整数を同時に加算するといった具合だ。これらの命令を組み合わせることで、データの並列処理を効率的に記述できる。

SIMDがもたらす性能向上を具体的に理解するために、画像の色反転処理を例に見てみよう。画像は通常、ピクセルごとにRGB（赤、緑、青）とアルファチャンネル（透明度）の4バイトで構成されていることが多い。色反転処理は、各RGB値に対して「255 - 元の値」という計算を行うことで実現できる。

SIMDを利用しない一般的なWebAssemblyコードでは、一つのピクセル、つまり4バイトのデータを繰り返し処理する。具体的には、メモリからR値を読み込み、255から引いて、その結果をメモリに書き戻す。次にG値、B値に対しても同様の処理を繰り返す。そして次のピクセルへ進み、これを画像全体のピクセル数だけ繰り返すことになる。この方式では、R, G, Bの各チャネルに対して個別にメモリの読み書きと計算が行われるため、処理の効率は比較的低い。

一方、SIMDを利用したWebAssemblyコードでは、128ビット（16バイト）のデータを一度に処理する。これは、4ピクセル分のRGBaデータに相当する。まず、メモリから16バイトのデータを一度に読み込み、それをベクトルとして扱う。次に、全ての要素が255である128ビットの定数ベクトルを用意し、この255ベクトルから読み込んだピクセルデータベクトルをi8x16.sub命令を使って一括で減算する。これにより、4ピクセル分のR, G, B値が同時に反転される。アルファチャンネルは反転させたくないため、SIMDではマスクという技術を利用する。アルファチャンネルの位置にのみ255を、それ以外の位置に0を持つマスクベクトルを用意し、v128.bitselect命令を使って、マスクが255の箇所は元のアルファチャンネルの値を保持し、マスクが0の箇所は反転後のRGB値を適用するという処理を行う。最後に、この処理済みの16バイトのベクトルデータをメモリに一括で書き戻す。このように、SIMDでは複数のデータをまとめて読み込み、まとめて計算し、まとめて書き出すことで、大幅な効率化が図られる。

この画像色反転の例では、928×927ピクセルの画像に対して、SIMDを使わない方法では約2.9ミリ秒かかった処理が、SIMDを使うことでわずか0.5ミリ秒に短縮された。これは、約6倍もの高速化を意味する。画像のサイズが大きくなればなるほど、このSIMDによる高速化の恩恵はさらに大きくなる。SIMDは、WebAssemblyで動作する計算集約型アプリケーションの性能を飛躍的に向上させるための、非常に有効な手段なのだ。

この解説はWebAssemblyにおけるSIMDの基礎とその利用方法、具体的な効果について説明した。SIMDは、これからのWebアプリケーション開発において、特に高性能が求められる分野で重要な役割を果たす技術となるだろう。