Tree Challenge?

[JohnK]

This is my first attempt at a realistic tree generator http://www.babylonjs-playground.com/#QNVMR

 

I am certain there must be a better way. Anybody want to have a go at doing a better one?

[Dal]

This is cool... I've also been planning to make a tree generator... still trying to get a decent large terrain first though

[Dad72]

This is nice. missing more than the leaves. it could make a nice extension ... Is this your goal?

[GameMonetize]

THis is defnitely a good idea for an extension!

[hen]

I was working on some tree generator using proctree (http://snappytree.com/) with babylon.js.

May have a look here http://www.babylonjs-playground.com/#1YZ8R1#0

 

Just note that this not working right actually, probably i am missing something with the babylon mesh creation.

It seems that the mesh geometry was created without any errors but does not render at all...

[hen]

Update...its working now http://www.babylonjs-playground.com/#1YZ8R1#19

 

Just change the properties in treeProps to customize trees.

 

There is still a problem with the uv`s as seen on the pic below... Maybe someone has a idea what i did wrong?

 

 

[JohnK]

@Deltakosh and @Dad72 an extension would be a good idea. Not certain I am up to it. It has taken me two months to get this far and I am not happy with it yet. Think I am going to make some major changes. The code seems too messy and some of the branch angles do not look correct.

 

@hen seems a good approach. A lot to work through to find UV problem. Will follow how you get on with interest.

[Dal]

@JohnK if you can't figure out the UV problem, you could probably cheat by using  Babylon's built in mesh creation function to just create some squares and attach them to the branches.

[hen]

I think its not too hard to fix the UVs... its probably a problem how i push the UVs in to babylon format.

Im looking at it now.

myTree.faces.forEach(function(f) {        var uva = myTree.UV[f[0]];        var uvb = myTree.UV[f[1]];        var uvc = myTree.UV[f[2]];        trunkUVs.push(uva[0], uva[1]);        trunkUVs.push(uvb[0], uvb[1]);        trunkUVs.push(uvc[0], uvc[1]);    });

[hen]

I figured it out... UVs are correct now

 

http://www.babylonjs-playground.com/#1YZ8R1#21

 

 

[Dal]

@hen this is looking awesome! Would be great to have this in the core. I can't see your playground demo though, the textures are broken.

[hen]

Yes i dont have the textures hosted somewhere.

You could just replace the texture urls and everything should look fine.

 

It would be easy to turn this in to some babylon module, but i could do this only in pure js... since i never coded typescript before.

[Dal]

@hen Typescript is really just javascript with some extra bits... most of the time you can just paste your javascript into a .ts file and it will work, or it will work with just a few changes.  I'd really recommend you give it a try though, once you get over the initial confusion of setting up the editor to compile the .ts files and such, its much nicer to work with.

 

The main trick you need to learn is to use "any" a lot. If you are using a .js file that doesn't have typescript definitions, just give it a type of "any" and it will basically ignore all the typescript checking and just work like normal js. You can use that to get your stuff into typescript without any really modification and then slowly add typescript sugar on top.

[hen]

I will try that next weekend. 

Generating the trees is a bit slow at the moment, because im pushing alot of data around.
I think this would work much better when we just use the proctree algo to generate babylon mesh right away.