microsoft / holojs Goto Github PK
View Code? Open in Web Editor NEWProvides a framework for creating holographic apps using JavaScript and WebGL.
License: MIT License
Provides a framework for creating holographic apps using JavaScript and WebGL.
License: MIT License
The version parameter is still returning the OpenGL string. This will have to be replaced with WebGL 1.0
to achieve compatibility with existing WebGL code (ie. Three.js)
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.
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
It seems depth based LSR places the focus point behind the camera; this probably does not help with hologram stabilization and also breaks mixed reality captures - the holograms are not visible.
I tried to deploy the ThreeJSApp sample to a hololens, but VS2015 says "unexpected error The ID value is not specified", but the SampleApp works fine.
Is this a project setting issue??
Is there a possibility to handle all the gestures in JS code?
Any plans to allow development on mac os Sierra?
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.
Sometimes the picture does not show up, and you have to redeploy. This is suspected to be a race condition in the host library's code for completing promises.
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.)
I want to refer some external javascript libraries. I found that adding an additional file in app.json does not update .vcxproj xml files (or layoutfiles under the Debug folder after clean>rebuild solution ). Where should I explicitly specify an additional .js files to be included?
I've been developing an app using HoloJS and I like it. Currently I am looking for solutions to scan the environment and reconstruct a 3D model from the sensors on HoloLens and display it on a browser.
It would be great to have spatial mapping API directly from HoloJS, not just from Unity3D or DirectX.
A Custom Mixed Reality Capture Record would be great to enable video stabilization and choose video buffer length.
https://developer.microsoft.com/en-us/windows/mixed-reality/mixed_reality_capture_for_developers
https://docs.microsoft.com/en-us/uwp/api/windows.media.core.videostabilizationeffect
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.
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.
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());
We only provide samples that use auto-stereo. ANGLE-holographic has an advanced rendering mode where the stereo effect can be controlled by the script; we should have a sample on how to achieve this.
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?
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?
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.
Does HoloJS provide a way (or intends to provide in the future) to use SpatialGestureRecognizer from the JS files?
Or is it beyond the goal of this library and we are expected to add that functionality via C++ code?
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.
If the directional light source in the ThreeJs sample is removed from the scene, the resulting ThreeJs shaders don't compile. This is caused by the way we re-write those shaders for auto-stereo.
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.
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
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.
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.
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);
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.
Could Microsoft support OpenGLES for C# in mixed reality (HoloLens)
Currently, I am starting this by porting C++ OpenGLES XAML template to C#
It would be great if I could get support for doing this.
With support, we could port these Angle Holographics C++ UWP templates to C# community who prefer NON-Unity3D approach.
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!
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);
Any tips?
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
Is there a possibility or plans to have parts of the view available as "camera-input", so it could be used for processing in a qr scanner?
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
WIC does not properly swap color channels and RGBA values are actually BGRA and colors are wrong.
Hi,
On https://github.com/Microsoft/HoloJS/tree/master/WebSamples, you say that "A sample viewer app is provided (HoloJsWebViewer)"
Where can this be found?
Trying to run the samples, but the web-vr protocol isn't known.
regards, Mario
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.
The text should be gravity-aligned.
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?
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.
The simple WebGL sample crashes after starting.
Hi guys,
One small question, it's support cordova apps with WebGL? Maybe a cordova plugin to support:
"OpenGL ES calls are translated from WebGL calls by the JavaScript app"
Check an example using Canvas/WebGL with Pixi.js => https://github.com/jdnichollsc/IonPhaser
And any example with Microsoft ACE?
What do you think? :)
We had a "cursor" attached to the camera that was showing just fine until yesterday's master's merge. I think it's related to the frustum culling issue.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.