실험 의뢰

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

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

실험 목록 보기

숫자로

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

쓰는 것

WebGLCanvas 2DWebGPUGLSL 셰이더Three.jsp5.js

지나온 길

  1. 2021혼자 시작
  2. 2023팀 3명
  3. 2025전시 4회

다른 곳

GitHub 실험 아카이브 기술 노트

해 본 것들

Light Painting Hooks and Plaid 흐르는 격자 WebGL · 셰이더 마우스 속도에 따라 격자가 늘어지고 되돌아옵니다. Computational fluid dynamics 소리로 그리는 선 Web Audio · Canvas 마이크 입력의 주파수를 선의 굵기로 바꿉니다. Typography Letter 글자가 흩어지는 표지 Canvas 2D 스크롤하면 제목이 입자로 흩어집니다. Watercolour paper texture 색을 고르는 도구 React · OKLCH 밝기를 유지하면서 색만 바꾸는 팔레트 도구. 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 서울 · 원격 협업

미리 말해 두는 것

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

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