Git Product home page Git Product logo

holojs's Introduction

HoloJs

DocumentationSamples

HoloJs is an execution host for JavaScript Augmented and Virtual Reality applications.

HoloJs enables JavaScript rendering to Win32 windows and controls, UWP views, Windows Mixed Reality headsets and the HoloLens through web standard interfaces such as WebGL, WebVR, WebAudio, Gamepad APIs, Canvas, XmlHttpRequest, Image.

Usage

The fastest way to create VR and AR experiences with HoloJs is to use the Spin tool and Visual Studio Code. Spin is a HoloJs execution host that integrates with Visual Studio Code for a seamless run and debug experience. Please refer to VR and AR experiences with Spin for more details.

Alternatively, use the HoloJs Nuget package for embedding it into Win32 and UWP apps. Please refer to HoloJs in Win32 apps and HoloJs in UWP apps for detailed instructions.

Lastly, HoloJs can be built from scratch and customized as needed.

Building HoloJs

Note It is not required to build HoloJs in order to use it. Use the HoloJs Nuget package to embed JavaScript and WebGL in Win32 or UWP apps.

Building instructions for all dependent submodules are provided in the build-instructions directory. Visual Studio 2017 with C++, UWP and CMake support is required. To build Google ANGLE, GN and depot_tools are required.

Dependencies

All dependencies are build time dependencies in the form of git submodules.

  • ChakraCore provides the JavaScript runtime.
  • Google ANGLE provides the WebGL implementation for the Win32 platform.
  • Microsoft ANGLE provides the WebGL implementation for the UWP and HoloLens platform.
  • LabSound provides the WebAudio implementation, including spatial audio rendering.
  • ChakraCore debugger provides the debugger protocol implementation that enables editing and debugging HoloJs apps using Visual Studio Code.
  • Win2D provides the implementation for canvas's 2D context on the Windows platform.
  • ZipLib provides cross platform archive decompression.
  • zxing-cpp provides QR code decoding for the Spin viewer on the HoloLens

holojs's People

Contributors

almost-done avatar arcadiogarcia avatar arguiot avatar bterlson avatar donghaoren avatar mhaviv avatar mholladay avatar microsoft-github-policy-service[bot] avatar mikeriches avatar pepsryuu avatar saadq avatar sebavanmicrosoft avatar sjando avatar svenluijten avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

holojs's Issues

Build Failed with Fatal Errors

Hi,
I am getting the error(attached image) while building the solution as specified in the readme. Couldn't find a solution in the listed Issues. Can you please help in pointing out if I am missing something?

Thanks
Deepak

holojsbuilderror

Build Failed

Hello,

I'm very suprised, that the actual download from https://github.com/Microsoft/HoloJS doesn't compile.
I followed the instructions, but
The build fails with the following error:

for release: '/sdl' and '/await' command-line options are incompatible
for debug: '/RTC1' and '/await' command-line options are incompatible

I'm using VS 2015 Update 3 and Windows 10.

Regards
Rüdiger

Connect ThreeJS to a server via socket.io

My attempt was to send a message from a server to ThreeJSApp.

We wrote a server script and there's a node.js server running, whose IP address was 10.100.200.104 and was able to send messages through 'message'. We tested that any web page connected to the same network with the code below was able to get the message.

var serverIP = 'http://10.100.200.104'; // This should be the IP address that's assigned by your router
var messagePort = '8000';
var socket = io.connect(serverIP + ':' + messagePort);
socket.on('message', function (data) {
    console.log(data);
});

and sure the code should have imported the javascript file from https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js

In the "ThreeJSApp" sample, I simply put the code into app.js from https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js

and wrote the previous code into app.js:

but there were errors when running the

var socket = io.connect(serverIP + ':' + messagePort);

The error messages were
error1
error2

Any tips?

Spatial Sound

We have been working on a solution that needs placing sounds in 3 dimensional space, it would be great to have spatial sound directly from HoloJS.

Why not just build this functionality straight into Edge?

Hey guys! Awesome work, you're late to the party though :) https://github.com/lwansbrough/HolographicJS

Since you guys are working for MS, is there any work being done to integrate the work done here into the Edge platform? I want to be able to do canvas.getContext('webgl-holographic') and either render straight into the shell, or request to take over the user's holographic space for rendering my own space.

I was developing HolographicJS as sort of a short term solution to this problem (though it may make some sense for some people to use this to get JS holograms on the store.)

Threejs sample is not supporting latest version Three.js

ThreeJs sample is using some older version and is needed to adjust sample for latest version.

In file app.js
this._holographicViewMatrix.elements.set(window.getViewMatrix());
replace with
this._holographicViewMatrix.fromArray(window.getViewMatrix());

THREE.Line support

Hey HoloJS maintainers. I'm trying to build some lines.
I'm starthing with this simple snippet for lines in THREE.js:
https://threejs.org/docs/api/objects/Line.html

And then converting it into BufferGeometry

    var material = new THREE.LineBasicMaterial({
  	    color: 0x0000ff
    });
    var geometry = new THREE.BufferGeometry();
    var vertices = new Float32Array( [
        -10.0, 0.0,  0.0,
        0.0, -10.0,  0.0,
        10.0,  0.0,  0.0,
    ] )

    geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) )

    var line = new THREE.Line( geometry,  );
    line.name = "LINE";
    scene.add( line );

Works just fine in a Fiddle both in Chrome and Edge.

https://jsfiddle.net/epr46k0z/1/

But fails in HoloJS.

I'm working with the demo ThreeJS example included in the repo, so I've got the sphere, camera and point light objects. Removed the others for simplicity. And I'm logging the different objects in the .updateMatrixWorld() method that starts at line 11028 in the THREE.js release provided in the repo, and it looks like the issue occurs after updating the last of the 4 objects, or before the next update of the line object.

log: update children
log: LINE
log: update children
log: SPHERE
log: update children
log: CAMERA
log: update children
log: POINT
D3D11 ERROR: ID3D11Device::CreateVertexShader: Shader uses ability to feed viewport and/or array index from any shader feeding the rasterizer, but the device does not support this. To check for support, check device caps via the CheckFeatureSupport() API [ STATE_CREATION ERROR #166: CREATEVERTEXSHADER_INVALIDSHADERBYTECODE]
Exception thrown at 0x77222052 in ThreeJSApp.exe: Microsoft C++ exception: _com_error at memory location 0x01ED8990.
D3D11 ERROR: ID3D11Device::CreateVertexShader: Shader uses ability to feed viewport and/or array index from any shader feeding the rasterizer, but the device does not support this. To check for support, check device caps via the CheckFeatureSupport() API [ STATE_CREATION ERROR #166: CREATEVERTEXSHADER_INVALIDSHADERBYTECODE]
Exception thrown at 0x77222052 in ThreeJSApp.exe: Microsoft C++ exception: _com_error at memory location 0x01ED8990.
Exception thrown at 0x77222052 in ThreeJSApp.exe: Microsoft C++ exception: Js::JavascriptExceptionObject at memory location 0x01EDA534.
Failure in file c:\users\nick sippl\desktop\projects\holojs\holojs\holojshost\objectevents.h, line 52
Failure in file c:\users\nick sippl\desktop\projects\holojs\holojs\holojshost\windowelement.cpp, line 149
Failure in file c:\users\nick sippl\desktop\projects\holojs\holojs\holojshost\windowelement.cpp, line 149

I also noticed this note in the three.js docs
https://threejs.org/docs/api/materials/LineBasicMaterial.html

.linewidth

Controls line thickness. Default is 1.

Due to limitations in the ANGLE layer, with the WebGL renderer on Windows platforms linewidth will always be 1 regardless of the set value.

Which doesn't explain the issue as far as I can tell... but does allude to some specifics of ANGLE.
I'm going to dive into https://github.com/Microsoft/angle/tree/88a9dfb0dcaa57f7be41dda39bde901b21b67364/samples a bit to see if I can get a better sense of what's going on, but seems like Line geometries ought to be supported.

Cannot load FBX models

What i thought would be somewhat simple, seems to not work.

I added a basic .fbx file in the ThreeJS/Scripts folder (alongside texture.png). I then added the reference to the file in the Solution Explorer, I ensured that Content was set to true. So at this point my 'example.fbx' should behave the same as 'texture.png'.

However when I try to load the fbx like so:

var fbxLoader = new THREE.FBXLoader();
var path = 'example.fbx';
fbxLoader.load(path, function (object) {
   //scene.add(object);
    //onLoad();
}, onProgressModel, onErrorModel);

There is an exception saying it cannot find the file.

Please help! Thank you

Cannot capture this app in video

I have deployed the app in my hololens & can run it fine. However, this holograph (the green box) does not get captured in the video that I am trying to take and share with few other folks.
I could, however, take video of another full screen app that I created using Unity.. So, it seems that is not about full screen apps in general.
Please let me know is there is something that I need to do to have this object get captured in video.

HoloJSWebViewer issue in a webgl bundle app (webpack)

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!

ThreeJSApp - XMLHttpRequest - Access violation

The folowing code in app.js:
var request = new XMLHttpRequest(); request.open('GET', 'http://xxx', true); request.onload = function () { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); } else { // We reached our target server, but it returned an error } }; request.onerror = function () { // There was a connection error of some sort }; request.send(null);
give me the following error:
Unhandled exception at 0x76F10AAE (ucrtbase.dll) in threejsapp.exe: 0xC0000005: Access violation reading location 0x3DC87857.

WebRTC/ORTC support for peer to peer messaging

One of the biggest things missing from HoloLens right now is a good system for doing P2P messaging. Even on the Unity side, there's a lack of clear support for direct communication between HoloLenses. IIRC it requires the sharing service, which would be more akin to web sockets in JS. It also requires setting up a server, whereas with WebRTC you just need a STUN service.

It would be great if this middleware provided the WebRTC and/or ORTC APIs so we could build P2P libraries for our apps. Perhaps even a few high level P2P services could be created for generic tasks: sharing location/orientation data between multiple devices and generic binary/text messaging between devices.

Can't correctly load jpg image format

Loading a jpg using three : new THREE.TextureLoader().load( "image.jpg" ) seems to mix rgba channels. (code works fine in Edge)
bugjpg

Loading the same image in png works (colored image of the earth)

HttpClient.GetAsync() does not return a response

Hi HoloJS,

We have an existing application that uses ThreeJS in the browser and requests JSON from a server using XmlHttpRequest (inside THREE.FileLoader) which I am trying to get running in HoloJS.

In HoloJsHost.XmlHttpRequest.DownloadAsync() the HttpClient.GetAsync() method sends the request to the server. I can see in the server's console that the request comes through and the JSON is produced, however I never get either a success or failure response message.

Thanks.

Console.log does not print in Output window

The console methods (console.log, console.error, etc) currently only output to an array viewable in the debugger. Would be a nice for debugging if these outputs were directly viewable in the Output window in Visual Studio.

console.error() is undefined

JavaScript runtime error: Object doesn't support property or method 'error'

warn, and log currently exist, should probably add support for the rest (info, error, etc.) to support existing JS libraries that may use them.

How do we use XXX WebGL library with HoloJS?

Suppose I like Babylon, or PlayCanvas, or Three.js, or my own custom WebGL engine.

How do I use it in HoloJS?

I noticed HoloJS has it's own shaders, which makes me think I have to use HoloJS instead of one of those other libraries, as an alternative to those.

Draw lines

I tried drawing lines but did not see the them:

    let lineGeometry = new THREE.Geometry();
    let lineMaterial = new THREE.LineBasicMaterial({color: 0x55555, linewidth: 10});

    lineGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
    lineGeometry.vertices.push(new THREE.Vector3(0, 0, -0.5));
    lineGeometry.vertices.push(new THREE.Vector3(0, 0.2, -0.5));
    lineGeometry.vertices.push(new THREE.Vector3(0.2, 0.2, 0));
    lineGeometry.vertices.push(new THREE.Vector3(0.5, 0.5, 0));

    let test_line = new THREE.Line(lineGeometry, lineMaterial);

    scene.add(test_line);
    test_line.frustumCulled = false;
    camera.position.set(0, 0, 1);

SpatialInput issue on any hand gesture

Once I start any hand gesture, the “SpatialInput.cpp” is logging an error on the output window:
Failure in file ..spatialinput.cpp, line 82

Line # 82 of spatialinput is: “EXIT_IF_JS_ERROR(JsDoubleToNumber(x, xParam));”

This prevent the JavaScript callback function to be called back.
When I check the returned “JsErrorCode” : it is “JsErrorNoCurrentContext”, so the context has been lost somehow.

The HoloLens OS that I am using is: 10.0.14393.1198

Frame rate & draw calls

The frame rate drops below 60fps once we have more than 30 draw calls, no matter what we are drawing and no matter what material we are using.
If we are debugging the solution it only takes 8 draw calls for the framerate to start dropping, on release we can get up to 30 draw calls before the rate start dropping.

THREE.WebGLProgram error: "extension directive must occur before any non-preprocessor tokens in ESSL3"

Hi HoloJS,

There are errors from ThreeJS default shaders (I have observed MeshBasicMaterial and MeshPhongMaterial) in THREE.WebGLProgram: "extension directive must occur before any non-preprocessor tokens in ESSL3" which we do not see in any browser. I commented out "customExtensions" from prefixFragment in WebGLProgram and the errors go away but I don't know if there are side-effects doing this.

Thanks.

The cube is not shown

After building and deploying the SampleApp project successfully to the HoloLens, I tried to execute the app in debug mode. Visual Studio did not report any error or exception, but after waiting a couple of minutes for the sample to load it did not render anything. If I understand correctly, a textured spinning cube should appear somewhere around me, am I missing something? What could be the issue?

Multiple shader support

Currently the automatic stereo rendering and projection used by HoloJS only works with one active shader at a time. Ideally HoloJS should be able to support applications using any number of shaders.

Perhaps instead of automating this process, all the relevant information (pose, left/right view matrices, left/right projection matrices) could be exposed to javascript allowing all shaders to utilise it. WebVR does something very similar to this. In fact, maybe it makes sense to expose the information via a WebVR-compatible API? The automated solution could be still be optionally available for ease-of-use in smaller applications.

Support for Three js is missing

Do you guys have any plans of bringing in support for three js? If so then it will be great for developers. There is a very similar impelmentation in gitgub called HolographicJS (https://github.com/lwansbrough/HolographicJS) just like yours. That seems to have support for three.js.
If you don't have plans then can you please guide me on how to include it? I have few implementations in three.js that I would like to bring into hololens. Thanks

setInterval causes JavascriptExceptionObject in ThreeJSApp

Hi,
I tried to run the ThreeJsApp example but when I try to use e.g.
setInterval(function() { console.log("test");}, 5);
the exception is thrown.
This seems to me a very standard functionality but can't get it working in here.

Any suggestions please?

Help!!Can not deploy to a HoloLens!

I clone the repo and update the submodule, sample app and three app can work on Hololens emulator, but when I want to deploy it to my HoloLens through wifi, i go into Properties and select remote Machine in debugging pane, the remote ip doesn't work, it says an unsupported debugging options when i select remote Machine.. The c# project which is generated from Unity works well in my Hololens through Wifi. Does any one know the reason?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.