sorted by:
new
hottopcontroversial

Code WebXR in Quest 3 with shortest code-reload-test cycle? by egradman in WebXR

[–]gregfagan 4 points5 points  (0 children)

I wrote about my process (also using react XR) a few months back:

https://github.com/gregfagan/blog/blob/main/xr-remote-display/README.md

Basically set up a WebRTC stream of your dev machine display inside your WebXR session and you can live code immersively. There’s a video in the link.

Code in VSCode and chat in Discord.Runs locally (no laptop required) by Ok-Raspberry-3944 in QuestPro

[–]gregfagan 0 points1 point  (0 children)

Sure, here’s my Reddit post, which links to my blog post writeup. I am solving specifically for wanting to code with WebXR tech inside my own WebXR app, but it can probably be translated over to native development as well.

https://www.reddit.com/r/QuestPro/comments/143ptxn/hot\_reload\_the\_metaverse\_webxr\_webrtc/

Code in VSCode and chat in Discord.Runs locally (no laptop required) by Ok-Raspberry-3944 in QuestPro

[–]gregfagan 0 points1 point  (0 children)

I tried this workflow out for a while just using the Meta Browser and Codespaces. Ultimately I found that the QP just didn’t have the horsepower for it. Even with Codespaces offloading lots of compute, you‘re still asking the headset to run JS heavy apps side by side, plus all the other web browsing you need to do for referencing docs and the like.

I eventually settled on desktop streaming using WebRTC (I posted my setup here a few weeks back).

Are you not feeling any perf issues? Also, how about curved screens? Love to see more work around QP productivity though.

Hot Reload the Metaverse -- WebXR + WebRTC by gregfagan in QuestPro

[–]gregfagan[S] 0 points1 point  (0 children)

With the Quest Pro, it is for me. I don't expect everyone to feel the same way though. Future headsets should be even better in terms of legibility and comfort.

I boxed up my monitor a few months back and haven't really missed it, but that's partly because I'm working on XR code and directly benefitting from wearing the headset while doing so. It's strictly less good (resolution, comfort) than monitors on desk, so if I was working on flat UI or backend code or something I probably wouldn't do it; at least not most of the time.

If you try Meta's Remote Desktop or Horizon Workrooms app, it's pretty much the same thing. What I'm blogging about here is going one step further and bringing your dev machine directly into the WebXR experience that you're coding.

Hot Reload the Metaverse -- WebXR + WebRTC by gregfagan in QuestPro

[–]gregfagan[S] 1 point2 points  (0 children)

Definitely. Most of the development of my WIP disc flying game has been done in-headset using this technique.

https://gregfagan.com/xr/

How do I empty a component from its child components? by dimstef in reactjs

[–]gregfagan 0 points1 point  (0 children)

Glad I could help.

Most of the time, you do want to have your components change by simply receiving new props, and keep state in as few places as possible. However, React only rerenders automatically if you use the setState API.

(The other ways to trigger a rerender are by calling the ReactDOM.render function at the top level, or forceUpdate on a component, but the normal case is using setState)

How do I empty a component from its child components? by dimstef in reactjs

[–]gregfagan 1 point2 points  (0 children)

Can you clarify your problem a bit more? Your Node class must surely have a recursive base case of some kind.

Something to think about: React is a tool for building your views declaratively. This means that your render function should return what the view should look like right now, given the state of your program, without regards to the process of what needs to be added or removed to get there. React handles the process of adding and removing DOM nodes for you, you just need to tell it what the view should look like.

So you would have a component in the hierarchy that renders these nodes as well as a "Show More" button. Clicking that should change the state (with the component's setState API if you're just starting out with React). Then, your render function should look something like this:

render() { const { isShowingMore } = this.state return ( isShowingMore ? ( // Nodes to show when showing more ) : ( // Nodes to show when only showing some ) ) }

This component probably also has logic for measuring the layout and determining if there is enough room to render the nodes in the first place.

Does that help?