How to customize the loading bar + HTML Queries

Hey guys, I went through all the UI based as well as the html integration samples and got a good idea how the tags and script work.

I just wanted to know if I can customize the loading bar that shows up when the page is launched, I know that the Needle logo acts like a watermark but I was hoping to be able to customize the elements around it.

Also if it’s not a long shot, can I two different scene load in one webpage? HTML Custom Layout | Needle Engine like in this sample, the tag has it’s own CSS that makes it look like a window, so like I had a thought if it was possible to have multiple projects loaded like that…?

Also also, is there anyway to hyperlink “chrome://flags/webXR-incubation” so it’s easier to make user’s of my website enable it? I haven’t been able to make it work yet

Original Post on Discord

by user 392979063620501504

Hi, the webxr incubations flag can not be set via a hyperlink. It is in a preview version and not rolled out so users have to explictly enable it. This has security reasons - imagine any website could mess with your browser settings :wink:

You can totally put multiple needle engine web components on one page. Just currently there is a limit as how to many due to the way we currently render so i would recommend to not use more than a few at once ever and rather re-use existing ones if you have to (meaning to add or remove the src attribute via scripts to load and unload different scenes, you can do that using js)

You can modify how loading looks and make it your own, yes but at the moment this requires a license. You can find more information in our docs and website eula/license page

Btw our sveltekit sample has a page with two webgl scenes if you need a simple example: https://needle-engine.github.io/sveltekit-sample/regular/

The code for this is here sveltekit-sample/src/routes/regular/+page.svelte at main · needle-engine/sveltekit-sample · GitHub

Svelte and sveltekit is a great framework for building website frontends! Totally recommend from our side

Cool man thanks, I’m in the process of wireframing the webpage right now so was just exploring possibilities

by user 392979063620501504

I’ll look into these resources for sure

by user 392979063620501504

This does bring a few question to mind.

If I assign a height and width to the needle tag in css, the canvas wouldn’t stretch or squash the model view right? I saw something similar before so was wondering.

by user 392979063620501504

Cool, so if the hyperlink method doesn’t work for said reasons which makes sense, in your experience what method works best to inform the user to enable the setting?

by user 392979063620501504

And, would you recommend I start making HTML CSS additions after I build prod or before, because I am planning to make my own customized AR VR buttons

by user 392979063620501504

Svelte looks interesting, I’ll look into it soon, thanks for the ref

by user 392979063620501504

Also quick question, is Needle supported on the new Blender 4.0 ver? Just so that I don’t accidently make the mistake

by user 392979063620501504

Hi,
Blender 4 is not yet supported. It will be surely but not yet.

You can create and edit HTML/CSS at any time during development (but you should edit it in the web project - never in the finished / bundled web app, so not in the dist folder!)

To inform the user you can create a little HTML popup dialogue - in your case I think the app doesnt work without it on android so you should display the dialogue on android if a user doesnt have the flag enabled. I think you can create a hyperlink that points to the setting so you could make a button for users to click on to open the settings page but you can not change their settings from your app directly

Yeah I tried to make it open page earlier but it didn’t work, maybe I did it wrong, I’ll try it again later

by user 392979063620501504

I was thinking of using a pop up, just wasn’t sure of the hyperlink

by user 392979063620501504

Hey guys, quick questions
What is the max number of vertices best recommended in a project?
Does backface culling work in needle?

by user 392979063620501504

See Exporting Assets to glTF | Needle Engine Documentation

Yes

Solid

by user 392979063620501504

So for Mobile xr less than 100k is good right?

by user 392979063620501504