Wiggly

Wiggly는 퀵퀀트 이펙트 모듈( Qt Quick Effect Maker, QQEM)로 만든 셰이더 이펙트를 Qt Quick 애플리케이션에서 사용하는 방법을 보여줍니다. 간단한 Qt Quick 사용자 인터페이스를 통해 흔들리는 텍스트와 파동 크기를 변경하고, 번개 구름 이펙트를 적용할 수 있습니다.

예제 실행

다음 단계에 따라 예제를 실행할 수 있습니다.

• Qt Creator

  Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 Qt Creator: 튜토리얼: 빌드 및 실행을 참조하십시오.

• Qt Extension for Visual Studio Code

  Command Palette 에서 Qt: Open Qt examples 명령을 실행하고 목록에서 예제를 선택하십시오. 자세한 내용은 Qt Extension for Visual Studio Code: 튜토리얼: 빌드 및 실행을 참조하십시오.

애플리케이션 기본 사항

예제의 대부분은 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 ControlsRow 요소 안에 중첩되어 있습니다. 첫 번째는 TextField 로, 이를 통해 흔들리는 텍스트를 변경할 수 있습니다. 그 다음에는 X 및 Y 좌표의 파동 크기를 제어하는 별도의 Slider 요소들이 있습니다. 마지막 컨트롤은 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
}

이 WigglyEffect는 앞서 정의한 sourceItem 에 적용됩니다. 코드는 timeRunning 을 true로 설정하여 효과를 애니메이션화합니다. 마지막으로, 일부 셰이더 효과 속성을 제어 구성 요소에 연결합니다.

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

QQEM에서 효과 수정하기

앞서 언급한 바와 같이, WigglyEffect는 Qt Quick Effect Maker 파일을 사용하여 생성되었습니다. QQEM 설치에 대한 자세한 내용은 ‘ Qt Quick Effect Maker 설치’ 문서를 참조하십시오.

이펙트를 수정하려면:

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

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

왼쪽에는 이 이펙트의 다양한 노드가 포함된 이펙트 트리( Node view )가 표시됩니다. 오른쪽 상단 뷰는 이펙트의 속성(API)을 보여주는 이펙트 속성( Property view)입니다. 오른쪽 하단에는 효과의 Live view 가 표시되며, 현재 선택된 미리보기 소스 항목이 나타납니다. 실제 콘텐츠가 반영된 실시간 미리보기를 보려면, Edit > Preferences 에서 sourceItem 의 이미지를 소스 목록에 추가한 후, 미리보기 도구 모음의 팝업 목록에서 이를 선택하십시오.

wiggly 효과의 셰이더 코드를 수정하려면 Wiggly 노드를 더블클릭하거나 선택한 후, ' 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 메쉬 그리드 크기를 설정합니다. 기본적으로 정점은 모서리에만 존재하지만, Wiggly 효과에는 더 많은 움직이는 정점이 필요하기 때문에 이 설정이 필요합니다. 그런 다음, 정점 셰이더가 wigglyColor 변수를 출력하도록 설정합니다. 이 변수는 나중에 프래그먼트 셰이더에서 그림자를 적용하는 데 사용될 것입니다. 다음으로, 위상(phase)에서 단일 채널의 색상을 반환하는 ` rainbowColor`라는 함수를 정의합니다.

main 메서드 내에서 코드는 먼저 vertCoord 를 설정하여 정점 위치를 사인파 형태로 이동시킵니다. 다음 줄에서는 물결치는 무지개의 빨강, 녹색, 파랑 채널을 설정합니다. 마지막 두 줄에서는 파형을 따라 약간의 그림자 효과를 적용합니다.

다음으로, ‘ FRAG ’ 탭을 선택하여 프래그먼트 셰이더 코드를 확인해 보겠습니다:

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

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

더 많은 처리를 프래그먼트 셰이더 측에서 수행할 수도 있었겠지만, 버텍스 수는 프래그먼트(픽셀) 수보다 현저히 적기 때문에 코드를 버텍스 셰이더에 두는 것이 일반적으로 성능이 더 우수합니다. Shadertoy와 같은 일부 도구는 프래그먼트 셰이더만 작성할 수 있도록 제한합니다. 하지만 Qt Quick 와 QQEM은 사용자 정의 버텍스 셰이더도 지원하므로, 이를 활용해 보시기 바랍니다.

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

이제 QQEM의 다양한 기능을 더 자유롭게 활용해 볼 수 있습니다. 예를 들어, 새로운 노드를 추가하거나, 속성을 변경 또는 추가하고, 셰이더 코드에서 이러한 속성을 활용하는 등의 작업을 수행할 수 있습니다. 다음은 노드 그래프의 시작 부분에 ‘ LedScreen ’ 노드를 추가했을 때의 효과 예시입니다:

파일:

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