Greetings visitor. Welcome to xbdev.net, where the bits and bytes are always buzzing with excitement.
Make yourself cozy. Pull up a chair. Have a refreshing glass of water (or coffeee).
Explore the tutorials, project pages, and research articles - with prototypes, code samples, and rantings....
All sorts of exciting gems from graphical formats through to game engines and machine learning.
Got a cool idea or a project that could blow some minds? We're all ears! Whether it's reverse engineering or crafting beginner-friendly "hello world" tutorials for game consoles, we're up for it. Seriously, throw your craziest ideas our way!
xbdev.net is about turning technically challenging topics into fun and creativity. So, whether you're a coding ninja or just starting your adventure, there's a spot for you. Let's dive into the digital rabbit hole together!
Thanks you for supporting xbdev.net .... and keep an eye out for the latest shenanigans and hacky additions to our ever-growing stash of knowledge.
.... PROGRAMMING .. IT'S MORE THAN CODING ... IT'S AN ART, IT'S A LANGUAGE, IT'S A LOVE ... WELCOME TO XBDEV.NET - GOING BEYOND JUST LEARNING TO CODE ... IT'S ABOUT LEARNING THE BLACK ARTS ... THE SECRETS .. THE TRICKS ... HOW IT WORK UNDER THE BONNET ... FOR EXAMPLE, HOW TO WRITE A GPU DRIVER, HOW TO WRITE YOUR OWN RASTERIZATION ENGINE, HOW PHYSICS ENGINES WORK (BY WRITING YOUR OWN), ... CODING FOR FUN, FOR THE CURIOUS AND FOR THOSE WHO JUST WANT TO LEARN ...
What's been happening, what's new, what does tomorrow hold?
 |
Spheres and Fractals |
 |
Generating Fractals with ONLY Spheres
Having fun with spheres - creating a hypnotizing fractal pattern - in 2d and 3d. To make the 3d one even more wow we render it using a web-based ray-tracer - so we can use realistic reflections (spheres are made of glass).
The 3d version runs in real-time with the camera rotating around the model - so you can see it in all its beauty - try changing the materials or number of spheres - be warned though - you can easily crash your browser with this - as a recursive depth of 6 can be 20,000+ spheres!
Tutorial Page (LINK)
WebGPU Demo Page (LINK)
WebGL Demo Page (LINK)
|
|
Procedural Grass Blades/Fields |
|
Army of Animated Marching Shapes (Spheres, Cubes, Capsules...)
Draw lots and lots of spheres (and other shapes) by using using the ray-surface intersection and surface coordinates to calculate the position of the shape. This means we only draw what we can see - it also means we don't need to iterate over each shape.
You can fill the screen with spheres - even if they're as small as dots - and it won't cost the earth - as each ray-intersection already knows the position of its own sphere and does not need to deal with any costly iterations/memory overheads.
Ray-plane intersection to calculate the centre of each sphere.
The effect is able to run in a web-browser in real-time and uses a single fragment shader for the calculations/effect (i.e., ray-tracing).
Tutorial Page (LINK)
WebGPU Demo Page (LINK)
WebGL Demo Page (LINK)
|
|
Procedural Grass Blades/Fields |
|
Grass by Ray-Marching (Fields of Grass)
Grass is a fun and exciting project for adding a huge amount of detail to a scene - instead of flat planes or textured surfaces - you can add grass! Grass is like a magical carpet of fur that covers any surface - adding magic and life to 3d worlds. Yet creating a customizable, flexible realistic grass effect isn't as easy as you'd think. One that runs in real-time without killing your computer's processor!
To give you an idea - a lush full lawn of grass - about 100 square meter could have anywhere from 50 million to 100 million blades of grass! How do we render 100 million blades of grass in real-time while making it flexible and customizable? Control the style and layout of the grass to suit our needs?
One solution that is simple and easy to implement is to use a mixture of ray-tracing and ray-marching!
Grass blades with varying length and position scattered around on a plane - while the camera rotates around (field of grass).
The grass effect is able to run on a single fragment shader.
Tutorial Page (LINK)
WebGPU Demo Page (LINK)
|
|
Texture Worm Patterns |
|
Texture Worm Patterns (Wiggly Worms)
Imagine taking a bucket of worms - covering each one in paint and letting them run lose on a piece of paper! That's what you'd get with this type of pattern - the wiggly worm texture pattern.
Wiggly worm texture pattern generation - the pattern doesn't just happen it grows and evolves like a living picture.
The complete effect is able to run on a single fragment shader.
Tutorial Page (LINK)
WebGPU Demo Page (LINK)
|
|
Deep Ocean Effect (Floating Object) |
|
Real-Time Interactive Ocean Water
Everyone loves water! This simple example create a realistic ocean effect using a shader effect. The effect is really simple and elegant - using a smoothed noise function.
Creating a realistic deep water effect (sea) with a floating (bobbing) object in the water - capturing reflection and refraction (surface motion).
The complete effect is able to run on a single fragment shader.
Tutorial Article (LINK)
WebGPU Demo Page (LINK)
Vulkan Code (LINK)
|
|
Real-Time Fluid Simulation (Computational Fluid Dynamics) on WebGPU |
|
Swirling and mixing of fluids
Grid based method to approximate the Stoke equations on the GPU - create a 2d fluid that lets you visualize the velocities and movement of a color die - like dropping ink into water - you can see it disperse and swirl.
You can see a screenshot of the prototype/test demo below - for fun - we start the simulation with a fluid that lets you spell out text in the liquid - which you can interact with to disrupt the liquid (mixing it) - so it swishes and swashes.
Disolving and mixing liquids - not just fading away or blending - but emulating the realistic characteristics (approximating and mantaining the density/pressure).
The implementation wasn't developed for performance but more of a learning platform - so you could breakdown the different parts of a fluid simulation on the GPU (multiple kernels).
Tutorial Article (LINK)
WebGPU Demo Page (LINK)
|
|
Thousand and thousands of animated 3d characters! |
|
50,000 Animated Characters with WebGPU - Epic Swarms of RPGS
Animated characters are a key aspect of any interactive game/virtual world - however, you don't want a few characters - you want thousands of them! All animated and moving around and interacting with the world!
Today you with the GPU and the WebGPU API - you can create thousand of animated characters in a canvas webpage that run real-time with a few hundred lines of code.
The following demo shows a small screenshot of the animated character demo in the webgpu lab (loads md2 model and instances it thousands of times using the WGSL shader language).
Shows thousands and thousands of animated characters on screen at the same sime!. Cool eh? NO? The concept and implementation is so simple!'
Instancing large number of full animated automous characters that can walk around and interact with each other and the environment is cool! Imagine it, you can create Lord of the Rings epic games that run the web-browser! The AI, physics and control can all be done on the GPU using the compute shader.
Tutorial Article (LINK)
WebGPU Demo Page (LINK)
MD2 File Format (LINK)
|
|
Burn Baby Burn! - Generating Realistic 3D Volumetric Fire Effects |
|
Animated Volumetric Fire - The good, the bad, and the 'hot'!
Volumetric flames that can be controlled to create a variety of effects - using the WebGPU API you can create real-time graphics that run in a web-browser without breaking a sweat!
The following is a small screenshot of one of the effects for the article on volumetric fire.
Shows one of the fire effect being used to generate the letters for the word 'xbdev'. Cool eh? NO? The concept and implementation is so elegent!'
The fire effect is 3d - so you can move the camera around and mix the effect with other 3d visuals/objects.
The small article just gives a taste of the sweet potential - so much more you can can do and brings together lots of powerful concepts (fractals, ray-tracing, webgpu shader language, ...). You can see them as igredients - combining them together in the right way to create a wondeful cake?
Tutorial Article (LINK)
|
|
Rick & Morty (Mini Mario Web-Game) |
|
Rick & Morty - Mini Mario Fun
I'm a bit of a Rick & Morty Fan - so while working on mini demos using HTML - I put together a mini game that brings together a Mario-type game with Rick and Morty Theme.
Only a prototype/test version - but it's still fun :)
The code and details are in the reto game section - with other game/code examples.
Retro Game Section (Retro Games with HTML/JS)
|
