Blender to WebGL in 4 Simple Steps

This guide is aimed at Blender artists who seek for a quick way to publish their 3D models on the Web and have no time to read lengthy manuals. For this reason only essential steps are mentioned that lead to a streamlined Blender-to-WebGL workflow.

Summary

  • Download and install Verge3D for Blender
  • Create a new WebGL project
  • Add your models to the project and export
  • Publish on the Web

What’s WebGL?

WebGL is a feature which allows you to render interactive 3D graphics straight in modern web browsers without the need to download anything or use any third-party plug-ins. This is a quite low-level technology that requires programming. Luckily, various WebGL toolkits exist to make your life easier.

One of them is Verge3D, a framework what features realistic graphics, codeless approach to creating interactivity, efficient web-friendly format for loading assets and what’s the most important it works on top of Blender!

Step 1. Getting Started

Download Verge3D and unpack it to a directory of your choice. Make sure you have enough permissions to read/write in this folder. Installing in a system directory such as “Program Files” is not recommended.

Open Blender and go to “User Preferences” by selecting the corresponding option in the “File” menu.


On the “File” tab, find the “Scripts” field and make it point to the folder in which Verge3D is installed. Click “Save User Settings” and close the “User Preferences” window. Restart Blender.

Open the “User Preferences” window again and go to the “Add-ons” tab. Find and enable the Verge3D addon, then click “Save User Settings” and close the preferences window.

Select “Verge3D” from the list of render engines. Optionally, select “Save Startup File” in the “File” menu to make the choice persistent.


Installation complete!

By the way, from now on you have a really great feature called “Sneak Peek”. By clicking the corresponding button you will perform an export to a temporary folder and immediately show your scene in a new browser tab. Use this for quick tests when creating new projects is not feasible.

 

Step 2. Creating a new WebGL project

The App Manager as a web-based tool which opens up in the browser when you click the “App Manager” button.

You can create a new project using the form on the right. Just enter a project name (My Awesome App will also work) and click “Create App”. You can safely leave other creation options as is.


After you created a project, return to the main screen of the App Manager – your project should be listed there. Now you can proceed with your app in several directions: simply running it, authoring the graphics, creating interactive scenarios and eventually, publishing.

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.

 

Step 3. Adding Blender assets and exporting

Clicking on the Blender icon opens up the main .blend file of your application. You can simply edit this file or replace it by your own asset entirely./

Exporting can be performed from the File > Export menu in Blender. You can export your scene file right to the root of the application folder, in WebGL-friendly format called glTF.

After successful export launch your app by clicking the blue Verge3D logo icon in the App Manager.

Step 4. Publishing

You’ve created a web application and probably you’d like 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 (for example, via FTP or SSH).
But what if you haven’t had the chance to become a web master? Actually, there is a button for that in the App Manager (one with the “Earth” icon). Clicking that button will upload your app to the Verge3D Network, a cloud-based storage and CDN hosted on Amazon servers.

 


What’s next

In this step-by-step guide we used Verge3D as a fancy web exporter, which “just” generates live WebGL views running in the browser. But you can do much, much more! With Puzzles, the powerful yet entertaining scripting environment which comes with Verge3D, you no longer have to be a programmer to do… programming. Try it out!

This is just a brief overview of Verge3D workflow with many topics possibly left undiscussed. Check out the Beginner’s Guide to learn about more exciting features of our framework.

Written by


Leave a Reply