viber3d

The Viber3D documentation is organized into several key areas to help you understand and use the 3D game starter kit:

• Introduction: High-level overview of Viber3D and its features.
• Getting Started: Instructions for installation and basic usage.
• Core Concepts: Explanations of the underlying architecture, including the Entity Component System (ECS), Entities, Traits, Systems, and Components.
• Systems: Detailed technical information regarding the built-in systems provided by the kit.

viber3d is a modern starter kit for 3D browser games. The stack includes:

• React 19: Utilizing concurrent rendering.
• React Three Fiber: For declarative Three.js usage.
• Vite: For fast development server and bundling.
• TailwindCSS: For UI styling.
• Zustand: For lightweight state management.
• React Three Rapier: For physics engine integration.
• TypeScript: For type safety.
• AI Integration: Includes predefined rules for AI code editors.

Viber3D is a 3D game starter kit designed for modern web browsers. Key features include:

• 3D Physics: Built-in engine for realistic object interactions and collisions.
• Game Systems: Includes input handling, audio, and networking.
• Modern Architecture: Optimized for performance using modern web technologies.
• TypeScript: Provides a fully typed development experience.
• Component System: A flexible, component-based architecture for building complex game objects.
• Documentation: Comprehensive guides, tutorials, and references.

The Viber3D demo showcases the following core engine capabilities:

• 3D Rendering: High-performance rendering with dynamic lighting and effects.
• Physics Engine: Realistic physics interactions between game objects.
• Input Controls: A responsive input system supporting keyboard and mouse controls.
• Game Systems: The Entity Component System (ECS) managing various game mechanics.

Viber3D is designed for rapid 3D environment setup and game development with the following core advantages:

• Quick Setup: Minimal configuration required to get a 3D environment running.
• ECS Architecture: Uses an Entity Component System (ECS) approach, providing a flexible way to manage game logic.
• React Integration: Leverages the expressiveness of React and react-three-fiber while minimizing boilerplate.
• Scope Flexibility: Optimized for small to medium-scale 3D projects, such as shooters or exploration games.

viber3d is a modern starter kit for 3D browser games built with the following stack:

• Core Engine: React 19, React Three Fiber (declarative Three.js), and Drei (helpers).
• Physics: React Three Rapier for physics simulations.
• Architecture: Entity Component System (ECS) powered by the koota library.
• State Management: Zustand.
• Build Tooling: Vite for fast development and builds.
• Styling: TailwindCSS for utility-first CSS.
• Language: TypeScript for type safety.
• Design: Responsive design for all devices.

When rendering large numbers of identical or similar objects (e.g., crates, bullets, environment props), using individual Three.js Mesh objects can cause performance bottlenecks due to high draw call counts.

Batch Mesh solves this by combining many objects into a single Three.js mesh. This reduces draw calls—often to just one—while still allowing you to manipulate individual "instances" using per-instance transform data.

Viber3D uses an Entity Component System (ECS) architecture powered by the koota library. This data-driven design separates data from logic to improve performance and flexibility in real-time and XR applications.

Core abstractions include:

• Entities: Unique identifiers representing objects (e.g., players, bullets).
• Traits: Pure data containers attached to entities (equivalent to 'components' in other ECS frameworks).
• Systems: Logic blocks that query entities with specific traits and process them.

This approach favors composition over inheritance, allowing you to build complex behaviors by combining small, focused traits rather than using rigid class hierarchies.

Koota supports two storage strategies for traits, which impact performance and data structure:

1. Schema-based (SoA - Structure of Arrays): Define a trait using an object literal. Each property is stored in its own array. This is highly optimized for numeric fields that are updated frequently (e.g., Position, Velocity).

   const Position = trait({ x: 0, y: 0, z: 0 })

2. Callback-based (AoS - Array of Structures): Define a trait using a callback function. The entire trait is stored as a single object in an array. This is best for complex objects or class instances (e.g., THREE.Mesh, Vector3).

   const Mesh = trait(() => new THREE.Mesh())

// SoA Example
const Position = trait({ x: 0, y: 0, z: 0 })

// AoS Example
const Mesh = trait(() => new THREE.Mesh())

Viber3D uses an Entity-Component-System (ECS) architecture powered by koota. This pattern decouples data from logic to improve modularity and performance:

• Traits (Components): Hold the data (e.g., Position, Velocity, Health).
• Entities: Unique IDs that act as containers for various traits.
• Systems: The logic layer. Systems run every frame (or on demand) and process groups of entities that possess a specific set of traits (e.g., a movementSystem processes all entities with both Position and Velocity).

This separation allows you to add or remove features by simply attaching or removing traits from entities without modifying existing logic.

Three.js uses bounding volumes (Box or Sphere) for frustum culling. Because a BatchedMesh is a single object, it typically uses one overall bounding volume for all its instances.

Crucial: You must recompute the bounding volume (e.g., batchedMesh.computeBoundingBox() and batchedMesh.computeBoundingSphere()) whenever you add or remove instances to ensure objects are not incorrectly culled from the scene.