Book Image

Going the Distance with Babylon.js

By : Josh Elster
Book Image

Going the Distance with Babylon.js

By: Josh Elster

Overview of this book

Babylon.js allows anyone to effortlessly create and render 3D content in a web browser using the power of WebGL and JavaScript. 3D games and apps accessible via the web open numerous opportunities for both entertainment and profit. Developers working with Babylon.js will be able to put their knowledge to work with this guide to building a fully featured 3D game. The book provides a hands-on approach to implementation and associated methodologies that will have you up and running, and productive in no time. Complete with step-by-step explanations of essential concepts, practical examples, and links to fully working self-contained code snippets, you’ll start by learning about Babylon.js and the finished Space-Truckers game. You’ll also explore the development workflows involved in making the game. Focusing on a wide range of features in Babylon.js, you’ll iteratively add pieces of functionality and assets to the application being built. Once you’ve built out the basic game mechanics, you’ll learn how to bring the Space-Truckers environment to life with cut scenes, particle systems, animations, shadows, PBR materials, and more. By the end of this book, you’ll have learned how to structure your code, organize your workflow processes, and continuously deploy to a static website/PWA a game limited only by bandwidth and your imagination.
Table of Contents (20 chapters)
1
Part 1: Building the Application
7
Part 2: Constructing the Game
13
Part 3: Going the Distance

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “The createSpinAnimation method is called from createStartScene to make the spinAnim variable available to the rest of the scene’s controlling code.”

A block of code is set as follows:

planets.forEach(p => {
    p.animations.push(spinAnim);
      scene.beginAnimation(p, 0, 60, true, BABYLON.Scalar.RandomRange(0.1, 3));
});

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

planets.forEach(p => {
        glowLayer.addExcludedMesh(p);
        p.animations.push(spinAnim);
        scene.beginAnimation(p, 0, 60, true, BABYLON.Scalar.RandomRange(0.1, 3));
    });

Any command-line input or output is written as follows:

npx webpack –config webpack.common.js

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Clicking Run should now show a nifty-looking starfield in a skybox you can pan around.”

Tips or important notes

Appear like this.