Qt Quick 예제 - 셰이더 효과

이 예제는 Qt Quick 에서 셰이더를 사용하여 구현할 수 있는 몇 가지 시각적 효과를 보여줍니다. 텍스트와 몇 개의 이미지에 다섯 가지 서로 다른 효과를 적용합니다. 자세한 내용은 ‘ Qt Quick 의 중요한 개념’을 참조하십시오 . - Graphical Effects

예제 실행

다음에서 예제를 실행할 수 있습니다.

• Qt Creator

  Welcome 모드를 열고 Examples 에서 예제를 선택하십시오. 자세한 내용은 Qt Creator: 튜토리얼: 빌드 및 실행을 참조하십시오.

• Qt Extension for Visual Studio Code

  Command Palette 에서 Qt: Open Qt examples 명령을 실행하고 목록에서 예제를 선택합니다. 자세한 내용은 Qt Extension for Visual Studio Code: 튜토리얼: 빌드 및 실행을 참조하십시오.

ShaderEffect 사용

ShaderEffect 유형은 일반적으로 ShaderEffectSource 를 사용하여 다른 유형을 조작합니다:

ShaderEffectSource {
    id: theSource
    sourceItem: theItem
}

위의 코드 조각에서 theItem 는 파일 내의 복잡한 QML 객체의 ID입니다.

ShaderEffect는 이 ShaderEffectSource 를 프래그먼트 셰이더에서 텍스처로 사용할 수 있습니다:

fragmentShader: "content/shaders/wobble.frag.qsb"

OpenGL뿐만 아니라 여러 그래픽 API를 지원하기 위해, 셰이더 소스는 QML에 직접 포함되지 않습니다. 참조된 .qsb 파일은 셰이더 코드의 여러 변형을 포함하는 미리 생성된 셰이더 팩입니다. Qt Quick 는 실행 시점에 사용되는 그래픽 API(Vulkan, Metal, Direct3D 11 또는 OpenGL)에 따라 적절한 셰이더를 선택합니다. .qsb 파일은 오프라인에서 생성되며 Qt 리소스 시스템을 통해 실행 파일과 함께 번들링됩니다.

셰이더에서 ShaderEffect 의 모든 사용자 정의 속성을 사용할 수 있습니다. 이를 통해 애니메이션 셰이더 코드를 매우 쉽게 구현할 수 있습니다:

property variant source: theSource
property real bend
property real minimize
property real side: genieSlider.value
SequentialAnimation on bend {
    loops: Animation.Infinite
    NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1600 }
    NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1000 }
}
SequentialAnimation on minimize {
    loops: Animation.Infinite
    PauseAnimation { duration: 300 }
    NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1000 }
    NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1300 }
}

ShaderEffects는 사용자 정의 버텍스 셰이더를 가질 수도 있습니다. ShaderEffect 의 mesh 속성을 설정하면 조작할 수 있는 버텍스 수가 늘어남으로써 더 다양한 효과를 구현할 수 있습니다.

mesh: Qt.size(10, 10)
vertexShader: "content/shaders/genie.vert.qsb"

예제 프로젝트 @ code.qt.io