Create Web 3D experiences with Godot (it’s open source!)

Why Godot

Godot’s combination of nodes and scripts makes it easy for beginners to create complex canvas-based applications such as drag-and-drop blocks-based flow designers, for example, educational-purpose 2D and 3D games, games in general, or even gamified static pages like cool game portfolios. While you can quickly implement simple dynamic UIs, you can also create XR experiences.

All that with the great benefit of coding once and exporting to Web, Android, iOS, Windows, MacOS, Linux, or even consoles. Additionally, the client’s features like the scene tree editor, built-in script editor, scripting debugger, and more, make it even greater!

Getting started

To get started, download the client from their website, open the executable, and Create a new project in Compatibility renderer mode (so you can export it to the web). You can also always look for what you need on its great documentation.

Its workflow consists of using the integrated IDE to create Scenes that contain specialized Nodes to do the things you need in the hierarchy. You’ll find many useful existing types of nodes, but you can even create your own. You can also attach GD Scripts (syntax based on Python) to the instantiated nodes to modify or add to their behavior (you can also use C#; just make sure you download the right client).

You are then presented with an empty Scene. Let’s create our first 3D Node, which will be the root of our main Scene.

Adding things to our Scene

Under this same Scene tab, you’ll find the Add (“+”) button showing a vast list of types of Nodes can select to instantiate. Use it to add a Camera3D node to our Scene, and then add a WorldEnvironment node as a child of our Scene so we can make sure our Camera works.

With our WorldEnvironment selected, you’ll find its properties under the Inspector tab to your right. Use it to add a New Environment to the “Environment” property.

Then, under the “Background” section, set the “Mode” property to Sky, and under the “Sky” section, create a New Sky. Our “Sky Material” will be a New ProceduralSkyMaterial.

After that, we can run a debug version of our Scene by clicking the “Play” button at the top right corner of the screen.

Note that this will bring up a pop-up to select our project’s main scene. We can use that to save our current scene and select it as the main one.

And this is the result! That is what our Camera sees:

Exporting for Web

The next step is to export the Web executable. To do this, go to Project -> Export… and click on the Add Preset button. Select the Web preset. For more information, refer to the Exporting for Web part of the documentation.

You will get a “No export template found at expected path” warning, which is easily fixed by clicking on Manage Export Templates and then on the Download and Install button on the pop-up.

After that, you can close the pop-up, go to the Export path again, and click on the Export Project… button. This pop-up will appear:

You can then Save it and serve the files on any server. For testing, you can run a simple server using Godot’s Python serve script (as per Exporting for the Web docs). Save the serve.py script file and run it like this inside the exported files directory:

# You may need to replace `python` with `python3` on some platforms.

python serve.py — root .

This will serve all the exported files, you can then select the index.html file to view it.

You can download this final example here, including the exported files.