[DirectX] .Net WinForm에서 GDI+와 SharpDX 사용하기 (예제 포함)

SharpDX vs GDI+

지난 포스팅에서 DirectX와 GDI+의 기본적인 차이점과 SharpDX가 무엇인지 알아보았습니다.

[.Net] DirectX와 GDI+의 차이점, 그리고 SharpDX 이해하기

[DirectX] DirectX와 GDI+의 차이점, 그리고 SharpDX 이해하기

간단하게 요약하자면, 2D 이미지 렌더링 기준으로 하드웨어 가속을 지원하냐의 차이점이 있다고 보면 되겠습니다. 이번 포스팅에서는 WinForm 프로젝트에서 SharpDX를 어떻게 사용하는지, 그리고 GDI+ 대비하여 어떤 차이가 있는지 알아보도록 하겠습니다.

따라 하기

예제 코드는 Visual Studio 2022 환경으로 제작했습니다. WinForm에 Picture Box를 추가했고, 선택한 방식(GDI+ 또는 DirectX)에 따라 Picture Box에 이미지를 어떻게 렌더링 하는지 보여줍니다.

WinForm 프로젝트 생성하기

ExamDirectX 이름으로 Windows Forms 앱(.NET Framework)를 생성합니다.

WinForm 프로젝트 생성하기

UI Control 배치하기

아래 그림처럼, UI는 Picture Box와 버튼, 라디오 버튼으로 구성했습니다.

UI 배치

SharpDX NuGet 패키지 설치하기

NuGet 패키지 관리에서 SharpDX를 검색하고 아래의 패키지들을 설치합니다.

NuGet 패키지 설치하기

SharpDX 구현하기

본문 하단에 첨부된 예제 코드에는 MyDirectX.cs 파일이 있습니다. 이 파일에 SharpDX 라이브러리를 어떻게 초기화하고, 파일을 불러오고, 대상 컨트롤에 렌더링 하는지 코드가 구현되어 있습니다. 코드에도 주석으로 설명을 남겨 놓았지만 본문에서도 설명하겠습니다.

각 객체 별 용도

Picture Box는 GDI+ 기반의 컨트롤입니다. DirectX 객체로 해당 컨트롤에 렌더링 하기 위해 아래의 기본 객체들이 사용됩니다.

//DirectX 2D 그래픽 렌더링에 필요한 리소스를 제공
SharpDX.Direct2D1.Factory2 _factory2D = null;

//GPU 하드웨어에 접근하는 인터페이스를 제공
SharpDX.Direct3D11.Device _device = null;

//백 버퍼와 프론트 버퍼를 스왑(ex: 더블 버퍼링)해주는 기능
SharpDX.DXGI.SwapChain _swapChain = null;

//렌더링이 수행되는 타겟
SharpDX.Direct2D1.RenderTarget _renderTarget2D = null;

//DirectX 2D 비트맵
SharpDX.Direct2D1.Bitmap _bitmap = null;

PictureBox 컨트롤과 연동하여 초기화하기

일반적으로 화면에 이미지를 부드럽게 렌더링 하기 위해 더블 버퍼링을 사용합니다. 화면에 보이는 버퍼(프런트 버퍼)와 보여주기 위해 처리하는 버퍼(백 버퍼) 두 개를 의미합니다. 스왑 체인(Swap Chain)은 이 백 버퍼와 프론트 버퍼를 스왑 하여 사용자에게 부드러운 화면을 보여주도록 합니다.

아래의 코드를 수행하면 _renderTarget2D는 PictureBox와 연동됩니다.

public void InitializeControl(PictureBox control)
{
    //스왑 체인에 대한 설정
    var desc = new SwapChainDescription()
    {
        BufferCount = 1, //스왑 체인에 사용될 버퍼의 수
        ModeDescription = new ModeDescription(control.Width, control.Height, new Rational(60, 1), Format.R8G8B8A8_UNorm),
        //Rational: 화면 갱신 속도 1/60
        IsWindowed = true, //스왑 체인이 창 모드에서 동작하도록 설정
        OutputHandle = control.Handle, //출력이 이루어질 창의 핸들
        SampleDescription = new SampleDescription(1, 0), //멀티샘플링의 수준
        SwapEffect = SwapEffect.Discard, //스왑 체인의 스왑 효과. Discard: 스왑 이후 백 버퍼 삭제
        Usage = Usage.RenderTargetOutput //GPU가 이 자원에 그래픽 데이터를 직접 쓸 수 있음을 의미
    };

    _targetWindowSize.Left = 0;
    _targetWindowSize.Top = 0;
    _targetWindowSize.Right = control.Width;
    _targetWindowSize.Bottom = control.Height;

    SharpDX.Direct3D11.Device.CreateWithSwapChain(DriverType.Hardware, DeviceCreationFlags.BgraSupport, desc, out _device, out _swapChain);

    //DirectX 2D 그래픽 렌더링에 필요한 리소스를 만들기 위한 기능을 제공
    _factory2D = new SharpDX.Direct2D1.Factory2();

    //Surface는 그래픽 데이터를 저장하고 그리기 작업을 수행하는 데 사용되는 클래스
    var backBuffer = Surface.FromSwapChain(_swapChain, 0);
    var properties = new RenderTargetProperties(new SharpDX.Direct2D1.PixelFormat(Format.Unknown, SharpDX.Direct2D1.AlphaMode.Premultiplied));

    _renderTarget2D = new RenderTarget(_factory2D, backBuffer, properties);
}

파일로부터 SharpDX 비트맵 생성하기

WIC(windows Imaging Component)를 사용하여 이미지 파일을 불러온 후 렌더링 타깃에 사용할 수 있는 Direct2D 비트맵으로 생성합니다.

public void LoadBitmap(string filename)
{
    //Bitmap 디코더/인코더, 포맷 변경, 스케일러 등 지원
    var wicFactory = new SharpDX.WIC.ImagingFactory2();

    //파일로부터 이미지 불러오기
    var wicDecoder = new SharpDX.WIC.BitmapDecoder(wicFactory, filename, SharpDX.WIC.DecodeOptions.CacheOnDemand);

    //파일로부터 불러온 디코더의 첫 프레임 가져오기
    //이미지 파일은 하나의 프레임이지만, GIF의 경우 여러 프레임
    var wicFrame = wicDecoder.GetFrame(0);

    //포맷 컨버터 생성 및 초기화
    var converter = new SharpDX.WIC.FormatConverter(wicFactory);
    converter.Initialize(wicFrame, SharpDX.WIC.PixelFormat.Format32bppPRGBA);

    //변환된 이미지 데이터를 Direct2D 비트맵으로 변환
    _bitmap = SharpDX.Direct2D1.Bitmap.FromWicBitmap(_renderTarget2D, converter);

    //객체 소멸
    converter.Dispose();
    wicFrame.Dispose();
    wicDecoder.Dispose();
    wicFactory.Dispose();
}

화면에 그리기

화면에 그리기 위해 아래의 코드가 수행됩니다. 특히 마지막 라인의 코드가 중요한데요. Present 함수를 호출해야 화면에 보입니다. 첫 번째 인자는 모니터의 리프레시 속도(VSync)와 동기화하는 인자입니다. 0은 즉시 화면에 표시하고, 1은 모니터의 갱신 속도와 동기를 맞춥니다. 두 번째 인자는 VSync와 관련하여 동작을 설정하는 플래그입니다. 특정 효과를 얻고 싶다면 플래그를 설정하면 되지만 성능 저하나 오류가 발생할 수 있으니 잘 알고 사용해야 합니다.

public void Render()
{
    //렌더링 작업 시작
    _renderTarget2D.BeginDraw();

    //렌더링 화면 비우기(특정 색상 채우기 가능)
    _renderTarget2D.Clear(new SharpDX.Mathematics.Interop.RawColor4(1.0f, 1.0f, 1.0f, 1.0f));

    //1:1 비율로 그리기
    //_renderTarget2D.DrawBitmap(_bitmap, 1.0f, SharpDX.Direct2D1.BitmapInterpolationMode.Linear);

    //렌더링 타겟에 채워서 그리기
    _renderTarget2D.DrawBitmap(_bitmap, _targetWindowSize, 1.0f, SharpDX.Direct2D1.BitmapInterpolationMode.Linear);

    //렌더링 작업 종료
    _renderTarget2D.EndDraw();

    //스왑 체인의 렌더링 이미지를 화면에 표시하는 역할
    _swapChain.Present(1, PresentFlags.None);
}

객체 소멸

더 이상 사용하지 않는 객체는 소멸합니다.

public void Dispose()
{
    _renderTarget2D?.Dispose();
    _renderTarget2D = null;

    _swapChain?.Dispose();
    _swapChain = null;

    _device?.Dispose();
    _device = null;

    _factory2D?.Dispose();
    _factory2D = null;

    _bitmap?.Dispose();
    _bitmap = null;
}

버튼 동작

라디오 버튼으로 GDI+ 또는 DirectX를 선택한 후 실행 버튼을 클릭하면 각 방식 별 렌더링을 위한 스레드 함수가 동작합니다. CPU 및 GPU 사용율을 확인하기 위해 500회 반복하도록 구현했습니다.

private void btnLoad_Click(object sender, EventArgs e)
{
    try
    {
        OpenFileDialog dlg = new OpenFileDialog();
        if(dlg.ShowDialog() == DialogResult.OK)
        {
            Thread thread = null;
            if (rbtnDirectX.Checked == true)
            {
                _directX.LoadBitmap(dlg.FileName);
                thread = new Thread(threadFuncDirectX);
            }
            else
            {
                _bitmap = new Bitmap(dlg.FileName);
                //...

                thread = new Thread(threadFuncGDI);
            }
            thread.Start();
        }
    }
    catch (Exception exc)
    {
        MessageBox.Show(exc.Message);
    }
}

private void threadFuncDirectX()
{
    for (int i = 0; i < 500; i++)
    {
        Thread.Sleep(30);
        _directX.Render();
    }
}

private void threadFuncGDI()
{
    for (int i = 0; i < 500; i++)
    {
        Thread.Sleep(30);
        _graphics.DrawImage(_bitmap, new Rectangle(0, 0, pbView.Width, pbView.Height));
    }
}

동작 결과

인터넷에서 고해상도 이미지를 다운받습니다. 저는 24MB의 고해상도 이미지를 사용했습니다.

GDI+로 동작하면 CPU 부하가 약 10%까지 증가합니다. GPU는 사용하지 않으므로 따로 사용량이 없습니다.

GDI+ 동작 성능

반면, DirectX로 동작하면 CPU 부하가 거의 없으며 GPU 사용량이 증가합니다.

DirectX 동작 성능

전체 코드는 아래 첨부된 예제 파일을 참고하세요.

ExamDirectX.zip

12.28MB