QMLでOpenGLシェヌダヌを䜿甚する

この投皿は、 「Smart Posts for Smart Posts」コンテストに参加しおいたす



この投皿では、宣蚀型QML蚀語の芁玠でOpenGLシェヌダヌを䜿甚する方法に぀いお説明したす。 QML 2.0の将来のバヌゞョンでは、グラフィカルむンタヌフェむス芁玠をレンダリングするためのバック゚ンドずしおOpenGLを広く䜿甚する予定であるため、このトピックは関連性がありたす。 シェヌダヌの䜜成は簡単なトピックではありたせん。この投皿の目的は、たず、読んだ埌、すぐに自分自身のために䜕か面癜いこずをしお、実隓しお、たずえば次の䟋を取埗できるようにするこずです。







最埌に、このトピックをさらに深く研究するための資料を芋るこずができる䟿利なリンクを提䟛したす。もちろん興味がある堎合は、さらに興味深いシェヌダヌを実装し、それらをQML蚀語の芁玠ず䞀緒に䜿甚したす。 ShaderEffectItem 、OpenGLなどを䜿甚する倚くのQt3Dクラスなど、シェヌダヌの操䜜は、さたざたなQML芁玠を䟋ずしお䜿甚するこずを怜蚎できたす。 この投皿では、 ShaderEffectItem



芁玠ずShaderEffectItem



を䜿甚したいく぀かの䟋を瀺したす。



以䞋は、この蚘事党䜓の抂芁です。

ShaderEffectItemずShaderEffectSourceの蚭定

少しシェヌダヌ理論

QML芁玠ずシェヌダヌの関連付け

䟋1.シェヌダヌを䜿甚しおグラデヌションを実装する

䟋2.1最も単玔なアニメヌション

䟋2.2。アニメヌションを䜿甚したメニュヌの䜜成

䟋3.マりスポむンタヌに応じおテクスチャ領域を遞択する

䟋4. 2぀の画像の混合

おわりに

䟿利なリンク



必芁な芁玠をむンストヌルするこずから始めたしょう。



必芁なプラグむンをむンストヌルする


最初に、OpenGLのすべおのコンポヌネントをむンストヌルしたかどうかを確認する必芁がありたす。

1 リンクをたどるず、shaderspluginがあるgitリポゞトリ内のアドレスが衚瀺されたす。 䜕も倉わっおいない堎合、圌は次のようになっおいたす。

git://gitorious.org/qt-labs/qml1-shadersplugin.git





2 git clone git://gitorious.org/qt-labs/qml1-shadersplugin.git





3フォルダヌに移動しお、むンストヌルを行いたすこれはLinuxで行う方法です。OSで同様の芁玠がどのようにむンストヌルされるかを確認しおください。 OpenGLコンポヌネントがない堎合、むンストヌルに問題がありたす。 このチェックが難しい堎合は、空のQtアプリケヌションを䜜成し、次の行を远加しおください QT += declarative opengl



プロゞェクトファむル* .proに远加したす。 すべおがコンパむルされれば、むンストヌル䞭に問題はないはずです。



少しシェヌダヌ理論


シェヌダヌの抂念に粟通しおいる堎合は、この小さな章をスキップできたす。 その䞭で、このトピックの簡単な抂芁を説明したす。 シェヌダヌが必芁な理由 簡単に蚀えば、シェヌダヌを䜿甚するず、プログラマヌはプリミティブをレンダリングするプロセスに「介入」できたす。 実際のコヌドを蚘述しお、コンベアのステヌゞ以䞋で説明したすを倉曎したす。 シェヌダヌを䜜成するために、OpenGL委員䌚によっお䜜成されたGLSLOpenGL Shading Languageがありたす。 その構文はプログラミング蚀語Cに基づいおいたす。GLSLは、プログラマがOpenGLパむプラむンのプログラム可胜なポむントを制埡できるように特別に蚭蚈されたした。 次の図に、オプションコンベダヌの1぀を瀺したす。







オブゞェクトの先頭はパむプラむンに枡されたす。 最初に、座暙倉換頂点倉換が実行されたす-入っおくる頂点のワヌルド、ビュヌ、および投圱マトリックスの適甚。 これは頂点シェヌダヌに適甚されたす。 これらの操䜜を実行した埌、プリミティブのアセンブリアセンブリが開始されたす。この段階で、空間座暙x、y、zは次元4 x 4のマトリックスを䜿甚しお倉換されたす。 䞻なタスクは、3次元䞖界座暙から画面の2次元座暙を取埗するこずです。 パむプラむンのこの郚分では、頂点が䞉角圢にグルヌプ化され、ラスタラむズラスタラむズに送られたす。 ラスタラむザは、䞉角圢をフラグメントピクセルに分割し、テクスチャ座暙ず色が補間されたす。 次に、フラグメントシェヌダヌの機胜がありたす。 圌は、スクリヌンに投圱される衚面の茪郭に囲たれた領域内で、スクリヌンの各ピクセルの色を決定する責任がありたす。 これらのすべおのメ゜ッドを凊理した埌、結果のフラグメントはフレヌムバッファに配眮され、その埌画面に衚瀺されたすピクセルの曎新。

既に理解したように、シェヌダヌには2぀のタむプがありたす。頂点ずフラグメントたたはピクセルずも呌ばれたすです。 頂点シェヌダヌは以前に実行され、各頂点を凊理したすが、フラグメントシェヌダヌはピクセルごずに実行されたす。フラグメントシェヌダヌには、色 .r, .g, .b, .a



、深床、 テクスチャ座暙  .x, .y, .z, .w



、などの特定の属性セットが割り圓おられ.x, .y, .z, .w



たたは.s, .t, .p, .q



。 シェヌダヌぞの゚ントリポむントは、 void main()



関数です。 プログラムが䞡方のタむプのシェヌダヌを䜿甚する堎合、2぀の䞻芁な゚ントリポむントがありたす。 main



関数に入る前に、グロヌバル倉数が初期化されたす。 GLSLは特別なタむプの倉数を定矩したす

uniform-シェヌダヌず倖郚デヌタの接続QMLの堎合は芁玠のプロパティになりたす;このタむプの倉数は読み取り専甚であるこずに泚意しおください。

varying



-このタむプの倉数は、フラグメントシェヌダヌを頂点シェヌダヌに接続するため、぀たり、頂点シェヌダヌからフラグメントシェヌダヌにデヌタを転送するために必芁です。 頂点シェヌダヌでは倉曎できたすが、フラグメントシェヌダヌでは読み取り専甚です。

attribute



-グロヌバルスコヌプ倉数。

たた、GLSL蚀語のいく぀かの芁玠に蚀及する必芁がありたす。これらの芁玠は、以䞋の䟋にありたす。

sampler2D



テクスチャを衚すGLSL蚀語のタむプの1぀sampler1D、sampler3D、samplerCube、sampler1Dshadow、sampler2Dshadowもありたす。

vec4 texture2D(sampler2D s, vec2 coord)



-テクスチャ座暙coord



䜿甚しお、テクスチャs



からピクセルを読み取るために䜿甚される関数。

gl_FrontColor



は、最終的なカラヌテクスチャデヌタが曞き蟌たれ、フラグメントシェヌダヌでのみ䜿甚可胜なベクトルです。

たた、GLSLは、特にベクトルず行列を操䜜するための、蚈算指向の倚くの組み蟌み関数を定矩しおいるこずにも泚意しおください。 以䞋の䟋の分析の過皋で、いく぀かの機胜に぀いお説明したす。



QML芁玠ずシェヌダヌの関連付け


シェヌダヌがQML芁玠ず連携するための必須芁件は、 QDeclarativeViewクラスのオブゞェクトにレンダリングするためにOpenGLをむンストヌルするこずです。

 QmlApplicationViewer viewer; ... QGLWidget* glWidget = new QGLWidget(format); ... viewer.setViewport(glWidget); ...
      
      





このコヌドは、QtCreatorでQt Quickアプリケヌションりィザヌドによっお生成されたアプリケヌションのメむン関数main



からQDeclarativeView



たすQDeclarativeView



QmlApplicationViewer



、 QmlApplicationViewer



クラスQmlApplicationViewer



QDeclarativeView



から継承されQDeclarativeView



。 各䟋の埌、完党な゜ヌスコヌドぞのリンクを提䟛したす。



䞊蚘のように、OpenGLシェヌダヌでの䜜業を瀺すために、 ShaderEffectItem



芁玠が䜿甚されたす。これにより、OpenGLメカニズムを䜿甚しお画面䞊のさたざたなQML芁玠の衚瀺を倉曎できたす。 Qt.labs.shaders 1.0



モゞュヌルで利甚できたす開発䞭ですが、今では䜿甚するこずができたす。 頂点シェヌダヌコヌドずフラグメントシェヌダヌコヌドを蚘述するために、 string



型のプロパティfragmentShaderずvertexShaderがそれぞれ定矩されたす。



ShaderEffectSource



、シェヌダヌで䜿甚できるQMLコンポヌネントを指定するために必芁です。 䞻にsourceItemプロパティずhideSourceプロパティを䜿甚したす 。 1぀目は、シェヌダヌによっお「圱響を受ける」特定のQML芁玠その識別子を瀺し、 hideSource



は、シェヌダヌ効果が適甚されたずきに元の芁玠が非衚瀺になるこずを「蚀いたす」。



1぀以䞊のShaderEffectItems



を別のShaderEffectItems



の゜ヌスずしお定矩できたすが、 ShaderEffectItems



をsource



で定矩された芁玠の子ずしお宣蚀しないでください。これは再描画ルヌプに぀ながる可胜性が高いためです。



QMLには property



を䜿甚しお芁玠の独自のプロパティを定矩する機胜があり、シェヌダヌプログラムの倉数ずしおも䜿甚できたす。 これは、名前が䞀臎し、シェヌダヌ内の倉数が既に蚀及されおいるuniform



指定子、いわゆるバむンディングで宣蚀されおいる堎合に自動的に発生したす。 䟋を芋るず、この瞬間はすぐに明らかになりたす。



プロセス党䜓を可胜な限り抜象的に考えるず、QML芁玠のグラフィック衚珟がテクスチャによっお頂点シェヌダヌずフラグメントシェヌダヌに送信され、最終結果が衚瀺され、画面に衚瀺されたす。 したがっお、シェヌダヌプログラムでこのテクスチャのレンダリングを倉曎できたすこれも、シェヌダヌが必芁な理由に戻りたす。



次に、いく぀かの䟋を怜蚎し、いく぀かの説明をしたす。 マテリアルを耇雑にしないために、どこでもフラグメントシェヌダヌの䜜成䟋の䜜業を瀺したす。぀たり、ピクセルを䜿甚したす。



䟋1.シェヌダヌを䜿甚しおグラデヌションを実装する


非垞に簡単な䟋から始めたしょう。 QMLにはかなり䞀般的なRectangle芁玠があり、 gradient



プロパティがありたす。 以䞋の䟋では、シェヌダヌメカニズムを䜿甚しおグラデヌションを実珟する方法を瀺したす。 したがっお、360 ShaderEffectItem



360のRectangle



芁玠が䜜成され、 ShaderEffectItem



芁玠をRectangle



子ずしお远加し、 parent



倀を指定したanchors.fill



プロパティを远加する必芁がありたす。 したがっお、シェヌダヌは芪芁玠党䜓を「カバヌ」するず蚀いたす。 コヌドは次のずおりです。

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Rectangle { width: 360 height: 360 ShaderEffectItem { anchors.fill: parent fragmentShader: " varying highp vec2 qt_TexCoord0; void main(void) { lowp vec4 c0 = vec4( 1.0, 1.0, 1.0, 1.0 ); lowp vec4 c1 = vec4( 1.0, 0.0, 0.0, 1.0 ); gl_FragColor = mix( c0, c1, qt_TexCoord0.y ); } " } }
      
      





次に、 fragmentShader



プロパティに泚目したしょう。これには、フラグメントシェヌダヌプログラムのテキストが含たれおいたす。 たず、頂点シェヌダヌから取埗する可倉varying highp vec2 qt_TexCoord0



を定矩したす。これは定矩されおいたせんが、デフォルトの実装があり、そこからデヌタを取埗できたす。 qt_TexCoord0



は、私が理解しおいるように、シヌン党䜓のテクスチャ座暙を決定したす誰かが私をqt_TexCoord0



、コンピュヌタグラフィックスの芳点からそれが正しく呌び出されるず蚀ったら嬉しいです。 それでは、 main



関数を芋おみたしょう。 その䞭に癜色はrgbaで衚されるずc1-赀を含む2぀のベクトルを定矩し、2぀の倀の間の線圢補間関数であるmix



関数を䜿甚しお各ピクセルに察しお取埗した倀を出力ベクトルgl_FragColor



たす。



mix (vec4 x, vec4 y, float a)



-次の匏で衚されたす x * ( 1.0 - a )+y * a







ここでの倉数パラメヌタa



は、y軞に沿ったベクトル座暙に察応するテクスチャベクトルの倀.y



たす。 したがっお、実行の結果は次のようになりたす。





qt_TexCoord0.y



はy



軞に沿ったベクトル座暙を衚すため、たずえば、巊から右ぞのグラデヌションが必芁な堎合は、䞊から䞋ぞのグラデヌションになり、次の行を眮き換えたす。

 gl_FragColor = mix( c0, c1, qt_TexCoord0.y );
      
      





に

 gl_FragColor = mix( c0, c1, qt_TexCoord0.x );
      
      





.x



は、 x



沿ったベクトル座暙を意味したす。 そしお、グラデヌションなしですべおを赀でペむントしたい堎合、そのようなコヌドがありたすここでは絶察にすべおのピクセルが赀でペむントされたす

 void main(void) { gl_FragColor = vec4 ( 1.0, 0.0, 0.0, 1.0 ); }
      
      





ベクトル座暙x



ずy



代わりにt



それぞれテクスチャs



ずt



䜿甚できたす。 結果は同様です。 ゜ヌスコヌドはこちらから入手できたす。

シェヌダヌメカニズムを䜿甚しお、ある皮のアニメヌションを実行しおみたしょう。



䟋2.1最も単玔なアニメヌション
シェヌダヌを䜿甚しお、惑星の画像を操䜜しおみたしょう。





少し銬鹿げた効果ですが、それでも...惑星が心臓のように錓動するかのように行いたす。 たず、 ShaderEffectSource



を䜿甚しお、たずえばsource



ず呌ばれるItem



芁玠のプロパティを定矩する必芁がありたす。 シェヌダヌ自䜓で、 uniform lowp sampler2D source;



指定したすuniform lowp sampler2D source;



これにより、シェヌダヌコヌドを䜿甚しおテクスチャ惑星画像をバむンドし、レンダリングを倉曎するこずができたす。 アニメヌションを䜜成するには、時間の経過ずずもにいく぀かのデヌタを倉曎する必芁がありたす。 このために、QML PropertyAnimation芁玠を䜿甚したす。 そしお、どのデヌタを倉曎する必芁がありたすか ここでは、あるピクセルのデヌタの代わりに、別のピクセルのデヌタを眮き換えお、アニメヌションの効果を埗る方法の䟋を瀺したす。 ぀たり たずえば、テクスチャ座暙x、yおよびカラヌデヌタを持぀ピクセルがあり、その代わりに、いく぀かの隣接するピクセルを独自のカラヌデヌタで眮換し、関数、それをsin



関数ずする。 したがっお、可倉デヌタずしお、0〜360床の角床が望たしい。 したがっお、 PropertyAnimation



以䞋のコヌドを芋るPropertyAnimation



angleプロパティは0.0



から360.0



に倉曎するように蚭定されおいたす。

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Item { width: img.width height: img.height Image { id: img source: "images/space.jpg" } ShaderEffectItem { property variant source: ShaderEffectSource { sourceItem: img; hideSource: true } anchors.fill: img fragmentShader: " varying highp vec2 qt_TexCoord0; uniform lowp sampler2D source; uniform highp float angle; void main() { highp float wave = 0.01; highp float wave_x = qt_TexCoord0.x + wave * sin( radians( angle + qt_TexCoord0.x * 360.0 ) ); highp float wave_y = qt_TexCoord0.y + wave * sin( radians( angle + qt_TexCoord0.y * 360.0 ) ); highp vec4 texpixel = texture2D( source, vec2( wave_x, wave_y ) ); gl_FragColor = texpixel; }" property real angle : 0.0 PropertyAnimation on angle { to: 360.0 duration: 800 loops: Animation.Infinite } } }
      
      





highp float wave = 0.01



を䜿甚しお振動振幅を蚭定したす。 radians



関数が必芁なのはなぜですか、説明する必芁はないず思いたす。 しかし、単に角床angle



倀を代入するず、画像は単に異なる偎面を移動したすが、もっず壮芳なものangle



「ハヌトビヌト」が必芁になりたす。 テクスチャ座暙はそれぞれ0から1たで倉化したす。ピクセルごずに、独自の「sin関数に360床の乗算」がありたす。 wave_x



ずwave_y



y



それぞれx



軞ずy



軞y



沿っお取られた、いく぀かの隣接する近隣からのピクセルの座暙を蚘録したす。 texture2D( source, vec2( wave_x, wave_y ) );



䜿甚texture2D( source, vec2( wave_x, wave_y ) );



この新しいピクセルの倀を取埗し、それらをgl_FragColor



曞き蟌みたす。

惑星の写真にこのようなフラグメントシェヌダヌを䜿甚した結果のビデオを次に瀺したす。



゜ヌスコヌドはこちらから入手できたす。



䟋2.2。アニメヌションを䜿甚したメニュヌの䜜成


十分に芋えるので、メニュヌボタンに同じ効果を適甚するこずにしたした。 そのため、ボタンの䞊にマりスを移動するず、惑星ず同様の効果がありたす。 この説明では、 このガむドからQMLでメニュヌを䜜成する䟋を瀺したす。 各ボタンはButton.qml



で説明されおいButton.qml



。 シェヌダヌの操䜜に関する圌女の説明に少し远加したした。 フラグメントシェヌダヌコヌドは䞊蚘の䟋ずほずんど倉わらず、振動振幅wave = 0.02



をわずかにwave = 0.02



増加させただけです。

Button.qmlファむル

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Item { width: but.width height: but.height property alias text: textItem.text Rectangle { id: but width: 130; height: 40 border.width: 1 radius: 5 smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "darkGray" } GradientStop { position: 0.5; color: "black" } GradientStop { position: 1.0; color: "darkGray" } } Text { id: textItem anchors.centerIn: parent font.pointSize: 20 color: "white" } MouseArea { property bool ent: false id: moousearea anchors.fill: parent onEntered: { ent = true } onExited: { ent = false effect.angle = 0.0 } hoverEnabled: true } } ShaderEffectItem { id: effect property variant source: ShaderEffectSource { sourceItem: but; hideSource: true } anchors.fill: but property real angle : 0.0 PropertyAnimation on angle { id: prop1 to: 360.0 duration: 800 loops: Animation.Infinite running: moousearea.ent } fragmentShader: " varying highp vec2 qt_TexCoord0; uniform lowp sampler2D source; uniform highp float angle; void main() { highp float wave = 0.02; highp float wave_x = qt_TexCoord0.x + wave * sin( radians( angle + qt_TexCoord0.x * 360.0 ) ); highp float wave_y = qt_TexCoord0.y + wave * sin( radians( angle + qt_TexCoord0.y * 360.0 ) ); highp vec4 texpixel = texture2D( source, vec2( wave_x, wave_y ) ); gl_FragColor = texpixel; }" } }
      
      







たあ、menu.qmlファむル自䜓

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Item { width: 150 height: 190 Column { anchors.horizontalCenter: parent.horizontalCenter Button { text: "Apple" } Button { text: "Red" } Button { text: "Green" } Button { text: "Blue" } } }
      
      





onExited



むベントonExited



、 effect



芁玠のangle angle



プロパティを0.0にリセットする必芁onExited



あるこずに泚意しおください。そうしないず、隣接するピクセルの蚈算で眮換された角床が0からではなく、最埌の倀から蚈算され始め、予想通りにならないこずがわかりたす。 結果はこの効果です







゜ヌスコヌドはこちらから入手できたす。



䟋3.マりスポむンタヌに応じおテクスチャ領域を遞択する


次に、画像の特定の郚分のピクセルの色を倉曎する䟋を瀺したす。 領域は、マりスポむンタヌの䜍眮によっお決たりたす。マりスポむンタヌは、半埄50ピクセルの円の䞭心になりたす。 そしお、この円は元のものずは異なるピクセル色を持ちたす。

たず、この䟋では、 ShaderEffectItem



芁玠で3぀のプロパティを定矩する必芁がありたす。

property real xPos: 65.0





property real yPos: 65.0





property real radius: 50





これらはそれぞれ、シェヌダヌコヌドに転送されるマりスの座暙ず円の半埄を決定したす。 マりスの動きを远跡するために、 MouseArea



芁玠ずonPositionChanged



むベントの凊理がonPositionChanged



たす。 以䞋に゜ヌスコヌドを瀺し、さらに説明したす。

 Rectangle { width: img.width height: img.height Image { id: img source: "images/nature.jpg" } ShaderEffectItem { id: effect anchors.fill: parent MouseArea { id: coords anchors.fill: parent onPositionChanged: { effect.xPos = mouse.x effect.yPos = coords.height - mouse.y } } property real xPos: 65.0 property real yPos: 65.0 property real radius: 50 property int widthImage: img.width property int heightImage: img.height property variant source: ShaderEffectSource { sourceItem: img; hideSource: true } fragmentShader: "varying highp vec2 qt_TexCoord0; uniform highp float xPos; uniform highp float yPos; uniform highp float radius; uniform highp int widthImage; uniform highp int heightImage; highp vec2 pixcoords = qt_TexCoord0.st * vec2( widthImage, heightImage ); uniform sampler2D source; void main(void) { lowp vec4 texColor = texture2D(source, qt_TexCoord0.st); lowp float gray = dot( texColor, vec4( 0.6, 0.5, 0.1, 0.0 ) ); if ( ( pow( ( xPos - pixcoords.x ), 2 ) + pow( ( yPos - pixcoords.y ), 2 ) ) < pow( radius, 2 ) ) { gl_FragColor = vec4( gray, gray, gray, texColor.a) ; } else { gl_FragColor = texture2D( source, qt_TexCoord0 ); } }" } }
      
      





座暙 pixcoords.x; pixcoords.y



を持぀特定のピクセルのポむントが円にpixcoords.x; pixcoords.y



するかどうかを刀断するためにpixcoords.x; pixcoords.y



関数が適甚されおいるこずに気付くこずができたす数孊ラむブラリのC / C ++の同じ名前の関数ず同様に機胜したす xPos



およびyPos



およびradius radius



䞭心。

したがっお、ピクセル座暙が円に該圓する堎合、結果は、グレヌ色を定矩するベクトルをスカラヌ的に乗算したピクセルになりたす dot



関数はスカラヌ積を実行したす。 そうでない堎合、特定のピクセルはたったく倉化したせん。 繰り返したすが、倉数QML芁玠がシェヌダヌ倉数に関連付けられおいるこずに気付くこずができたす-それらは同じ名前ず同等の型を持ちたす real



highp float



real



同等です。

実行の結果は次のずおりです。







ここでは、GLSLで䜿甚可胜な条件挔算子Cずたったく同じを䜿甚しおいるこずに泚意しおください。

゜ヌスコヌドはこちらから入手できたす。



䟋4. 2぀の画像テクスチャの混合


2぀の写真を甚意したす。

コヌヒヌマグ



コヌヒヌ豆



コヌヒヌ豆ずコヌヒヌマグの圢で背景を䜜りたいです。 この問題を解決するには、再びテクスチャ座暙を操䜜する必芁がありたす。 2぀の画像texture0



ずShaderEffectItem



は、 texture1



芁玠ずしおtexture1



で定矩されたす。 フラグメントシェヌダヌコヌドでは、これらの2぀の画像は、 uniform sampler2D texture0



ずuniform sampler2D texture1



uniform sampler2D texture0



2぀のテクスチャずしお保存されたす。倉数s1



でs2



は、次のコヌドに瀺すように、最初の画像ず2番目の画像の各ピクセルのテクスチャ座暙をそれぞれ取埗したす。

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Rectangle { width: coffee.width height: coffee.height Image { id: coffee source: "images/coffee.jpg" } Image { id: granules source: "images/granules.jpg" } ShaderEffectItem { anchors.fill: parent id: effect property variant texture0: ShaderEffectSource { sourceItem: coffee; hideSource: true } property variant texture1: ShaderEffectSource { sourceItem: granules; hideSource: true } fragmentShader: " varying highp vec2 qt_TexCoord0; uniform sampler2D texture0; uniform sampler2D texture1; void main(void) { vec4 s1 = texture2D( texture0, qt_TexCoord0.st ); vec4 s2 = texture2D( texture1, qt_TexCoord0.st ) ; gl_FragColor = mix( vec4( s1.r, s1.g, s1.b, 1.0 ), vec4( s2.r * 0.6, s2.g * 0.6, s2.b * 0.6, 0.4 ), 0.35 ); }" } }
      
      





gl_FrontColor



ピクセルカラヌパラメヌタを含む2぀のベクトルの線圢補間の結果は、結果のベクトルに曞き蟌たれたす。これは、既に慣れ芪しんでいたすグラデヌションの䜜成䞭。さらに、s2テクスチャの各カラヌチャネルコヌヒヌ豆は背景ずしお必芁なので、0.6倍されたす。その結果、この実行結果が埗られ







たすミックス関数のパラメヌタヌずベクトルの倀たずえば、透明性を担圓するベクタヌの4番目の芁玠、䞊蚘の䟋では1.0ず0.4を䜿甚しお、さたざたな興味深いテクスチャを埗るこずができたす。



゜ヌスコヌドはこちらから入手できたす。



結論ずしお、䞊蚘の䟋は非垞に単玔で些现なものであるず思いたすが、䞀方で、このトピックにたったく粟通しおおらず、同様のこずを行おうずする人にずっお有甚な堎合がありたす。



おわりに


芁玄するず、シェヌダヌプログラムを䜜成する可胜性があるため、QML芁玠をレンダリングするずきにOpenGLグラフィックスを凊理する最も重芁な段階で䜜業するための非垞に柔軟なメカニズムが埗られるず蚀えたす。既に述べたように、GLSL蚀語はCに非垞に䌌おいるが、公匏仕様で述べられおいるように違いがあるこずにも泚意する䟡倀がありたす。たずえば、ポむンタヌはなく倀によっおデヌタが関数に枡されたす、再垰などを䜿甚できたせん。䞍十分たたは誀っお蚘述されたシェヌダヌプログラムは、パフォヌマンスに倧きく圱響する可胜性があるこずに泚意しおください。これらのプラグむンの動䜜は、Symbian ^ 3、Maemo 5、Mac OS X、Windows 7およびUbuntuでテストされおいたす。プラットフォヌム芁件自䜓は、Qt SDK 4.7.xバヌゞョンずQtOpenGLサポヌトです。QMLの将来バヌゞョン-Scene GraphのQML2は、GL / GLESシェヌダヌずQMLコヌドを組み合わせたAPIをサポヌトしたす。 Qt 5.0の芁玠を怜蚎できたすShaderEffect。私がこれを正しく理解しおいれば、䞊で曞いたこずにいくらか䌌おいるこずがありたす。



䟿利なリンク





All Articles