BabylonJS EditControl

[Dad72]

An interesting idea to complete the EditContol would be to add the multi selection. For example select two cube and replaced both with a single gizmo.

What do you think ?

[satguru]

Good idea.

I was going to work on multi selection for my scene editor but never thought about adding that feature to the Edit Control itself. Now, the more I think about it the more it makes sense to have it as part of the Edit Control.

So tentatively the Edit Control will have an additional constructor and this will  take an array of mesh, instead of single mesh as an argument.

Internally it will create an empty mesh and parent that to this array of mesh. Th edit control will then control this empty mesh. Finding the center of  this array would require some thought .

Doable. I will work on this.

BTW

Here is a preview of my live scene editor Vishva.

Will be loading source code soon.

About 8.6 MB , so give it a few seconds to load.

Warning : work in progress

http://ssatguru.appspot.com/BabylonJS-Vishva/intro.html

To select an item. "mouse right click" the item

To unselect "esc" key

To move, rotate, scale - "1 2 or 3" key

To focus "F" key (the camera animates between avatar and selected item)

Move avatar using standard "WASD" key or arrow key

 

 

Edited November 2, 2016 by satguru
changed demo url

[iiceman]

I like the idea to integrate a multi select function!

When I try your Vishva in my Chrome I end up hearing sounds and seeing a menu, but no scene. I have this error in my console:

babylon.2.4-03-23.js:3 GET http://ssatguru.appspot.com/babylonjs/Vishva/webapp/vishva/assets/vegetations/farm_tree_01/farm_trees_rocks_flowers_D.tga 500 (Internal Server Error)h @ babylon.2.4-03-23.js:3r.LoadFile @ babylon.2.4-03-23.js:3o.createTexture @ babylon.2.4-03-23.js:4i @ babylon.2.4-03-23.js:13(anonymous function) @ babylon.2.4-03-23.js:13t.Parse @ babylon.2.4-03-23.js:2i.Parse @ babylon.2.4-03-23.js:13t.Parse @ babylon.2.4-03-23.js:2r.Parse @ babylon.2.4-03-23.js:15t.Parse @ babylon.2.4-03-23.js:14e.SceneLoader.RegisterPlugin.load @ babylon.2.4-03-23.js:15u @ babylon.2.4-03-23.js:15t.Append @ babylon.2.4-03-23.js:15Vishva.onTaskSuccess @ Vishva.js:101task.onSuccess @ Vishva.js:90(anonymous function) @ babylon.2.4-03-23.js:24e.onreadystatechange @ babylon.2.4-03-23.js:3
babylon.2.4-03-23.js:3 Uncaught Error: Error status: 500 - Unable to load vishva/worlds/demos/demo1/../../../../vishva/assets/vegetations/farm_tree_01/farm_trees_rocks_flowers_D.tgae.onreadystatechange @ babylon.2.4-03-23.js:3
rain_ny.jpg:1 GET http://ssatguru.appspot.com/babylonjs/Vishva/webapp/vishva/assets/skyboxes/rain/rain_ny.jpg 500 (Internal Server Error)
babylon.2.4-03-23.js:3 BJS - [17:56:21]: Error while trying to load texture: vishva/worlds/demos/demo1/../../../../vishva/assets/skyboxes/rain/rain_ny.jpgr._ErrorEnabled @ babylon.2.4-03-23.js:3s.onerror @ babylon.2.4-03-23.js:3

 

[satguru]

@iiceman

Not sure why you are getting that error.

This is running on Google App engine. I checked the server logs, no errors there.

The app is just a bunch of static html pages, javascript and textures. No server side processing.

Wonder if other people are also having issues accessing my site?

Checked with few of my friends. No issues 

 

 

 

[Dad72]

no problem for me too.

[joshcamas]

oooo I like it! Very lightweight!

Someday I need to get back to my editor hahaha

[Pryme8]

On 10/14/2016 at 3:24 PM, joshcamas said:

oooo I like it! Very lightweight!

Someday I need to get back to my editor hahaha

You should msg me, we should talk cause I think Ive seen your editor you were working on. and I have some resources that may be of great value to you.

And im pretty sure your getting hit by the same storm as me so are prolly stuck inside as well

[joshcamas]

haha we got a huge storm warning and everyone was freaking out (I work at grocery store and everyone was buying stuff like crazy) but the storm never hit were I lived!

 

[Pryme8]

crazy Ive been getting dumped on in Humboldt.

[NasimiAsl]

i cant see that 

[ian]

nice

 

[DigiHz Data]

@satguru I love this edit control.

However.....in my editor i ONLY use eulerian values. So i made a speciall version of your edit control v1.0.1

Se attached file. This version is for using ONLY eulerian.

All changes i made are marked "DHZ removed" and "DHZ added"

I also added a method named IsChanging. You can call this medtod with ex:

if(editControl.isChanging()){

console.log('a value is changing);

}

It returns true when you are holding down the mouse AND move the mouse, otherwize it returns false.

I also added so the pointer is changed when you are over the edit control and when you are moving the pointer while holding the mouse down.

In the function doTranslation i fixed a bug:

//this.meshPicked.position.x += dl;//DHZ removed (bug, does not allways give a float value)

this.meshPicked.position.x=Number(this.meshPicked.position.x) + Number(dl);//DHZ added (bug fix with value not being a float)

(Same for the Y and Z axis)

Tested on BJS v2.5 beta

 

Note:

in your documentation on https://github.com/ssatguru/BabylonJS-EditControl

There is a typo.

editControl.isScalingEnabled();

it should be: editControl.isScaleEnabled();

 

EditControl.js

[satguru]

@DigiHz Data

Thanks for checking this out and for the bug fix.

Regarding eulerian, not sure why do you have to force that.

If you are using euler rotation  it is suppose to return euler rotation. Is it not working that way ?

[DigiHz Data]

@satguru

No it does not return eulerian values if i use eulerian values, it always gives back rotationQuaternion values.

In my editor i only use eulerian values, and when i tested with YOUR version of Edit control, it gave back  rotationQuaternion values.

After my changes it gave back eulerian values.

You can figure it out by looking what i removed and added in MY version.

I am not here to teach you javascript he he, i know you are good at it.

I just wanted to notify you about the issue, so that you might correct it.

Note, try console.log(mesh.rotation)......and you will se it is 0,0,0

[satguru]

@DigiHz Data

Ok, I will check why.

Also I am not really very good with javascript  which is why I use Java 

But I am getting comfortable enough with it and  might rewrite this in typescript/javascript going forward.

 

[DigiHz Data]

Any future plans on any added funcionality of Edit Control?

[satguru]

@DigiHz Data

do have few plans

a. multi-selection as discussed somewhere above

b. when I wrote this, line wasn't pickable so I had to put in a bunch of code to get around that. Now that it is, I can simplify the code a bit

c. the UI for rotation can be made better

d. like to add movement in plane (XY, XZ, YZ)

Unfortunately do not have much time, so might be a while before I  get to it

 

[Dad72]

multi-selection  is a very good idea.

[joshcamas]

Hey, amazing little project you got here! I have high hopes for it, and is currently implementing it into my little game editor!
Question: when you add features, are you adding it to both the Vishva demo as well as the github repository? I can't wait to see the multi-selection!

[DigiHz Data]

I have a new idea for you @satguru.

You should attach the edit control to the mesh pivot position instead of to the mesh position.

If we move the pivot matrix, then the edit control is not where it should be.

I think that @Dad72 agrre about this to?

I have a playground with pivot here for you to get idea from.

http://www.babylonjs-playground.com/#M0UJB

[DigiHz Data]

When i start thinking a bit more.....i ment to position the edit control at pivot location when we use rotate.

(We not want to show the edit control at the mesh position, we want to show it where the mesh pivot is).

For positioning, the edit control can still be at the mesh position.

Have anything to say about this idea @Dad72 ?

[DigiHz Data]

To use the pivot as rotation axis, change:

EditControl.prototype.renderLoopProcess = function () {
   this.setAxesScale();
   this.theParent.position = this.meshPicked.absolutePosition;
   this.onPointerOver();
};

To this:

EditControl.prototype.renderLoopProcess = function () {
   this.setAxesScale();
   if(this.rotEnabled==true){
      var result1 = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, 0), this.meshPicked.getPivotMatrix());
      var result2 = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(this.meshPicked.position.x, this.meshPicked.position.y,this.meshPicked.position.z), this.meshPicked.getPivotMatrix());
      this.theParent.position=result2.subtract(result1);
   }else{
      this.theParent.position = this.meshPicked.absolutePosition;
   }
   this.onPointerOver();
};

 

[DigiHz Data]

@joshcamas

Do you have a url to your editor?

[joshcamas]

2 minutes ago, DigiHz Data said:

@joshcamas

Do you have a url to your editor?

Haha yeahh but I haven't worked on it in a while... http://samacstudios.com/projects/SamacEditor/index.html

(click "create project", then go to the maps tab, create a map, create a terrain, and do ya thing!)

Right now I'm working on a mini editor for a little game I'm making... think DOOM 2 Editor and that's basically it xD

[DigiHz Data]

@Dad72 You not have anything to say about what i wrote 3 and 4 posts ago? (Or you are to busy?)