WebVR | Learn to Program WebVR With Examples | Learning library
kandi X-RAY | WebVR Summary
kandi X-RAY | WebVR Summary
Learn to Program WebVR With Examples.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Setup mesh buffers .
- Parse a JSON model .
- Set the given program
- Init shader code
- Try to find holes in the outer circle .
- Render a face .
- Default prefetch function
- intersects two points
- Upload a texture to the specified texture
- Computes the value of a Bezier at a point .
WebVR Key Features
WebVR Examples and Code Snippets
Community Discussions
Trending Discussions on WebVR
QUESTION
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 amaterial - the middle is a
.webmfile I created in After Effects on an - the front video is also a
.webmfile I created in After Effects on an
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:
- https://aframe.io/docs/1.2.0/introduction/faq.html#can-i-render-youtube-videos-as-a-texture
- https://github.com/aframevr/aframe/issues/316#issuecomment-170182397
- https://www.reddit.com/r/WebVR/comments/40b3d2/using_aframe_video_works_on_pc_but_is_black_on/
And my code isn't doing anything fancy (HTML, just body):
...ANSWER
Answered 2021-Nov-10 at 20:14Tested 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!
QUESTION
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:461) 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:
QUESTION
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:59I 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: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.
ExampleQUESTION
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:09Your
action and the data provided should have a key-value pair:
QUESTION
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:55HTTPS 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.
QUESTION
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:08If 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:
QUESTION
Got a simple .html file using A-Frame that loads a specific model.
...ANSWER
Answered 2020-Jun-01 at 19:46One needs to add that information in instead, like this
QUESTION
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:57Seems 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).
QUESTION
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:02As 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?
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install WebVR
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
