Metalに入門してみました

この記事はGeekWomenJapan Advent Calendar 2016の8日目の記事です。

qiita.com

以前から気になっていたiOSのグラフィックスAPIMetalに入門してみました。
そしてクリスマスらしく、クリスマスツリーをMetalで書いてみることにしました。

f:id:takopomm:20161208001504p:plain

(入門ということで生温かい目で見てください…!)

環境

ツリー概要

このように三角形を6個組み合わせてツリーのような形にしました。

f:id:takopomm:20161208003134p:plain

三角形の各頂点に、それぞれ色を付けています。
葉っぱの部分は、黄緑から濃緑にグラデーションしています。

Metalで描画するためにやったこと

各処理の詳細については省略しますが、Metalで描画する際のおおまかな流れです。

  1. Metal Deviceを作る
  2. コマンドキューを用意する
  3. レンダリングパイプラインを作る
  4. クリスマスツリーの三角形たちの頂点座標&色データを定義して、頂点バッファを作る
  5. 画面をクリア
  6. コマンドバッファを作る
  7. ツリーを描く
  8. 画面に表示する

このうち、5〜8を毎フレーム繰り返しており、常に画面全体を書き直しています。

実行してみる

Metalはシミュレータで動かないので、実機で実行する必要があります。

シミュレータを選択した状態で実行してみると、

Use of undeclared type 'CAMetalLayer'

と、Metalに関連するコードが解決できず、ビルドエラーになってしまいます。
(しばらくハマってしまいました)

Metalで描ける形状のメモ

  • point (点)
  • line (線分)
  • lineStrip (点を順番につなげて線にする)
  • triangle (三角形)
  • triangleStrip (頂点を共有した三角形)

四角形を描画するには、三角形を2つ並べます。

成果物

こちらにソースコードがあります。

github.com

MetalView.swiftに、ほとんどすべてが詰まっています。

感想

  • OpenGLの知識がまだうっすら残っている状態だったので、何をすればよいかおおよそ把握できていたことは、Metal入門においてかなりプラスに働きました。

  • Swiftで書けるところが好印象です。

  • ビルドにすごく時間かかりました。 ちょっと直して、もう一度実行する時の待ち時間が辛かったです。。(この辺りは何かTipsがあるのかもしれませんが)

  • やり残したことは、「テクスチャを貼る」。せめて背景画像を出せたら、もう少しマシな画面になったかも・・

最後に・・

GeekWomenのアドベントカレンダーということで、元気はじける3歳児を育てるヨボヨボお母さんエンジニアの小話など書こうかなと思っていましたが、ふとMetalの神様が降りてきました。今の業務で使うことはないのですが、久しぶりにグラフィックス周りに触れてみたらやっぱり楽しかったです。今年のうちにMetalとたわむれることができて良い年越しができそうです。

参考