Skip to main content

Rendering Overview

GameByte supports three rendering modes to cover any game type.

🎮Neon Pong - Graphics Primitives in Action
⛶
Loading demo...

2D Rendering (Pixi.js)​

🎮2D Graphics - Shapes & Effects
⛶
Loading demo...

3D Rendering (Three.js)​

🎮3D Basic Shapes Demo
⛶
Loading demo...

Hybrid Mode (2D + 3D)​

🎮Hybrid Rendering Demo
⛶
Loading demo...

Rendering Modes​

ModeEngineUse Case
'2d'Pixi.js v82D games, sprites, UI
'3d'Three.js3D games, first-person, third-person
'hybrid'Both3D world with 2D UI overlay

Quick Selection Guide​

                    Need 3D graphics?
                          │
            ┌─────────────┼─────────────┐
            │ No          │             │ Yes
            ▼             │             ▼
        Use '2d'          │        Need 2D UI?
                          │             │
                          │   ┌─────────┼─────────┐
                          │   │ No      │         │ Yes
                          │   ▼         │         ▼
                          │ Use '3d'    │    Use 'hybrid'
                          └─────────────┘

Initializing Renderers​

2D Mode (Pixi.js)​

import { createGame } from '@gamebyte/framework';

const game = createGame();
await game.initialize(canvas, '2d');

// Access 2D renderer
const renderer = game.make('renderer');

3D Mode (Three.js)​

const game = createGame();
await game.initialize(canvas, '3d');

// Access Three.js objects
const renderer = game.make('renderer');
const scene = renderer.getScene();
const camera = renderer.getCamera();

Hybrid Mode​

const game = createGame();
await game.initialize(canvas, 'hybrid');

// Access both renderers
const renderer2D = game.make('renderer.2d');
const renderer3D = game.make('renderer.3d');

Renderer Features​

2D Renderer (Pixi.js)​

  • WebGL/WebGPU - Hardware-accelerated rendering
  • Sprites & Textures - Efficient sprite batching
  • Filters - Blur, glow, displacement, custom shaders
  • Masks - Alpha, graphics, and sprite masks
  • Graphics API - Procedural shapes
  • Text - Bitmap and canvas text
  • Particles - High-performance particle systems

3D Renderer (Three.js)​

  • WebGL/WebGPU - Modern graphics APIs
  • Geometries - Box, sphere, custom meshes
  • Materials - PBR, standard, custom shaders
  • Lighting - Ambient, directional, point, spot
  • Shadows - Real-time shadow mapping
  • Post-processing - Bloom, SSAO, color grading
  • Loaders - GLTF, OBJ, FBX models

Performance Considerations​

Mobile Optimization​

createGame({
    renderer: {
        // Lower resolution for performance
        resolution: Math.min(window.devicePixelRatio, 2),

        // Prefer power efficiency
        powerPreference: 'low-power',

        // Disable antialiasing on low-end devices
        antialias: !isMobile()
    }
});

Batching​

Pixi.js automatically batches sprites with the same texture:

// Good: Same texture = batched
sprites.forEach(s => s.texture = sharedTexture);

// Bad: Different textures = separate draw calls
sprites.forEach((s, i) => s.texture = textures[i]);

Culling​

Only render what's visible:

// Enable view culling
renderer.setConfig({
    culling: true,
    cullPadding: 100 // pixels outside viewport
});

Renderer API​

Common Methods​

const renderer = game.make('renderer');

// Start/stop rendering
renderer.start();
renderer.stop();

// Resize handling
renderer.resize(width, height);

// Background color
renderer.setBackgroundColor(0x1a1a2e);

// Take screenshot
const dataUrl = renderer.screenshot();

2D-Specific​

const renderer = game.make('renderer');

// Get Pixi application
const app = renderer.getApp();

// Get root container
const stage = renderer.getStage();

// Add display object
renderer.add(sprite);

3D-Specific​

const renderer = game.make('renderer');

// Get Three.js objects
const scene = renderer.getScene();
const camera = renderer.getCamera();
const threeRenderer = renderer.getThreeRenderer();

// Add 3D object
renderer.add(mesh);

Next Steps​