360 Degree Spherical photos are good to capture all around in that moment. In this post here we give a simple example to display this pictures in eyeview with ability to rotate in any angle. This method can be used on drawings or generated drawings too. In this method we use a 3D environment, we put the camera to the center of this environment and we put a 3D Sphere with a texture which has this 360 spherical photo image.
These photos are taken by rotating camera sensors, or by two sided camera sensors, or by spherical sensors. This is good to display something wrapping around us. This method can be used on some simple 3D games, space simulations, inner views of cars, 360 degree photos, some applications might have this space as a menu or presenting a 3D shape in an environment. In addition to 360 degree spherical photos, as in this method; panoramic photos can be displayed as in here by using elliptic spheres , or cylinders in our 3D environment.
This spherical images are like wrapped images on a sphere, and it can be raw image, it’s image format should be bmp, jpg or png format first to display.
As shown above, we can display 360 photos like this photo in our applications. Directly by using Image (TImage) component in your C++ Builder applications as here.
|
1 2 3 |
Image1->Bitmap->LoadFromFile("D:\\test.bmp"); |
On the other side, if you want to see this image from the eye view, like you are sitting and looking around in the center of this environment; you should mathematically calculate the view portion in this image in that 3D XYZ degrees and you should copy this by calculations to a new 2D projection image for the eye . This might be little bit hard, but we can do this easily by using a 3D environment.
In C++ Builder we can develop this easily.by using ViewPort3D , Sphere, Camera Component, Light, and A LightMaterialSource with Bitmap Texture of our photo. Let’s develop a simple 3D View example.
In C++ Builder or in RAD Studio, first create a new on a Multi-Platform FireMonkey Project. Drag ViewPort3D , Sphere, Dummy Object, Camera Component, Light, and A LightMaterialSource from Palette at the right side to the Form. Arrange Viewport3D in an appropriate position. Drag Light and LightMaterialSource in to Sphere as in this structure;
In LightMaterialSource there is Texture property as shown above. Add you 360 deg photo as a image of this material. You can its arrange properties as given there too. Camera Position should be 0,0,-5 XYZ respectively and Sphere
In LightMaterialSource there is Texture property as shown above. Add you 360 deg photo as a image of this material. You can its arrange properties as given there too. Camera Position should be 0,0,-5 XYZ respectively.
Our Sphere will be used to display this image as a wrap on it. It should be big enough in appropriate with our photo image For example it’s Width, Depth, Height can be 64,64,64. Sphere XYZ position should be 0,0,0. Set SubDivisionAxes 16,32 or more and same on SubDivisionHeight. Normally textures are wrapped on the outer side of sphere, to see it from inside we must check TwoSide=True. Set its LightMaterialSource to LightMaterialSource. An example sphere parameters are given as below.
Now we have two options, we can rotate the camera or we can rotate the sphere. We will rotate camera here by the mouse pointer movement. To do this, go to Event Properties of Form, Double click on OnMouseMove, OnResize and add codes as below to rotate the camera by mouse.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
//--------------------------------------------------------------------------- #include <fmx.h> #pragma hdrstop #include "Deg360_Unit1.h" //--------------------------------------------------------------------------- #pragma package(smart_init) #pragma resource "*.fmx" TForm1 *Form1; int OX, OY; //--------------------------------------------------------------------------- __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { } //--------------------------------------------------------------------------- void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift, float X, float Y) { Label1->Text=FloatToStr(X)+":"+FloatToStr(Y); Dummy1->RotationAngle->Y = (X-OX)*0.2; Camera1->RotationAngle->X = (OY-Y)*0.2; } //--------------------------------------------------------------------------- void __fastcall TForm1::FormResize(TObject *Sender) { OX = Form1->Width/2.0; OY = Form1->Height/2.0; } //--------------------------------------------------------------------------- |
Note that LX, LY are last X,Y mouse pointer positions, and here defined globally. You can define this in TForm class too.
