Is there any way to create paint in babylon?

[swat0284]

Hello. Is there any way to create simple paint in babylon?

[RaananW]

Hi,

So, do you mean paint as in the Windows paint application, or the material used to color walls (apart from spray cans)?

[swat0284]

ok i make it
http://www.babylonjs-playground.com/#NA9IW#2

[RaananW]

Ask and you shall receive! :-)

BTW, this is pure awesomeness, I have been playing with it for the last 3 minutes 

[Vousk-prod.]

Excellent! Love it!

[dbawel]

Hi Swat,

 

I've built many scripts to paint in BJS, and will release a multi-user paint and drawing application soon with many features straight from Photoshop.  However, as RaananW mentioned, what you have built in the playground is allot of fun to play with.  Is the method you're using to create lines on the ground plane the result you are looking for? 

 

For painting on objects, there are other methods, and cleaner ways to do this, as you'll find limitations with the draw function you've built.  And I certainly know, as I've drug myself through hell the past few months to find all of the various methods to paint on objects and script them.  But as much fun as your script is, I am thinking about other uses for your script.  I'm not sure exactly what they are yet, but I'm looking closely at the alterations of the method you're using to draw on the plane.  THere's definately some other potentials here.  But great job - it is allot of fun. 

 

Cheers,

 

DB

[Boz]

A multi-user paint and drawing applications ? Waw, look forward to see that

 

Nice job swat btw

[Ahiru]

Is there an easy way to join all lines to one mesh? After only some scribbling the  FPS goes down to 8 FPS - showing 430 draw calls - so guess there have to be definitively some optimisation to be done

[dbawel]

In looking at your code, I would assume that the frame rate climbs again once you release the mouse button.  But I didn't run any tests, so this is simply an assumption,  But if your frame rate does increase again with the release of the mouse, then you'll need to use a different method to draw on objects, as the overhead you're creating will eventually bury your scene (framerate.).

 

DB

[swat0284]

i fix some drawcals bugs
http://www.babylonjs-playground.com/#NA9IW#46

is there any way to chenge color or size of this line?

[Wingnut]

Hi swat!  Colors...

 

http://www.babylonjs-playground.com/#NA9IW#59

 

Lines #25 and #99 are the points of interest.  I didn't do a very good job of implementing it into your playground, but you can adjust things.

 

Line thickness?  hmm.  I don't think that's available... but I'm having a rough morning... so I could easily be wrong.   

 

Interesting project, swat!   Take care.

[dbawel]

Since you're not technically drawing on a mesh, but are creating lines (paths, visible vectors), you are limited in creating thickness that actually appears as a drawn line.  Your options are dashed lines, ribbons, and tubes - which ar lines with thicknes represented as polygons - almost like extruding a shape down the line path.

 

The link below expains most of the variations on drawing lines - including color, which Wingnut beat me to it this time, as he practically lives on this forum.

 

Here's the link:

http://doc.babylonjs.com/tutorials/02._Discover_Basic_Elements

 

Although I wouldn't recomend pursuing the method of creating lines any further with what it appears you are trying to accomplish.

 

But if you want thicknes to your line, use a tube, however, it will be a 3D object and not a 2D line.  So as I mentioned in a previos post, you would need to use a different method to draw if you want brush size, color, texture, and anything representing a drawing tool.  Two methods that you might want to look at on this forum would be decals, and my personal favorite (no really), which are dynamic textures.  Using dynamice textures gives me all the functionality I need to create a 3D drawing tool as well as drawing using a brush, brush size, color, etc.

 

Good Luck,

 

DB

[Vousk-prod.]

Hi swat!  Colors...

 

http://www.babylonjs-playground.com/#NA9IW#59

 

Lines #25 and #99 are the points of interest.  I didn't do a very good job of implementing it into your playground, but you can adjust things.

 

Line thickness?  hmm.  I don't think that's available... but I'm having a rough morning... so I could easily be wrong. 

 

Interesting project, swat!   Take care.

 

Woaaaaaaawww!! Do you realise what you've just created there Wingnut ???!!

A super easy tool to help in anamorphosis drawings creation !!!! That so coooooool!

 

Put the camera so that the ground is in a perspective view (like if you were standing on it), then draw anything. You then just need to rotate camera to see how much you need to deform your drawing to create an anamorphosis on the ground (like Julian Beever's art for instance).

Fascinating!

[swat0284]

I onlu want to create as simple as posible paint, it is part of bigger comercial app. I write first time in babylon and in java and it is soo simple

[Wingnut]

Wow, thanks VP, but this is Swat0284's thing. 

[Vousk-prod.]

Oh yes, you're right, I only saw the first swat0284's attempt (with the cube, sphere and other meshes drawing the lines), and not the second one without them. You simply added colors to that.

Sorry swat0284, it's your work I should have lauded.

[dbawel]

Are you looking for something like this:

http://www.qedsoft.com/DEMOS2014/creative_drawing_v1/index.html

 

As I mentioned, there are many ways to paint on objects in BJS - some better than others. As for making your lines thicker, take a look at the link I posted previously - otherwise, here is the method listed below as well as updaing the lines or meshes.

•  

• Creation of a Tube

var tube = BABYLON.Mesh.CreateTube("tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene, false, BABYLON.Mesh.DEFAULTSIDE);

Parameters are : name, path, radius, tesselation, optional radiusFunction, cap, scene, updatable, sideOrientation.

• name : string, the name of the tube mesh,
• path : an array of successive Vector3, at least two Vector3,
• radius : the tube radius, taken into account when radiusFunction parameter set to null,
• tesselation : the number of radial segments,
• radiusFunction : optional, a javascript function returning a radius value, can be let to null,
• cap : BABYLON.Mesh.NO_CAP, BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL,
• updatable : if the tube could be updated later,
• sideOrientation : the wanted side orientation (front, back or double side).

These two last parameters can be omitted if you just need the default behavior :

var tube = BABYLON.Mesh.CreateTube("tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene);

The tube can be used also as a Parametric Shapes by setting a radius function.

Updatable

This parameter present in each mesh creation method tells if the mesh could be updated once it is created.
If false (default value), the mesh data are passed only once to the GPU.
If true, the mesh data may be recomputed and passed to the GPU at each frame refresh.

 

 

 

 

However, I don't recomend using this method, as it's not the most efficient or practical way to draw lines.  The link to the method you are using with many more variables is still:

http://doc.babylonjs..._Basic_Elements

 

DB