Coding Crusader's

No, I didn’t try it yet.

I would never compare myself to a giant! :slight_smile:

In my projects there is a basic tenor: back to the origin or the search for the answer to the question “how did they do that?”

By the way, I had my little timeline project updated. Now it can also do texture transitions! I didn’t see that in the video and maybe you could leave the calculation of the jumps to a AI these days. Ihis would be much more user-friendly, but at the time of video recording, these beasts were not as intelligent as they are today…

1 Like

Marry Babylon & Three! :bell: :dove:

There’s a trick: you can create the WebGL context yourself and pass it to both Babylon.js and Three.js, but only one engine is allowed to draw at a time.

Here’s a simple demo of how you can use Babylon.js and Three.js alternately in the same canvas and WebGL context:

Three creates the geometry and exports the scene as a glTF model. Babylon loads the model and renders the scene.

babylon.three.zip (2.5 KB)

1 Like

static website integration

babylon.html.zip (13.6 KB)

Vector-Based Object Manipulation Tool for Babylon.js

A custom gizmo implementation that allows precise object manipulation along user-defined vectors in 3D space.

Key Features

  • Two-Point Vector Definition: Click on two points in the scene to define a movement vector
  • Large Background Sphere: Enables clicking anywhere in the scene, not just on objects
  • Visual Markers: Green and red spheres mark the selected points
  • Keyboard Controls: Use + and - keys to move objects by defined units
  • Adjustable Movement Units: UI slider to set the movement increment (0.01-1.0)
  • Visual Feedback: On-screen notifications when moving objects
  • Status Display: Guides users through the interaction process

Usage Flow

  1. Click on an object or any point in the scene to set the first point
  2. Click a second point to define the vector direction
  3. The selected object can now be moved along this vector by:
  • Dragging the arrow gizmo
  • Using + key to move forward along the vector
  • Using - key to move backward along the vector
  1. Click anywhere to reset and start over

The tool provides precise control for positioning objects along custom vectors with adjustable step sizes.


babylon.gizzmo.zip (7.6 KB)

1 Like

Rotation Feature - User Guide

Object Rotation

To rotate an object around a defined axis:

  1. Select an object by clicking on it
  2. Click a second point to define the rotation axis
  3. Use the following controls to rotate the object:
  • Press R key to rotate clockwise
  • Press F key to rotate counterclockwise
  • Click the button for clockwise rotation
  • Click the button for counterclockwise rotation

Adjust the rotation angle using the π/n control. Lower values create larger rotations (π/1 = 180°, π/4 = 45°).

The object will rotate around the axis defined by your two selected points.


babylon.gizzmo.zip (8.6 KB)

Football Game

A 3D football (soccer) game built with Babylon.js featuring:

  • Two-player local gameplay with keyboard controls
  • Physics-based ball movement and player interactions
  • Stadium environment with spectator stands surrounding the field
  • Realistic lighting and shadows from four corners
  • Visual indicators for shooting range and game status
  • Goal detection and automatic ball recovery when out of bounds
  • Score tracking and victory celebration effects

Players control cone-shaped characters to kick the ball into the opponent’s goal. The game includes visual feedback for actions and automatically resets after goals.


coming soon…

1 Like

Interactive Bone System

Description

This application is an interactive 3D bone system built with Babylon.js that allows users to create, manipulate, and animate hierarchical bone structures. It provides a visual representation of joints (spheres) connected by bones (cylinders) that can be manipulated in real-time.

Key Features

  • Joint Creation and Manipulation: Create a hierarchical bone structure by adding joints. Each joint can be selected and repositioned using a gizmo.
  • Navigation Controls: Navigate through the bone structure using “Previous Joint” and “Next Joint” buttons to select different joints in the hierarchy.
  • Animation System: Animate selected joints with customizable parameters:
    • Per-axis animation controls (X, Y, Z)
    • Direction vectors (-1 to 1) to control animation direction for each axis
    • Adjustable amplitude to control the range of movement
    • Configurable frequency to control the speed of animation
  • Bone Consistency: The system maintains proper bone lengths and connections during manipulation and animation, ensuring the bone structure remains coherent.
  • User Interface: A compact sidebar on the left contains all controls, while the 3D scene occupies the majority of the screen on the right.

Usage

  1. Use the “Add Bone” button to add new bones to the selected joint
  2. Select joints by clicking on them or using the navigation buttons
  3. Reposition joints using the position gizmo
  4. Toggle animation for the selected joint
  5. Customize animation parameters for each axis and apply changes

The application is ideal for prototyping character animations, studying joint movement, or as a foundation for more complex skeletal animation systems.

babylon.bones.zip (12.0 KB)

I found in the playground a nice box volumetric fog shader

Babylon.js Playground

Upgrade

  • AI Opponent: Play against a computer-controlled opponent with adjustable difficulty
  • AI Training Mode: Watch the AI train itself and improve over time

CodingWizzard/FootballGameAI

AI Implementation in Football Game

The AI in this game is implemented without using neural networks. Instead, it employs:

  1. Rule-based decision making: Fixed rules determine behavior (e.g., “if close to ball, then shoot”)
  2. Parametric adjustment: A skill level parameter (0-1) controls various aspects like speed, shooting accuracy, and decision making
  3. Deterministic logic: Predictable reactions based on game situations, with some randomness added for more natural behavior
  4. Simple “learning” mechanism: Improvement occurs through gradual increases in the skill level parameter, not by adjusting weights in a network

This approach is well-suited for a browser game because it:

  • Requires less computational power
  • Is simpler to implement
  • Produces predictable behavior
  • Still allows for difficulty progression

It’s essentially a classic, rule-based AI with adaptive parameters, as opposed to modern machine learning approaches like neural networks or reinforcement learning.

3D Architecture from Images

Description

This application transforms 2D images into 3D architectural models using contrast analysis. Built with Babylon.js, it allows users to generate, visualize, and export 3D structures based on brightness patterns in uploaded images.

Key Features

  • Image Analysis: Analyzes brightness patterns in uploaded images to identify architectural structures
  • Contrast-Based 3D Generation: Creates 3D boxes based on brightness thresholds in image sections
  • Dual Contrast Modes: Supports both bright and dark area detection for versatile modeling
  • Customizable Grid: Adjustable grid size for precise control over model detail
  • Height Control: Modify the vertical scale of generated structures
  • Real-time Visualization: Instantly view your 3D model in an interactive viewer
  • Multiple Export Formats: Export your models in OBJ, GLB, glTF, or STL formats
  • Performance Optimization: Uses instancing for efficient rendering of complex models
  • Color Preservation: Maintains average color values from the source image

How It Works

  1. Upload an image containing architectural elements or patterns
  2. Adjust the grid size, brightness threshold, and height factor
  3. Choose between bright or dark area detection
  4. The application analyzes the image and generates a 3D model
  5. Interact with your model in the 3D viewer
  6. Export the model in your preferred format for use in other applications

Technical Details

Built using modern web technologies:

  • Babylon.js for 3D rendering and scene management
  • JavaScript for application logic
  • HTML5/CSS3 for the user interface
  • Custom algorithms for image analysis and 3D generation

The application processes images locally in the browser, with no server-side processing required. It uses efficient instancing techniques to handle complex models with minimal performance impact.

Use Cases

  • Architectural concept visualization
  • Urban planning and design
  • Artistic 3D creation from 2D patterns
  • Educational tool for understanding spatial relationships
  • Quick prototyping of building structures

This tool bridges the gap between 2D imagery and 3D modeling, making it accessible to create architectural visualizations without specialized 3D modeling skills.

TODO

  • The exported files are not displayed correctly in the sandbox. can anyone find the bug?

architectureFromPicture.zip (15.9 KB)

I’ve got a lot of identical boxes in OBJ and just nothing in other formats.
Export function looks overcomplicated…

Yes, the AI has tried several different approaches without success. It also seems that the boxes in the scene are always the same size, even if i change the grid size. So there are still some bugs on the way…

I’m currently in the process of programming an eye tracker that allows you to hit targets with your eyes. good training for my tired eyes. :smiling_face_with_sunglasses:

What is the name of AI which you used for this?

Augment Extension in VS Code

1 Like

Audio Visualizer

A dynamic 3D audio visualizer built with Babylon.js that transforms audio input into an interactive visualization. Features include:

  • Real-time audio analysis from file uploads or microphone input
  • Customizable visualization parameters (line count, spacing, height scale)
  • Performance optimization for different devices
  • Debug tools for troubleshooting and enhancement
  • Responsive design that adapts to window size

The visualizer creates a 3D grid of cubes that react to audio frequencies, creating an immersive visual representation of sound. Perfect for music lovers, developers exploring WebGL, or anyone interested in audio visualization.

CodingWizzard/SoundVisualizer

Soundfiles:

1 Like

This is a simple interactive demo that allows you to deform a sphere in real-time, like clay.

Key Features:

  • Real-time Deformation: Click and drag on the sphere to push or pull the surface. Left-click pulls the surface outwards, and right-click pushes it inwards.
  • Adjustable Parameters: Use the sliders to control the deformation strength and radius.
  • Reset Functionality: A reset button is provided to restore the sphere to its original shape.
  • UI Controls: Uses a simple UI built with Tailwind CSS for easy control of parameters.
  • Camera Controls: The ArcRotateCamera is disabled while deforming the sphere to prevent accidental camera movements.

How it Works:

The core of the demo involves raycasting to determine the point on the sphere that the user is interacting with. When the user clicks on the sphere, the code calculates the vertices within the deformation radius and displaces them along the normal of the hit point. The camera controls are disabled on pointer down and re-enabled on pointer up.


index.zip (2.8 KB)

3 Likes

Defender-Style Game: A Retro Arcade Experience

Project Overview

This project is a modern reimagining of the classic arcade game “Defender”. The game features a side-scrolling shooter experience where players must rescue astronauts while defending against alien invaders.

Key Features

  • Smooth Side-Scrolling Action: Navigate through a vast world with fluid controls

  • Rescue Mission: Save astronauts from being abducted by aliens

  • Dynamic Enemy AI: Aliens actively seek out astronauts and attempt to capture them

  • Progressive Difficulty: The challenge increases as you rescue more astronauts

  • Retro-Inspired Visuals: Simple yet effective 3D graphics with a classic arcade feel

  • Minimap Navigation: Keep track of astronauts and aliens across the game world

Technical Highlights

  • Built with Babylon.js for rendering and game logic

  • Orthographic camera for authentic 2D gameplay in a 3D environment

  • Collision detection system for interactions between game entities

  • Responsive design that adapts to different screen sizes

  • Custom animation system for visual effects

How to Play

Use the arrow keys to navigate your ship, space bar to shoot, and Z key for hyperspeed. Your mission is to rescue all astronauts before they’re abducted while defending yourself against alien attackers.

Try the game now and experience this nostalgic tribute to one of gaming’s most influential classics!

defender.zip (10.3 KB)

Technical documentation included in the docu.md file.

@MakarovDs777 I’ve created an interactive web-based simulation of the infamous “Backrooms” Level 0. This eerie, liminal space generator procedurally creates an endless maze of identical rooms with yellowed wallpaper, lights, and that distinctive uncanny atmosphere.

Features:

  • Procedurally generated infinite environment
  • First-person exploration with WASD controls
  • Toggleable flashlight (press F)
  • Top-down map view (toggle with button)
  • Randomly placed furniture and picture frames
  • Rare anomalies: red rooms, exit doors, and dead ends
  • Atmospheric lighting that creates the signature backrooms feel

As you explore, new rooms are dynamically generated around you while distant rooms are removed to maintain performance.

Each room features distinct architectural elements with highlighted edges, randomly placed picture frames with images, and occasional furniture like tables, chairs, and boxes. You might even stumble upon rare anomalies like the mysterious red rooms or doors that lead to “Level 1.”

Try it yourself and see how long you can wander through this unsettling, liminal space before the feeling of being watched becomes too much to bear… :face_with_peeking_eye:

index.zip (5.5 KB)

1 Like

Quantum Neural Network Simulator

Project Overview

This interactive web application simulates a Quantum Neural Network (QNN) for binary classification tasks. It demonstrates how quantum computing principles can be applied to machine learning problems, providing an educational tool for those interested in quantum machine learning.

Key Features

  • Interactive Quantum Circuit Visualization: 3D visualization of quantum circuits with qubits and quantum gates using Babylon.js
  • Real-time Data Visualization: View your dataset and classification boundaries in an interactive 3D environment
  • Customizable Datasets: Choose from different classification problems (Circles, Spiral, XOR) with adjustable noise levels
  • Configurable QNN Architecture: Select the number of qubits and layers in your quantum neural network
  • Training Visualization: Watch the loss function decrease in real-time as the network learns
  • Performance Metrics: View accuracy and other metrics after training

Technical Implementation

The simulator is built entirely with JavaScript and HTML5, using:

  • Babylon.js for all 3D visualizations (quantum circuit, data points, and training progress)
  • Custom quantum circuit simulation implementing basic quantum gates (Rx, Ry, Rz, CZ)
  • Complex number operations for quantum state manipulation
  • Gradient-based optimization for training the quantum neural network

Educational Value

This simulator helps users understand:

  • How quantum circuits can be structured for machine learning tasks
  • The role of entanglement in quantum neural networks
  • How classical data can be encoded into quantum states
  • The challenges of training quantum machine learning models

No quantum computing hardware or advanced mathematics knowledge is required to use this simulator, making quantum machine learning concepts accessible to a wider audience.

Future Developments

Planned enhancements include:

  • Additional quantum gate types
  • More complex dataset options
  • Visualization of decision boundaries
  • Comparison with classical neural networks
  • Export/import of trained models

indexNeuron.zip (7.5 KB)


Quantum-Inspired Counter Visualization

This program demonstrates a quantum-inspired approach to counting from 1 to 10. It simulates quantum measurements and displays the results as a 3D histogram.

Why You Can’t Simply Count 1 to 10 on a Quantum Computer?

Quantum computers don’t work like classical computers when it comes to counting sequentially. Here’s why:

Superposition: Quantum bits (qubits) exist in multiple states simultaneously until measured. When you try to count sequentially, you’re forcing definite states, which defeats the quantum advantage.

Probabilistic Nature: Quantum measurements collapse superpositions into classical states with certain probabilities. This program simulates this by using random sampling - each “measurement” has a probability of yielding numbers 1-10.

No Deterministic Sequences: Quantum algorithms excel at parallel processing and probability distributions, not at deterministic sequences like “1, 2, 3…”. When measured, qubits give probabilistic outcomes.

Measurement Destroys Information: Each measurement collapses the quantum state, making sequential operations challenging.

This visualization shows what happens when we take 500 measurements of a 4-qubit system and count how many times each number from 1-10 appears. The 3D bars represent the frequency distribution - a fundamentally quantum concept rather than classical counting.

Quantum computers are powerful for specific tasks like factoring large numbers or searching unsorted databases, but they require completely different algorithmic approaches than classical step-by-step counting.

indexCount1-10.zip (1.6 KB)

I created my first custom node for n8n yesterday. It might be useful to create a node for babylon as well. There should be a babylon server that can be controlled via REST api.

A node for Babylon.js could be useful if you:

Prepare assets, scenes or configurations: e.g. n8n as a backend that prepares or configures Babylon projects.

Automatically generate or manipulate 3D scenes, e.g:

  • n8n workflow loads product data from an API

  • generates a Babylon config (JSON, glTF etc.)

  • saves it or sends it to a frontend

plan rendering via Headless-WebGL/Node-WebGL (very special):

  • For offline renderings or thumbnails (e.g. in conjunction with Puppeteer)

Example starter module for custom n8n nodes: n8n-io/n8n-nodes-starter


n8n stands for “nodemation”, which is a blend of:

  • “node” – referring to its use of Node.js and its node-based workflow structure
  • “automation” – because it’s designed to automate tasks and data flows
1 Like