Beginner's Guide / Blender

Verge3D is a versatile piece of software which you can utilize differently depending on your personal preferences. This guide describes just one of possible ways of how you can build your workflow, so take it as a friendly recommendation. The only prerequisite is that you should have some experience with Blender on top of which Verge3D works.

Installation

The installation procedure is thoroughly described here.

Sneak Peek

To make sure that Verge3D is installed correctly, you can render a basic model in the web browser by using the Sneak Peek button. This function will perform an export to a temporary folder and will run the default web browser with interactive rendering.

You may use Sneak Peek for quick tests any time you are working on your projects.

App Manager

Although you can start working on graphics first and create a Verge3D project later, we encourage you to get used to the App Manager from the beginning. By doing so you ensure that your files are properly organized and stored within the same folder which is important for integrity of your project, especially if you plan to transfer it to a third party.

Another benefit of leveraging the App Manager beforehand is that you will always have a functioning web application which you can run/reload in the browser without the need to go to your scene files first.

The App Manager opens up in the web browser when you click the App Manager button. The default system browser will be running - you can change it in your OS settings. Any modern browser will work yet we recommend the latest version of Google Chrome which is fast, standards-compliant and offers good web development tools.

You can create a new project using the button on the left bar.

Type a project name (or just leave my_awesome_app) and click Create App. Leave the default configuration options as they are for now.

Once a new application is created, it will appear in the list.

Running Your App

You can run your app any time by clicking the Verge3D icons, either the blue or the green one. The blue icon launches an app in its final form, with its Puzzles scenario and the programming code (if present). On the contrary, the green icon only opens the exported scene.

A freshly created app loads and displays just a cube. You can look around with the left mouse button pressed, and zoom in and out with the mouse wheel.

If instead of the cube it shows something like "This site can’t be reached" this means that the development server is down, probably because you updated Verge3D to a new version. In this case you should launch Blender, or, if the program is already running, start the App Manager again.

Although very rare, another warning can be shown: "Ouch! Your graphics card does not support WebGL." This can happen if you're using an outdated or unsupported browser, or your video card and/or drivers are blacklisted by the browser. Try installing latest Google Chrome/updating your OS/downloading latest drivers, or just find another computer to work on.

Export

By clicking on the B icon you can open up the main .blend file of your application.

Button to open blend scene of My Awesome App

The save files can also be opened as usual via the File → Open dialog or simply by double-clicking on them in the application folder. File → Open may sometimes be more efficient since it does not spawn a new instance of Blender.

It is important to understand that an application only loads files exported in glTF format, rather than Blender's save files. So every time you change something in your source file, you must export from it in order to see the modified scene in your app.

Exporting can be performed from the File → Export menu. You might want to assign a shortcut for this operation since you may perform it quite often.

Export your scene to the root of the corresponding application folder, in glTF format.

To test it out, add some Suzannes to your scene, export to glTF and run your app by clicking the blue Verge3D logo icon in the App Manager.

For quicker iterations, you can keep your application always running in a browser tab. Hit "F5" on your keyboard after you re-export your scene so that it reloads in the browser. Use the "Alt+Tab" ("⌘+Tab" on Mac) shortcut to instantly switch between Blender and the browser.

You can quickly obtain help on using any of Verge3D options or buttons through the right-click menu. You can also point to a feature and press F1.

Puzzles

Until now we used Verge3D as a fancy web exporter, which generates live 3D views running in the browser. With Puzzles, Verge3D's visual scripting tool, you can add behavior scenarios so that your 3D scene becomes a truly interactive web application.

Click the Puzzles button near your app name in the App Manager. This will run your app with the Puzzles editor attached on top of it.

On the left the toolbox with some categories ("Events", "Selectors", "Objects", etc) is located. The categories are expanded upon mouse click revealing puzzles which you can drag out to the workspace. By connecting various puzzles with each other, you can create a scenario of how your 3D objects will behave upon user input.

You can quickly obtain help for any puzzle by hovering the mouse cursor over it or by using the right-click menu.

To do something meaningful for the beginning, drag out the when clicked puzzle from the Events category and select some object in the light-green dropdown.

Adding when clicked puzzle from the toolbox

This puzzle causes your app to wait until the user clicks on the specified object, and then do... nothing unless you add something in the do slot.

Drag out the hide puzzle from the Objects and insert it to that slot. Select the same object ("Cube") in its dropdown.

Now, once the user clicks on the 3D object, it should disappear. Click the Run button in order to launch your program and check if it works by clicking on the cube.

In order to make your scenario a persistent part of your application, be sure to save it.

Once you finished with Puzzles, you can run your now-interactive app using the blue icon in the App Manager. Congratulations, you have become a programmer!

See also this video explaining how to work with the Puzzles.

Publishing

On your own website...

You've created a web application and probably want the billions of Internet users to come and check it out. If you own a website, this won't be a problem — simply upload the entire folder with your application to your server (via FTP, for example). Once deployed, you can provide a link to the app's HTML file somewhere on your website, or embed it in a web page with the iframe HTML element:


      <iframe width="1024" height="640" src="https://www.example.com/my_awesome_app/my_awesome_app.html"></iframe>

Using WordPress...

The task is even more simplified if you are running the WordPress CMS on your website — you can use the free Verge3D WordPress plugin to upload and embed Verge3D apps.

On Verge3D Network...

But what if you haven't had the chance to become a web master? No problem - by clicking a button in the App Manager you can upload your app to the Verge3D Network, a cloud-based storage and CDN hosted on Amazon servers.

Button to upload My Awesome App to Verge3D Network

After the uploading is complete, a screen will show up with a direct link which you can share by whatever means (in a blog post, social media, comments, email, you name it). It will also generate HTML code for embedding your app in third-party websites just like you do it with YouTube videos.

Dialog to share a link to My Awesome App

You can also check out this video explaining how to publish your app on Verge3D Network.

Activating License

You can take the trial for a spin for indefinitely long period of time. However, for use in production you will need a license. The license information is sent via email (the key below is a random example).

The license key will activate your Verge3D instance and will remove the trial watermark from all your apps.

What's Next

Proceed to the Workflow chapter for a more advanced guide on using Verge3D.