add three scenes for link traversal #1575

dmarcos · 2016-06-23T03:02:11Z

Description:
Creates a showcase to illustrate link traversal, characteristic of the WebVR 1.0 spec. A hover and click effects for the links are still pending.

@cvan I know you have opinions on how pages should handle link traversal while remaining in VR. Let's discus and incorporate those ideas into this PR.

This is a link to the demo if you want to quickly try it out:
http://swimminglessonsformodernlife.com/aframe/examples/showcase/link-traversal/

cvan · 2016-06-24T00:25:16Z

examples/showcase/link-traversal/sunrise.html

+      <a-entity id="sky"
+                 geometry="primitive: sphere; radius: 65;"
+                 material="shader: skyGradient; colorTop: #353449; colorBottom: #BC483E; side: back"></a-entity>
+       <a-entity ground='url: https://media.aframe.io/link-traversal/models/groundSunrise.json'></a-entity>


why single ticket marks?

a problem of having different conventions for different contexts. JS vs HTML

ngokevin · 2016-11-15T01:25:37Z

src/components/link.js

+
+module.exports.Component = registerComponent('link', {
+  schema: {
+    url: { default: '' },


Maybe href to be consistent with the primitive that is abstracting it as with as with <a>?

yes, please

or, rather can we call the component href? I know it conflicts with the aframe-href-component. another approach I thought about, in keeping with the behaviour of 2D/classic anchors: perhaps we could actually wrap the entities in <a> elements. any emitted click would bubble up to the <a> and handle the page navigation (i.e., modifying window.location from JS). thoughts?

Wrapping in <a> isn't great. It doesn't fit with the framework, is syntactically more complicated (both in HTML, and you can't just synchronously do setAttribute('link', ..>) or use mixins/aframe-mss/inspector), and will cause tons of complications in introducing a non-A-Frame element into the scene graph.

No strong preference for href/link, but href might be confusing because people will be passing a URL string to it, when it needs both an href and an event name (href="href: blah.com; on: grab).

I know A-Frame is entering (or reentering, heh) unchartered territory. FWIW, per the WHATWG's HTML Living Standard, the href attribute is defined as such:

This implied hyperlink has no special meaning (it has no link type) beyond linking the element's document to the resource given by the element's href attribute.

Given that, perhaps it makes sense to leave the href as just a pointer (i.e., URL) to a document (or target [i.e., hash] in the active document).

Also this:

A hyperlink can have one or more hyperlink annotations that modify the processing semantics of that hyperlink.

Given that, perhaps it makes sense to allow people to declaratively define event triggers using the rel attribute (or custom logic using JS). A default behaviour might be to listen for the click listener (or some default even of A-Frame's choosing).

Thoughts?

link="href: foo.bar; on: hit" is fine. Separate attribute/component isn't consistent with the framework, prescribing an event is inflexible to different use cases.

Sorry, what I'm suggesting is to separate the attributes/components. Perhaps this is something worth asking developers in Slack, for example, of what feels/looks more intuitive/expected.

I can say it's not intuitive nor consistent with A-Frame's design (i..e, separate attributes for related properties of a component).

At the primitive level, it can be done, which is what @dmarcos has already done. <a-link href="foo.bar" on="click">.

cvan · 2016-11-15T01:44:09Z

can you rebase?

micahstubbs · 2016-11-27T03:44:09Z

as a developer, I like the idea of link, as it feels a bit more intuitive

dmarcos · 2017-06-24T12:07:50Z

Tests pending

ngokevin · 2017-06-24T19:09:29Z

src/systems/link.js

+ * Tracked controls system.
+ * It maintains a list with the available tracked controllers
+ */
+module.exports.System = registerSystem('link', {


I don't think this needs to be a system, it doesn't provide any services to the link component. It can be part of the scene module, which is where all the other WebVR-related handlers live (e.g., onvrdisplaypresentchange as well as enterVR/exitVR.

It does. I should probably initialize the variable but the currently peeked link is referenced on the system

That's fine to put any variables you need here, but the activate/deactivate event handlers belong on the scene module vs. links IMO, they're not link-specific.

ngokevin · 2017-06-24T19:10:57Z

examples/showcase/link-traversal/js/components/aframe-tooltip-component.js

@@ -0,0 +1,372 @@
+/*eslint-disable */


We can pull the 3rd party components in from unpkg.com

ngokevin

I just did a parse initial pass, more nits than not. I'm trying to test it on Vive/Nightly, but not entering VR at the moment for me.

ngokevin · 2017-06-26T17:16:43Z

src/components/link.js

+ */
+module.exports.Component = registerComponent('link', {
+  schema: {
+    href: {default: ''},


can sort these

ngokevin · 2017-06-26T17:17:06Z

src/components/link.js

+    color: {default: 'white', type: 'color'},
+    highlighted: {default: false},
+    highlightedColor: {default: '#24CAFF', type: 'color'},
+    visualAspectEnabled: {default: true},


maybe portalMode?

ngokevin · 2017-06-26T17:17:32Z

src/components/link.js

+  init: function () {
+    this.redirect = this.redirect.bind(this);
+    this.previousQuaternion = undefined;
+    this.hiddenEls = [];


Can comment what this does

ngokevin · 2017-06-26T17:18:12Z

src/components/link.js

+    if (data.on !== oldData.on) { this.updateEventListener(); }
+    if (data.peekMode !== oldData.peekMode) { this.updatePeekMode(); }
+    if (!data.src || oldData.src === data.src) { return; }
+    el.setAttribute('material', 'pano', data.src.src);


What happens if an inline URL is passed?

ngokevin · 2017-06-26T17:18:55Z

src/components/link.js

+    href: {default: ''},
+    title: {default: ''},
+    on: {default: 'click'},
+    src: {type: 'asset'},


I'd call this like image to not confuse with href and start moving away from the src name
(holdover from the 2D web)

ngokevin · 2017-06-26T18:55:07Z

examples/showcase/link-traversal/js/components/link-controls.js

+    this.cameraPosition.setFromMatrixPosition(camera.matrixWorld);
+  },
+
+  tick: function (time, delta) {


prefer to see the handlers first (top level) and then the helper methods

ngokevin · 2017-06-26T18:55:20Z

examples/showcase/link-traversal/js/components/link-controls.js

+        el.removeEventListener('trackpadtouchend', this.stopPeeking);
+        break;
+      default:
+        console.warn('Uknown controller ' + this.controller + '. Cannot remove link event listeners.');


ngokevin · 2017-06-26T19:05:30Z

src/components/link.js

+      thetaStart: 0,
+      thetaLength: 360
+    });
+


can remove a couple of these blank lines to group the entity modifications together

ngokevin · 2017-06-26T19:06:25Z

src/components/link.js

+
+  /**
+   * The tick handles:
+   * 1. It swaps the plane the represents the portal with a sphere with a hole when the camera is close


Don't need to put It behind anywhere since it's ambiguous and we can infer from context

ngokevin · 2017-06-26T19:17:45Z

src/components/link.js

+        cameraPortalOrientation = this.calculateCameraPortalOrientation();
+        // If the user gets very close to the portal it is replaced
+        // by a holed sphere where see can peek inside
+        if (distance < 1.0) {


Can we do closer than 1 meter?

ngokevin · 2017-06-26T20:36:38Z

Alright, Nightly enters for me now. Camera had a low height for a bit until I restarted. But I experienced that the enter VR wasn't kicking in after navigation, and the portals are too large/far away (I can't walk up to them, and or poke my head thru because they look huge)

stevel4857 · 2017-06-26T22:17:42Z

Very cool. It works in nighlty, nightly actually started working again after today's oculus upgrade. I noticed that if I start in sunrise.html the labels for the Oculus controllers overlap. Steve Luiting http://sluiting.weebly.com P: 720.563.9377

…

On Mon, Jun 26, 2017 at 2:36 PM, Kevin Ngo ***@***.***> wrote: Alright, Nightly enters for me now. Camera had a low height for a bit until I restarted. But I experienced that the enter VR wasn't kicking in after navigation, and the portals are too large/far away (I can't walk up to them, and or poke my head thru because they look huge) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1575 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAXATnznpeLqzAXr9lSnLV3yiBnAHTp4ks5sIBZXgaJpZM4I8aW3> .

ngokevin · 2017-06-28T18:23:45Z

In link-controls.js

if (previousSelectedLinkEl || selectedLinkEl.components.link === undefined) { return; }

This threw an error for me selectedLinkEl is not yet set.

link-controls.js:302 Uncaught TypeError: Cannot read property 'components' of undefined
    at i.onMouseEnter (http://localhost:9005/js/link-controls.js:302:49)
    at Object.module.exports.fireEvent (http://localhost:9005/js/aframe-master.min.js:450:2078)
    at http://localhost:9005/js/aframe-master.min.js:293:2801
    at Array.map (native)
    at HTMLElement.value (http://localhost:9005/js/aframe-master.min.js:293:2772)
    at i.twoWayEmit (http://localhost:9005/js/aframe-master.min.js:202:3787)
    at i.onIntersection (http://localhost:9005/js/aframe-master.min.js:202:3035)
    at HTMLElement.<anonymous> (http://localhost:9005/js/aframe-master.min.js:432:132)
    at Object.module.exports.fireEvent (http://localhost:9005/js/aframe-master.min.js:450:2078)

ngokevin · 2017-06-28T18:25:33Z

Still looking into this, but creating the links programmatically with

var LINKS = [
  {href: '?env=arches', image: 'img/arches.png', title: 'Arches'},
  {href: '?env=checkboard', image: 'img/checkerboard.png', title: 'Checkerboard'},
  {href: '?env=egypt', image: 'img/egypt.png', title: 'Egypt'},
  {href: '?env=forest', image: 'img/forest.png', title: 'Forest'},
  {href: '?env=goaland', image: 'img/goaland.png', title: 'Goaland'},
  {href: '?env=goldmine', image: 'img/goldmine.png', title: 'Goldmine'},
  {href: '?env=japan', image: 'img/japan.png', title: 'Japan'},
  {href: '?env=poison', image: 'img/poison.png', title: 'Poison'},
  {href: '?env=threetowers', image: 'img/threetowers.png', title: 'Three Towers'},
  {href: '?env=tron', image: 'img/tron.png', title: 'Tron'},
  {href: '?env=yavapai', image: 'img/yavapai.png', title: 'Yavapai'},
];

AFRAME.registerComponent('generate-links', {
  init: function () {
    LINKS.forEach(link => {
      var linkEl;

      // Current page.
      if (window.location.search.indexOf(link.href.substring(1)) !== -1) { return; }

      linkEl = document.createElement('a-entity');
      linkEl.setAttribute('link', {
        href: link.href,
        src: link.image,
        title: link.title
      });
      this.el.appendChild(linkEl);
    });
  }
});

Gives errors like:

core:schema:warn Unknown property `0` for component/system `material`. 
aframe-master.min.js:21 core:schema:warn Unknown property `1` for component/system `material`. 
aframe-master.min.js:21 core:schema:warn Unknown property `2` for component/system `material`. 
aframe-master.min.js:21 core:schema:warn Unknown property `3` for component/system `material`. 

aframe-master.min.js:297 Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'strokeColor' in pano
    at i.updateCachedAttrValue (aframe-master.min.js:297)
    at i.updateProperties (aframe-master.min.js:297)
    at HTMLElement.value (aframe-master.min.js:289)
    at HTMLElement.value (aframe-master.min.js:289)
    at i.update (aframe-master.min.js:222)
    at i.updateProperties (aframe-master.min.js:297)
    at HTMLElement.value (aframe-master.min.js:289)
    at e (aframe-master.min.js:289)
    at Array.forEach (<anonymous>)
    at HTMLElement.value (aframe-master.min.js:289)

I debugged and found that attrValue at some point became a string value of pano rather than an object like I'd expect. material component was calling updateCachedAttrValue('pano')

ngokevin · 2017-06-28T22:53:19Z

I think an issue is el.setAttribute('material', 'pano', data.src.src); in link.js. If I pass in a raw URL vs <img> from <a-assets>, then it sort of breaks. This has been an awkward part of the API, we should just have the link component check if it's an <img> or string, or hope it just works as a string.

Changed to el.setAttribute('material', 'pano', typeof data.src === 'string' ? data.src : data.src.src);

ngokevin · 2017-06-28T22:55:07Z

It doesn't look like the portals are doing look-at on the camera

ngokevin · 2017-06-28T22:57:22Z

Should <a-entity link scale="0.5 0.5 1"> work?

ngokevin · 2017-06-29T00:02:59Z

I think the title text above the portals need double-sided materials in case you go to the other side

ngokevin · 2017-06-30T03:19:44Z

r+

philipardeljan · 2017-06-30T05:57:13Z

Am I doing something wrong or maybe I don't get it, should we be able to "click" on them with mouse/trackpad?

edit: similar to this BUT instead of hovering/waiting to load you can Tap/Click on them instead? https://aframe-gallery.glitch.me/

ngokevin · 2017-06-30T06:18:31Z

This is for VR to VR scene traversal.

dmarcos added the work in progress label Jun 23, 2016

cvan reviewed Jun 24, 2016
View reviewed changes

dmarcos force-pushed the link branch from fcfd981 to 4a71384 Compare June 27, 2016 19:35

ngokevin added this to the 0.3.0 milestone Jul 28, 2016

dmarcos force-pushed the link branch 2 times, most recently from 4bcf46b to 599a838 Compare August 9, 2016 01:22

ngokevin modified the milestones: 0.4.0, 0.3.0 Aug 11, 2016

dmarcos added the needs rebase label Aug 21, 2016

ngokevin removed this from the 0.4.0 milestone Oct 24, 2016

ngokevin reviewed Nov 15, 2016

View reviewed changes

cvan added the needs answers / feedback label Nov 15, 2016

dmarcos force-pushed the link branch 2 times, most recently from 05bbec9 to 7134c55 Compare November 27, 2016 04:12

ngokevin added this to the 0.5.0 milestone Dec 18, 2016

ngokevin modified the milestones: 0.6.0, 0.5.0 Feb 2, 2017

dmarcos force-pushed the link branch 2 times, most recently from a892c09 to 95da622 Compare May 1, 2017 17:16

ngokevin removed needs answers / feedback needs rebase labels May 16, 2017

dmarcos force-pushed the link branch 3 times, most recently from 96d1e0b to 63f3fba Compare June 13, 2017 00:37

dmarcos force-pushed the link branch 2 times, most recently from ceb14cb to e16cb9e Compare June 24, 2017 11:37

dmarcos added needs review and removed work in progress labels Jun 24, 2017

dmarcos force-pushed the link branch 3 times, most recently from ddb9260 to e0d06aa Compare June 24, 2017 12:14

ngokevin reviewed Jun 24, 2017

View reviewed changes

ngokevin requested changes Jun 26, 2017

View reviewed changes

dmarcos force-pushed the link branch from e0d06aa to a038a99 Compare June 29, 2017 21:53

Add link component and a-link primitive

c9c6907

dmarcos force-pushed the link branch from a038a99 to c9c6907 Compare June 29, 2017 22:06

dmarcos merged commit 0f0c39e into aframevr:master Jun 30, 2017

ngokevin mentioned this pull request Jun 30, 2017

Add link component #403

Closed

add three scenes for link traversal #1575

add three scenes for link traversal #1575

Conversation

dmarcos commented Jun 23, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cvan Nov 15, 2016 • edited Loading

Choose a reason for hiding this comment

ngokevin Nov 15, 2016 • edited Loading

Choose a reason for hiding this comment

cvan Nov 15, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cvan commented Nov 15, 2016

micahstubbs commented Nov 27, 2016

dmarcos commented Jun 24, 2017

ngokevin Jun 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngokevin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngokevin commented Jun 26, 2017

stevel4857 commented Jun 26, 2017 via email

ngokevin commented Jun 28, 2017 • edited Loading

ngokevin commented Jun 28, 2017 • edited Loading

ngokevin commented Jun 28, 2017 • edited Loading

ngokevin commented Jun 28, 2017

ngokevin commented Jun 28, 2017

ngokevin commented Jun 29, 2017

ngokevin commented Jun 30, 2017

philipardeljan commented Jun 30, 2017 • edited Loading

ngokevin commented Jun 30, 2017

cvan Nov 15, 2016 •

edited

Loading

ngokevin Nov 15, 2016 •

edited

Loading

cvan Nov 15, 2016 •

edited

Loading

ngokevin Jun 24, 2017 •

edited

Loading

ngokevin commented Jun 28, 2017 •

edited

Loading

ngokevin commented Jun 28, 2017 •

edited

Loading

ngokevin commented Jun 28, 2017 •

edited

Loading

philipardeljan commented Jun 30, 2017 •

edited

Loading