読者です 読者をやめる 読者になる 読者になる

3Dビューワー

Flex AIR Android


Optimus Pad L-06C等の2眼カメラで撮った映像を赤青のレイヤーを使用して合成してAndroid端末で3Dが見えるようにします。
Optimus Padで撮影した動画はこのように1つの画面に2つの映像が入る形式ですので、Flash側で左半分と右半分を切り取って1つの動画にしてあげます。

こんな動画を

こんな感じに

ソースはこちら

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  backgroundColor="0x333333"
               xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="application1_creationCompleteHandler(event)">
    <fx:Style source="video3dTest.css"/>
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import org.osmf.events.TimeEvent;
            private var mat:Matrix = new Matrix();
            private var bd0:BitmapData = new BitmapData(160 , 240 );
            private var bd1:BitmapData = new BitmapData(160 , 240 );
            private var bd3:BitmapData = new BitmapData( 160 , 240 );
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                mat.tx = -160;
            }
            //メガネで見る用
            private function setImage():void
            {
                bd0.draw( myMovie );
                bd0.draw( myImageCover0 , null , null , "screen" );
                myImage0.source = new Bitmap( bd0 );
                bd1.draw( myMovie , mat );
                bd1.draw( myImageCover1 ,null , null , "screen" );
                myImage1.source = new Bitmap( bd1 );
                bd3.draw( myImage0);
                bd3.draw( myImage1 ,null,null,"multiply");
                myImage3.source = new Bitmap( bd3 );
            }
            protected function button1_clickHandler(event:MouseEvent):void
            {
                btn.visible = false;
                isPlaying = true;
                this.addEventListener(Event.ENTER_FRAME , onTimer );
            }
            private function onTimer( e:Event ):void
            {
                myMovie.play();
                setImage();
            }
            protected function myMovie_completeHandler(event:TimeEvent):void
            {
                this.removeEventListener(Event.ENTER_FRAME , onTimer );
                btn.visible = true;
                isPlaying = false;
            }
            private var isPlaying:Boolean = false;
            protected function myImage3_clickHandler(event:MouseEvent):void
            {
                if( isPlaying){
                    myMovie.pause();
                    isPlaying = false;
                }else{
                    myMovie.play();
                    isPlaying = true;
                }
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
    </fx:Declarations>
    <s:VideoDisplay complete="myMovie_completeHandler(event)"  id="myMovie" source="movie.flv" width="320" height="240" visible="false"/>
    <s:Image id="myImageCover1" width="320" height="240" source="@Embed('red.jpg')" visible="false"/>
    <s:Image id="myImageCover0" width="320" height="240" source="@Embed('blue.jpg')" visible="false"/>
    <s:Image id="myImage3" verticalCenter="0" horizontalCenter="0" width="160" height="240" scaleX="{this.width/myImage3.width*0.8}" scaleY="{myImage3.scaleX*0.8}"
             click="myImage3_clickHandler(event)" buttonMode="true"/>
    <s:HGroup>
    <s:Image id="myImage0" width="160" height="240" scaleX="0.5" scaleY="0.5"/>
    <s:Image id="myImage1" width="160" height="240" scaleX="0.5" scaleY="0.5"/>
    </s:HGroup>
    <s:Button id="btn" bottom="20" width="209" label="再生" click="button1_clickHandler(event)"
              horizontalCenter="0"/>
</s:Application>

どうにもこうにも重いのとうまく赤青で合成してくれてない気がするのでだれか改造してほしいなぁ。

参考リンク

赤青メガネで物体をさらに立体的に
PaperVision3Dでの赤青メガネで3D