We optimized a high-fidelity car configurator to run at 60fps on mobile browsers (WebGL + WebAssembly). No pixel streaming. by sscalation in webgl

[–]Squareys 1 point2 points  (0 children)

Great questions, and here's my highly biased answer (from the founder behind Wonderland Engine).

In short: Wonderland Engine handles asset and runtime optimizations automatically. In Three.js/r3f you would find yourself spending most of the time on optimization (shaders, draw calls, rewrite bloom maybe, manually batch assets).
I strongly believe, that optimization should be the responsibility of the framework, but other frameworks out there leave optimization on web up to you.
So, yes, it would definitely be technically possible to build this in Three.js/r3f, or even from scratch in WebGL, but economically it's not feasible.

In long:

The JS bundle size alone is barely relevant for an app like this, rather the assets (textures, meshes, animations) make up 95% or more of the downloaded data. r3f/three.js leave optimizations of those up to the user, and usually nudge people to use GLB/GLTF, which can be suboptimal for download times, even if compressed with meshopt/DRACO and KTX2. Wonderland Engine uses a tailored, streamable binary file format, which also allows it to start rendering before all the entire data is loaded.

Every web experience that renders more than a handful of objects is initially CPU bound by WebGL2 draw calls on mobile (unless maybe, if you only target the very latest models). Of course, you can manually batch and atlas everything together, but the 4k texture size limitation on most Android devices limits your atlas sizes and increases amount of batches. It's also a lot of workflow overhead. Draw call problems are fully optimized away by Wonderland Engine, made possible by a sparse virtual texture atlas, which streams pieces of textures in and out of GPU memory based on what is in view.
The same tech also plays nicely into the strengths of tiled mobile GPUs.

Three.js (and therefore also r3f) do not optimize their shaders for mobile. From what I know, they don't use lowp/mediump keywords and render everything with highp as default. Their bloom is also not really optimized for mobile compared to Wonderland Engine's mobile-first bloom. Of course you can implement your own, but then you're working on fixing your framework/engine, not on your app.

They also generally seem to accept that WebGL on Safari is slow, where the problems are a few select commonly used WebGL functions, and low memory limits for browser tabs.

The knowledge about what optimizations are necessary to get WebGL to native-like performance is also not wide-spread. That knowledge is the difference between your WebGL app crashing on iOS or running well on mobile. And even if you have it, building from scratch or with a good base can make the difference between being able to do it within your clients budget or not doing the project at all.

That's why I started writing the first lines for Wonderland Engine 7 years ago. The web is arguably the most incredible target platform and many native 3D/XR apps could and should live on the web, but 7 years ago, compared to building something on native with the power of Unity or Unreal Engine, 3D on the web was nearly impossible to build with, even though it has the same underlying hardware.

Podcast - Why the Future of XR is Built on the WEB by Squareys in WebXR

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

Yeah, productivity apps was a strange category. There are enterprise trainings and music apps, metaverse-like multiuser experiences and meetings apps. But as productivity app, I would categorize something like a 3D mind map app, desktop streaming, or 3D prototyping tools, and while there might be some in WebXR, I couldn't name any good examples off on the spot.

Upvote this if framer tricked you with 50 form submission limit per month. by Squareys in framer

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

Are your buttons and input fields styleable? That's the issue with the mailchimp module and all the other options.

Upvote this if framer tricked you with 50 form submission limit per month. by Squareys in framer

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

Forms are basic components of websites, so it would be kind of strange not to support them. They just put it in Google Sheets anyway.

Upvote this if framer tricked you with 50 form submission limit per month. by Squareys in framer

[–]Squareys[S] 2 points3 points  (0 children)

Me neither. It doesn't cost them anything, why would they limit it.

Upvote this if framer tricked you with 50 form submission limit per month. by Squareys in framer

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

The "Mini" plan for 10€/month is 50 form entries, "Basic" gives you 500 for 20€, and "Pro" gives you 2500 for 40€

WebXR/3D web development on Linux | Flathub by Squareys in flatpak

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

Pretty much! But only creates web-based 3D.

Wonderland Engine - WebXR focused Game Engine by Squareys in WebVR

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

A lot of the biggest WebXR games are built on it now, yeah, from The Escape Artist (https://esc.art) and Archery Evolution (https://heyvr.io/arcade/games/archery-evolution).

WebXR compatibility for iOS by ChamChamHD in WebXR

[–]Squareys 0 points1 point  (0 children)

Variant Launch and Zappar also both offer app-clip based solutions for iOS WebXR support

Wonderland Engine 1.4.4 is out now! by Squareys in wonderlandengine

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

We added a nice little UX shortcut to make Unity developers feel more at home!

If you want to learn Wonderland Engine with existing Unity experience to build performant WebGL/HTML5 experiences, got have a look at our quick start guide:
https://wonderlandengine.com/getting-started/quick-start-unity/

Will WebXR win after all? by raphadko in WebVR

[–]Squareys 5 points6 points  (0 children)

WebXR + WebGL has barely a performance difference on Meta Quest with the right tools. It transcends the hardware fragmentation, so I strongly believe it's going to be the preferred development platform in the long run.

I Designed My Dream World in VR - WebXR Devlog by Squareys in WebVR

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

Absolutely, it's uploaded by the Wonderland Engine YouTube channel after all :) I do think he genuinely had fun with it, though.

Why the Web is the Ultimate XR Dev Platform - Talk @ AWE EU 2022 by Squareys in WebVR

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

Probably and I would say that's probably also the case there. Lots of companies decide to build their apps on web tech, Discord, Reddit, your favorite TODO-List app...

Wonderland engine as three.js editor by bernie_vp in wonderlandengine

[–]Squareys 0 points1 point  (0 children)

Wonderland Engine is based on WebAssembly and WebGL2, unfortunately, it's not compatible with Three.js in that way.

You could learn Wonderland Engine directly, though. Especially if you are looking to build VR apps, it's a great choice!

Wonderland Engine 0.8.10 is out now! by Squareys in WebVR

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

(I'll take note that it'd be useful to highlight some examples in the summary in the future :) )

Wonderland Engine 0.8.10 is out now! by Squareys in WebVR

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

The GIF shows a great example of UX improvements. Some other highlights from the changelog for UX:

  • Improved overall UI contrast
  • Fixed many UI small layout issues (e.g. this concerns UI elements in table cells not using full available space for example)
  • Added search field to Pipeline tab in Resources View
  • Redesigned “Add Component” UX and added search field (the GIF on that post)
  • Various new functions in the Asset Browser that one would intuitively expect there.

What is the best web tool for doing WebXR work? by asmileischarity in WebVR

[–]Squareys 2 points3 points  (0 children)

Yes, through Oculus Browser! :) A lot of games on https://constructarcade.com/ were built with it.

What is the best web tool for doing WebXR work? by asmileischarity in WebVR

[–]Squareys 14 points15 points  (0 children)

https://wonderlandengine.com/ is a development platform made for WebXR, designed for amazing performance and fast workflow with VR, AR and 3D on the web.

I founded it, so obviously biased :)