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

Cover
Title Page
Copyright and Credits
Dedication
Foreword
Contributors
Table of Contents
Preface
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
About Packt
Other Books You May Enjoy