Frequently Asked Questions

Below we answer some common questions about Verge3D and related topics.

Licensing and Support

I purchased Verge3D. How do I download the watermark-free version?

After purchase (in minutes or hours depending on your time zone) you will be sent an email with your license key. Copy this key and paste it in the App Manager's Licensing Manager dialog. This will make your Verge3D trial bundle a licensed copy and will remove the watermark from your projects.

In addition, if you purchased the Enterprise version, you can download the special DevKit distribution containing the source code of Verge3D. To get it, go to your dashboard at soft8soft.com and click Downloads button. The same applies to all material packs purchased from Soft8Soft.

On how many computers can Verge3D be installed? How many users can use a single license?

The license is assigned on the per person (Freelance) or per entity (Team, Enterprise) basis. The number of installations is not limited. In case of the Freelance option, only one individual can use Verge3D. On the other hand, there can be up to 5 developers who can use Verge3D within a company or organization.

What are the limitations / restrictions of the Verge3D Trial? Can I do ... ?

The trial version is intended for evaluation purposes only. You must not use in production environments, either for commercial or non-commercial purposes.

So, you can practice you skills with the trial version. You can create a mock-up presentation for your managers. You cannot use it for education - reach us to request a special Educational license at reduced price. And you cannot build up your portfolio with the trial as this qualifies as production use - be sure to purchase the Verge3D Freelance license for that.

See this page for more info about benefits and limitations of the Verge3D Trial version.

How do I obtain technical support?

We offer technical support services as part of the Verge3D Enterprise packages. If you own a Verge3D Freelance or Team license, or still evaluating Verge3D, you might seek for help on the forums.

Is Verge3D secure? Is it compliant with EU security standards?

First of all, Verge3D is a development tool that creates self-hosted web applications. It's up to you to deploy them on your own infrastructure / web server. The source code of Verge3D is provided with the Enterprise or Ultimate licenses, and as such can be thoroughly reviewed by your security team.

As of Verge3D Network, our one-click publishing solution, it is based on Amazon Web Services (AWS). Uploaded applications reside on servers located in the EU region. AWS meets a variety of global and European industry compliance standards such as SOC 1-3, ISO 27001, ISO 27017, ISO 27018, HIPAA, PCI DSS, etc. See here for more info.

General Questions

What is WebGL?

WebGL (Web Graphics Library) is a technology for rendering interactive 3D graphics within the browser. WebGL works right on a website (whether it is accessed from a desktop or smartphone) without installing additional software. However, this is a geeky tech and it would require a lot of time and expertise even to just render a rotating cube. By hiding all this complicated stuff, Verge3D allows a non-coder — an artist, an engineer, or an educator to create rich web-based interactives with ease.

What is the difference between WebGL and WebGPU?

Both technologies are created for the same purpose — to render interactive 3D graphics on the web. The difference is that WebGL is well-established and supported almost everywhere, while WebGPU is considered experimental and has not gained widespread ecosystem support yet.

WebGPU is designed to become a low-level and more performant alternative to WebGL. However, for typical 3D web use-cases it does not really offer any significant advantages over WebGL. Verge3D uses WebGL under the hood, but we keep an eye on WebGPU development as well.

What is client-side, server-side?

In the context of web development, client-side means that something happens in the browser running on the user's device. Server-side means that something happens on the web server.

Basic client-server model

If we say that Verge3D is a client-side solution, that means that your 3D app works in the browser and there is no server-side programming or additional frameworks required to get your app up and running. This is a key feature of Verge3D that makes it so easy to use. However, since we're talking about web development, the existence of some basic server functionality is implied. In most cases, this functionality is limited to serving application files to the browser.

To make your live easier, we don't require you to have any knowledge about server-side stuff at all. That's why we implemented 3 server-side solutions in Verge3D:

  1. App Manager provides a server that allows you to launch applications and use the Sneak Peek feature on your local PC.
  2. Verge3D Network is a cloud-based server that can be used to distribute apps to your users with just a single click.
  3. Verge3D for WordPress is a plugin used to host Verge3D applications on WordPress, the most popular and easy-to-use content management system.

Of course, you are not limited to use these three! You can always power up your own web server, such as Apache, Nginx, IIS, or use some third-party hosting platform, such as Amazon AWS, Digital Ocean, or GoDaddy.

Where can I find the roadmap for Verge3D development?

Verge3D is a client-oriented product so we move in the direction our customers want us to. In general, our priorities are e-commerce, e-learning, and AR/VR applications. If you have a specific feature in mind that you'd like to see in Verge3D, we can add it on a contract basis. Feel free to reach us to discuss details.

Do I need Internet connection to work with Verge3D?

Verge3D toolkit is installed on your local computer and does not require internet connection to operate. The only feature that requires Internet connection is publishing finished apps on Verge3D Network.

Also, to help users with unstable or low-band internet connection, we ship offline versions of Verge3D User Manual and Developer Reference. Find these in the docs directory of your Verge3D distribution.

My app does not load when I open it in Chrome - yet it works when running from the App Manager...

Due to security policy imposed by browser vendors, web applications cannot access data loaded from another domain, including from a local file system (with Firefox being an exception here). Therefore, you should use the App Manager (which comes with a local server) for development, or publish your Verge3D apps on a web server (or upload to the Verge3D Network) to be able to run it.

If you need a desktop or mobile application instead, you can convert your Verge3D apps to those platforms using the App Manager. See the following guides on how to create desktop or mobile apps with Verge3D.

Cannot load app when I launch it by clicking on the .html file.

See the answer on the question above.

Can I export my scene to a standalone all-in HTML file?

Nope, there is no all-in HTML format offered by Verge3D. If you need a standalone executable you can try to convert it with Electron.

Do Verge3D apps work in Internet Explorer 11?

Yes, older versions of Verge3D (prior to 4.0) come with the IE 11 compatibility module:

Enabling Internet Explorer 11 support

Check out the download archive to get the corresponding link.

Is it possible to run the App Manager without Blender, 3ds Max, or Maya?

Sure, you can run the App Manager in standalone mode. Simply click on the corresponding Verge3D icon from the desktop or start menu. This launcher will also open your default browser and automatically navigate to the App Manager.

App Manager Launcher

How can I copy Puzzles into another project?

You can use the Library feature for that.

Sound is not played on iOS...

See how to fix that here.

My app is laggy and slow. How do I increase its performance?

Check out the Performance Bottlenecks and Optimizing WebGL Performance guides.

How to open the browser console?

Google Chrome

Menu → More Tools → Developer Tools or

F12 key on Windows/Linux or Option + ⌘ + J shortcut on macOS.

In the Developer Tools window, select the Console tab.

Opening developer console in Chrome
Mozilla Firefox

Menu → Web Developer → Browser Console or

F12 key on Windows/Linux or Shift + ⌘ + J shortcut on macOS.

Apple Safari

Activate Developer Menu in the preferences (Advanced Tab) then Develop → Show JavaScript Console or

Option + ⌘ + C shortcut.

Microsoft Edge

Menu → F12 Developer Tools or

F12 key.

In the Developer Tools window, select the Console tab.

Microsoft Internet Explorer
Deprecated, not supported in Verge3D anymore.
Google Chrome on Android
It's not possible to display the browser console right on the Android device. Use the USB debugging feature instead.
Apple Safari on iOS/iPadOS
It's not possible to open the browser console right on the iOS/iPadOS device. You will require a Mac system and the Web Inspector tool to access console content.

App works fine in the App Manager but fails when uploaded to a remote server (such as Verge3D Network)

Possible reasons for that:

  1. Your development system is case insensitive, while the remote system is case sensitive.
  2. You incorrectly specified the absolute path to the HTML or glTF file.

Example for the first case: if you're using Windows or macOS (both use case insensitive file systems), you can accidentally rename your files when exporting. But since the most Linux servers (including Verge3D Network) use case sensitive file systems, this may cause the issue when the file uploaded to the server.

For example, you created the "MyConfigurator" app. By default, this app will include the following asset files in it:

MyConfigurator.blend (or MyConfigurator.max or MyConfigurator.mb) MyConfigurator.html MyConfigurator.js MyConfigurator.css MyConfigurator.gltf MyConfigurator.bin

Say you open your scene file in the modelling tool (on Windows or macOS) and export it as myconfigurator.gltf.

This way your app folder will look as follows (check the case of the two bottom lines):

MyConfigurator.blend (or MyConfigurator.max or MyConfigurator.mb) MyConfigurator.html MyConfigurator.js MyConfigurator.css myconfigurator.gltf myconfigurator.bin

If you open the main JavaScript file of your app (MyConfigurator.js in our example), you can see that it tries to load MyConfigurator.gltf, not myconfigurator.gltf. This is perfectly fine on Windows/macOS, since these two names represent the same file! However, when you upload your app to the server, it will fail to load.

As such, always save and export your files with proper case. Alternatively, you can rename your file in the main JS file.

In the second situation, you might incorrectly specified an absolute path to the loaded resource in your JavaScript file, such as:

/applications/my_awesome_app/my_awesome_app.gltf

or

http://localhost:8668/applications/my_awesome_app/my_awesome_app.gltf

In such case, specify relative path to fix the issue:

my_awesome_app.gltf

or

./my_awesome_app.gltf

How to rename my application properly?

Go to the applications folder, find and rename folder which contains your app (e.g my_awesome_app to cool_3d_visualization).

Do not confuse app folder name with the title displayed in the App Manager. For example, "my_awesome_app" app gets the "My Awesome App" title. This title is generated automatically by replacing underscore characters with spaces and placing initial characters of the words to upper case.

If you also want to rename the files inside your app, do the following:

  1. Go to the app folder.
  2. Assign new names to all html/css/js/gltf/bin/blend/max/ma/mb assets (see more here). Do not touch v3d.js, visual_logic.xml, and visual_logic.js scripts!
  3. Open and reexport your scene(s) to update the paths inside the exported glTF assets.
  4. Open the main HTML file (e.g my_awesome_app.html) and update the following JS/CSS paths: <script src="my_awesome_app.js"></script> <link rel="stylesheet" type="text/css" href="my_awesome_app.css"> Say you want to rename my_awesome_app to cool_3d_visualization. In this case, the paths become: <script src="cool_3d_visualization.js"></script> <link rel="stylesheet" type="text/css" href="cool_3d_visualization.css">
  5. Open the main JavaScript file (e.g my_awesome_app.js) and update the following line with the preferred application name: sceneURL: params.load || 'my_awesome_app.gltf', Say you want to rename my_awesome_app to cool_3d_visualization. In this case, the sceneURL line becomes: sceneURL: params.load || 'cool_3d_visualization.gltf',
  6. Launch the app in the App Manager. If the app does not work, open the browser console to check for possible errors.

Also, feel free to update the HTML metadata in the renamed app. See here for more info on how to do that.

Modelling and Content Creation

What is glTF?

glTF is a universal web-friendly file format which is used to store and interchange 3D graphics data in Verge3D and other 3D software. It can store not just models but entire scenes, including geometry data (meshes), object positions, animations, camera data, lights, materials, textures and other info.

The glTF format specifies only a basic set of features. Thus, we extended this format with several extensions (prefixed S8S). Verge3D's subset of glTF supports not only the basic PBR materials, but also Blender, 3ds Max, or Maya node-based materials, cameras, lights, environment and other things, making your asset workflow easier and more efficient.

In Verge3D we use the 2.0 version of the glTF format. The older 1.0 version is not supported.

In what cases should I use glTF-compatible materials?

There are some cases when you might prefer using simple glTF-compatible PBR materials over Blender, 3ds Max, or Maya node-based system:

The main drawback of using glTF-compliant materials is that you can't use the native material system provided by the modelling suite. As such, it might be difficult to achieve the same level of quality for your renderings.

Check out the following guides for more info:

Which 3D format is better glTF or GLB?

These are the two variations of the same glTF 2.0 format. glTF container is more popular and more efficient since it stores only metadata (parameters of your scenes/objects/materials etc). All external data, such as geometry, animation and textures are stored separately (in *.bin, *.jpeg, *.png files).

The GLB container stores all data in the binary form and packs metadata, geometry, animation and textures into one big file. As such, GLB can be is more convenient since you don't need to deal with a bunch of files.

When I export my scene to Verge3D I see nothing (or just the background).

This may happen due to various reasons:

What 3D formats can be used with Verge3D?

In theory, by using third-party importers, Verge3D is able to load various 3D formats. Still, the preferred way to create 3D web content is to use the glTF 2.0 format augmented by Soft8Soft extensions. This format is supported by Blender, 3ds Max, or Maya exporters which come with Verge3D.

Also, the script of the Standard application template is based on the App class which supports loading glTF files only.

Is Maya LT or Maya Creative supported?

Unfortunately, no. Maya LT does not support Python scripting for some reason and as such exporting from it is not possible.

Same thing with Maya Creative, as it does not allow loading any third-party plugins.

Any plans to support Maxon Cinema 4D? Sketchup?

See the answer to this question on the forums.

How do I convert my SolidWorks model to WebGL using your software?

As of 2016 version, 3ds Max supports SolidWorks assets natively. Simply import your SolidWorks file into 3ds Max and then export to WebGL as any other Max scene.

Note: Pay attention to geometry optimization since CAD models tend to be quite heavy for the web. Tweak Mesh Resolution setting from the Import Settings dialog when importing your files. You can also use 3ds Max modifiers to reduce the number of polygons on your models.

SolidWorks-to-Max import dialog

How to create realtime browser visualization based on a Revit model?

You have two options:

  1. Export your Revit model to FBX format and then import to 3ds Max, Maya, or Blender.
  2. Use Revit importer which supported natively in 3ds Max. Don't forget to activate Autodesk Revit Interoperability option during Max installation to enable this feature.
Importing Revit model to 3ds Max

In any case keep your geometry optimized. We recommend using 100K-500K polygons for the entire scene.

E-Commerce

What would be the most straightforward way to create 3D configurators with Verge3D, considering I have very limited skills in web development?

If so, we'd recommend taking one of the demos shipped with Verge3D as a reference, then modifying it for your needs. The following 3 demos in our Asset Store were made by 3D artists alone, without a single line of code written:

Ring
The easiest, UI is based on camera-parented objects.
Recliner
Comes with more advanced HTML-based layout and shopping cart made with Webflow editor.
Scooter
Most advanced, 1000000+ combinations. Similarly to Recliner, UI was made with Webflow editor.

Also, if you manage to use WordPress CMS, pay attention to WooCommerce Composite Products extension which can help you to build Verge3D-friendly 3D web configurators with ease.

My budget is limited, but I still want to create a 3D-enabled web store. How do I proceed?

At first, you create 3D visualizations for your products. Then you have 3 options:

I need to create a basic CPQ (configure price quote) system with customizable products shown in 3D.

We'd recommend the following approach:

I can afford quite a budget, but I'm not too much a techie person myself. How do I create a 3D website efficiently?

We suggest that you reach our long-term partners, digital agencies or freelancers, who are very experienced in developing applications of such kind.

Also a good idea would be creating a topic on the Jobs and Opportunities forum.

I developed a cool Verge3D plugin. How do I sell it?

Excellent job! Now you can choose one of the following selling platforms:

Programming with Puzzles

Which puzzles should I learn first?

The list is really short!

For usage example, check out the Simple Configurator demo (source files available in the Asset Store).

How to password-protect my app?

In cases when e.g. you don't want your app to be seen before the final release, you can use the following puzzles to protect it with password:

Protecting WebGL app by password

Change "123456" to something more secure.

This method is not 100% robust and can be hacked. For more secure way of restricting access to your app, use HTTP authentication or implement server authorization.

How to make custom first-person controls on mobile devices?

Basically, you need to make additional screen-aligned elements which will be your FPS character controls. Minimum set of such elements would be forward-backward (since rotation is performed by touching/dragging the screen).

In general, you have two ways to render FPS controls on a mobile device:

  1. By using HTML elements positioned above the rendered 3D scene. See more about this technique here.
  2. By using planes or similar 3D objects parented to the camera. For that, you just need to parent and align these in the modelling suit.

Once you have your screen controls created, use the change local transform to move your camera. For example, to move forward/backward you can use the following logic:

Puzzles to move forward-backwards

To implement character strafing use the same puzzle but move along X axis instead of Z.

Why hide/show puzzles do not work for annotations?

Since Verge3D moves and controls visibility of the annotation objects itself, hide/show puzzles won't work.

Instead, you should use the display CSS property for the annotation element referenced by its ID. For example, to hide/show annotation with the element ID poi1, you can use the following two puzzles:

Puzzles to show/hide annotations

Basically, setting display to none hides an annotation, while setting display back to block shows it.

Is it possible to disable (hide) ray/reticle in VR mode?

Use the get controller property puzzle to get the ray/reticle object and the hide puzzle to make it hidden:

Puzzles to show/hide ray reticle

How to clone objects recursively?

You might want to use the following function implemented with JavaScript:

Recursive object cloning with visual blocks

Advanced Programming Questions

Read below if you have some JavaScript coding skills.

Is Verge3D compatible with Three.js API?

Verge3D offers limited compatibility with Three.js API, as such existing Three.js code can ported to Verge3D with minimal efforts. However, you don't really need to rely on programming to do things. Properly setting up the scene in the 3D modelling suite as well as using Puzzles can cover the most use cases.

How to calculate texture memory usage?

To store a regular (non-HDR) texture in the GPU memory, you will require at least

width x height x 4 x 1.333 bytes

Where width, height are the texture dimensions in pixels, 4 is the number of bytes per pixel, while 1.333 represent additional memory needed for texture mipmapping. For example, a texture of size 2048x2048 will occupy approximately 22.4 Mb of GPU memory. If you need to store an HDR texture, multiply that value by 2.

Also, depending on WebGL implementation, the browsers may store at least one copy of the texture in the conventional (system) memory.

My app window grows endlessly on iOS devices. How to fix it?

If you embed a Verge3D application inside an iframe element, you may run into a specific issue on iOS devices, which causes iframes to constantly increase in size beyond the boundaries of the browser window. This in turn can lead to a WebGL crash.

To deal with this issue you can use the following snippet, which resizes the iframe to the page's body preventing the said iframe from extending beyond it.

<script> if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { var iframe = document.getElementById('myIframe'); function resize() { iframe.style.width = getComputedStyle(document.body).width; iframe.style.height = getComputedStyle(document.body).height; iframe.setAttribute('scrolling', 'no'); } iframe.addEventListener('resize', function(e) { resize(); }); resize(); } </script>

Keyboard controls does not work for the app embedded in iframe.

It happens when some other HTML on your page gets the focus. To fix this issue try the following code:

document.getElementById("my_iframe_id").focus();

Where my_iframe_id is the ID of your iframe element.

With puzzles, the same code looks like this:

Focus iframe element with puzzles

Got More Questions?

Feel free to ask on the forums!