Going the Distance with Babylon.js: Building extensible, maintainable, and attractive browser-based interactive applications using JavaScript

Length: 426 pages
Edition: 1
Language: English
Publisher: Packt Publishing
Publication Date: 2022-09-16
ISBN-10: 1801076588
ISBN-13: 9781801076586
Sales Rank: #64310 (See Top 100 Books)

Learn to effortlessly leverage the power of the GPU in a 3D game or application using Babylon.js v5.0 from start to finish

Key Features

Explore browser-based, editable, interactive Playground samples
Create GPU-based resources using the Node Material Editor – no shader code required
Extended topics in each chapter as well as a dedicated chapter that helps you explore and contribute back to OSS projects

Book Description

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.

What you will learn

Use Babylon.js v5.0 to build an extensible open-source 3D game accessible with a web browser
Design and integrate compelling and performant 3D interactive scenes with a web-based application
Write WebGL/WebGPU shader code using the Node Material Editor
Separate code concerns to make the best use of the available resources
Use the Babylon.js Playground to tightly iterate application implementation
Convert a web application into a Progressive Web Application (PWA)
Create rich, native-ready graphical user interfaces (GUIs) using the GUI Editor

Who this book is for

This book on 3D programming in JavaScript is for those who have some familiarity with JavaScript programming and/or 3D game engine development and are looking to learn how to incorporate beautiful interactive 3D scenes into their work. Developers familiar with Unity, Unreal Engine, or three.js will also find this book to be a key resource for learning the ins and outs of Babylon.js.

Going the Distance with Babylon.js
Foreword
Contributors
About the author
About the reviewers
    Reviewers
    Subject matter experts
    Technical experts
Preface
    Who this book is for
    What this book covers
    To get the most out of this book
    Download the example code files
    Download the color images
    Conventions used
    Get in touch
    Share Your Thoughts
Part 1: Building the Application
Chapter 1: The Space-Truckers Operation Manual
    Introducing the World of Space-Truckers
    So, You Wanna be a Space-Trucker?
    Space-Truckers: The Video Game Design
        Landing
        Splash Screen
        Menus
        Route Planning
        Driving and Scoring
    Space-Truckers: The Repository
    Summary
Chapter 2: Ramping up on Babylon.js
    Technical Requirements
    Catching up or Refreshing on Babylon.js
        The Basics of BJS
        Get Started with Getting Started
        Tools for the Toolbox
        The Asset Types of BJS
    Building the Playground Scene
        Establishing the AppStartScene
    Animating the Orbits
        Putting Spin on the Star and Planets
        Making Orbital Motion
        Orbit Lines
        Shining up with GlowLayer
    Extended Topics
    Summary
    Further Reading
Chapter 3: Establishing the Development Workflow
    Technical Requirements
        A Note for TypeScript Users
    Setting up the Environment
        Preparatory Steps
        Initialize All the Things
        Scripts and ESLint Configuration
        Configuring Webpack
    Crafting a PG Snippet
        Cleaning up the BABYLON Namespace Prefix
        Extracting Magic Strings
    Transitioning from the PG to the Application
        Creating the Engine Instance
        Adding and Importing the StartScene
        Exporting and Importing the Start Scene
    Constructing the Landing Page
        The Concept (Art)
        Sticking the Landing
    Summary
    Extended Topics
Chapter 4: Creating the Application
    Technical Requirements
    Adding a Custom Loading UI
        Solo Exercise: Refactoring the StartScene to Extract the AstroFactory
        The CustomLoadingScreen Type
        Enhancing the Loading Screen with Progress Display
    Space-Truckers: The State Machine
        Logging Interlude
        Generators and function* Iterators
        The Definition of a State Machine
        Space-Truckers: The Application State Diagram
        Almost Infinitely Looping State
        Adding the Constructor and Supporting Logic
        Writing the Initialize logic
        Transitioning to the Main Menu
    Space-Truckers: The Main Menu
        Basic Design
        Setting up the Main Menu snippet
        Building the Background
        Creating the AdvancedDynamicTexture and GUI
        Adding the Menu Container and Background
        Image Aside: Bringing in External Content
        Laying out the Title and Menu Items
        Populating the Menu with Items
        Adding Menu Item Selection and Indicators
        Indicating Selection and Reacting to Change
        Visual Improvements and Animating the Selection Idle
    Integrating the Main Menu
        Entering and Leaving Transitions
        Menu Finishing Touches
    Summary
    Extended Topics
Chapter 5:  Adding a Cut Scene and Handling Input
    Technical Requirements
    Space-Truckers – the Splash Screen
        Storyboarding the Scene
        Building the Scene
        Integrating the SplashScene
    Designing the Input System
        Defining the Main Menu Control Scheme
        Mapping Input Data
        Input Management
        Input Processing
        Action Handling
    Summary
    Extended Topics
Part 2: Constructing the Game
Chapter 6: Implementing the Game Mechanics
    Technical Requirements
        Helpful Things to Know
        Useful Links from the Babylon.js Docs
    A Detour into Sound Management
        Sounds, SoundTracks, and the AudioEngine
        SpaceTruckerSoundManager
    Designing the Game Elements of the Route Simulation
        An Overview of the Helios System
        Actors and Their Behavior
        Establishing the Basic Route Planning Screen
    Creating the Orbital Mechanics Simulation
        Understanding the Physics
        Driving the Simulation’s Physics
        Configuring the InFlight Physics Simulation
    Defining the Rules – Game Mechanics
        Controllable Launch Parameters
        Going Places and Crashing EVERYWHERE
        Supporting Input Controls
        Showing Game Information with the GUI
    Summary
Chapter 7: Processing Route Data
    Technical requirements
    A Detour into Particle Systems
        The Disparate Particle Systems of Babylon.js
        Loading Particle Systems From Saved Data
        Adapting the Sun Particle System Set
    Marking Out the Route
    Defining the Encounter Zone
        Encounters Overview
        Encounter Zones and Encounter Tables
        Tracking Intersections
        Encounter Zones and Game Data
    Selecting Encounters
        Summing the Probabilities
        Populating CMDF Results
        Rolling an Encounter Check
        Listening for Encounters
    Adding Encounter Visuals
        Putting 2D Labels into 3D Space
        Animating the Encounter Panel
        Clearing Encounter Panels
    Summary
    Extended Topics
Chapter 8: Building the Driving Game
    Technical Requirements
    Prototyping the Driving Phase
        Playground Overview
        Generating the Driving Path
        Loading Assets Asynchronously
        Initializing the Driving Phase Scene
        Running the Update Loop
    Integrating with the Application
        Splitting Up the Playground
        Transitioning to the Driving Screen
        Truck Update and Input Controls
        Patching the input map
    Adding Encounters
    Making the Mini-Map
        The GUI Camera
        Blip Plotting in Polar Coordinates
    Summary
    Extended Topics
Chapter 9: Calculating and Displaying Scoring Results
    Technical Requirements
    Introducing the Babylon.js GUI Editor
        The Advanced Dynamic Texture
        UI Design with the GUIE
        Integration with the GUIE
    Building a Reusable Dialog Box Component
        Constructing the DialogBox Class
        Handling Button Clicks and Changing Visibility
        Prompting Users after Successful Route Planning
    Calculating Scores
        Scoring System Design
        Adding Up and Tallying Scores
        Capturing Scoring Data
    Creating the Scoring Dialog Using Coroutines
        Reviewing Function Generators
        Counting Player Scores with a Coroutine
        Advanced Coroutine Usage
    Summary
    Extended Topics
Chapter 10: Improving the Environment with Lighting and Materials
    Technical Requirements
        Tools
        Glossary of terms (abridged)
        Recommended Reading
    Materials, Lighting, and the BRDF
        Introducing the BRDF
        How Light is Modeled in 3D Applications
        Materials and Textures
        PBR and IBL
        Environment Textures and Reflection Textures
    Working with PBR Materials and IBL Scenes
        Image Formats and File Types
        Bit Depth and Dynamic Ranges
        Using and Creating Assets for PBR and IBL
    Tone Mapping and Basic Post-Processing
        Tone Mapping
        Post-Processing and the Rendering Pipeline
    Summary
    Extended Topics
Part 3: Going the Distance
Chapter 11: Scratching the Surface of Shaders
    Technical Requirements
    Understanding Shader Concepts
        Differences Between a GPU and a CPU
        Shaders are GPU Applications
        About Shaders
    Writing and Using Shaders in Babylon.js
        Fragment and Vertex Shaders
        Compute Shaders (New to v5!)
        Continuing the Shader Code Journey
    Shader Programming with the Node Material Editor
        Using the NME to Build the Planet Earth Material
        Procedural Textures and the NME
        Developing Post-Processes with the NME
    Summary
    Extended Topics
Chapter 12: Measuring and Optimizing Performance
    Technical Requirements
    Knowing What To Measure
        General Guidelines
        Performance-Related Terminology
    Measuring Performance and Identifying Bottlenecks
        Inspecting the Performance of Route Planning
        Real-Time Performance Viewer Metrics
        Defining the Testing Procedure
        Viewing and Analyzing a Captured Profile
    Improving Runtime Performance with the Scene Optimizer
        Understanding the Scene Optimizer and its Operating Modes
        Creating a Custom Optimization Strategy for the Asteroid Belt
    Summary
    Extended Topics
Chapter 13: Converting the Application to a PWA
    Technical Requirements
        Hosting Requirements
        Options for Hosting your PWA
        Resources and Reading
    Introduction to PWAs
        SSL
        Service Workers
        Web Manifest
    Converting the Space-Truckers application into a PWA
        Putting the “P” in PWA
        Using the PWABuilder Extension
    Using IndexedDB to Persist Scores
        Learning about IndexedDB
        Using IndexedDB
        Recap
    Storing and Displaying High Scores
        The Heist
        The Muscle
        The Safe Cracker
        The Brains
        The Job
        The Integration
    Summary
    Extended Topics
Chapter 14: Extended Topics, Extended
    AR and VR with WebXR
        An Abridged History of AR/VR on the WWW
        Building Tomorrow, Today with the WebXR Experience Helper
        Further Reading
    A Tour of the Babylon.js Native Project
        Choosing Babylon Native
        The Evolution of a Babylon Native App
        Further Reading
    Incorporating 3D Content into a Website
        Babylon.js and CMS
    Tracing out a Path to Advanced Rendering
        Ray Tracing and its History by Erich Loftis
    Summary
Index
    Why subscribe?
Other Books You May Enjoy
    Packt is searching for authors like you
    Share Your Thoughts

3D Graphics Game Programming Graphics & Multimedia Graphics & Visualization Groupware Internet Software Design Telecommunications Testing & Engineering

Donate to keep this site alive

To access the Link, solve the captcha.

How to download source code?

1. Go to: https://github.com/PacktPublishing

2. In the Find a repository… box, search the book title: Going the Distance with Babylon.js: Building extensible, maintainable, and attractive browser-based interactive applications using JavaScript, sometime you may not get the results, please search the main title.