주요 내용으로 건너뛰기

그래픽 엔진

TouchGFX 그래픽 엔진의 주된 역할은 내장된 장치의 디스플레이에 그래픽을 드로잉하는 것입니다.

이 섹션에서는 TouchGFX 그래픽 엔진에 대한 소개와 더불어 이러한 방식을 이용하는 이유에 대해 알아봅니다.

장면 모델​

그래픽 엔진은 크게 두 가지 범주로 나뉩니다.

  • 즉시 모드 그래픽 엔진은 애플리케이션이 디스플레이에 그래픽을 바로 드로잉할 수 있는 API를 제공합니다. 따라서 그리기 연산을 적시에 호출하는 것은 애플리케이션에 달려 있습니다.
  • 유지 모드 그래픽 엔진에서는 사용자가 표시되는 그래픽 구성요소의 추상적 모델을 조작할 수 있습니다. 엔진은 이 그래픽 구성요소 모델을 정확한 그래픽 그리기 연산으로 적시에 변환합니다.

TouchGFX는 유지 모드 그래픽 원리를 따릅니다. 즉, TouchGFX는 사용자가 조작할 수 있는 모델을 제공하고, 이후 조작된 모델을 최적의 렌더링 메소드 호출로 변환합니다.

유지 모드 그래픽

TouchGFX가 유지 모드로 실행되는 데 따른 이점에는 여러 가지가 있는데, 대표적인 이점을 예로 들면 다음과 같습니다.

  • 사용 용이성: 유지 모드 그래픽 엔진은 사용이 쉽습니다. 사용자는 내부 모델에 대한 메소드를 호출하여 구성요소의 스크린 구성 문제를 해결할 뿐, 실제 그리기 연산에 대해서는 신경 쓸 필요 없습니다.
  • 성능: TouchGFX는 장면 모델을 분석하여 모델을 스크린에 그릴 때 필요한 호출을 최적화합니다. 이때 숨은 구성요소는 의도적으로 그리지 않으며, 구성요소에서 바뀐 부분만 그려서 전송하거나, 프레임버퍼를 관리하는 작업 등이 포함됩니다.
  • 상태 관리: TouchGFX는 장면 모델에서 활성화된 부분을 추적합니다. 덕분에 사용자는 장면 모델 내용을 더욱 쉽게 최적화할 수 있습니다.

TouchGFX가 유지 모드 그래픽 기법을 따를 때 발생하는 주된 단점은 다음과 같습니다.

  • 메모리 사용: 장면 모델을 나타내면 메모리를 차지하게 됩니다. TouchGFX는 장면 모델을 분석하여 해당하는 렌더링 작업을 최적화함으로써 초당 60프레임으로 렌더링을 실행합니다. 지금까지 TouchGFX의 장면 모델에서 사용하는 메모리 용량을 줄이기 위해 많은 노력이 있었습니다. 일반적인 애플리케이션에서 장면 모델에 사용되는 메모리의 용량은 1킬로바이트에 훨씬 못 미칩니다.

모델 조작​

장면 모델은 여러 가지 요소로 구성되어 있습니다.

위젯 트리

모델의 각 구성요소는 연결된 부모 구성요소가 1개씩 있습니다. 부모 구성요소 역시 장면 모델의 일부입니다. 이러한 모델을 일반적으로 트리라고 합니다.

앞으로 이러한 트리 구성요소를 UI 구성요소 내지는 위젯이라고 칭하겠습니다.

애플리케이션 관점에서 봤을 때, 표시되는 그래픽은 장면 모델의 위젯을 설정하거나 조작했을 때 업데이트됩니다. 예를 들어 위치와 이미지를 설정하여 버튼을 장면 모델에 추가하면 다음과 같습니다.

myButton.setXY(100,50);
myButton.setBitmaps(Bitmap(BITMAP_BUTTON_RELEASED_ID), Bitmap(BITMAP_BUTTON_PRESSED_ID));
add(myButton);

그리기 명령 실행​

결과적으로 TouchGFX는 장면 모델을 렌더링할 때 그리기 API를 이용합니다. 그리기 API에는 박스, 이미지, 텍스트, 선, 다각형, 텍스처 삼각형 등 그래픽 프리미티브를 그릴 때 필요한 메소드가 있습니다.

예를 들어 TouchGFX의 버튼 위젯은 렌더링 시 이미지 그리기 위해 drawPartialBitmap 메소드를 사용합니다. TouchGFX에서 버튼 위젯을 그릴 때 사용되는 소스 코드는 아래와 유사합니다.

touchgfx/widgets/button.cpp
void Button::draw(const Rect& invalidatedArea) const
{
    // calculate the part of the bitmap to draw
    api.drawPartialBitmap(bitmap, x, y, part, alpha);
}

자세한 내용은 touchgfx/widgets/button.cpp에서 실제 소스를 참조하십시오.

TouchGFX에는 최적화된 그리기 API 구현체가 포함되어 있습니다. drawPartialBitmap 인스턴스 메소드는 비트맵 그리기를 위해 기반 하드웨어(가능한 경우 Chrom-ART)를 이용합니다.

따라서 새로운 유형의 위젯을 추가하여 장면 모델을 확장할 때는 이러한 API 그리기 메소드를 이용할 수 있습니다. 커스텀 위젯을 만드는 방법은 해당 섹션을 참조하십시오.

그리기 API 메소드의 구현체는 플랫폼에 따라 다르며, 특정 MCU에 최적화되어 있습니다.

메인 루프​

다수의 게임 엔진과 그래픽 엔진을 비롯해 특히 TouchGFX의 작업 방식은 무한 루프라고 할 수 있습니다.

TouchGFX의 메인 루프는 다음과 같이 세 가지 주요 작업으로 이루어집니다.

  • 이벤트 수집: 터치 스크린, 물리적 버튼 누름, 백엔드 시스템의 메시지 등에서 이벤트를 수집합니다.
  • 장면 모델 업데이트: 수집된 이벤트에 대해 모델의 위치와 애니메이션, 색상, 이미지 등을 업데이트하여 반응합니다.
  • 장면 모델 렌더링: 모델에서 업데이트된 부분을 다시 드로잉하여 디스플레이에 표시합니다.

메인 루프를 도표로 나타내면 다음과 같습니다.

메인 루프

메인 루프가 실행될 때마다 애플리케이션이 한 번씩 실행된다고 할 수 있습니다.

플랫폼 적응 능력​

TouchGFX는 STM32에 삽입되는 모든 구성에서 실행되도록 설계되었기 때문에 위에서 언급한 작업들도 맞춤 설정이 가능합니다.

  • 이벤트 수집은 전담 추상화 계층에서 처리됩니다. 추상화 계층에 대한 맞춤 설정은 TouchGFX AL 개발 섹션에 나와 있습니다.
  • 모델 업데이트는 전적으로 애플리케이션에 달려 있습니다. 업데이트 방법에 대한 자세한 내용은 UI 개발 섹션에 나와 있습니다.
  • 프레임버퍼에 대한 그래픽 렌더링은 TouchGFX에서 처리하며, 일반적으로 맞춤 설정이 필요하지 않습니다. 프레임버퍼의 픽셀을 디스플레이로 전송하는 작업은 플랫폼에 따라 다릅니다. 플랫폼에 따라 맞춤 설정하는 방법은 보드 브링 업 및 TouchGFX AL 개발 섹션을 참조하십시오.

다음 섹션에서 TouchGFX의 메인 루프에 대해 자세히 알아보십시오.