How to use Babylon Viewer entirely offline?

Mike_C · June 21, 2019, 2:42pm

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!

Deltakosh · June 21, 2019, 2:50pm

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:

github.com

BabylonJS/Babylon.js/blob/master/Viewer/src/configuration/configuration.ts#L46


canvasElement?: string; // if there is a need to override the standard implementation - ID of HTMLCanvasElement



model?: IModelConfiguration | string;



scene?: ISceneConfiguration;

optimizer?: ISceneOptimizerConfiguration | boolean;

// at the moment, support only a single camera.

camera?: ICameraConfiguration;

skybox?: boolean | ISkyboxConfiguration;



ground?: boolean | IGroundConfiguration;

lights?: {

    //globalRotation: number,

    [name: string]: number | boolean | ILightConfiguration

};

// engine configuration. optional!

engine?: {

    renderInBackground?: boolean;

    antialiasing?: boolean;

    disableResize?: boolean;

    engineOptions?: EngineOptions;

Here is an extended example:

github.com

BabylonJS/Babylon.js/blob/master/Viewer/src/configuration/types/extended.ts

import { ViewerConfiguration } from './../configuration';
import { Tools } from 'babylonjs/Misc/tools';

/**
 * The viewer's "extended" configuration.
 * This configuration defines specific obejcts and parameters that we think make any model look good.
 */
export let extendedConfiguration: ViewerConfiguration = {
    version: "3.2.0",
    extends: "default",
    camera: {
        exposure: 3.034578,
        fov: 0.7853981633974483,
        contrast: 1.6,
        toneMappingEnabled: true,
        upperBetaLimit: 1.3962634015954636 + Math.PI / 2,
        lowerBetaLimit: -1.4835298641951802 + Math.PI / 2,
        behaviors: {
            framing: {
                type: 2,

This file has been truncated. show original

Deltakosh · June 21, 2019, 2:51pm

Pinging @RaananW as he is the author of the viewer

Mike_C · June 21, 2019, 2:52pm

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

Mike_C · June 21, 2019, 3:21pm

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?

Deltakosh · June 21, 2019, 3:25pm

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

Mike_C · June 21, 2019, 3:27pm

Thanks Deltakosh

Deltakosh · June 21, 2019, 3:30pm

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

Mike_C · June 21, 2019, 3:42pm

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

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?

Deltakosh · June 21, 2019, 4:31pm

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

Mike_C · June 21, 2019, 5:03pm

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

Deltakosh · June 21, 2019, 5:15pm

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

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>

RaananW · June 21, 2019, 8:06pm

Seems like job well done
Is it working now?

Mike_C · June 22, 2019, 6:49am

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

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

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

RaananW · June 22, 2019, 9:45am

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

Mike_C · June 22, 2019, 10:10am

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

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!

RaananW · June 22, 2019, 11:45am

I’m a bit rusty
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.

Mike_C · June 24, 2019, 9:15am

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

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

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!

RaananW · June 24, 2019, 10:55am

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 -

github.com

BabylonJS/Babylon.js/blob/master/Viewer/src/configuration/types/extended.ts

import { ViewerConfiguration } from './../configuration';
import { Tools } from 'babylonjs/Misc/tools';

/**
 * The viewer's "extended" configuration.
 * This configuration defines specific obejcts and parameters that we think make any model look good.
 */
export let extendedConfiguration: ViewerConfiguration = {
    version: "3.2.0",
    extends: "default",
    camera: {
        exposure: 3.034578,
        fov: 0.7853981633974483,
        contrast: 1.6,
        toneMappingEnabled: true,
        upperBetaLimit: 1.3962634015954636 + Math.PI / 2,
        lowerBetaLimit: -1.4835298641951802 + Math.PI / 2,
        behaviors: {
            framing: {
                type: 2,

This file has been truncated. show original

, 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:

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>

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

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?

Mike_C · June 24, 2019, 2:56pm

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!

Topic		Replies	Views
Is it possible to create fully local version of Babylon Viewer? Questions	10	906	April 15, 2021
Babylon.js Viewer without server (kiosk mode) Questions	39	3097	April 1, 2020
Newbie Babylon Q / Questions	3	320	January 24, 2022
Babylon.js Server Side Rendering Questions	6	736	June 3, 2022
Babylon.js Viewer - methods and properties Questions documentation	6	800	December 2, 2020

How to use Babylon Viewer entirely offline?

Related Topics