한국어
Qt
 

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은 다음과 같이 커튼효과를 낼 수 있다.

jwplayer

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 205
50 Qt Bluetooth를 이용한 시리얼(Serial) 통신 file makersweb 2019.02.17 17
49 Qml 기본 컴포넌트 강좌 (3) - 배치(positioning) 컴포넌트 file 운영자 2019.02.10 17
48 QString 문자열 다루기 예제 운영자 2019.01.26 44
47 Qt SQL을 이용한 가벼운 데이터베이스 다루기 file 운영자 2019.01.23 14
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++, Qml)테스트 file makersweb 2019.01.20 72
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 9
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 22
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 17
42 Qml 기본 컴포넌트 강좌 (2) file makersweb 2019.01.05 57
41 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 78
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 49
39 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 100
38 싱글터치 스크린 및 임베디드 리눅스 기반에서 Qt 터치입력 makersweb 2018.12.24 27
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 61
» Qml에서 커튼효과 구현 예제 - Shader Effects file 운영자 2018.12.05 59
35 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 195
34 리눅스에서 Qt4.8기반 어플리케이션의 한글입력 file makersweb 2018.11.29 61
33 QML에서 동적으로 텍스트 다국어 처리 file makersweb 2018.11.04 120
32 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 182