BabylonJS Editor Toolkit - Version 3.1 Alpha

[MackeyK24]

The BabylonJS Editor Toolkit is now available (Version 3.1 - Alpha)

Starter Documentation Available:  http://doc.babylonjs.com/resources/intro

Hey guys, my latest toolkit is available for download. I still got ALOT of work to do on the documentation but the core toolkit as been submitted.

The toolkit has been updated to support the latest Unity Editor : 2017.2 or greater.

Known Issues/Future Features:

1... Terrain Builder

       A... Texture Atlas Support In the Shader. Currently glsl fract() leaves terrible edge seems. (Paging @Pryme8 and @NasimiAsl)

       B... Collision Physics For Segmented Terrain Option

       C... Detail Prototypes And Grass Billboards Not Supported (YET)

 

2... Particle Systems

      A... Need to implement Update Over Time Functionality (Like Unity's Built-In Shuriken Style Particle System Editor)

 

3... Animation System

     A... An absolute MUST HAVE... Animation Blending (playing multiple WEIGHTED animation clips/ranges)

     B... Wish List Item - FootIK would be flaking awesome, but I dont know how to do this AT ALL (Paging @Deltakosh and @Sebavan)

 

4... Network Play

      A... Wish List Item - I saw some guy who as a demo on the BabylonJS website that is using Networking.

            Some sort of multiplayer egg shooter demo. (ANYBODY PLEASE GIVE ME INFO ON HOW TO DO THIS)

 

5... HDR Reflections

      A... When using panorama HDR for reflection textures, they render inverted in the sphere (or object) that is showing the reflected environment (Paging @Deltakosh and @Sebavan)

      B... Wish List Item - Would love to modify HDRCubeTexture to use a NON-Spherical HDR for reflection (I can then tie into the native unity reflection probe for the scene) Example:

 

But over all. we now have a COMPLETE GAME DEVELOPMENT ECO-SYSTEM for our BabylonJS Content or Games... Enjoy

 

[HeadClot]

@MackeyK24 - Thank you so much for your hard work on this.

Going to go through and start to find bugs and report them as needed.

[Pryme8]

What’s the link to the vertex shader?

I cant seem to find it.

[GameMonetize]

Congrats!!! this is really coool!

thanks a lot for your hard work

[MackeyK24]

2 hours ago, Pryme8 said:

What’s the link to the vertex shader?

I cant seem to find it.

That the thing... My old code will NO LONGER work with the Version 3.1 changes to the material shaders default vertex and fragment shaders.

But here is the WORKFLOW for terrains... First I have a BabylonJS class that handles the terrain material:

https://github.com/BabylonJS/Extensions/blob/master/SceneManager/src/babylon.sceneshaders.ts

 

/* Universal Shader Material Define Support */
    export class UniversalTerrainMaterial extends BABYLON.UniversalShaderMaterial {
        constructor(name: string, scene: BABYLON.Scene, tick:boolean = false) {
            super(name, scene, tick);
            this.program = "splatmap";
        }

        /* Shader Material Factory Class Functions */

        public clone(name: string): BABYLON.UniversalTerrainMaterial {
            var result = BABYLON.SerializationHelper.Clone(() => new BABYLON.UniversalTerrainMaterial(name, this.getScene()), this);
            BABYLON.UniversalShaderMaterial.CloneCustomProperties(this, result);            
            return result;
        }

        public serialize(): any {
            var serializationObject = BABYLON.SerializationHelper.Serialize(this);
            serializationObject.customType = "BABYLON.UniversalTerrainMaterial";
            BABYLON.UniversalShaderMaterial.SerializeCustomProperties(this, serializationObject);            
            return serializationObject;
        }

        public static Parse(source: any, scene: BABYLON.Scene, rootUrl: string): BABYLON.UniversalTerrainMaterial {
            var material = BABYLON.SerializationHelper.Parse(() => new BABYLON.UniversalTerrainMaterial(source.name, scene), source, scene, rootUrl);
            BABYLON.UniversalShaderMaterial.ParseCustomProperties(material, source, scene, rootUrl);
            return material;
        }
    }

This is basically a shader class that is a combination of Standard material Shader With All the General Purpose Properties of a ShaderMaterial...

textures, floats, colors, vectors etc...

Here is a a example serialized material json... I am passing all the atlas rects in 'atlasRect' under the 'vectors4' section (Just like a ShaderMaterial would):

Wee need to modify the 'default' vertex and fragment shaders to use the atlasInfo rects do get texture2D with rects... the only way I know how was to use fract() function... but again that leaves edge seems...

So with that being said we need to create the whole vertex and fragment shaders to use the info in the json... Example:

 

  "materials": [
    {
      "customType": "BABYLON.StandardMaterial",
      "ambient": [
        0.0,
        0.0,
        0.0,
        0.0
      ],
      "diffuse": [
        0.0,
        0.0,
        0.0,
        1.0
      ],
      "specular": [
        0.0,
        0.0,
        0.0,
        1.0
      ],
      "emissive": [
        0.0,
        0.0,
        0.0
      ],
      "specularPower": 64.0,
      "diffuseTexture": null,
      "diffuseFresnelParameters": null,
      "ambientTexture": null,
      "opacityTexture": null,
      "opacityFresnelParameters": null,
      "reflectionTexture": {
        "name": "Terrain_Skybox",
        "level": 1.0,
        "hasAlpha": false,
        "getAlphaFromRGB": false,
        "coordinatesMode": 5,
        "isCube": true,
        "uOffset": 0.0,
        "vOffset": 0.0,
        "uScale": 1.0,
        "vScale": 1.0,
        "uAng": 0.0,
        "vAng": 0.0,
        "wAng": 0.0,
        "wrapU": 1,
        "wrapV": 1,
        "coordinatesIndex": 0,
        "isRenderTarget": false,
        "renderTargetSize": 0,
        "mirrorPlane": null,
        "renderList": null,
        "animations": null,
        "extensions": [
          "_px.png",
          "_py.png",
          "_pz.png",
          "_nx.png",
          "_ny.png",
          "_nz.png"
        ],
        "samplingMode": 3
      },
      "reflectionFresnelParameters": null,
      "emissiveTexture": null,
      "lightmapTexture": null,
      "useLightmapAsShadowmap": false,
      "emissiveFresnelParameters": null,
      "specularTexture": null,
      "bumpTexture": null,
      "useSpecularOverAlpha": true,
      "disableLighting": true,
      "useEmissiveAsIllumination": false,
      "linkEmissiveWithDiffuse": false,
      "twoSidedLighting": false,
      "maxSimultaneousLights": 4,
      "name": "sceneSkyboxMaterial",
      "id": "b87fa098-268b-4a07-bf3c-86ba01b1c6e1",
      "backFaceCulling": false,
      "wireframe": false,
      "alpha": 1.0,
      "alphaMode": 2
    },
    {
      "textures": {
        "splatmap": {
          "name": "Terrain_Candyland_Terrain_Splatmap.png",
          "level": 1.0,
          "hasAlpha": false,
          "getAlphaFromRGB": false,
          "coordinatesMode": 0,
          "isCube": false,
          "uOffset": 0.0,
          "vOffset": 0.0,
          "uScale": 1.0,
          "vScale": 1.0,
          "uAng": 0.0,
          "vAng": 0.0,
          "wAng": 0.0,
          "wrapU": 1,
          "wrapV": 1,
          "coordinatesIndex": 0,
          "isRenderTarget": false,
          "renderTargetSize": 0,
          "mirrorPlane": null,
          "renderList": null,
          "animations": null,
          "extensions": null,
          "samplingMode": 1
        }
      },
      "textureArrays": {},
      "floats": {
        "atlasInfos": 7,
        "atlasRects": 7,
        "splatmapRects": 3.0
      },
      "floatArrays": {},
      "colors3": {},
      "colors4": {},
      "vectors2": {},
      "vectors3": {},
      "vectors4": {
        "atlasInfo1": [
          20.0,
          20.0,
          0.0,
          0.0
        ],
        "atlasInfo2": [
          25.0,
          25.0,
          0.0,
          0.0
        ],
        "atlasInfo3": [
          20.0,
          20.0,
          0.0,
          0.0
        ],
        "atlasInfo4": [
          20.0,
          20.0,
          0.0,
          0.0
        ],
        "atlasInfo5": [
          25.0,
          25.0,
          0.0,
          0.0
        ],
        "atlasInfo6": [
          20.0,
          20.0,
          0.0,
          0.0
        ],
        "atlasInfo7": [
          20.0,
          20.0,
          0.0,
          0.0
        ],
        "atlasRect1": [
          0.0,
          0.0,
          0.5,
          0.25
        ],
        "atlasRect2": [
          0.0,
          0.5,
          0.5,
          0.25
        ],
        "atlasRect3": [
          0.25,
          0.0,
          0.5,
          0.25
        ],
        "atlasRect4": [
          0.25,
          0.5,
          0.5,
          0.25
        ],
        "atlasRect5": [
          0.5,
          0.0,
          0.5,
          0.25
        ],
        "atlasRect6": [
          0.75,
          0.0,
          0.5,
          0.25
        ],
        "atlasRect7": [
          0.5,
          0.5,
          0.5,
          0.25
        ],
        "splatmapRect1": [
          0.0,
          0.0,
          0.5,
          0.5
        ],
        "splatmapRect2": [
          0.5,
          0.0,
          0.5,
          0.5
        ],
        "splatmapRect3": [
          0.0,
          0.5,
          0.5,
          0.5
        ],
        "splatmapRect4": [
          0.0,
          0.0,
          0.0,
          0.0
        ]
      },
      "matrices": {},
      "matrices2x2": {},
      "matrices3x3": {},
      "vectors3Arrays": {},
      "customType": "BABYLON.UniversalTerrainMaterial",
      "ambient": [
        0.0,
        0.0,
        0.0,
        1.0
      ],
      "diffuse": [
        1.0,
        1.0,
        1.0,
        1.0
      ],
      "specular": [
        0.0,
        0.0,
        0.0,
        1.0
      ],
      "emissive": [
        0.0,
        0.0,
        0.0,
        1.0
      ],
      "specularPower": 64.0,
      "diffuseTexture": {
        "name": "Terrain_Candyland_Terrain_Atlas.jpg",
        "level": 1.0,
        "hasAlpha": false,
        "getAlphaFromRGB": false,
        "coordinatesMode": 0,
        "isCube": false,
        "uOffset": 0.0,
        "vOffset": 0.0,
        "uScale": 1.0,
        "vScale": 1.0,
        "uAng": 0.0,
        "vAng": 0.0,
        "wAng": 0.0,
        "wrapU": 1,
        "wrapV": 1,
        "coordinatesIndex": 0,
        "isRenderTarget": false,
        "renderTargetSize": 0,
        "mirrorPlane": null,
        "renderList": null,
        "animations": null,
        "extensions": null,
        "samplingMode": 1
      },
      "diffuseFresnelParameters": null,
      "ambientTexture": null,
      "opacityTexture": null,
      "opacityFresnelParameters": null,
      "reflectionTexture": null,
      "reflectionFresnelParameters": null,
      "emissiveTexture": null,
      "lightmapTexture": null,
      "useLightmapAsShadowmap": false,
      "emissiveFresnelParameters": null,
      "specularTexture": null,
      "bumpTexture": null,
      "useSpecularOverAlpha": false,
      "disableLighting": false,
      "useEmissiveAsIllumination": false,
      "linkEmissiveWithDiffuse": false,
      "twoSidedLighting": false,
      "maxSimultaneousLights": 4,
      "name": "Candyland Terrain.Splatmap.49288e4d-5290-4f04-9a1f-805d3207ba5e",
      "id": "49288e4d-5290-4f04-9a1f-805d3207ba5e",
      "backFaceCulling": true,
      "wireframe": false,
      "alpha": 1.0,
      "alphaMode": 2
    }
  ],

 

 

[Pryme8]

what sampling mode are you using? and are you generating mips?

[MackeyK24]

5 minutes ago, Pryme8 said:

what sampling mode are you using? and are you generating mips?

No.. I dont know how to generate mips for .png or .jpeg (I always thought that was at runtime or baked in like a dds)

[Pryme8]

They are, but you can tell it to not.  And the sampling mode is important too.

[thrice]

Looks pretty cool! Will this export shaders then?

Also, is it easy enough to pick stuff out of the exported content?  i.e., I really mainly would only likely use a tool like this to export materials/shaders. Is it possible to export shaders bought from the unity store, pick them out of the code and bring into project? Because that would be epic. Been converting shaders by hand and it's a huge pain, and I don't even know where to start with the HSGL or whatever shader format the unity ones are in, in terms of converting.

[MackeyK24]

10 hours ago, thrice said:

Looks pretty cool! Will this export shaders then?

You dont actually USE or EXPORT a native Unity HGSL shader at all. We have code that will 'PARSE' the properties of ANY Unity Shader Material, using the various properties of the Unity HGSL Shader to populate native BabylonJS GLSL Shaders.

So any Material that uses the Unity Standard PBR Setups (Standard - Standard Roughness - Standard Specular) will get their properties exported to a BabylonJS PBR Material... Any Custom BabylonJS Materials go thru as is (already using BabylonJS Shader). ALL REST OF SHADERS GET PARSED AS A BJS STANDARD MATERIAL.

So to recap, you actually use BabylonJS Native GLSL Shaders... Either the PBR Material, Standard Material or any Custom Shader Material you make yourself. 

That the Toolkit Shader Material Pipeline in a nutshell

 

[dsman]

@MackeyK24  Great work. 

I played with unity and Babylonjs Editor Toolkit for unity. 

I was basically interested in PBR workflow. Ie. To be able to use PBR  materials from unity store and export to babylon scene with PBR material intact. 

I also tried changing some properties in Standard - Standard Roughness - Standard Specular. 

As far as I can tell, the metalness property goes to specular in Babylon and normal map goes to bump map. I didn't find where to set reflectivity texture. 

It would be great if you can document which property of Unity material settings goes to which property/channel of babylon PBR Materials. 

 

 

[MackeyK24]

I think reflectivityTexture would be the '_MetallicGlossMap' or '_SpecGlossMap' of the material

 

 

[dsman]

@MackeyK24

Due to the following code, 'microSurface' and 'roughness' properties of Babylon PBR Materials always remain 0.5.  Doesn't that require a fix? Or I am missing something?

Look at the code here https://github.com/BabylonJS/Exporters/blob/master/Unity 5/EditorToolkit/Assets/Babylon/Scripts/SceneBuilder.Materials.cs#L768-L787

Glossiness is initialized as 0.5 in the beginning of the function DumpGlossinessReflectivity.

Now following ensures that variable roughvalue will always be 0.5

float roughvalue = (roughness == true) ? glossiness : (1.0f - glossiness);

 Now following ensures both  roughness and  microSurface remains 0.5 

babylonPbrMaterial.roughness = roughvalue;
babylonPbrMaterial.microSurface = glossiness;

 

 

[MackeyK24]

Glossiness is default to 0.5... then it check the material to actually get the glossiness (Which is called Smoothness in material properties)

This glossiness value is 'Universal'

If you are using the new 'Standard Roughness' workflow then the glossiness is actually the roughness value...

If you are using the regular 'Standard' or 'Standard (specular setup)' workflows, Unity uses SMOOTHNESS for PBR ... Babylon uses ROUGHNESS

Roughness: 0 = totally smooth and 1 = totally rough

Smoothness: 0 = not smooth at and 1 = totally smooth

So when using this 'Universal' glossiness value.

When NOT using the new 'Standard Roughness' setup we need to INVERT the values used as smoothness to roughness...

So to get roughness from smoothness we take do:

roughness = (1.0 - smoothness)

So if smoothness value in editor say 0.3 that would need to be 0.7 roughness for babylon

 

Hope that clears it up a bit

 

[MackeyK24]

14 minutes ago, dsman said:

Due to the following code, 'microSurface' and 'roughness' properties of Babylon PBR Materials always remain 0.5.  Doesn't that require a fix? Or I am missing something?

Glossines DEFAULTS to 0.5 but gets is actual value from the material editor property:

float glossiness = 0.5f;
if (material.HasProperty("_Glossiness"))
{
    glossiness = material.GetFloat("_Glossiness");
}

 

[dsman]

@MackeyK24   I was pointing because I exported a model from unity where all materials were using "standard" workflow. And had the varying "smoothness" value in material properties. But after export, I checked using debug layer of Babylon, all material had roughness and microSurface as 0.5. 

 

I am using Unity version 2017.2.0f3 Personal. 

Also, can you tell me how reflection work? I saw metallic texture from unity goes to reflectivityTexture in Babylon. That's fine. But how does reflection probe work in regards to Babylon?

I am new to Unity. I don't know how reflection probe thing works in Unity.

All I know is the reflection on PBR material in Unity is completely different (far better) than the one in the exported scene in Babylon. In Babylon, it feels like there's no reflection at all. It looks like there's no reflection texture. (My scene is interior room. It's not like all typical PBR demo in Babylon where mesh gets reflection from environment HDR image). 

 

[MackeyK24]

11 hours ago, dsman said:

   I was pointing because I exported a model from unity where all materials were using "standard" workflow. And had the varying "smoothness" value in material properties. But after export, I checked using debug layer of Babylon, all material had roughness and microSurface as 0.5. 

Dunno... package up and send me the scene I will take a look at it for you

11 hours ago, dsman said:

Also, can you tell me how reflection work? I saw metallic texture from unity goes to reflectivityTexture in Babylon. That's fine. But how does reflection probe work in regards to Babylon?

I am new to Unity. I don't know how reflection probe thing works in Unity.

All I know is the reflection on PBR material in Unity is completely different (far better) than the one in the exported scene in Babylon. In Babylon, it feels like there's no reflection at all. It looks like there's no reflection texture. (My scene is interior room. It's not like all typical PBR demo in Babylon where mesh gets reflection from environment HDR image). 

The GLOBAL Scene Reflections are controlled via the Standard Unity Skybox System. Are you using skybox ???

I will try make a quick little skybox video. But let me know of you are already using a skybox and its still not working ???

[dsman]

@MackeyK24

4 hours ago, MackeyK24 said:

Dunno... package up and send me the scene I will take a look at it for you

Well, I was just using the demo scene from Unity store. Here is it : https://www.assetstore.unity3d.com/en/#!/content/65817

 

4 hours ago, MackeyK24 said:

Are you using skybox ???

No. Like I said, my scene is interior room scene. So I need objects to reflect the room, not the HDR environment or skybox. Given that a model can have multiple rooms, objects in each room need to have a separate reflection. And even different objects in the same room will have separate reflection (which would be reflection texture generated using the probe from point of view of that object's position). 

I know Unity achieves this using Reflection probes. But don't know how it will be exported and how it will work with Babylon. 

The above scene had reflections on some objects in unity. (Most likely using Reflection probe). Those objects weren't having an exact same reflection in Babylon. One reason was microSurface and roughness being 0.5 and other was missing reflection Texture (or issue related reflection probe export). As far as I can tell. But please enlighten if I am wrong.  

Note: In above sentence, reflection Texture is the texture (i.e. skybox or HDR environment map) that is to be reflected on the surface. Not to be confused with reflectivityTexture, which as you rightly answered is copied from the metallic map, and defines which areas on the surface will have what level of reflection). 

[MackeyK24]

Sorry I dont do individual reflection probes yet

 

[dsman]

@MackeyK24   @Deltakosh  Is new version under planning/development for this unity toolkit? If so what's roadmap, expected features?

 

@MackeyK24  Did you check above scene for roughness and microSurface values?

[HeadClot]

Hey @MackeyK24 - Got a question - Are unity shaders compatible with babylon.JS via the Toolkit?  Just curious as there is a tool called Amplify Shader Editor which makes unity shaders of all types for unity. It is currently 30 dollars off or 50% off for Unity Asset store Black Friday sale.

[MackeyK24]

On 11/24/2017 at 3:43 PM, HeadClot said:

Hey @MackeyK24 - Got a question - Are unity shaders compatible with babylon.JS via the Toolkit?  Just curious as there is a tool called Amplify Shader Editor which makes unity shaders of all types for unity. It is currently 30 dollars off or 50% off for Unity Asset store Black Friday sale.

We dont actually ANY native UNITY code or shaders (ONLY raw assets like textures and sounds).

The exporter actually goes thru ALL game objects in the scene and "EXPORTS" out support features. For example Materials... We actually read out the unity material properties and use those values to populate Babylon.Entities (the scene file) then the scene file is serialized as your .babylon scene file in your Game project output folder. Its way more detailed than that for pretty much all the major systems... Check the 'Source' for th C# code as to whats its actually dumping out of unity and RE-CREATING in babylon ... the best I can

 

[HeadClot]

Hey @MackeyK24 - Found some information on multiplayer with node.js http://ezelia.com/2014/ubuntu-nodejs-varnish-monit-en

There is also this that I found.  https://github.com/Ezelia/eureca.io

Hope this helps you with multiplayer support for the Unity Tool kit.

[MackeyK24]

Thanks... I will take a look at that as soon as i get some free time ... Thanks @HeadClot 

 

[JTerry]

Hey @MackeyK24,

I've been using the Unity3d to Babylon exporter and it's working great. Awesome job! I have a problem that I was hoping you could help me with though. When I export to Babylon with, it looks like the metalness doesn't translate. For example, if I create a sphere with Metallic at 1 and smoothness at 1 (or roughness at 0), I get black in Bablylon. I've tried Standard, Standard Roughness Setup, and Standard Specular setup and they all look the same. I've tried an HDR skybox too. Below are some screenshots. You can see that the sphere on the right is visibile in Babylon, but it has a Metallic & smoothness value of 0.

By the way, I'm using Unity 2017.3.

Any idea?