원자 해부도 - 오비탈과 스핀, 그리고 탄소 하나를 끝까지 그려보기
교과서의 태양계 모형이 틀린 이유부터 핵과 쿼크, s·p 오비탈의 실제 모양, 스핀이 주기율표를 만드는 방식까지 정리한다. 탄소의 전자 구름은 글 안에서 직접 3D로 돌려볼 수 있다.
4개의 글
교과서의 태양계 모형이 틀린 이유부터 핵과 쿼크, s·p 오비탈의 실제 모양, 스핀이 주기율표를 만드는 방식까지 정리한다. 탄소의 전자 구름은 글 안에서 직접 3D로 돌려볼 수 있다.
라이브러리 없이 WebGL2 프래그먼트 셰이더에서 수소형 파동함수를 직접 계산해 전자 확률 구름을 볼륨 렌더링한다. 등확률면 대신 안개로 그리는 이유, 레이마칭 구현, 톤매핑에서 색이 날아가는 문제까지 다룬다.
Figma가 브라우저에서 작동하니까 HTML 기반일까? 아니다. JSON 데이터를 WebGL로 렌더링하는 독자적인 구조다. Figma 파일 포맷과 렌더링 방식을 정리했다.
Figma의 WebGL 렌더링, Konva의 Canvas 2D 방식, PixiJS의 중간 지점을 비교한다. 좌표 시스템, 이벤트 처리, 에디터 인터랙션 구현의 현실적인 난이도까지 다룬다.