OpenGL Shaders 커튼효과 예제
A Book about Qt5에서 소개된 예제이다.
https://qmlbook.github.io/en/ch09/index.html
CurtainEffect.qml
import QtQuick 2.6 ShaderEffect { anchors.fill: parent mesh: GridMesh { resolution: Qt.size(50, 50) } property real topWidth: open?width:20 property real bottomWidth: topWidth property real amplitude: 0.1 property bool open: false property variant source: effectSource Behavior on bottomWidth { SpringAnimation { easing.type: Easing.OutElastic; velocity: 250; mass: 1.5; spring: 0.5; damping: 0.05 } } Behavior on topWidth { NumberAnimation { duration: 1000 } } ShaderEffectSource { id: effectSource sourceItem: effectImage; hideSource: true } Image { id: effectImage anchors.fill: parent source: "qrc:/assets/fabric.jpg" fillMode: Image.Tile } vertexShader: " attribute highp vec4 qt_Vertex; attribute highp vec2 qt_MultiTexCoord0; uniform highp mat4 qt_Matrix; varying highp vec2 qt_TexCoord0; varying lowp float shade; uniform highp float topWidth; uniform highp float bottomWidth; uniform highp float width; uniform highp float height; uniform highp float amplitude; void main() { qt_TexCoord0 = qt_MultiTexCoord0; highp vec4 shift = vec4(0.0, 0.0, 0.0, 0.0); highp float swing = (topWidth - bottomWidth) * (qt_Vertex.y / height); shift.x = qt_Vertex.x * (width - topWidth + swing) / width; shade = sin(21.9911486 * qt_Vertex.x / width); shift.y = amplitude * (width - topWidth + swing) * shade; gl_Position = qt_Matrix * (qt_Vertex - shift); shade = 0.2 * (2.0 - shade ) * ((width - topWidth + swing) / width); }" fragmentShader: " uniform sampler2D source; varying highp vec2 qt_TexCoord0; varying lowp float shade; void main() { highp vec4 color = texture2D(source, qt_TexCoord0); color.rgb *= 1.0 - shade; gl_FragColor = color; }" }
main.qml에서 사용한 예제
import QtQuick 2.6 import QtQuick.Window 2.2 Item { id: root width: background.width; height: background.height Rectangle { id: background width: 480 height: 240 anchors.centerIn: parent color: "#cccccc" } Text { anchors.centerIn: parent font.pixelSize: 48 color: '#efefef' text: 'Qt5 Cadaques' } CurtainEffect { id: curtain anchors.fill: parent } MouseArea { anchors.fill: parent onClicked: curtain.open = !curtain.open } }
Shader Effects type은 다음과 같이 커튼효과를 낼 수 있다.
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 | 운영자 | 2019.01.05 | 86176 |
8 | QML에서 Websocket 서버와 통신 | makersweb | 2021.09.18 | 834 |
7 | QML에서 D-Bus 통신 | makersweb | 2023.03.15 | 710 |
6 | OpacityMask 예제 | makersweb | 2023.01.26 | 655 |
5 | QML과 코루틴(Coroutines) | makersweb | 2020.11.03 | 581 |
4 | 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 | makersweb | 2021.08.08 | 499 |
3 | QtQuick 애플리케이션에 Rive 애니메이션 통합 | makersweb | 2024.03.31 | 481 |
2 | Binding 타입으로 객체 속성 간 묶기 | makersweb | 2022.03.04 | 428 |
1 | 그래픽 소프트웨어에서 디자인 내보내기 (Exporting Designs from Graphics Software) | j2doll | 2020.12.25 | 416 |