WPF 3D 과학 차트:

← WPF 차트 비교로 돌아가기

과학 시각화에는 동일한 데이터의 두 가지 뷰가 자주 필요합니다: 지형을 보여주는 3D 표면과 정확한 값 분포를 보여주는 2D 등고선 히트맵. 대부분의 차트 라이브러리는 이를 별도의 데이터 저장소, 별도의 렌더링 파이프라인, 별도의 메모리 할당을 가진 완전히 별개의 차트 유형으로 취급합니다. ProEssentials는 근본적으로 다른 것을 합니다 — 동일한 GPU Compute Shader 파이프라인에서, 동일한 데이터 포인터를 읽으며, 추가 메모리 사용 없이 두 뷰를 모두 렌더링합니다.

이 페이지는 5개 WPF 라이브러리 전체의 3D 및 2D 과학 차트 기능을 비교하고, 공유 메모리 아키텍처를 보여주는 재료 표면 스캔 애플리케이션의 실제 프로덕션 코드를 안내하며, ProEssentials만 제공하는 차트 유형을 상세히 설명합니다 — 4D 값별 색상 표면, 포인트 클라우드에서의 내장 Delaunay 삼각분할, 임의 3D 지오메트리를 위한 사용자 정의 폴리곤 데이터 포함.

3D 및 2D 과학 차트 유형 매트릭스

아래 표는 5개 WPF 라이브러리 전체의 모든 과학 차트 유형을 비교합니다. SciChart와 LightningChart는 각각 13가지 유형 중 12가지를 지원하며 강력한 3D 범위를 제공하지만, 어느 것도 포인트 클라우드에서의 Delaunay 삼각분할을 제공하지 않습니다. Syncfusion은 SfSurfaceChart 및 SfChart3D 컨트롤을 통해 7가지 유형을 지원합니다. DevExpress는 Chart3DControl을 통해 5가지를 지원합니다. ProEssentials는 아래 나열된 13가지 차트 유형을 모두 지원하는 유일한 라이브러리이며, 표면, 등고선, 히트맵, 실시간 3D에 걸쳐 GPU Compute Shader 렌더링을 제공하는 유일한 라이브러리입니다.

ProEssentials는 이 비교의 13가지 과학 차트 유형을 모두 지원합니다. SciChart와 LightningChart는 각각 12개, Syncfusion은 7개, DevExpress는 5개를 지원합니다. 5개 라이브러리 모두 일정 수준의 3D 표면 차트를 제공하지만, 포인트 클라우드에서의 내장 Delaunay 삼각분할을 제공하는 것은 ProEssentials뿐이며, 제로 카피 공유 메모리로 통합된 GPU Compute Shader 파이프라인을 통해 표면, 등고선, 히트맵, 실시간 3D를 렌더링하는 것도 ProEssentials뿐입니다.

실제 코드: 재료 표면 스캔 애플리케이션

다음 코드 발췌는 GigaPrime3D 재료 표면 스캔 데모에서 가져온 것입니다 — 고해상도 표면 스캔 데이터(최대 6000 × 6000 그리드, 3,600만 데이터 포인트)를 3D 음영 표면과 2D 등고선 히트맵으로 동시에 렌더링하는 프로덕션급 WPF 애플리케이션입니다. 이것은 단순화된 튜토리얼 예제가 아닙니다. 이것은 산업 계측, 반도체 웨이퍼 검사, 지형 분석 애플리케이션에서 사용되는 코드 패턴입니다. 아래 세 개의 코드 발췌는 공유 메모리 선언, GPU Compute Shader를 사용한 이중 제로 카피 데이터 로딩, 2D와 3D 뷰 간의 연결된 줌 동기화를 보여줍니다.

1단계: 공유 정적 메모리 — 하나의 배열, 두 개의 차트

애플리케이션은 3,600만 높이 값을 담기에 충분한 단일 정적 float 배열(sMyYData)을 할당합니다 — 표면 스캔의 Y(높이) 데이터입니다. X 및 Z 배열은 각각 열과 행의 그리드 좌표를 보유합니다. 이 세 배열이 전체 애플리케이션의 유일한 데이터 저장소입니다. 어떤 차트 컨트롤도 자체 복사본을 할당하지 않습니다.

// 36M points × 4 bytes = ~150 MB
// Passing shared app memory to both Pe3do and Pesgo saves ~150 MB
// Always best to save memory where we can
private static float[] sMyXData = new float[6000];       // cols max
private static float[] sMyZData = new float[6000];       // rows max
private static float[] sMyYData = new float[36000000];   // rows × cols max

// Pin smaller arrays (< 85 KB) so GC won't relocate them
private GCHandle _pinXHandle;
private GCHandle _pinZHandle;

public MainWindow()
{
    _pinXHandle = GCHandle.Alloc(sMyXData, GCHandleType.Pinned);
    _pinZHandle = GCHandle.Alloc(sMyZData, GCHandleType.Pinned);
    // ...
}

더 작은 X 및 Z 배열(각각 85KB 미만)은 가비지 컬렉터가 이동하는 것을 방지하기 위해 GCHandle로 고정됩니다. 큰 Y 배열(최대 144MB)은 Large Object Heap에 있으며 어차피 GC에 의해 이동되지 않습니다 — 고정이 필요 없습니다. 이것은 실제 프로덕션 코드에서 중요한 세부 사항입니다: 제로 카피 차트에 필요한 수준에서 .NET 메모리 관리를 이해하는 것.

2단계: GPU Compute Shader + 두 뷰 모두를 위한 제로 카피

사용자가 새 표면 스캔 파일을 로드하면 RefreshUi 메서드가 공유 배열을 채운 다음 동일한 포인터를 두 차트 컨트롤에 전달합니다. 중요한 라인은 UseDataAtLocation() — 복사 대신 포인터를 저장 — 과 ComputeShader = true — GPU 측 장면 구성을 활성화합니다. Pesgo 2D 등고선 차트가 Pe3do 3D 표면과 동일한 ComputeShader 속성 및 동일한 UseDataAtLocation 호출 패턴을 사용하는 것에 주목하세요:

// ─── 3-D Surface (Pe3do) ─── GPU compute shader + zero-copy ───
Chart3DSurface.PeData.Subsets = _rows;
Chart3DSurface.PeData.Points  = _cols;
Chart3DSurface.PeData.DuplicateDataX = DuplicateData.PointIncrement;
Chart3DSurface.PeData.DuplicateDataZ = DuplicateData.SubsetIncrement;
Chart3DSurface.PeData.ComputeShader  = true;  // GPU-side scene construction

// No data transfer — chart reads your array via pointer
Chart3DSurface.PeData.X.UseDataAtLocation(sMyXData, _cols);
Chart3DSurface.PeData.Y.UseDataAtLocation(sMyYData, size);
Chart3DSurface.PeData.Z.UseDataAtLocation(sMyZData, _rows);

// ─── 2-D Contour (Pesgo) ─── same GPU pipeline, same pointer ───
Chart2DContour.PeData.Subsets = _rows;
Chart2DContour.PeData.Points  = _cols;
Chart2DContour.PeData.DuplicateDataX = DuplicateData.PointIncrement;
Chart2DContour.PeData.DuplicateDataY = DuplicateData.SubsetIncrement;
Chart2DContour.PeData.ComputeShader  = true;  // same GPU path as 3-D

// Same shared memory — no copy, no duplication
Chart2DContour.PeData.X.UseDataAtLocation(sMyXData, _cols);
Chart2DContour.PeData.Z.UseDataAtLocation(sMyYData, size);
Chart2DContour.PeData.Y.UseDataAtLocation(sMyZData, _rows);

Chart2DContour.PePlot.Method = SGraphPlottingMethod.ContourColors;

두 차트 모두 이제 sMyXData, sMyYData, sMyZData에서 읽습니다 — 동일한 정적 배열입니다. 3D 표면과 2D 등고선은 동일한 데이터의 두 가지 GPU 렌더링 뷰입니다. 소스 배열을 변경하고 두 컨트롤에서 ReinitializeResetImage()를 호출하면 두 뷰가 즉시 업데이트됩니다. 축 매핑 차이에 주의하세요: Pe3do는 Y를 높이, Z를 깊이로 사용하고, Pesgo는 Z를 등고선 값, Y를 공간 축으로 사용합니다. UseDataAtLocation은 두 경우 모두 포인터 간접 참조를 처리합니다.

3단계: 연결된 줌 — 2D 등고선이 3D 표면을 제어

GigaPrime3D 데모는 두 뷰를 연결하여 2D 등고선을 줌하면 자동으로 3D 표면이 같은 영역으로 줌됩니다. 사용자가 등고선 차트에서 줌 사각형을 그리면 PeZoomIn 이벤트가 발생하고 코드가 등고선의 줌 범위를 읽어 3D 표면에 수동 축 범위로 적용하고 효율적인 재구성을 트리거합니다:

// When user zooms the 2-D contour, sync the 3-D surface view
private void Chart2DContour_OnPeZoomIn(object sender, EventArgs e)
{
    // Enable pixel shader culling — only render triangles in view
    Chart3DSurface.PeGrid.Configure.DxPsManualCullXZ = true;

    // Transfer 2-D zoom extents → 3-D manual axis range
    Chart3DSurface.PeGrid.Configure.ManualScaleControlX = ManualScaleControl.MinMax;
    Chart3DSurface.PeGrid.Configure.ManualMinX = Chart2DContour.PeGrid.Zoom.MinX;
    Chart3DSurface.PeGrid.Configure.ManualMaxX = Chart2DContour.PeGrid.Zoom.MaxX;

    Chart3DSurface.PeGrid.Configure.ManualScaleControlZ = ManualScaleControl.MinMax;
    Chart3DSurface.PeGrid.Configure.ManualMinZ = Chart2DContour.PeGrid.Zoom.MinY;
    Chart3DSurface.PeGrid.Configure.ManualMaxZ = Chart2DContour.PeGrid.Zoom.MaxY;

    // Efficient rebuild — skip ranging, rebuild only vertices
    Chart3DSurface.PeFunction.Force3dxVerticeRebuild = true;
    Chart3DSurface.PeData.SkipRanging = true;
    Chart3DSurface.PeFunction.Reinitialize();
    Chart3DSurface.Invalidate();
}

DxPsManualCullXZ가 여기서 핵심 성능 속성입니다 — 줌 영역 밖의 삼각형이 보이지 않게 렌더링되는 대신 GPU에 의해 제거되도록 픽셀 셰이더 컬링을 활성화합니다. 이것이 없으면 3,600만 포인트 표면을 줌해도 대부분이 뷰 밖에 있음에도 모든 삼각형을 처리합니다. SkipRanging은 엔진에 CPU 측 최소/최대 데이터 스캔을 건너뛰도록 지시하고(축 한계가 수동으로 설정되어 불필요), Reinitialize()는 캐시된 이미지를 지우지 않고 축 스케일을 재구성합니다. 결과: 6000 × 6000 표면 줌이 즉각적으로 느껴집니다.

차트 유형 상세 분석

ProEssentials의 Pe3do 차트 객체는 2단계 디스패치 시스템을 사용합니다: PolyMode가 차트 카테고리(표면, 막대, 산점도, 폴리곤 데이터)를 선택하고, PlottingMethod가 해당 카테고리 내의 렌더링 변형(와이어프레임, 음영, 등고선, 영역)을 선택합니다. 이 설계는 하나의 차트 컨트롤이 모든 3D 차트 유형을 처리함을 의미합니다 — 시각화를 변경할 때 다른 차트 구성 요소 간에 전환할 필요가 없습니다.

등고선 오버레이가 있는 3D 표면

3D 표면은 ProEssentials의 대표 3D 차트 유형이며 — 위의 GigaPrime3D 코드에서 시연된 것입니다. X × Z 그리드의 Y 높이 값을 받아 구성 가능한 와이어프레임, 음영, 조명, 등고선 색상 밴딩이 있는 연속 메시를 렌더링합니다. PlottingMethod를 Four(표면 + 등고선)로 설정하면 등고선 색상 그라데이션이 표면 메시 위에 직접 오버레이됩니다.

GigaPrime3D 데모는 Compute Shader, 256밴드 등고선 채색, SetLight()를 통한 조절 가능한 조명 위치, 대화형 마우스 드래그 회전으로 최대 6000 × 6000(3,600만 정점) 그리드를 렌더링합니다. DuplicateData 최적화(DuplicateDataX = PointIncrement, DuplicateDataZ = SubsetIncrement)는 중복 그리드 좌표 전달을 방지합니다 — 균일 그리드에는 X 값 한 행과 Z 값 한 열만 필요합니다.

여러 광원을 3D 공간에 배치할 수 있으며, 줌 코드에서 시연된 픽셀 셰이더 컬링(DxPsManualCullXZ)은 줌된 뷰가 보이는 삼각형만 처리하도록 보장합니다. GridAspect 속성은 X:Y:Z 축 비율을 제어합니다 — 데모는 스캔된 재료 샘플의 물리적 치수에서 동적으로 종횡비를 계산합니다.

2D 등고선 및 히트맵 (GPU Compute Shader)

ProEssentials의 2D 등고선 렌더링은 3D 표면과 동일한 GPU Compute Shader 파이프라인을 사용합니다 — 두 차트 모두 ComputeShader = true를 설정하는 GigaPrime3D 코드에서 시연된 바와 같습니다. Pesgo 차트 객체는 X × Y 그리드의 Z 높이 값에서 등고선 색상 채우기(히트맵), 등고선 라인 또는 둘 다를 렌더링합니다.

GigaPrime3D 데모는 256밴드의 수동 SubsetColors를 사용하여 등고선 시각화를 위한 정밀한 파란-청록-녹-황-적 그라데이션을 정의합니다 — 3D 표면과 2D 등고선 모두에 적용되는 동일한 색상 맵입니다. 등고선 채색은 또한 사전 정의된 ContourColorSet 팔레트와 ContourColorBlends를 통한 보간이 있는 사용자 정의 ContourColors 배열을 지원합니다.

SciChart는 히트맵 렌더링을 제공하지만 등고선 라인은 없습니다. LightningChart는 등고선 라인과 채우기를 지원합니다. Syncfusion은 SfSurfaceChart를 통해 표면 기반 등고선 및 와이어프레임 등고선 렌더링을 제공합니다. DevExpress는 별도의 히트맵 컨트롤을 제공하지만 등고선 라인 렌더링은 없습니다. ProEssentials, LightningChart, Syncfusion 모두 등고선 라인 렌더링을 제공하지만 — ProEssentials만이 공유 포인터의 제로 카피 데이터 접근으로 GPU Compute Shader에서 이를 수행합니다.

등고선 색상 슬라이스가 있는 3D 워터폴

워터폴 차트는 주파수 스펙트럼 데이터, 진동 분석, 각 슬라이스가 다른 시간이나 위치에서의 측정을 나타내는 시간 진화 신호를 시각화합니다. ProEssentials는 PolyMode.Scatter와 PlottingMethod.Area를 사용하여 워터폴을 렌더링하며, 각 서브셋을 3D 공간에서 채워진 영역 슬라이스로 그립니다. WaterfallContours를 통해 슬라이스별 등고선 채색이 적용되어 높이 값에 맞는 색상 밴드 슬라이스를 생성합니다.

워터폴 테두리, 등고선 색상 블렌드, 서브셋별 라인 유형이 시각적 외관에 대한 세밀한 제어를 제공합니다. SciChart와 LightningChart 모두 워터폴 차트를 제공하지만, 어느 경쟁사도 ProEssentials가 기본 제공하는 등고선 색상 슬라이스 렌더링을 제공하지 않습니다.

4D, Delaunay 및 사용자 정의 폴리곤 데이터

ProEssentials는 모든 경쟁사와 차별화되는 세 가지 고급 차트 유형을 지원합니다. 4D W-데이터 시스템(PeData.W)은 Y축 높이와 별도로 표면 등고선 채색을 제어하는 독립적인 네 번째 데이터 차원을 추가합니다 — SciChart와 LightningChart도 유사한 기능을 제공하지만, ProEssentials는 표면과 등고선에 사용되는 동일한 GPU Compute Shader 파이프라인을 통해 렌더링합니다. 내장 Delaunay 삼각분할은 ProEssentials만의 고유 기능입니다 — 다른 WPF 차트 라이브러리는 이를 제공하지 않습니다. 예제 415를 참조하세요.

내장 Delaunay 삼각분할(PePlot.Option.Delaunay3D = true)은 비정형 포인트 클라우드를 자동으로 삼각분할된 표면으로 변환합니다. 엔진에 XYZ 포인트의 평면 목록을 제공하면 — 사전 그리딩 불필요 — Y를 높이로 사용하여 XZ 평면을 삼각분할하고 등고선 채색이 있는 적절한 표면 메시를 생성합니다. 다른 어떤 WPF 차트 라이브러리도 내장 Delaunay를 제공하지 않습니다. 예제 414를 참조하세요.

사용자 정의 폴리곤 데이터(PolyMode.PolygonData)는 원시 정점 위치와 폴리곤별 색상을 정의하여 임의의 3D 지오메트리를 가능하게 합니다. 이는 사용자 정의 3D 형상 — 구, 가져온 객체, 엔지니어링 모델 — 을 동일한 Pe3do 차트 컨트롤 내에서 렌더링하는 데 사용됩니다. 그래프 주석도 데이터 공간에 3D 형상 주석을 배치하기 위한 폴리곤 데이터를 지원합니다. 예제 406(구) 및 예제 416(복잡한 주석 형상)을 참조하세요.

3D 카메라, 회전 및 줌 인터랙션

GigaPrime3D 데모는 ProEssentials의 전체 3D 인터랙션 모델을 시연합니다: 부드러운 마우스 드래그 회전, 구성 가능한 부드러움의 마우스 휠 줌, Shift-드래그 뷰포트 패닝, 중간 버튼 조명 위치 지정, 터치 핀치 줌 — 모두 조절 가능한 부드러움 매개변수와 함께.

카메라 제어에는 ViewingHeight(고도각 0-36), DegreeOfRotation(0-359), 구성 가능한 최소/최대 한계가 있는 DxZoom, 원근 투영 제어를 위한 DxFOV가 포함됩니다. 데모는 이를 차트 옆에 슬라이더로 노출하여 사용자에게 보기 각도, 줌 거리, 수직 및 수평 오프셋, Z축 과장에 대한 정밀한 제어를 제공합니다 — 모두 온디맨드 렌더링을 통해 실시간으로 3D 뷰를 업데이트합니다.

DegreePrompting은 인터랙션 중 현재 회전 각도, 줌 거리, 조명 위치를 화면에 표시합니다. 온디맨드 렌더링(GPU가 활성 인터랙션 중에만 렌더링하고 사용자가 놓으면 중지)과 결합하여 유휴 전력 소비가 제로인 반응적 인터랙션을 제공합니다 — 노트북 및 키오스크 배포를 위한 게임 엔진 루프 대비 결정적 이점.

등고선 색상 시스템: 세 가지 접근 방식

GigaPrime3D 데모는 256밴드의 수동 SubsetColors를 사용합니다 — 사용자 정의 파란-빨강 그라데이션 배열을 반복하며 각 색상을 SubsetColors 항목에 할당합니다. 이는 등고선 색상 램프에 대한 픽셀 수준 제어를 제공하고 3D 표면과 2D 등고선이 동일한 채색을 사용하도록 보장합니다.

더 빠른 설정을 위해 사전 정의된 ContourColorSet 열거형(BlueCyanGreenYellowBrownWhite, Grayscale 등)이 부드러운 보간을 위한 구성 가능한 ContourColorBlends와 함께 즉각적인 팔레트를 제공합니다. 사용자 정의 ContourColors 배열로 특정 그라데이션 위치에서 정확한 색상 정지점을 정의할 수 있습니다.

앵커 포인트 보간 기법 — 값 임계점에서 앵커 색상을 정의하고 그 사이의 선형 RGB 보간을 계산 — 은 중요한 데이터 경계에서 정밀한 제어가 있는 출판 품질의 색상 램프를 생성합니다. Direct3D 모드에서 SubsetColors를 설정한 후 Force3dxNewColors와 Force3dxVerticeRebuild가 GPU가 색상 맵과 지오메트리를 모두 업데이트하도록 보장합니다.

3D 및 2D 과학 차트에 대한 결론

GigaPrime3D 재료 표면 스캔 데모는 마케팅 주장이 아닌 실제 프로덕션 코드로 이러한 기능을 증명합니다. 3,600만 데이터 포인트, 하나의 공유 배열, 두 개의 GPU 렌더링 뷰, 150MB 절약, 픽셀 셰이더 컬링이 있는 연결된 줌, 산업급 인터랙션. ProEssentials는 이 비교의 13가지 차트 유형을 모두 지원합니다 — 어떤 경쟁사도 제공하지 않는 포인트 클라우드에서의 Delaunay 삼각분할 포함. 3D 표면과 2D 등고선 모두 동일한 통합 GPU Compute Shader 파이프라인을 통해 렌더링됩니다.

SciChart와 LightningChart는 각각 13가지 차트 유형 중 12가지를 지원하는 강력한 3D 경쟁자입니다. Syncfusion은 표면, 와이어프레임, 등고선, 산점도, 바, 히트맵, 등고선 라인 지원으로 7가지를 지원합니다. DevExpress는 5가지를 지원합니다. 그러나 이들 경쟁자 중 어느 것도 차트 뷰 간 공유 데이터 포인터, 2D와 3D에 걸친 통합 Compute Shader 렌더링, 포인트 클라우드에서의 내장 Delaunay 삼각분할을 제공하지 않습니다. 과학, 엔지니어링, 지리공간, 의료 영상, 계측, 반도체 시각화를 위해 ProEssentials의 3D 및 2D 기능은 WPF 차트 시장에서 가장 포괄적입니다.

성능 및 아키텍처

GPU Compute Shader와 온디맨드 렌더링이 지속적인 전력 소비 없이 속도를 제공하는 방법.

가격 및 지원

영구 라이선스, 무료 무제한 지원, 5개 라이브러리 모두의 5년 TCO 비교.

플랫폼 커버리지

WPF, WinForms, C++ MFC, Delphi VCL, ActiveX — 모든 Windows 스택을 위한 하나의 차트 엔진.