You might think that 3D games are harder to develop than 2D because of the extra dimension you have to take into account, but it’s easier than you think. We’ve recently updated the Games section on MDN with a collection of tutorials covering 3D development, with a focus on frameworks that offer shortcuts for developers who are getting started building games for the Web and are unfamiliar with WebGL.
WebVR and 3D game development
The A-Frame framework built on top of Three.js is rapidly evolving. There are case studies of interesting VR projects already like Cardboard Dungeon and SECVRITY. The framework itself has reached version 0.2.0 and is quickly gaining interest in the community. Its simple yet powerful approach uses markup to create VR experiences that works across platforms and devices. The result: New tutorials, demos, and plugins are being created every single day.
These are exciting times for cutting-edge VR experiments, but if you’re a fan of 2D games like me, jumping into the third dimension might be a challenge. Let’s explore the basics of 3D together, and see how some popular frameworks can help you achieve your goals more quickly, and create impressive games and demos.
The concept of 3D games on the Web is fundamentally about rendering WebGL on Canvas to create hardware-accelerated rich interactive animations. The basic theory revolves around the rendering pipeline, which manages the information about your creations, and displays them on the screen.
An overview of frameworks for 3D game development
You can do all that yourself in pure WebGL, or you can make your life easier, speed up development, and focus only on the important parts of your game idea with a variety of available frameworks. The MDN Games tutorials include:
- Building up a basic demo with Three.js
- Building up a basic demo with PlayCanvas
- Building up a basic demo with Babylon.js
- Building up a basic demo with A-Frame
- GLSL Shaders
Three.js is the most popular tool for WebGL animations, while PlayCanvas offers you a choice of using the PlayCanvas engine or the online editor to build a game or demo. Babylon.js is often picked for its simple API and powerful features. The A-Frame framework can also be used to build rapid prototypes of 3D worlds viewable immediately in virtual reality. We’ve also provided tutorials to cover fundamental concepts like shaders. Understanding what’s going on behind the scenes of the framework gives you greater control over how your game will look when all the post-processing is applied.
Advantages of frameworks
What are the advantages of using a framework for game development? Frameworks provide benefits and shortcuts. Here are some examples:
You can offload work that feels repetitive compared to other parts of creating a game: loading assets, rendering the scene, or drawing everything on screen. You won’t have to manage the specific configuration of cameras, lights, and such. Instead, you can create some geometry, add animation, and forget about everything else – it will just work and you’ll see your creation immediately.
You won’t have to worry about differences in how browsers implement features – that is taken care of by the framework and exposed for you in a simple, high level API.
Different frameworks offer different experiences: Three.js is generally used to create animations; Babylon.js, on the other hand, is focused on creating games. It can also take care of anti-aliasing for you. Both frameworks can be used successfully to create games, so the choice really depends on your preferences and project goals.
Some frameworks even add an extra layer of features and offer built-in physics engines, collision detection, or particle systems. All of that infrastructure is available to use in your project without the compatibility issues you’d need to address to use custom plugins or write these functionalities from scratch.
Feel free to use the source code however you like — for example as a boilerplate for your new 3D project — and remember to show us what you’ve built on top of this! We’d love to hear from you right here in comments or over on the Github repo.
View full post on Mozilla Hacks – the Web developer blog