How to use Babylon Viewer entirely offline?

I’m developing a project for a church exhibition that will run in a kiosked browser on a touchscreen, but the project will be entirely offline. At the moment everything is served from an Apache localhost and all works well. We’ve been using the Babylon Viewer and GLTF models to speed up loading times (previous build used a three OBJLoader which was slow).

We’re using a local version of babylon.viewer.js but it still calls https resource, that’s okay on our dev machine but won’t be suitable for the deployment. How can we call those external resources (ground etc.) from local (e.g. user-specified) locations?

Preferably this would be done in the < babylon > tag to make it simpler to train the church’s staff to take over mild development in the future, but that feature isn’t essential.

Thanks for any help that anybody can offer!

Hey Mike and welcome!

Good news: the ground information (and actually everything in the viewer) can be configured

How to configure it:
https://doc.babylonjs.com/extensions/configuring_the_viewer#configuring-using-the-dom-element

More precisely, you want to configure the ground:

Here is an extended example:

Pinging @RaananW as he is the author of the viewer :wink:

That’s incredibly helpful - thank you for a perfect response! :slight_smile:

1 Like

I’ve copied that extended config as-is, the viewer ‘sees’ it on the path declared in DOM (I’ve checked by altering the filename and causing a 404 with the alteration), but now I get SyntaxError: Unexpected token i in JSON at position 0

I think this is to do with the path declarations in import { ViewerConfiguration } from ‘./…/configuration’; , are they relative to the position of babylon.viewer.js, relative to the position of the config file (it’s in a different folder), or somewhere else?

Can you check if there is an error on the console?

But overall, I think you are right. Hopefully @RaananW will be able to jump in the thread soon

Thanks Deltakosh :smiley:

This seems like a module import error to me
Can you make sure the file is correctly imported?

How can I do that? Completely new to packages like babylon :slight_smile:

For further information: rather than use a separate cloned file I’ve now set the DOM path to point directly at extended.ts in the babylon.4.0.3 folder, same error occurs.

EDIT: I should also add that we’ve got the full Babylon 4.0.3 package folder in our project root, not the standalone viewer. Perhaps we should try the latter?

You can then try to not import the config but just drop the content like here:
https://doc.babylonjs.com/extensions/configuring_the_viewer#configuring-using-nested-dom-elements

That’s the method I’d prefer to use in any case. Is there a list of all the dom elements that can be used and their input values?

Thank you again, I’d expected to wait weeks for a first reply… most helpful forum ever :smiley:

hahaha :slight_smile:
We pay a lot of attention to make sure no one is blocked :slight_smile:

You can use something along these lines:

<babylon extends="default">
    <model url="https://ugcorigin.s-microsoft.com/12/2e77b8e3-0000-0000-7a48-6505db2f0ef9/952/1508427934473.gltf">
    </model>
    <ground texture="Ground_2.0-1024.png">
    </ground>
</babylon>
1 Like

Seems like job well done :blush:
Is it working now?

Looking good! The ground texture is now loading locally, I just need the same method to call the skybox locally. I’ve tried all the variants of the call I can think of… I’m probably just missing the most obvious one :slight_smile:

From there it would be useful to do the following:

  • Switch off the GUI buttons at the base of the viewer
  • Adjust global lighting
  • Adjust initial camera positions
  • Toggle auto-rotate

Is there a list of the DOM instructions that can be included when invoking the babylon frame? I’ve searched and searched and can’t see one, although I guess the internet’s a big place and I’ve got tired eyes :smiley:

Thanks for all your help guys, can’t thank you enough!

The viewer is fully configurable. It had its own simple template system and flags to the default one. To remove the navbar (the buttons underneath) you can either use the minimal configuration (<babylon extends="minimal" ...) or disable the navigation bar using the template system: <babylon templates.nav-bar="false" ...

Auto rotate can be set to false:
<babylon id="babylon-viewer" camera.behaviors.auto-rotate="0"></babylon>

Oh, and regarding the skybox, check this configuration object: Babylon.js/skyboxConfiguration.ts at master · BabylonJS/Babylon.js · GitHub
Url of the cube texture is what you are looking for. I’m on mobile right now otherwise I would create an example :smirk:

1 Like

I’m finding that using 1 stops auto-rotate, 0 enables it - planned behaviour? :wink:

Using extends=“minimal” has fixed the external skybox call, I’ll examine the doc you linked shortly… although at first glance I can’t see the DOM method in there, that would be my preferred method for texture specification as it’s easier to call on-the-fly with dynamically-generated pages (at least from my perspective).

Thank you for your patience!

I’m a bit rusty :blush:
Set the Auto rotate to false, it will stop rotating

I totally agree with you about the templating. Check the link @Deltakosh shared (configuring the viewer), it contains everything needed to use the DOM configuration (or any other type of configuration). If something not clear, it’s obviously my fault! so it would be great to know and fix it for future users.

1 Like

Just had a weekend of playing with the setup again, it’s not going well :smiley:

I can see very few HTML tags in the documentation (and very few permutations of the primary babylon tag), so I went through a view .ts config files to try to get an idea of the classes. Using those to try to guess the HTML versions didn’t work. Ho hum. If the HTML tags are in the linked document then I apologise - but I really didn’t see them :slight_smile:

Really I need to know

  • How to set a path to my own local skybox path (tried all sorts of skybox tags, with and without environment)
  • How to set the initial camera position (ditto the tags, lots of tries)
  • How to set some lighting (there are a few basic lighting tags in there but it’s not clear what the types do, how many lights are there by default etc.)

The patience of you guys is amazing - goodness knows how you find the time to put so much work into this. I’m at a digital conference for the rest of the day, I’m going to be singing the praises of babylon to colleagues there. Currently there’s such a big emphasis on quick/fast community visualisation I can see this being a core tool in multi-platform deployments for low-cost, low-talent projects!

Hi Mike,

I think what you are missing is the understanding how the configuration works and how it is being read from the DOM tree to actually solve all of your problems (and more :-))
The linked article describes the few ways you can configure everything in the viewer, including what the parameters mean and the difference between a JSON and the DOM (and how to compare the two). I would also recommend you looking at the extended configuration file -


, and read the article on how to achieve the same type of configuration using DOM only :
https://doc.babylonjs.com/extensions/recreating_the_default_configuration

To your specific questions:

  1. Setting the cube texture can be done using the skybox tag (or parameter of the babylon tag):
<skybox>
    <cube-texture url="myLocalFile.supportedFileFormat"></cube-texture>
</skybox>
  1. I am not sure what you mean by camera position (i guess the radius from the object and it’s initial point in space?) Here is an example how to change the radius. To change the position you will need to disable the default behaviors (like the framing for example), and then simply set camera.position.x (or y or z):

https://codepen.io/anon/pen/gNROeP

  1. Lights are an interesting subject. you can add a tag and fully configuring it using Babylon’s (native babylon) parameters. Notice this configuration here : Babylon.js/extended.ts at master · BabylonJS/Babylon.js · GitHub
    The type (i guess the only thing that is confusing) is derived from Babylon’s native lighting types (here - Babylon.js/light.ts at master · BabylonJS/Babylon.js · GitHub) . Other than that, you can add any light parameter available in the babyln native lighting.
    What exactly are you trying to achieve with lights that the default configuration doesn’t do?
1 Like

It suddenly all becomes clear. It’s been a long work week, reading the guide again it all fell into place in my tired brain! Thanks (again!) for all your work!

2 Likes