Divine Voxel Engine - Voxel Engine Made With Babylon.js - Alpha 1.0 Out Now

[lucas-divinestar]

I have been rather busy last month or so. I officially started working at Bitreel as a senior developer. I will say I am open to work involving BJS just it has to be an ethical, viable, and reasonable project.

Anyway so I added a really cool feature to DVE called “custom substances”.
With that I was able to add magma and another transparent substance for things like chains.

Here is the code to register the two new substances:

SubstanceManager.registerData([
 {
  id: "#dve_magma",
  tags: [
   ["#dve_parent_substance", "#dve_liquid"],
   ["#dve_rendered_substance", "#dve_liquid"],
   ["#dve_is_solid", false],
   ["#dve_is_liquid", true],
   ["#dve_flow_rate", 3],
   ["#dve_culled_substances", ["#dve_liquid", "#dve_solid"]],
  ],
 },
 {
  id: "#dve_translucent",
  tags: [
   ["#dve_parent_substance", "#dve_flora"],
   ["#dve_rendered_substance", "#dve_solid"],
   ["#dve_is_solid", true],
   ["#dve_is_liquid", false],
   ["#dve_flow_rate", 0],
   ["#dve_culled_substances", []],
  ],
 },
]);

So as you can see you can specify the substances “parent”. Its parent will define all culling and AO behavior. You can also define the substance that it is rendered as. Meaning you can define the actual mesh/material it belongs to.

With that you can add a custom rendered susbtance like this:

DVER.nodes.substances.add(
[
 {
    "dve_custom_substance",
    material: {
     alphaBlending: false,
     alphaTesting: true,
     backFaceCulling: true,
    },
    texture: DVER.nodes.textures.addTextureType( "dve_custom_substance"),
    shader: DVER.nodes.shaders.createVoxelShader("dve_custom_substance"),
    mesh: {
     materialId: "dve_custom_substance",
     boundingBoxMaxSize: [16, 16, 16],
    },
   }
]
 )

And lastly I got different dimensions working properly for DVE.

So DVE is pretty much ready to go to beta no problem. The API is pretty much finalized. There will be less breaking changes in the future.

I am still working on the pixel entity program as well. I made it so you can change the UV cords for each face for the entity and the program itself is getting kinda complex with UI but it will be worth it in the end.

Hopefully soon I will release the newest version of Dream Space Infinite which has many bug fixies and vastly improved player controls.

There is an epic amount of other stuff that I’ve done with the DVE plug ins and other libraries that it uses that I just don’t have the time or energy to discuss. If I am not posting for a while probably cause I am deep in the trenches working on something big.

Thanks again everyone and feeling rather grateful for all the BJS community has brought to me.

[carolhmj]

You continue shooting into the stars with this incredible work And glad to see you bringing these amazing skills to the Bitreel team!

[sebavan]

The bitreel ream is lucky to have you !!!

[lucas-divinestar]

So, I have been busing working on a game that I hope to have out in the next month or so.

Crystalline Bliss - Added HUD, Points/Levels, & Event Tokens

This is just a video of 4 computer players vs each other. They are little dumb right now but I am working on making them smarter.
The game is multi player over WebRTC too.
It has full controller support and I am finally using the babylon GUI for the HUD display.

It takes place in the Dream Space Infinite universe. As Dream Space Infinite grows and evolves so will this game.
I just realized it is going to literally take me years to finish Dream Space Infinite and I still have a lot to learn in terms of actually releasing a game.
So, I am considering this to be my “the hobbit” and dream space infinite is the full “lord of the rings”.

It of course is using DVE. The levels though are pre-generated and only the mesh data is loaded in.

Also I am using thin instances/voxel entities for all the crystals and event tokens.

If you are curious this how I was able to rotate the thin instances only using the world matrix:

  this._matrix.position.x = -this.piviotPoint.x;
  this._matrix.position.y = -this.piviotPoint.y;
  this._matrix.position.z = -this.piviotPoint.z;

  
  if (this.rotation.x) {
   xRotationMatrix.rows[1].y = Math.cos(this._rotation.x);
   xRotationMatrix.rows[1].z = -Math.sin(this._rotation.x);
   xRotationMatrix.rows[2].y = Math.sin(this._rotation.x);
   xRotationMatrix.rows[2].z = Math.cos(this._rotation.x);
   this._matrix.multiply(xRotationMatrix);
  }
  if (this.rotation.y) {
   yRotationMatrix.rows[0].x = Math.cos(this._rotation.y);
   yRotationMatrix.rows[0].z = Math.sin(this._rotation.y);
   yRotationMatrix.rows[2].x = -1 * Math.sin(this._rotation.y);
   yRotationMatrix.rows[2].z = Math.cos(this._rotation.y);
   this._matrix.multiply(yRotationMatrix);
  }
  if (this.rotation.z) {
   zRotationMatrix.rows[0].x = Math.cos(this._rotation.z);
   zRotationMatrix.rows[0].y = -Math.sin(this._rotation.z);

   zRotationMatrix.rows[1].x = Math.sin(this._rotation.z);
   zRotationMatrix.rows[1].y = Math.cos(this._rotation.z);
   this._matrix.multiply(zRotationMatrix);
  }

  this._matrix.position.x += this.position.x + this.piviotPoint.x;
  this._matrix.position.y += this.position.y + this.piviotPoint.y;
  this._matrix.position.z += this.position.z + this.piviotPoint.z;

But anyway I will be making two threads soon. One asking if anyone wants to beta test the game and the next will be for the official release of it.

Thanks again everyone!

[sebavan]

Loooooks great !!!

I have to say it loud: @lucas-divinestar is the best !!!

[lucas-divinestar]

I’m back. I have been on a crazy journey the last 6 months or so. But I have gown immensely as a developer and I am using my new perspective to upgrade Divine Voxel Engine.

Web GPU Gen

The coolest thing I am working on now is WebGPU based voxel world generation and light propagation.

DVE - Web GPU Gen Test 1

This also did the sun light I just turned it down to make it look cooler.
The entire scene only takes 10 seconds to create and read back into memory. While normally a scene like that would take 3 minutes or more to generate.

The only lack of speed now is the CPU based chunk building.

I have never wrote a compute shader so this is my first try. But I was able to do what I wanted.

https://gist.github.com/lucasdamianjohnson/d5e0dc45071979f5ab03334a1c54dc3a

I still have a bit to go in terms of bringing in all the nuances of the world gen and light updates of the engine into the shader but it should not be that hard. I thought it was impossible at first now I feel like anything is possible lol.

If anyone does know a seed based Perlin noise 3d function for WGSL that would be awesome though.

New Repo & Packages

I have updated the main repo to be a full mono repo for the engine and associated packages. I am trying to work towards having a babylon level of quality for the repo and code base in general.

GitHub - Divine-Star-Software/DivineVoxelEngine: Divine Voxel Engine is a...

Newest Expose

Video I made showing off the newest version of the “dream space”.

Empyrean Ether - 2 Years Of Divine Voxel Engine

Game I am developing using the engine.
https://crystallinebliss.dev/beta/

Plans For 2024

• Implement fully into engine web gpu voxel world generation and lighting
• Add react three fiber style library to use DVE with React.
• Add support for web XR
• Fully implement an Entity Component System
• Add scene imports and exports

[sebavan]

Holly c…, that is a hell of an update !!!

The Webgpu generation is so cool

[lucas-divinestar]

I just wanted to share it going a lot faster now:

Divine Voxel Engine - Web GPU/Compute Shader Voxel Gen - Faster Meshing Test 1

This is all the time it takes to generate, run sun light, run rgb light, load back into memory on the cpu, and then create a mesh. Only about 20 seconds for an entire 256x128x256 area. While it would normally take something like 3+ minutes all cpu side.

The shader now is pretty big:

https://gist.github.com/lucasdamianjohnson/a52c38e54b0d2180328c04245ab6dd23

So, a few important things I did:

1. Ported a seeable perlin noise generation to the GPU so I do not have to change world gen at all.
2. Create system to process all voxels at once for a given region to create a template that can be quickly meshed.

So tnow the engine can take full advantage of cpu meshing and the same perlin noise that I think most devs are used to.

I have not seen anywhere online anyone using compute shaders in this way so this all experimental but so far I am happy with the results.

I know there has been papers on other techniques though using shaders: A Ray-Box Intersection Algorithm and Efficient Dynamic Voxel Rendering | NVIDIA Real-Time Graphics Research

Just its way more difficult when you want to use textures, vertex shader effects, and more. If I just wanted pure color voxels this would be much simpler but having the ability to add any shape to the chunk mesh adds many layers of complexity. Cause then its not just cubes anymore lol.

I am holding off on adding any GI or ray tracing until I see a good example with no visual errors working. I think that may be a year or more still I have no idea.

[carolhmj]

Absolutely crazy stuff as always

[sebavan]

[lucas-divinestar]

Congrats everyone on releasing BabylonJS 7!
I upgraded the other day and everything is working great.

I should be making a new thread in a few months as DVE is finally coming out of alpha into beta!

I just wanted to share some screen shots of the new stuff I am working on.

PBR Rendering

I am developing a new renderering system for DVE using Babylon’s PBR material system and so far it is going great! I got real time reflections working with SRR to and got some decent looking water. I was also able to move all glowing voxels to their own meshes and use the glow layer.

Magic Voxel & New Packages

So first let me explain that I have broke apart DVE into several packages:

• @divinevoxel/core | Abstract interfaces and utilities.
• @divinevoxel/foundation | The original set up for DVE. MC like with AO and lighting.
• @divinevoxel/magic | Magic voxel parser and integration.
• @divinevoxel/babylon-renderer | Renderer for DVE using babylonjs.
• @divinevoxel/three-renderer | Renderer for DVE using threejs.
• @divinevoxel/react-three | DVE integration for React Three Fiber.
• @divinevoxel/quantum-renderer | Custom experimental renderer using Web GPU.

I decided I am going to take DVE in a some what of a new direction. I would like to develop different types of voxel engines as well. I think the idea of being more or a less a set of general purpose voxel engines/voxel tools that could be used in a wide variety of projects would be amazing.

This is my first magic voxel scene that I got parsed and rendered using my new experimental web gpu renderer. The scene is rendered in a compute shader. There are only two triangles.

Ray marching is something I’ve been exploring for a while. I just would like to credit Inigo Quilzs work for making it possible.

Inigo Quilez

Though the ray casting algorithm for the voxel data is different then sdfs it uses them for the lighting and effects. There is still some work that needs to be done to. I would love to add textures, materials, and maybe different shapes.

Plexus Editor

I am building a program from scratch with Babylon and React to make it easy to develop games for DVE. Mostly it will be used for creating hand made and procedurally generated scenes.
I am developing a plugin system for it so it more expandable as well. But that will have its own set of libraries. The reason I am developing this is I’ve found getting content into voxel games to be the hardest thing. It is hard to manage all that data in a coherent way and making changes can break many things.

Crystalline Bliss

Also for my game Crystalline Bliss I recently released multi player and I am working on a new game mode and levels. This is a rough draft of a new level. I am getting more into Blender too and made the being in the chair. I can’t say much more cause don’t want to spoil anything.

Thanks again everyone and keep up the amazing work! I am excited for the future of web 3d!

[sebavan]

This keeps delivering !!! it is insane

[brechindo]

Beautiful landscape work!

How well-suited would this architecture be, for multiple discrete voxel-based models? Say, an asteroid belt - on a scale of hundreds or even thousands - instead of a landscape?

Each model instance would be free-floating driven by a physics imposter based on some sort of computed collision geometry, so it would need to be responsive to a dynamic root transform node on the CPU.

[lucas-divinestar]

Hello thank you for the question.

So, what I think you would have to do in this case is mesh each asteroid as its own discrete mesh and then handle it yourself.

There is a system in @divinevoxel/foundation for the default builder/mesher to create custom processors. You could write a custom asteroid masher to create a mesh for the asteroid and then do with it whatever you want.

Now handling the voxel data for the asteroid itself is a whole separate thing. If you want to update the asteroids you would need a way to translate pick points to the voxel space of the asteroid.

Also the handling the voxel data for the asteroids may be difficult as well. If you did not want to write your own system maybe each asteroid is just a dimension in the world data or a specific section of the world.

If you see maybe that there is some other features that could help make that happen I do have an issue for people to submit things they want:

Divine Voxel Engine Wish List

I will say though I will be posting updates hopefully soon but I just re-wrote the mesher and redid a lot of the libraries the engine is built with and moved them to a new github org.

I recently parented up with someone and we are going to be building a site with a few multi player voxel games using the engine so I am trying to make it as polished and reliable as possible.
I thought for a while about re-writing the core of it into WASM but after really digging in and doing a lot of fined grained optimizations its really fast. WASM has a lot of quirks too that just would make development a lot harder. Still need shared array buffers for multi threading so not much benefit there either.

[lucas-divinestar]

All right this is my last post before releasing the beta version of Divine Voxel Engine. I have been very busy basically transforming the engine from the inside out.
I just wanted say again that I am very grateful for everyone for encouraging me and helping me test my games and projects.

Some may know I joined a start up last year. That did go well for a while but because of many reasons the company basically fell apart a few months into me working there. the CEO fired everyone but me and the CTO and I quit a few weeks later after I was denied full time. Since then been living the life of a “starving artists” and doing whatever I can to get by but also grow as a developer.

So its been rough and the most painful thing was just the giant wrench it threw into my plans for my games and DVE. But now I am happy to say that I am back on track and have an even grander vision.

DVE Games & Builder Tools

So for the most part the focus of the core DVE libraries is rendering, meshing, and data management. It’s not an actual game engine but can be used to build a game engine.

So because of that I am working on a new library called @dvegames/foundation which makes it easy to build voxel games using the ECS pattern but with my custom ECS library under @amodx/ncs which has a few extra features. I already have rewritten Crystalline Bliss using this new setup and it is pretty awesome.

GitHub - Divine-Star-Software/DVEGames: Libraries for making games with DVE.

But I think the thing that most important right now from that library is the magic voxel style build tools I added as you can see in this video.

You can also do things like create voxel templates which just store an area of voxels and you can safety import/export worlds and change the voxel data. These features are actually a part of @divinevoxel/core but they have now easy to use interfaces through the new library.

There is other things in the library like the mini map you see which shows you the loaded columns and their world generation states. Which is great for debugging.

So just everything cool I come up with I can add to this library and others can just import the component and use it.

Crystalline Bliss

So recently I decided to make Crystalline Bliss a first person game where you can freely move around the game space and used a wand to move the crystals. I got a lot of feedback from people and I feel that is the best idea and can feels the most fun.

To make that move I am adding new levels and remodeling the old ones and this is the first new level I built using the new tools.

This is the closest thing I’ve ever made to actually what’s in my head which makes me very excited. Feels like nothing before this point really matters and now I just need to literally build out this world.

Divine Craft

This is another open source project I am working on. Its a Minecraft clone with the intent of pushing JavaScript to the limit. When I was working on Dream Space Infinite everyone said the world generation was too slow and I have literally spent an insane amount of time digging deep trying to fix issues with that.

I am happy to say I was able to make major improvements in performance. Instead of writing a whole book of things I did all I was will say is IndexDB is the devil and you need to be careful with it lol. You should try to keep access to it on one thread at a time or at least the same collection on the same thread.

So here are pictures of Divine Craft and the mini map with the biome types colored.

I am still working on it but here is a picture with PBR and reflections.

Magic Voxel & Quantum Renderer

Another part of the engine I am working on is for magic voxel scenes and ray marching/ray tracing rendering. So here are my next attempts at ray marching some magic voxel scenes.
I hope to get some real ray tracing soon.

Life/Perspective Changing Gig

So over the last few months I have been rewriting DVE and my other projects to use a new set of libraries. I was inspired to change everything after working on this game for Niantic’s new editor.
I have been working with this company Mouse Pack and they were contracted to make 3 games to promote Niantic’s new editor. I had two weeks to make a game and worked with some awesome people. As you can see here it being shown off at AWE earlier this year.

And the video of it here:

botany blast

The funest part for me was making the grass on the terrain. We did not have a height map so I had to make one on the fly on start up using a custom shader. Was also cool making the trail on the acorn gun.

But most importantly the software itself was inspiring to me as it was pretty easy to build stuff quickly and there was so much less cognitive load. So after the gig was over I started rewriting my libraries and created my own ECS library to rewrite my games with.

Amodx

And thus from all that Amodx was born. Its a different org committed to free open source software and creating useful abstract libraries for various things.
Some of the libraries are the old libraries under @divinestar but some are new ones like these:

• @amodx/math
  • A math library offering common types and tools for vector and matrix math.
• @amodx/meshing
  • A library for building custom meshes from scratch.
• @amodx/ncs
  • The NCS library is used to build flexible and scalable Node Component Systems (NCS).

GitHub - Amodx/Libraries

And if you are really deep into it I Amodx also has a set of libraries for custom html components.

GitHub - Amodx/Elements: Amodx Elements is a collection of free,...

So far the libraries are:

• @amodx-elms/controlui
  • A library of custom html components to make it easy to build a gamepad based UI.
• @amodx-elms/babylonjsgui
  • A set of custom html components to make working with the 2d babylonjs GUI easier.

The babylon GUI library is still being worked on but I remade the HUD in Crystalline Bliss using this. I wanted to work with the GUI like it was HTML and created a custom HTML components wrapped for it. Its really cool cause you can animate the elements like they are HTML elements.

Maybe I will make an off topic about it but would be really cool in the future to have a @react-three/uikit like GUI for BabylonJS. Working with flex box is more intuitive at least for me. But the HTML GUI library for now works as a good alternative.

Final Plans For Beta

So there is still some work to be done and bugs to be fixed before beta of DVE is released.
But at least before beta I want to have the PBR integration fully done.
Also for my beta release post I will be working on a playground showing how to make a simple voxel engine. Cause at least it will get people interested on how to do it on their own.
https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/custom/custom
This tutorial basically got me started on everything I am doing now. So I hope I can do the same for others in some way.

Thanks again everyone!

[sebavan]

This is truly awesome !!! I am so glad you keep going at it !!!

[CrashMaster]

That looks so good, you have been cooking

[lucas-divinestar]

I have been working on some pretty big updates to DVE just wanted to share a quick update.

Ray Tracing With WebGPU

I am working on a custom WebGPU render pipeline with ray tracing effects for DVE. Hope is though to intergrade what I learn back into the Babylon renderer too.

I got shadows and AO working though I need to denoise it. I am going to be having lots of fun working on this over the next year. I would really like to add some volumetric sunlight , reflections, and caustics. I am also interested to see what maybe I could do with the light data.

I don’t want to go too deep into how it all works but this video shows the BVH traversal algorithm in action. This I made with Babylon and has been great help in debugging.
A fixed binary tree of bounding volumes for each chunk mesh exists and is updated/rebuilt when rebuilding the mesh. The entire scene exists in one big buffer and so are all the BVH trees. Beyond that it is pretty normal ray tracing.

Voxel Models And Particles

I have also been working on an advanced voxel model system. It is kind of like block models for Minecraft. My system builds and calculates a face culling and AO shading index based on geometry relations.

I also added an easy way to create textures for all the voxels on start up as well as their models.

import CreateDisplayIndex from "@divinevoxel/vlox-babylon/Init/CreateDisplayIndex";
import { VoxelTextureIndex } from "@divinevoxel/vlox-babylon/Display/VoxelTextureIndex";
await  CreateDisplayIndex(DVER,DVEVoxelData);
const image = VoxelTextureIndex.getImage(state.voxelId, state.data.id);

And finally my friend I am making the new game with made this epic dinosaur so I just wanted to share it.

I just got handed a big project so will be busy for the rest of the year but excited to keep working on things and sharing updates.

Also don’t know who needs this but was working to simplify my texture setup so now both for webgl and webgpu I just have an array of images and with babylon was able to do this:

import {
  Constants,
  Engine,
  InternalTexture,
  InternalTextureSource,
  Scene,
  Texture,
} from "@babylonjs/core";
export class ImageTexture extends Texture {
  constructor(imgs: HTMLImageElement[], scene: Scene) {
    super(null, scene);

    const gl = (scene.getEngine() as any)._gl as WebGL2RenderingContext;
    if (!gl.TEXTURE_2D_ARRAY) {
      throw new Error("TEXTURE_2D_ARRAY is not supported on this device.");
    }

    const width = imgs[0].width;
    const height = imgs[0].height;
    const layers = imgs.length;

    const texture = gl.createTexture()!;

    gl.bindTexture(gl.TEXTURE_2D_ARRAY, texture);

    gl.texStorage3D(
      gl.TEXTURE_2D_ARRAY,
      Math.log2(Math.max(width, height)) + 1,
      gl.RGBA8,
      width,
      height,
      layers
    );

   
    for (let layer = 0; layer < imgs.length; layer++) {
      const img = imgs[layer];

      gl.texSubImage3D(
        gl.TEXTURE_2D_ARRAY,
        0, 
        0,
        0,
        layer, 
        width,
        height,
        1, 
        gl.RGBA,
        gl.UNSIGNED_BYTE,
        img
      );
    }
    gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);

    const itex = new InternalTexture(
      scene.getEngine(),
      InternalTextureSource.Unknown
    );
    itex.width = width;
    itex.height = height;
    itex.isReady = true;
    itex.type = Engine.TEXTURETYPE_UNSIGNED_INT;
    itex.is2DArray = true;

    itex._hardwareTexture = {
      setUsage() {
      },
      reset() {
      },
      release() {
      },
      set(hardware) {
      },
      underlyingResource: texture,
    };

    this._texture = itex;

    this.updateSamplingMode(Texture.NEAREST_NEAREST_MIPLINEAR)
  }
}

Anyway thanks again!

[sebavan]

Holly Molly !!! this is huge !!!

How is the WebGPU work going ?

[lucas-divinestar]

It’s going good!
I like WGSL a lot and the overall api seems pretty good.
Though I do run into esoteric errors now and then. Was crashing yesterday because I was dynamically indexing an array in a struct. And the memory alignment stuff can be annoying.
But generally everything is working and I have been able to solve every problem I have encountered.
I am just in state of adding effects and improving speed. Right now it is just position and normal textures for initial rays. Got it first working though with pure ray tracing.

I got ray tracing working with WebGPU before with pure voxel data this is with actual geometry so defiantly a bit different.