New to Babylon - Building an app to render cnc router result

As the title says, I’m developing an online app that will create g-code and I need to offer a preview.Basically, I need to display a board with the part the design will carve out, and the path the router bit will travel.

The user should be able to use their mouse and arrow keys to rotate the object, zoom in and out, and pan the object left/right/up/down.

Since the library offers way more than I think I’ll need, I’d appreciate some pointers on what features to use, and maybe some insight on the right way to go about using the library to accomplish this task.

Thanks in advance!

Welcome, and very cool project!

I’m no expert but I’d imagine for this sort of application the following resources may be helpful:

I’d imagine the biggest challenge will be the arbitrary complexity of the geometry, especially if you intend supporting non-straight router bit profiles - for a single plywood sheet you could easily end up with a huge number of triangles in a single mesh.

I don’t know how far you are planning to go with this, but it’d be fun to actually see the plywood being routed in real-time, with a particle system at the router bit.

1 Like

Hi guys. This subject is OLD… but… I was thinkin’ about it, so what the heck, I’ll do some blabbing.

Yeah, it WOULD be fun/cool to see that. I was thinking about HOW that could be tolerably done. Continuously doing boolean subtraction (CSG) of bit-removed material… is likely impossible.

BUT… what if… we made the entire sheet of plywood… out-of VERY tiny 8-vert boxes? (standard BJS boxes are 24-vert by default, allowing for fancy texturing, flat-shading, and 2-sided-ness).

Then… if (routerbit.intersects(anyLittleBox) { that_box.dispose() } hmm.

You would not get a PERFECT representation of the machined piece, but… depending upon how many little boxes per plywood piece (resolution/tessellation)… you SHOULD be able to get decent results, theoretically.

The machined piece could be called “quantized” (has rounded-up/down precision). Or maybe “voxeled”. On most curved-cuts, you WILL see “jaggies” around the curvature… but still… it might look SORT-OF ok.

Quantizing is what “digitizing” audio… does. A 44.1 khz audio sampler (analog-to-digital converter - A2D)… checks the amplitude (volume) of input analog audio… about 44,100 times per second… and records that value. This causes the digitized audio to have “audio jaggies”. With me?

During playback, a digital-to-analog (D2A) converter… “re-models” that jaggy audio… smoothing (averaging) those jaggies… making it ready to be sent to an audio amplifier and speaker.

We cannot de-jaggy the machined-piece that I describe above, but we CAN smooth-shade it. 8-vert boxes CAN’T be flat-shaded at all… not enough verts, I believe. SO… just maybe… the (tiny) jaggies on the curved-cuts of the machined part… might not be so cosmetically-ugly after all.

Note: When smooth-shading, the .specular of the lights/materials… is important… in order to give shape-definition information to our eyeballs. Use many lights, and give due diligence-to specular settings on lights and voxel-box materials… for good shape-definition of complex smooth-shaded models. If I turn off the colors, and turn off the edge renderer, our basic 8-vert box loses it’s shape clarity. This is a GOOD THING to keep from seeing voxel jaggies, but a BAD THING for someone “touring” the machined part… examining complex “bowl” and “trough” cuts. But… wireframing the machined part… is pretty easy.

Anyway, onward-to related fun:

https://www.babylonjs-playground.com/#1JFDFW#4

Click on the red plywood sign. POOM! @jerome’s Solid Particle System (SPS) at-work. Sweet. According to his post about it, it has 6300 boxes… and those MIGHT BE 24-vert boxes. Use 8-vert boxes, and maybe TRIPLE the number of boxes allowed in the source-board.

Good thing: SPS system maintains an array of active particles FOR us - nice for onCutFinished mergeMeshes(). :wink: Other tools/customizing available, too.

And, there’s no “exploding the board”… needed in the CNC simulator. Just a little “chewing” at the router bit. Hmm. You’ll need a master “board parent” gizmo mesh (blank-mesh/invisible)… to parent all the little quantize-boxes (voxels?) to a central place.

I think this could work… and maybe produce a satisfactory representation of the machined piece, AND allow “live-routing”… ie. watch it being cut.

So, I guess the tests start with a sheet of plywood using… umm… approximately a CRAPLOAD of 8-vert boxes. Then try to program a routerbit onIntersectWithAnySceneMesh observer (likely, a nightmare)… and then… we’re ready for early tests. Coooooool. Notice that Jerome’s boxes ARE doing basic intersect/collision testing. DOUBLE cooooool ! hmm.

PS: Just by THINKING about this… my dog got scared and ran under the fridge, and my CPU fan kicked-into high-speed mode. :smiley: Party on!

3 Likes

I just realized that Jerome’s board… has no significant thickness. uh oh.

Let’s say… a sheet of plywood is 4 foot by 8 foot by 1 inch.

Loosely converting to metric, that’s 1220mm x 2440mm x 25mm.

If each tiny 8-vert voxel-box were 1 mm cubical, that’s 74,420,000 box instances (sawdust particles). PHEW! Ouch! :slight_smile: Got Cray? heh.

Yuh, yuh, yuh, I KNEW there was SOME reason why these fancy laser-cutters and water-jet cutters (or CNC things)… are SO expensive. :wink: They’re stepper-motor/actuator abusers.

Perhaps a DIFFERENT approach. Change our router-bit… to a gray-scale spray nozzle/brush… with 255 available shades of gray (cut depths). Do the spray-cut on the TEXTURE board… and then use that grayscale image as an inverted createGroundFromHeightMap (or possibly applyDisplacementMap). hmm.

1 Like

@Wingnut I think you were right the first time https://www.babylonjs-playground.com/#1JFDFW#19 the depth of each voxel-box would be the thickness of the ply, so in your example only 2976800 box instances needed. Make them 5mm by 5mm only 119072 instances. Put the camera a bit further away and you could still have a good representation.

Your first idea definitely has legs.

Hi JK. That’s true only if all cuts are full board depth. SOME router cuts are maybe only 1/4, 1/2, 3/4 … of the board thickness. That’s why I talked about lighting those cuts with good specular… if the user is camera-touring the resulting machined piece. Smooth shading makes those partial-depth “groove contours” difficult to examine. Squared corners/edges at bottoms of partial-depth cuts… will not show good definition clarity… just like the near-to-cam corner/edges of this 8-vert smooth-shaded box.

Wireframe overlays, edgesRenderer, and certain materials/textures… might improve that problem. Also, after the cut is complete, we COULD mergeMeshes() first-thing [reducing vert counts MUCH), and then convertToFlatShadedMesh() [increasing vert-counts MUCH]. :slight_smile:

The 25 mm thickness-method… using a 25 box-thick board… allows for 25 different cut-depths.

The 255 gray-scale update-heightMap-while-live-gray-painting method… allows 255 different depths. More difficult to “watch the cutting” with this method, though… but… MIGHT be do-able.

Thx for interest, ideas, and fun demo! For full-depth cuts only… yep, your idea is perfect. OH… were you thinking about changing the thickness of the boxes… when/where cuts are not full-thickness? That would work. Still one layer of boxes… but boxes are less-thick where partial-depth cuts happen? Yeah, there’s potential there. hmm.

I suppose laser-cutters and water-jets DO cut all the way thru the material, but CNC router bits… maybe not.

1 Like

If I was a practical man I would have known that. :slight_smile:

1 Like

:slight_smile: I could be quite wrong, too. I have never seen a CNC machine operate… ever. Just pictures… and maybe a video or two. I’ve heard they can cut threads in rods/bore-holes (taps and dies), too.

I guess I never imagined a mesh machine-shop… before this thread came along. :slight_smile:

That #6 displaceMap thing is easy and has sharp edges… but… no perfectly-vertical “walls” to the cuts… allowed… ever. hmm. (Here’s another tiled displace pg - multiple cut-depths)

Back to your playground, JK… umm… IF we set the origins of all your thick-boxes… to the BACK of the board… then z-axis down-scaling them would make each of them… less-thick… “shaved-off” on the front-side, as the router bit passes-over/into them. (I wonder if we CAN scale a single instance. Maybe clones-only.)

The intersect test might be gruesome: while (particle.intersect(routerbit) { particle.scaling.z *= .95 }

The particle/box would keep reducing its thickness… until it no longer intersected the router bit that is passing overhead… in real time. hehe. COOOOOL. Might be performance heavy… who knows? Gonna build one, John?

Some further thoughts - since it is a CNC machine the path for the router bit will be predetermined so for the simulation

  1. construct the final pieces using ExtrudePolygon if simple or GroundFromHeightMap if not.
  2. fill the path of the router (which would leave a ‘hole’) with SPS particles/instances/clones
  3. put final pieces and particles (etc) together to give the appearance of a solid

For simulation animation move router bit along path and dispose of particles as router bit reaches them (you could have them flying about)

1 Like

The beginnings of a very rough and ready simulation of a CNC Router https://www.babylonjs-playground.com/#95PXRY#93

Based on the last five or six minutes of this video YouTube

3 Likes

A slightly more refined version https://www.babylonjs-playground.com/#95PXRY#96