d2k.js

micro-couche javascript basé sur three.js x babylon.js pour t'aider à utiliser l'api webgl de façon intuitive et fonctionnelle.

follow me on twitter

anglais - français

Problems

• DRY do not repeat yourself).
• lack of innovation of webgl starters of the type three-starter-of-the-death-that-kills view-babylon-starter ++ etc.
• waste my time to display a simple cube using the native wegl API.
• webgl API too complex to make young people want to pay attention to 3d programming.

Solutions

• automate the creation of primitives.
• automate the composition of the scene
• create a scene from a .json file.
• switch between babylon and three in a single line of code.
• create experimental experiences such as being able to make an Object.assign (THREE, BABYLON), which would give a single canvas the possibility of displaying the two scenes simultaneously on the screen.

Goals

• support GLSL
• support THREE
• support BABYLON
• support JSON
• support Object.assign (THREE, BABYLON)
• support chrome edge firefox safari

Disclaimer

I am not a developer, I am a normal guy who carries programming in his heart and wants to contribute to open source and help the 3d community. for now, this is just an experimental version of an idea I had in mind. But my idea will evolve through this project so my design errors, over time, will disappear. changes will be coming for everyone's comfort, I hope. triforce!

Install

before you start be sure that your project include three.js and / or babylon.js, once it's good for you, you can install d2k via your shell.

shell

npm i d2k

OU

yarn add d2k

voilà! the project is installed. check in .package.json if d2k is in the dependencies of your application.

alternative

download the project, copy the file d2k.js which is located in the folder /dist then you are free to install it in the place provided for this purpose in your application.

Start project

maintenant, tu n'as plus qu'à importer d2k dans ton module ou ta page html.

ecmascript

import d2k from 'd2k';

html | javascript

<script src="./d2k.js"></script>

Syntax

here is an overview of the syntax of ** d2k ** which allows you to chain methods to compose a scene step by step.

glsl starter

create a 100% gpu scene through shader in glsl

const GLSLstarter = d2k
  .onstarter( { canvas: 'myCanvasId', glsl: true } )
  .use( THREE ) //
  .withShader( /*  shader config */ )
  .value();

babylon starter

create a scene from the primitives from BABYLON

const BABYLONstarter = d2k
  .onstarter( { canvas: 'myCanvasId' } )
  .use( BABYLON )
  .withEngine( /* engine config */)
  .withScene( /* scene config */)
  .withLight( /* light config */)
  .withMesh( /* mesh config */)
  .composify( /* composify config */ )
  .value();

three starter

crée une scène à partir des primitives fournit par THREE

const THREEstarter = d2k
  .onstarter( { canvas: 'myCanvasId' } )
  .use( THREE )
  .withCamera( /* camera config */ )
  .withMesh( /* mesh config */ )
  .withRenderer( /* renderer config */ )
  .withLight( /* light config */ )
  .withLoader( /* loader config */ )
  .withScene( /* camera config */ )
  .composify( /* camera config */ )
  .value();

events

mesh light camera détiennent des évènements qui sont appelés dans des contextes précis onrender onloader onresize

// get textures
starter.mesh.myMeshName.onloader( textures => textures );

// update
starter.mesh.myMeshName.onrender( timer => {
  starter.mesh.myMeshName.rotation.x += time;
  starter.mesh.myMeshName.rotation.y += time;
} );

// resize
starter.mesh.myMeshName.onresize( size => {
  starter.mesh.myMeshName.material.uniforms.resolution.value.x += size.width;
  starter.mesh.myMeshName.rotation.uniforms.resolution.value.y += size.height;
} );

API

• d2k.onstarter( init )

  initialise une scene à partir d'un objet init passer en paramètre de la méthode .onstarter

  paramètres

  init { Object }: initialisation d'un starter
returns { Object }: collection de méthodes.

  exemple

  const starter = d2k
    .onstarter( {
      canvas: 'myCanvasId', // ou document.getElementById( 'myCanvasId' ),
      glsl: false
    } );

  • .use( RENDERING_ENGINE )

    définit un RENDERING_ENGINE à partir de la bibliothèque BABYLON | THREE passer en paramètre de la méthode .use

    paramètres

    RENDERING_ENGINE { Object }: la librairie souhaitée THREE | BABYLON
returns { Object }: collection de méthodes.

    exemple

    const starter = d2k
      .onstarter( /* init */ )
      .use( BABYLON || THREE );

  • .withCamera( config )

    crée une camera à partir d'un objet config passer en pamètre de la méthode .withCamera

    paramètres

    config { Object }: définition de la config d'une camera.
    returns { Object }: collection de méthodes.

    exemple

    const starter = d2k
      .onstarter( /* init */ )
      .use( BABYLON || THREE )
      .withCamera( {
        name: 'myCameraName',
        config: {
          args: [ 75, null, 0.1, 1000 ],
          position: [ 0, 0, 100 ],
          rotation: [ 0, 0, 0 ],
          scale: [ 1, 1, 1 ],
          type: 'perspective'
        }
      } );

  • .withEngine( config )

    définit un engine à partir d'un objet config passer en paramètre de la méthode .withEngine *nb: cette méthode est disponibl exclusivement pour *

    paramètres

    RENDERING_ENGINE { Object }: la librairie souhaitée THREE | BABYLON
returns { Object }: collection de méthodes.

    exemple

    const starter = d2k.onstarter( /* init */ )
      .use( BABYLON )
      .withEngine( { name: 'myEngineName' } );

  • .withMesh( config )

    crée un mesh à partir d'un objet config passer en paramètre de la méthode .withMesh

    paramètres

    config { Object }: définition de la config d'un mesh
returns { Object }: collection de méthodes.

    exemple

    const starter = d2k.onstarter( /* init */ )
      .use( BABYLON || THREE )
      .withMesh( {
        name: "myMeshName",
        config: {
          geometry: {
            args: [ 20, 20, 20 ],
            type: "box-buffer"
          },
          material: {
            args: { "transparent": true },
            type: "mesh-normal"
          },
          positions: [ -20, 0, 0 ],
        }
      } );

  • .withLight( config )

    crée une light à partir d'un objet config passer en paramètre de la méthode .withLight

    paramètres

    config { Object }: définition de la config d'une light
returns { Object }: collection de méthodes.

    exemple

    const starter = d2k.onstarter( /* init */ )
      .use( BABYLON || THREE )
      .withLight( {
        name: "myLightName",
        config: {
          args: [ "0xf1f5bb" ],
          position: [ 0, 1, 30 ],
          type: "directional"
        }
      } );

  • .withLoader( config )

    charge un(e) texture object à partir d'un objet config passer en paramètre de la méthode .withLoader

    paramètres

    config { Object }: définition de la config d'un loader
returns { Object }: collection de méthodes.

    exemple

    const starter = d2k.onstarter( /* init */ )
      .use( BABYLON || THREE )
      .withLoader( {
        name: "textures",
        config: {
          args: [ { "name": "img-1", "url": "/my-image-path.jpg" }, { "name": "img-2", "url": "/my-image-pathjpg } ],
          type: "texture"
        }
      } );

  • .withRenderer( config )

    crée un renderer à partir d'un objet config passer paramètre de la méthode .withRenderer

    paramètres

    config { Object }: définition de la config d'un renderer
returns { Object }: collection de méthodes.

    exemple

    const starter = d2k.onstarter( /* init */ )
      .use( BABYLON || THREE )
      .withRenderer( {
        name: "myRendererName",
        config: {
          antialias: true,
          autoClear: true,
          pixelRatio: null,
          size: [],
          type: "webgl"
        }
      } );

  • .withScene( config )

    compose une scene à partir d'un objet config passer en paramètre de la méthode .withScene

    paramètres

    config { Object }: définition de la config d'une scene
returns { Object }: collection de méthodes.

    exemple

    const starter = d2k.onstarter( /* init */ )
      .use( BABYLON || THREE )
      .withScene( { name: "mySceneName" } );

  • .withShader( config )

    crée des shader à partir d'un objet config passer en paramètre de la méthode .withShader

    paramètres

    config { Object }: définition de la config des shader
returns { Object }: collection de méthodes.

    exemple

    const starter = d2k.onstarter( /* init */ )
      .use( THREE )
      .withShader( {
        name: 'myShaderName',
        config : {
          vertexShader: `
            void main () {
              gl_Position = vec4(position, 1.0);
            }
          `,
          fragmentShader: `
            uniform vec2 resolution;
            uniform float time;
    
            void main () {
              vec2 st = gl_FragCoord.xy / resolution.xy;
              gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
            }
          `
        }
      } );

• d2k.onrender( TARGET, SOURCE )

  crée une scene à partir d'une TARGET et d'une SOURCE passer en paramètres de la méthode .onlayering. cette méthode va récupérer deux starter différents pour les fusionner et afficher les deux scènes a travers un canvas unique. nb: attention, cette partie est encore expérimentale.

  paramètres

  TARGET { Object }: un starter THREE || BABYLON SOURCE { Object }: un starter BABYLON returns { Object }: un renderer.

  exemple

  // babylonjs only
  BABYLONstarter.renderer.onrender( {
    engine: BABYLONstarter.engine.myEngineName
    scene: BABYLONstarter.scene.mySceneName
  } );

  // threejs only
  THREEstarter.renderer.onrender( {
    renderer: THREEstarter.renderer,
    scene: THREEstarter.scene.main,
    camera: THREEstarter.camera.main
  } );

  // both together
  d2k.onrender( {
    renderer: THREEstarter.renderer.current,
    scene: THREEstarter.scene.mySceneName,
    camera: THREEstarter.camera.current
  }, {
    engine: BABYLONstarter.engine.current,
    scene: BABYLONstarter.scene.mySceneName
  } );

• .composify( config )

  composition de la scène à afficher. Cette méthode doit t'aider à définir dans quelle scène un mesh doit être affiché.

  paramètres

  config { Object }: a THREE || BABYLON SOURCE { Object }: un starter BABYLON returns { Object }: un renderer.

  exemple

  const starter = d2k.composify( {
    config: {
      start: true,
      scene: {
        main: 'mySceneName',
        others: []
      },
      mesh: [ { 'name': 'myMeshName', 'parent': 'main' } ],
      light: [ { 'name': 'myLightName', 'parent': 'main' } ],
      camera: {
        main: 'myCameraName',
        others: []
      },
      renderer: 'myRendererName'
    }
  } );

• .value()

  renvoi un objet starter qui contient une collection de primitives. .value() peut être appelé à n'importe quel moment de l'étape de création. nb: une fois créé les méthodes de création ne seront plus disponible.

  paramètres

  aucun paramètre
returns { Object }: un `starter``.

  exemple

  const starter = d2k
    .onstarter( /* init config */ )
    .value();

• starter

  contient l'ensemble de primitives que tu as créé à l'aide des méthodes .with*

Configuration

une scene peut être créer à partir d'un fichier .json qui devra respecté le format suivant : .json format

fetch a config file

// babylon
fetch( 'http://localhost:5007/api/scene/babylon' )
  .then( response => response.json() )
  .then( ( { scene } ) => {

    const starter = d2k
      .onstarter( { canvas: 'viewRendering' } )
      .use( BABYLON )
      .withEngine( scene.engine )
      .withScene( scene.scene )
      .withCamera( scene.camera )
      .withLight( scene.light )
      .withMesh( scene.mesh )
      .composify( scene.composify )
      .value();

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

      starter.mesh.myMeshName.rotation.x -= time;
      starter.mesh.myMeshName.rotation.y -= time;

    } );

  } );

fetch( 'http://localhost:5007/api/scene/glsl' )
  .then( response => response.json() )
  .then( ( { scene } ) => {

    const starter = d2k
      .onstarter( scene.init )
      .use( THREE )
      .withShader( scene.shader )
      .value();

    starter.shader.myShaderName.onrender( time => time );

    starter.shader.myShaderName.onresize( size => {

      starter.shader.myShaderName.material.uniforms.resolution.value.x = size.width;
      starter.shader.myShaderName.material.uniforms.resolution.value.y = size.height;

    } );

  } );

// three
fetch( 'http://localhost:5007/api/scene/three' )
  .then( response => response.json() )
  .then( ( { scene } ) => {

    const starter = d2k
      .onstarter( { canvas: 'viewRendering' } )
      .use( THREE )
      .withCamera( scene.camera )
      .withRenderer( scene.renderer )
      .withMesh( scene.mesh )
      .withLight( scene.light )
      .withScene( scene.scene )
      .composify( scene.composify )
      .value();

    starter.mesh.myMeshName.onloader( textures => textures );

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

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

    } );

  } );

// async
const fetchStarterScene = async ( url ) => {

  const response = await fetch( url );
  const sceneConfig = await response.json();
  const data = d2k.onstarter( { canvas: 'viewRendering' } )
    .use( THREE )
    .onstarter( { canvas: 'viewRendering' } )
    .use( THREE )
    .withCamera( scene.camera )
    .withRenderer( scene.renderer )
    .withMesh( scene.mesh )
    .withLight( scene.light )
    .withScene( scene.scene )
    .composify( scene.composify )
    .value();

  return data;

};

fetchStarterScene( 'https://mydomain.com/my/scene/config/endpoint' );

Primitives

primitive	babylon.js	three.js
audio
camera
font
geometry
group
light
loader
material
mesh
renderer
scene

Références

• Mr.doob's Code Style™
• BabylonJS
• three.js

License

Copyright ©️ 2020 monsieurbadia

Released under the MIT license

Support

N'hésite pas à mettre une ⭐ si ce projet t'a aidé.

Contributeurs

logo - @mllemartins
icons - @AdrienCoquet
code - @monsieurbadia