OpenGLで描画するQMLのカスタムエレメントを作成し、 それをQMLの標準のエレメントと一緒に表示します。

1. QML上にOpenGLのカスタムエレメントを
表示する
@n_murakami1

2. アジェンダ
● 自己紹介
● 開発環境
● OpenGLのカスタムエレメントとは
● どんなときに使うの？
● QMLで3Dモデルを表示する方法
● 実装方法
● 参考資料

3. 自己紹介
● 名前 村上 昇
● 仕事 車載機器(IVI)のHMI開発環境の構築
● Qt歴 2年数ヶ月
● 興味
– Qt
– HTML5
– TIZEN(特にIVI)
● ブログ(基本的には自分用の学習メモ)
– http://ameblo.jp/dumbobambino/

4. 開発環境
● OS：Windows7(64bit)
● Qtバージョン：Qt4.8.4、Qt5.0.2
● Qt Creatorバージョン：2.7.0
※Virtualbox上のUbuntuではQt4.8.4でopenglを有効に
した時に、QMLが正常に表示できませんでした。

5. OpenGLのカスタムエレメントとは
● （特に決まった用語ではないですが）
OpenGL、OpenGLESのAPIを使って描画処理
を自分で記述する、QMLの自作のElementの
ことで、C++で作成します。
Item {
QMLWidget0502{} ←コレ(Element名は自分で定義する)
Rectangle{
width: 100
height: 100
color: "#88ff0000"
}
}

6. どんなときに使うの？
● 標準のQMLのElementではやりたい事が出来
ない時
– 例えば、3Dモデルを表示するとか

7. QMLで3Dモデルを表示する方法
● Qt Quick 3Dを使う
– http://doc.qt.digia.com/qt-quick3d-snapshot/
というのが王道なやり方ですが、現状は開発
中で、Qt4.8.4はもちろん、Qt5.0.2のリリー
ス物にも入っていません。
だから、OpenGLのカスタムElementを使う

8. 実装方法

9. 実装方法概要
Qt Version 利用クラス 特徴
4.8.4 QDeclarativeItem 4.8系だとこれを使うしかない？
5.0.2 QQuickItem 直接描画面へ描画する。消費メモリや速度で有利。
5.0.2 QQuickPaintedItem 間接的な2D surfaceを使う。ラスタライズ、描画の
2段階処理になる。
QPainterを使って描画したいときに使う。
(z方向を)QMLの標準のElementの間にしたい時はこ
れを使えば出来るのかもしれない。（未確認）
■参考URL
Mixing Scene Graph and OpenGL
http://qt-project.org/doc/qt-5.0/qtquick/qtquick-visualcanvas-scenegraph.html#mixing-scen
e-graph-and-opengl
QQuickItem
http://qt-project.org/doc/qt-5.0/qtquick/qquickitem.html#details
QQuickPaintedItem
http://qt-project.org/doc/qt-5.0/qtquick/qquickpainteditem.html#details

10. Qt5での2つの実装方式
・・・ QMLの標準Element ・・・ OpenGLのCustom Element
直接描画面へ描画 FBOへ描画してから描画面へ描画
←FBO
標準Elementの間に描画
できるかも(未確認)
消費メモリや速度面で有利。
標準Elementの前か後ろに描画可能。
間には描画できない。
FBO
(FrameBufferObject)

11. Qt4.8.4での実装のポイント
● QDeclarativeItemを継承するクラスを作成
● setFlag(ItemHasNoContents, false);を実行
● paintメソッドをオーバーライドして描画処理を記述
● OpenGLの命令前後にpaintメソッドの引数で渡されるQPainter
のbeginNativePainting()とendNativePainting()を実行する
サンプルはこちら
● QMLWidget03.zip
● QMLWidget04.zip

12. Qt5.0.2での実装のポイント
※描画面へ直接描画する方式についての説明
● QQuickItemを継承するクラスを作成
● paint() slotを定義
● QQuickWindowのbeforeRendering() かafterRendering() signal
とpaint() slotをconnect
● paint() slotに描画処理を記述
サンプルはこちら（自作のものは色々トライ＆エラー中なのでまだ
アップしてません）
● http://qt-project.org/doc/qt-5.0/qtquick/scenegraph-openglunde
rqml.html

13. 参考資料
● Mixing Scene Graph and OpenGL
– http://qt-project.org/doc/qt-5.0/qtquick/qtquick-visualcanvas-scene
graph.html#mixing-scene-graph-and-opengl
● QQuickItem
– http://qt-project.org/doc/qt-5.0/qtquick/qquickitem.html#details
● QQuickPaintedItem
– http://qt-project.org/doc/qt-5.0/qtquick/qquickpainteditem.html#detai
ls

14. おしまい。