swat0284

Is there any way to create paint in babylon?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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 :D

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.