모두가 재미있는 작은 데모들을 만들기 위해 Fable 5를 사용하고 있기에, 저는 더 나은 무언가를 만들기로 했습니다.

@threejs와 @greensock을 사용하여 3D 키보드 이커머스 (ecom) 플랫폼을 바이브 코딩 (Vibe coded) 했습니다. 모든 키, 모든 스위치, 모든 색상. 3D에서 실시간으로 커스텀이 가능합니다.

키보드 전체가 절차적 기하학 (Procedural geometry)을 사용하여 런타임 (runtime)에 구축되었다는 점이 정말 흥미롭습니다.

키보드에 이 정도의 사실적인 조명을 구현하기 위해, 스튜디오 환경 (그라데이션 스카이 + 소프트박스 패널)을 사용하였으며, 사실적인 반사 (reflections)를 위해 PMREM 큐브맵 (cubemap)으로 렌더링했습니다. 여기서 Opus가 조금 더 도움이 되었습니다 (Claude 채팅에서 Fable이 루프에 빠져 실패했기 때문입니다).

또한 RGB 언더플로우/스커트 (underflow/skirt)를 위한 커스텀 GLSL 셰이더 (shaders)와 sRGB 출력 인코딩 (output encoding) 및 모든 재질 색상에 대한 명시적인 convertSRGBToLinear()가 적용되어 있어, 키캡이 정확한 스와치 (swatch) 값으로 렌더링됩니다.

저는 이러한 기술이나 개념들을 전혀 모르지만, Fable과 Opus가 그들의 "사고 (thinking)" 단계를 파고들며 이 문제에 어떻게 접근하려 했는지 읽어왔습니다.

한번 가서 체험해 보세요. 구매하고 싶어질 만한 멋진 Claude 테마 키보드도 있습니다 :D

라이브: https://t.co/YaenuyXvaV
코드: https://t.co/alYsHFguYt