You are previewing Babylon.js Essentials.
O'Reilly logo
Babylon.js Essentials

Book Description

Understand, train, and be ready to develop 3D Web applications/video games using the Babylon.js framework, even for beginners

About This Book

  • Understand the basics of 3D (along with the theory) before practicing

  • Each mini-project provides previous features, alongside the new feature you are learning, to supply the examples

  • Learn from the best of the best, a developer at Microsoft, France

  • Who This Book Is For

    Babylon.JS Essentials is intended for developers who want to enter the world of 3D development for the Web, or developers who want to add the Babylon.js framework to their skill set. The notion of Oriented Object Programming would be helpful to understand the architecture of the Babylon.js framework. Also, a familiarity with Web development would be useful, to understand the principles used.

    What You Will Learn

  • Understand what the TypeScript language is and its benefits (compared to JavaScript) in large projects such as 3D engines

  • Learn the basics of 3D using Babylon.js without too much theory but with an emphasis on practice, for a better understanding of the architecture

  • Know the usage of Material—a fundamental principle of 3D engines in Babylon.js—and then customize the appearance of 3D objects

  • Integrate collisions and physics in gameplay. Understand the notion of impostor for physics simulation

  • Manage, create, and spatialize audio tracks in 3D scenes

  • Go further with the Babylon.js framework to create actions on events

  • Create rendering effects provided by the Babylon.js framework, such as post-processes

  • In Detail

    Are you familiar with HTML5? Do you want to build exciting games and Web applications? Then explore the exciting world of game and Web development with one of the best frameworks out there: Babylon.JS.

    Starting from the beginning, the book introduces the required basics for 3D development and the knowledge you need to use the Babylon.js framework. It focuses on the simplicity provided by Babylon.js and uses a combination of theory and practice. All the chapters are provided with example files ready to run; each example file provides the previously learned features of the framework. Finally, developers will be ready to easily understand new features added to the framework in the future.

    Style and approach

    The book is a comprehensive guide packed with ready-to-run examples with a mix of theory and practice.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Babylon.js Essentials
      1. Babylon.js Essentials
      2. Credits
      3. About the Author
      4. About the Reviewer
      5. www.PacktPub.com
        1. Why subscribe?
        2. Free access for Packt account holders
      6. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      7. 1. Babylon.js and the TypeScript Language
        1. The creators
          1. Online tools provided by the Babylon.js solution
        2. Why is Babylon.js developed using TypeScript?
          1. The TypeScript language
          2. The TypeScript features
        3. Introduction to TypeScript - what you have to know
          1. Compilation using Gulp
          2. Working with typed variables
            1. Enumerated types
            2. Array
          3. Working with classes and interfaces
            1. Creating a class
            2. Creating class members
            3. Working with inheritance
            4. Using interfaces
        4. Summary
      8. 2. The Fundamentals of Babylon.js and Available Tools
        1. The Babylon.js structure and graphs
          1. The engine and a scene
          2. Adding cameras and lights
            1. Adding a camera
            2. Adding a light
          3. Adding a mesh
          4. Using Babylon.js to create meshes
            1. Some other basic meshes
          5. Managing a scene graph
            1. An example
        2. Creating your first scene
          1. Creating a class and the scene nodes
          2. Call the runRenderLoop method
          3. Managing the scene graph
        3. Summary
      9. 3. Create, Load, and Draw 3D Objects on the Screen
        1. Using Blender to export scenes
          1. Setting up the Babylon.js exporter for Blender
          2. Activating the Babylon.js exporter in Blender
          3. Exporting a scene
        2. Using 3ds Max to export scenes
          1. Installing the Babylon.js exporter for 3ds Max
          2. Modifying the properties
          3. Exporting the scenes
        3. Loading scenes with Babylon.js programmatically
          1. The BABYLON.SceneLoader class
          2. The callbacks
            1. Load and append
            2. Importing a mesh
        4. Summary
      10. 4. Using Materials to Customize 3D Objects Appearance
        1. Discussing the awesome theory behind the materials
          1. The theory
          2. The vertex shader
          3. The pixel shader
        2. Using the Babylon.js standard material
          1. The standard material and its common properties
          2. Using the fog
        3. Using textures with materials
          1. Load and apply a texture
          2. The bump mapping
          3. Advanced texturing
            1. The cube texture
            2. The mirror texture
        4. Summary
      11. 5. Create Collisions on Objects
        1. Checking collisions in a scene
          1. How collisions work in Babylon.js?
          2. Configuring collisions in a scene
          3. Configure gravity and ellipsoid
        2. Simulate physics
          1. Enable physics in Babylon.js
          2. Impostors
          3. Applying a force to a mesh
        3. Configuring in Blender and 3ds Max
          1. Collisions in Blender
          2. Configuring physics simulations in Blender
          3. Configuring collisions in 3ds Max
          4. Configuring physics simulations in 3ds Max
        4. Summary
      12. 6. Manage Audio in Babylon.js
        1. Playing 2D sounds
          1. Creating 2D sounds
          2. Managing 2D sounds
        2. Playing 3D sounds
          1. Creating 3D sounds
          2. Managing 3D sounds
          3. Creating a directional spatialized sound
        3. Summary
      13. 7. Defining Actions on Objects
        1. Defining actions on objects
          1. Enable actions on an object
          2. Chain actions on an object
          3. The available actions
        2. Using conditions to control the actions graphs
          1. State condition
          2. Predicate condition
          3. Value condition
        3. Using the Actions Builder in 3ds Max
          1. How it works
          2. Managing multiple pipelines
        4. Summary
      14. 8. Add Rendering Effects Using Built-in Post-processes
        1. Using post-processes with Babylon.js
          1. Starting with your first post-process
          2. Chaining post-processes
          3. Removing and retrieving post-processes
        2. Using post-process rendering pipelines with Babylon.js
          1. Create a rendering pipeline
          2. Enabling and disabling effects in pipeline
        3. The built-in post-processes
          1. Volumetric Light Scattering post-process
          2. SSAO rendering pipeline
          3. HDR rendering pipeline
        4. Summary
      15. 9. Create and Play Animations
        1. Creating animations using Babylon.js
          1. Animating an object with code
          2. Using the animation manager of Babylon.js
          3. Create a simple animation
          4. Managing events
        2. Using easing functions to smooth animations
          1. Applying an easing function to an animation
          2. Creating your own easing function
        3. Importing and managing animated models
          1. How 3D animated models work
          2. Importing and playing animations of an animated 3D model
        4. Summary