Personalizing Verge3D Applications

Use this guide to create customized Verge3D applications targeted to your specific audience.

Introduction to UI Styling

Along with canvas which renders 3D part, Verge3D application includes additional HTML elements for preloader, annotations, fullscreen button, etc. All these elements are supplemented by CSS classes which can be easily modified.

The easiest way to make your app personalized — choose Standard Light or Standard Dark in the app creation dialog:

And then use the Application Settings dialog to tweak your app:

For more advanced customizations, check out the src/style.css file in the Verge3D installation folder. Do not change this file as it is compiled right into Verge3D. Instead, add all styling code into your application main CSS file. For example if your app is called "My Awesome App" then you should modify the following file (located in the applications folder):

my_awesome_app/my_awesome_app.css

Alternatively, you can modify your CSS classes by using the Puzzles editor. Check out the set css rule puzzle reference.

Customizing Preloader

To modify your preloader change the following CSS classes:

v3d-simple-preloader-background — to customize the background of the entire preloader screen.
v3d-simple-preloader-container — to modify the container element with the preloader image and bar. By overriding this class you can customize position and size of the preloader.
v3d-simple-preloader-bar — to customize the loading bar.
v3d-simple-preloader-logo — to customize the preloader image.

For example, if you need to make progress bar red instead of the default blue, add the following code to your application's main CSS file:


    .v3d-simple-preloader-bar {
        background: red;
    }

To change the preloader's image to something else:


    .v3d-simple-preloader-logo {
        background-image: url("PATH_TO_YOUR_IMAGE");
        background-size: cover;
    }

Replace PATH_TO_YOUR_IMAGE with the actual URL of your image, such as my_company_logo.png.

Recommended preloader image size is 120x120px.

To assign custom background image instead of default white:


    .v3d-simple-preloader-background {
        background-image: url("PATH_TO_YOUR_IMAGE");
    }

With Puzzles, all three style customizations will look as follows:

This snippet should be used in the init tab of the Puzzles editor because the preloader must be customized before the scene is loaded.

Styling Annotations

To style your annotations use the following CSS classes:

v3d-annotation — for changing the style of the annotation icon.
v3d-annotation-transparent — for changing the style of semi-transparent (occluded) annotations.
v3d-annotation-dialog — for styling annotation popup dialog.

For example, to make your annotations square with green background:


    .v3d-annotation {
        border-radius: 0px;
        background: rgba(0, 255, 0, 0.8);
    }

Changing Fullscreen Button

Fullsceen button styling is already managed by your application. See the following classes in your app's main CSS file:

fullscreen-button — for changing the style of the both open and close fullscreen buttons.
fullscreen-open — for styling the image for entering (opening) the fullscreen mode.
fullscreen-close — for styling the image for leaving (closing) the fullscreen mode.

For example, if you need to change the default open/close images to something else, modify the following two classes:


    .fullscreen-open {
        background-image: url('PATH_TO_OPEN_IMAGE');
    }

    .fullscreen-close {
        background-image: url('PATH_TO_CLOSE_IMAGE');
    }

Customizing WebGL Error Screen

There are two CSS classes which define look of this error screen:

v3d-webgl-error-container — for changing the style of the error container.
v3d-webgl-error-image — for changing the image displayed above the error message.
v3d-webgl-error — for changing the style of the message.
v3d-webgl-error-link — for styling the error message link.

For example, the following CSS code:


    .v3d-webgl-error {
        color: white;
        border: solid 1px black;
        padding: 10px;
        background-color: red;
    }
    .v3d-webgl-error-link {
        color: black;
    }

will make your WebGL error message look like this:

With Puzzles, this CSS code becomes:

Since WebGL error message generated before the engine initialized, this snippet will only work if placed in the init tab of the Puzzles editor.

Title and Description

It's difficult to overestimate the importance of assigning meaningful title and description for your app.

The title is displayed in the browser tab and also used to bookmark your app link:

Both title and description are used by the search engines to find your app and present it to the user in the search output:

To change app title, find the following snippet in your main HTML file (e.g. my_awesome_app.html):


      <title>Verge3D Web Interactive</title>

and change Verge3D Web Interactive to the preferred title.

Keep the length of the title below 50-60 characters.

Application description can changed in the same manner. Find and replace Interactive 3D web application... content of the <meta name="description"> tag:


    <meta name="description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the art WebGL and HTML5 technologies.">

to something that suites your needs better.

Similarly to title, the description text should not be long — 120 to 160 characters is good enough.

Language

Modify the following snippet in the beginning of your main HTML file to change app language:


      <html lang="en">

See here for a list of possible language codes.

Icon

To customize page icon displayed in the browser (also known as favicon), replace the following files in the media directory of your application:

favicon.ico
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
safari-pinned-tab.svg

To simplify things up, there are plenty of favicon generators available on the web.

Social Media Tags

To make you app link look cool on Twitter, modify the following title/description/image tags in the main HTML file:


    <meta name="twitter:title" content="Verge3D Web Interactive">
    <meta name="twitter:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the art WebGL and HTML5 technologies.">
    <meta name="twitter:image:src" content="https://cdn.soft8soft.com/images/player_socials.jpg">

For better result, scale the image to the 1200x630 pixel size and specify absolute URL, e.g. https://www.yoursite.com/app_social_image.jpg, not just app_social_image.jpg.

For Facebook, Reddit, WhatsApp, Weibo, VK, and other social media platforms which support Open Graph protocol, find and change the following tags. You can specify them to the same values you used for Twitter:


    <meta property="og:title" content="Verge3D Web Interactive">
    <meta property="og:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the art WebGL and HTML5 technologies.">
    <meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">

Fully-Customized UI

The best way to create fully-customized Verge3D experience is to build UI on top of your 3D part (see the Scooter demo as an example of this approach).

Got Questions?

Feel free to ask on the forums!