2024년 11월 30일 토요일

Bespoke: 소리의 모든 것을 연결하는 모듈러 사운드 작업 공간

Bespoke는 오픈소스 기반 신디사이저 소프트웨어이다. 현존하는 대부분의 사운드를 개발, 합성할 수 있다.

화면 인터페이스

Bespoke(비스포크)는 전통적인 음악 제작 방식의 틀을 깨고, 사용자가 자신만의 소리 흐름을 자유롭게 설계할 수 있도록 지원하는 혁신적인 오픈소스 모듈러(Modular) 사운드 엔지니어링 도구이다.

개요

Bespoke는 소프트웨어 신디사이저이자 디지털 오디오 워크스테이션(DAW)이지만, 트랙과 타임라인 기반의 일반적인 DAW(Ableton Live, Logic Pro 등)와는 근본적으로 다른 작동 방식을 가진다. 이 소프트웨어의 핵심은 '모듈(Module)'과 '연결(Patching)'이다. 사용자는 빈 캔버스 같은 작업 공간에 오실레이터, 이펙터, 시퀀서, 샘플러 등 소리를 만들고 변조하는 수많은 모듈을 자유롭게 배치하고, 이들을 가상의 케이블로 연결하여 자신만의 독창적인 악기나 사운드 시스템을 구축한다.

마치 거대한 가상 벽에 수많은 음향 장비를 마음대로 부착하고 케이블을 꽂아 소리를 만들어내는 '유로랙(Eurorack)' 신디사이저처럼, Bespoke는 소리가 생성되고 변형되는 모든 과정을 시각적으로 제어할 수 있는 무한한 유연성을 제공한다. 이는 정해진 규칙을 따르기보다 소리를 탐험하고 실험하려는 뮤지션과 사운드 디자이너에게 최적의 놀이터가 된다.

더 자세한 정보는 Bespoke 웹사이트에서 확인할 수 있다.

개발 배경

Bespoke는 개발자 라이언 챌리너(Ryan Challinor)의 개인적인 필요에서 시작된 프로젝트이다. 그는 기존의 DAW들이 제공하는 선형적인 작곡 방식에 답답함을 느꼈고, 작곡가의 창의적인 흐름이 소프트웨어의 구조에 의해 제약받아서는 안 된다고 생각했다. 그는 머릿속에 떠오르는 복잡한 아이디어를 즉흥적으로 실현하고, 마치 살아있는 유기체처럼 사운드 시스템을 계속해서 변형하고 확장할 수 있는 도구를 원했다.

이러한 갈증을 해소하기 위해 그는 자신만을 위한 맞춤형 사운드 제작 도구를 만들기 시작했다. 'Bespoke'라는 이름 자체가 '맞춤 제작'을 의미하듯, 이 소프트웨어는 사용자의 작업 방식에 스스로를 맞추는 것을 핵심 철학으로 삼는다. 처음에는 개인적인 라이브 연주와 즉흥 작곡을 위한 도구였으나, 그 유연성과 가능성을 높이 평가한 주변의 반응에 힘입어 모든 사람이 사용할 수 있는 오픈소스 프로젝트로 공개되었다.

주요 특징 및 핵심 기술

Bespoke의 강력함은 다음과 같은 독창적인 특징들에서 비롯된다.

  • 완전한 모듈식 환경 (Completely Modular Environment): Bespoke 내의 모든 요소는 독립적인 모듈이다. 소리를 생성하는 오실레이터부터 외부 오디오 입력을 받는 모듈, MIDI 신호를 처리하는 모듈, 심지어 VST 플러그인을 불러오는 모듈까지, 모든 것이 개별적인 부품처럼 존재한다. 사용자는 이들을 무한정 조합하고 연결하여 상상할 수 있는 거의 모든 종류의 사운드 라우팅을 구현할 수 있다.

  • 방대한 내장 모듈 라이브러리: 기본적으로 175개 이상의 다채로운 모듈을 내장하고 있다. 간단한 신디사이저, 드럼머신, 웨이브테이블 합성, 그래뉼러 신디시스 등 다양한 사운드 소스는 물론, 리버브, 딜레이, 디스토션과 같은 이펙터, 그리고 복잡한 로직을 제어하는 유틸리티 모듈까지 풍부하게 제공하여 별도의 플러그인 없이도 깊이 있는 사운드 디자인이 가능하다.

  • VST/VST3 플러그인 지원: Bespoke의 생태계는 내장 모듈에만 국한되지 않는다. 사용자가 이미 보유하고 있는 서드파티 VST/VST3 가상악기 및 이펙트 플러그인을 하나의 모듈처럼 불러와 기존의 Bespoke 모듈들과 자유롭게 연결할 수 있다. 이는 Bespoke를 전체 음악 작업의 중심 허브로 사용할 수 있게 하는 매우 강력한 기능이다.

  • 파이썬 라이브 스크립팅 (Live Python Scripting): 고급 사용자를 위해 파이썬(Python) 코드를 실시간으로 작성하여 자신만의 커스텀 모듈을 만들거나 기존 모듈의 동작을 제어할 수 있는 기능을 제공한다. 이는 사실상 소프트웨어의 기능을 무한대로 확장할 수 있는 잠재력을 의미한다.

유사 도구

Bespoke와 같이 모듈러 방식을 채택한 사운드 엔지니어링 도구는 다음과 같다.

  • VCV Rack: 가상 유로랙 신디사이저의 표준으로 불리는 소프트웨어이다. 실제 하드웨어 모듈을 매우 정밀하게 복각하는 데 중점을 두고 있으며, 방대한 서드파티 모듈 생태계를 자랑한다. 사운드 합성에 매우 특화되어 있다. (VCV Rack 공식 웹사이트)

  • Bitwig Studio (The Grid): 전통적인 DAW와 모듈러 환경을 결합한 하이브리드 소프트웨어이다. Bitwig 내의 'The Grid'라는 환경에서 사용자가 자신만의 악기나 이펙터를 모듈러 방식으로 설계할 수 있어, 정형화된 작업과 자유로운 실험을 넘나들 수 있다. (Bitwig 공식 웹사이트)

  • Native Instruments Reaktor: 오랫동안 사운드 디자이너들에게 사랑받아온 강력한 모듈러 사운드 디자인 플랫폼이다. 매우 낮은 레벨의 신호 처리부터 복잡한 악기 제작까지 가능하며, 사용자들이 만든 수많은 악기와 이펙터를 공유하는 라이브러리가 강점이다. (Reaktor 공식 웹사이트)

  • Max/MSP: 음악과 멀티미디어를 위한 시각적 프로그래밍 언어이다. Bespoke보다 훨씬 더 근본적이고 자유도가 높은 개발 환경에 가까워, 단순한 음악 제작을 넘어 인터랙티브 아트나 커스텀 소프트웨어 개발에도 사용된다.

라이선스

Bespoke는 모든 사람이 창의적인 도구에 접근할 수 있어야 한다는 철학 아래 완전한 오픈소스 소프트웨어로 제공된다.

  • 가격 정책: 공식적으로 무료이며, 'Pay-What-You-Can(지불할 수 있는 만큼 지불)' 정책을 채택하고 있다. 누구나 비용 없이 다운로드하여 모든 기능을 사용할 수 있지만, 개발자의 지속적인 노력을 지원하기 위해 사용자가 자발적으로 기부하는 것을 권장한다.

  • 소스 코드: 모든 소스 코드는 GitHub 저장소에 공개되어 있어, 누구나 코드를 확인하고 개발에 기여할 수 있다.


데모
설치 방법은 다음 링크를 참고한다.

마무리 및 평가

Bespoke는 단순한 음악 제작 툴을 넘어, 소리를 탐구하는 새로운 방식을 제안하는 하나의 창의적인 철학이다. 정해진 길을 따라가는 대신, 수많은 가능성을 직접 연결하고 실험하며 예기치 못한 소리를 발견하는 즐거움을 선사한다.

이러한 극단적인 자유도는 실험적인 전자음악가, 사운드 아티스트, 그리고 기존 DAW에 한계를 느끼는 모든 창작자에게 강력한 영감을 제공한다. Bespoke는 표준화된 워크플로우에서 벗어나 자신만의 소리를 '맞춤 제작'하고 싶은 이들에게 가장 완벽한 디지털 놀이터가 되어줄 것이다.


레퍼런스 

2024년 11월 23일 토요일

RAG LLM 기반 멀티 에이전트 시스템 개발 경험기

이 글은 LLM 기반 멀티 에이전트 시스템을 개발해 본 후 개인적으로 느낌 경험을 남긴다.

멀티 에이전트를 개발하는 방법은 다양하다. 지금까지 경험한 바로는 랭체인과 같은 라이브러리의 기능들을 많이 이용하기 보다는 LLM과 에이전트의 핵심 기능에 집중해 구현하는 것이 효과적이었다.

예를 들어, 다음 그림과 같이, 뉴스나 차트를 읽어 해석하여, 사용자 질문에 대해 LLM이 추론하는 방식의 에이전트를 개발한다고 하자.
신문 차트 기반 에이전트 개념

이 경우, 랭체인과 같은 라이브러리의 복잡한 기능을 사용하는 것 보다 LLM의 기본적인 기능에 집중하는 것이 오히려 나을 때가 있다. 처음에는 라이브러리의 관련 함수를 이용해 에이전트를 개발하려 하였으나, 1) 확률적?으로 에이전트가 동작되는 문제, 2) 복잡한 라이브러리 의존성 문제, 3) 복잡한 호출 경로로 인한 디버깅 문제, 4) 불명확한 함수 호출 문제 등이 발생하였다. 

결론적으로, 랭체인 예제, 튜터리얼, 블로그 등에서 알려주는 것을 해본 결과, LLM 조작에 핵심적인 부분만 구현하고, 나머지 확률적이고 불명확한 함수들을 사용하지 않는 편이 좋은 성능을 얻을 수 있다.

다음은 단순히 Tool과 LLM을 이용해 개발된 결과를 보여준다.

레퍼런스

2024년 10월 20일 일요일

가성비 있는 웹 서비스 호스팅 Fly.IO 사용하기

이 글은 가성비 있는 웹 서비스 호스팅이 가능한 Fly.IO 사용방법을 정리한다. 이 글은 다음 글의 후속편으로, DNA, 호스팅 등 개념은 이 글을 참고하길 바란다.

머리말
FLY.IO는 Kurt Mackey가 공동 설립한 회사로 개발되었다. 그는 이전에 Compose.io라는 데이터베이스 호스팅 플랫폼을 공동 창업했으며, 이를 IBM에 매각한 경험이 있다. FLY.IO는 주로 개발자 친화적인 글로벌 애플리케이션 호스팅 서비스를 제공하기 위해 설립되었다.

FLY.IO의 장단점은 다음과 같다.

장점
1. 글로벌 배포: 애플리케이션을 여러 지역에 쉽게 배포할 수 있어 지리적으로 분산된 사용자에게 낮은 지연 시간을 제공한다.
2. 간단한 사용성: 간단한 명령어로 애플리케이션을 배포할 수 있으며, 설정도 비교적 쉬운 편이다.
3. 자동 확장: 필요에 따라 인프라를 자동으로 확장할 수 있어, 트래픽이 급증할 때도 유연하게 대응 가능하다.
4. 애플리케이션 근접 배치: 사용자 근처에 애플리케이션을 배치할 수 있어 성능 향상과 지연 시간 감소에 효과적이다.
5. 무료 계층 제공: 제한적이지만 무료로 사용할 수 있는 계층을 제공해, 작은 프로젝트나 테스트에 유용하다. 평소에는 배포 앱이 비활성화되었다가 URL 접속하면 자동 활성화되는 Pay As You Go Plan (기존 Hobby Plan) 을 지원한다.

단점
1. 제한된 문서화: 다른 클라우드 서비스에 비해 문서화가 부족한 편이며, 일부 기능에 대한 정보가 불충분할 수 있다.
2. 복잡한 설정: 고급 기능을 사용할 때 설정이 복잡해질 수 있으며, 초보자에게는 어려울 수 있다.
3. 비교적 작은 생태계: AWS나 Google Cloud와 비교하면 생태계가 작아, 지원되는 서비스나 도구가 제한적이다.
4. 무료 계층 한계: 무료 계층의 자원이 제한적이므로, 트래픽이 많은 애플리케이션에는 적합하지 않다.
5. 서비스 안정성: 일부 사용자들은 특정 상황에서 예기치 않은 중단을 경험할 수 있다고 보고했다.

환경 설치
FLY.IO 사용법을 다음과 같다.

1. 회원가입 및 설치
FLY.IO 웹사이트(https://fly.io)에 접속하여 회원가입을 한다.

2. 파워셀에서 설치 스크립트 실행
pwsh -Command "iwr https://fly.io/install.ps1 -useb | iex"

3. 터미널에서 로그인 실행
fly auth login

로그인 결과는 다음과 같다.

4. Github 로그인함

소스코드에서 데모앱 빌드, 배포 및 실행
FLY.IO에서 제공하는 데모앱을 간단히 실행해 보자. 
다음 예제를 터미널에서 실행한다.
cd hello-fly
코드 예시

앱을 배포하고 실행한다.
fly launch --now

그 결과, 도커를 자동 빌드한다. 다음은 이미지 스크립트이다. 
FROM node:16.19.0-slim

WORKDIR /usr/src/app
COPY package*.json ./

RUN npm install
COPY . .

EXPOSE 8080
CMD [ "npm", "start" ]

도커 이미지는 자동으로 FLY.IO 클라우드에 업로드되고, 설정파일대로 웹 인터페이스를 연결한다.
도커 이미지 생성 화면
Fly.IO의 웹 앱 배포된 모습

여기서 배포된 링크를 클릭한다.

결과는 다음과 같다. 웹 앱이 정상 서비스된 것을 확인할 수 있다.

이미 개발된 도커 이미지에서 데모앱 빌드, 배포 및 실행
Fly Launch를 사용해 도커 이미지로 앱을 배포할 수 있다. 미리 빌드된 Docker이미지를 이용해 데모앱을 만들고 배포해 본다. 

도커가 설치되었다는 가정 하에 다음 명령을 실행한다.
fly launch --image flyio/hellofly:latest
fly launch

이 결과 fly.toml 설정파일이 생성된다. 참고로, 웹 인터페이스는 다음과 같은 fly.toml 구성파일을 통해 설정된다. 
app = 'fly-io-delicate-surf-7133'
primary_region = 'nrt'

[http_service]
  internal_port = 8080
  force_https = true
  auto_stop_machines = 'stop'
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']

[[vm]]
  memory = '1gb'
  cpu_kind = 'shared'
  cpus = 1

앱을 배포한 후 상태를 확인한다.
앱 링크를 클릭해 오픈하거나 다음 명령을 이용해 방문한다.
fly apps open /fred

그럼, 다음 웹 페이지를 확인할 수 있다.

이외, 변경사항 배포는 fly deploy, 데모 앱 삭제는 fly apps destory 명령을 사용할 수 있다.
변경사항 배포 예

index 파일을 다음과 같이 수정한 후 fly deploy 명령을 실행한다.
배포에 성공하면, 다음과 같이 같은 DNS에서 변경된 서비스를 확인할 수 있다.

원격 터미널 접속
Fly.IO는 SSH 터미널 접속을 제공한다. 다음과 같이, SSH 키를 생성한다.
ssh-keygen -t rsa -b 4096 -C "your email@gmail.com"

그럼. id_rsa 암호키가 생성될 것이다.

원격 터미널에 접속한다. 도커 이미지의 리눅스가 접속된 것을 확인할 수 있다.
fly ssh console

결론
Kurt Mackey는 소프트웨어 엔지니어이자 창업가로, 클라우드 인프라와 개발자 도구 분야에서 주목받는 인물이다. 그는 여러 기술 회사에서 경력을 쌓아왔고, Compose.io 등 두 개의 성공적인 스타트업을 공동 창업했다. 2015년, IBM이 Compose.io를 인수하면서 Mackey는 IBM에서 기술 리더십 역할을 맡았다. 

Mackey는 오랜 시간 소프트웨어 엔지니어로 활동해왔으며, 주로 인프라 서비스와 클라우드 컴퓨팅에 대한 깊은 전문성을 보유하고 있다. 그의 작업 철학은 개발자가 인프라 관리에 신경 쓰지 않고도 효율적으로 작업할 수 있도록 도와주는 도구와 플랫폼을 제공하는 데 중점을 두고 있다.

Kurt Mackey는 기술 커뮤니티 내에서 활발하게 활동하며, 개발자 도구의 발전과 클라우드 기반 서비스의 미래에 대해 꾸준히 발언하고 있다. 그의 비전은 애플리케이션이 물리적 서버나 데이터 센터에 묶이지 않고, 사용자 근처에서 자동으로 최적화되고 배포될 수 있는 환경을 조성하는 것이다.

부록: Gradio web app의 Fly.toml 설정 예시
# fly.toml app configuration file generated for bim-data-quality-checker-solitary-wave-2365 on 2025-01-28T22:16:55+09:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#
app = 'bim-data-quality-checker-solitary-wave-2365'
primary_region = 'nrt'

[build]
  # Use the Dockerfile in the current directory
  dockerfile = "./Dockerfile"

[env]
  PYTHONUNBUFFERED = "1" # Ensure logs are shown in 

[deploy]
  release_command = "echo Deploying Gradio app on Fly.io!"
  command = ["python", "./src/app.py"]

[[vm]]
  memory = '1gb'
  cpu_kind = 'shared'
  cpus = 1
  
[[services]]
  internal_port = 7860 # Default Gradio app port
  protocol = "tcp"

  [[services.ports]]
    handlers = ["http"]
    port = 80 # HTTP port

  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443 # HTTPS port

  [[services.tcp_checks]]
    interval = "15s"
    timeout = "2s"
    grace_period = "5s"
    restart_limit = 0

부록: Gradio web app의 Dockerfile 예시
# https://www.gradio.app/main/guides/deploying-gradio-with-docker
# Use a base image with Python
FROM python:3.10-slim

# Set the working directory in the container
WORKDIR /app

# Copy the project files to the container
COPY ./src /app/src
COPY requirements.txt /app

# Install Python dependencies
RUN pip install --no-cache-dir -r requirements.txt

# Expose the port your app will run on (e.g., 7860 for Gradio)
EXPOS
E 7860
ENV GRADIO_SERVER_NAME="0.0.0.0"

# Set the command to run your app when the container starts
CMD ["python", "./src/app.py"]

레퍼런스

2024년 10월 7일 월요일

Three.js 이용한 web3d 프로그램 개발하기

이 글은 웹 기반 3D 그래픽 라이브러리로 거의 표준적으로 사용되고 있는 three.js를 간략히 소개한다. 아울러, 이를 이용한 web3d 프로그램 개발하는 방법을 간략히 정리한다.
three.js 예제

개요
Three.js는 웹 브라우저에서 3D 그래픽을 쉽게 만들고 렌더링할 수 있도록 도와주는 자바스크립트 라이브러리다. WebGL을 기반으로 작동하며, 복잡한 3D 그래픽 처리를 단순화해준다.

Scene (장면)
장면은 Three.js에서 3D 객체들이 배치되는 공간이다. 카메라, 조명, 메쉬와 같은 객체들이 장면에 추가되며, 이 장면을 렌더링하여 화면에 표시하게 된다.

Camera (카메라)
카메라는 장면을 바라보는 시점을 결정하는 객체다. Three.js에서 일반적으로 많이 사용하는 카메라는 원근법을 적용하는 PerspectiveCamera와 직교 투영을 사용하는 OrthographicCamera가 있다.

Renderer (렌더러)
렌더러는 장면을 렌더링해 브라우저의 캔버스에 표시하는 역할을 한다. Three.js에서는 주로 WebGLRenderer를 사용하여 장면을 화면에 출력한다.

Mesh (메쉬)
메쉬는 3D 장면에서 실제로 보이는 객체를 나타낸다. Geometry(기하학적 형태)와 Material(재질)로 구성되며, Geometry는 객체의 모양을 정의하고, Material은 객체의 표면이 어떻게 보일지를 결정한다.

Light (조명)
조명은 장면 내 객체에 빛을 비추는 역할을 한다. 다양한 유형의 조명이 있으며, 예를 들어 PointLight는 특정 지점에서 모든 방향으로 빛을 발산하고, DirectionalLight는 태양처럼 일정한 방향으로 빛을 비춘다.

Three.js를 사용하면 웹에서 고성능 3D 그래픽과 애니메이션을 구현할 수 있으며, 비교적 간단한 코드로도 복잡한 장면을 만들 수 있다.

상세한 내용은 다음 튜토리얼을 참고한다.

개발 방법
이 예제는 간단한 3D Cube를 웹에 렌더링하는 프로그램이다. 
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>3D viewer</title>
   </head>
   <body>
      <div id="model-view" style="width: 350px; height: 350px"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/OBJLoader.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/MTLLoader.js"></script>  
      <script>         
         const model_container = document.getElementById('model-view');

         const model_scene = new THREE.Scene();
         const model_camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         const model_renderer = new THREE.WebGLRenderer();
         model_renderer.setSize(model_container.clientWidth, model_container.clientHeight);
         model_renderer.setClearColor(0xADD8E6);  
         model_container.appendChild(model_renderer.domElement);

         const model_light = new THREE.PointLight(0xffffff, 1, 100);
         model_light.position.set(10, 1, 5);
         model_scene.add(model_light);

         function make_cube() {
            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial({ color: 0x00aa00, wireframe: true });
            const cube = new THREE.Mesh(geometry, material);
            model_scene.add(cube);
            return cube;
         }
         model_cube = make_cube();

         model_camera.position.set(2, 2, 2);
         model_camera.lookAt(0, 0, 0);

         function animate() {
            requestAnimationFrame(animate);

            model_cube.rotation.x += 0.01;
            model_cube.rotation.y += 0.01;
            model_renderer.render(model_scene, model_camera);
         }
         animate();

         window.addEventListener('resize', () => {
            model_camera.aspect = window.innerWidth / window.innerHeight;
            model_camera.updateProjectionMatrix();
            model_renderer.setSize(window.innerWidth, window.innerHeight);
         });         
      </script>
   </body>
</html>

실행하면, 간단한 3D cube 모델이 웹페이지에 렌더링 될 것이다.
마무리
Three.js는 Ricardo Cabello(Mr.doob)라는 개발자가 2010년에 처음 개발했다. Cabello는 원래 그래픽 디자이너이자 개발자로 활동했으며, WebGL을 더 쉽게 사용할 수 있는 라이브러리가 필요하다고 생각해 Three.js를 만들었다. 이후 Three.js는 오픈 소스로 공개되어 많은 개발자들의 기여로 지속적으로 발전해왔다.

레퍼런스

2024년 10월 6일 일요일

LangGraph 기반 데이터 분석 멀티 에이전트 만들기

이 글은 LangGraph 기반 데이터 분석 멀티 에이전트 만드는 방법을 간략히 설명한다.

LangChain Tool 기반 수학 에이전트 개발
다음 코드를 입력해 실행한다.

from langchain_openai import OpenAI
from langchain_community.chat_models import ChatOllama
from langchain.chains import LLMMathChain, LLMChain
from langchain.prompts import PromptTemplate
from langchain_community.utilities import WikipediaAPIWrapper
from langchain.agents.agent_types import AgentType
from langchain.agents import Tool, initialize_agent
from dotenv import load_dotenv
import chainlit as cl

load_dotenv()

@cl.on_chat_start
def math_chatbot():
llm = ChatOllama(model='llama3', temperature=0.0)

  # prompt for reasoning based tool
word_problem_template = """You are a reasoning agent tasked with solving t he user's logic-based questions. Logically arrive at the solution, and be factual. In your answers, clearly detail the steps involved and give the final answer. Provide the response in bullet points. Question  {question} Answer"""

math_assistant_prompt = PromptTemplate(
input_variables=["question"],
template=word_problem_template
)
  # chain for reasoning based tool
word_problem_chain = LLMChain(llm=llm,
  prompt=math_assistant_prompt)
# reasoning based tool                              
word_problem_tool = Tool.from_function(name="Reasoning Tool",
                     func=word_problem_chain.run,
description="Useful for when you need to answer logic-based/reasoning questions."
   )
  # calculator tool for arithmetics
problem_chain = LLMMathChain.from_llm(llm=llm)
math_tool = Tool.from_function(name="Calculator",
     func=problem_chain.run,
             description="Useful for when you need to answer numeric questions. This tool is only for math questions and nothing else. Only input math expressions, without text",
   )
  
  # Wikipedia Tool
wikipedia = WikipediaAPIWrapper()
wikipedia_tool = Tool(
name="Wikipedia",
func=wikipedia.run,
description="A useful tool for searching the Internet to find information on world events, issues, dates, years, etc. Worth using for general topics. Use precise questions.")
  
  # agent
agent = initialize_agent(
tools=[wikipedia_tool, math_tool, word_problem_tool],
llm=llm,
agent=AgentType.ZERO_SHOT_REACT_DESCRIPTION,
verbose=False,
handle_parsing_errors=True
)
cl.user_session.set("agent", agent)

@cl.on_message
async def process_user_query(message: cl.Message):
agent = cl.user_session.get("agent")

response = await agent.acall(message.content,
callbacks=[cl.AsyncLangchainCallbackHandler()])

await cl.Message(response["output"]).send()
 
결과는 다음과 같다.

레퍼런스

2024년 10월 4일 금요일

BIM IFC 파일을 Cesium 디지털트윈 플랫폼에 3D tiles로 가시화하는 방법과 구조

이 글은 BIM(Building Information Modeling) 포맷 중 하나인 IFC 파일을 Cesium 플랫폼에 3D tiles로 가시화하는 방법을 간략히 설명한다. 아울러, 마지막 부분에 3D tiles 개념과 구조를 간략히 나눔한다. Cesium에서 개발된 3D tiles는 3D 고속 렌더링을 위한 모델 구조와 렌더링 메커니즘을 제공한다. 이 기술은 현재 공간정보산업표준을 담당하는 OGC(Open Geospatial Consortium)와 유기적 협력을 통해 발전하고 있다.
Cesium 3D tiles 가시화 모습 예시

참고로, 최근 릴리즈된 IFC 직접 로딩하는 기술은 향후에 사용기를 정리하여 공유할 것이다( 아직, IFC를 직접 Cesium으로 임포트하는 기능은 완전하지 않다). 관심있는 분들은 다음 링크를 참고하길 바란다.

개요
Cesium은 구글 어스와 유사한 지구 스케일의 디지털트윈 플랫폼이다. 이를 이용하면, 도시 차원에서 분석하고, 실내 건물을 탐색하는 등의 유스케이스를 개발할 수 있다. 국내 대부분의 3차원 도시 플랫폼 기반 서비스에서 Cesium이 사용되고 있다. Cesium은 디지털트윈 모델을 다루기 위한 저작도구도 함께 제공한다. 개발자는 서비스에 필요한 메뉴 기능, 데쉬보드에 표출한 데이터 처리에만 신경을 쓰면 된다. 
Cesium 저작도구 예시

공간정보 기술을 연구하다 보면, 가끔 BIM 파일 포맷 중 하나 인 IFC(Industry Foundation Classes)를 Cesium위에 가시화해야 하는 경우가 종종 발생할 때가 있다. 하지만, Cesium은 IFC를 직접적으로 지원하지 않는다. 
IFC 추가 에러 발생 모습

Cesium은 IFC를 포함한 모든 3D 모델파일을 3D tiles로 변환해 업로드하도록 하고 있다. 이는 무거운 3D 모델의 가시화 성능을 고려한 것이다. 

3D tiles은 웹에서 가시화하기에 무거운 3D 파일을 공간인덱싱 기법을 이용해 Octree형식으로 표현하고, 각 노트에 분할된 3D 모델의 부분을 담아둔다. 메쉬 간략화 기법을 이용해, 카메라가 모델을 비추는 거리에 따라 적절한 LoD(Level of Detail)의 메쉬를 보여준다. 이는 게임에서 FPS 성능을 올리기 위해 개발된 기법과 매우 유사하다. glTF 20은 3D 타일의 기본 형식이다. 
glTF 2.0 기능(3차원 점군, 텍스쳐, 모델 지원 예시)

Cesium은 다양한 샘플 코드를 sandcastle이란 플랫폼으로 제공하여, 편리한 개발을 지원하고 있다.

3D tile 모델 변환 및 업로드
먼저, 다음 링크를 방문해 Cesium ion 에 가입한다.
이후, 세슘의 API, 어셋(asset)을 관리하는 클라우드, Javascript 기반 예제 등을 무료로 사용할 수 있다. 여기서 어셋이란 플랫폼에서 사용하는 GIS, BIM 등 모든 파일 및 데이터셋을 의미한다. 가입 후, 아래를 클릭해 어셋을 추가해 보자. 
Cesium ion 메뉴 화면

Cesium은 3D 모델을 3차원 타일 형식으로 내부 표현한다. 이 형식을 지원하는 파일 포맷은 다음과 같다. 
IFC를 fbx와 같은 형식으로 변환한 후, My Assets 메뉴(My Assets | Cesium ion)를 이용해 데이터를 추가한다. 추가된 데이터는 고유의 Asset ID가 부여된다. 다음 그림에서 첫 행의 어셋인 2716386은 어셋 ID를 보여준다. 현재 세슘은 5GB 무료 어셋 저장소를 제공한다.

참고로, IFC파일을 다른 형식으로 변환하기 위해서는 Revit 등 상용 모델러를 사용하거나, Blender와 같은 오픈소스 도구에 IFC import 애드인을 설치하고, fbx 포맷 등으로 저장하면 된다. 
Blender에서 IFC to FBX 변환 모습

3차원 모델은 좌표 원점에 표시되므로, 모델의 원점과 각도를 재조정해야 한다. 

다음과 같이 MyAssets 메뉴에 Adjust Tileset Location 메뉴를 클릭한다.

참고로, 만약 모델 원점이 0.0.0이 아니면, 다음 그림과 같이 재조정하기 어렵다. 모델링 할 때 원점을 맞추고 진행한다.

3D Tile Location Editor에서 모델의 위치, 방향을 수정한 후 저장버튼을 클릭한다. 참고로, Click position 버튼을 클릭하면, 현재 커서 위치의 지표면에 맞춰 타일 모델 위치를 자동 입력한다.

앱 서비스 개발
특정 서비스에 3D tile을 사용하고 싶다면, 단순히 primities.add 함수를 사용하여 3D tile을 추가할 수 있다. API를 사용해야 하므로, API 토큰을 생성 한다. 
API 키 토큰 생성 예시

다음 링크를 참고해, API 키 토큰을 생성하고, 이 문자열을 코드의 Token에 할당한다.
HTML를 만들어, 다음 같이 자바스크립트 파일을 입력한다. 어셋 ID를 이용해 fromAssetID에서 어셋을 가져온다.

         Cesium.Ion.defaultAccessToken = '';
         var viewer = new Cesium.Viewer('cesiumContainer', {
            animation: false,
            homeButton: true,
            navigationHelpButton: true
         });

         const tileset = viewer.scene.primitives.add(
            new Cesium.Cesium3DTileset({
               url: Cesium.IonResource.fromAssetId(1378646),
            })
         );

3D tile 코드 사용 예시

이와 관련해 구현된 상세 코드 예시는 다음 github 링크를 참고하길 바란다.
웹 서비스에서 코드 호출한 결과는 다음과 같다. 3D tile이 잘 가시화되는 것을 확인할 수 있다. 

이런 방식으로 디지털트윈 플랫폼의 도시 건물 정보 가시화하는 기능을 구현할 수 있다.

3D tile 구조
Cesium의 3D Tiles 데이터 구조는 대규모 3D 지리 데이터를 효율적으로 스트리밍하고 시각화하기 위해 설계되었다. 3D Tiles 구조는 오픈소스로 다음 깃허브 링크에 공개되어 있다. 

타일 데이터셋은 다음과 같다.
  • Tileset
Tileset.json 파일이 3D 타일의 상위 구성 파일 역할을 하며, 타일 계층 구조와 데이터 위치 정보를 담고 있다. 이 파일은 전체 타일셋의 메타데이터와 루트 타일에 대한 참조를 제공한다. 
 {
  "transform": [
     4.843178171884396,   1.2424271388626869, 0,                  0,
    -0.7993325488216595,  3.1159251367235608, 3.8278032889280675, 0,
     0.9511533376784163, -3.7077466670407433, 3.2168186118075526, 0,
     1215001.7612985559, -4736269.697480114,  4081650.708604793,  1
  ],
  "boundingVolume": {
    "box": [
      0,     0,    6.701,
      3.738, 0,    0,
      0,     3.72, 0,
      0,     0,    13.402
    ]
  },
  "geometricError": 32,
  "content": {
    "uri": "building.b3dm"
  },
  "extensions": {
    "VENDOR_collision_volume": {
      "box": [
        0,     0,    6.8,
        3.8,   0,    0,
        0,     3.8,  0,
        0,     0,    13.5
      ]
    }
  }
}
  • 타일 계층 구조
타일 계층은 루트 타일에서 시작해 더 작은 타일로 분할되며, 쿼드트리나 옥트리 구조를 사용한다. 타일들은 자신보다 작은 자식 타일들을 가지며, 각각의 해상도가 다르다.
루트 타일은 대략적인 모델 데이터를 제공하고, 자식 타일은 줌 인할 때 더 높은 해상도를 제공한다.
  • 타일 구성 요소
Bounding Volume (경계 볼륨)은 각 타일이 포함하는 공간 영역을 정의한다. 이 경계는 카메라의 위치에 따라 타일을 로드할지 결정하는 데 사용된다.
Geometric Error (기하학적 오차)는 타일의 해상도와 관련된 값으로, 클라이언트가 어떤 타일을 로드할지 선택하는 데 도움을 준다.
  • 타일 콘텐츠
타일은 다양한 형태의 3D 데이터를 포함할 수 있다.
Batched 3D Model (B3DM)은 여러 개의 3D 객체를 포함한 배치된 모델이다.
Instanced 3D Model (I3DM)은 동일한 3D 모델을 여러 위치에 인스턴스화하여 사용한다.
Point Cloud (PNTS)는 점군 데이터를 포함한다.
Composite (CMPT)는 다양한 콘텐츠를 하나의 타일에 혼합할 수 있다.
  • LOD (Level of Detail)
3D Tiles는 LOD(세부 수준)에 따라 계층 구조를 가지며, 줌 수준에 따라 더 높은 해상도의 타일을 로드하거나, 멀리 있는 객체는 낮은 해상도를 유지함으로써 성능을 최적화한다.
  • 압축 및 최적화
Cesium의 3D Tiles는 데이터를 압축하여 전송 속도와 메모리 효율성을 높인다.
Draco 압축을 사용하여 기하학 데이터를 압축하고 파일 크기를 줄인다.
이처럼 Cesium의 3D Tiles 구조는 대규모 지리 데이터를 효율적으로 처리하고 동적으로 로드하여 성능을 극대화한다.

다음은 앞의 구조를 표현한 그림이다.
이 그림에서 보면, 솔리드 모델, IFC와 같이 3D 모델 형상 정보는 메쉬 형태로 Vertices, Texels 로 변환된다. 이는 동일한 인스턴스를 스케일, 위치, 방향만 다르게 해서 렌더링하는 객체를 GPU 인스턴스로 등록하고(가속 렌더링을 위해), 나머진 형상(FEATURE)로 등록한다. 이 피쳐는 타일 컨텐츠로 등록된다. 

각 타일 컨텐츠는 타일 트리(일종의 공간 인덱싱을 통해 카메라의 거리, 방향에 따라 타일에 포함된 인스턴스의 상세 렌더링 수준을 사전 계산, 결정. 이를 통해, 타일이 보여질 때 가시화 속도를 높이는 역할)에 등록된다. 이때 각 타일은 LoD(Level of detail)을 계산하는 데, 보통, Mesh Simplication 이란 게임엔진에서 사용된 방법을 이용한다. 

각 LoD처리된 타일은 속성정보를 포함하고 있어, 카메라 각도, 거리에 따라 적절한 LoD의 타일 형상과 정보가 보여질 수 있다. 이를 모아 Tileset이라 한다.

마무리
오늘은 BIM IFC 파일을 Cesium 디지털트윈 플랫폼에 3D tiles로 가시화하는 방법과 구조를 간략히 알아보았다. Cesium은 디지털트윈 뿐 아니라 도시 시뮬레이션 가시화 등 많은 곳에서 사용된다. 

개인적으로는 Cesium 오픈 플랫폼의 개발자이자 개발 최고 책임자인 패트릭 코지(Patrick Cozzi)가 30대 초부터 꾸준히 이 기술을 발전시키고 공유하는 모습이 참 인상적이다. 그는 펜실베니아 주립대를 졸업한 후, 석사를 한 UPen에서 9년간이나 컴퓨터 그래픽스 기술을 가르치며, Cesium 을 개발해 공유했다. 그의 석사 논문은 Cesium의 기본 개념이 담겨 있다. 
Patrick Cozzi 석사 논문 일부(2008, UPen. Cesium 3D Tiles 기술 컨셉이 설명됨)

논문을 살펴보면 그가 OpenGL과 컴퓨터 그래픽스에 얼마나 깊은 이해를 하고 있는 지 알수 있다. 일종의 이 분야 오타구로 보여지는 데, 그는 여기서 그치지 않고, 본인이 도시와 같은 대용량 모델을 실시간으로 가시화할 수 있는 기술을 개발해 사람들이 편리하게 사용할 수 있도록 하는 데까지 나아가려 했다. 

그는 2010년대 부터 컴퓨터 그래픽스에 대한 퍼듀 자문, 크로노스 협회 glTF 표준화 기여, 메타버스 협회 창립 이사를 거친다. 2024년에는 그가 개발을 시작해 창립한 Cesium이 벤틀리에 합병되어 플랫폼 개발 최고 책임자가 된다. 
그의 발자취를 살펴보면, 막대한 국가 R&D를 통해 살림하고 있는 국내 그 수많은 SW 정보 기술 관련 협회, 조직에서 제대로 된 오픈소스 하나 산업계에 꾸준히 공유 발전시킨 적이 있는 지, 그 조직에 이런 전문가들이 있기나 한 것인지 생각해 보지 않을 수 없다. 국내 기술 산업이 아직 선진기술 패키징하는 상황에서 이런 문제가 산업 생태계와 국가 시스템의 문제인지, 아니면, 개인의 문제인지 다시 한번 생각하게 된다. 


부록: glTF 구조도
다음 그림은 3D 타일 공식 포맷인 glTF 2.0의 구조와 개념을 상세히 보여준다. 
레퍼런스