⭐ Bringing WebXR to Unity 3D ! B-)
Home Page: https://rufus31415.github.io/webxr/MRTK-HandInteraction/
License: MIT License
🌐 Website : https://rufus31415.github.io
🐦 Twitter : https://twitter.com/rufus31415
📧 Mail : [email protected]
👾 Discord : Rufus31415#2440
Refactor project :
With Unity 2020, by default, the rendering of the 2 eyes is not correct:
The problem does not occur on other browsers
On the Quest 1 : window.devicePixelRatio = 0.800000011920929
Minimal.Framework.js :
function _JS_SystemInfo_GetPreferredDevicePixelRatio() {
return Module.devicePixelRatio || window.devicePixelRatio || 1
}Either add the property devicePixelRatio: 1 in the config object of index.html or force Module.devicePixelRatio in SimpleWebXR.jspre
Operations done in jspre could be done in jslib
see : mrdoob/three.js#20938
Hello there,
i forked Unity-Technologies/arfoundation-demos and setup the project in Unity 2019.4.13f1 as described here by adding the 3 mentioned files the Unity Asset folder and attachting SimpleWebXR MonoBehavior on a game object called WebAR to my scene (commit).
I fired up a simple HTTP Server python -m SimpleHTTPServer 8080 and a tunnel via ngrok http --host-header=rewrite 8080 to access index.html from my actual smartphone (Apple iOS) via a public URL.
The websites loads extremly slow (2-3 Minutes) with a 100Mbit internet connection. After loading finished, there is no camera image (just a black screen) with a Text saying "Wait for tracking to begin."
The Webserver also returns a 404:
GET /sharedassets0.resource 404 File not found
The file sharedassets0.resource is not part of the bundle (not sure if this is important).
Here are my WebGL Player Settings (maybe i forgot a important checkmark somewhere?)
Sidenote: The arfoundation-demos are working as expected when i export the iOS and Android Player and run it on my test devices.
Is this possible? Are their examples?
In some cases, it is desirable to have camera settings like layers, tags and so on exposed for customisation, to enable stereoscopic effects or hiding layers.
Having the camera rig generated at run time is a barrier to this kind of customisation.
Tested on Oculus Quest Browser
would be nice to get anti-aliasing working without the framerate hit. For example 4x MSAA
Tested on Oculus Quest Browser
Hi, I am trying to replicate your show case WebXR on Android with MRTK.
I want to enable Spatial Awareness like this.
But, I am not able to do it.
I enabled it in MTRK ToolKit. But it doesn't work,
What should I do to activate it?
My current set up:
Unity 2019.4.23
MRTK 2.7
Android 8
Thank you for your help
It says "float array", but is "byte array" incorrect?😃
Hello,
since we have experimental features for WebXR and Safari since iOS 16, I think we should start looking into it. In general, this needs to be enabled first in the Settings for Safari (Advanced > Experimental Features > check all the WebXR thingies).
However, we weren't able to run our application, which works in "WebXR Viewer".
Any ideas, what is missing? I can't debug it right now, since I don't have a Mac at hand but I'll try later.
Hi,
Thanks for putting the tool together.
I'm wondering if it supports URP?.
I managed to succesfully run it using surface shader (3D project) but for URP I'm getting errors.
Tried 2 times once with clean URP project and second with upgrade of existing working surface-shader project to URP - same errors.
Thanks,
Chris
PS: error if that helps at all
exception thrown: RangeError: Maximum call stack size exceeded,RangeError: Maximum call stack size exceeded
at stackSave (https://192.168.1.114/Build/0.1.wasm:wasm-function[798]:0x6d82e)
at https://192.168.1.114/Build/0.1.framework.js:27278:36
at invoke_ii (https://192.168.1.114/Build/0.1.framework.js:17358:11)
at __ZL34GetTypeInfoFromTypeDefinitionIndexi (https://192.168.1.114/Build/0.1.wasm:wasm-function[37763]:0xdcfdf6)
at __ZN6il2cpp2vm14GlobalMetadata21GetTypeInfoFromHandleEPK27___Il2CppMetadataTypeHandle (https://192.168.1.114/Build/0.1.wasm:wasm-function[37824]:0xdd184b)
at __ZN6il2cpp2vm14GlobalMetadata19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37823]:0xdd183e)
at __ZN6il2cpp2vm13MetadataCache19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37820]:0xdd17fc)
at __ZN6il2cpp2vm4Type8GetClassEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37724]:0xdcebaf)
at __ZN6il2cpp2vm5Class14FromIl2CppTypeEPK10Il2CppTypeb (https://192.168.1.114/Build/0.1.wasm:wasm-function[37706]:0xdce56f)
at __ZL18FromTypeDefinitioni (https://192.168.1.114/Build/0.1.wasm:wasm-function[37764]:0xdd0126)
at _GC_call_with_alloc_lock (https://192.168.1.114/Build/0.1.wasm:wasm-function[39292]:0xe0133e)
at Object.dynCall_ii (https://192.168.1.114/Build/0.1.framework.js:27543:37)
at invoke_ii (https://192.168.1.114/Build/0.1.framework.js:17360:30)
at __ZL34GetTypeInfoFromTypeDefinitionIndexi (https://192.168.1.114/Build/0.1.wasm:wasm-function[37763]:0xdcfdf6)
at __ZN6il2cpp2vm14GlobalMetadata21GetTypeInfoFromHandleEPK27___Il2CppMetadataTypeHandle (https://192.168.1.114/Build/0.1.wasm:wasm-function[37824]:0xdd184b)
at __ZN6il2cpp2vm14GlobalMetadata19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37823]:0xdd183e)
at __ZN6il2cpp2vm13MetadataCache19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37820]:0xdd17fc)
at __ZN6il2cpp2vm4Type8GetClassEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37724]:0xdcebaf)
at __ZN6il2cpp2vm5Class14FromIl2CppTypeEPK10Il2CppTypeb (https://192.168.1.114/Build/0.1.wasm:wasm-function[37706]:0xdce56f)
at __ZL18FromTypeDefinitioni (https://192.168.1.114/Build/0.1.wasm:wasm-function[37764]:0xdd0126)
at _GC_call_with_alloc_lock (https://192.168.1.114/Build/0.1.wasm:wasm-function[39292]:0xe0133e)
at Object.dynCall_ii (https://192.168.1.114/Build/0.1.framework.js:27543:37)
at invoke_ii (https://192.168.1.114/Build/0.1.framework.js:17360:30)
at __ZL34GetTypeInfoFromTypeDefinitionIndexi (https://192.168.1.114/Build/0.1.wasm:wasm-function[37763]:0xdcfdf6)
at __ZN6il2cpp2vm14GlobalMetadata21GetTypeInfoFromHandleEPK27___Il2CppMetadataTypeHandle (https://192.168.1.114/Build/0.1.wasm:wasm-function[37824]:0xdd184b)
at __ZN6il2cpp2vm14GlobalMetadata19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37823]:0xdd183e)
at __ZN6il2cpp2vm13MetadataCache19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37820]:0xdd17fc)
at __ZN6il2cpp2vm4Type8GetClassEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37724]:0xdcebaf)
at __ZN6il2cpp2vm5Class14FromIl2CppTypeEPK10Il2CppTypeb (https://192.168.1.114/Build/0.1.wasm:wasm-function[37706]:0xdce56f)
at __ZL18FromTypeDefinitioni (https://192.168.1.114/Build/0.1.wasm:wasm-function[37764]:0xdd0126)
at _GC_call_with_alloc_lock (https://192.168.1.114/Build/0.1.wasm:wasm-function[39292]:0xe0133e)
at Object.dynCall_ii (https://192.168.1.114/Build/0.1.framework.js:27543:37)
at invoke_ii (https://192.168.1.114/Build/0.1.framework.js:17360:30)
at __ZL34GetTypeInfoFromTypeDefinitionIndexi (https://192.168.1.114/Build/0.1.wasm:wasm-function[37763]:0xdcfdf6)
at __ZN6il2cpp2vm14GlobalMetadata21GetTypeInfoFromHandleEPK27___Il2CppMetadataTypeHandle (https://192.168.1.114/Build/0.1.wasm:wasm-function[37824]:0xdd184b)
at __ZN6il2cpp2vm14GlobalMetadata19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37823]:0xdd183e)
at __ZN6il2cpp2vm13MetadataCache19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37820]:0xdd17fc)
at __ZN6il2cpp2vm4Type8GetClassEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37724]:0xdcebaf)
at __ZN6il2cpp2vm5Class14FromIl2CppTypeEPK10Il2CppTypeb (https://192.168.1.114/Build/0.1.wasm:wasm-function[37706]:0xdce56f)
at __ZL18FromTypeDefinitioni (https://192.168.1.114/Build/0.1.wasm:wasm-function[37764]:0xdd0126)
at _GC_call_with_alloc_lock (https://192.168.1.114/Build/0.1.wasm:wasm-function[39292]:0xe0133e)
at Object.dynCall_ii (https://192.168.1.114/Build/0.1.framework.js:27543:37)
at invoke_ii (https://192.168.1.114/Build/0.1.framework.js:17360:30)
at __ZL34GetTypeInfoFromTypeDefinitionIndexi (https://192.168.1.114/Build/0.1.wasm:wasm-function[37763]:0xdcfdf6)
at __ZN6il2cpp2vm14GlobalMetadata21GetTypeInfoFromHandleEPK27___Il2CppMetadataTypeHandle (https://192.168.1.114/Build/0.1.wasm:wasm-function[37824]:0xdd184b)
at __ZN6il2cpp2vm14GlobalMetadata19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37823]:0xdd183e)
at __ZN6il2cpp2vm13MetadataCache19GetTypeInfoFromTypeEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37820]:0xdd17fc)
at __ZN6il2cpp2vm4Type8GetClassEPK10Il2CppType (https://192.168.1.114/Build/0.1.wasm:wasm-function[37724]:0xdcebaf)
at __ZN6il2cpp2vm5Class14FromIl2CppTypeEPK10Il2CppTypeb (https://192.168.1.114/Build/0.1.wasm:wasm-function[37706]:0xdce56f)
at __ZL18FromTypeDefinitioni (https://192.168.1.114/Build/0.1.wasm:wasm-function[37764]:0xdd0126)
printErr @ 0.1.loader.js:69
callMain @ 0.1.framework.js:29112
doRun @ 0.1.framework.js:29135
run @ 0.1.framework.js:29147
runCaller @ 0.1.framework.js:29083
removeRunDependency @ 0.1.framework.js:1163
(anonymous) @ 0.1.loader.js:697
Promise.then (async)
(anonymous) @ 0.1.loader.js:680
callRuntimeCallbacks @ 0.1.framework.js:1000
preRun @ 0.1.framework.js:1029
run @ 0.1.framework.js:29125
runCaller @ 0.1.framework.js:29083
removeRunDependency @ 0.1.framework.js:1163
receiveInstance @ 0.1.framework.js:1261
receiveInstantiatedSource @ 0.1.framework.js:1276
Promise.then (async)
doNativeWasm @ 0.1.framework.js:1289
(anonymous) @ 0.1.framework.js:1359
unityFramework @ 0.1.framework.js:21076
(anonymous) @ 0.1.loader.js:674
Promise.then (async)
loadBuild @ 0.1.loader.js:673
(anonymous) @ 0.1.loader.js:717
createUnityInstance @ 0.1.loader.js:702
script.onload @ (index):93
load (async)
(anonymous) @ (index):92
It would be nice to simulate hand/controller and view ports inside the Unity Editor
Only remove Skybox and use SolidColor transparent in AR
Do you know of any blockers for supporting 2.7.3? I can take a stab at it, but would love some guidance if it's already been attempted. Thanks!
Hello,
Thank you for this very useful package.
I am new to WebGL, but I have some experience with MRTK.
I am trying to use teleportation in the Oculus browser. But I can't get it to work.
In MixedRealityToolkit it is active.
Do I have to do something else to activate it?
Merci!
I recently tried the latest version of your plugin, and found that the scale of the scene is now based on the height of the headset at player start. The camera in my editor scene is at a seated height. If I start the build when I am standing, scene scale is huge and I feel like a hobbit. If I start the scene when crouched, scene scale is tiny and I feel like a giant. It is very important to my use (showing clients models of real world exhibit spaces) to have the scale in VR match the scale in Unity. A previous version of your plug-in that I have used (dated Dec 3) did not have this issue.
Hey there,
I was looking for an webxr exporter for my projects (mainly AR on phones) and on testing the examples I saw that the painter is not working on my device (Samsung S8) in any of the browsers. Camera has passthrough but there is not paint working.
When a session ends, the WebGL app should return to a 2D usable state. Now, the canvas is black
I have problems to make the spectator example work.
Desktop:
After entering ip address of hololens the browser shows a message "an insecure websocket connection may not be initiated from a page loaded over https".
In Chrome this can be bypassed by site settings > Insecure content > Allow.
After this bypass the example works
Ipad:
Nothing happens after entering the ip address. I suspect the socket connection is also blocked but without message.
Android:
Somehow I can only load the app in Firefox, but not in Chrome because of memory limitations.
Firefox also fails with the message "SecurityError: The operation is insecure". I didn't find a way to bypass this on Firefox.
Is it possible to switch to secure websocket in the spectator example?
Example : https://immersive-web.github.io/webxr-input-profiles/packages/viewer/dist/index.html
Profile list : https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles/profilesList.json
GLB model : https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles/oculus-touch/right.glb
GLB reader : https://github.com/KhronosGroup/UnityGLTF
Hello, I add the SimpleWebXR.unitypackage, and build Paint scene. But I stuck on loading.
In the new versions of Unity (from 2019), the rendering of the two eyes takes place in the bottom left corner.
it seems that for near interaction with the hands, the position used is that of the wrist whereas it should be the position of the index finger.
When a WebXR session has started, some device, like XRViewer on iOS, still handle touch. So touch is handled by WebXR controller and touch
I'm having trouble starting the camera / rig at a designated position. If I move it to X-3 for example, it always starts at X 0.
Tested on Oculus Quest Browser
I tried your project Simple-WebXR-Unity Hand Detection Example and MRTK Hand Interaction. But both of them just can't do hand tracking on my browser. The MRTK Hand Interaction only can interact with the 3d object using controller. I use Magic Leap Helio browser. Do you know why i can't do the hand tracking ?
Is it possible to create one and if are there examples? Is it posible to make it work on android?
Is there a way to trigger vibration feedback on the controllers?
I open this for example : https://rufus31415.github.io/webxr/PaintExample/
From the mobile. Unity WebGL project completely loads and stays black, nothing happens.
I tried other examples as well, same result.
Left eye is Camera.main
Right eye should be a clone of LeftEye so that he gets the same properties
With WebXRViewer for iOS, it is very difficult to move an object precisely. The object is always moved outside the screen
Implement Hand tracking according to this spec : https://github.com/immersive-web/webxr-hand-input
Touch events are not triggered when a session is active on Chrome on Android
In oculus browser not detect VR mode, only detect AR Mode.
How can I force the VR mode on the Oculus Quest and keep the AR mode enabled on the smartphone?
thx!
Without this package, my build loads webgl in mobile and desktop browser at the same resolution as the assets are set to in unity. For example, a picture at 1080p is 1080p on mobile and desktop. Once this package is attached to my project, the same build with no additional changes will visually look like maybe 720p on desktop and like 140p on mobile browser. Is this forced somewhere in a script? I know it is not my webgl template because I use the same one, the only difference is adding this package? Can I remove this forced reduction manually without breaking anything? Thanks.
There are now 2 shared arrays (float and byte).
To limit the number of index computations and bugs, it would be interesting to have the following shared arrays:
Byte arrays :
Float arrays :
On Quest, start position is not zero contrary to other browsers.
For MRTK : move playspace to camera.main.transform.position at startup
Really cryptic error from unity.
Building Library\Bee\artifacts\WebGL\build\debug_WebGL_wasm\build.js failed with output:
C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\tools\acorn-optimizer.js:1845
throw err;
^
SyntaxError: Unexpected token (4460:62)
var textEncoder={encoding:"utf-8",encode:encode(input = '') {
^
at Parser.pp$4.raise (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:2927:15)
at Parser.pp.unexpected (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:698:10)
at Parser.pp.expect (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:692:28)
at Parser.pp$3.parseObj (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:2563:14)
at Parser.pp$3.parseExprAtom (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:2302:19)
at Parser.pp$3.parseExprSubscripts (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:2129:21)
at Parser.pp$3.parseMaybeUnary (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:2106:19)
at Parser.pp$3.parseExprOps (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:2041:21)
at Parser.pp$3.parseMaybeConditional (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:2024:21)
at Parser.pp$3.parseMaybeAssign (C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\node_modules\acorn\dist\acorn.js:1997:21) {
pos: 166718,
loc: Position { line: 4460, column: 62 },
raisedAt: 166719
}
emcc2: error: '"C:/Program Files/Unity/Hub/Editor/2021.3.3f1/Editor/Data/PlaybackEngines/WebGLSupport/BuildTools/Emscripten/node/node.exe" "C:\Program Files\Unity\Hub\Editor\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\tools\acorn-optimizer.js" C:\Users\KEVINA~1\AppData\Local\Temp\emscripten_temp_gz1uwi0k\build.js.pp.js AJSDCE minifyWhitespace' failed (1)
UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)
I found a related thread, where the issue was happening in another javascript plugin, but the solution seems unrelated.
endel/NativeWebSocket#53
UpdateCamera(WebXRViewEyes eye) is causing black flickering
When I disable that function, no flickering
I just tried the SimpleWebXR color picker demo in the Magic Leap Helio browser and it only displays for the left eye. Specifically it is showing both eye displays in the left eye. I am still able to interact and walk around the UI at 30FPS.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.