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

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

Transcript

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. おしまい。