Help with Dynamic Textures

[dbawel]

Hi jahow,

 

This is the method I was using for my first version app.  However, when a remote user changes the color(texture) they are using to draw, I need to have a sepeate canvas or more for each remote texture for each local user.  DO you see a way to have an virtually unlimited # of 2D canvas' sending color info to the dynamic texture?  There in is my problem, as I already have this multiuser reatime drawing app working, but only drawing with the color that the loacal user has selected.  When a remote user selects a sepeate color, I can't have so many additional canvas' in every local scene in which I'm passing the pickinfo coordinates - actually I can, but not with different tectures applied.  If you have a solution to this, I'd love to study it.

 

Cheers.

[jahow]

Well then, why just broadcast the painting coordinates to other clients, and not the painting color with it? Why limit yourself to drawing on the canvas using only the color your current user has selected?

 

Sorry if these are stupid questions.

[dbawel]

Hi jahow,

 

That's what we're currently doing, and will have to release the first version with this limitation.  However, we hope to find a way to draw using multiple colors simultanoisly onto a dynamic texture.  I've written something similar using C#, but not compatible in all browsers and OS - and the reaction from users is astounding.  It really drives home the multiuser aspect.

 

By the way, your draw script is really brilliant.  I'm still trying to understand all that you are doing.

[jahow]

Okay, got it. I'm sure you'll work something out.

 

About the draw script in the PG, I've done almost nothing. The drawing code has been done by iiceman, I just added a fix in the pickResult.getTextureCoordinates function that would keep it from functioning altogether

[iiceman]

I tried to understand what exactly you did to map the texture coordinates... but I failed Can you explain or recommend a tutorial? (or write one yourself? ) I see what you did, but I have no clue why... it is nothing I could have figured out myself with my current knowledge.

[jahow]

It mainly has to do with the barycentric coordinates of the picked point: bu and bv.

 

I've expanded the picking tutorial to describe that: http://doc.babylonjs.com/page.php?p=22111

 

Basically these coordinates tell you how the picked point is "influenced" by the three vertices of the polygon it's on. The influences are computed as follows:

• 1-bu-bv for the vertex n. 0
• bu for the vertex n. 1
• bv for the vertex n. 2

This can be used to determine the position of the picked point, but also its color, texture coordinates, normal, and any other attribute that can be interpolated between the three vertices. To interpolate an attribute (of any kind) you have to use the following equation:

interpolated_attribute = vertex0_attribute * (1-bu-bv) + vertex1_attribute * bu + vertex2_attribute * bv;

Which is... the equation of a barycenter

[iiceman]

Hmmm... I see... not sure if i actually understand..but I get the idea I guess But what about pickResult.getTextureCoordinates()? What do I use that for? And shouldn't that be the same like what you did? And if not, can we (and if I say we I mean one of you awesome contributer to babylon guys) add that barycenter stuff in a function like pickResult.getBaryTextureCoordinates(), too, so that I don't have to understand/remember it?

[jahow]

That's exactly what pickResult.getTextureCoordinates do, except I had to rewrite it myself in your PG because this function had a bug in it.

[iiceman]

Ah, I see, I compared the result of getTextureCoordinates with your texture coordinates and they were different... so the bug fix is already on the way and just not in the playground, yet? If that is fixed it makes it really comfortable to draw on dynamic textures... nice!

[GameMonetize]

Bug fix is available on the PG as well now

[iiceman]

Just for the sake of completeness the easy-to-use after bugfix version: http://www.babylonjs-playground.com/#9U086#4

 

Trying some stress test: simulating 100 users drawing pretty much at the same time: http://www.babylonjs-playground.com/#9U086#5 not sure how representative that is, but looks funky

 

Edit:

Once again I have no clue what I am doing, but it's fun: http://www.babylonjs-playground.com/#9U086#6 (trying to simulate a bit more realistic drawing behavior, only 50 users now);

 

Well, and just for the fun of it another version: http://www.babylonjs-playground.com/#9U086#7

[Wingnut]

Excellent benchmark testing, Iceman! (and others)  Thanks!

[dbawel]

OK, as always, iiceman leaves me in the dust.  I understand what he is doing, but can't yet seperate into functions for my multiuser app.  I'm living in a star trek universe.

[iiceman]

And you can even paint your own spaceship, I call it the green kosh (the pattern somehow reminded me )

 

http://p215008.mittwaldserver.info/space_paint/ (right mouse button to control camera, left one to paint)

[jerome]

So great ! 

[iiceman]

Sorry to keep pushing that but I find it fascinating and so easy. I want to use a decal as a "brush" that will show you where and what you you paint. Is that a good idea or should I draw on something like another layer of the canvas?

 

Demo here: http://www.babylonjs-playground.com/#X1VDE#2

 

How could I avoid the flickering?

[jahow]

Your decal mesh was pickable, hence the flickering: http://www.babylonjs-playground.com/#X1VDE#3

[jahow]

This thing has potential! http://www.babylonjs-playground.com/#X1VDE#4

[jerome]

excellent !

[GameMonetize]

LOL

[dbawel]

You guys are outta control!  But I'll use every bit of this!  Iceman and jahow - keep it coming! 

[iiceman]

another version of displaying the brush before drawing using dynamic texture for emsisiveTexture: http://www.babylonjs-playground.com/#9U086#16

[neelepl87]

Just for the sake of completeness the easy-to-use after bugfix version: http://www.babylonjs-playground.com/#9U086#4

 

Trying some stress test: simulating 100 users drawing pretty much at the same time: http://www.babylonjs-playground.com/#9U086#5 not sure how representative that is, but looks funky

 

Edit:

Once again I have no clue what I am doing, but it's fun: http://www.babylonjs-playground.com/#9U086#6 (trying to simulate a bit more realistic drawing behavior, only 50 users now);

 

Well, and just for the fun of it another version: http://www.babylonjs-playground.com/#9U086#7

 

Hi iiceman,

 

This looks great. For my work I need something exactly like this for drawing with mouse. But I also needed some points on the drawn figure ( as many points as possible). Is there any way I can get some sample points on the drawn figure ?

 

I am referring to the version you have posted under this url: http://www.babylonjs-playground.com/#9U086#4.

 

I do not need the sphere, I will only draw on a plane with mouse.

 

Many Thanks in advance.

 

Neel.

[iiceman]

Hi neel,

 

I am not sure what you mean by "points on the drawn figure". Can you try to explain a bit more what it is supposed to look like or do? Maybe a screenshot or something...

 

Right now I am imagining something like this: http://www.babylonjs-playground.com/#9U086#51 But not sure if that's what you mean

[neelepl87]

Hi iiceman,

 

Sorry I was bit busy with other stuff, so could not reply early.

 

My bad, my language was confusing enough. What I mean is, it would be nice to have some coordinates of points on the drawn curve. For example I draw a curve with mouse ( any shape), and I get some coordinates of points on that curve, say (x1,y1), (x2,y2), (x3,y3)...as many as possible. I am not sure whether it is feasible.

 

Please let me know if this is understandable ( I am preety bad in communicating ) or else I will try to explain differently.

 

Thanks.

Neel.