Forum Libraries, Components, and Plugins
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Distortion on 3d ojbect in UrhoSharp

What I'm trying to do is implementing a 360 degree image viewer.
I'm using UrhoSharp and here are the steps of what I've done to view a 360 degree image:

  • Creating a 3d sphere model
  • Loading a 360 degree (Panorama) image
  • Set image as the Material of the Sphere

All the above steps are OK and I can see the flatten image from different view points but the problem is some kind of waves or distortions are in the image and the line which supposed to be straight are wavy. I don't know what setting could solve the problem, please help.

Here is the wavy outcome:

And here is my code:

private void CreateScene()
{
        // Scene
        var scene = new Scene();
        scene.CreateComponent<Octree>();


        // Node (Rotation and Position)
        var node = scene.CreateChild("room");
        node.Position = new Vector3(0, 0, 0);
        //node.Rotation = new Quaternion(10, 60, 10);
        node.SetScale(1f);

        // Model
        var modelObject = node.CreateComponent<StaticModel>();
        modelObject.Model = ResourceCache.GetModel("Models/Sphere.mdl");

        var zoneNode = scene.CreateChild("Zone");
        var zone = zoneNode.CreateComponent<Zone>();
        zone.SetBoundingBox(new BoundingBox(-300.0f, 300.0f));
        zone.AmbientColor = new Color(1f, 1f, 1f);

        //get image from byte[]

        //var url = "http://www.wsj.com/public/resources/media/0524yosemite_1300R.jpg";
        //var wc = new WebClient() { Encoding = Encoding.UTF8 };

        //var mb = new MemoryBuffer(wc.DownloadData(new Uri(url)));
        var mb = new MemoryBuffer(PanoramaBuffer.PanoramaByteArray);
        var image = new Image(Context) { Name = "MyImage" };
        image.Load(mb);

        //or from resource

        //var image = ResourceCache.GetImage("Textures/grave.jpg");
        var isFliped = image.FlipHorizontal();
        if (!isFliped)
        {
            throw new Exception("Unsuccessful flip");
        }
        var m = Material.FromImage(image);
        m.SetTechnique(0, CoreAssets.Techniques.DiffNormal, 0, 0);
        m.CullMode = CullMode.Cw;
        //m.SetUVTransform(Vector2.Zero, 0, 0);
        modelObject.SetMaterial(m);

        // Camera
        var cameraNode = scene.CreateChild("camera");
        var camera = cameraNode.CreateComponent<Camera>();
        camera.Fov = 75.8f;

        // Viewport
        Renderer.SetViewport(0, new Viewport(scene, camera, null));
    }

Best Answer

Answers

  • ShahramShobeiriShahramShobeiri USMember ✭✭

    @EgorBo
    I found out that distortions are triangles linearly interpolating their UVs and it could be solved by increasing the number of polygons in the sphere. But I don't know how to increase the number of polygons. Should I create a custom sphere and if yes, how can I do that. Would you please give me a sample code or recommend a proper document?

  • ShahramShobeiriShahramShobeiri USMember ✭✭
    Accepted Answer

    I've found the solution by asking the question in Urho3D forum, here is the discussion link:
    https://discourse.urho3d.io/t/distortion-on-3d-object/5166

  • prasanth1216prasanth1216 Member ✭✭

    @ShahramShobeiri Could you able to fix this issue? if yes, can you share the details?

  • ShahramShobeiriShahramShobeiri USMember ✭✭
    @prasanth1216 yes I could, just use a custom sphere with more polygons
  • prasanth1216prasanth1216 Member ✭✭

    @ShahramShobeiri said:
    @prasanth1216 yes I could, just use a custom sphere with more polygons

    Thanks @ShahramShobeiri for your response. I referred this link (Xamarin-Forms-Panorama-Test) to show image in panorama view(360 degree) and used the existing sphere.mdl and not sure about the creating custom models. Could you help me to understand the steps to create a custom sphere with more polygons?

  • ShahramShobeiriShahramShobeiri USMember ✭✭

    @prasanth1216 You can create a new model in a tool like Blender and export it to MDL format by a add-in and use the new model in your code.
    Here is my smooth enough model: Smooth Sphere
    Just add it to your Android or iOS project and use it like this:

        private void CreateScene()
        {
            // Scene
            var scene = new Scene();
            scene.CreateComponent<Octree>();
    
    
            // Node (Rotation and Position)
            var node = scene.CreateChild("room");
            node.Position = new Vector3(0, 0, 0);
            //node.Rotation = new Quaternion(10, 60, 10);
            node.SetScale(1f);
    
            // Model
            var modelObject = node.CreateComponent<StaticModel>();
            modelObject.Model = ResourceCache.GetModel("CustomModels/SmoothSphere.mdl");
    
            var zoneNode = scene.CreateChild("Zone");
            var zone = zoneNode.CreateComponent<Zone>();
            zone.SetBoundingBox(new BoundingBox(-300.0f, 300.0f));
            zone.AmbientColor = new Color(1f, 1f, 1f);
    
            //get image from byte[]
    
            //var url = "http://www.wsj.com/public/resources/media/0524yosemite_1300R.jpg";
            //var wc = new WebClient() { Encoding = Encoding.UTF8 };
    
            //var mb = new MemoryBuffer(wc.DownloadData(new Uri(url)));
            var mb = new MemoryBuffer(PanoramaBuffer.PanoramaByteArray);
            var image = new Image(Context) { Name = "MyImage" };
            image.Load(mb);
    
            //or from resource
    
            //var image = ResourceCache.GetImage("Textures/grave.jpg");
            var isFliped = image.FlipHorizontal();
            if (!isFliped)
            {
                throw new Exception("Unsuccessful flip");
            }
            var m = Material.FromImage(image);
            m.SetTechnique(0, CoreAssets.Techniques.DiffNormal, 0, 0);
            m.CullMode = CullMode.Cw;
            //m.SetUVTransform(Vector2.Zero, 0, 0);
            modelObject.SetMaterial(m);
    
            // Camera
            var cameraNode = scene.CreateChild("camera");
            _camera = cameraNode.CreateComponent<Camera>();
            _camera.Fov = 75.8f;
            _initialZoom = _camera.Zoom;
    
            // Viewport
            Renderer.SetViewport(0, new Viewport(scene, _camera, null));
        }
    
  • prasanth1216prasanth1216 Member ✭✭

    @ShahramShobeiri said:
    @prasanth1216 You can create a new model in a tool like Blender and export it to MDL format by a add-in and use the new model in your code.
    Here is my smooth enough model: Smooth Sphere
    Just add it to your Android or iOS project and use it like this:

        private void CreateScene()
        {
            // Scene
            var scene = new Scene();
            scene.CreateComponent<Octree>();
    
    
            // Node (Rotation and Position)
            var node = scene.CreateChild("room");
            node.Position = new Vector3(0, 0, 0);
            //node.Rotation = new Quaternion(10, 60, 10);
            node.SetScale(1f);
    
            // Model
            var modelObject = node.CreateComponent<StaticModel>();
            modelObject.Model = ResourceCache.GetModel("CustomModels/SmoothSphere.mdl");
    
            var zoneNode = scene.CreateChild("Zone");
            var zone = zoneNode.CreateComponent<Zone>();
            zone.SetBoundingBox(new BoundingBox(-300.0f, 300.0f));
            zone.AmbientColor = new Color(1f, 1f, 1f);
    
            //get image from byte[]
    
            //var url = "http://www.wsj.com/public/resources/media/0524yosemite_1300R.jpg";
            //var wc = new WebClient() { Encoding = Encoding.UTF8 };
    
            //var mb = new MemoryBuffer(wc.DownloadData(new Uri(url)));
            var mb = new MemoryBuffer(PanoramaBuffer.PanoramaByteArray);
            var image = new Image(Context) { Name = "MyImage" };
            image.Load(mb);
    
            //or from resource
    
            //var image = ResourceCache.GetImage("Textures/grave.jpg");
            var isFliped = image.FlipHorizontal();
            if (!isFliped)
            {
                throw new Exception("Unsuccessful flip");
            }
            var m = Material.FromImage(image);
            m.SetTechnique(0, CoreAssets.Techniques.DiffNormal, 0, 0);
            m.CullMode = CullMode.Cw;
            //m.SetUVTransform(Vector2.Zero, 0, 0);
            modelObject.SetMaterial(m);
    
            // Camera
            var cameraNode = scene.CreateChild("camera");
            _camera = cameraNode.CreateComponent<Camera>();
            _camera.Fov = 75.8f;
            _initialZoom = _camera.Zoom;
    
            // Viewport
            Renderer.SetViewport(0, new Viewport(scene, _camera, null));
        }
    

    @ShahramShobeiri : Great! Thanks a lot. Appreciate your quick response. I'll certainly check this and let you know.

  • prasanth1216prasanth1216 Member ✭✭

    @ShahramShobeiri : I checked the solution with the mdl file you provided. It has fixed the issues and working fine. Thanks a lot for your help.

Sign In or Register to comment.