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

Description

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 FeaturesExplore browser-based, editable, interactive Playground samplesCreate GPU-based resources using the Node Material Editor – no shader code requiredExtended topics in each chapter as well as a dedicated chapter that helps you explore and contribute back to OSS projectsBook 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 learnUse Babylon.js v5.0 to build an extensible open-source 3D game accessible with a web browserDesign and integrate compelling and performant 3D interactive scenes with a web-based applicationWrite WebGL/WebGPU shader code using the Node Material EditorSeparate code concerns to make the best use of the available resourcesUse the Babylon.js Playground to tightly iterate application implementationConvert a web application into a Progressive Web Application (PWA)Create rich, native-ready graphical user interfaces (GUIs) using the GUI EditorWho 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. Table of ContentsThe Space-Truckers Operation ManualRamping up on Babylon.jsEstablishing the Development WorkflowCreating the ApplicationAdding a Cut Scene and Handling InputImplementing the Game MechanicsProcessing Route DataBuilding the Driving GameCalculating and Displaying Scoring ResultsImproving the Environment with Lighting and MaterialsScratching the Surface of ShadersMeasuring and Optimizing PerformanceConverting the Application to a PWAExtended Topics, Extended 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