Need advices about a new VertexData.CreateTiledGround() function

[celian-garcia]

Hello everybody ! 

I've just made a function which will permite to create a tiled ground. There is several applications for it : board games, tiled map textures...

Check out the github https://github.com/kostar111/TiledGroundBJS

 

I'd like to know if the function seems to be easy to use or not, in order to make an eventual pull request.

 

Parameters of the function are :

• xmin, zmin, xmax, zmax : correspond to the extent of the future tiled ground.
• precision : number of subdivisions inside a tile (precision.w = subdivisions in the width & precision.h = subdivisions in the height)
• subdivisions : number of tiles (subdivisions.w = number of tiles in the width & subdivisions.h = number of tiles in the height

Basically it is very similar to the VertexData.CreateGround function but with differents indices so we could use BABYLON.MultiMaterial to apply materials by tiles.

 

Here are some jsfiddle you can play with

http://jsfiddle.net/q9d28/ chess

http://jsfiddle.net/4h35v/3/ space-invaders character

[GameMonetize]

Love it! sincerely!

 

Why not using playground btw?

[celian-garcia]

Thank you ! I didn't use playground because I didn't found how to link my function in external ressource.

But in fact I could have copy&paste the function in it ^^ 

Next time I'll probably use it ! 

[celian-garcia]

I just find a thing really strange, if we look at the map demo, we can see there is a "jump" between differents materials of the MultiMaterial object.

 

but if I use a Multimaterial with only one material duplicated, the jump disappeared

 

It looks like the first pixel's column of the texture was duplicated (or moved) in the last pixel's column

And idem for the rows.

 

So I think the jump is already there at the second picture but we don't see it because it is a pixel's column which correspond with first pixel's column of the next texture.

 

I don't know if I am clear because it is not so easy to explain, moreover in English ^^

 

I prepare something more clear and visible.

[celian-garcia]

I made an example more clear here

http://kostar111.github.io/TiledGroundBJS/materialBug/

 

I just made a plane and applied this texture :

 

The texture have on the left a white column and on the right a red column .

If we look at the demo I've made, we can see a white column after the red one, and a red column before the white one.

 

How can it be explained ?

[GameMonetize]

Sounds like there is something wrong with your uv[]

 

Could you get the value of UV for each vertex and be sure that they are right?

[celian-garcia]

The code I use in the last example

http://kostar111.github.io/TiledGroundBJS/materialBug/

is as simple as that : 

var ground = new BABYLON.Mesh.CreatePlane("ground", 1, scene);ground.rotation.x = Math.PI/2;var material1 = new BABYLON.StandardMaterial(    "material1",    scene);material1.diffuseTexture = new BABYLON.Texture(    "texture.png",    scene);ground.material = material1;

And I've console.logged the uvs in the demo and here I have 

[0, 0, 1, 0, 1, 1, 0, 1]

[celian-garcia]

I precise I'm talking about really thin columns which seem to be no more large than one pixel. You need to zoom to see it.

[GameMonetize]

Ok this is linked to texture wrapping. To remove this effect:

            material1.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;            material1.diffuseTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;

[celian-garcia]

Ok it fixed the problem with Planes and Grounds so it will be fixed in Geotrek 3D ! Thank you very much  =) .

 

but .. not with the TiledGround :/ I'll try to fix it tomorrow. There is something wrong on my uvs values I think or maybe the wrapping behaviour is different with submaterials ? So I made the pull request maybe a little fast ^^

[celian-garcia]

Ok the clamp trick works with the TiledGround now  !

 

Here is the result : http://kostar111.github.io/TiledGroundBJS/map/ -> No jump at all ! 

 

The stilling "problem" is I had to duplicates positions which are in the joints : you know, one with u = 1 at the end of the tile and one with u = 0 at the beginning of the next tile (idem with v values), and I don't know what would be the behaviour with collisions or Ray intersections for example if the ray come exactly in the joint.

I'll test these kind of situations and come back later. But I'm relatively confident ^^

[GameMonetize]

And please do a TS pull request

[celian-garcia]

Oh yes I'll try it  I'm not familiar with it but I think it is not "sorcier". (I was not familiar with JS 5 months ago haha)

I can include also old cylinder's changings to the Mesh.CreateCylinder() function just to include the subdivisions parameter.

 

And about Geometry I could update the Cylinder one and create a TiledGround one using this code format

var Ground = (function (_super) {    __extends(Ground, _super);    function Ground(id, scene, width, height, subdivisions, canBeRegenerated, mesh) {        this.width = width;        this.height = height;        this.subdivisions = subdivisions;        _super.call(this, id, scene, this._regenerateVertexData(), canBeRegenerated, mesh);    }    Ground.prototype._regenerateVertexData = function () {        return BABYLON.VertexData.CreateGround(this.width, this.height, this.subdivisions);    };    Ground.prototype.copy = function (id) {        return new Ground(id, this.getScene(), this.width, this.height, this.subdivisions, this.canBeRegenerated(), null);    };    return Ground;})(_Primitive);Primitives.Ground = Ground; 

Anyway I'll try it all and see if it working well. And obviously in TypeScript too. 

Bye

[celian-garcia]

I made the PR and I think all the things I said are into. 

Say me if you see something wrong 

[GameMonetize]

"I chose to use GroundMesh but for the moment, optimize() function doesn't work with these new tiled grounds. (as expected)"

 

So I cannot validate the PR

 

Why not Mesh as parent?

[celian-garcia]

I understand, yeah I can make it with mesh. I've just found cool the new groundMesh class   in particular the getHeightAtCoordinates() function which is simple but can be useful.

I would prefer to find a way to modify the optimize function but for the moment I'll change GroundMesh to Mesh.

 

By the way I found something weird with this last function and I think I resolved it. Here is the topic http://www.html5gamedevs.com/topic/8015-getheightatcoordinates-return-wrong-value/ if you want to see it.

[celian-garcia]

PR updated ! Mesh is now the parent 

[GameMonetize]

And validated!!!

 

Could you update the wiki?

https://github.com/BabylonJS/Babylon.js/wiki/02-Basic-elements

[celian-garcia]

Sure !

Tomorrow I'll do an article about How set MultiMaterials of a TiledGround in Makina Corpus website. Maybe it could be linked in the wiki after, in MultiMaterials section ? Anyway I'll send you the link when it is done.

[GameMonetize]

For sure!!!!!!!

[celian-garcia]

Tiled grounds now in Babylon.js, for anyone who want to use it, here is the tutorial 

http://makina-corpus.com/blog/metier/how-to-use-multimaterials-with-a-tiled-ground-in-babylonjs

[Dad72]

Thanks.

[Wingnut]

Kostar111 ... I am working on a fresher tutorial #2... its at...

 

https://github.com/BabylonJS/Babylon.js/wiki/zzz-work-in-progress-02

 

Just a slight adjustment to your edit, and i put a link to your very cool tiled ground tutorial... in there, as well. 

 

Hope you approve.  If you'd like to make an edit to the tiled ground area... within that work-in-progress document... please do, and I will make sure your edit "holds" through all my future document edits/pastes.

 

I love your tiled ground tutorial... it totally rocks!  Nice work!

[celian-garcia]

Nice ! I like it =) Sure I approve it. Aaand I have no edit to make I found it good, you are surely a better writer than me , seeing the big comments you make usually in the forum. Oo

 

I don't know if I can change "kostar111" name in Github but I don't like it I'll probably change it if I can.

 

Thank you very much for your consideration ! And see you in September 'cause I'm in holidays haha