Personalizing Verge3D Applications

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

Custom UI

The best way to create fully-customized Verge3D experience is to build UI on top of your 3D part (see how the Scooter demo as an example of this approach). However, given the difficulties of creating such UI, we'll descuss customizing default Verge3D experiences here. This includes preloader screen, annotations, fullscreen button, as well as page title/description and social media tags.

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:

For more advanced customizations, check out the src/style.css file. 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:

applications/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 - for changing background of the entire preloader screen.

v3d-simple-preloader-container - for changing container element with preloader image and bar. By overriding this class you can customize preloader position and size.

v3d-simple-preloader-bar - for changing loading bar.

v3d-simple-preloader-logo - for changing 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 110x110px.

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:

Styling Annotations

To style your annotations use the following CSS classes:

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:

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'); }

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

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 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 WebGL and HTML5 technologies."> <meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">

Got Questions?

Feel free to ask on the forums!