Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Silverlight 3で強化されたグラフィックとメディア機能

Silverlight 3徹底入門(6)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 Silverlight 3では擬似的な3次元表現、ビットマップ描画APIの提供、画像に対して特殊加工を行うピクセルシェーダーのサポートといった機能を標準でサポートし、限定的ではありますが画像の描画にGPUを利用することで描画のパフォーマンスの向上も図られています。今回は、それらのメディア関連の新機能について説明します。

目次

はじめに

 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)で変換したものです。

[リスト1]RotateTransformを利用した要素の変換(Transform.xaml)
<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をバインドしています。スライダーを動かすと四角形のアングルを動的に変更できます。

図1:[リスト1]の実行結果
図1:[リスト1]の実行結果

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

バックナンバー

連載:Silverlight 3徹底入門

もっと読む

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5