[SOLVED] - U3D - BabylonJS Game Editor Toolkit

[MackeyK24]

Yo @MrVR

I updated the 'Cross-Platform - Universal Shader Support'.... NO NEED TO REMOVE PASS. WAS A SYNTAX ISSUES in the BABYLON JS IFDEF BLOCK FOR WINDOWS... Mac OS X version simply ignored the issue... But FIXED now.

There is also a new AmigaShader Template based off the standard unlit texture shader. I would use that one when creating new shaders and then you can tweak the shader code like normal

Once https://github.com/BabylonJS/Babylon.js/pull/1635 is ready get the latest .unitypackage (I think thats the easies way to get the latest toolkit... Just Import Package and point to your latest copy)

As far as the Entities... Thats weird... Try downloading the Entities Project... Rebuild on your machine and update the BabylonExporter.Entities.dll in the Plugins Folder

Hope that helps

[MrVR]

Hi Master @MackeyK24 its all working awesome je je, I wish you a Happy New Year.Thanks for all the support.

I will post some scenes I'm currently working on (testing PBR, Shaders particules, PBR etc). just a few points I would like to know.

- Its there a way to export the unity skyboxes, I saw in the scene controller we have an sky-box option export but its not exporting any. 

 

- I have characters already rigged in unity, is it possible to export those animations or it need to be re-code in JavaScript it in order to work, please let me know where to start if you know about this this has been the most frustrating part.

SO CAN YOU PLEASE TAKE A LOOK OF THIS MODEL (if you have porblem getting let me know)

 

- ON the PBR options, I saw there are a lot of other options I dont see on the PBR shader,  for example just to mention some like the camera exposure, and contrast, reflective color, micro-surface. 

    var pbr = new BABYLON.PBRMaterial("pbr", scene);
    pbr.albedoColor = new BABYLON.Color3(0.2, 0.9, 1.0);
    pbr.reflectivityColor = new BABYLON.Color3(reflectivity, reflectivity, reflectivity);
    materialSphere.microSurface = microSurface;

    pbr.cameraExposure = 0.66;
    pbr.cameraContrast = 1.66;

 

Also overlodadedAlbedo, averloadedAlbeidoIntensity, Reflexion Texture (I guess this is the specular), useMicroSurfaceFromReflectivityMapAlpha , 

 

 var materialSphere = new BABYLON.PBRMaterial("Material_" + j, scene);
    materialSphere.albedoTexture = new BABYLON.Texture("Textures/Amiga");
    materialSphere.overloadedAlbedo = new BABYLON.Color3(0, 0, 1);
    materialSphere.overloadedAlbedoIntensity = overloadedIntensity;

OR for glass is missing these options I think, let me know what do you think or maybe I'm lost je je I'm gonna keep working on the PBR guide

var glass = new BABYLON.PBRMaterial("glass", scene);
glass.reflectionTexture = hdrTexture;
glass.refractionTexture = hdrTexture;
glass.linkRefractionWithTransparency = true;
glass.indexOfRefraction = 0.52;
glass.alpha = 0; // Fully refractive material

 

[MackeyK24]

1 hour ago, MrVR said:

- Its there a way to export the unity skyboxes, I saw in the scene controller we have an sky-box option export but its not exporting any

Hey @MrVR ... You have to setup a Skybox in the Unity Lighting Panel... ALSO NOTE: the Default Procedural SkyBox is NOT supported... You must actually use a 6-Sided or Cubemap Skybox setup. (Recommend 6-Sided Setup).

I will take a look a t some of the other material settings... (Also note: you can use code to adjust material detail settings... this.scene.getMaterialByXXX)

 

Lastly... Not sure about the Animations... I just haven't got that far yet. I am taking another approach in developing out Toolkit Workflow features so one can fallow thru the Unity Demos and do the same type of workflow concepts... Like Colliders, Physics, Shaders and Prefabs... My new upcoming BabylonJS Toolkit Update 1.0.1 will have revamps of these core features... Especially the new 'Runtime Prefab Layer' and the supporting Scene Manager API's... Example Shot Cloning Of Runtime Prefab Called 'Bolt':

// Clone shot
this.shots++;
var shot:BABYLON.Mesh = this.manager.createPrefabClone("Bolt", "Shot_" + this.shots.toString());
var position: BABYLON.Vector3 = this.mesh.position.clone();
position.z += 1.25; // Spawn offset
shot.position = position;

 

[MrVR]

On 12/30/2016 at 1:54 PM, MackeyK24 said:

Hey @MrVR ... You have to setup a Skybox in the Unity Lighting Panel... ALSO NOTE: the Default Procedural SkyBox is NOT supported... You must actually use a 6-Sided or Cubemap Skybox setup. (Recommend 6-Sided Setup).

I will take a look a t some of the other material settings... (Also note: you can use code to adjust material detail settings... this.scene.getMaterialByXXX)

 

Lastly... Not sure about the Animations... I just haven't got that far yet. I am taking another approach in developing out Toolkit Workflow features so one can fallow thru the Unity Demos and do the same type of workflow concepts... Like Colliders, Physics, Shaders and Prefabs... My new upcoming BabylonJS Toolkit Update 1.0.1 will have revamps of these core features... Especially the new 'Runtime Prefab Layer' and the supporting Scene Manager API's... Example Shot Cloning Of Runtime Prefab Called 'Bolt':

// Clone shot
this.shots++;
var shot:BABYLON.Mesh = this.manager.createPrefabClone("Bolt", "Shot_" + this.shots.toString());
var position: BABYLON.Vector3 = this.mesh.position.clone();
position.z += 1.25; // Spawn offset
shot.position = position;

 

NIce on the clone shot (run-time prefab cloning in the scene, can this be use for loading multiple prefabs at run time?).

About the PBR I know it can be configured further but I thought it would be a nice addition to make those options available as well on the unity IU.

OK I understand your taking a different approach on the engine but isn't the basic animation API a nice core feature  to add on the unity exporter .

 

[MrVR]

HI @MackeyK24 I put together an couple of SCENE1(volumetric light 36 FPS),  SCEN1(non-volummetric light 60-PFS) ,    SCENE-2 (particules) with the unity exporter (no too much code only exporter options), can you please take a look, it loads slow if you have .dds images as textures, take very long to be download specially in mobile.

DO you know how can I improve it to work on mobile or have some other version of the files depending on the device?

 below an image of the network download time you can see for yourself on the links above

.

 

 

 

[MackeyK24]

@MrVR .dds and .hdr files take a long time load in BabylonJS... Dunno if its a browser thing or framework thing.

If you try to create a scene manually and use .dds or .hdr files you get same issue. The exporter DOES NOT aanuthing about babylon js framework... It really just exports EVERYTHING and sets the Texture file in the babylon scene file (mytexture.dds)... Some file formats we convert to PNG on the fly (.tiff .hdr .psd .exr)... The best solution... is convert those .dds to .png and use the .png as the texture.

On mac... I just open the .dds in preview and save as png (or try photoshop) 

 

[MackeyK24]

@MrVR Can you send me or post some of those .dds files so i can test my converter with... I am adding .dds to the conversion format in the next toolkit version... Just like .psd and .tiff and .exr ... Exporter will convert to PNG or JPEG... 

But again the best bet would to just convert them to png and use the png as the texture file.

[MrVR]

39 minutes ago, MackeyK24 said:

@MrVR Can you send me or post some of those .dds files so i can test my converter with... I am adding .dds to the conversion format in the next toolkit version... Just like .psd and .tiff and .exr ... Exporter will convert to PNG or JPEG... 

But again the best bet would to just convert them to png and use the png as the texture file.

Ok @MackeyK24 I PM you the .dds files let me now if you can download them , and now I replacing the ones .dds on the scenes to png,  also is jpg ok as well ? 

[ragingclaw]

Hey there @MackeyK24 I have a question about the toolkit. I'm putting this here since its related to the toolkit, but I can make this a new thread if needed.

When the project builds, lets say I need to do a hand-off. For simplicity sake, lets say I have an object called Cube with a mesh component called MeshRotator, like your video. Lets say there are 3 properties on this component, 3 floats: rotationSpeedX, rotationSpeedY and rotationSpeedZ.

now, how would I gain access to those values from the file hand-off? It looks like when the project is compiled it runs the this.mesh.rotation.y += this.rotationSpeedY; inside the registerBeforeRender or registerAfterRender functions. Is there some sort of global property that's queuing off of? So, if I set the rotationSpeedY = 0.005 in unity, is there a way to hand exported project off and then gain access to change that 0.005 value? Im not seeing rotationSpeedX/Y/Z on the mesh (Cube) as a property when doing console logs. 

Does that make sense even remotely? Im just researching how feasible it is to use the toolkit in a multi-developer environment.

[MrVR]

26 minutes ago, ragingclaw said:

Hey there @MackeyK24 I have a question about the toolkit. I'm putting this here since its related to the toolkit, but I can make this a new thread if needed.

When the project builds, lets say I need to do a hand-off. For simplicity sake, lets say I have an object called Cube with a mesh component called MeshRotator, like your video. Lets say there are 3 properties on this component, 3 floats: rotationSpeedX, rotationSpeedY and rotationSpeedZ.

now, how would I gain access to those values from the file hand-off? It looks like when the project is compiled it runs the this.mesh.rotation.y += this.rotationSpeedY; inside the registerBeforeRender or registerAfterRender functions. Is there some sort of global property that's queuing off of? So, if I set the rotationSpeedY = 0.005 in unity, is there a way to hand exported project off and then gain access to change that 0.005 value? Im not seeing rotationSpeedX/Y/Z on the mesh (Cube) as a property when doing console logs. 

Does that make sense even remotely? Im just researching how feasible it is to use the toolkit in a multi-developer environment.

Hey @ragingclaw, I think understand your question and  if I may answer, to change the properties of an attribute at run time you have to invoke the this.findCompoent() function.

In the video there is a sample where you access properties from one component to another, using a custom public class to access the private property;  in the example he created the rotate() function is the component MyRotateY

see VIDEO minute 50 there is a sample, you can create a class that access this porperties a run time trigger by an event such as a click event in the user interface (splash screen or control panel etc..) or some other event.

I hope it helps 

 

[ragingclaw]

thanks @MrVR but that isnt going to work from what I can tell. Lets say you make this and then give the Project directory to someone else who cannot go into unity. This is when I need to change the value. So putting it into that typescript file wont work once it's compiled to javascript as it doesnt see the hero.getProperty('rotationSpeedY') as valid (unless im just doing it wrong, which is more very possible).

Now, I figured out that if I do this:

var hero = scene.getMeshByName("Cube");
hero.metadata.components[0].properties.rotationSpeedY = 1;

then i CAN change the speed of the rotation, so that works. So it goes to 1 instead of 0.005, which is great. Im hoping there is an easier way to get that property though.If there are a lot of components on that mesh then going through that components array to find a specific property is going to be a pain in the butt. 

[MrVR]

8 minutes ago, ragingclaw said:

thanks @MrVR but that isnt going to work from what I can tell. Lets say you make this and then give the Project directory to someone else who cannot go into unity. This is when I need to change the value. So putting it into that typescript file wont work once it's compiled to javascript as it doesnt see the hero.getProperty('rotationSpeedY') as valid (unless im just doing it wrong, which is more very possible).

Now, I figured out that if I do this:

var hero = scene.getMeshByName("Cube");
hero.metadata.components[0].properties.rotationSpeedY = 1;

then i CAN change the speed of the rotation, so that works. So it goes to 1 instead of 0.005, which is great. Im hoping there is an easier way to get that property though.If there are a lot of components on that mesh then going through that components array to find a specific property is going to be a pain in the butt. 

I see, yeah all gets written in the .babylon metadata file, but I see what you mean, I was thinking about it as well cause I was planning to load my scenes using angularjs and I try to access the properties calling the class but I run into the same issue, lets ask @MackeyK24 about it...???? and see what he thinks. is this the only way ??

mesh.metadata.components[0].properties.rotationSpeedY = 1;

[ragingclaw]

3 minutes ago, MrVR said:

I see, yeah all gets written in the .babylon metadata file, but I see what you mean, I was thinking about it as well cause I was planning to load my scenes using angularjs and I try to acces the poreprties calling the class but I run into the same issue, lets ask @MackeyK24 about it...???? and see what he thinks. is this the only way ??

mesh.metadata.components[0].properties.rotationSpeedY = 1;

yup, that is exactly what I am trying to do, right down the angularjs bits. If there is a way to make those easily accessible it would be great because while the above line of code will work, it's not really multi-developer friendly.

Next I'm going to try and export the cube moving along a spline path. Think I will try iTween first and see how that works out.

[MrVR]

humm the only thing I can think of is creating some sort of abstract class that maps the metadata porperties, but I dont think there is another way for now.

 I though I can build multiple scenes and load them o demand using angualar modules, but it would be nice if you can re use the classes..

[MackeyK24]

5 hours ago, ragingclaw said:

thanks @MrVR but that isnt going to work from what I can tell. Lets say you make this and then give the Project directory to someone else who cannot go into unity. This is when I need to change the value. So putting it into that typescript file wont work once it's compiled to javascript as it doesnt see the hero.getProperty('rotationSpeedY') as valid (unless im just doing it wrong, which is more very possible).

Now, I figured out that if I do this:

var hero = scene.getMeshByName("Cube");
hero.metadata.components[0].properties.rotationSpeedY = 1;

then i CAN change the speed of the rotation, so that works. So it goes to 1 instead of 0.005, which is great. Im hoping there is an easier way to get that property though.If there are a lot of components on that mesh then going through that components array to find a specific property is going to be a pain in the butt. 

Hey guys @MrVR @ragingclaw... Check this little video for metadata

 

U3D - BabylonJS Editor Toolkit Metadata

[MrVR]

Hey that little Asteroids game is awesome je je  @MackeyK24.

OK so to access any property you can create your own access class around the API, but like @ragingclaw asked, if you want to share the Babylon file, will you be able to access the API?

 if you load the scene in java-script using for example

  BABYLON.SceneLoader.Load("assets/3D-M-LBRY/mesh/", "playground.babylon", engine, function(scene) {
                scene.executeWhenReady(function() {


   BABYLON.SceneLoader.ImportMesh(name, "Assets/babylonreadyfiles/", imageFileName, scene, function(newMeshes, particles, skeleton) {

So you can make little API access per scene if you wish to make it more organized.

[MackeyK24]

2 hours ago, MrVR said:

Hey that little Asteroids game is awesome je je  @MackeyK24.

OK so to access any property you can create your own access class around the API, but like @ragingclaw asked, if you want to share the Babylon file, will you be able to access the API?

 if you load the scene in java-script using for example

  BABYLON.SceneLoader.Load("assets/3D-M-LBRY/mesh/", "playground.babylon", engine, function(scene) {
                scene.executeWhenReady(function() {


   BABYLON.SceneLoader.ImportMesh(name, "Assets/babylonreadyfiles/", imageFileName, scene, function(newMeshes, particles, skeleton) {

So you can make little API access per scene if you wish to make it more organized.

Yep

 

You could also just use babylon.scenemanager.js in page (Kinda like babylon.OBJFileLoader).

 

And use BABYLON.SceneManager.LoadScene and BABYLON.SceneManager.ImportMesh

too still get the features of the API but WITHOUT using Unity Editor

[ragingclaw]

3 hours ago, MackeyK24 said:

Yep

 

You could also just use babylon.scenemanager.js in page (Kinda like babylon.OBJFileLoader).

 

And use BABYLON.SceneManager.LoadScene and BABYLON.SceneManager.ImportMesh

too still get the features of the API but WITHOUT using Unity Editor

I owe you lots of beers.. you complete me... ha!

Thanks for the video explaining the metadata man, I appreciate it. It answers all of my questions (though my brain is slow because i feel like crap, so im sure i will ask more). What I meant by 'hand-off' is simply I have the files, and I give them to some one else to work with. Using the manager api is what I needed. I personally like to use typescript, but no one else on the team does so I have to do it in raw JS for now.  I need to watch the video again to make sure I fully comprehend what's going on, but this is awesome.

[MackeyK24]

9 hours ago, ragingclaw said:

I owe you lots of beers.. you complete me... ha!

Thanks for the video explaining the metadata man, I appreciate it. It answers all of my questions (though my brain is slow because i feel like crap, so im sure i will ask more). What I meant by 'hand-off' is simply I have the files, and I give them to some one else to work with. Using the manager api is what I needed. I personally like to use typescript, but no one else on the team does so I have to do it in raw JS for now.  I need to watch the video again to make sure I fully comprehend what's going on, but this is awesome.

Yo @ragingclaw

Why don't the team members you hand off project to just download Unity Free Edition and use that as well... Just package and ship the unity projects...

NOTE: Everything you can do in Unity Babylon Toolkit With Typescript ... YOU CAN DO WITH OR WITHOUT UNITY IN JAVASCRIPT.

That includes making the WHOLE thing with just javascript ... (I just DID NOT create javascript template versions... So you would just say Create a Javascript class and change it yourself)

BUT... If you make Javascript versions of each of the attached typescript templates... I will add Native Javascript Support Right in the Toolkit... Then you can use ALL the Toolkit Editor features with RAW javascript

 

camera.template

controller.template

light.template

mesh.template

typescript.template

[ragingclaw]

13 hours ago, MackeyK24 said:

Yo @ragingclaw

Why don't the team members you hand off project to just download Unity Free Edition and use that as well... Just package and ship the unity projects...

NOTE: Everything you can do in Unity Babylon Toolkit With Typescript ... YOU CAN DO WITH OR WITHOUT UNITY IN JAVASCRIPT.

That includes making the WHOLE thing with just javascript ... (I just DID NOT create javascript template versions... So you would just say Create a Javascript class and change it yourself)

BUT... If you make Javascript versions of each of the attached typescript templates... I will add Native Javascript Support Right in the Toolkit... Then you can use ALL the Toolkit Editor features with RAW javascript

 

camera.template

controller.template

light.template

mesh.template

typescript.template

stop trying to logic, it won't work here.. ha! I would rather not take the time to teach unity since im still a novice at it right now (but I have some plans for something mwahaha).

I will try to get the JS templates going this weekend, I don't have much free time until Saturday.

After watching your metadata video I was able to get what I needed to prove the toolkit is a viable solution to the workflow on the project so woot to that. It may never come to handing the project off, but I needed to know if it could be done to cover that contingency

I'm curious to know how animations work though. Im testing that today. I imported an fbx file (a box moving along a spline from cinema4d) last night and when exported the animation does play, but it won't loop. I haven't dug into it just yet but is the animation converted to a babylon animation or just sent out as vectors in the update loop? 

[ragingclaw]

As a follow up to my previous post, it looks like fbx file is spitting out babylon animations in the objects animation array, so that's a win!

[MrVR]

@ragingclaw try putting this code at the end of the Babylon file where your animation ends 

,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":1521,"indexStart":0,"indexCount":6540}],

// add this code for the animation loop 
    "autoAnimate": true,
    "autoAnimateFrom": 200,// from what frame to what frame
    "autoAnimateTo": 700,
    "autoAnimateLoop": true// loop


,"instances":[]}

[ragingclaw]

1 hour ago, MrVR said:

@ragingclaw try putting this code at the end of the Babylon file where your animation ends 

,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":1521,"indexStart":0,"indexCount":6540}],

// add this code for the animation loop 
    "autoAnimate": true,
    "autoAnimateFrom": 200,// from what frame to what frame
    "autoAnimateTo": 700,
    "autoAnimateLoop": true// loop


,"instances":[]}

 

What I ended up doing was creating a new animatable from the animations on the object:

var hero = scene.getMeshByName("hero");
var animations = hero.animations;
var a = new BABYLON.Animatable(scene, hero, 0, 150, true, 1, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE, animations);

and Bob's your Uncle, loopable animations. Now there is total control over the animations to start/stop/whatever them. 

[MrVR]

17 minutes ago, ragingclaw said:

What I ended up doing was creating a new animatable from the animations on the object:

var hero = scene.getMeshByName("hero");
var animations = hero.animations;
var a = new BABYLON.Animatable(scene, hero, 0, 150, true, 1, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE, animations);

and Bob's your Uncle, loopable animations. Now there is total control over the animations to start/stop/whatever them. 

is this only too loop the animation or also to play the animation? so for example if you have multiple animation in one mesh, you can access each animation by index and play it or you use the frames to play the animations from one frame to another where all the animations are in different frames??

[ragingclaw]

3 minutes ago, MrVR said:

is this only too loop the animation or also to play the animation? so for example if you have multiple animation in one mesh, you can access each animation by index and play it or you use the frames to play the animations from one frame to another where all the animations are in different frames??

you can do whatever you want to the animations once you make the animatable. In my case, I fed in all the objects animations, but I could have just sent 1 or 2 or whatever (there are 7 total in my case). Now that we have the animatable, a, we can do whatever we want withing the animatable class http://doc.babylonjs.com/classes/2.5/Animatable like restart(), start(), pause(), etc. We could even get rid of them and replace them with something else. The experiment was simply to see if I could get something animated along a spline and have control over it. In this case, all the animations are for position and rotations so it makes sense to loop through all of them together and not by index. Make sense?