はじめに
Silverlightはもともとビデオ再生や画像の処理を得意としていましたが、Silverlight 3では擬似的な3次元表現、ビットマップ描画APIの提供、画像に対して特殊加工を行うピクセルシェーダーのサポートといった機能を標準でサポートし、限定的ではありますが画像の描画にGPUを利用することで描画のパフォーマンスの向上も図られています。
今回はSilverlight 3で追加されたメディア関連の新機能について、概要を説明します。
Silverlightとメディア
Silverlightは登場以来、「Silverlightと言えば高品質な動画配信、DRMを利用した動画の保護、コンテンツとメディアの統合」というようにメディアのサポートが大きく取り上げられてきました。
Silverlight 3でも同様に高品質なメディアを扱うための拡張が行われています。
新しいコーデックのサポート
Silverlight 3では、従来のコーデックに追加してMPEG4を再生するための高品質なコーデックであるH.264/AACがサポートされ、さらに高品質な動画の再生が行えるようになっています。Silverlight 3でサポートされる動画形式の詳しい説明は、MSDNがサポートしているメディア形式、プロトコル、およびログフィールドを参照ください。
ライブスムースストリーミングのサポート
筆者はSilverlight 3の段階で、他のRIAプラットフォームと比べてもっとも違いが顕著なのがSilverlightのスムースストリーミングのサポートだと思っています。これはクライアントの帯域やCPUの状況に応じて動画のビットレートを調整して再生を行う技術です。世界的には、昨年のマイケル・ジャクソンのメモリアルライブやアメリカ大統領の就任挨拶などが、スムースストリーミングを利用して放映されたことが記憶に新しいでしょう。
スムースストリーミングに関しては以下のIIS.NETのサイトでサンプルが公開されています。このサンプルでは、帯域の状況によってビットレートが変更になりながらも、高品質な動画がスムーズに再生できていることが確認できます。
ライブスムースストリーミングは、この帯域幅の自動調整の機能をライブ中継に適応した技術です。ライブスムースストリーミングでライブ中継を行うことで、動画を見る側の環境に最適化された状態でライブ中継を観覧することができ、少し気になることがあれば動画を巻き戻して追っかけ再生できます。
ライブスムースストリーミングの詳しい説明は、TechNetのLive Smooth Streamingを参照ください。
遠近法変換を利用した疑似3D効果の適用
Silverlight 3では、遠近法変換（Projection）と呼ばれる変換をUI要素に適用することで、擬似的な3D効果をつけることが可能になりました。
これまでの変換
Silverlight 2までもUI要素のTransformプロパティに変換方法を指定することで、回転（RotateTransform）、拡大縮小（ScaleTransform）、傾斜（SkewTransform）、平行移動（TranslateTransform）といった簡単な変換は行うことが可能でした。［リスト1］は画面に配置された四角形を回転（RotateTranform）で変換したものです。
<StackPanel Margin="5">
<Rectangle Width="50" Height="50" Fill="Red" />
<TextBlock Text="変換なしの状態" />
</StackPanel>
<StackPanel Margin="5">
<Rectangle Width="50" Height="50" Fill="Blue">
<!-- 四角形を60度回転 -->
<Rectangle.RenderTransform>
<RotateTransform x:Name="transform" Angle="60" CenterX="25" CenterY="25" />
</Rectangle.RenderTransform>
</Rectangle>
<Slider Minimum="0" Maximum="360"
Value="{Binding ElementName=transform, Mode=TwoWay, Path=Angle}"/>
<TextBlock Text="回転での変換" />
</StackPanel>
この例では、長さ50の四角形の中心（CenterX="25" CenterY="25"）で、60度（Angle="60"）回転（RotateTransform）させた例です。実行すると変換前の四角形と変換（回転）後の四角形を確認できると思います（図1）。また、青い四角形の下にあるスライダーにはスライダーの値とRotateTransformのAngleをバインドしています。スライダーを動かすと四角形のアングルを動的に変更できます。
