한국어
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 85359
176 가상키보드(Qt Virtual Keyboard)를 사용하는 방법 [32] file makersweb 2019.05.03 219973
175 콘솔에서 사용자 입력받기 file makersweb 2020.03.22 51791
174 QString 문자열 다루기 예제 운영자 2019.01.26 39608
173 Windows에서 Qt 설치 따라하기 file makersweb 2019.10.14 30791
172 Qt의 시그널 슬롯 시스템 file makersweb 2015.10.20 23435
171 QThread 소개 및 예제 makersweb 2019.12.25 19232
170 QtCreator Design으로 GUI만들기 (QML로 만드는 Hello World -2) [1] file makersweb 2019.05.26 14772
169 초보자를 위한 첫번째 프로젝트 - QML로 만드는 Hello World file makersweb 2018.03.16 14360
168 Qt 프로그래밍의 시작 makersweb 2015.10.25 14326
167 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 13829
166 QML과 QtQuick 모듈 개념과 기본 타입들 makersweb 2019.04.26 13325
165 Windows에서 라즈베리파이3용 Qt5.10.0 크로스컴파일 [20] file makersweb 2018.02.23 12719
164 Qt의 오픈소스 라이센스 소개 file makersweb 2019.12.15 12383
163 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 11978
162 QtSerialPort를 사용한 시리얼(Serial)통신 [3] makersweb 2019.05.21 11759
161 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 11601
160 Qt 응용프로그램 배포(windows) file makersweb 2018.10.10 11168
159 Ubuntu Linux에서 Qt Creator 설치 file makersweb 2016.03.06 10647
158 Qt의 스레드간 시그널 슬롯의 커넥션타입 [1] makersweb 2015.10.24 10106
157 QML 강좌 - 동적 Listing (ListView) file makersweb 2019.06.01 10029