added createModel() to enable loading stl/obj files from a plaintext string within editor #6936

mathewpan2 · 2024-04-03T01:23:34Z

Resolves #6891

Changes

Added a method called createModel() within src/webgl/loading.js that allows users to call for loading a obj or stl file from a plain text string within the editor. It includes the same options as the loadModel() function, as well as using p5._validateParameters('loadModel', arguments); to check for arguments (I wasn't sure it warranted adding a separate check for 'createModel' since they share the same arguments).

Wanted to make sure this implementation was acceptable before adding unit tests.

Screenshots of the change

const octahedron_model = `
v 0.000000E 00 0.000000E 00 40.0000
v 22.5000 22.5000 0.000000E 00
v 22.5000 -22.5000 0.000000E 00
v -22.5000 -22.5000 0.000000E 00
v -22.5000 22.5000 0.000000E 00
v 0.000000E 00 0.000000E 00 -40.0000

f     1 2 3
f     1 3 4
f     1 4 5
f     1 5 2
f     6 5 4
f     6 4 3
f     6 3 2
f     6 2 1
f     6 1 5
`

//draw a spinning octahedron
let octahedron;

function preload() {
  octahedron = createModel(octahedron_model, {type: 'obj'});
}

function setup() {
  createCanvas(100, 100, WEBGL);
  describe('Vertically rotating 3-d octahedron.');
}

function draw() {
  background(200);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  model(octahedron);
}

Given the sampe code above, this successfully generates a rotating 3D model from the string:

PR Checklist

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

…string

welcome · 2024-04-03T01:23:36Z

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already. And be sure to add yourself to the list of contributors on the readme page!

davepagurek

Thanks for taking this on, it's looking good so far!

davepagurek · 2024-04-22T16:58:29Z

src/webgl/loading.js

+ }
+ }
+ const model = new p5.Geometry();
+ model.gid = `octa.obj|${normalize}`;


I think this might lead to conflicting IDs if you make more than one. Can we maybe make a global counter that increments each time this is called so that every object gets a unique gid?

Yeah definitely something I missed, took your suggestion and added the global counter. Set up the gid as model.gid = `${fileType}|${normalize}|${modelCounter }`;, let me know if you think this is clear enough.

davepagurek · 2024-04-22T16:59:54Z

src/webgl/loading.js

+ model.normalize();
+ }
+
+ if (flipU) {


It looks like these steps get called regardless of the type of the model. Maybe we can make the if statement by inside the try so that we can call flipU(), flipV(), and the success callback in one spot instead of duplicating the code?

I was trying to follow the convention of loadModel(), where they also call those statements twice, but I agree that it's cleaner if it's only called once at the end.

davepagurek · 2024-04-22T17:01:21Z

src/webgl/loading.js

+ * rendered without color properties.
+ *
+ * Options can include:
+ * - `path`: Specifies the plain text string of either an stl or obj file to be loaded.


Rather than specifying a path, maybe we can make the fileType mandatory and place it after the source string for all the different overloads for this method?

I added the filetype to the argument and fixed some of the overloads, let me know if you like it more now.

…-loading-from-string

davepagurek · 2024-05-21T00:42:24Z

Hey, sorry for the delay! Finally getting back to this. It looks like the tests are currently failing:

davepagurek · 2024-05-21T00:43:26Z

src/webgl/loading.js

+/**
+ * Load a 3d model from an OBJ or STL string.
+ *
+ * <a href="#/p5/loadModel">createModel()</a> should be placed inside of <a href="#/p5/preload">preload()</a>.


We can probably take this sentence out since I think we don't do any preloading in this method?

Garima3110 · 2024-08-05T14:55:22Z

src/webgl/loading.js

+ }
+ return;
+ }
+ } else if (fileType.match('obj')) {


I think the parameter to match function should be passed this way as is done here :

p5.js/src/webgl/loading.js

Line 449 in 0fd5a09

} else if (fileType.match(/\.obj$/i)) {

p5.js/src/webgl/loading.js

Line 422 in 0fd5a09

if (fileType.match(/\.stl$/i)) {

Try this out and let me know if it does not work.!

Garima3110 · 2024-08-05T17:12:31Z

src/webgl/loading.js

+ * @return {p5.Geometry} the <a href="#/p5.Geometry">p5.Geometry</a> object
+ */
+let modelCounter = 0;
+p5.prototype.createModel = function(modelString, fileType, options) {


Here, try initializing fileType like this:

p5.prototype.createModel = function(modelString, fileType=' ', options) {

This probably should eliminate the error you're encountering which suggested that the fileType is undefined when match() is called on it.

Garima3110 · 2024-08-06T17:00:52Z

Hii @mathewpan2 , I noticed this PR has been open for a while without any activity. If you're unable to continue working on it, I'd be happy to take over and implement the suggested changes to help solve the issue. Please let me know if that works for you.

davepagurek · 2024-08-20T23:23:52Z

I'm going to close this as @Garima3110 finished it up in another PR. Thanks for your work getting this feature in!

davepagurek · 2024-08-20T23:24:05Z

@all-contributors please add @mathewpan2 for code

allcontributors · 2024-08-20T23:24:14Z

@davepagurek

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

added createModel() to enable loading stl/obj files from a plaintext …

e036ea0

…string

Qianqianye requested a review from davepagurek April 3, 2024 02:41

davepagurek reviewed Apr 22, 2024

View reviewed changes

mathewpan2 added 2 commits April 24, 2024 13:08

added fixes

20e6efe

Merge branch 'main' of https://github.com/processing/p5.js into model…

8c8a628

…-loading-from-string

davepagurek reviewed May 21, 2024

View reviewed changes

Garima3110 reviewed Aug 5, 2024

View reviewed changes

Garima3110 mentioned this pull request Aug 9, 2024

Solves issue #6891 #7165

Merged

3 tasks

davepagurek closed this Aug 20, 2024

allcontributors bot mentioned this pull request Aug 20, 2024

docs: add mathewpan2 as a contributor for code #7189

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

added createModel() to enable loading stl/obj files from a plaintext string within editor #6936

added createModel() to enable loading stl/obj files from a plaintext string within editor #6936

mathewpan2 commented Apr 3, 2024

welcome bot commented Apr 3, 2024

davepagurek left a comment

davepagurek Apr 22, 2024

mathewpan2 Apr 24, 2024

davepagurek Apr 22, 2024

mathewpan2 Apr 24, 2024

davepagurek Apr 22, 2024

mathewpan2 Apr 24, 2024

davepagurek commented May 21, 2024

davepagurek May 21, 2024

Garima3110 Aug 5, 2024

Garima3110 Aug 5, 2024

Garima3110 commented Aug 6, 2024

davepagurek commented Aug 20, 2024

davepagurek commented Aug 20, 2024

allcontributors bot commented Aug 20, 2024

added createModel() to enable loading stl/obj files from a plaintext string within editor #6936

added createModel() to enable loading stl/obj files from a plaintext string within editor #6936

Conversation

mathewpan2 commented Apr 3, 2024

Changes

Screenshots of the change

PR Checklist

welcome bot commented Apr 3, 2024

davepagurek left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davepagurek commented May 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Garima3110 commented Aug 6, 2024

davepagurek commented Aug 20, 2024

davepagurek commented Aug 20, 2024

allcontributors bot commented Aug 20, 2024