WebGL 및 Web Audio API 데모 요약

Ilmari Heikkinen

지난 몇 주 동안 본 멋진 WebGL 및 Web Audio API 데모를 살펴보세요.

EVE Online 함선 보기 도구는 WebGL로 빌드된 멋진 온라인 함선 보기 도구 앱입니다. 게임 세계에서 아트워크를 표시하는 매우 좋은 방법입니다.

Web Audio API 샘플 페이지에는 이를 사용하여 오디오 처리를 실행하는 방법에 관한 몇 가지 유용한 예가 있습니다. WebGL City는 샘플 페이지에서 연결된 데모 중 하나입니다. 밤의 도시 풍경을 날아다니는 헬리콥터의 작은 데모입니다. 헬리콥터('m'을 눌러 음악을 사용 중지하고 'n'을 눌러 헬리콥터 소리를 사용 설정)는 Web Audio API의 공간 오디오 기능을 사용하여 헬리콥터 오디오를 한 스피커에서 다른 스피커로 팬합니다.

한 명의 진취적인 개발자가 GLSL 샌드박스에서 WebGL 프래그먼트 셰이더만 사용하여 뱀 게임을 구현했습니다. 너무 놀랐습니다.

빅뱅은 다른 WebGL 파티클 애니메이션과 비슷해 보이지만 실제로는 GPU에서 파티클 시뮬레이션이 실행됩니다. 시뮬레이터는 텍스처에서 이전 입자 위치를 읽고 새 입자 위치를 FBO 텍스처에 쓰는 프래그먼트 셰이더입니다.

Blocky Earth는 Google 어스 데이터를 가져와서 MineCraft로 변환합니다. 높이 차이를 잘 전달합니다. 예를 들어 오스트레일리아와 남극 빙하를 살펴봤는데, 대륙 빙하가 수 킬로미터 두께임을 확인할 수 있습니다.

Midem Music Machine은 Mr.doob와 Paul Lamere의 재미있는 음악 데모입니다. 공이 튀어 오르면서 음악을 연주하는 일종의 공 구동 음악 상자입니다. CreativeJS에 관한 유용한 문서가 있으니 확인해 보세요.

컴퓨터 음악 시각화 테마를 이어서, 최근에 최소한의 코드 수식으로 생성되는 음악 형식인 바이트비트에 관한 이 페이지를 발견했습니다. 이 페이지는 음악의 멋진 WebGL 시각화로 연결됩니다. 그레그 타베레스는 이 아이디어를 바탕으로 브라우저에서 바로 자신만의 바이트비트 음악을 만들고 공유할 수 있는 바이트비트 샌드박스를 만들었습니다.