Tag Archives: 3d

Three.js

095707
G_dof_foggyScene

FilmFX | Nebbia + profondità di Campo ( DOF)
Mouse wheel per lo zoom, mouse click + drag per orbitare.

Seguiranno dettagli, intanto fatemi dire che anche se sto soltando grattandone la superficie, sono estremamente soddisfatto dei primi passi con Three.js e sono altrettanto entusiasta per la semplicità con la quale si possono ottenere effetti con risoluzione e framerates altissimi (il grosso della lavoro lo fa la GPU). Ora si tratta di aggiungere un pò di uteriore realismo con physijs o con cannon.

One of the great things about WebGL is that you don’t need to learn a whole new application platform to create 3D; the platform is the web browser.
— Tony Parisi

3dpathExtrusionSpline (the black thin line) extrusion.

gridTyper


231174
75121
26426

gridTyperSet
gridTyper.

Applet and source: gridTyper.
Made with Processing + HE_Mesh.

L’estrusione dei pixel font ha destato il mio interesse già in passato 123 ma gridTyper è l’implementazione di un’idea di Jan Vantomme (vormplus) sul cui blog due o tre settimane fa ho trovato un interessantissimo post sul processo utilizzato per realizzare delle bellissime lettere in plastica acrilica delle dimensioni di 40 × 50 × 20 mm usate per la corporate identity di cloudswimmers. Sfortunatamente, nonostante abbiano realizzato questo set di lettere con Processing ed HE_Mesh – ambedue opensource – non hanno diffuso il codice sorgente; mi sono quindi permesso di seguire il processo descritto nel post per realizzare io stesso un tool che potesse estrudere un pixel font (direttamente sul keyPress a runtime) e smussarlo (Catmull-Clark); questi oggetti – se suddvisi ulteriormente possono divenire molto lisci al tatto – e possono essere salvati in .stl per poi essere stampati in 3D con shapeways o i.materialise tramite processi di selective laser sintering (SLS). Full credits a vormplus quindi per l’idea ma sopratutto grazie a Frederik che mi ha supportato nella realizzazione del tool, chiarendomi dubbi e perplessità su come procedere.

Volumetric Thing (Tree)

3484TreeRender
Particle-generated volumetric tree.

Made with Processing+toxiclibs+SunflowApiApi.

L’idea su cui sto lavorando negli ultimi tempi, e cioè creare volumi registrando le informazioni relative ad un determinato stato di una immagine 2D con l’aggiunta della terza dimensione (estrusione data dal tempo che scorre) comunque non è mia e lo devo annotare ad onor del vero. Il concept originale é di Karsten “toxi” Schmidt (autore di toxiclibs) ma un giorno, su openprocessing mi sono imbattuto negli sketches di Dominik Strzelec “echoechonoisenoise” e i suoi esperimenti sulla time-extrusion con toxiclibs mi hanno talmente ispirato da spingermi ad iniziare ad usare le lib (un set di 270+ classi distribuite in 18 packages da utilizzare con Processing), cosa che non avevo fatto prima, concentrandomi a mia volta sul package toxi.volume.

La mia idea sarebbe ora di creare degli alberi a partire da sistemi multipli di particelle – in passato avevo tentato altri approcci e cioè le funzioni recursive e gli L-Systems; questo primo esempio è solo l’inizio anche se più che di un particle system si tratta di una ventina di particelle che ‘vivono’ sul piano da estrudere. All’inizio della time-extrusion (alla base dell’albero) si trovano tutte al centro, poi con un attrattore che in realtà le respinge – posto al centro del piano – le particelle (per via di massa e diametro differenziato) si allontanano più o meno velocemente. Questo crea i rami. Devo solo fare in modo che ogni particella, ad un dato momento della sua vita, possa generare altre particelle e riduca il suo raggio fino a zero. Così da un singolo ramo otterrei altri rami, e anche loro si assottiglierebbero fino allo zero generando ulteriori rami.

saving hi-res, transparent png files from Processing – with a key press

self portraitAn effective method to save a frame with a different size than the size of the 3D sketch you’re drawing, is to use a PGraphics to make an enlarged copy of the scene; this image (click on it) has been created from the webcam feed wich is normally set to 320×240 pixels; when you create a PGraphics (Processing’s main graphics and rendering context) you must specify the width and height of the object itself; try to multiply the sketch’s original size by 10. You get images of 3200×2400 pixels or more. See hi-res anemone and hi-res webcam feed, they’re both transparent png files saved with this technique from two of my sketches.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
void keyPressed()
{
    switch(key) {
    case 's':
    noLoop();
    drawbg = false; // this is a boolean wich you can use to remove the background from the main draw() method; eg: if(drawbg) background(255)
    recorder = createGraphics(width*10, height*10, P3D); //  original app size is multiplied by 10
    recorder.beginDraw();
    cam.getState().apply(recorder); // useful for 3D scenes, sync the perspective - you need the peasyCam library, applies the latest CameraState
    draw();
    recorder.endDraw();
    recorder.save("test.png"); // save to disk (skecth folder)
    recorder = null;
    println("screenshot saved");
    loop();
    break;
    }
}

re-mesh

hmrecreate04
hmrecreate04det
hmrecreate03
hmrecreate02
Re-constructed structures. Made with Processing+Hemesh+SunflowApiApi.

Creating meshes is cool (for a given amount of cool) but destroying them is even cooler.
— W:Blut

True, but once a mesh is modified (with the Lattice modifier, for example) how can we re-construct the shape keeping track of the removed ones? I wanted a way to render some glass-looking windows on the buildings faces and discovered (hacked) a way to re-generate a polygon (a new cube but still missing the 6th face) where initially a hole have been created. One can draw the polygons by going through the WB_Point array of each poly, creating a polygon for every face you delete.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import wblut.hemesh.*;
import wblut.hemesh.creators.*;
import wblut.hemesh.modifiers.*;
import wblut.hemesh.subdividors.*;
import wblut.hemesh.kdtree.*;
import wblut.hemesh.tools.*;
import wblut.geom.*;
import wblut.math.*;
 
import peasy.org.apache.commons.math.*;
import peasy.*;
import peasy.org.apache.commons.math.geometry.*;
 
HE_Mesh mesh, holes;
PeasyCam cam;
HE_Selection selection;
 
ArrayList<WB_Polygon> removedPolys = new ArrayList<WB_Polygon>();
ArrayList<WB_Quad> qua = new ArrayList<WB_Quad>();
 
void setup()
{
	size(650, 650, P3D);
	cam = new PeasyCam(this, 450);
	HEC_Creator cube = new
	HEC_Box(this).setWidth(100).setWidthSegments(5)
		.setHeight(100).setHeightSegments(5)
		.setDepth(100).setDepthSegments(6);
	mesh = new HE_Mesh(cube);
	selection=new HE_Selection();
	Iterator fItr=mesh.fItr();
	HE_Face f;
	while(fItr.hasNext()){
	 f=fItr.next();
	 if(random(100) < 50){
	   selection.add(f);
	   removedPolys.add(f.toPolygon());
	 }
	}
	HEM_Lattice lattice = new HEM_Lattice().setDepth(6).setWidth(3);
	mesh.modifySelected(lattice, selection);
 
	for (WB_Polygon wb:removedPolys){
	  for(int i = 0; i < wb.points.length; i+=4){
		WB_Quad wbq = new WB_Quad(wb.points[i], wb.points[i+1], wb.points[i+2], wb.points[i+3]);
		qua.add(wbq);
	  }
	}
	HEC_FromQuads hfq = new HEC_FromQuads(this).setQuads(qua);
	holes = new HE_Mesh(hfq);
	HEM_Extrude extrude = new HEM_Extrude().setDistance(1);
	holes.modify(extrude);
}
 
void draw()
{
    background(255);
    lights();
    noStroke();
    fill(220);
    mesh.drawFaces();
    fill(#B90202, 70);
    holes.drawFaces();
}