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 License Information panel. 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 is no limitation on the number of users within the 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?

If you own a Verge3D Team or Freelance license, or still evaluating Verge3D, you can purchase our support plan. Support services are also offered as part of the Verge3D Enterprise package.

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 a 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.

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 or if opened in Firefox...

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. Enable IE 11 compatibility module in the app creation panel.

Enabling Internet Explorer 11 support

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

Gear Menu > F12 Developer Tools or

F12 key.

In the Developer Tools window, select the Console tab.

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 are case insensitive file systems), you can accidentally rename your files when exporting. Since the most Linux servers (including Verge3D Network) use case sensitive file system 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 Blender/Max/Maya 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 your app main JS file (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 absolute path to the loaded resource, 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 directory located in your Verge3D installation, find and rename directory which contains your app (e.g my_awesome_app to cool_3d_visualization).

Please note, that the app name is not 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 directory.
  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 paths inside 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: var sceneURL = params.load ? params.load : '__URL__my_awesome_app.gltf'.replace('__URL__', ''); Say you want to rename my_awesome_app to cool_3d_visualization. In this case, the sceneURL line becomes: var sceneURL = params.load ? params.load : '__URL__cool_3d_visualization.gltf'.replace('__URL__', '');
  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. Using the older 1.0 version is not recommended.

In what cases should I use glTF-compatible materials?

There are some benefits in using glTF-compatible PBR materials over Blender, 3ds Max or Maya native 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?

Verge3D is able to load various formats including glTF, OBJ, FBX, COLLADA, STL and PLY. Still, the preferred way to create 3D web content is to use glTF 2.0 format which is supported by Blender, 3ds Max, or Maya exporters.

Also, the script of the Standard application template is based on the App class which supports loading glTF files only. For loading other formats, use the corresponding loaders instead.

Is Maya LT supported?

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

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.

Programming with Puzzles

First-Person camera controls not supported on mobile devices

They are supported actually! However, since you have no physical keyboard on mobile devices, you can't use the regular WASD keys to move your first-person character. Instead, you should 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:

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:

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:

Advanced Programming Questions

Read below if you have some JavaScript coding skills.

You say Verge3D is based on Three.js. Is it compatible with Three.js API?

To create Verge3D we modified the Three.js code base a lot so we decided to use the custom "v3d" prefix for the engine's APIs. However, since we maintain source code compatibility with Three.js, most of its applications and examples should work in Verge3D without any modifications.

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.

How can scene scale be preserved on resize?

We want all objects, regardless of their distance from the camera, to appear the same size, even as the window is resized. The key equation to solving this is this formula for the visible height at a given distance: visible_height = 2 * Math.tan((Math.PI / 180) * camera.fov / 2) * distance_from_camera; If we increase the window height by a certain percentage, then what we want is the visible height at all distances to increase by the same percentage. This can not be done by changing the camera position. Instead you have to change the camera field-of-view. Example.

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.

Got More Questions?

Feel free to ask on the forums!