WebGL 및 Web Audio API 데모 요약

일마리 헤익키넨

다음은 지난 몇 주 동안 본 멋진 WebGL 및 Web Audio API 데모입니다.

EVE Online ship Viewer는 WebGL로 제작된 멋진 온라인 선박 뷰어 앱입니다. 게임 세계에서 예술작품을 선보이는 매우 좋은 방법입니다.

Web Audio API 샘플 페이지에는 이를 사용하여 오디오를 처리하는 방법에 관한 매력적인 몇 가지 예가 나와 있습니다. WebGL City는 샘플 페이지에 링크된 데모 중 하나입니다. 도시 야경 주위를 날아다니는 헬리콥터의 작은 데모입니다. 헬리콥터('m'을 누르면 음악 사용 중지, 'n을 누르면 헬리콥터 사운드 활성화')는 Web Audio API의 서라운드 오디오 기능을 사용하여 헬리콥터 오디오를 한 스피커에서 다른 스피커로 패닝합니다.

진취적인 소울이 GLSL 샌드박스에서 WebGL 프래그먼트 셰이더만 사용해 스네이크 게임을 구현했습니다. 황홀해.

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

Blocky Earth는 Google 어스 데이터를 가져와 MineCrafts에서 데이터를 가져옵니다. 높이 차이를 잘 전달합니다. 예를 들어 호주와 남극 빙하를 보면 대륙 얼음의 두께가 몇 킬로미터인지 알 수 있습니다.

Midem Music Machine은 Mr.doob과 Paul Lamere의 재미있는 음악 데모입니다. 이 기계는 공이 튀어 오르는 볼에 의해 움직이는 일종의 뮤직박스입니다. CreativeJS에 관한 좋은 글을 확인해 보세요.

계속해서 컴퓨터 음악 시각화 테마로 가다 보면 최근 미니멀리즘 코드 수식으로 생성된 음악인 byte비트에 대한 이 페이지를 봤습니다. 이 페이지는 음악의 멋진 WebGL 시각화로 연결됩니다. 그레그 타바레스는 이러한 아이디어를 떠올려 브라우저에서 직접 자신만의 바이트비트 음악을 만들고 공유할 수 있는 바이트비트 샌드박스를 만들었습니다.