webvr | PlayCanvas WebGL Game Engine | Augmented Reality library

by playcanvas JavaScript Version: Current License: MIT

X-Ray Key Features Code Snippets Community Discussions(9)Vulnerabilities Install Support

kandi X-RAY | webvr Summary

webvr is a JavaScript library typically used in Virtual Reality, Augmented Reality, Three.js, WebGL applications. webvr has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.

The project contains scripts to run your PlayCanvas application in VR using either a Google Cardboard-style VR headset or (when using special builds of Chrome & Firefox) Oculus Rift and HTC Vive.

Support

Quality

Security

License

Reuse

Support

webvr has a low active ecosystem.

It has 45 star(s) with 16 fork(s). There are 19 watchers for this library.

It had no major release in the last 6 months.

There are 0 open issues and 4 have been closed. On average issues are closed in 1594 days. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of webvr is current.

Quality

webvr has 0 bugs and 0 code smells.

Security

webvr has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

webvr code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

webvr is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

webvr releases are not available. You will need to build from source code and install.

webvr saves you 60 person hours of effort in developing the same functionality from scratch.

It has 156 lines of code, 0 functions and 3 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed webvr and discovered the below as its top functions. This is intended to give you an instant insight into webvr implemented functionality, and help decide if they suit your requirements.

Reserves bindings .
Constructs a new CardDistorter .
Instructs suggestion instructions
The pose sensor .
Resolves a promise .
Fetch a new DDB connection from the DDB database .
Displaying and keyboard tracks .
VRDisplay .
VRDisplay class .
A promise is settled .

Get all kandi verified functions for this library.

webvr Key Features

No Key Features are available at this moment for webvr.

webvr Examples and Code Snippets

No Code Snippets are available at this moment for webvr.

Community Discussions

Trending Discussions on webvr

A-Frame Video out of Multiple Shows Up as Black Screen only on Mobile

In an A-Frame scene, how to make models from Sketchfab appear with correct size and color?

Large (in meters) landscape mesh has artifacts on peaks only at certain scale

Netlify form submission blank with react-final-form plugin

The future of A-frame, https?

Go towards or away from the model in mobile

Change initial position and rotation of a model

ThreeJS WebXR modifies camera properties on re-entering VR the second/third/nth time

Typescript Cannot find offscreencanvas

QUESTION

A-Frame Video out of Multiple Shows Up as Black Screen only on Mobile

Asked 2021-Nov-10 at 20:14

I'm trying to layer multiple transparent .webm videos using A-Frame's to give a pop-out effect, yet some videos just don't load on mobile.

For example, I have three test videos that are suppose to automatically play:

the back video is an mp4 on an as a material
the middle is a .webm file I created in After Effects on an
the front video is also a .webm file I created in After Effects on an

IMG: On Mobile

IMG: On Pc

For some reason the middle video never loads on mobile. I swapped it out with a .mp4 video and that worked fine. So I tried exporting the middle video as an .mp4, however the error still persisted!

I went through some github/stackoverflow and found posts talking about a similar issue (it's apparently been a long-running issue), but none of the fixes/workarounds really worked.

The resources I found:

And my code isn't doing anything fancy (HTML, just body):

...

ANSWER

Answered 2021-Nov-10 at 20:14

Tested what Piotr Adam Milewski commented and it was a resolution issue. When I scaled the video to fit a 1080p ratio, it worked on both devices! Also the linked example he provided was really helpful at solving this!

Source https://stackoverflow.com/questions/69902933

QUESTION

In an A-Frame scene, how to make models from Sketchfab appear with correct size and color?

Asked 2021-Jun-18 at 17:46

I'm trying to do something very basic with a-frame & gltf/glb models, basically want to drop a few models into a scene.

I started with A-Frame's "Hello WebVR" and just tried to add one model from Sketchfab, but every time I manage to make it work...:

The model is huge. Like 100x or 1000x of its "correct" size.
The model is completely dark.

I think I missing some basic understanding in setting up models in a scene.

How could I make models appear correctly, meaning correct size and color?

Here's one of my tries: https://glitch.com/edit/#!/spicy-pretty-singer, just walk back (WASD) A LOT.

If unfamiliar with Glitch: you can see the result by clicking on "Show" at the top, and you can click "remix" (fork) to change the code.

Sample model from Sketchfab (I tried several, same results).

Thanks!

...

ANSWER

Answered 2021-Jun-18 at 17:46

1) Size

The "correct" size is quite is quite a subjective term - if you load the model into a modelling software, lets say blender, then You can check out the original (intented if the converted didn't mess up scaling) dimensions:

It is huge - like 250m x 70m x 90m huge. Keep in mind - in a-frame 1 unit equals one meter.

You can either change it in blender (maya), or just scale the entity:

Source https://stackoverflow.com/questions/68035050

QUESTION

Large (in meters) landscape mesh has artifacts on peaks only at certain scale

Asked 2021-Apr-21 at 18:59

I made a mesh from a Digital Elevation Map that spanned 1x1 degree box of geography, but when I scale the mesh up to 11139m in blender I get these visible jagged shadows on the peaks of the mesh. I'd prefer to not scale everything down but I suppose I can, it just seems like a strange issue I want to better understand.

My goal is to use the landscape in a WebVR application, but when I put this mesh into an Aframe scene it also has this issue. Thanks for any tips!

...

ANSWER

Answered 2021-Apr-21 at 18:59

Quick answer:

I think this may be caused by the clipping start/end values. Also called near/far clipping planes. Adjusting them may fix the issue but also limit the rendering distance.

Longer explanation:

Take a look at this:

It's a simple grayscale, but imagine it is scaled across your entire scene depth (Z depth buffer). The range of this buffer is set by the start/stop clipping (near/far) camera setting.

By default Blender has its start/stop (near/far) clipping set to 0.01 - 1000.
While A-Frame has it like 0.005 - 10000. You may find more information here: A-Frame camera #properties

That means the renderer has to somehow fit every single point in that range somewhere on the grayscale. That may cause overlapping or Z-fighting because it is simply lacking precision to distinguish the details. And that is mainly visible at edges/peaks because the polygons are connected there at acute angles and the program has to round up the Z-values. That causes overlapping visible as darker shadows (most likely the backside of the polygon behind).

You may also want to read more about Z-fighting because it is somewhat related.

Example

Source https://stackoverflow.com/questions/67098808

QUESTION

Netlify form submission blank with react-final-form plugin

Asked 2020-Oct-21 at 00:40

I am using react-final-form to develop a multi-page wizard form but am now stuck on sending my submissions to Netlify.

Netlify has detected my form but on submit doesn't receive my forms data

This is my first time using Netlify to handle form submissions so I'm not sure if I'm doing something wrong on Netlifys side or react-final-forms side.

important im using GATSBY

index.js

...

ANSWER

Answered 2020-Oct-15 at 05:09

Your

tag should have an action and the data provided should have a key-value pair:

Source https://stackoverflow.com/questions/64361151

QUESTION

The future of A-frame, https?

Asked 2020-Jul-29 at 08:49

So I been following A-frame WebVR and learning it since 2015. For me being a Web 'DESIGNER' since 2006, A-frame has been fairly easy to follow and design with, up until A-frame 1.0.0.

It seems now A-frame is becoming extremely cumbersome to work with. My design process was to always design on desktop using a web browser(like Firefox, Chrome, Edge)enter image description here and check for the WEBVR through cardboard. Now with the new updates assets like models and images will not load on any browser. Image assets for a-sky is extremly important in my design process.

And I read all the information about using a https connection, which shouldn't be necessary if your just in the design process. No other HTML application like Jquery, Bootstrap or ReactJS requires this. And I read about using your computer as a local server, again cumbersome, and extremely slow when designing PLUS it didn't work or it was so slow, its impossible to have the patience enough to design with.

I'm at the point of giving up on Aframe and moving on, just like Magic Leap.

So my question is whats the future of Aframe. Do the Aframe creators really expect 'DESIGNERS' to learn this stuff. The promise originally for Aframe was that it would be simple and USER FRIENDLY if your use to building with HTML, CSS and Javascript. It seems that it is gravitating away from that to something else.

...

ANSWER

Answered 2020-Jun-18 at 05:55

HTTPS is enforced by browser vendors to access new APIs. It's not an A-Frame decision. WebXR, DeviceMotion and other APIs that A-Frame relies on are now only available over secure contexts (HTTPS) as per browser policies. Any site, library or framework using any of those APIs is subject to the same restrictions.

Tips:

localhost is not subject to the HTTPS requirement so you can spawn a local server and develop via localhost:port/
Look into port forwarding to test on devices other than your dev machine
Local development servers like budo or webpack-dev-server have https modes using self signed certificates.
Github pages or code hosting platforms like Glitch, Repl.it or Codepen provide https end points out of the box.

Source https://stackoverflow.com/questions/62439297

QUESTION

Go towards or away from the model in mobile

Asked 2020-Jun-03 at 09:08

From the code on my previous answer, I get a WebVR page that works fine in Desktop but in the mobile phone I'm not able to go closer to the model (looks more like a skybox).

Would like to be able to go towards / away from the model (using two fingers going, respectively, away from each other or closer), apart from looking around.

After some searching, found an example of where this functionality I look for is used.

How can I get that same mobile functionality working for my case?

...

ANSWER

Answered 2020-Jun-03 at 09:08

1) Orbit controls

If you want your experience to revolve around a model, moving the camera around it, and zooming in and out - I'd say the orbit controls are exacly what You're looking for:

Source https://stackoverflow.com/questions/62142011

QUESTION

Change initial position and rotation of a model

Asked 2020-Jun-01 at 21:43

Got a simple .html file using A-Frame that loads a specific model.

...

ANSWER

Answered 2020-Jun-01 at 19:46

One needs to add that information in instead, like this

Source https://stackoverflow.com/questions/62139855

QUESTION

ThreeJS WebXR modifies camera properties on re-entering VR the second/third/nth time

Asked 2020-May-17 at 14:57

I'm facing a very weird experience with WebXR API. WebXR API changes the VR camera properties when I re-enter the VR. The camera somehow cuts my objects (shown below) when I re-enter the VR mode the second, third or nth time.

It always works properly (shown below) when I enter VR first time.

I would like to know why the objects are getting cut on the second/third/nth VR attempt and also how to debug WebXR immersive-vr camera properties.

I'm using very basic WebXR API codes as follows:

...

ANSWER

Answered 2020-May-17 at 14:57

Seems like the WebXR session takes the scene camera parameters for the first time it enters VR. Then, on second and subsequent visits the WebXR session sets the camera to default settings. Hence, in order to update the camera properties to be same as scene camera properties, we need to use this session.updateRenderState({ depthFar: 10000 });.In my case my scene camera had depthFar=10000 but WebXR camera resets the depthFar property to 1000 in the second and subsequent visits in VR, which was the reason of frustum culling (image in question).

Source https://stackoverflow.com/questions/61846229

QUESTION

Typescript Cannot find offscreencanvas

Asked 2020-Jan-16 at 09:02

I am attempting to move a Three.js project to TypeScript. When I tried top compile it I would get an error referenced in this issue on the Three.js repo:

https://github.com/mrdoob/three.js/issues/17698

Following those steps I installed @types/offscreencanvas as well as edited my tsconfig.json, but now I get this output when trying to run tsc:

...

ANSWER

Answered 2020-Jan-16 at 09:02

As per my comment to your question

This seems to be a TypeScript version problem, but the version in your package.json seems to be correct. Have you tried to run this from a script within your package.json, in stead of through your terminal?

Source https://stackoverflow.com/questions/59762652

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install webvr

You can download it from GitHub.

Support

The project contains scripts to run your PlayCanvas application in VR using either a Google Cardboard-style VR headset or (when using special builds of Chrome & Firefox) Oculus Rift and HTC Vive.

Find more information at: