De JavaScript à l'impression 3D

Promenons-nous dans les jardins de Babylon.js

tnt

Pourquoi ce talk ?

Plusieurs passions : Maker / Dev

Inspiré par @aurelievache, @titimoby

Sylvain "gouz" Gougouzian

Consultant Dev Senior

zenika

Clermont-Ferrand

Eleveur de GNUs

https://gouz.dev

Kody

Projet éducatif Open-Source

Apprentissage de la logique / algo aux enfants

Livre dont vous êtes le héros

https://kody-deck.fr

Si ça vous intéresse ;)

CTRL+P mais en 3D

PLA(+), TPU, PETG, ABS, ...

undefined

SLA

undefined

Autres

Métal, béton, ...

cement

Choix : PLA

GCode

Dévelopé au début des années 60

ISO en 1980

Initialisation de la machine


M140 S60
M105
M190 S60
M104 S200
M105
M109 S200
M82 ;absolute extrusion mode
M201 X500.00 Y500.00 Z100.00 E5000.00 ;Setup machine max acceleration
M203 X500.00 Y500.00 Z10.00 E50.00 ;Setup machine max feedrate
M204 P500.00 R1000.00 T500.00 ;Setup Print/Retract/Travel acceleration
M205 X8.00 Y8.00 Z0.40 E5.00 ;Setup Jerk
M220 S100 ;Reset Feedrate
M221 S100 ;Reset Flowrate
G28 ;Home

Impression


G92 E0 ;Reset Extruder
G1 Z2.0 F3000 ;Move Z Axis up
G1 X10.1 Y20 Z0.28 F5000.0 ;Move to start position
G1 X10.1 Y200.0 Z0.28 F1500.0 E15 ;Draw the first line
G1 X10.4 Y200.0 Z0.28 F5000.0 ;Move to side a little
G1 X10.4 Y20 Z0.28 F1500.0 E30 ;Draw the second line
G92 E0 ;Reset Extruder
G1 Z2.0 F3000 ;Move Z Axis up

Finalisation


G91 ;Relative positioning
G1 E-2 F2700 ;Retract a bit
G1 E-2 Z0.2 F2400 ;Retract and raise Z
G1 X5 Y5 F3000 ;Wipe out
G1 Z10 ;Raise Z more
G90 ;Absolute positioning
G1 X0 Y235 ;Present print
M106 S0 ;Turn-off fan
M104 S0 ;Turn-off hotend
M140 S0 ;Turn-off bed
M84 X Y E ;Disable all steppers but Z
M82 ;absolute extrusion mode

Slicers

STL, c'est pas des sous-titres ?

text.stl


solid merged
	facet normal 0 1 0
		outer loop
			vertex 28.999999995343387 1.8000000572204589 -40.507936501432035
			vertex 31.5 1.8000000572204589 -44
			vertex 28.999999995343387 1.8000000572204589 -44
		endloop
	endfacet
	facet normal 0 1 0
		outer loop
			vertex 28.999999995343387 1.8000000572204589 -39.92592591833738
			vertex 31.5 1.8000000572204589 -44
			vertex 28.999999995343387 1.8000000572204589 -40.507936501432035
		endloop
	endfacet
	...
endsolid

Qu'est-ce qu'un Mesh ?

"Maillage"

Forme géométrique décomposée en triangle

Les composantes d'un "mesh"

Rchoetzlein at English Wikipedia

Comment je fais des objets en 3D ?

Logiciels ?

OpenSCAD ?

Autres solutions ?

Babylon.js

logo babylonjs

Historique

OpenGL en 1992 par Silicon Graphics
opengl
Concurrence avec DirectX
directx
Vulkan en 2016
vulkan

Moteurs 3D web

Three.js depuis 2010
Babylon.js depuis 2015
WebGL depuis 2011
WebGPU depuis 2023

Principal concurrent : Three.js

5 ans d'expériences de plus

Poussé depuis 2020 par react-three-fiber

Three.js vs Babylon.js

Comment fait-on un cylindre ?

undefined

cylinder.three.js


const geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );



const material = new THREE.MeshBasicMaterial( {color: 0xffffff} ); 



const cylinder = new THREE.Mesh( geometry, material );



scene.add( cylinder );

cylinder.babylon.js


const myMaterial = new BABYLON.StandardMaterial( "myMaterial", scene );
myMaterial.diffuseColor = BABYLON.BabylonColor3.FromHexString( "#ffffff" );



const cylinder = BABYLON.MeshBuilder.CreateCylinder(
    "cylinder", 
    {
        height: 20, 
        diameterTop: 10, 
        diameterBottom: 10, 
        subdivisions: 32
    }, 
    scene
);
cylinder.material = myMaterial;

Avantages de Babylon.js

Code lisible

TypeScript

Passons à la pratique

On crée une scène


const canvas = document.getElementById(canvasId);
const engine = new Babylon.Engine(canvas, true, {
    preserveDrawingBuffer: true,
    stencil: true,
});
const scene = new Babylon.Scene(engine);
scene.clearColor = Babylon.Color3.FromHexString("#9fc9dc");

On ajoute caméra, lumière, ...


const camera = new Babylon.ArcRotateCamera(
    "camera",
    -Math.PI / 2,
    Math.PI / 2.5,
    3,
    Babylon.Vector3.Zero(),
    scene
);
camera.attachControl(canvas, false);
new BabylonHemisphericLight("light", new Babylon.Vector3(2, 3, 3), scene);
new BabylonHemisphericLight("light", new Babylon.Vector3(2, 3, -3), scene);
engine.runRenderLoop(() => scene.render());

Construisons une "carte" de Kody


const material = new Babylon.StandardMaterial("std", scene);
material.diffuseColor = Babylon.Color3.FromHexString(color);
const card = Babylon.MeshBuilder.CreateBox("box", {
    width,
    height,
    depth,
});
card.material = material;

Comment je fais des trous ???

Constructive Solid Geometry

3 opérations

Union ou Addition

undefined

Différence ou Soustraction

undefined

Intersection

undefined

Des p'tits trous, toujours des p'tits trous


const hole = Babylon.MeshBuilder.CreateBox("box", {
    width,
    height,
    depth,
});
hole.position.x = x;
hole.position.y = y;
hole.position.z = z;
const CSG1 = Babylon.CSG.FromMesh(card);
const CSG2 = Babylon.CSG.FromMesh(hole);
const pipeCSG = CSG1.subtract(CSG2);
pipeCSG.toMesh("merged", card.material, scene);

Cool ma carte est prête, je génère un STL ?


const rawMeshes = scene.meshes;
let exportFile = BABYLON.STLExport.CreateSTL(
	rawMeshes,    // list defines the mesh to serialize
	true,         // triggers the automatic download of the file.
	"stl-export"  // changes the downloads fileName
);

Conclusion

Pourquoi BabylonJS ?

🫶

des questions ?

https://kody-deck.fr