HoloJSWebViewer issue in a webgl bundle app (webpack)

nosy-b commented 7 years ago

Hi, Thanks for the great work! I tried some THREEJS app in the Hololens and it works perfectly!

A single but important issue for me, I have a webgl geospatial application (github.com/itowns/itowns) and I try to use it with HoloJsWebViewer but it doesn't work, it's a module problem I think, let me explain:

iTowns is a web mapping app using THREEJS. It's built with webpack (we get THREEJS and others from npm). So the Main.js we have looks like import * as THREE from 'three'; export { THREE }; export { default as proj4 } from 'proj4'; ... When creating an app using itowns, we can normally access THREE through itowns.THREE but it seems we can't in HoloJsWebViewer, although it works with Edge Browser in the Hololens.

I did a json with itowns.js and a simple test.js (just to test THREE) and incorporated the ThreeJS patches (shaderchunk transpose) and the HolographicCamera directly in my code after doing var THREE = itowns.THREE; Opening it with Edge browser on the Hololens works fine but not with HoloJsWebWiewer. But if I replace itowns.js by three.js in the json it works fine in both.

Do you have any idea? It would be so perfect to be able to use the geospatial app in Hololens (with some easy homography transformations) The json and html js are here: http://www.whenistheweekend.com/itowns/holo/samples.html

Thanks!

nosy-b commented 7 years ago

If that can help: I launched the app on HoloJsWebWiewer through Visual Studio with the Hololens emulator and I got:

TypeError: Invalid operand to 'in': Object expected at Anonymous function ( http://whenistheweekend.com/itowns/holo/itowns.js:5:174270) at e (....)

Reda-S commented 7 years ago

@nosy-b The THREEJS app and the Viewer both rely on the HoloJS project which does not implement HTML and DOM model. You can not for instance use jQuery. So you have to work only with JavaScript...

nosy-b commented 7 years ago

@Reda-S I'm actually using only Javasript, what do you mean?

Almost-Done commented 7 years ago

As @reda-s mentioned, the DOM model covers Canvas, Image, Video and a minimum set of methods for document, window. There is no HTML parser or building a DOM from HTML.

That being said, we can investigate a bit to see what would be required to make your project work. Can you provide a non-minified version of itown.js?

To debug scripts, in Visual Studio start the viewer app in Debug mode and with the script debugger enabled:

nosy-b commented 7 years ago

Thanks for your help :)

Alright I've unminified itowns.js Code for the small test using itowns is here and the json

Looks like there in itowns.js @l:54782:

// IE8-
  } else if (ONREADYSTATECHANGE in cel('script')) {
    defer = function (id) {
      html.appendChild(cel('script'))[ONREADYSTATECHANGE] = function () {
        html.removeChild(this);
        run.call(id);
      };
    };
// Rest old browsers
  } else {

Almost-Done commented 7 years ago

If I got this right, cel('script') tries to create a script DOM element. As HoloJS has very limited DOM support, document.createElement('script') returns null and the 'in' operator does not like it.

Look at HoloJS\HoloJsHost\ScriptingFramework\DOM.js, line 80, for a list of element types handled currently.

There are a couple of options:

Extend DOM.js in HoloJS to support the script element, and other element types required by the library
Make those elements optional in your library such that the script can operate in a limited DOM environment.

nosy-b commented 7 years ago

Ok I see, thanks! I'm gonna check the two different possibilities. By the way what is the roadmap for HoloJS, is it going to be 'replaced' by a WebVR implementation with a Edge support?

Almost-Done commented 7 years ago

I managed to find a more complete, pure JavaScript DOM implementation. See https://github.com/andreasgal/dom.js/

I forked it and made some minor experimental changes to make it suitable for HoloJS: https://github.com/Almost-Done/dom.js

I pushed out a HoloJS branch with a dom.js DOM. See develop/experimental-dom. I added the iTowns sample and it loads and renders:

Note1: there is no spatial input in this experimental branch; with a more standard DOM we'll have to create more suitable events for it.

Note2: Only the VS 2015 solution has been update yet in the experimental branch.

nosy-b commented 7 years ago

Oh, I just see your post now, that's great thanks Cristi! I'll try as soon as I can.

Almost-Done commented 7 years ago

I merged the experimental DOM in master to at least fix the issues mentioned above. Please let me know what other problems you're encountering.

microsoft / HoloJS

HoloJSWebViewer issue in a webgl bundle app (webpack) #94