소개: ShaderPad

ShaderPad는 웹사이트에 shader를 붙일 때 매번 graphics scaffolding을 다시 만들지 않도록 설계한 작은 라이브러리다.

ShaderToy나 TouchDesigner에서 아이디어를 다듬은 뒤, 자신의 사이트로 옮길 때 반복되는 번거로움을 줄이는 것이 핵심 동기다. 작성자는 오랜 기간 직접 필요한 기능을 조금씩 더해왔고, 이제 이를 오픈소스로 공개했다.

주요 포인트는 다음과 같다.

• 5.8KB gzipped로 매우 작다.
• Three.js보다 30배 이상 작다고 설명한다.
• 전체 3D 장면보다는, 풀스크린 인터랙티브 그래픽이나 간단한 shader 실험에 적합하다.

성능 측면에서는 가능한 한 GPU에서 작업을 유지하도록 설계했다. 여러 shader를 연결할 때도 CPU를 오가는 대신 같은 pipeline 안에서 처리하고, 여러 pass가 같은 face/pose tracking 결과를 쓸 때는 detection 결과를 캐시한다.

작성 과정에 대한 회고도 담겼다. 핵심 API와 제약은 AI보다 먼저 실제 필요를 기반으로 천천히 다듬었고, AI는 주로 문서화, 설명 정리, README/예제 반영 같은 주변 작업을 돕는 데 유용했다고 말한다. 반대로 작은 bundle size, 단순한 API, 절제된 범위를 유지하는 일은 여전히 사람이 더 잘해야 한다는 관점이다.

현재는 docs, quickstart, interactive examples를 통해 바로 시작할 수 있으며, 저자는 ShaderPad를 기반으로 더 많은 창작용 doodle과 실험이 나오길 기대한다.