GUIX-ポリゴン描画について

UI開発

GUIXとは

GUIXとは、簡単に言うと、組込み機器向けのGUIツールです。
現在はEclipseFoundationよりOSSとして公開されています。
※GUIXについては、幾つかコラムがありますので、詳しくはこちらをご参照ください。

小さく高速な組込み向けGUIツール「GUIX」の基礎を解説【その1】

小さく高速な組込み向けGUIツール「GUIX」の基礎を解説【その2】

小さく高速な組込み向けGUIツール「GUIX」の基礎を解説【その3】

「GUIX」内部動作の概要

GUIXを使ったポリゴン描画

今回はGUIXでポリゴンを使って3D描画を行う方法を書いていきます。

ボタンWidgetのような「部品」を使った描画とは異なりますが、「こんなこともできる!」の参考にして頂ければと思います。

ポリゴンとは

ポリゴンとは、「多角形」を意味しコンピュータグラフィックスで3DCGを使う場合によく使われる用語です。3つ以上の「頂点」を結んだ「面」の事を指し、ポリゴンを複数使って3DCGを表現します。

ポリゴンの数が多くなるほど滑らかに表現できますが、システムへの負荷は大きくなります。球体を表現する場合、ポリゴンが多いほど球体に近い見た目になり、ポリゴンが少ないとカクカクした球体に近い何かになります。

ポリゴンはPCなどのグラフィックスボードの性能を表す1つの数字として、毎秒いくつのポリゴンを処理できるか、を性能として出しているものもあります。


三角形はポリゴンの最小単位。
「面」を作れる最小単位の形になります

三角形を2つ組み合わせることで四角形を表現できる。
「面」が2つになるので色を変えて表現ができる


ポリゴンを増やすことで色々な形を表現できる。

GUIXでのポリゴン

GUIXでGUIを作成する場合、ボタンのようなWidgetを使用して、配置、イベント取得、イベントに応じた処理、というような仕組みを作ります。これに対してGUIXのポリゴンは、画面描画を行うための関数として提供されています。そのため、Widgetの様にGUIX Studioを用いて部品を配置するのではなく、すべてプログラムで作る必要があります。

ポリゴンの描画

GUIXでポリゴンを描画する場合、(前準備は色々ありますが)「頂点」座標の構造体配列ポインタと、「頂点数」を引数にしてAPIを呼ぶだけです。

APIを呼ぶと、キャンバスメモリにポリゴンを描画します。

これを必要なポリゴンの数だけ実行します。

ただし、注意点がありGUIXはAPIを呼ばれた時点で描画を行います。そのため各ポリゴンの前後関係は意識していませんので、先に奥側のポリゴンから描画しないと想定した表示にはなりません。この辺りの判断もアプリケーション側で考慮しておく必要があります。例えば、前面のポリゴンで奥側のポリゴンが完全に隠れる場合、奥側のポリゴンを描画することは無駄な処理になります。このような判断をアプリケーション側で行うことも考慮する必要があります。(システムの能力が十分にある場合は、あえてすべてのポリゴンを描画し、プログラムを簡略化する場合もあり得ます。)

前準備について

ポリゴンの描画前に前処理が必要と書きました。これはGUIXのコンテキストと呼ばれる属性を設定する処理を指します。コンテキストとはコンピュータグラフィックスで用いられる用語の一つで、描画する際の色や太さ、塗りつぶしの有無、などの属性です。GUIXではコンテキストを設定してから描画APIを使うことで様々な描画を行います。

ボタンなどのWidgetも内部処理で同じことを行って、ボタンの描画などを行っています。

ポリゴンを使った描画の実際

ポリゴンを使った処理を実装する場合、描画ハンドラをオーバーライドして実装する方法が一番やりやすいと思います。また、ポリゴンを使用して3DCGを表示する場合ですと、動きを付けることが良くあります。ポリゴンを動かすこと自体は「頂点」座標を更新して再描画することで可能になります。(この更新処理もアプリケーションで行います。)

再描画のタイミングはGUIXのタイマを使うとやり易いと思います。流れとしてはタイマイベントをイベントハンドラで受け、「頂点」座標を更新し、画面の再描画をGUIXに指示します。GUIXは再描画時に描画ハンドラを呼び出すので、描画ハンドラ内でポリゴンの描画を行います。

もし、「頂点」座標の更新と描画処理を分けたくない場合は、「頂点」座標の更新処理を描画ハンドラ内で行っても良いと思います。GUIXのイベントハンドラと描画ハンドラは両方ともにGUIXのシステムスレッドから呼ばれますので、描画処理中にイベントハンドラが呼ばれて「頂点」座標の計算がおかしくなるようなことは無いと思います。

デモ動画

参考までに、以前作成したデモ動画を載せておきます。環境としてはSTM32F429i-DISCOVERYボードを使用しています。

一つはサイコロ状のモデルに各面に色を配色したものがXYZ軸で回っているものです。

もう一つは弊社ロゴを回してみたものになります。

まとめ

いかがでしたでしょうか。

今回はアプリケーションのソースの量が多いため、抜粋部分が少なくなりました。

GUIXでの3DCGはアプリケーション側で行うことが多いため、難易度はありますが、アイデア次第で面白い見せ方ができると思っています。ポリゴン以外にも「線を引く」、「楕円を書く」などの基本的な描画APIは用意されていますので興味がありましたら調べてみてください。

もちろん、「こんな表示がしたい」などの要望がありましたらお問い合わせいただければと思います。