실험 의뢰

브라우저 안에서
실제로 되는 것만 만듭니다

제너레이티브 그래픽과 인터랙션을 연구하고, 그 결과를 웹에서 바로 돌아가는 형태로 넘깁니다.

실험 목록 보기

숫자로

47공개한 실험
2100깃허브 별
60평균 프레임(fps)

쓰는 것

WebGLCanvas 2DWebGPUGLSL 셰이더Three.jsp5.js
2021 → 2026

지나온 길

  1. 2021혼자 시작

    밤에 셰이더를 만지다가 낮 일보다 재미있어져 나왔습니다. 첫 해 의뢰는 세 건이 전부였습니다.

  2. 2023팀 세 명

    디자이너와 개발자가 합류했습니다. 이때부터 실험을 공개하기 시작했습니다.

  3. 2025전시 네 번

    미술관과 브랜드 전시에 인터랙션을 납품했습니다. 관람객 앞에서 안 끊기는 게 목표였습니다.

  4. 2026WebGPU 실험

    컴퓨트 셰이더로 30만 좌표를 실시간 처리하는 데까지 왔습니다.

다른 곳

GitHub 실험 아카이브 기술 노트

해 본 것들

Light Painting Hooks and Plaid운영중 흐르는 격자 WebGL셰이더 마우스 속도에 따라 격자가 늘어지고 되돌아옵니다. Computational fluid dynamics완료 소리로 그리는 선 Web AudioCanvas 마이크 입력의 주파수를 선의 굵기로 바꿉니다. Typography Letter완료 글자가 흩어지는 표지 Canvas 2D 스크롤하면 제목이 입자로 흩어집니다. Watercolour paper texture운영중 색을 고르는 도구 ReactOKLCH 밝기를 유지하면서 색만 바꾸는 팔레트 도구. Pratt Connector Map진행중 지도 위 밀도 WebGPU컴퓨트 30만 개 좌표를 실시간으로 밀도로 바꿉니다. free crumpled paper완료 종이 질감 생성기 노이즈SVG 인쇄물 느낌을 코드로 만듭니다.
✕ Light Painting Hooks and Plaid 흐르는 격자 WebGL · 셰이더

정점 셰이더 한 장으로 처리해 모바일에서도 60fps를 지킵니다.

✕ Computational fluid dynamics 소리로 그리는 선 Web Audio · Canvas

FFT 1024. 전시장에서 관람객 목소리로 그림이 그려집니다.

✕ Typography Letter 글자가 흩어지는 표지 Canvas 2D

글자를 픽셀로 읽어 3천 개 입자로 나눕니다.

✕ Watercolour paper texture 색을 고르는 도구 React · OKLCH

팀 내부에서 쓰려고 만들었는데 밖에서 더 많이 씁니다.

✕ Pratt Connector Map 지도 위 밀도 WebGPU · 컴퓨트

컴퓨트 셰이더로 CPU 대비 40배 빨라졌습니다.

✕ free crumpled paper 종이 질감 생성기 노이즈 · SVG

이미지 없이 12KB짜리 SVG 필터 하나로 끝납니다.

재현되는 결과만 넘깁니다 실험 코드는 전부 공개하고, 납품물에는 성능 측정 결과를 함께 넣습니다. 실험 의뢰하기
WEBGL · CANVAS · WEBGPU · GLSL · REALTIME · OPEN SOURCE✳WEBGL · CANVAS · WEBGPU · GLSL · REALTIME · OPEN SOURCE✳WEBGL · CANVAS · WEBGPU · GLSL · REALTIME · OPEN SOURCE✳WEBGL · CANVAS · WEBGPU · GLSL · REALTIME · OPEN SOURCE✳
Abstract Particles 실험 노트 끝난 것과 실패한 것을 같이 적습니다
Donald Trump, Ai Generated Art, Public Domain 셰이더 스케치 #47 노이즈 두 장을 겹쳐 물결을 만듭니다
Lego Architecture: Tower of Babel 입자 3만 개 GPU 인스턴싱으로 프레임 유지
Project 365 #196: 150709 Playing With Fire! 소리로 그리기 마이크 주파수를 선 굵기로

실패한 것들

잘된 것만 적으면 다음에 또 같은 실수를 합니다. 그래서 실패도 같은 무게로 적어 둡니다.

  1. WebGPU 조기 도입지원 브라우저가 부족해 폴백을 두 벌 유지해야 했습니다. 결국 롤백.
  2. 물리 기반 스크롤손맛은 좋았지만 접근성 검사를 통과 못 했습니다.
  3. 셰이더 텍스트 렌더링자유도는 높은데 한글 자소 처리에서 무너졌습니다.
실험 노트를 메일로 받아 보세요 한 달에 한 번, 그 달에 만든 것과 엎은 것을 정리해 보냅니다. 구독하기
WEBGL · WEBGPU · CANVAS · SHADERS · REALTIME/WEBGL · WEBGPU · CANVAS · SHADERS · REALTIME/WEBGL · WEBGPU · CANVAS · SHADERS · REALTIME/WEBGL · WEBGPU · CANVAS · SHADERS · REALTIME/

실험 의뢰

전시, 캠페인, 제품 화면 어디든 좋습니다. 다만 브라우저에서 실제로 돌아가야 한다는 조건은 지킵니다.
예산과 일정, 목표 기기(모바일 포함 여부)를 적어 주시면 가능 여부를 사흘 안에 답합니다.

lab@halcyonlab.example 서울 · 원격 협업
// HALCYON LAB HL
Halcyon Lab
핼시온 랩 Halcyon Lab 인터랙티브 · 제너레이티브 서울 · 원격 협업

브라우저 안에서 실제로 되는 것만 만듭니다.

lab@halcyonlab.example
서울 · 원격 협업
WebGL · Canvas · WebGPU
연락처 저장

미리 말해 두는 것

저사양 기기에서 프레임이 안 나오면 효과를 줄입니다. 예쁜 것보다 끊기지 않는 쪽을 먼저 고릅니다.

소스는 MIT로 공개합니다. 공개가 곤란한 프로젝트는 미리 알려 주세요. 그런 경우 견적이 달라집니다.