Vgpu

예시 체험

고2 물리학Ⅰ — 두 점파원 물결의 간섭 실시간 화면 만들기

꾸민 수업 예시 직접 생성 — 에이전트 제작 새 창에서 크게 보기

선생님이 입력한 내용

고등학교 2학년 물리학Ⅰ '파동의 간섭' 단원. 교사가 개인 노트북에서, 두 파원에서 퍼지는 둥근 물결이 겹치며 보강·상쇄 무늬를 만드는 모습을 수업 화면에 실시간으로 띄울 시각 자료를 준비하는 상황이다.

고등학교 2학년 물리학Ⅰ '파동의 간섭' 수업에 띄울 실시간 시각 자료를 만들어 주세요. 화면 가운데 두 점파원에서 둥근 물결이 계속 퍼져 나가고, 두 물결이 겹치며 만드는 보강·상쇄 무늬가 화면 가득 보이게 WebGPU로 그려 주세요. 파원 사이 거리와 파장은 값만 바꾸면 조절되게 하고, 코드 주석은 한국어로 달아 주세요.

나온 결과

interference.wgsl — struct Params { time(흐른 시간), texel(1/화면 크기), sourceSeparation(두 파원 사이 거리), wavelength(파장) } 마루+마루 → 밝은 물빛 띠(보강) / 마루+골 → 어두운 골(상쇄) example.ts — effect(...) + frameLoop(...)로 매 프레임 params.time만 갱신해 화면에 그린다

직접 해 보기 — 3단계

1. opencode 같은 AI 에이전트에 저장소 안내대로 이 스킬(vgpu)을 설치한다. (예: npx skills add vercel-labs/vgpu) 설치 없이 문서만 확인해도 된다.
2. 학년·단원·그릴 장면(두 점파원의 간섭)·값으로 조절할 항목을 적은 문장을 붙여 넣는다. 위 문장을 바꿔 써도 된다.
3. 나온 WGSL 셰이더와 배선 코드(example.ts)를 프로젝트에 넣고, WebGPU를 켠 최신 브라우저에서 열어 무늬·파원 위치·주석을 확인한 뒤 파원 거리와 파장 값을 고친다.

수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (vgpu) · 확인일 2026-10-16. 이 스킬은 스스로 그림을 그리는 스킬이 아니라, vgpu 패키지에 딸린 문서를 찾아 그 프로젝트 버전에 맞는 WGSL 셰이더와 vgpu 배선 코드를 만들도록 안내하는 문서 라우터 스킬이다. 그래서 결과물은 완성된 그림 파일이 아니라 셰이더(.wgsl)와 배선 코드(.ts)이고, 그림은 그 셰이더를 실행해야 나온다. 이 환경에는 GPU가 없고 vgpu 패키지를 설치해 그대로 돌리지 못했으므로, 스킬이 낸 WGSL 셰이더를 브라우저의 WebGPU API로 직접 실행해 그린 화면을 캡처했다. vgpu가 자동으로 붙여 주는 전체화면 정점 단계만 원시 WebGPU 코드로 대신 붙였고, 셰이더 계산 부분은 손대지 않았다. example.ts는 저장소에 함께 실린 getting-started 문서 형식대로 손으로 작성했으며 실행하지는 않았다. 화면 속 값(파원 사이 거리 0.55, 파장 0.12, 진동수 3.0, 화면을 멈춘 시각 1.8초)은 모두 수업용 예시 값이며 실제로 측정한 파동 값이 아니다. 실제 수업에 쓰려면 이 값을 조절해 무늬 변화를 비교하고, 교육과정의 성취기준과 용어(보강 간섭·상쇄 간섭)에 맞게 확인해야 한다. 이 화면은 WebGPU를 지원하는 최신 브라우저에서만 보이며, 지원하지 않는 기기에서는 나오지 않는다.

써 보려면

1. 저장소 vercel-labs/vgpu를 엽니다.
2. 이 기록에는 별도 설치가 필요하지 않다고 되어 있습니다.
3. 이 기록에는 API 키가 필요하지 않다고 되어 있습니다.

출처

스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 정보 정정 요청

라이선스