코딩하는 곰돌이

CSS의 Layout, Paint, Composite 단계와 리플로우 최적화들어가며"transform과 opacity를 쓰면 성능이 좋다"는 말은 프론트엔드 개발자라면 누구나 안다. 하지만 왜 그런지, 정확히 브라우저 내부의 어느 단계를 건너뛰길래 빠른 것인지 설명할 수 있는 사람은 생각보다 많지 않다. 이 글은 렌더링 파이프라인의 각 단계를 코드 수준에서 파고들고, 실제로 측정 가능한 방식으로 리플로우 비용을 검증하는 것을 목표로 한다.1. 렌더링 파이프라인 전체 구조브라우저가 HTML/CSS를 화면에 그리기까지의 과정은 다음과 같다.1. DOM 생성 : HTML 파싱 → DOM 트리2. CSSOM 생성 : CSS 파싱 → CSSOM 트리3. Render Tree 생성 :..

🌐 3D GIS 위 문화재·토지이용 특화 서비스마이크로프론트엔드로 구현한 공간정보 특화 애플리케이션 아키텍처 | React 18 | Umi 3 | Cesium 1.115 | Qiankun 2 | Ant Design 4 | |:---:|:---:|:---:|:---::| 한 줄 요약단일 SPA가 아닌 19개의 독립 엔트리 × UMD 번들로 쪼개진 마이크로프론트엔드.Cesium 3D 뷰어 위에 문화재 검색·가시권 분석·허가·토지이용 등 행정 GIS 업무를 얹은 엔터프라이즈 프론트엔드.📑 목차프로젝트 개요아키텍처 한눈에 보기마이크로프론트엔드 설계 — Qiankun + Multi-Entry빌드 파이프라인 — Umi × Webpack 커스터마이징3D GIS 엔진 — Cesium 통합 전략상태 관리 — DVA ..

Cesium Terrain Server 프로젝트 학습 정리Cesium.js 기반 3D 지형(terrain) 타일셋을 파일시스템에서 서빙하는 Go HTTP 서버를 분석한 내용입니다.들어가며3D 지도를 웹에서 구현할 때 Cesium.js는 사실상 표준에 가깝습니다. 하지만 DEM(디지털 고도 모델) 데이터를 Cesium이 읽을 수 있는 terrain 타일로 변환한 뒤, 이를 HTTP로 안정적으로 서빙하는 과정은 별도의 인프라가 필요합니다.Cesium Terrain Server는 바로 그 역할을 하는 경량 Go 서버입니다. Cesium Terrain Builder(CTB)로 생성한 타일셋을 개발·테스트 환경에서 빠르게 올려볼 수 있도록 설계되었습니다.프로젝트 개요항목내용언어Go 1.24+라이선스Apache 2..

Cesium에서 커스텀 지형을 띄우기까지: Cesium Terrain Builder로 DEM → terrain tile 변환하기1. 도입부배경3D 지도 프로젝트에서 CesiumJS로 특정 지역 DEM(고도 래스터)을 지형으로 올려야 했습니다. Cesium Ion이나 공개 terrain provider는 우리가 필요한 지역·해상도를 커버하지 않았고, 브라우저에서 CesiumTerrainProvider로 불러올 수 있는 자체 terrain tileset이 필요했습니다.문제는 Cesium이 terrain 데이터를 직접 만들어 주지 않는다는 점입니다. GeoTIFF 같은 DEM을 heightmap-1.0 형식 타일로 변환하는 별도 빌드 단계가 필요하고, 그 역할을 Cesium Terrain Builder(CTB..

cesium-gaussian-splatting 기술 학습 노트CesiumJS 위에 3D Gaussian Splatting을 오버레이하는 실험 프로젝트를 분석·학습한 내용을 정리한 문서입니다.3DGS 이론의 심층 리뷰는 [gaussian-splatting-review.md](./gaussian-splatting-review.md)를 참고하세요.1. 프로젝트 개요1.1 목적지구 규모 3D 지도(CesiumJS) 위에 실사 기반 3D Gaussian Splatting 모델을 배치해, 특정 경·위도 위치에서 스캔한 공간을 지형·건물과 함께 볼 수 있는지 검증하는 PoC(Proof of Concept)입니다.데모 (GitHub Pages)원본 아이디어: tebben/cesium-gaussian-splatting1..

Apple의 오픈소스 프로젝트 [ml-sharp](https://github.com/apple/ml-sharp)(SHARP: Sharp Monocular View Synthesis)를 직접 실행하고 분석하면서 정리한 기술 학습 내용입니다.작성자: HYEONWOO대상 저장소: apple/ml-sharp (main 브랜치)관련 문서: TROUBLESHOOTING.md — 실행 중 겪은 이슈와 해결 방법목차SHARP란 무엇인가핵심 개념: 3D Gaussian Splatting전체 파이프라인 개요모델 아키텍처 (RGBGaussianPredictor)추론 파이프라인 상세 (sharp predict)좌표계와 Metric Scale렌더링 파이프라인 (sharp render)출력 포맷: PLY와 색공간프로젝트 구조와 ..

Cesium 지도 위에 가우시안 스플랫 올리기 — 두 렌더러를 하나의 시점으로 묶은 이야기들어가며3D GIS 지도(Cesium) 위에 실제 촬영으로 만든 가우시안 스플랫(Gaussian Splatting) 장면을 겹쳐 보여줘야 하는 요구가 있었다. 문제는 스플랫 렌더링을 담당하는 mkkellogg/GaussianSplats3D는 Three.js 기반이고, 지도는 Cesium이라는 완전히 다른 렌더러라는 점이었다. 서로 다른 두 엔진을 어떻게 한 화면에서 자연스럽게 겹칠 것인가.결론부터 말하면 이렇게 풀었다.하나의 WebGL 컨텍스트를 공유하지 않는다. Cesium 캔버스 위에 투명한 Three.js 캔버스를 겹쳐 놓는 오버레이 방식을 택했다.매 프레임 카메라만 동기화한다. Cesium의 postRende..

Cesium ↔ Three.js 가우시안 스플랫 연계 구조Cesium 3D 지도 위에 @mkkellogg/gaussian-splats-3d 가우시안 스플랫을 겹쳐 보여주는 co-viewer 구현 문서.핵심 파일: [CesiumSplatOverlay.ts](./CesiumSplatOverlay.ts)1. 전체 컨셉 (Overlay 방식)tebben/cesium-gaussian-splatting 방식 채택. 하나의 WebGL 컨텍스트를 공유하지 않고, Cesium 캔버스 위에 별도의 Three.js 캔버스를 겹쳐 놓고 매 프레임 카메라만 동기화한다.┌───────────────────────────────────────────┐│ cesiumWidget.container (position:relative)..