Adds geometry to downloadable obj files functionality #6812

diyaayay · 2024-02-15T06:22:55Z

Resolves #6769
Changes:
1- Added obj file support to save().
2- Created a method called geometryToObj() in p5.Geometry.js .

Screenshots of the change:
Sketch used:

let particles;
let button;

function setup() {
  createCanvas(400, 400, WEBGL); // Increase canvas size
  button = createButton('New');
  button.mousePressed(makeParticles);
  makeParticles();
  particles.geometryToObj();
}

function makeParticles() {
  if (particles) freeGeometry(particles);

  particles = buildGeometry(() => {
    for (let i = 0; i < 2; i++) {
      push();
      // Adjust translation values to fit within the canvas
      translate(
        randomGaussian(-50, 50),
        randomGaussian(-50, 50),
        randomGaussian(-50, 50)
      );
      sphere(5);
      pop();
    }
  });
}

Downloaded Obj File:

Sketch to check the downloaded obj file:

let octa;
function preload() {
 octa = loadModel('model.obj');
}
function setup() {
    createCanvas(400, 400, WEBGL);
}

function draw() {
 background(200);
   model(octa);
   }

Downloaded obj file on canvas:

PR Checklist

npm run lint passes
Inline documentation is included / updated
Unit tests are included / updated

diyaayay · 2024-02-15T06:27:48Z

@davepagurek Please take a look and let me know if this works and if further changes are needed, maybe unit tests, examples, or even how I've implemented this. Thanks.

davepagurek

It's looking good so far! Some user-facing documentation would be great.

For unit tests, some of our tests use this method to test downloads, maybe we can try using it too?

p5.js/test/js/p5_helpers.js

Line 27 in ef4647f

function testWithDownload(name, fn, asyncFn = false) {

an example of its usage:

p5.js/test/unit/io/saveTable.js

Lines 99 to 112 in ef4647f

    
           testWithDownload( 
        
             'should download a file with expected contents (tsv)', 
        
             async function(blobContainer) { 
        
               myp5.saveTable(myTable, 'filename', 'tsv'); 
        
               let myBlob = blobContainer.blob; 
        
               let text = await myBlob.text(); 
        
               let myTableStr = myTable.columns.join('\t') + '\n'; 
        
               for (let i = 0; i < myTable.rows.length; i++) { 
        
                 myTableStr += myTable.rows[i].arr.join('\t') + '\n'; 
        
               } 
        
               assert.strictEqual(text, myTableStr); 
        
             }, 
        
             true 
        
           );

davepagurek · 2024-02-16T01:23:09Z

src/webgl/p5.Geometry.js

+
+
+    // Vertices
+    this.vertices.forEach(v => {


Nice work on this method, nice and concise!

davepagurek · 2024-02-16T01:26:03Z

src/webgl/p5.Geometry.js

+      objStr += `f ${faceStr}\n`;
+    });
+
+    save(objStr, fileName);


save() is a user-facing function, so if this method uses it, users could also technically use it, but they would have to know to pass an obj string through here. Maybe instead we could use the internal downloadFile method?

p5.js/src/image/image.js

Line 227 in 37d3324

p5.prototype.downloadFile(blob, filename, extension);

davepagurek · 2024-02-16T01:27:28Z

src/webgl/p5.Geometry.js

+ * @for p5.Geometry
+ */
+
+  geometryToObj (fileName='model.obj'){


Maybe we can call this saveObj so users would call it like geom.saveObj() instead of geom.geometryToObj(), which feels a tad redundant?

saveObj sounds much better :)

diyaayay · 2024-02-17T03:32:56Z

@davepagurek made some changes, let me know if these work.Thanks.

davepagurek

Great work on the writing for the documentation! I just have a few things left for the example.

I also thought of one more thing for the exporter itself about handling cases where we don't have either normals or texture coordinates.

davepagurek · 2024-02-22T23:57:38Z

src/webgl/p5.Geometry.js

+ *   });
+ *
+ *   octa = endGeometry();
+ *   octa.saveObj();


Can we do this on button click maybe? I think going to the reference page and immediately having the file immediately download might be a bit jarring.

davepagurek · 2024-02-22T23:58:18Z

src/webgl/p5.Geometry.js

+ * let angleX = 0;
+ * let angleY = 0;
+ * function setup() {
+ *   createCanvas(400, 400, WEBGL);


Do you think we can make the canvas 100x100 (and scale accordingly in draw)? Right now it squishes the code:

davepagurek · 2024-02-23T00:05:09Z

src/webgl/p5.Geometry.js

+    // Faces
+    this.faces.forEach(face => {
+      // OBJ format uses 1-based indices
+      const faceStr = face.map(index => index + 1).join(' ');


If we have normals and texture coordinates, I think we might have to use f 1/1/1 2/2/2 3/3/3 to specify that the face does in fact have vertices and faces? We read it out from the slashes here:

p5.js/src/webgl/loading.js

Line 252 in 37d3324

const vertParts = vertString.split('/');

It might take a few if statements to do e.g. f 1//1 2//2 3//3 if we have normals but no texture coordinates.

davepagurek · 2024-06-20T11:04:08Z

Hi @diyaayay! I just wanted to check in to see whether you're still interested and have time to work on this? No problem at all of not, and would you be open to other contributors or myself continuing off of this branch to finish up the feature?

diyaayay · 2024-06-20T20:24:42Z

Hi @diyaayay! I just wanted to check in to see whether you're still interested and have time to work on this? No problem at all of not, and would you be open to other contributors or myself continuing off of this branch to finish up the feature?

@davepagurek I've been a bit occupied lately with multiple stuff. I'm okay with any other contributors taking this up further and finishing the feature.

davepagurek · 2024-06-20T20:26:15Z

No problem, thanks for the great foundation you've made for this feature so far 🙂 I hope GSoC is going well!

dgrantham01 · 2024-06-20T21:31:54Z

I've got a version of this that might work that can download both stl and obj filetypes, but I'm not sure how to submit it.

davepagurek · 2024-06-20T21:52:42Z

Thanks @dgrantham01! How have you been working on it so far? Need any help making a PR?

dgrantham01 · 2024-06-20T22:49:07Z

I made a little library type thing for my students to make generative sculptures last year and just modified it a bit to fit within the p5.Geometry class. It basically adds a save function to the class rather than going through the save function in the core library. I imagine that we could modify the save function in the core library similarly to the saveJson and saveStrings logic there.

This is the code though I haven't tested it in this context.

    save(filename = "model.obj", binary = false){
   let output;
   let nameAndExt = {
    "name": substring(0, filename.lastIndexOf(".")),
    "ext": filename.split('.').pop()
  }


  if(nameAndExt[1] === "stl"){
    faceNormals = [];
    for (let f of this.faces) {
      const U = p5.Vector.sub(this.vertices[f[1]], this.vertices[f[0]]);
      const V = p5.Vector.sub(this.vertices[f[2]], this.vertices[f[0]]);
      const nx = U.y * V.z - U.z * V.y;
      const ny = U.z * V.x - U.x * V.z;
      const nz = U.x * V.y - U.y * V.x;
      faceNormals.push(createVector(nx, ny, nz).normalize());
    }
    if(this.binary){
      let offset = 80;
      const bufferLength = this.faces.length * 2 + this.faces.length * 3 * 4 * 4 + 80 + 4;
      const arrayBuffer = new ArrayBuffer( bufferLength );
      output = new DataView( arrayBuffer );
      output.setUint32( offset, this.faces.length, true ); 
      offset += 4;

      for (const [key, f] of Object.entries(faces)){
        const normal = faceNormals[key];
        output.setFloat32(offset, normal.x, true ); 
        offset += 4;
        output.setFloat32(offset, normal.y, true ); 
        offset += 4;
        output.setFloat32(offset, normal.z, true ); 
        offset += 4;

        for (let vertexIndex of f) {
          const vertex = this.vertices[vertexIndex];
          output.setFloat32(offset, vertex.x, true ); 
          offset += 4;
          output.setFloat32(offset, vertex.y, true ); 
          offset += 4;
          output.setFloat32(offset, vertex.z, true ); 
          offset += 4;
        }
        output.setUint16(offset, 0, true ); 
        offset += 2;

      }  
    }
    else{
    output = ["solid " + nameAndExt[0]];
      // console.log(this.vertices)
    for (const [key, f] of Object.entries(faces)){
      const normal = faceNormals[key];
      output.push("facet normal " + normal.x + " " + normal.y + " " + normal.z);
      output.push(" outer loop");
      for (let vertexIndex of f) {
        const vertex = this.vertices[vertexIndex];
        output.push("vertex " + vertex.x + " " + vertex.y + " " + vertex.z);
      }
      output.push(" endloop");
      output.push("endfacet");

    }  
    output.push("endsolid " + nameAndExt[0] + "\n");
  }
  }
  else{
    output = []
    for (let v of this.vertices) {
      output.push("v " + v.x + " " + v.y + " " + v.z);
    }
    for(let uv of this.uvs){
      output.push("vt " + uv.x + " " + uv.y);
    }
    for(let vn of this.vertexNormals){
      output.push("vn " + vn.x + " " + vn.y + " " + vn.z);
    }
    for (let f of this.faces) {
      output.push("f " + f[0] + " " + f[1] + " " + f[2]);
    }
  }
  downloadFile(new Blob([output], {type: 'text/plain'}), filename);

}

davepagurek · 2024-06-20T23:00:55Z

Nice! Are you able to clone this existing branch to add your STL exporter into the existing code, maybe by renaming the method to be format agnostic? Might be able to through here:

For the OBJ version, I wonder if we have to handle the same issue mentioned in this comment https://github.com/processing/p5.js/pull/6812/files#r1500085929 and make it output something like f 1/1/1 2/2/2 3/3/3 in order to add both normals and UVs to the face. If you're interested in modifying the existing OBJ export code here to add handling for that in that would be great!

dgrantham01 · 2024-06-21T13:26:07Z

I got it checked out. Never really contributed to this kind of thing before, but I'll see if I can get it all together.

One clarification about the Geometry data organization, are the indices of the vertexNormals and uvs the always the same as the vertices? The wiki on the obj format suggests that they could be different, but I just want to double check because I think that's not the case here.

davepagurek · 2024-06-21T13:29:01Z

That's right, although in an arbitrary .obj file they might be different, in p5.Geometry's internals, there will always be a 1:1 mapping of vertices to UVs, per-vertex colors and normals (if they exist -- vertices will always exist but the others may just be empty.)

dgrantham01 · 2024-06-21T14:29:05Z

Ok. I fixed the obj and added stl and I think I committed it through the github online thing. Should be working. My test sketch was working and both stl and objs opened in blender no proble. A quick scan over the text inside looked like it was correct as well.

davepagurek · 2024-06-21T15:01:27Z

ok nice! does it let you push the code to a new branch and make a PR? Also by online thing, is that Github Codespaces?

dgrantham01 · 2024-06-21T15:11:40Z

Yes. Codespaces is the online thing. I believe I managed to get it to commit and create a PR.

davepagurek · 2024-06-21T17:30:30Z

I don't see it yet unfortunately, do you have a link to the PR?

dgrantham01 · 2024-06-21T18:53:02Z

I guess my commits aren't even going through because of a "husky" node version error, which I can't seem to resolve in codespaces, visualstudio, or github desktop. Here is a link to a forked version of the geometry file which should be correct.

https://github.com/dgrantham01/p5.js/blob/main/src/webgl/p5.Geometry.js

davepagurek · 2024-06-22T00:54:23Z

Thanks! If getting it all working through GitHub is a problem, this weekend I can try to coalesce everything together into this PR to get both of your changes in.

Fix obj export: -included button in example to download the model instead of instantly downloading -included vertexNormal and uv index inclusion in face output added a saveStl function that saves an stl model

davepagurek

Thanks for your help everyone, I think this is good to go now!

davepagurek · 2024-06-23T14:05:13Z

@all-contributors please add @diyaayay for code

allcontributors · 2024-06-23T14:05:17Z

@davepagurek

@diyaayay already contributed before to code

davepagurek · 2024-06-23T14:05:28Z

@all-contributors please add @dgrantham01 for code

allcontributors · 2024-06-23T14:05:38Z

@davepagurek

I've put up a pull request to add @dgrantham01! 🎉

Adds geometry to downloadable obj files functionality

b211f73

Qianqianye requested a review from davepagurek February 15, 2024 19:01

davepagurek reviewed Feb 16, 2024

View reviewed changes

diyaayay added 3 commits February 16, 2024 17:22

changes function name to saveObj

778bc40

using downloadFile instead of save and added documentation

2578053

unit test and minor fix

5773158

davepagurek reviewed Feb 23, 2024

View reviewed changes

diyaayay mentioned this pull request Feb 23, 2024

GSoC: JSON Schema Language Server Contributions json-schema-org/community#601

Closed

dgrantham01 and others added 4 commits June 23, 2024 09:00

Update p5.Geometry.js

0a9cf53

Fix obj export: -included button in example to download the model instead of instantly downloading -included vertexNormal and uv index inclusion in face output added a saveStl function that saves an stl model

Merge branch 'main' into Downloadable-obj-file

003af34

Update documentation, fix typos

6302061

Add describe()

5b915f1

davepagurek approved these changes Jun 23, 2024

View reviewed changes

davepagurek merged commit 263a652 into processing:main Jun 23, 2024
2 checks passed

allcontributors bot mentioned this pull request Jun 23, 2024

docs: add dgrantham01 as a contributor for code #7104

Merged

yamcodes mentioned this pull request Aug 22, 2024

[Snyk] Upgrade p5 from 1.4.0 to 1.10.0 yamcodes/agario-clone#15

Open

yamcodes mentioned this pull request Sep 7, 2024

[Snyk] Upgrade: color, p5 yamcodes/agario-clone#16

Open

diyaayay deleted the Downloadable-obj-file branch November 13, 2024 18:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds geometry to downloadable obj files functionality #6812

Adds geometry to downloadable obj files functionality #6812

diyaayay commented Feb 15, 2024 •

edited

Loading

diyaayay commented Feb 15, 2024

davepagurek left a comment

davepagurek Feb 16, 2024

davepagurek Feb 16, 2024

davepagurek Feb 16, 2024

diyaayay Feb 16, 2024

diyaayay commented Feb 17, 2024

davepagurek left a comment

davepagurek Feb 22, 2024

davepagurek Feb 22, 2024

davepagurek Feb 23, 2024

davepagurek commented Jun 20, 2024

diyaayay commented Jun 20, 2024

davepagurek commented Jun 20, 2024

dgrantham01 commented Jun 20, 2024

davepagurek commented Jun 20, 2024

dgrantham01 commented Jun 20, 2024 •

edited

Loading

davepagurek commented Jun 20, 2024

dgrantham01 commented Jun 21, 2024

davepagurek commented Jun 21, 2024

dgrantham01 commented Jun 21, 2024

davepagurek commented Jun 21, 2024

dgrantham01 commented Jun 21, 2024

davepagurek commented Jun 21, 2024

dgrantham01 commented Jun 21, 2024

davepagurek commented Jun 22, 2024

davepagurek left a comment

davepagurek commented Jun 23, 2024

allcontributors bot commented Jun 23, 2024

davepagurek commented Jun 23, 2024

allcontributors bot commented Jun 23, 2024

	testWithDownload(
	'should download a file with expected contents (tsv)',
	async function(blobContainer) {
	myp5.saveTable(myTable, 'filename', 'tsv');
	let myBlob = blobContainer.blob;
	let text = await myBlob.text();
	let myTableStr = myTable.columns.join('\t') + '\n';
	for (let i = 0; i < myTable.rows.length; i++) {
	myTableStr += myTable.rows[i].arr.join('\t') + '\n';
	}
	assert.strictEqual(text, myTableStr);
	},
	true
	);

Adds geometry to downloadable obj files functionality #6812

Adds geometry to downloadable obj files functionality #6812

Conversation

diyaayay commented Feb 15, 2024 • edited Loading

PR Checklist

diyaayay commented Feb 15, 2024

davepagurek left a comment

Choose a reason for hiding this comment

davepagurek Feb 16, 2024

Choose a reason for hiding this comment

davepagurek Feb 16, 2024

Choose a reason for hiding this comment

davepagurek Feb 16, 2024

Choose a reason for hiding this comment

diyaayay Feb 16, 2024

Choose a reason for hiding this comment

diyaayay commented Feb 17, 2024

davepagurek left a comment

Choose a reason for hiding this comment

davepagurek Feb 22, 2024

Choose a reason for hiding this comment

davepagurek Feb 22, 2024

Choose a reason for hiding this comment

davepagurek Feb 23, 2024

Choose a reason for hiding this comment

davepagurek commented Jun 20, 2024

diyaayay commented Jun 20, 2024

davepagurek commented Jun 20, 2024

dgrantham01 commented Jun 20, 2024

davepagurek commented Jun 20, 2024

dgrantham01 commented Jun 20, 2024 • edited Loading

davepagurek commented Jun 20, 2024

dgrantham01 commented Jun 21, 2024

davepagurek commented Jun 21, 2024

dgrantham01 commented Jun 21, 2024

davepagurek commented Jun 21, 2024

dgrantham01 commented Jun 21, 2024

davepagurek commented Jun 21, 2024

dgrantham01 commented Jun 21, 2024

davepagurek commented Jun 22, 2024

davepagurek left a comment

Choose a reason for hiding this comment

davepagurek commented Jun 23, 2024

allcontributors bot commented Jun 23, 2024

davepagurek commented Jun 23, 2024

allcontributors bot commented Jun 23, 2024

diyaayay commented Feb 15, 2024 •

edited

Loading

dgrantham01 commented Jun 20, 2024 •

edited

Loading