D2k.js - javascript micro-layer based on three.js x babylon.js that will help you to used webgl api in a intuitive an functional way

Resources
#1

Hello guys,

I actually working on a personal project that I would like to share. I think maybe this project can help people. So, d2k.js is a javascript micro-layer based on three.js and babylon.js that will help you to create the webgl in a intuitive an functional way. This project also implement an experimental mode to use three.js and babylon.js in a single canvas. It can be cool if you want to use the a Xbox 360 pad to move objects 3D from babylon and three also. D2k do not replace babylon’s or threejs, it is dependent on them, you need to include them in your project

npm: https://www.npmjs.com/package/d2k
github: https://github.com/monsieurbadia/d2k.js

With d2k.js you will be able to :

  • automate the creation of primitive
  • automate the scene composition
  • create several scene from a json config file
  • switch between babylon and three with one line of code
  • render scene from babylon and three in one canvas

to do a hello world

window.addEventListener( "DOMContentLoaded", _ => {

  const THREEstarter = d2k
    .onstarter( { canvas: 'myCanvasId' } )
    .use( THREE )
    .withCamera( { name: 'myCameraName' } )
    .withLight( { name: 'myLightName' } ) // optional
    .withMesh( { name: 'myMeshName' } )
    .withScene( { name: 'mySceneName' } )
    .withRenderer( { name: 'myRendererName' } )
    .composify( {
      config: {
        start: true,
        scene: {
          main: 'mySceneName',
          others: [ { name: 'mySceneBackgroundName' } ]
        },
        mesh: [ { name: 'myMeshName', parent: 'main' } ],
        light: [ { name: 'myLightName', parent: 'main' } ],
        camera: {
          main: 'myCameraName',
          others: [ { name: 'another' } ]
        },
        renderer: 'myRendererName'
      }
    } )
    .value();

  THREEstarter.mesh.myMeshName.onrender( time => {

    THREEstarter.mesh.myMeshName.rotation.x += time;
    THREEstarter.mesh.myMeshName.rotation.y += time;

  } );

}, false );

If you need more information check the readme file.

This project is just the skeleton of an idea. It’s harsh to understand two complexes libraries in so I know that I still have a lot stuff to do before supporting all primitives correctly from both libraries. Keep in mind that I’m an artist not an engineer so my mindset it’s quite different, this can have an impact in my code. But I will try to do my best each day, to improve this project, I need feedback, so if you are curious or you have a few time to use it, go ahead. Don’t forget to send me a message or contact me on twitter. That will help me!

Sorry for my bad English… Stay at home and be safe.

Cheers,

monsieurbadia

1 Like
#2

What’s the reason for mixing Babylon.js and three.js?

#3

That’s indeed a good question. Besides, sharing a single WebGL rendering context across multiple 3D engines is an anti-pattern which should not be promoted. I hope you are not doing this in your project…

#4

Thank you for your question Lowee, At the beginning, it was just for testing if it is technically possible to create this kind of mixin. after that I decided to not removed this feature but to kept it as an experimental feature. but the main role of my project is to help you to create primitives more quickly depending on your favorite library and following a generic syntax more simple that I hope will help young people to be interest by 3d programming.

my project do not replace those libraries, of course not, you have to combine THREE and d2k or GLSL and d2k or BABYLON and d2k.

For example :

code-example
code-example1622×1588 339 KB

For your information, babylon.js actually promoted this anti-pattern with PixiJS wich used WebGL context too. https://doc.babylonjs.com/resources/babylonjs_and_pixijs

#5

Well, that does not mean this approach is correct. Mixing engines means you can’t cache WebGL state information at a single place. If the cached and the real WebGL state gets out-of-sync, you can see undefined behavior on app level. E.g. one engine assume depth test is still enabled although it isn’t because the other engine has changed depth configuration.

#6

Pixi and Babylon seem like a possibly useful combination. Pixi for the GUI and Babylon for the 3D scene. I’ve seen similar set ups suggested for three.js + Pixi.

#7

Thanks you so much guys, i’m agree with you don’t worry about that. If i made something wrong don’t hesitate to tell me. But i already precised in my first post that mixin three.js and babylon.js is just an experimental mode and it is precised in the README file too.

Anyway, take a big picture without stay focus on the webgl context. Does three.js allow us the possibility to use an Xbox 360 Pad ? why not used babylon.js to beneficit of this feature to move your object3d from three.js. No webgl context from babylon, just events. this is just an example but now a door is open to anothers possibilities.

So when you have time, take a look to d2k and please send me your advice. I’m there to learn about 3d programming and improve my project. my goal is help the people and the 3d community. I’m with you side guys dont forget that.

1 Like