Wiggly

Wiggly는 Qt Quick Effect Maker (QQEM)으로 만든 셰이더 효과를 Qt Quick 애플리케이션에서 사용하는 방법을 보여줍니다. 간단한 Qt Quick 사용자 인터페이스를 통해 흔들리는 텍스트와 물결의 크기를 변경하고 전기 구름 효과를 적용할 수 있습니다.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.

애플리케이션 기본 사항

예제의 대부분은 main.qml 파일에 포함되어 있고 설정되어 있습니다. 먼저 효과의 소스로 사용되는 항목을 만듭니다.

Rectangle {
    id: sourceItem
    anchors.centerIn: parent
    width: textItem.width + 60 * mainWindow.px
    height: textItem.height + 30 * mainWindow.px
    color: "#d0d0d0d0"
    border.color: "#d0ffffff"
    border.width: 4 * mainWindow.px
    radius: 20 * mainWindow.px
    layer.enabled: true
    layer.smooth: true
    visible: false
    Text {
        id: textItem
        anchors.centerIn: parent
        text: wigglyTextField.text
        font.family: font1.font.family
        font.pixelSize: Math.min(200 * mainWindow.px, 0.8 * mainWindow.width / text.length)
    }
}

이 항목은 Text 요소가 포함된 Rectangle 입니다. 직사각형의 크기는 애플리케이션 창에 잘 맞도록 텍스트의 글자 수에 따라 달라집니다. 여기서 중요한 줄은 layer.enabled: true로 설정하면 효과의 화면 밖 텍스처가 생성되고 visible: false로 설정하면 효과가 해당 콘텐츠를 대체하므로 이 요소를 숨깁니다. 항목이 표시되면 흔들리는 효과 없이 다음과 같이 표시됩니다:

다음으로 효과를 제어하는 데 사용되는 설정 도구 모음을 만듭니다.

TextField {
    id: wigglyTextField
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.3
    text: "Wiggly"
}
Slider {
    id: wigglyAmountYSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 40
}
Slider {
    id: wigglyAmountXSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 20
}
Switch {
    id: electricSwitch
    anchors.verticalCenter: parent.verticalCenter
}

이러한 구성 요소는 Qt Quick Controls를 Row 요소 안에 쌓아 올립니다. 첫 번째는 TextField 요소로, 흔들리는 텍스트를 변경하는 데 사용할 수 있습니다. 그런 다음 별도의 Slider 요소가 있어 X 및 Y 좌표에서 물결 모양 크기를 제어할 수 있습니다. 마지막 컨트롤은 전기 구름 효과를 활성화하기 위한 Switch 입니다.

WigglyEffect {
    id: wigglyEffect
    source: sourceItem
    anchors.fill: sourceItem
    timeRunning: true
    wigglyAmountX: wigglyAmountXSlider.value
    wigglyAmountY: wigglyAmountYSlider.value
    electricCloudColor.a: electricSwitch.checked ? 1.0 : 0.0
    wigglyShadows: 0.5
}

이 흔들림 효과는 앞서 정의한 sourceItem 에 적용됩니다. 코드에서 timeRunning 을 true로 설정하여 이펙트를 애니메이션합니다. 마지막으로 일부 셰이더 효과 프로퍼티를 제어 컴포넌트에 연결합니다.

WigglyEffect.qml 파일에서 효과에 대한 자세한 내용을 확인할 수도 있습니다. 하지만 이 파일은 QQEM 도구로 생성되므로 일반적으로 수동으로 수정해서는 안 됩니다. 대신 다음 섹션의 지침에 따라 Qt Quick Effect Maker 을 사용하세요.

QQEM에서 효과 수정하기

위에서 언급했듯이 흔들림 효과는 Qt Quick Effect Maker 을 사용하여 만들었습니다. QQEM 설치에 대한 자세한 내용은 Qt Quick Effect Maker 설치하기 문서를 참조하세요.

효과를 수정하려면 다음과 같이 하세요:

1. QQEM 도구에서 효과 프로젝트 파일(qep)을 엽니다.
2. 효과 노드, 속성 또는 셰이더 코드를 수정하고 실시간 미리 보기를 확인합니다.
3. 준비가 되면 수정한 효과를 애플리케이션으로 내보냅니다.

QQEM에서 WigglyEffect/WigglyEffect.qep 프로젝트가 열리면 다음과 같은 화면이 표시됩니다:

왼쪽에는 이 효과의 다른 노드가 있는 Node view 을 볼 수 있습니다. 오른쪽 상단에는 Property view, 효과의 속성(API)이 표시됩니다. 오른쪽 하단에는 현재 선택된 미리보기 소스 항목과 함께 효과의 Live view 이 표시됩니다. 실제 콘텐츠가 포함된 실시간 미리보기를 보려면 Edit > Preferences 의 소스 목록에 sourceItem 의 이미지를 추가하고 미리보기 도구 모음 팝업 목록에서 선택합니다.

흔들림 효과의 셰이더 코드를 수정하려면 흔들림 노드를 두 번 클릭하거나 선택하고 DESIGN 모드에서 CODE 모드로 전환합니다. 그런 다음 VERT 탭을 선택하면 대부분의 효과 코드가 있는 버텍스 셰이더를 볼 수 있습니다:

@mesh 63, 1
out vec3 wigglyColor;

float rainbowColor(float phase) {
    return abs(sin(texCoord.x * 2.0 + iTime + phase));
}

@main
{
    float wave = sin(vertCoord.x * 0.01 + iTime * 3.0);
    vertCoord.x += wigglyAmountX * wave;
    vertCoord.y += wigglyAmountY * wave;
    const float tau = 6.28318530718;
    wigglyColor.r = rainbowColor(0.0);
    wigglyColor.g = rainbowColor(1.0/3.0 * tau);
    wigglyColor.b = rainbowColor(2.0/3.0 * tau);
    float shadowAmount = (wigglyAmountX + wigglyAmountY) * wave;
    wigglyColor.rgb += shadowAmount * wigglyShadows * 0.01;
}

첫 번째 줄은 ShaderEffect 메시 그리드 크기를 설정합니다. 기본적으로 모서리에만 정점이 있고 흔들리는 효과에는 더 많은 움직이는 정점이 필요하기 때문에 이 설정이 필요합니다. 그런 다음 버텍스 셰이더가 wigglyColor 변수를 출력하도록 설정하면 나중에 그림자를 적용하기 위해 조각 셰이더에서 사용됩니다. 다음으로 위상에서 단일 채널의 색상을 반환하는 rainbowColor 이라는 함수를 도입합니다.

메인 메서드 내부의 코드에서는 먼저 vertCoord 를 설정하여 사인파로 버텍스 위치를 이동합니다. 다음 줄은 흔들리는 무지개의 빨강, 초록, 파랑 채널을 설정합니다. 마지막 두 줄은 물결 모양에 따라 그림자를 적용합니다.

다음으로 FRAG 탭을 선택하면 조각 셰이더 코드를 볼 수 있습니다:

@main
{
    fragColor.rgb *= wigglyColor * fragColor.a;
}

프래그먼트 셰이더는 매우 간단하며 현재 소스 색상에 버텍스 셰이더에서 받은 wigglyColor 을 곱하기만 합니다.

더 많은 처리를 프래그먼트 셰이더 쪽에서 수행할 수도 있지만 일반적으로 버텍스 셰이더의 코드가 조각(픽셀) 수보다 훨씬 적기 때문에 더 성능이 좋습니다. Shadertoy와 같은 일부 도구는 프래그먼트 셰이더만 작성할 수 있습니다. 하지만 Qt Quick 및 QQEM은 커스텀 버텍스 셰이더도 지원하므로 이를 활용하는 것이 좋습니다.

이러한 셰이더를 수정하면 Live view 의 출력이 즉시 변경됩니다. 예제 애플리케이션에서 수정된 셰이더를 사용하려면 메뉴에서 File > Export 을 선택하세요.

이제 QQEM 기능으로 더 많은 플레이를 할 수 있습니다. 예를 들어 새 노드 추가, 새 속성 변경 또는 추가, 셰이더 코드에서 이러한 속성 활용 등을 할 수 있습니다. 다음은 노드 그래프의 시작 부분에 LedScreen 노드를 추가했을 때 효과가 어떻게 나타나는지 보여주는 예시입니다:

Files:

• wiggly/CMakeLists.txt
• wiggly/WigglyEffect/WigglyEffect.qml
• wiggly/main.cpp
• wiggly/main.qml
• wiggly/qml.qrc
• wiggly/wiggly.pro