Title: Vis-a-Vis: Visual Exploration of Visualization Source Code Evolution
ArXiv ID: 2001.02092
발행일: 2020-01-08
저자: Fabian Bolte and Stefan Bruckner
📝 초록 (Abstract)
시각화 프로토타입을 개발하는 알고리즘은 일반적으로 다양한 개발 단계와 설계 결정을 직접 비교하고, 심지어 미세한 수정도 결과에 크게 영향을 미칠 수 있습니다. 기존의 개발 도구는 소스 코드의 성능과 구조적 측면에 대한 통찰력을 제공하지만, 그래픽 알고리즘 고유의 결과 이미지는 간과하고 있습니다. 이 논문에서는 시각화 프로그래머들이 개발 단계에서 알고리즘의 진화와 해당 시각적 결과를 동시에 탐색할 수 있도록 자동으로 업데이트되는 메타 시각화를 제공하는 새로운 접근 방식을 제시합니다. 우리의 상호 작용 시스템은 사용하기 쉬운 탐색 및 비교 도구를 통해 모든 개발 상태의 직접적인 비교를 가능하게 합니다. 실시간 생성된 차이 이미지, 소스 코드 차이, 그리고 소스 코드 구조의 시각적 표현은 시간에 따른 연결된 변화에 대한 사용자의 통찰력을 더욱 향상시킵니다. 우리의 솔루션은 C++과 GLSL 코드를 GPU 가속화된 실시간 실행을 지원하는 웹 기반 인터페이스를 통해 접근 가능하며, 과학적 시각화용 도메인 특수 언어도 지원합니다.
💡 논문 핵심 해설 (Deep Analysis)
This paper introduces a novel approach for visualizing the evolution of scientific visualization algorithms, enabling developers to simultaneously explore both source code changes and their corresponding visual outcomes. Traditionally, developing visualization algorithms involves iterative coding and testing phases where minor modifications can significantly impact results. Existing development tools focus on general insights into performance and structural aspects but overlook the unique nature of graphical outputs.
The proposed system is called “meta-visualization,” which provides a comprehensive view of how an algorithm evolves over time by linking its source code changes with visual outcomes. This approach supports developers in understanding the intricate relationships between coding decisions and their visual impacts, facilitating more effective debugging and feature development processes.
Key features include automatic revision management, side-by-side comparison tools for both code and visuals, and interactive parameter exploration. The tool offers a web-based interface that supports live execution of C++ and GLSL code with GPU acceleration, enhancing real-time feedback during the development process.
The significance lies in providing developers with an intuitive way to track algorithm evolution and its visual effects, which can greatly improve debugging efficiency and educational value for teaching visualization techniques. This system not only enhances productivity but also deepens understanding through interactive exploration of algorithmic changes.
📄 논문 본문 발췌 (Translation)
개발 흐름. 개발 과정에서 사용자는 시각화 알고리즘을 프로그래밍하고 소스 코드를 컴파일한 후 결과를 테스트합니다. 버그는 보통 반복적인 방식으로 수정됩니다. 전체 과정은 일반적으로 각 구현 기능에 대해 따로 수행됩니다. 작동하는 기능은 수동으로 저장할 수 있으며, 현재 상태가 만족스럽지 않은 경우 복원될 수 있습니다.
시각화 알고리즘을 개발하는 데는 많은 시간이 소요되며, 이 과정에서 미세한 코드 수정도 결과에 큰 영향을 줄 수 있습니다. 일반적으로 사용되는 프로그래밍 환경은 일부 작업을 지원하지만, 더 효율적인 방법으로 수행할 수 있는 경우가 많습니다.
T1. 시각화 소스 코드를 컴파일하여 기능에 대한 시각적 결과를 조사
T2. 다른 개정판의 시각적 결과를 비교
T3. 여러 구현된 기능이 시각적 결과에 미치는 영향을 이해
T4. 소스 코드에서 특정 시각적 기능 또는 버그가 발생하는 부분을 찾기
T5. 소스 코드 상태를 전환하기
T6. 적합한 입력 매개변수 값을 찾기
이러한 작업들은 일반적인 프로그래밍 환경에서 부분적으로 지원되지만, 더 효율적인 방법으로 수행할 수 있습니다.
시스템 개요. 사용자가 시각화 소스 코드를 작성하면 그 구조가 추출되고 실행을 통해 시각적 결과가 생성됩니다. 이 과정을 시간이 지남에 따라 반복하고 두 구성 요소를 상호 작용하는 메타 시각화로 결합하여 개발된 알고리즘의 진화를 이해합니다.
전반적으로, 일반적인 시스템에서 사용자 작업 목록과 관련된 문제점을 살펴보면 다음과 같은 몇 가지 중요한 측면이 도움이 될 것으로 보입니다:
여러 상태의 시각적 결과물을 동시에 조사하기 위한 시각화 (T2, T3)
상태들 소스 코드와 그들의 시각적 특징과 관련된 시각화 (T3, T4)
각 상태 간 실시간 전환을 위한 가이드 (T5)
배경에서 자동 컴파일 (T1)
소스 코드 상태의 투명한 저장 (T2, T5)
입력 매개변수의 즉각적인 값 정의를 위한 상호 작용 요소 (T6)
메타 시각화. (A) 저장된 모든 상태들의 브랜치 트리는 노드-링크 다이어그램으로 표시되며, 각 개정판은 노드로 표현되고 두 노드 사이의 링크는 상위 노드에서 하위 노드로의 진화를 설명합니다. 하단에 있는 링크 수는 이 상태로부터 진화한 분기의 수를 나타냅니다. 현재 브랜치의 상태와 링크는 파란색으로, 다른 브랜치는 회색으로 표시됩니다. 현재 상태는 오렌지색으로 강조되며 접힌 노드는 녹색으로 강조됩니다. (B) 정적 스코프 트리는 소스 코드의 구조를 설명하며 현재 브랜치의 각 상태에 대해 표시됩니다. 각 노드는 소스 코드의 구조적인 블록을 나타내며, 두 노드 사이의 링크는 오른쪽 범위가 왼쪽 범위 내에 중첩되어 있음을 나타냅니다. (C) 시각적 변화의 비교는 대비시킨 뷰로 제공됩니다. 현재 브랜치의 각 상태에서 사용자 정의 보기점에서 생성된 시각적 결과물이 이미지로 표시됩니다. 접힌 노드 표현에서 상태들은 서로 옆에 위치합니다. (D) 비교 이미지는 이와 같이 접혀진 노드 내 모든 결과 이미지 사이의 시각적 변화를 나타냅니다.
자동 브랜치 관리
우리 접근 방식의 핵심 목표 중 하나는 시각화 알고리즘 개발 동안 여러 상태를 비교하고 지원하는 것입니다. 많은 디자인 선택은 VisTrails의 시각화 파이프라인 접근 방식에서 영감을 받았습니다. 특정 개정판과 그 정보에 대한 후속 접근을 위해 저장해야 합니다. 많은 응용 프로그램은 사용자가 현재 상태를 수동으로 저장함으로써 자신의 진행 상황을 담당하도록 만듭니다. 이 접근 방식은 마지막 개발 상태에만 액세스할 수 있으며 시스템 장애가 발생하기 쉬운 반면, 더 똑똑한 시스템은 자동 백업을 생성합니다.
우리는 내부적으로 버전 관리 시스템(Git)을 활용하고 문서의 버전 히스토리를 사용자 간섭 없이 자동으로 추적하는 Google Docs와 같은 현대 도구에서 영감을 받았습니다. 사용자는 작업 흐름을 중단하지 않고 단순히 개발 프로세스에 집중할 수 있습니다. 우리는 모든 코드 편집을 자동으로 추적하고 성공적으로 컴파일되는 소스 코드가 있을 때마다 새로운 개정판을 생성합니다.
알고리즘 진화의 시각화
이미 브랜치 트리의 시각화를 설명했으므로, 메타 시각화에 포함된 다른 시각적 구성 요소에 대해 이야기하겠습니다: 소스 코드 구조, 시각적 결과물 및 차이 이미지.
결과 이미지
소스 코드를 작성하는 것은 오류가 많이 발생하며 프로그램 내의 실수는 실패 또는 잘못된 시각적 결과를 초래할 수 있습니다. 시각적 출력은 주어진 소스 코드 상태에 통합된 기능 및 특징을 간결하게 설명할 수 있는 지표입니다. 이를 통해 서로 다른 기능 집합을 쉽게 식별하고 추가, 제거 또는 교체할 수 있습니다.
소스 코드 구조
다양한 소스 코드 구조를 시각화하는 방법이 있지만, 우리는 정적 스코프 트리(SST) 형태의 대강의 표현에 초점을 맞춥니다. 이 표현은 소스 코드의 중첩 범위(블록 구조)를 강조하고 충분히 간결하면서도 코드의 주요 구조적 측면을 전달합니다.
정적 스코프 트리. (A) 의사 코드. (B) A에서 추출된 SST. (C) 세 개의 소스 코드 파일(C++ 소스, GLSL, C++ 헤더)에서 추출된 SST 및 상호 루트 노드 아래에 결합됨.
압축
각 컴파일 가능한 개발 상태가 고려되므로 메타 시각화는 매우 커질 수 있습니다. 따라서 미리 정의된 비교 기준을 바탕으로 브랜치 트리를 간소화하여 여러 연속적인 상태를 단일 접힌 노드 내에 표현할 수 있도록 합니다.
결과 비교
여러 개발 상태의 결과물 사이에서 세밀한 시각적 차이를 식별하는 것은 어려울 수 있습니다. 이 문제를 해결하기 위해 추가된 비교 뷰가 제공되며, 접힌 노드 내에 있는 모든 상태의 각 결과물의 픽셀 별 차이를 표시합니다.
라이브 뷰는 상세 탐색을 위한 회전, 변환 및 확대/축소와 같은 직접적인 사용자 인터랙션을 제공합니다. 이러한 인터랙션 기능은 개발자가 미리 정의된 키워드를 활용할 때 자동으로 통합됩니다. 새롭게 선택한 시점이 모든 다른 시각적 결과물에 적용되어 상태 간 일관된 비교가 가능하게 합니다.
시스템 인터랙션
모든 설명된 방법은 자체적으로 사용될 수 있지만, 서로 연결되고 상호 작용으로 인해 더욱 유익합니다. 이러한 가능한 인터액션을 더 잘 이해하기 위해 우리의 그래픽 사용자 인터페이스에 대한 개요를 제공합니다.
그래픽 사용자 인터페이스. 우리의 애플리케이션의 인터페이스는 일반적인 통합 개발 환경에서 영감을 받았습니다. 모든 뷰는 사용자의 선호도에 따라 쉽게 드래그 & 드롭 인터랙션을 통해 독립적으로 위치 및 크기 조정할 수 있습니다. 코드 편집기는 왼쪽에 표시되고 현재 상태의 시각화 알고리즘 소스 코드를 포함합니다.
