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에서 제공하는 데모앱을 간단히 실행해 보자. 
다음 예제를 터미널에서 실행한다.
git clone https://github.com/fly-apps/hello-fly.git
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는 기술 커뮤니티 내에서 활발하게 활동하며, 개발자 도구의 발전과 클라우드 기반 서비스의 미래에 대해 꾸준히 발언하고 있다. 그의 비전은 애플리케이션이 물리적 서버나 데이터 센터에 묶이지 않고, 사용자 근처에서 자동으로 최적화되고 배포될 수 있는 환경을 조성하는 것이다.


레퍼런스

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 가시화 모습 예시

개요
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 코드 사용 예시

웹 서비스에서 코드 호출한 결과는 다음과 같다. 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 구조는 대규모 지리 데이터를 효율적으로 처리하고 동적으로 로드하여 성능을 극대화한다.

다음은 앞의 구조를 표현한 그림이다.
다음 그림은 3D 타일 공식 포맷인 glTF 2.0의 구조와 개념을 상세히 보여준다. 
레퍼런스

무료 CityGML 3D 도시모델 뷰어 FZK Viewer 와 도시 시뮬레이션 SimStadt 소개

공간정보와 관련된 기술 개발을 하다 보면, CityGML 파일을 확인해야 할 때가 발생한다. 이때 CityGML파일 무료 뷰어를 막상 발견하기 어려운 경우가 종종 있다. 이 글은 라이센스 무료인 FZK Viewer 뷰어를 소개하고 설치 및 사용법을 간략히 소개한다. 아울러, 이 프로그램의 상위 R&D 프로젝트인 도시 시뮬레이션 SimStadt 프로그램도 간략히 나눔한다.
CityGML LoD example

FZK Viewer
슈트르가르트 기술대학에서 개발한 뷰어로, 설치형이다. 설치를 위해 다음 링크를 클릭한다.
다음 화면에서 적색 밑줄 단어를 선택하여 다운로드 후, 압축파일을 푼다. 
다음 exe 파일을 실행한다.

예제 파일(예제 파일 다운로드)을 로딩하고, 텍스쳐를 적용하면 다음과 같이 출력된다. 

CityGML Web Viewer
같은 곳에서 개발한 웹 뷰어가 있다. 사용법은 아래 링크를 선택한 후, CityGML파일을 선택하면 된다. 
실행모습

도시 시뮬레이션 SimStadt R&D
FZK viewer는 SimStadt 프로젝트 중 일부 프로그램이다. SimStadt는 HFT(Hochschule für technik. 기술대학) Stuttgart에서 연구 중인 도시 시뮬레이션 환경 프로젝트로, 2015년에 완료된 프로젝트(SimStadt)를 계속 발전해 온 것이다. 
SimStadt는 건물, 도시 구역, 전체 도시 및 지역의 에너지 분석을 위해 실제 도시 계획 상황 또는 계획 상태의 데이터를 사용할 수 있다. 유스케이스 시나리오는 건물 난방 요구 사항, 태양광 발전 시뮬레이션, 건물 레노베이션, 재생 에너지 공급 시나리오 시뮬레이션에 이르기까지 다양하다. 
시나리오 흐름 분석 시뮬레이션을 지원하는 SimStadt 실행 화면

SimStadt는 건축가, 엔지니어링 사무소, 도시 계획가가 사용할 목적으로 개발되고 있다. 향후, 오픈소스로 공개할 계획이 있다. 

일부 소스코드는 다음 링크에서 발견할 수 있다.

이 R&D 프로젝트는 Dr. Volker Coors, Prof. Bastian Schröter에 의해 주도되고 있다.

자세한 내용은 다음 링크를 참고한다.