New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Cardboard mode viewing of Spatial -> 3D scenes #369

Closed
MBARIMike opened this Issue Aug 29, 2016 · 60 comments

Comments

Projects
None yet
5 participants
@MBARIMike
Contributor

MBARIMike commented Aug 29, 2016

The STOQS UI has an experimental "Enter VR" mode that has been tested with the Oculus Rift DK2. Much of this code (Javascript in the main template page) can be reused for implementing a "Cardboard" mode that will work on smart phones and other VR headsets.

See http://examples.x3dom.org/Demos/ClassroomVR/classroom-cardboard.html for a working example.

Also see https://webvr.info/, whose goal is to have one Javascript API for all VR devices.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Sep 7, 2016

Contributor

Welcome @bilalsattar24, @juanv911, and @leo831! It will be great to have this feature in STOQS. I'm glad that you chose this issue for your capstone project. Please use this thread to ask any questions and report any progress.

Contributor

MBARIMike commented Sep 7, 2016

Welcome @bilalsattar24, @juanv911, and @leo831! It will be great to have this feature in STOQS. I'm glad that you chose this issue for your capstone project. Please use this thread to ask any questions and report any progress.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike
Contributor

MBARIMike commented Oct 8, 2016

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Oct 18, 2016

Contributor

I see that @juanv911 submitted Pull Request #420. That's great! Can @bilalsattar24 or @leo831 provide any comments here on how this works? (It will be a few weeks before I can test the proposed code changes.)

Contributor

MBARIMike commented Oct 18, 2016

I see that @juanv911 submitted Pull Request #420. That's great! Can @bilalsattar24 or @leo831 provide any comments here on how this works? (It will be a few weeks before I can test the proposed code changes.)

@bilalsattar24

This comment has been minimized.

Show comment
Hide comment
@bilalsattar24

bilalsattar24 Oct 19, 2016

Contributor

This pull request was a mistake. We aren't quite ready for a pull request yet. But the changes we've made so far includes some code to generate a 3d human model we found online in x3d format. It generates the image and we can move it around on desktop, but it does't render properly on mobile. The current Oculus example includes the 3d images in .bin format and we're working towards using those .bin graphics. Sorry about the accidental pull request.

Contributor

bilalsattar24 commented Oct 19, 2016

This pull request was a mistake. We aren't quite ready for a pull request yet. But the changes we've made so far includes some code to generate a 3d human model we found online in x3d format. It generates the image and we can move it around on desktop, but it does't render properly on mobile. The current Oculus example includes the 3d images in .bin format and we're working towards using those .bin graphics. Sorry about the accidental pull request.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Oct 28, 2016

Contributor

Hey Mike,
We have been constantly working on implementing the classroom cardboard example inside the STOQS interface, but we still haven't got the 3D scenes to rotate from a mobile device. When we disable the Javascript for that part, it renders the left and right 3D scenes in a square vertical split screen in mobile devices, but it doesn't rotate. When we enable the Javascript, X3DOM keeps loading to zero but it doesn't render anything. We checked out the WebVR framework, but we don't see how we could implement it on STOQS since STOQS uses .x3d files and WebVR doesn't have any example or description about .x3d files, also WebVR seems to only work on Chrome, Firefox, but not in Safari, while the classroom example seems to work on all browsers. When we added the HTML elements for Cardboard, we added the GeoViewpoint HTML tag from the Oculus Rift html section. In the cardboard example, the variable viewpoint takes the id from the viewpoint html tag, while in the STOQS enable_vr function uses the id from geoviewpoint instead. We are still trying to figure out if the problem is in the x3dom HTML tags or in the Javascript.

We have been submitting our code to this branch.

Contributor

juanv911 commented Oct 28, 2016

Hey Mike,
We have been constantly working on implementing the classroom cardboard example inside the STOQS interface, but we still haven't got the 3D scenes to rotate from a mobile device. When we disable the Javascript for that part, it renders the left and right 3D scenes in a square vertical split screen in mobile devices, but it doesn't rotate. When we enable the Javascript, X3DOM keeps loading to zero but it doesn't render anything. We checked out the WebVR framework, but we don't see how we could implement it on STOQS since STOQS uses .x3d files and WebVR doesn't have any example or description about .x3d files, also WebVR seems to only work on Chrome, Firefox, but not in Safari, while the classroom example seems to work on all browsers. When we added the HTML elements for Cardboard, we added the GeoViewpoint HTML tag from the Oculus Rift html section. In the cardboard example, the variable viewpoint takes the id from the viewpoint html tag, while in the STOQS enable_vr function uses the id from geoviewpoint instead. We are still trying to figure out if the problem is in the x3dom HTML tags or in the Javascript.

We have been submitting our code to this branch.

@leo831

This comment has been minimized.

Show comment
Hide comment
@leo831

leo831 Nov 3, 2016

Contributor

Hey Mike,
We did a pull request #422. Once you click on the Cardboard button it will go to full screen and it will display two images left and right for the Google Cardboard. Right know we can rotate the images using the sensor from Chrome. But there are still some issues. One of the issues is that once you click Cardboard button it will go to full screen but the images does not appear in the center, to see the images you have to rotate them. Another issue is that we are not able to load the images on the smartphone it just keeps on loading but nothing happens.

Contributor

leo831 commented Nov 3, 2016

Hey Mike,
We did a pull request #422. Once you click on the Cardboard button it will go to full screen and it will display two images left and right for the Google Cardboard. Right know we can rotate the images using the sensor from Chrome. But there are still some issues. One of the issues is that once you click Cardboard button it will go to full screen but the images does not appear in the center, to see the images you have to rotate them. Another issue is that we are not able to load the images on the smartphone it just keeps on loading but nothing happens.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 4, 2016

Contributor

I tested your PR and it kind of works! I think we can iterate together a few times over the next few weeks to help make it ready for merging into master and be available for easier testing on http://stoqs.mbari.org:8000/. I'll make some comments on your code in #422.

Contributor

MBARIMike commented Nov 4, 2016

I tested your PR and it kind of works! I think we can iterate together a few times over the next few weeks to help make it ready for merging into master and be available for easier testing on http://stoqs.mbari.org:8000/. I'll make some comments on your code in #422.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 7, 2016

Contributor

Hey Mike,
I added the bind attribute to the GeoViewpoint using these three lines. I put those lines inside the else statement after comparing if it is cardboarded. It works, but not on the first click. On the first click on Enter VR it shows the two small objects in the middle, when I click Leave VR, the size of the object increases, and when I click again on the Enter VR, it takes the user to the middle of the scene. I don't know why it is not taking the user to the middle of the scene on the first click, I tried putting those lines right after the click, but it didn't work. Now, the sensors don't seem to rotate the scene also. Also, it seems that my commit didn't pass two of the three checks.
$('#mp-x3d-geoviewpoint1').attr('bind','true');
$('#mp-x3d-geoviewpoint1').attr('position', $('body').data()['extent'][2] + ' ' + $('body').data()['extent'][1] + ' 100');
$('#mp-x3d-geoviewpoint1').attr('orientation', '0 0 1 0');

Contributor

juanv911 commented Nov 7, 2016

Hey Mike,
I added the bind attribute to the GeoViewpoint using these three lines. I put those lines inside the else statement after comparing if it is cardboarded. It works, but not on the first click. On the first click on Enter VR it shows the two small objects in the middle, when I click Leave VR, the size of the object increases, and when I click again on the Enter VR, it takes the user to the middle of the scene. I don't know why it is not taking the user to the middle of the scene on the first click, I tried putting those lines right after the click, but it didn't work. Now, the sensors don't seem to rotate the scene also. Also, it seems that my commit didn't pass two of the three checks.
$('#mp-x3d-geoviewpoint1').attr('bind','true');
$('#mp-x3d-geoviewpoint1').attr('position', $('body').data()['extent'][2] + ' ' + $('body').data()['extent'][1] + ' 100');
$('#mp-x3d-geoviewpoint1').attr('orientation', '0 0 1 0');

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 9, 2016

Contributor

Hi Juan,

I think you are really close. When you assign to CARDBOARD.viewpoint use mp-x3d-geoviewpoint1 instead of mp-x3d-viewpoint1 as that viewpoint is in the middle of the scene and is better for receiving headset orientation changes. To bind to that viewpoint look at this tutorial on the x3dom site: http://doc.x3dom.org/tutorials/animationInteraction/viewpoint/index.html. The continuous integration tests failed because a required package needed an update, which I merged in today. You should do a git pull upstream master and commit and push your changes.

Contributor

MBARIMike commented Nov 9, 2016

Hi Juan,

I think you are really close. When you assign to CARDBOARD.viewpoint use mp-x3d-geoviewpoint1 instead of mp-x3d-viewpoint1 as that viewpoint is in the middle of the scene and is better for receiving headset orientation changes. To bind to that viewpoint look at this tutorial on the x3dom site: http://doc.x3dom.org/tutorials/animationInteraction/viewpoint/index.html. The continuous integration tests failed because a required package needed an update, which I merged in today. You should do a git pull upstream master and commit and push your changes.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 9, 2016

Contributor

I suggest renaming the Enter VR/Leave VR buttons.

Instead of:

Cardboard: <Enter VR> Experimental: <Enter VR>

make it:

Experimental: <Cardboard>/<Leave Cardboard> <Rift>/<Leave Rift>
Contributor

MBARIMike commented Nov 9, 2016

I suggest renaming the Enter VR/Leave VR buttons.

Instead of:

Cardboard: <Enter VR> Experimental: <Enter VR>

make it:

Experimental: <Cardboard>/<Leave Cardboard> <Rift>/<Leave Rift>
@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 9, 2016

Contributor

Hi Mike,

I changed the id of CARDBOARD.viewpoint to mp-x3d-geoviewpoint1, it still doesn't show the whole scene on the first click. We were using mp-x3d-viewpoint1 because that's what they were using in the classroom example. I tried including the GeoViewpoint tag in the classroom example, but it wouldn't allow me to rotate the scene, so I thought we only needed mp-x3d-viewpoint1 for rotating the scene. The viewpoint tutorial only mentions binding to the id of a viewpoint html tag, so do we have to bind to mp-x3d-viewpoint1 at some point?

We will keep working on it and we will synchronize with upstream and submit our commit tomorrow after our group meeting.

Contributor

juanv911 commented Nov 9, 2016

Hi Mike,

I changed the id of CARDBOARD.viewpoint to mp-x3d-geoviewpoint1, it still doesn't show the whole scene on the first click. We were using mp-x3d-viewpoint1 because that's what they were using in the classroom example. I tried including the GeoViewpoint tag in the classroom example, but it wouldn't allow me to rotate the scene, so I thought we only needed mp-x3d-viewpoint1 for rotating the scene. The viewpoint tutorial only mentions binding to the id of a viewpoint html tag, so do we have to bind to mp-x3d-viewpoint1 at some point?

We will keep working on it and we will synchronize with upstream and submit our commit tomorrow after our group meeting.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 9, 2016

Contributor

Here's how I modified your code to bind to the mp-x3d-geoviewpoint1 viewpoint:

CARDBOARD.viewpoint = document.getElementById('mp-x3d-geoviewpoint1');
CARDBOARD.viewpoint.setAttribute('set_bind','true');

Also, if you don't see anything in the scene try pressing Page Down to cycle through the viewpoints. (I suspect that there is a bug where near and far clipping planes are not being properly set if the viewpoints are switched.)

Contributor

MBARIMike commented Nov 9, 2016

Here's how I modified your code to bind to the mp-x3d-geoviewpoint1 viewpoint:

CARDBOARD.viewpoint = document.getElementById('mp-x3d-geoviewpoint1');
CARDBOARD.viewpoint.setAttribute('set_bind','true');

Also, if you don't see anything in the scene try pressing Page Down to cycle through the viewpoints. (I suspect that there is a bug where near and far clipping planes are not being properly set if the viewpoints are switched.)

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 9, 2016

Contributor

With those new changes, it shows the center of the scene, but only on Safari and Firefox. In Chrome it shows the scene very close, but not properly and yeah when Leaving Cardboard, it doesn't reset back to the initial size. By near and far clipping planes, are you referring to the zFar and zNear attributes?

Contributor

juanv911 commented Nov 9, 2016

With those new changes, it shows the center of the scene, but only on Safari and Firefox. In Chrome it shows the scene very close, but not properly and yeah when Leaving Cardboard, it doesn't reset back to the initial size. By near and far clipping planes, are you referring to the zFar and zNear attributes?

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 9, 2016

Contributor

Yes. zFar and zNear define the clipping planes. They are changed in order to see objects that are close to the viewpoint. I think #422 is almost ready for merging. Please take a look at https://github.com/stoqs/stoqs/pull/422/files and clean up any white space differences from the original. We want to see only the relevant changes in the diff.

Contributor

MBARIMike commented Nov 9, 2016

Yes. zFar and zNear define the clipping planes. They are changed in order to see objects that are close to the viewpoint. I think #422 is almost ready for merging. Please take a look at https://github.com/stoqs/stoqs/pull/422/files and clean up any white space differences from the original. We want to see only the relevant changes in the diff.

@bilalsattar24

This comment has been minimized.

Show comment
Hide comment
@bilalsattar24

bilalsattar24 Nov 9, 2016

Contributor

The formatting/whitespaces have been taken care of. The diff looks much cleaner now.

Contributor

bilalsattar24 commented Nov 9, 2016

The formatting/whitespaces have been taken care of. The diff looks much cleaner now.

stoqs added a commit that referenced this issue Nov 9, 2016

Merge pull request #422 from juanv911/master
X3DOM Google Cardboard headset rotation in support of #369
@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 9, 2016

Contributor

Congratulations! I just merged #422 and did a quick test on MBARI's production server. The viewpoint orientation was driven by my phone's orientation when I was in Cardboard mode. Good job!

There was one problem though: I could not rotate the normal mode scene with the mouse. It seems that the sensor update of the viewpoint orientation happens all the time. Please look at your code and see if you can put the sensor update portion in a place so that it gets executed only when cardboarded is true. Examine the code for how this is done for when rifted is true.

Contributor

MBARIMike commented Nov 9, 2016

Congratulations! I just merged #422 and did a quick test on MBARI's production server. The viewpoint orientation was driven by my phone's orientation when I was in Cardboard mode. Good job!

There was one problem though: I could not rotate the normal mode scene with the mouse. It seems that the sensor update of the viewpoint orientation happens all the time. Please look at your code and see if you can put the sensor update portion in a place so that it gets executed only when cardboarded is true. Examine the code for how this is done for when rifted is true.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 10, 2016

Contributor

Thanks
In our first commit we had the Javascript code inside a function called enable_cardboard() similar to enable_vr(). We removed it because it was throwing some errors after the document.onload = function () function. We will check and see if we can put the code inside a function again and execute it when it is triggered.

Contributor

juanv911 commented Nov 10, 2016

Thanks
In our first commit we had the Javascript code inside a function called enable_cardboard() similar to enable_vr(). We removed it because it was throwing some errors after the document.onload = function () function. We will check and see if we can put the code inside a function again and execute it when it is triggered.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 16, 2016

Contributor

Hi Mike,

I submitted #428. I created a function called enable_cardboard() and put the Javascript code there. I removed the document.onload = function () { because it was not grabbing the Javascript code that was inside of it. enable_cardboard() is called when cardboarded is true. It is still having the same problem in Chrome.

Contributor

juanv911 commented Nov 16, 2016

Hi Mike,

I submitted #428. I created a function called enable_cardboard() and put the Javascript code there. I removed the document.onload = function () { because it was not grabbing the Javascript code that was inside of it. enable_cardboard() is called when cardboarded is true. It is still having the same problem in Chrome.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 17, 2016

Contributor

I pulled what you have now in #428 to http://stoqs.mbari.org:8000/default where you should be able to test it with your phones. I did notice that the 'Leave Cardboard' button doesn't work.

Contributor

MBARIMike commented Nov 17, 2016

I pulled what you have now in #428 to http://stoqs.mbari.org:8000/default where you should be able to test it with your phones. I did notice that the 'Leave Cardboard' button doesn't work.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 18, 2016

Contributor

I was able to test it on my phone and it works on Firefox, but not in Chrome. When I add this line $('#mp-x3d-geoviewpoint1').attr("set_bind", "false"); it resets it to the initial size when clicking on Leave Cardboard. I added that line when cardboarded is false.

Contributor

juanv911 commented Nov 18, 2016

I was able to test it on my phone and it works on Firefox, but not in Chrome. When I add this line $('#mp-x3d-geoviewpoint1').attr("set_bind", "false"); it resets it to the initial size when clicking on Leave Cardboard. I added that line when cardboarded is false.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 18, 2016

Contributor

#428 has been pulled to http://stoqs.mbari.org:8000/default.

The 'Leave Cardboard' button now switches back to the original Viewpoint, but orientation data from the IMU is still being sent to the Viewpoint's orientation.

Contributor

MBARIMike commented Nov 18, 2016

#428 has been pulled to http://stoqs.mbari.org:8000/default.

The 'Leave Cardboard' button now switches back to the original Viewpoint, but orientation data from the IMU is still being sent to the Viewpoint's orientation.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 18, 2016

Contributor

Here are some screen shots from my iPhone (Mobile Safari):

img_6888
img_6889

Interestingly, turning the phone to landscape mode also rotates the scene. I don't think we want that to happen!

Contributor

MBARIMike commented Nov 18, 2016

Here are some screen shots from my iPhone (Mobile Safari):

img_6888
img_6889

Interestingly, turning the phone to landscape mode also rotates the scene. I don't think we want that to happen!

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 22, 2016

Contributor

According to http://caniuse.com/fullscreen the 'RequestFullScreen' call does not work for iOS Safari or the Android Browser. I think instead we can make use of the full screen button already implemented in the JavaScript (geo-zoom-lc-button). Also, some parent <div>s will need to have their padding set to 0px for the scene to fully fill the phone's screen.

Contributor

MBARIMike commented Nov 22, 2016

According to http://caniuse.com/fullscreen the 'RequestFullScreen' call does not work for iOS Safari or the Android Browser. I think instead we can make use of the full screen button already implemented in the JavaScript (geo-zoom-lc-button). Also, some parent <div>s will need to have their padding set to 0px for the scene to fully fill the phone's screen.

@leo831

This comment has been minimized.

Show comment
Hide comment
@leo831

leo831 Nov 22, 2016

Contributor

We edited the file to make the landscape mode work.

Contributor

leo831 commented Nov 22, 2016

We edited the file to make the landscape mode work.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 22, 2016

Contributor

Hi Mike,

I removed RequestFullScreen Javascript code and included the zoom-lc-button class in the Enable Cardboard button and set padding to 0px to .container-fluidand .accordion-inner

Contributor

juanv911 commented Nov 22, 2016

Hi Mike,

I removed RequestFullScreen Javascript code and included the zoom-lc-button class in the Enable Cardboard button and set padding to 0px to .container-fluidand .accordion-inner

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 22, 2016

Contributor

FYI, I made changes to the code running on http://stoqs.mbari.org:8000/default. Here is the diff from what I pulled before your last 2 commits:

$ git diff
diff --git a/stoqs/stoqs/templates/stoqs/stoqsquery.html b/stoqs/stoqs/templates/stoqs/stoqsquery.html
index 0cd1c6e..9baac2f 100644
--- a/stoqs/stoqs/templates/stoqs/stoqsquery.html
+++ b/stoqs/stoqs/templates/stoqs/stoqsquery.html
@@ -2737,7 +2737,7 @@
     });


-    $(".zoom-lc-button").click(function(element) {
+    $(".zoom-lc-button .cardboard-button").click(function(element) {
         if (lcZoomed) {
             if ($('.stoqs-zoom-width').hasClass('span12')) {
                 $('.stoqs-zoom-width').removeClass('span12');
@@ -2794,7 +2794,7 @@
                                                         'position': 'fixed'
                                                       });
             }
-            if (this.id == 'geo-zoom-lc-button') {
+            if (this.id == 'geo-zoom-lc-button' || this.id == 'geo-cardboard-button') {
                 $('#parameter-parameter-group').children().hide();
                 $('#spatial-anchor').parent().hide();
                 $('#spatialTabs').hide();
@@ -2914,7 +2914,7 @@ function enable_cardboard(){
     var q1 = new x3dom.fields.Quaternion.axisAngle(new x3dom.fields.SFVec3f(1,0,0),-Math.PI/2); // device orientation points upwards. rotate down to camera orientation

     q = q.multiply(q1);
-    // q = q.multiply(q0);
+    q = q.multiply(q0);

     var aa = q.toAxisAngle();

@@ -3237,6 +3237,7 @@ function enable_cardboard(){
             $('#mp-x3d-geoviewpoint1').attr('orientation', '1 0 0 -1.57');
             $(this).html('Enter Cardboard');
             $('#mp-x3d-geoviewpoint1').attr("set_bind", "false");
+            $('#spatial-3d-x3d-cardboard').runtime.exitFrame = function() {};
        }
         else {
            $('#spatial-3d-x3d-cardboard #spatial-3d-root').attr('render', 'true');
@@ -3246,13 +3247,11 @@ function enable_cardboard(){
             $('#mp-x3d-geoviewpoint1').attr('orientation', '0 0 1 0');
             $(this).html('Leave Cardboard');
             enable_cardboard();
-            var canvas = document.getElementsByTagName("canvas")[0];
-            if (canvas.webkitRequestFullscreen) {
-                canvas.webkitRequestFullscreen({ vrDisplay: vrHMD });
-            }
-            else if (canvas.mozRequestFullScreen) {
-                canvas.mozRequestFullScreen({ vrDisplay: vrHMD });
-            }
+
+            // Remove padding for full VR experience
+            $('#left-column').parent().parent().css( { 'padding': '0px' } );
+            $('#accordion1').css( { 'padding': '0px' } );
+            $('#collapseSpatial > div').css( { 'padding': '0px' } );
         }
         cardboarded =! cardboarded;
      });

You should change the padding as shown above.

Contributor

MBARIMike commented Nov 22, 2016

FYI, I made changes to the code running on http://stoqs.mbari.org:8000/default. Here is the diff from what I pulled before your last 2 commits:

$ git diff
diff --git a/stoqs/stoqs/templates/stoqs/stoqsquery.html b/stoqs/stoqs/templates/stoqs/stoqsquery.html
index 0cd1c6e..9baac2f 100644
--- a/stoqs/stoqs/templates/stoqs/stoqsquery.html
+++ b/stoqs/stoqs/templates/stoqs/stoqsquery.html
@@ -2737,7 +2737,7 @@
     });


-    $(".zoom-lc-button").click(function(element) {
+    $(".zoom-lc-button .cardboard-button").click(function(element) {
         if (lcZoomed) {
             if ($('.stoqs-zoom-width').hasClass('span12')) {
                 $('.stoqs-zoom-width').removeClass('span12');
@@ -2794,7 +2794,7 @@
                                                         'position': 'fixed'
                                                       });
             }
-            if (this.id == 'geo-zoom-lc-button') {
+            if (this.id == 'geo-zoom-lc-button' || this.id == 'geo-cardboard-button') {
                 $('#parameter-parameter-group').children().hide();
                 $('#spatial-anchor').parent().hide();
                 $('#spatialTabs').hide();
@@ -2914,7 +2914,7 @@ function enable_cardboard(){
     var q1 = new x3dom.fields.Quaternion.axisAngle(new x3dom.fields.SFVec3f(1,0,0),-Math.PI/2); // device orientation points upwards. rotate down to camera orientation

     q = q.multiply(q1);
-    // q = q.multiply(q0);
+    q = q.multiply(q0);

     var aa = q.toAxisAngle();

@@ -3237,6 +3237,7 @@ function enable_cardboard(){
             $('#mp-x3d-geoviewpoint1').attr('orientation', '1 0 0 -1.57');
             $(this).html('Enter Cardboard');
             $('#mp-x3d-geoviewpoint1').attr("set_bind", "false");
+            $('#spatial-3d-x3d-cardboard').runtime.exitFrame = function() {};
        }
         else {
            $('#spatial-3d-x3d-cardboard #spatial-3d-root').attr('render', 'true');
@@ -3246,13 +3247,11 @@ function enable_cardboard(){
             $('#mp-x3d-geoviewpoint1').attr('orientation', '0 0 1 0');
             $(this).html('Leave Cardboard');
             enable_cardboard();
-            var canvas = document.getElementsByTagName("canvas")[0];
-            if (canvas.webkitRequestFullscreen) {
-                canvas.webkitRequestFullscreen({ vrDisplay: vrHMD });
-            }
-            else if (canvas.mozRequestFullScreen) {
-                canvas.mozRequestFullScreen({ vrDisplay: vrHMD });
-            }
+
+            // Remove padding for full VR experience
+            $('#left-column').parent().parent().css( { 'padding': '0px' } );
+            $('#accordion1').css( { 'padding': '0px' } );
+            $('#collapseSpatial > div').css( { 'padding': '0px' } );
         }
         cardboarded =! cardboarded;
      });

You should change the padding as shown above.

@leo831

This comment has been minimized.

Show comment
Hide comment
@leo831

leo831 Nov 22, 2016

Contributor

Hi Mike,
we applied the changed for the padding that you mentioned on the preview message. The issue is that when you go to Fullscreen it does not cover the full screen it leaves a blank space at the bottom.

Contributor

leo831 commented Nov 22, 2016

Hi Mike,
we applied the changed for the padding that you mentioned on the preview message. The issue is that when you go to Fullscreen it does not cover the full screen it leaves a blank space at the bottom.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 22, 2016

Contributor

Hi Mike,

When I include || this.id == 'geo-cardboard-button' it goes into complete fullscreen, but when clicking Leave Cardboard the #geo-3dplot element stays in a fixed position. It floats on top of other elements.

Contributor

juanv911 commented Nov 22, 2016

Hi Mike,

When I include || this.id == 'geo-cardboard-button' it goes into complete fullscreen, but when clicking Leave Cardboard the #geo-3dplot element stays in a fixed position. It floats on top of other elements.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 22, 2016

Contributor

I'm getting nice results on http://stoqs.mbari.org:8000/default/ with full screen flush to the edges:

img_6891

I am also seeing problems with leaving Cardboard. This line:

$('#spatial-3d-x3d-cardboard').runtime.exitFrame = function() {}

should permit examine mode manipulation again, but the scene remains "frozen".

Contributor

MBARIMike commented Nov 22, 2016

I'm getting nice results on http://stoqs.mbari.org:8000/default/ with full screen flush to the edges:

img_6891

I am also seeing problems with leaving Cardboard. This line:

$('#spatial-3d-x3d-cardboard').runtime.exitFrame = function() {}

should permit examine mode manipulation again, but the scene remains "frozen".

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 22, 2016

Contributor

Hi Mike,

That line throws an undefined error in the console. When I add a zero to $('#spatial-3d-x3d-cardboard')[0] it runs without any errors.

$('#spatial-3d-x3d-cardboard')[0].runtime.exitFrame = function() {} 
Contributor

juanv911 commented Nov 22, 2016

Hi Mike,

That line throws an undefined error in the console. When I add a zero to $('#spatial-3d-x3d-cardboard')[0] it runs without any errors.

$('#spatial-3d-x3d-cardboard')[0].runtime.exitFrame = function() {} 
@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 22, 2016

Contributor

Good catch! Yes, that fixes the return back to Examine mode navigation.

Contributor

MBARIMike commented Nov 22, 2016

Good catch! Yes, that fixes the return back to Examine mode navigation.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 22, 2016

Contributor

The current #428 has been pulled to http://stoqs.mbari.org:8000/default.

Somehow the fullscreen button in the 3D view is totally disabled now. Perhaps due to the 'zoom-lc-button' being added to the class of 'geo-cardboard-button'?

Contributor

MBARIMike commented Nov 22, 2016

The current #428 has been pulled to http://stoqs.mbari.org:8000/default.

Somehow the fullscreen button in the 3D view is totally disabled now. Perhaps due to the 'zoom-lc-button' being added to the class of 'geo-cardboard-button'?

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 22, 2016

Contributor

In my localhost the fullscreen button it is still working, but I haven't add all the changes from the code you posted in one of the previous comments.

Contributor

juanv911 commented Nov 22, 2016

In my localhost the fullscreen button it is still working, but I haven't add all the changes from the code you posted in one of the previous comments.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 22, 2016

Contributor

In the line you edited $(".zoom-lc-button .cardboard-button") I think you are only using .cardboard-button I think there should be a comma between the two classes to use both.
$(".zoom-lc-button, .cardboard-button")

Contributor

juanv911 commented Nov 22, 2016

In the line you edited $(".zoom-lc-button .cardboard-button") I think you are only using .cardboard-button I think there should be a comma between the two classes to use both.
$(".zoom-lc-button, .cardboard-button")

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 22, 2016

Contributor

I have almost added all the changes. After adding the comma, it fixes the fullscreen button, but it causes the #geo-3dplo to stay in a fixed position because there are two if (this.id == 'geo-zoom-lc-button') statements, but you added || this.id == 'geo-cardboard-button to only one of the two if statements.

Contributor

juanv911 commented Nov 22, 2016

I have almost added all the changes. After adding the comma, it fixes the fullscreen button, but it causes the #geo-3dplo to stay in a fixed position because there are two if (this.id == 'geo-zoom-lc-button') statements, but you added || this.id == 'geo-cardboard-button to only one of the two if statements.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 22, 2016

Contributor

I have pushed the latest changes.

Contributor

juanv911 commented Nov 22, 2016

I have pushed the latest changes.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 23, 2016

Contributor

Current #428 has been pulled to http://stoqs.mbari.org:8000/default.

Looking pretty good! I suggest removing ' auto' from this line so that extra white space isn't added below the scene:

<X3D id="spatial-3d-x3d-cardboard" style="width:100%;height:100%;margin:0px auto;display:block;border:none;" ondownloadsfinished="downloadsFinished(event)">
Contributor

MBARIMike commented Nov 23, 2016

Current #428 has been pulled to http://stoqs.mbari.org:8000/default.

Looking pretty good! I suggest removing ' auto' from this line so that extra white space isn't added below the scene:

<X3D id="spatial-3d-x3d-cardboard" style="width:100%;height:100%;margin:0px auto;display:block;border:none;" ondownloadsfinished="downloadsFinished(event)">
@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 24, 2016

Contributor

I removed 'auto' from the X3D html tag and removed a submodule and a .swp file that were created and pushed by accident.

Contributor

juanv911 commented Nov 24, 2016

I removed 'auto' from the X3D html tag and removed a submodule and a .swp file that were created and pushed by accident.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 28, 2016

Contributor

I incorrectly guessed that the 'auto' attribute was causing the extra white space in the 3D area, but upon further inspection I see that there are two <X3D ...> elements there:

screen shot 2016-11-28 at 8 08 09 am

I wonder if we can have only the spatial-3d-x3d element on the page?

Contributor

MBARIMike commented Nov 28, 2016

I incorrectly guessed that the 'auto' attribute was causing the extra white space in the 3D area, but upon further inspection I see that there are two <X3D ...> elements there:

screen shot 2016-11-28 at 8 08 09 am

I wonder if we can have only the spatial-3d-x3d element on the page?

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 28, 2016

Contributor

I think the same X3D element can be used for Rift and Cardboard. The HTML for spatial-3d-x3d and spatial-3d-x3d-cardboard is almost the same except for the <shaderPart DEF="frag" type='FRAGMENT'> which is the part that gives the shape to the left and right windows. spatial-3d-x3d-cardboard has square boxes/windows and spatial-3d-x3d has a shape with square with rounded sides.

Contributor

juanv911 commented Nov 28, 2016

I think the same X3D element can be used for Rift and Cardboard. The HTML for spatial-3d-x3d and spatial-3d-x3d-cardboard is almost the same except for the <shaderPart DEF="frag" type='FRAGMENT'> which is the part that gives the shape to the left and right windows. spatial-3d-x3d-cardboard has square boxes/windows and spatial-3d-x3d has a shape with square with rounded sides.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 30, 2016

Contributor

I tested on my development system with the following diff and the Enter Cardboard / Leave Cardboard functionality worked fine. This diff removes the Rift functionality, which is O.K. as that was even more experimental than this new Cardboard functionality. It also removes the experiment with the Leap Motion hand gesture rendering, which is also O.K. as that never worked.

Perhaps you can test with these changes and commit your file. With that I think #428 can be merged.

Here's the diff:

$ git diff stoqs/stoqs/templates/stoqs/stoqsquery.html
diff --git a/stoqs/stoqs/templates/stoqs/stoqsquery.html b/stoqs/stoqs/templates/stoqs/stoqsquery.html
index 75df235..420c55c 100644
--- a/stoqs/stoqs/templates/stoqs/stoqsquery.html
+++ b/stoqs/stoqs/templates/stoqs/stoqsquery.html
@@ -314,7 +314,7 @@
                                         </div> <!-- geo-3dplot-control -->
                                         <div style="height:100%;">
 <!-- Elements for Google Cardboard -->
-    <X3D id="spatial-3d-x3d-cardboard" style="width:100%;height:100%;margin:0px;display:block;border:none;" ondownloadsfinished="downloadsFinished(event)">
+    <X3D id="spatial-3d-x3d" style="width:100%;height:100%;margin:0px;display:block;border:none;" ondownloadsfinished="downloadsFinished(event)">
       <scene>
         <Environment frustumCulling="false"></Environment>
         <navigationInfo></navigationInfo>
@@ -421,163 +421,6 @@
       </X3D>
     <!-- End of Cardboard Elements -->

-                                        <X3D id="spatial-3d-x3d" style="width:100%;height:100%;margin:0px auto;display:block;border:none;" ondownloadsfinished="downloadsF
-                                            <Scene>
-                                                <Environment frustumCulling="false"></Environment>
-                                                <NavigationInfo></NavigationInfo>
-                                                <Viewpoint id="mp-x3d-viewpoint1" def="vp" onviewpointChanged="setScale(event)"></Viewpoint>
-                                                <!-- Test GeoViewpoint for Monterey Bay area, user must page-down to bind to it -->
-                                                <GeoViewpoint id="mp-x3d-geoviewpoint1" def="gvp" position="36.8 -122.1 100000" orientation="1 0 0 -1.57" centerofrotation
-                                                </GeoViewpoint>
-                                                <Background DEF='bgnd' skyColor=".9608 .9608 .9608"></Background>
-                                                <Group id='spatial-3d-root' render='true'>
-                                                    <Group id='spatial-3d-scene' def="spatial-3d-scene">
-                                                        <GeoOriginTransform containerField='children'>
-                                                            <Group id="mp-x3d-terrain">
-                                                            </Group>
-                                                        </GeoOriginTransform>
-                                                        <Group id="platform-animations"></Group>
-                                                        <Group id="platform-models"></Group>
-                                                    </Group>
-                                                </Group>
-
-        <!-- Elements for Rift - Orientations routed to GeoViewpoint, so must page down to that Viewpoint -->
-        <group id='spatial-3d-left' DEF='left' render='false'>
-            <shape>
-                <appearance>
-                    <renderedTexture id="rtLeft" stereoMode="LEFT_EYE" update='ALWAYS'
-                                     dimensions='640 800 4' repeatS='false' repeatT='false'>
-                        <!--<viewpoint USE='vp' containerField='viewpoint'></viewpoint>-->
-                        <geoviewpoint USE='gvp' containerField='GeoViewpoint'></geoviewpoint>
-                        <background USE='bgnd' containerField='background'></background>
-                        <!--group USE='left' containerField="excludeNodes"></group-->
-                        <group USE='spatial-3d-scene' containerField="scene"></group>
-                    </renderedTexture>
-
-                    <composedShader>
-                        <field name='tex' type='SFInt32' value='0'></field>
-                        <field name='leftEye' type='SFFloat' value='1'></field>
-                        <shaderPart type='VERTEX'>
-                            attribute vec3 position;
-                            attribute vec2 texcoord;
-
-                            uniform mat4 modelViewProjectionMatrix;
-                            varying vec2 fragTexCoord;
-
-                            void main()
-                            {
-                                vec2 pos = sign(position.xy);
-                                fragTexCoord = texcoord;
-
-                                gl_Position = vec4((pos.x - 1.0) / 2.0, pos.y, 0.0, 1.0);
-                                //gl_Position = vec4(pos.xy / 4.0 + vec2(-0.75,0.75), 0.0, 1.0);
-                            }
-                        </shaderPart>
-                        <shaderPart DEF="frag" type='FRAGMENT'>
-                            #ifdef GL_ES
-                            precision highp float;
-                            #endif
-
-                            uniform sampler2D tex;
-                            uniform float leftEye;
-                            varying vec2 fragTexCoord;
-
-                            void main()
-                            {
-                                float distortionScale = 0.7; //0.685;
-                                //float distortionK[4] = float[](1.0, 0.22, 0.24, 0.0);
-                                vec2 lensCenter = vec2(0.151976495726, 0.0);
-                                if (leftEye == 0.0) {
-                                    lensCenter.x *= -1.0;
-                                }
-
-                                vec2 theta = (fragTexCoord * 2.0) - 1.0;
-                                float rSq = theta.x * theta.x + theta.y * theta.y;
-                                vec2 rvec = theta * (1.0 + 0.22 * rSq + 0.24 * rSq * rSq); //+ 0.0 * rSq * rSq * rSq);
-                                vec2 texCoord = (distortionScale*rvec+(1.0-distortionScale)*lensCenter + 1.0) / 2.0;
-
-                                if (any(notEqual(clamp(texCoord, vec2(0.0, 0.0), vec2(1.0, 1.0)) - texCoord,
-                                                       vec2(0.0, 0.0)))) {
-                                    //if (leftEye == 0.0) gl_FragColor = vec4(1.0,1.0,0.0,1.0);
-                                    //else gl_FragColor = vec4(1.0,0.0,0.0,1.0);
-                                    discard;
-                                }
-                                else {
-                                    vec3 col = texture2D(tex, texCoord).rgb;
-                                    gl_FragColor = vec4(col, 1.0);
-                                }
-                                //gl_FragColor = texture2D(tex, fragTexCoord);
-                            }
-                        </shaderPart>
-                    </composedShader>
-
-                </appearance>
-                <plane solid="false"></plane>
-            </shape>
-        </group>
-
-        <group id='spatial-3d-right' DEF='right' render='false'>
-            <shape>
-                <appearance>
-                    <renderedTexture id="rtRight" stereoMode="RIGHT_EYE" update='ALWAYS'
-                                     dimensions='640 800 4' repeatS='false' repeatT='false'>
-                        <!--<viewpoint USE='vp' containerField='viewpoint'></viewpoint>-->
-                        <geoviewpoint USE='gvp' containerField='GeoViewpoint'></geoviewpoint>
-                        <background USE='bgnd' containerField='background'></background>
-                        <group USE='spatial-3d-scene' containerField="scene"></group>
-                    </renderedTexture>
-                    <composedShader>
-                        <field name='tex' type='SFInt32' value='0'></field>
-                        <field name='leftEye' type='SFFloat' value='0'></field>
-                        <shaderPart type='VERTEX'>
-                            attribute vec3 position;
-                            attribute vec2 texcoord;
-
-                            uniform mat4 modelViewProjectionMatrix;
-                            varying vec2 fragTexCoord;
-
-                            void main()
-                            {
-                                vec2 pos = sign(position.xy);
-                                fragTexCoord = texcoord;
-
-                                gl_Position = vec4((pos.x + 1.0) / 2.0, pos.y, 0.0, 1.0);
-                            }
-                        </shaderPart>
-                        <shaderPart USE="frag" type='FRAGMENT'>
-                        </shaderPart>
-                    </composedShader>
-                </appearance>
-                <plane solid="false"></plane>
-            </shape>
-        </group>
-
-                <!-- Elements for Leap Motion -->
-                <transform id="handtrafo1" translation="3.8 1.00905 -5.97228">
-                    <transform id="handtrafo" scale="0.0015 0.0015 0.0015" translation="0.1 -0.3 -0.5">
-                        <transform id="hand">
-                            <transform>
-                                <transform>
-                                    <transform>
-                                        <transform scale="40 10 40" center="0 0 -2">
-                                            <shape>
-                                                <appearance>
-                                                    <material diffuseColor="0.603 0.894 0.909"></material>
-                                                </appearance>
-                                                <box></box>
-                                            </shape>
-                                        </transform>
-                                    </transform>
-                                </transform>
-                            </transform>
-
-                            <transform id="bones"></transform>
-                        </transform>
-                    </transform>
-                </transform>
-
-                                            </Scene>
-                                        </X3D>
                                         </div>
                                     </div>
                                 </div>
@@ -2876,7 +2719,7 @@ function enable_cardboard(){

   function deg2rad(deg){return deg * degreeToRadiansFactor;}

-  runtime = $('#spatial-3d-x3d-cardboard')[0].runtime;
+  runtime = $('#spatial-3d-x3d')[0].runtime;
   rtLeft = document.getElementById('rtLeft');
   rtRight =document.getElementById('rtRight');
   //rtLeft._x3domNode.lensCenter = 0;
@@ -2889,7 +2732,7 @@ function enable_cardboard(){
   rtLeft.setAttribute('dimensions',  hw + ' ' + lastH + ' 4');
   rtRight.setAttribute('dimensions', hw + ' ' + lastH + ' 4');

-  var element = document.getElementById("spatial-3d-x3d-cardboard");
+  var element = document.getElementById("spatial-3d-x3d");
   CARDBOARD.viewpoint = document.getElementById('mp-x3d-geoviewpoint1');
   CARDBOARD.viewpoint.setAttribute('set_bind','true');
   element.runtime.exitFrame = function() {
@@ -3230,23 +3073,23 @@ function enable_cardboard(){

     $(".cardboard-button").click(function(element) {
         if(cardboarded){
-            $('#spatial-3d-x3d-cardboard #spatial-3d-root').attr('render', 'true');
-            $('#spatial-3d-x3d-cardboard #spatial-3d-left').attr('render', 'false');
-            $('#spatial-3d-x3d-cardboard #spatial-3d-right').attr('render','false');
+            $('#spatial-3d-x3d #spatial-3d-root').attr('render', 'true');
+            $('#spatial-3d-x3d #spatial-3d-left').attr('render', 'false');
+            $('#spatial-3d-x3d #spatial-3d-right').attr('render','false');
             $('#mp-x3d-geoviewpoint1').attr('position', $('body').data()['extent'][2] + ' ' + $('body').data()['extent'][1] + ' 1000');
             $('#mp-x3d-geoviewpoint1').attr('orientation', '1 0 0 -1.57');
             $(this).html('Enter Cardboard');
             $('#mp-x3d-geoviewpoint1').attr("set_bind", "false");
-            $('#spatial-3d-x3d-cardboard')[0].runtime.exitFrame = function() {}
+            $('#spatial-3d-x3d')[0].runtime.exitFrame = function() {}
             // Reset padding to its initial padding
             $('#left-column').parent().parent().css( { 'padding': '0px 20px' } );
             $('#accordion1').css( { 'padding': '19px' } );
             $('#collapseSpatial > div').css( { 'padding': '9px 15px' } );
        }
         else {
-           $('#spatial-3d-x3d-cardboard #spatial-3d-root').attr('render', 'true');
-            $('#spatial-3d-x3d-cardboard #spatial-3d-left').attr('render', 'true');
-            $('#spatial-3d-x3d-cardboard #spatial-3d-right').attr('render', 'true');
+           $('#spatial-3d-x3d #spatial-3d-root').attr('render', 'true');
+            $('#spatial-3d-x3d #spatial-3d-left').attr('render', 'true');
+            $('#spatial-3d-x3d #spatial-3d-right').attr('render', 'true');
             $('#mp-x3d-geoviewpoint1').attr('position', $('body').data()['extent'][2] + ' ' + $('body').data()['extent'][1] + ' 100');
             $('#mp-x3d-geoviewpoint1').attr('orientation', '0 0 1 0');
             $(this).html('Leave Cardboard');
Contributor

MBARIMike commented Nov 30, 2016

I tested on my development system with the following diff and the Enter Cardboard / Leave Cardboard functionality worked fine. This diff removes the Rift functionality, which is O.K. as that was even more experimental than this new Cardboard functionality. It also removes the experiment with the Leap Motion hand gesture rendering, which is also O.K. as that never worked.

Perhaps you can test with these changes and commit your file. With that I think #428 can be merged.

Here's the diff:

$ git diff stoqs/stoqs/templates/stoqs/stoqsquery.html
diff --git a/stoqs/stoqs/templates/stoqs/stoqsquery.html b/stoqs/stoqs/templates/stoqs/stoqsquery.html
index 75df235..420c55c 100644
--- a/stoqs/stoqs/templates/stoqs/stoqsquery.html
+++ b/stoqs/stoqs/templates/stoqs/stoqsquery.html
@@ -314,7 +314,7 @@
                                         </div> <!-- geo-3dplot-control -->
                                         <div style="height:100%;">
 <!-- Elements for Google Cardboard -->
-    <X3D id="spatial-3d-x3d-cardboard" style="width:100%;height:100%;margin:0px;display:block;border:none;" ondownloadsfinished="downloadsFinished(event)">
+    <X3D id="spatial-3d-x3d" style="width:100%;height:100%;margin:0px;display:block;border:none;" ondownloadsfinished="downloadsFinished(event)">
       <scene>
         <Environment frustumCulling="false"></Environment>
         <navigationInfo></navigationInfo>
@@ -421,163 +421,6 @@
       </X3D>
     <!-- End of Cardboard Elements -->

-                                        <X3D id="spatial-3d-x3d" style="width:100%;height:100%;margin:0px auto;display:block;border:none;" ondownloadsfinished="downloadsF
-                                            <Scene>
-                                                <Environment frustumCulling="false"></Environment>
-                                                <NavigationInfo></NavigationInfo>
-                                                <Viewpoint id="mp-x3d-viewpoint1" def="vp" onviewpointChanged="setScale(event)"></Viewpoint>
-                                                <!-- Test GeoViewpoint for Monterey Bay area, user must page-down to bind to it -->
-                                                <GeoViewpoint id="mp-x3d-geoviewpoint1" def="gvp" position="36.8 -122.1 100000" orientation="1 0 0 -1.57" centerofrotation
-                                                </GeoViewpoint>
-                                                <Background DEF='bgnd' skyColor=".9608 .9608 .9608"></Background>
-                                                <Group id='spatial-3d-root' render='true'>
-                                                    <Group id='spatial-3d-scene' def="spatial-3d-scene">
-                                                        <GeoOriginTransform containerField='children'>
-                                                            <Group id="mp-x3d-terrain">
-                                                            </Group>
-                                                        </GeoOriginTransform>
-                                                        <Group id="platform-animations"></Group>
-                                                        <Group id="platform-models"></Group>
-                                                    </Group>
-                                                </Group>
-
-        <!-- Elements for Rift - Orientations routed to GeoViewpoint, so must page down to that Viewpoint -->
-        <group id='spatial-3d-left' DEF='left' render='false'>
-            <shape>
-                <appearance>
-                    <renderedTexture id="rtLeft" stereoMode="LEFT_EYE" update='ALWAYS'
-                                     dimensions='640 800 4' repeatS='false' repeatT='false'>
-                        <!--<viewpoint USE='vp' containerField='viewpoint'></viewpoint>-->
-                        <geoviewpoint USE='gvp' containerField='GeoViewpoint'></geoviewpoint>
-                        <background USE='bgnd' containerField='background'></background>
-                        <!--group USE='left' containerField="excludeNodes"></group-->
-                        <group USE='spatial-3d-scene' containerField="scene"></group>
-                    </renderedTexture>
-
-                    <composedShader>
-                        <field name='tex' type='SFInt32' value='0'></field>
-                        <field name='leftEye' type='SFFloat' value='1'></field>
-                        <shaderPart type='VERTEX'>
-                            attribute vec3 position;
-                            attribute vec2 texcoord;
-
-                            uniform mat4 modelViewProjectionMatrix;
-                            varying vec2 fragTexCoord;
-
-                            void main()
-                            {
-                                vec2 pos = sign(position.xy);
-                                fragTexCoord = texcoord;
-
-                                gl_Position = vec4((pos.x - 1.0) / 2.0, pos.y, 0.0, 1.0);
-                                //gl_Position = vec4(pos.xy / 4.0 + vec2(-0.75,0.75), 0.0, 1.0);
-                            }
-                        </shaderPart>
-                        <shaderPart DEF="frag" type='FRAGMENT'>
-                            #ifdef GL_ES
-                            precision highp float;
-                            #endif
-
-                            uniform sampler2D tex;
-                            uniform float leftEye;
-                            varying vec2 fragTexCoord;
-
-                            void main()
-                            {
-                                float distortionScale = 0.7; //0.685;
-                                //float distortionK[4] = float[](1.0, 0.22, 0.24, 0.0);
-                                vec2 lensCenter = vec2(0.151976495726, 0.0);
-                                if (leftEye == 0.0) {
-                                    lensCenter.x *= -1.0;
-                                }
-
-                                vec2 theta = (fragTexCoord * 2.0) - 1.0;
-                                float rSq = theta.x * theta.x + theta.y * theta.y;
-                                vec2 rvec = theta * (1.0 + 0.22 * rSq + 0.24 * rSq * rSq); //+ 0.0 * rSq * rSq * rSq);
-                                vec2 texCoord = (distortionScale*rvec+(1.0-distortionScale)*lensCenter + 1.0) / 2.0;
-
-                                if (any(notEqual(clamp(texCoord, vec2(0.0, 0.0), vec2(1.0, 1.0)) - texCoord,
-                                                       vec2(0.0, 0.0)))) {
-                                    //if (leftEye == 0.0) gl_FragColor = vec4(1.0,1.0,0.0,1.0);
-                                    //else gl_FragColor = vec4(1.0,0.0,0.0,1.0);
-                                    discard;
-                                }
-                                else {
-                                    vec3 col = texture2D(tex, texCoord).rgb;
-                                    gl_FragColor = vec4(col, 1.0);
-                                }
-                                //gl_FragColor = texture2D(tex, fragTexCoord);
-                            }
-                        </shaderPart>
-                    </composedShader>
-
-                </appearance>
-                <plane solid="false"></plane>
-            </shape>
-        </group>
-
-        <group id='spatial-3d-right' DEF='right' render='false'>
-            <shape>
-                <appearance>
-                    <renderedTexture id="rtRight" stereoMode="RIGHT_EYE" update='ALWAYS'
-                                     dimensions='640 800 4' repeatS='false' repeatT='false'>
-                        <!--<viewpoint USE='vp' containerField='viewpoint'></viewpoint>-->
-                        <geoviewpoint USE='gvp' containerField='GeoViewpoint'></geoviewpoint>
-                        <background USE='bgnd' containerField='background'></background>
-                        <group USE='spatial-3d-scene' containerField="scene"></group>
-                    </renderedTexture>
-                    <composedShader>
-                        <field name='tex' type='SFInt32' value='0'></field>
-                        <field name='leftEye' type='SFFloat' value='0'></field>
-                        <shaderPart type='VERTEX'>
-                            attribute vec3 position;
-                            attribute vec2 texcoord;
-
-                            uniform mat4 modelViewProjectionMatrix;
-                            varying vec2 fragTexCoord;
-
-                            void main()
-                            {
-                                vec2 pos = sign(position.xy);
-                                fragTexCoord = texcoord;
-
-                                gl_Position = vec4((pos.x + 1.0) / 2.0, pos.y, 0.0, 1.0);
-                            }
-                        </shaderPart>
-                        <shaderPart USE="frag" type='FRAGMENT'>
-                        </shaderPart>
-                    </composedShader>
-                </appearance>
-                <plane solid="false"></plane>
-            </shape>
-        </group>
-
-                <!-- Elements for Leap Motion -->
-                <transform id="handtrafo1" translation="3.8 1.00905 -5.97228">
-                    <transform id="handtrafo" scale="0.0015 0.0015 0.0015" translation="0.1 -0.3 -0.5">
-                        <transform id="hand">
-                            <transform>
-                                <transform>
-                                    <transform>
-                                        <transform scale="40 10 40" center="0 0 -2">
-                                            <shape>
-                                                <appearance>
-                                                    <material diffuseColor="0.603 0.894 0.909"></material>
-                                                </appearance>
-                                                <box></box>
-                                            </shape>
-                                        </transform>
-                                    </transform>
-                                </transform>
-                            </transform>
-
-                            <transform id="bones"></transform>
-                        </transform>
-                    </transform>
-                </transform>
-
-                                            </Scene>
-                                        </X3D>
                                         </div>
                                     </div>
                                 </div>
@@ -2876,7 +2719,7 @@ function enable_cardboard(){

   function deg2rad(deg){return deg * degreeToRadiansFactor;}

-  runtime = $('#spatial-3d-x3d-cardboard')[0].runtime;
+  runtime = $('#spatial-3d-x3d')[0].runtime;
   rtLeft = document.getElementById('rtLeft');
   rtRight =document.getElementById('rtRight');
   //rtLeft._x3domNode.lensCenter = 0;
@@ -2889,7 +2732,7 @@ function enable_cardboard(){
   rtLeft.setAttribute('dimensions',  hw + ' ' + lastH + ' 4');
   rtRight.setAttribute('dimensions', hw + ' ' + lastH + ' 4');

-  var element = document.getElementById("spatial-3d-x3d-cardboard");
+  var element = document.getElementById("spatial-3d-x3d");
   CARDBOARD.viewpoint = document.getElementById('mp-x3d-geoviewpoint1');
   CARDBOARD.viewpoint.setAttribute('set_bind','true');
   element.runtime.exitFrame = function() {
@@ -3230,23 +3073,23 @@ function enable_cardboard(){

     $(".cardboard-button").click(function(element) {
         if(cardboarded){
-            $('#spatial-3d-x3d-cardboard #spatial-3d-root').attr('render', 'true');
-            $('#spatial-3d-x3d-cardboard #spatial-3d-left').attr('render', 'false');
-            $('#spatial-3d-x3d-cardboard #spatial-3d-right').attr('render','false');
+            $('#spatial-3d-x3d #spatial-3d-root').attr('render', 'true');
+            $('#spatial-3d-x3d #spatial-3d-left').attr('render', 'false');
+            $('#spatial-3d-x3d #spatial-3d-right').attr('render','false');
             $('#mp-x3d-geoviewpoint1').attr('position', $('body').data()['extent'][2] + ' ' + $('body').data()['extent'][1] + ' 1000');
             $('#mp-x3d-geoviewpoint1').attr('orientation', '1 0 0 -1.57');
             $(this).html('Enter Cardboard');
             $('#mp-x3d-geoviewpoint1').attr("set_bind", "false");
-            $('#spatial-3d-x3d-cardboard')[0].runtime.exitFrame = function() {}
+            $('#spatial-3d-x3d')[0].runtime.exitFrame = function() {}
             // Reset padding to its initial padding
             $('#left-column').parent().parent().css( { 'padding': '0px 20px' } );
             $('#accordion1').css( { 'padding': '19px' } );
             $('#collapseSpatial > div').css( { 'padding': '9px 15px' } );
        }
         else {
-           $('#spatial-3d-x3d-cardboard #spatial-3d-root').attr('render', 'true');
-            $('#spatial-3d-x3d-cardboard #spatial-3d-left').attr('render', 'true');
-            $('#spatial-3d-x3d-cardboard #spatial-3d-right').attr('render', 'true');
+           $('#spatial-3d-x3d #spatial-3d-root').attr('render', 'true');
+            $('#spatial-3d-x3d #spatial-3d-left').attr('render', 'true');
+            $('#spatial-3d-x3d #spatial-3d-right').attr('render', 'true');
             $('#mp-x3d-geoviewpoint1').attr('position', $('body').data()['extent'][2] + ' ' + $('body').data()['extent'][1] + ' 100');
             $('#mp-x3d-geoviewpoint1').attr('orientation', '0 0 1 0');
             $(this).html('Leave Cardboard');
@leo831

This comment has been minimized.

Show comment
Hide comment
@leo831

leo831 Nov 30, 2016

Contributor

Hi Mike,
We applied the changes that you mention on the previous message.

Contributor

leo831 commented Nov 30, 2016

Hi Mike,
We applied the changes that you mention on the previous message.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 30, 2016

Contributor

Current #428 has been pulled to http://stoqs.mbari.org:8000/default.

Reports of proper functioning on various VR devices (smart phones) are welcomed.

Contributor

MBARIMike commented Nov 30, 2016

Current #428 has been pulled to http://stoqs.mbari.org:8000/default.

Reports of proper functioning on various VR devices (smart phones) are welcomed.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 30, 2016

Contributor

I have an LG G4 Android phone and it loads the scene in fullscreen and it rotates, but only on Firefox. When zooming in on Firefox, it doesn't move to a new position, it resets back to the initial position. In Chrome it doesn't go into fullscreen and it doesn't rotate. In Chrome, before clicking Enter Cardboard you can rotate the 3D object with your fingers, but after clicking the Enter Cardboard button the rotation stops working

Contributor

juanv911 commented Nov 30, 2016

I have an LG G4 Android phone and it loads the scene in fullscreen and it rotates, but only on Firefox. When zooming in on Firefox, it doesn't move to a new position, it resets back to the initial position. In Chrome it doesn't go into fullscreen and it doesn't rotate. In Chrome, before clicking Enter Cardboard you can rotate the 3D object with your fingers, but after clicking the Enter Cardboard button the rotation stops working

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 30, 2016

Contributor

According to the Mobile tab under Browser compatibility at https://developer.mozilla.org/en-US/docs/Web/API/Window/ondeviceorientation Chrome 50 should work.

Contributor

MBARIMike commented Nov 30, 2016

According to the Mobile tab under Browser compatibility at https://developer.mozilla.org/en-US/docs/Web/API/Window/ondeviceorientation Chrome 50 should work.

@leo831

This comment has been minimized.

Show comment
Hide comment
@leo831

leo831 Nov 30, 2016

Contributor
Contributor

leo831 commented Nov 30, 2016

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Nov 30, 2016

Contributor

Congratulations, #428 has just been merged into master!

Would you like to do some extra credit work to enable Cardboard mode with a button like this cardboard_icon between the 'i' and 'full screen' buttons? It'd make it easier for people to use and would be a nice thing to put on your poster.

Contributor

MBARIMike commented Nov 30, 2016

Congratulations, #428 has just been merged into master!

Would you like to do some extra credit work to enable Cardboard mode with a button like this cardboard_icon between the 'i' and 'full screen' buttons? It'd make it easier for people to use and would be a nice thing to put on your poster.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Nov 30, 2016

Contributor

The existing three buttons are using this sprite glyphicons-halflings.png from the bootstrap folder. Should we modify the sprite image to include that icon?

Contributor

juanv911 commented Nov 30, 2016

The existing three buttons are using this sprite glyphicons-halflings.png from the bootstrap folder. Should we modify the sprite image to include that icon?

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Dec 1, 2016

Contributor

Yes. Modifying the sprite image would give the best results.

Contributor

MBARIMike commented Dec 1, 2016

Yes. Modifying the sprite image would give the best results.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Dec 3, 2016

Contributor

I'm looking at the GeoViewpoint setting at line:

$('#mp-x3d-geoviewpoint1').attr('position', $('body').data()['extent'][2] + ' ' + $('body').data()['extent'][1] + ' 100');

as I don't think it's working correctly.

Contributor

MBARIMike commented Dec 3, 2016

I'm looking at the GeoViewpoint setting at line:

$('#mp-x3d-geoviewpoint1').attr('position', $('body').data()['extent'][2] + ' ' + $('body').data()['extent'][1] + ' 100');

as I don't think it's working correctly.

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Dec 3, 2016

Contributor

We submitted #439. It includes the Cardboard icon and it goes into fullscreen. Changing the background color from white to black like the Rift seems better, but the text and icons seem unreadable. I don't know if that's something you want us to do.

Contributor

juanv911 commented Dec 3, 2016

We submitted #439. It includes the Cardboard icon and it goes into fullscreen. Changing the background color from white to black like the Rift seems better, but the text and icons seem unreadable. I don't know if that's something you want us to do.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Dec 4, 2016

Contributor

I merged #439 and pulled to http://stoqs.mbari.org:8000/default. Interestingly, when I tested the PR on my dev machine before merging I was able to see the Cardboard icon, but on our production server there is just a blank space:

screen shot 2016-12-03 at 4 32 14 pm

My dev machine does show it:

screen shot 2016-12-03 at 4 33 23 pm

Contributor

MBARIMike commented Dec 4, 2016

I merged #439 and pulled to http://stoqs.mbari.org:8000/default. Interestingly, when I tested the PR on my dev machine before merging I was able to see the Cardboard icon, but on our production server there is just a blank space:

screen shot 2016-12-03 at 4 32 14 pm

My dev machine does show it:

screen shot 2016-12-03 at 4 33 23 pm

@juanv911

This comment has been minimized.

Show comment
Hide comment
@juanv911

juanv911 Dec 4, 2016

Contributor

I think it is because the old image is still in the cache. It is not showing the icon on my computer either. In my localhost it is showing it.

Contributor

juanv911 commented Dec 4, 2016

I think it is because the old image is still in the cache. It is not showing the icon on my computer either. In my localhost it is showing it.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Dec 4, 2016

Contributor

I forgot that on a production Django server we need to copy static files to the web server directory with:

export STATIC_ROOT=/usr/share/nginx/html/static
export MEDIA_ROOT=/usr/share/nginx/html/media
stoqs/manage.py collectstatic --settings=config.settings.local_stoqs

The icon is now visible on http://stoqs.mbari.org:8000/default.

Contributor

MBARIMike commented Dec 4, 2016

I forgot that on a production Django server we need to copy static files to the web server directory with:

export STATIC_ROOT=/usr/share/nginx/html/static
export MEDIA_ROOT=/usr/share/nginx/html/media
stoqs/manage.py collectstatic --settings=config.settings.local_stoqs

The icon is now visible on http://stoqs.mbari.org:8000/default.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Dec 4, 2016

Contributor

I'd like to minimize all the menus in when going into Cardboard mode. I'll work on that.

Contributor

MBARIMike commented Dec 4, 2016

I'd like to minimize all the menus in when going into Cardboard mode. I'll work on that.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Dec 4, 2016

Contributor

Here is a good "Share this View" link for testing and demoing the Cardboard feature:

Dorado mission from July 2016

Open this on your phone (iPhone or Android/Firefox), wait a few minutes for all the models to load then click the Cardboard button.

Contributor

MBARIMike commented Dec 4, 2016

Here is a good "Share this View" link for testing and demoing the Cardboard feature:

Dorado mission from July 2016

Open this on your phone (iPhone or Android/Firefox), wait a few minutes for all the models to load then click the Cardboard button.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Dec 4, 2016

Contributor

Here's a screen shot from the link mentioned in #369 (comment) and after platform scaling events are fired from the GeoViewpoint:

img_6925

Contributor

MBARIMike commented Dec 4, 2016

Here's a screen shot from the link mentioned in #369 (comment) and after platform scaling events are fired from the GeoViewpoint:

img_6925

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Dec 5, 2016

Contributor

What do you guys think, should I close this issue?

Contributor

MBARIMike commented Dec 5, 2016

What do you guys think, should I close this issue?

@bilalsattar24

This comment has been minimized.

Show comment
Hide comment
@bilalsattar24

bilalsattar24 Dec 5, 2016

Contributor

Yeah, I think its time. It's been a good journey.

Contributor

bilalsattar24 commented Dec 5, 2016

Yeah, I think its time. It's been a good journey.

@MBARIMike

This comment has been minimized.

Show comment
Hide comment
@MBARIMike

MBARIMike Dec 6, 2016

Contributor

Here is the entry for the VR Hackathon held in San Francisco last weekend:

https://devpost.com/software/stoqs-cardboard

and the YouTube video showing how to use the Cardboard feature in STOQS. The video doesn't show it, but it's helpful to put your phone into one of these:

https://store.google.com/product/google_cardboard?gl=us

Contributor

MBARIMike commented Dec 6, 2016

Here is the entry for the VR Hackathon held in San Francisco last weekend:

https://devpost.com/software/stoqs-cardboard

and the YouTube video showing how to use the Cardboard feature in STOQS. The video doesn't show it, but it's helpful to put your phone into one of these:

https://store.google.com/product/google_cardboard?gl=us

@MBARIMike MBARIMike closed this Dec 6, 2016

stoqs pushed a commit that referenced this issue Jul 21, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment