한국어
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 58723
55 GPU가 없는 장치에서 Qt Quick을 사용 makersweb 2019.04.02 1580
54 QTextCodec클래스를 사용하여 유니코드와 EUC-KR 변환 makersweb 2019.03.25 1871
53 qInstallMessageHandler를 이용한 디버그 메세지 출력 제어하기 makersweb 2019.02.25 888
52 Qt5기반 독립 프로세스(out-of-process)로 동작하는 가상키보드(virtual keyboard) file makersweb 2019.02.24 1848
51 Qml 기본 컴포넌트 강좌 (4) - 모델 리스팅(Listing) file 운영자 2019.02.23 4029
50 Qt Bluetooth를 이용한 시리얼(Serial) 통신 file makersweb 2019.02.17 2349
49 Qml 기본 컴포넌트 강좌 (3) - 배치(positioning) 컴포넌트 file 운영자 2019.02.10 3539
48 QString 문자열 다루기 예제 운영자 2019.01.26 26278
47 Qt SQL을 이용한 가벼운 데이터베이스 다루기 [1] file 운영자 2019.01.23 4743
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++, Qml)테스트 [7] file makersweb 2019.01.20 2130
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 3183
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 3006
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 840
42 Qml 기본 컴포넌트 강좌 (2) [2] file makersweb 2019.01.05 6631
41 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 9259
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 1887
39 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 10675
38 싱글터치 스크린 및 임베디드 리눅스 기반에서 Qt 터치입력 makersweb 2018.12.24 929
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 1585
» Qml에서 커튼효과 구현 예제 - Shader Effects file 운영자 2018.12.05 814