DOCSEARCHbyAlgolia
Submit Docs

Babylon Toolkit

repository·master·Indexed 41 days ago

https://github.com/babylonjs/babylontoolkit

An extension framework for Babylon.js providing Unity-style components and utilities for 3D web development. It includes a Unity Editor for exporting physics, navigation, and animation state machines, as well as the ExportCanvas system for converting Unity uGUI and UI Toolkit interfaces into BabylonJS GUI with optimized fonts and sprites.

Tokens
126.6K
Snippets
259
Records
378
Agent score
52%

What's inside Babylon Toolkit

  1. Overview of Babylon Toolkit Pro Features

    master

    The Babylon Toolkit Pro Classes provide out-of-the-box components and systems to accelerate game development. Key features include:

    • Physics & Movement: Rigidbody physics system, Player character controllers, and Raycast wheeled vehicles.
    • Navigation: Recast navigation meshes and Detour path following.
    • Animation & Avatars: Animation state machines and Player avatar components.
    • Media & Environment: Audio source components, Video player components, and Terrain building tools.
    • Systems: Networking components and Managed racing components.

  2. Overview of the ExportCanvas system

    master
    The ExportCanvas system is designed to convert Unity User Interfaces (both Legacy uGUI and UI Toolkit) into BabylonJS GUI. It focuses on web performance through sprite optimization, automatic font conversion (including TextMeshPro SDF to TTF), and minimal HTTP requests. The system ensures an authentic recreation of Unity's visual design, such as matching corner radius values and handling nine-slice sprites efficiently.

  3. Overview of Babylon Toolkit API categories

    master

    The Babylon Toolkit is organized into several specialized systems:

    • Core Framework: Scene management (SceneManager), base component logic (ScriptComponent), and utilities.
    • Physics System: Rigidbody physics with Havok (RigidbodyPhysics), various character controllers (CharacterController, SimpleCharacterController, RecastCharacterController), and vehicle physics (RaycastVehicle).
    • Navigation System: Unity-style agents (NavigationAgent) and Recast extensions for crowds and plugins.
    • Animation System: State management (AnimationState), blending (AnimationMixer, BlendTreeSystem), and state machines (MachineState).
    • Input System: Comprehensive handling via InputController and touch support via TouchJoystickHandler.
    • UI and Window Management: Viewport and window control via WindowManager and CustomLoadingScreen.
    • Messaging: Event systems via GlobalMessageBus and LocalMessageBus.
    • Asset & Terrain: Asset preloading (PreloadAssetsManager), procedural terrain (TerrainGenerator), and terrain materials.
    • Specialized Systems: Particle systems (ShurikenParticles), Video (WebVideoPlayer), and Material systems (CustomShaderMaterial).

  5. Use the WebVideoPlayer component

    master

    The WebVideoPlayer is a TOOLKIT.ScriptComponent designed for web-based applications. It provides a complete video playback system, including support for multiple formats, playback controls, and integration with the Babylon Toolkit asset preloading system. It manages an underlying HTMLVideoElement, a BABYLON.VideoTexture for 3D rendering, and a BABYLON.StandardMaterial.

    // WebVideoPlayer is a class in the TOOLKIT namespace
// It extends TOOLKIT.ScriptComponent and implements TOOLKIT.IAssetPreloader

  6. Use RecastJSPluginExtension for advanced navigation

    master

    The RecastJSPluginExtension is an extended Recast navigation plugin for Babylon.js. It improves upon the standard Recast plugin by supporting multiple navigation meshes, worker-based mesh generation for better performance, and advanced crowd simulation features. It implements BABYLON.INavigationEnginePlugin.

    const recastPlugin = new TOOLKIT.RecastJSPluginExtension();

  7. What is SceneManager?

    master
    The SceneManager class is the central hub of the Babylon Toolkit. It provides a unified interface for managing the framework lifecycle, including scene initialization, asset management, physics, input, and rendering coordination. It is primarily used through its static properties and methods to configure the global state of a toolkit-powered application.

  8. What is MachineState in the animation system?

    master
    A MachineState is a core building block of the Babylon Toolkit animation state machine. It represents a single state and encapsulates all data required to manage animation playback, transitions, behaviors, and events. It tracks timing, playback speed, mirroring, IK settings, and contains references to animation data like blend trees, transitions, and custom curves.

  9. Overview of AnimationState

    master

    The AnimationState class is a comprehensive animation management system within the TOOLKIT namespace. It extends TOOLKIT.ScriptComponent and provides Unity-style animation control, including:

    • Simple Playback: Playing, pausing, and stopping individual animations.
    • State Machines: Managing complex animation logic through states, transitions, and parameter-driven conditions.
    • Blending: Smoothly transitioning between animations using blend weights and blend trees.
    • Parameter System: Using boolean, float, and trigger parameters to drive animation logic.
    • Animation Events: Triggering callbacks at specific timestamps within an animation.

  10. What is AnimationMixer?

    master
    The AnimationMixer is a core component in the TOOLKIT namespace designed for managing animation blending and mixing. It allows for smooth transitions between multiple animation states by managing animation buffers (position, rotation, scaling) and handling root motion. It is essential for building advanced animation systems that require complex state transitions or layered animation effects.

  11. How the Font Export System works

    master

    The system automates the transition of Unity fonts to web-compatible formats. For TextMeshPro, it extracts the original TTF/OTF source files from the SDF assets using m_SourceFontFile_EditorRef or m_SourceFontFileGUID.

    Export Outputs:

    • TTF Files: Located in a fonts/ directory.
    • Font Manifest: A font-manifest.json file containing metadata (family, style, weight, path).
    • CSS Declarations: An auto-generated fonts.css file using @font-face for easy web integration.

    Optional Font Subsetting: When enabled in CanvasToolsInfo settings, the system performs character analysis on all scene text to create glyph subsets, which can reduce font file sizes by 50-80%.

    [
  {
    "family": "LiberationSans",
    "style": "normal",
    "weight": "normal", 
    "path": "fonts/LiberationSans.ttf",
    "fileName": "LiberationSans.ttf"
  }
]

  12. Use BlendTreeValue for animation blending

    master

    A BlendTreeValue represents a single input or parameter within a BlendTreeSystem. It is used to drive the blending logic of a blend tree by providing specific values for animation sources, motion identification, blend space positions, or blending weights.

    To use BlendTreeValue, you typically pass a configuration object to its constructor to define how it influences the animation state.

    Key Properties:

    • animationSource: The source of the animation data.
    • motionIdentification: Used to identify specific motions within the tree.
    • blendSpacePosition: The coordinates within a 2D or 1D blend space.
    • blendingWeight: The weight applied to the animation.

    Related Systems:

    • BlendTreeSystem: The core system that manages these values.
    • BlendTreeUtils: Utility functions for working with blend trees.
    • BlendingWeights: Manages the actual weight calculations.
    // Note: This is a conceptual summary based on the provided documentation segment.
// Actual implementation requires a configuration object passed to the constructor.
const blendValue = new BlendTreeValue(config);