# spryte 0.12：メッシュとミップマップ

spryte で画像を曲げて描けるようになりました。`mesh()` は自分で置いた三角形の上に画像を引き伸ばします。軌跡、ロープ、はためく旗、ぷにぷにしたスプライトに使えます。WebGL2 ではシェイプや後に描くスプライトと同じバッチに入るため、描画コールは増えません。同じリリースで、任意のミップマップも入りました。滑らかな画像を元のサイズよりずっと小さく描いても、ちらつきません。

```bash
npm install spryte@latest
```

![192個の三角形の1つのメッシュで描いた、ポールではためくチェック柄の旗](/blog/spryte-0-12-mesh.png)

*[メッシュのサンプル](https://github.com/debuffjp/spryte/tree/main/examples/mesh)：64x40 の画像を毎フレーム動く 16x6 のグリッドに沿って曲げています。ポインターを追うリボンもあります。*

## mesh()

```ts
import { mesh } from "spryte";

// 32x32 の画像を台形に曲げる：頂点4つ、三角形2つ。
mesh(
  draw,
  image,
  [0, 0, 32, 0, -8, 32, 40, 32], // 頂点：x, y の組
  [0, 0, 32, 0, 0, 32, 32, 32], // uv：元画像ピクセル単位の u, v の組
  [0, 1, 2, 1, 3, 2], // 三角形ごとに頂点番号3つ
);
```

uv は spryte のほかの API と同じく、フレーム左上からの元画像ピクセル単位です。アトラス内のフレームも画像全体と同じように使えます。頂点、uv、インデックスは型付き配列でもよく、uv とインデックスは使い回して毎フレーム頂点だけを変えられます。オプションは `nineSlice` や `tiled` と同じ `tint`、`alpha`、`flash`、`smooth` です。

WebGL2 では、フレームを覆う三角形2つのメッシュは `draw.sprite` と同じピクセルを描きます。spryte のブラウザでのパリティテストでは、違うチャンネルは0でした。Canvas 2D のフォールバックは三角形を1つずつクリップして描きます。遅く、共有する辺に薄い線の出る場合があります（同じテストで最大 255 中 25）。メッシュに向くのは WebGL2 で、ほぼすべてのブラウザが対応しています。

`mesh` は独立したインポートです。使うアプリでは brotli で 1.6 kB 増えます。シェイプをすでに描いているアプリでは 0.1 kB です。メッシュはシェイプのバッチを使い回すためです。インポートしないアプリの増加は 0.08 kB です。esbuild（minify、コード分割、brotli レベル 11）でエントリーチャンクを測りました。

カスタムシェーダーはまだメッシュには効きません。

## ミップマップ {#mipmaps}

滑らかな画像を4分の1のサイズで描くと、元画像の16ピクセルに1つしか読まないため、動くとちらつきます。引いた地図、チャート、サムネイルで起こります。`createRenderer(canvas, { mipmaps: true })` はアップロード時に各画像の縮小版を作り、合ったサイズから読みます。

GPU メモリが画像ごとに3分の1増えるため、デフォルトではオフです。スプライトシートのフレームの間には数ピクセル空けてください。そうしないと小さいサイズで隣のフレームがにじみます。ピクセルアート（`smooth: false`）とレンダーターゲットはこれまでどおりに描かれます。

## そのほかの変更 {#also-in-this-release}

ドキュメントに、マスクと GPU タイマーが出荷済みであること（0.3.0 と 0.8.0）を書き、計測済みの環境に macOS の Chrome を加えました。すべての変更は[変更履歴（英語）](/changelog/#spryte-0-12-0)にあります。

[メッシュのガイド](/ja/spryte/sprites#meshes)を読むか、spryte リポジトリで `npm run example:mesh` を実行してサンプルを動かしてみてください。