事例紹介: Technitone.com の作成

HTML5 Rocks
TECHNITONE — A web audio experience
Technitone.com

Technitone.com は、WebGL、Canvas、Web Socket、CSS3、JavaScript、Flash、Chrome の新しい Web Audio API が融合して使われています。

この記事は、Technitone.com の計画、サーバー、サウンド、ビジュアル、そして対話型のデザインに用いたワークフローの一部など、制作のあらゆる側面を紹介するものです。ほとんどのセクションでは、コード スニペット、デモ、ダウンロードが示されています。また、記事の最後には、すべてを 1 つの zip ファイルにまとめたダウンロード リンクがあります。

gskinner.com 制作チーム

ギグ

私たち制作チームは gskinner.com におけるオーディオ エンジニアという位置付けではありませんが、難しい課題に魅力を感じて次のような計画を立てました。

  • ユーザーはグリッド上に音を配置します。この機能は、AndreToneMatrix にインスパイアされたものです。
  • 音は、サンプリングされた楽器、ドラム キット、さらにユーザー自身のレコーディングに関連付けられています。
  • 複数の接続ユーザーが同じグリッドで同時に演奏します。
  • ソロ モードで自分の音楽を探求することもできます。
  • セッションに招待して、複数のユーザーでバンドを結成できます。即興のジャム セッションも可能です。

オーディオ フィルタや効果を音に適用するツール パネルを使用して、ウェブ オーディオ API を探求する機会をユーザーに提供します。

gskinner.com による Technitone

また、次のような機能もあります。

  • ユーザーの作曲や効果をデータとして保存し、複数のクライアントと同期します。
  • 楽曲をクールな見た目にすることができるように、色のオプションをいくつか用意します。
  • 他のユーザーの作品を聴き、お気に入りに登録し、さらに編集もできるようにギャラリーを提供します。

この製品では、なじみのあるグリッドのメタファーを維持したまま 3D 空間に浮かばせて、いくつかの照明、テクスチャ、粒子の効果を加え、柔軟性の高い(またはフルスクリーンの)CSS および JS 指向のインターフェースで実装しました。

ツアー

楽器、効果、グリッド データはクライアント上で統合されシリアル化されて、カスタムの Node.js バックエンドに送信され、Socket.io で複数のユーザー向けに解決されます。このデータは各プレイヤーの編集が反映された状態でクライアントに返されてから、複数ユーザーの再生中に UI、サンプル、効果のレンダリングを担当する関連 CSS、WebGL、WebAudio レイヤに分散されます。

複数のソケットによるリアルタイム通信で、クライアントとサーバーの両方に JavaScript が提供されます。

Technitone のサーバー構成図

Technitone では、サーバーのすべての面にノードを使用しています。これは静的なウェブ サーバーであり、すべての要素を 1 台にまとめたソケット サーバーです。Express が私たちの最終的に使用することにしたサーバーであり、これはすべての要素がノード上に構築されているフル ウェブ サーバーです。拡張性とカスタマイズ性が高く、(Apache や Windows Server と同様に)サーバーのさまざまな基礎レベルの要素を扱うことができます。そのため、デベロッパーはアプリケーションの構築に集中できます。クライアントとサーバー間の詳細な通信図をダウンロードする

複数ユーザーのデモ(スクリーンショット)

このデモはノード サーバーから実行する必要がありますが、この記事の環境はそのようになっていないため、スクリーンショットを含めました。このスクリーンショットでは、Node.js をインストールし、ウェブ サーバーを設定し、ローカルで実行した場合にデモがどのようになるかが示されています。新規ユーザーがデモのインストールにアクセスするたびに、新しいグリッドが追加され、全員の作品を互いに表示できるようになります。

Node.js デモのスクリーンショット

複数ユーザーのデモをダウンロードするNode.js サーバーが必要です必ず README をお読みください。Node.js のインストール方法、サーバーの設定方法、デモをローカルで実行する方法に関する情報が記載されています。

ノードは簡単です。Socket.io とカスタムの POST 要求を組み合わせることで、同期のために複雑なルーチンを構築する必要はなくなりました。この処理は、JSON が渡されることで Socket.io によって透過的に処理されます。

簡単ですね。次のコードをご覧ください。

3 行の JavaScript で、Express を使用してウェブ サーバーを実行できます。



    

リアルタイム通信のために、socket.io を関連付ける JavaScript を少し追加します。



    

これで、HTML ページから着信した接続のリッスンが開始されます。



      

サウンド チェック

ウェブ オーディオ API の使用に伴って必要になる作業がどのようなものになるのか、私たちにはまったく予想がつきませんでした。最初にわかったことは、Digital Signal Processing(DSP)は非常に複雑だということです。まったく歯が立たないように思えました。次に認識したのは、Chris Rogers が API についてすでに大きな仕事をしてくれていたということです。

Technitone は、高度な数学やオーディオ マニア的な要素を使用していません。関心を持ったデベロッパーは、その機能を簡単に利用することができます。必要な作業は、いくつかの専門用語を明確にし、ドキュメントを読むことだけでした。私たちからのアドバイスは、流し読みせずに、きちんと読む、ということです。最初から始めて最後まで読み通してください。随所に図や写真が掲載され、実に洗練された読み物です。

ウェブ オーディオ API について初めて触れた方や機能をご存じない方は、Chris Rogers の デモを参照してください。ひらめきが必要ならば、そこできっと見つかります。

ウェブ オーディオ API のデモ

お使いのブラウザはウェブ オーディオ API をサポートしていません。Chrome でこのデモを実行してみてください。

ウェブ オーディオ API のデモをダウンロードするサーバーでホストされている場合にのみ動作します


ソースに記載されている内容の概要について説明します。

サンプル(サウンド ファイル)を読み込みます。



  

モジュール式のルーチンを設定します。



  

実行時の効果(インパルス応答を使用したコンボリューション)を適用します。



  

別の実行時の効果(ディレイ)を適用します。



  

それを聞こえるようにします。



  

Technitone における再生のアプローチは、スケジュールがすべてです。サウンドのすべてのビートを処理するためのテンポとしてタイマー間隔を設定するのではなく、キュー内のサウンドを管理し、そのスケジュールを指定するための短い間隔を設定しています。これにより、オーディオ データを解決し、フィルタと効果を処理するという準備を API で行ってから、実際の音を出すために CPU を使用することができます。ビートが流れる段階では、最終的な結果をスピーカーに送り込むために必要なすべての情報がデータに含まれています。

全体として、すべての要素を最適化する必要がありました。CPU への負荷が高くなりすぎると、スケジュールに合わせるためにプロセスがスキップされました(雑音が入る原因になります)。Chrome の別のタブに移動すると起きるこのような問題を解決するように、懸命の対策を行いました。

ライト ショー

正面と中央はグリッドと粒子のトンネルです。これは Technitone の WebGL レイヤです。

WebGL は、プロセッサと連携して動作するように GPU でタスクを処理することで、ウェブに画像をレンダリングする他の多くのアプローチよりもはるかに優れたパフォーマンスを実現します。このパフォーマンス向上は、学習曲線がきわめて急な開発に打ち込んだ代償として得られるものです。しかしウェブの対話機能について真剣な情熱を持ち、パフォーマンスの制限を可能な限り少なくしたいのであれば、WegGL は Flash に匹敵するソリューションです。

WebGL のデモ

申し訳ございません。お使いのブラウザは HTML5 Canvas をサポートしていません。ブラウザが最新バージョンに更新されており、HTML5 Canvas と互換性があることを確認してください。Google Chrome を推奨します。


このデモでは、シェーディング、テクスチャ、アニメーション、粒子の効果、対話性を紹介しています。各デモは、その 1 つ前の概念に基づいて構築されています。

WebGL のデモをダウンロードするテクスチャを使用するデモは、サーバーでのみ動作します

注: WebGL は、ローカル ハードドライブから直接テクスチャを読み込んだり操作しないというセキュリティ プロトコルを順守しています。

WebGL コンテンツはキャンバス(文字どおり、HTML5 Canvas)にレンダリングされ、次の中核的な基本要素から構成されています。

  • オブジェクトの頂点(ジオメトリ)
  • 位置のマトリクス(3D 座標)
  • シェーダー(GPU が直接処理するジオメトリの外観の記述)
  • コンテキスト(GPU が参照する要素への「ショートカット」)
  • バッファ(コンテキスト データを GPU に渡すパイプライン)
  • メイン コード(目的の対話機能に固有のビジネス ロジック)
  • 「描画」メソッド(シェーダーをアクティブにし、ピクセルをキャンバスに描きます)

WebGL コンテンツを画面にレンダリングする基本的なプロセスは次のようになります。

  1. 遠近法のマトリクスを設定します(3D 空間に向けるカメラの設定を調整して、画像平面を定義します)。
  2. 位置のマトリクスを設定します(3D 座標で、相対的な位置を測定するための原点を宣言します)。
  3. バッファにデータ(頂点の位置、色、テクスチャなど)を入力して、シェーダー全体のコンテキストに渡します。
  4. バッファからデータを抽出し、シェーダーを使用して構成し、GPU に渡します。
  5. 描画メソッドを呼び出して、コンテキストに対してシェーダーをアクティブにし、データを使用して実行し、キャンバスを更新するように指示します。

具体的な処理は次のようになります。

遠近法のマトリクスを設定します。



  

位置のマトリクスを設定します。



  

一部のジオメトリと外観を定義します。



  

バッファにデータを入力し、コンテキストに渡します。



  

描画メソッドを呼び出します。



  

アルファベースのビジュアルが 1 つずつ重なって表示されていくことのないように、フレームごとに必ずキャンバスを消去してください。

発表会

グリッドと粒子のトンネル以外のすべての UI 要素は、HTML/CSS と JavaScript の対話ロジックで構築されています。

Technitone では一番最初の時点から、できるだけすぐにユーザーがグリッドを操作できるようにすると決めていました。スプラッシュ画面も指示もチュートリアルもなく、「実行」のみです。インターフェースが読み込まれた後は、その速度を低下させるものを配置すべきではありません。

そのため、初めて訪れたユーザーの対話操作をガイドする方法を慎重に検討する必要がありました。WebGL 空間におけるマウス位置に基づいて CSS カーソルのプロパティを変更するなど、細かい手がかりを用意しました。カーソルがグリッド上に置かれると、ハンド カーソルに切り替えます(音を配置することによって操作できるので)。グリッドの周囲の領域にカーソルが置かれると、矢印付きの十字カーソルに切り替えます(グリッドを回転したりレイヤに分解できることを示します)。

ショーの準備

LESS(CSS プリプロセッサ)と CodeKit(強力なウェブ開発キット)によって、設計ファイルをこなれた HTML/CSS に変換するためにかかる時間を大幅に短縮できます。これらを使用することで、より多様な方法で CSS の構成、作成、最適化を行い、変数、ミックスイン(関数)、さらには数学を利用することができます。

ステージ上の効果

CSS3 の遷移backbone.js を使用して、きわめてシンプルな効果を作成しました。この効果によってアプリケーションは生き生きとしたものになり、使用している楽器を示す視覚的なキューを提供できます。

Technitone の色

Backbone.js を使用すると、色の変更イベントをキャッチし、新しい色を適切な DOM 要素に適用できます。GPU によるアクセラレーションで CSS3 の遷移が処理されるため、パフォーマンスにほとんど影響を与えることなく色のスタイルを変更できました。

インターフェース要素の色の遷移は、ほとんどの場合、背景色の遷移によって行われました。この背景色の上に、背景色を透過させるための透過領域を設定した背景画像を配置します。

色の遷移のデモ - 作成できる色の数

このデモでは、この技術を使用して実行できる内容の例を示します。2 つの色を選択し、マッド サイエンティストが色を混ぜて 3 つ目の色を作成するデモを見てください。

色遷移のデモ

色遷移のデモをダウンロードする

HTML、CSS、JavaScript の高度な設定で行われている内容と、効果のアート アセットを準備する方法をよく見てみましょう。

HTML: 基礎

デモのために色の領域が 3 つ必要です。2 つはユーザーが色を選択する領域で、3 つ目は混ぜられた色の領域です。イラストに合わせて、CSS3 の遷移をサポートし、考えられる最も単純な DOM 構造と、最小限の HTTP 要求を構築しました。

<!-- Basic HTML Setup -->
<div class="illo color-mixed">
  <div class="illo color-primary"></div>
  <div class="illo color-secondary"></div>
</div>
  

CSS: スタイルを使用したシンプルな構造

各領域を正しい場所に配置するために絶対的なポジショニングを使用し、各領域内に背景のイラストを整列するために背景位置のプロパティを調整しました。これによってすべての領域(それぞれが同じ背景画像を持つ)が 1 つの要素のように見えるようになります。



  

色の変更イベントをリッスンする、GPU アクセラレーションによる遷移を適用します。また、.color-mixed の時間を長くして進行度を変更し、色が混ざるまでに時間がかかるように見える効果を作りました。



  

最新のブラウザのサポートと推奨される CSS3 遷移の使用方法については、HTML5please にアクセスしてください。

JavaScript: 機能の実現

色を動的に割り当てることは簡単です。目的とする色のクラスを備えた任意の要素を DOM で検索し、ユーザーが選択した色に基づいて背景色を設定します。遷移の効果を DOM の任意の要素に適用するには、クラスを追加します。

これによって、軽量で柔軟性が高くスケーラブルなアーキテクチャが実現します。



  

第一と第二の色が選択されると、混合色の値が計算され、結果の値が適切な DOM 要素に割り当てられます。



  

HTML/CSS アーキテクチャの説明: 3 つの色遷移ボックスに個性を与える

目標は、隣接する色の領域に対比色を配置したときに整合性が保たれる、楽しくてリアルな照明効果を作成することでした。

24 ビットの PNG を使用することで、HTML 要素の背景色を画像の透過領域を通して見せることができます。

画像の透過

異なる色のボックスとボックスの接合部にはくっきりとした境界線が生まれます。これはリアルな照明効果の邪魔になり、イラストを設計するときの大きな課題の 1 つでした。

色の領域

解決策は、色の領域の端が透過領域を通して見えないようにイラストを設定することでした。

色の領域の端

構築のためには計画が不可欠でした。設計者、デベロッパー、イラストレーターの間で迅速に計画セッションを行うことで、全体を組み立てたときに連携して動作するようにすべてを構築することの必要性をチームが理解できました。

レイヤの命名方法によって CSS 構造に関する情報をやり取りする例として、Photoshop ファイルを参照してください。

色の領域の端

色遷移のデモをダウンロードする

アンコール

Chrome を使用していないユーザー向けには、アプリケーションのエッセンスを 1 つの静止画像に抽出することを目標にしました。ここではグリッド ノードが主役です。背景のタイルはアプリケーションの目的を示し、輝いている部分の遠近法がグリッドのリアルな 3D 環境を暗示します。

色の領域の端

Technitone の詳細について関心をお持ちの方は、今後も私たちのブログにご注目ください。

すべてのデモを 1 つのファイルでダウンロードする

バンド

お読みくださってありがとうございます。いつか皆さんとジャム セッションできる日を楽しみにしています。

Comments

0