人気の高いアプリの多くは、画像や動画にフィルタやエフェクトを適用できます。この記事では、オープンウェブにこれらの機能を実装する方法について説明します。
動画と画像のプロセスは基本的に同じですが、動画に関する重要な考慮事項については最後に説明します。この記事全体を通して、「画像」は「画像または動画の 1 フレーム」を意味していると仮定します。
画像のピクセルデータを取得する方法
一般的な画像操作には、次の 3 つの基本的なカテゴリがあります。
- コントラスト、明るさ、色温度、セピアトーン、彩度などの Google Pixel のエフェクト。
- シャープニング、エッジ検出、ぼかしなどの畳み込みフィルタと呼ばれるマルチピクセル効果。
- 画像全体の歪み（切り抜き、傾斜、伸ばし、レンズ効果、波紋など）。
これらすべての処理で、ソース画像の実際のピクセルデータを取得し、そこから新しい画像を作成します。そのための唯一のインターフェースはキャンバスです。
したがって、本当に重要な選択は、処理を CPU で 2D キャンバスを使用して行うのか、GPU で WebGL を使用して行うのかです。
2 つのアプローチの違いを簡単に説明します。
2D キャンバス
これは、2 つのオプションの中では間違いなく最も簡単な方法です。まず、キャンバスに画像を描画します。
const source = document.getElementById('source-image');
// Create the canvas and get a context
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// Set the canvas to be the same size as the original image
canvas.width = source.naturalWidth;
canvas.height = source.naturalHeight;
// Draw the image onto the top-left corner of the canvas
context.drawImage(theOriginalImage, 0, 0);
次に、キャンバス全体のピクセル値の配列を取得します。
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;
この時点で、pixels 変数は長さが width * height * 4 の Uint8ClampedArray です。配列要素はすべて 1 バイトであり、配列内の 4 つの要素が 1 ピクセルの色を表します。4 つの各要素は、赤、緑、青、アルファ（透明度）の量をこの順序で表します。ピクセルは左上隅から、左から右、上から下の順に並べられます。
pixels[0] = red value for pixel 0 pixels[1] = green value for pixel 0 pixels[2] = blue value for pixel 0 pixels[3] = alpha value for pixel 0 pixels[4] = red value for pixel 1 pixels[5] = green value for pixel 1 pixels[6] = blue value for pixel 1 pixels[7] = alpha value for pixel 1 pixels[8] = red value for pixel 2 pixels[9] = green value for pixel 2 pixels[10] = blue value for pixel 2 pixels[11] = alpha value for pixel 2 pixels[12] = red value for pixel 3 ...
座標から特定のピクセルのインデックスを取得するには、簡単な式があります。
const index = (x + y * imageWidth) * 4;
const red = pixels[index];
const green = pixels[index + 1];
const blue = pixels[index + 2];
const alpha = pixels[index + 3];
このデータを自由に読み書きできるため、考えられるあらゆる効果を適用できます。ただし、この配列はキャンバスの実際のピクセルデータのコピーです。編集したバージョンを書き戻すには、putImageData メソッドを使用して、キャンバスの左上に書き戻す必要があります。
context.putImageData(imageData, 0, 0);
WebGL
WebGL は大きなトピックであり、1 つの記事で十分に説明するには大きすぎます。WebGL について詳しくは、この記事の最後にあるおすすめの参考書籍をご覧ください。
ただし、ここでは、単一の画像を操作する場合に必要な手順を簡単に説明します。
WebGL について覚えておくべき最も重要なことの 1 つは、WebGL が 3D グラフィック API ではないということです。実際、WebGL（および OpenGL）で得意なことは、三角形の描画です。アプリでは、実際に描画する内容を三角形で記述する必要があります。2D 画像の場合、長方形は 2 つの類似する直角三角形で、その斜辺が同じ位置に配置されているため、非常に簡単です。
基本的なプロセスは次のとおりです。
- 三角形の頂点（ポイント）を記述するデータを GPU に送信します。
- ソース画像をテクスチャ（画像）として GPU に送信します。
- 「頂点シェーダー」を作成する。
- 「フラグメント シェーダー」を作成する。
- シェーダー変数（ユニフォーム）を設定します。
- シェーダーを実行します。
詳しく見てみましょう。まず、グラフィック カードに頂点バッファと呼ばれるメモリを割り当てます。各三角形の各点を記述するデータを格納します。ユニフォームと呼ばれる変数を設定することもできます。これは、両方のシェーダーでグローバル値になります。
頂点シェーダーは、頂点バッファのデータを使用して、各三角形の 3 つの点を画面上のどこに描画するかを計算します。
GPU はキャンバス内のどのピクセルを描画する必要があるかを認識します。フラグメント シェーダーはピクセルごとに 1 回呼び出され、画面に描画する色を返す必要があります。フラグメント シェーダーは、1 つ以上のテクスチャから情報を読み取って色を決定できます。
フラグメント シェーダーでテクスチャを読み取るときは、0（左または下）から 1（右または上）の間の 2 つの浮動小数点座標を使用して、読み取る画像の部分を指定します。
ピクセル座標に基づいてテクスチャを読み取る場合は、ピクセル単位のテクスチャのサイズを均一なベクトルとして渡して、ピクセルごとに変換できるようにする必要があります。
varying vec2 pixelCoords;
uniform vec2 textureSize;
uniform sampler2D textureSampler;
main() {
vec2 textureCoords = pixelCoords / textureSize;
vec4 textureColor = texture2D(textureSampler, textureCoords);
gl_FragColor = textureColor;
}
Pretty much every kind of 2D image manipulation that you might want to do can be done in the
fragment shader, and all of the other WebGL parts can be abstracted away. You can see [the
abstraction layer](https://github.com/GoogleChromeLabs/snapshot/blob/master/src/filters/image-shader.ts) (in
TypeScript) that is being in used in one of our sample applications if you'd like to see an example.
### Which should I use?
For pretty much any professional quality image manipulation, you should use WebGL. There is no
getting away from the fact that this kind of work is the whole reason GPUs were invented. You can
process images an order of magnitude faster on the GPU, which is essential for any real-time
effects.
The way that graphics cards work means that every pixel can be calculated in it's own thread. Even
if you parallelize your code CPU-based code with `Worker`s, your GPU may have 100s of times as many
specialized cores as your CPU has general cores.
2D canvas is much simpler, so is great for prototyping and may be fine for one-off transformations.
However, there are plenty of abstractions around for WebGL that mean you can get the performance
boost without needing to learn the details.
Examples in this article are mostly for 2D canvas to make explanations easier, but the principles
should translate pretty easily to fragment shader code.
## Effect types
### Pixel effects
This is the simplest category to both understand and implement. All of these transformations take
the color value of a single pixel and pass it into a function that returns another color value.
There are many variations on these operations that are more or less complicated. Some will take into
account how the human brain processes visual information based on decades of research, and some will
be dead simple ideas that give an effect that's mostly reasonable.
For example, a brightness control can be implemented by simply taking the red, green and blue values
of the pixel and multiplying them by a brightness value. A brightness of 0 will make the image
entirely black. A value of 1 will leave the image unchanged. A value greater than 1 will make it
brighter.
For 2D canvas:
```js
const brightness = 1.1; // Make the image 10% brighter
for (let i = 0; i < imageData.data.length; i += 4) {
imageData.data[i] = imageData.data[i] * brightness;
imageData.data[i + 1] = imageData.data[i + 1] * brightness;
imageData.data[i + 2] = imageData.data[i + 2] * brightness;
}
このループは一度に 4 バイトを移動しますが、変更するのは 3 つの値のみです。これは、この特定の変換ではアルファ値が変更されないためです。また、Uint8ClampedArray はすべての値を整数に丸め、値を 0～255 の範囲にクランプします。
WebGL フラグメント シェーダー:
float brightness = 1.1;
gl_FragColor = textureColor;
gl_FragColor.rgb *= brightness;
同様に、この特定の変換では、出力色の RGB 部分のみが乗算されます。
これらのフィルタの一部は、画像全体の平均輝度などの追加情報を使用しますが、これらは画像全体に対して 1 回だけ計算できます。
コントラストを変更する方法の 1 つとして、各ピクセルを「グレー」値の近くまたは遠くに移動して、コントラストをそれぞれ低くまたは高くすることができます。通常、グレイ値は、輝度が画像内のすべてのピクセルの中央輝度であるグレー色に選択されます。
この値は、画像の読み込み時に 1 回計算し、画像効果を調整する必要があるたびに使用できます。
マルチピクセル
一部のエフェクトでは、現在のピクセルの色を決定する際に、隣接するピクセルの色が使用されます。
画像の元の色を読み取る必要があるため、2D キャンバスの場合の処理方法が若干異なります。前の例では、ピクセルがその場で更新されていました。
ただし、これは簡単な作業です。画像データ オブジェクトを最初に作成するときに、データのコピーを作成できます。
const originalPixels = new Uint8Array(imageData.data);
WebGL の場合、シェーダーは入力テクスチャに書き込まないため、変更を加える必要はありません。
マルチピクセル エフェクトの最も一般的なカテゴリは、畳み込みフィルタと呼ばれます。畳み込みフィルタは、入力画像の複数のピクセルを使用して、入力画像の各ピクセルの色を計算します。各入力ピクセルが出力に与える影響のレベルは、重みと呼ばれます。
重みは、カーネルと呼ばれる行列で表すことができ、中央の値は現在のピクセルに相当します。たとえば、これは 3x3 ガウスぼかしのカーネルです。
| 0 1 0 |
| 1 4 1 |
| 0 1 0 |
たとえば、（23, 19）のピクセルの出力色を計算するとします。（23, 19）の周囲の 8 ピクセルとそのピクセル自体を取り、それぞれの色値に対応する重みを掛けます。
(22, 18) x 0 (23, 18) x 1 (24, 18) x 0
(22, 19) x 1 (23, 19) x 4 (24, 19) x 1
(22, 20) x 0 (23, 20) x 1 (24, 20) x 0
すべての重みを合計し、その結果を重みの合計である 8 で割ります。結果は、ほとんどが元のピクセルですが、近くのピクセルが混ざり合ったピクセルになります。
const kernel = [
[0, 1, 0],
[1, 4, 1],
[0, 1, 0],
];
for (let y = 0; y < imageHeight; y++) {
for (let x = 0; x < imageWidth; x++) {
let redTotal = 0;
let greenTotal = 0;
let blueTotal = 0;
let weightTotal = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
// Filter out pixels that are off the edge of the image
if (
x + i > 0 &&
x + i < imageWidth &&
y + j > 0 &&
y + j < imageHeight
) {
const index = (x + i + (y + j) * imageWidth) * 4;
const weight = kernel[i + 1][j + 1];
redTotal += weight * originalPixels[index];
greenTotal += weight * originalPixels[index + 1];
blueTotal += weight * originalPixels[index + 2];
weightTotal += weight;
}
}
}
const outputIndex = (x + y * imageWidth) * 4;
imageData.data[outputIndex] = redTotal / weightTotal;
imageData.data[outputIndex + 1] = greenTotal / weightTotal;
imageData.data[outputIndex + 2] = blueTotal / weightTotal;
}
}
これは基本的な考え方ですが、ガイドではさらに詳しく説明されており、他にも多くの便利なカーネルが紹介されています。
画像全体
画像全体の変換は単純なものもあります。2D キャンバスでは、切り抜きとスケーリングは、ソース画像の一部のみをキャンバスに描画する単純なケースです。
// Set the canvas to be a little smaller than the original image
canvas.width = source.naturalWidth - 100;
canvas.height = source.naturalHeight - 100;
// Draw only part of the image onto the canvas
const sx = 50; // The left-most part of the source image to copy
const sy = 50; // The top-most part of the source image to copy
const sw = source.naturalWidth - 100; // How wide the rectangle to copy is
const sh = source.naturalHeight - 100; // How tall the rectangle to copy is
const dx = 0; // The left-most part of the canvas to draw over
const dy = 0; // The top-most part of the canvas to draw over
const dw = canvas.width; // How wide the rectangle to draw over is
const dh = canvas.height; // How tall the rectangle to draw over is
context.drawImage(theOriginalImage, sx, sy, sw, sh, dx, dy, dw, dh);
回転と反射は 2D コンテキストで直接使用できます。画像をキャンバスに描画する前に、さまざまな変換を変更します。
// Move the canvas so that the center of the canvas is on the Y-axis
context.translate(-canvas.width / 2, 0);
// An X scale of -1 reflects the canvas in the Y-axis
context.scale(-1, 1);
// Rotate the canvas by 90°
context.rotate(Math.PI / 2);
より強力な方法として、多くの 2D 変換を 2x3 行列として記述し、setTransform() でキャンバスに適用できます。この例では、回転と移動を組み合わせた行列を使用します。
const matrix = [
Math.cos(rot) * x1,
-Math.sin(rot) * x2,
tx,
Math.sin(rot) * y1,
Math.cos(rot) * y2,
ty,
];
context.setTransform(
matrix[0],
matrix[1],
matrix[2],
matrix[3],
matrix[4],
matrix[5],
);
レンズの歪みや波紋などの複雑なエフェクトでは、各宛先座標にオフセットを適用してソース ピクセル座標を計算します。たとえば、水平方向の波の効果を出すには、ソース ピクセルの X 座標を Y 座標に基づく値でオフセットします。
for (let y = 0; y < canvas.height; y++) {
const xOffset = 20 * Math.sin((y * Math.PI) / 20);
for (let x = 0; x < canvas.width; x++) {
// Clamp the source x between 0 and width
const sx = Math.min(Math.max(0, x + xOffset), canvas.width);
const destIndex = (y * canvas.width + x) * 4;
const sourceIndex = (y * canvas.width + sx) * 4;
imageData.data[destIndex] = originalPixels.data[sourceIndex];
imageData.data[destIndex + 1] = originalPixels.data[sourceIndex + 1];
imageData.data[destIndex + 2] = originalPixels.data[sourceIndex + 2];
}
}
動画
ソース画像として video 要素を使用する場合、この記事の他のすべての内容は動画でも機能します。
Canvas 2D:
context.drawImage(<strong>video</strong>, 0, 0);
WebGL:
gl.texImage2D(
gl.TEXTURE_2D,
0,
gl.RGBA,
gl.RGBA,
gl.UNSIGNED_BYTE,
<strong>video</strong>,
);
ただし、この場合、現在の動画フレームのみを使用します。そのため、再生中の動画にエフェクトを適用する場合は、各フレームで drawImage/texImage2D を使用して新しい動画フレームを取得し、ブラウザのアニメーション フレームごとに処理する必要があります。
const draw = () => {
requestAnimationFrame(draw);
context.drawImage(video, 0, 0);
// ...image processing goes here
};
動画を扱う場合は、処理の速さが特に重要になります。静止画像では、ボタンをクリックしてからエフェクトが適用されるまでに 100 ミリ秒の遅延を気にしない可能性があります。ただし、アニメーション化すると、わずか 16 ミリ秒の遅延によって目に見えて移動することがあります。
おすすめの記事
- WebGL Fundamentals: WebGL を解説するサイト
- カーネル（画像処理）: 畳み込みフィルタについて説明している Wikipedia のページ
- Image Kernels Explained Visually: インタラクティブなデモを備えたいくつかのカーネルの説明。
- 変換: 2D キャンバス変換に関する MDN の記事