Photodome for 3d 360

Questions
1

This program does not display the photo it should be accessing. You can look at the photo on the web. It is 3D 360 topbottom 3840x3840. I did not have better luck with a 1920x1920 version of the photo. (Videos are working now. Thx.)

Please help!!! Thanks.
This doesn’t seem to be showing the code??? I’ll post the code on www.qporitxr.com/kit/photo.txt or run it at www.qporitxr.com/kit/photo.html. The photo is at www.qporitxr.com/kit/photo.jpg.

Blockquote

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Babylon Template</title>

     <link rel="stylesheet" href="styles.css">

    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

<canvas id="renderCanvas" touch-action="none"></canvas>

Blockquote

2

Hello can you repro in the plaground? i suspect it is a CORS issue as the source server should block calls from other origins

3

I do not think it is a CORS issue. The same problem happens with everything locally.

I believe there are at least two problems:

  1. PhotoDome does not seem to work at all for a 3840x3840 file; (I need the high resolution). For a smaller file 480x480 I get the photo to show. It seems to start showing at a resolution somewhere in between.

  2. MODE_TOPBOTTOM does not work for photodome. It works now for videodome.

Thx.

CODE: To test this code, substitute your hi res file (to test resolutions) and your 3D 360 top/bottom photo to test MODE_TOPBOTTOM. It should play locally or online.

      var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
      var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine


          /******* START: the create scene function ******/   
                                          
          var createScene = function () 
          {
                var scene = new BABYLON.Scene(engine);
                var camera = new BABYLON.ArcRotateCamera
                    ("camera", -Math.PI / 2, Math.PI / 4, 3, 
                        new BABYLON.Vector3(0, 3, 0), scene
                    );
                var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false}); 
                vrHelper.enableInteractions();
                
                camera.attachControl(canvas, true);
                scene.activeCamera.beta += 0.8;

  
                var dome = new BABYLON.PhotoDome
                (
                   "testdome",
                   "Credits-3dss.jpg", //480x480 3D top/bottom
                   {
                      resolution: 32,
                      size: 1000,
                      useDirectMapping: false
                   },
                scene
                );
                //dome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;


                return scene;
             };
          /******* End of the create scene function ******/    

          var scene = createScene(); //Call the createScene function

         // Register a render loop to repeatedly render the scene
         engine.runRenderLoop(function () { 
            scene.render();
         });

         // Watch for browser/canvas resize events
         window.addEventListener("resize", function () { 
            engine.resize();
         });
4

Well the texture size is not a babylon.js limitation but a webgl limitation and we can’t do nothing about it.

Can you repro the topBottom issue on the PG?

5

I tried to repro but it works for me:
https://www.babylonjs-playground.com/#SM3YHE

6

Thanks. This helped. I still have not quite got what I need, but I can make progress now!

1 Like