BlorkTools

Advanced development and debugging toolkit for Three.js applications. This package provides a comprehensive suite of tools for visualizing, debugging, and analyzing 3D applications built with Three.js.

Performance Improvement

• New Debug Render System: Improved visualization with lower performance impact
• Memory Usage Tracker: Better memory tracking and optimization suggestions

Key Features

• Asset Debugger: Visualize and debug 3D assets with a powerful UI
• Rig Debugger: Debug animation rigs and skeletal animations
• Performance Tools: Monitor and optimize rendering performance

Installation

npm install @littlecarlito/blorktools

Usage

import { 
  AssetDebugger,
  RigDebugger, 
  SceneAnalyzer 
} from '@littlecarlito/blorktools';

// Initialize the debugger
const debugger = AssetDebugger.initialize(scene, renderer);

// Enable debugging features
debugger.enableWireframes();
debugger.enableBoundingBoxes();
debugger.enablePerformanceMetrics();

// Analyze scene
const analysis = SceneAnalyzer.analyzeScene(scene);
console.log(analysis.statistics);

Architecture

The codebase follows a modular architecture for better maintainability and extensibility:

Core Modules

• index.js - Application entry point and state management
• scene.js - Three.js scene and rendering setup
• loader.js - Model and texture loading
• analyzer.js - Model structure analysis and UV handling

UI Modules

• debugPanel.js - Information panel and controls
• textureEditor.js - Texture editor with multi-texture support
• atlasVisualization.js - UV mapping visualization
• dragdrop.js - Drag and drop interface for file uploading

Material Modules

• textureManager.js - Texture loading and application
• multiTextureMaterial.js - Custom shader-based material for blending multiple textures

Utility Modules

• helpers.js - Common utility functions
• events.js - Event listeners and keyboard shortcuts

Development

Within the monorepo, you can build and test the package using Turborepo:

# Build only blorktools
pnpm turbo run build --filter=@littlecarlito/blorktools

# Run tests
pnpm turbo run test --filter=@littlecarlito/blorktools

# Start in development mode with hot reloading
pnpm turbo run dev --filter=@littlecarlito/blorktools

Extensions

Blorktools supports custom extensions and plugins:

import { registerPlugin } from '@littlecarlito/blorktools';

// Create custom plugin
const myPlugin = {
  name: 'AI-OptimizationSuggester',
  version: '1.0.0',
  initialize(context) {
    // Setup plugin with context
    this.api = context.api;
    this.scene = context.scene;
    
    // Register custom UI panel
    this.api.registerPanel('AI Suggestions', this.renderPanel.bind(this));
  },
  renderPanel(container) {
    // Create UI elements
    const button = document.createElement('button');
    button.textContent = 'Analyze Scene';
    button.onclick = this.analyzeScene.bind(this);
    container.appendChild(button);
  },
  analyzeScene() {
    // Custom analysis logic
    const suggestions = this.runAnalysis(this.scene);
    this.api.showResults(suggestions);
  },
  runAnalysis(scene) {
    // AI-based scene analysis
    return ['Suggestion 1', 'Suggestion 2'];
  }
};

// Register plugin
registerPlugin(myPlugin);

Browser Support

| Browser | Support Level | Notes | |---------|--------------|-------| | Chrome | Full | Best experience with DevTools integration | | Firefox | Full | WebGL Inspector integration available | | Safari | Full | Performance may vary | | Edge | Full | Same as Chrome | | iOS | Limited | Basic functionality only | | Android | Limited | Basic functionality only |

Dependencies

• Three.js (^0.172.0)
• Express (^4.18.3)
• Vite (for development server)
• dat.GUI (for control interfaces)
• gl-matrix (for math operations)

Contributing

This package is part of the threejs_site monorepo. Please refer to the main repository for contribution guidelines.

License

This package is licensed under the GNU General Public License v3.0 (GPL-3.0).

See the root LICENSE file for full terms and conditions.