P5.js: model() not displaying .obj files

[k808a]

Been trying to re-create the use of model() and loadModel() from the P5.js examples page ( https://p5js.org/reference/#/p5/model ) without success.

All I get is the gray canvas, without the spinning teapot. Results are the same with the P5 editor app and on my Apache server. (The editor app doesn't display any errors when I run the code, BTW.)

The code I'm using (straight copy-paste from the examples page) is this:

`
//draw a spinning teapot
var teapot;

function setup(){
createCanvas(100, 100, WEBGL);

teapot = loadModel('assets/teapot.obj');
}

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

I'm running p5.js v0.5.0 May 02, 2016 (which does seem to have code for loadModel() and model() implemented) with a 264KB teapot.obj file I found from the web. (The .obj file shows up properly in Photoshop, so I'm fairly confident it's OK. I also tried other .obj files, same result.)

I have tried moving teapot.obj out of the assets folder to the same level as sketch.js, also no luck.

Any insights?

[indefinit]

Do you have a link to teapot.obj by any chance? If you aren't seeing errors, then the only thing off the top of my head is that maybe the model scale is very small? Also, which 3D program did you use to generate teapot.obj?

[indefinit]

Sorry, just read again and saw you said the teapot was found on the web. If you have a Dropbox or other link to the file I can take a look

[k808a]

Here's a direct link: [http://www.subdude-site.com/WebPages_Local/RefInfo/Computer/Linux/LinuxGuidesByBlaze/apps3Dtools/3D_viewers-converters/3Dtestfiles/obj/teapot.obj]
I found it on this page, which was created in 2011: http://www.subdude-site.com/WebPages_Local/RefInfo/Computer/Linux/LinuxGuidesByBlaze/apps3Dtools/3D_viewers-converters/3Dtestfiles/3D_testfiles_withTOC.htm
I tried three other files from other sources as well; like teapot.obj, they all displayed fine in Photoshop, but not when I ran the example code in my P5 editor or on the server.
Unfortunately I haven't been able to find the original used on p5js.org

[lmccart]

here's the one from the reference examples:
http://p5js.org/reference/assets/teapot.obj

[lmccart]

I also had some problems finding an OBJ to load when I originally posted the updates, and had to try a few I found online before I got one to work. I chalked this up to my utter lack of knowledge about 3D models, but maybe it would be helpful to post some guidelines in the ref or link to some?

[k808a]

Thanks for the link, that teapot loads just fine! Next is to try to figure out why the other ones wouldn't work. I heard somewhere the .obj format is intended to be human-readable, but it sure doesn't make for light reading. :) Hoping to get to a point where I can tell a Maya artist to just export work in .obj and I can display it on the web, with interactive viewing controls. (Obviously there will be some sort of practical upper limit on vertices, but still seems useful.)

[indefinit]

Ok awesome! Will do some digging.

[k808a]

Possibly useful for resolving this: I found a Florida State University site ( http://people.sc.fsu.edu/~jburkardt/data/obj/obj.html ) that also hosts the working teapot file, and it has some other ones that work, too. The default scales seem to be radically different of the ones that do work: trumpet.obj, which has one of the highest node counts, shows up quite well, but sandal.obj is quite tiny. Not sure why.

[indefinit]

I ran your code and the offending obj file and it looks like the problem is indeed scaling. If you add a line before model(teapot) like:

scale(20);
model(teapot);

You should see the teapot now. Please let me know if for some reason you aren't.

Regarding the widely differing models, perhaps we can add a note somewhere in the documentation to look out for model scale. It seemed like the model scale of your teapot was not only in centimeters, but also very small centimeters. Unfortunately, objs don't have a measurement scale marker. Numbers are simply floating point, so we can't add a flag in p5 to convert between cm, mm, inches, feet, etc.

That said, Three.js has a clever way of normalizing various model sizes using software-specific exporter scripts: https://github.com/mrdoob/three.js/tree/master/utils
It sounds like maybe a better long term solution to help users work with consistent models is to adopt the THREE.js approach, or someone could develop a web app utility to check and normalize models for p5.

[indefinit]

• @mindofmatthew so you can weigh in here as well.

[lmccart]

aha yeah I think a note about scale would go a long way. when the first few I tried didn't show up I didn't know where to start -- if it was a problem with the model file, the p5 code, the scale, etc.

we might also want to provide a direct link to the reference OBJ on that page, so if people wanted to try that example code before modifying it to use their own models, they could at least get that running first and know that the code was right.

[mindofmatthew]

What about an optional second parameter to loadModel that allows you to load a model scaled to a specified size? This would be pretty easy to implement, and it would provide a really easy way for people to ensure that the models they import are all normalized.

[indefinit]

That's a pretty cool idea! perhaps a boolean normalize which would remap vertices between -100,100 ?

[k808a]

You should see the teapot now. Please let me know if for some reason you aren't.

Beautiful! Thanks much! Hadn't thought of applying scale() that way.

[lmccart]

addressed with https://github.com/processing/p5.js/pull/1418

[nkolban]

Can we re-open this issue? I am also trying to display the teapot and have tried a variety of files including the reference: http://p5js.org/reference/assets/teapot.obj

When I run, my Chrome browser shows nothing but the grey square box. I am running latest version of the browser. I have tried scaling and a variety of permutations but to no-avail.

[indefinit]

Hi nkolban, could you please post your code as well as the error message you're seeing from Chrome? Also, just to confirm, you are using a local host server, right?

[nkolban]

Howdy, here is the code I am using:

//draw a spinning teapot
var teapot;

function setup(){
  createCanvas(100, 100, WEBGL);
  teapot = loadModel('assets/teapot.obj');
}

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

There are no error messages at all in the Chrome console. When I run the sketch, the only thing logged to the browser console is:

p5.Renderer3D: enabled webgl context

The canvas square shows up, but no spinning object.

If needed, I will be delighted to demonstrate in real-time via Skype or open up my machine for your analysis. My skype id is "neil.kolban".

Oh ... and as for loading the HTML and the JavaScript, I am sourcing from the file system by running the latest Chrome with the flags --allow-file-access-from-files.

[chiunhau]

Hi @nkolban I run your code with latest 0.5.0 p5js and it works. but I just notice my console logged p5.RendererGL: enabled webgl context not your p5.Renderer3D: enabled webgl context. In 57c69de they'd renamed 3D to GL, and that's 28 days ago, which means you might be using a older version and miss some bug fixes.

I'm not sure but worth a try. Clone and build the latest p5js 😄

[indefinit]

Another thing I'd try is to make your canvas larger than 100,100. We recently added the ability to scale your model inside a callback function, which might help as well.

[nkolban]

Howdy guys,
I checked the version of p5.js being used and the 1st line reads:

/*! p5.js v0.5.0 May 02, 2016 */

I think this is the latest distributed build around. If what I need are fixed in the repository but not yet distributed in a build, then I'll wait for a build refresh.

I tried a 1000,1000 canvas ... the canvas showed at the correct size but no sign of an object. I also added a "scale(20)" ... but still not sign of any objects. If it would be useful, I'd be delighted to screen share live as needed.

[indefinit]

Hi @nkolban, I can confirm after downloading a fresh copy of the 0.5.0 release that loadModel is not actually included in there. What's unusual is that you should be seeing an error message saying "loadModel is not defined", which is what I see when I run your code with 0.5.0 taken directly from the github release.

If you pull the latest commit from the master branch, you shouldn't have any problems running your code. I'll reopen this issue for now, until we build a new release tag including proper loadModel functionality. Thanks for letting us know.

pinging @lmccart

[nkolban]

I am new to p5.js and what I did was download "p5.js" complete from this location.

http://p5js.org/download/

After extraction, I found that there was a sample called "empty-example". That contains a subfolder called "libraries" that appears to have its own copy of "p5". When I edited the "sketch.js" in the folder and added the 3D sample, I did indeed get the "loadModel" not found. I figured that the copy of p5 contained in the libraries folder in the sample was out of date, so replaced it with the copy of "p5" found in the root of the extraction of the download. That satisfied the "loadModel".

I figured that the download contained TWO p5 versions ... not in synch with each other ... and that the sample had been missed.

[lmccart]

sorry, I've been away the past week or so. I'm going to publish a new release now and make sure the version is updated in the libraries folder as well. please let me know if things don't seem fixed after this!

[nkolban]

I downloaded and installed the 6/10 release but unfortunately it doesn't seem to have made any difference to my "loadModel" issue. My browser console log displays:

p5.RendererGL: enabled webgl context

and I see my "grey square" for the canvas, but no spinning teapot. If there are any other tests or information I can provide, please don't hesitate to let me know how I can assist.

[indefinit]

hi @nkolban, just checking in to see whether you're still having this issue. It should be corrected with version 0.5.1 per @lmccart

[nkolban]

Howdy ... thanks for checking in ... I have validated that I have 0.5.1 installed ... and, unfortunately, the call to model() is not showing my loaded 3D object (teapot). Same symptoms and setup as before. I am 100% available to provide a skype screen sharing session (as desired) at "neil.kolban" (US Central Time Zone). If there are any traces or logs or other tests I can run for y'all, I'll be delighted to do so. I am assuming that the sample programs are working "fine" on y'all system ... so it is likely my combination of environment:

• Windows 10
• nVidia graphics card
• Dual monitors
• Native resolutions of 2560x1200
• ... something else ...

Neil

[nkolban]

I have a new clue in the problem ... I tried running Firefox (47.0) and it works!!

The identical sketch is not working in Chrome (51.0.2704.103 m).

[indefinit]

Hi @nkolban, I haven't forgotten about this thread! Since Chrome is on version 52+ now, and I can't seem to replicate the issue on this browser, I'm going to close the issue. Please feel free to reopen if you want to continue the conversation. Thanks!

[nkolban]

Not a problem. I found an alternative in three.js and that has worked out very well for me and works across the spectrum. Many thanks for taking a look.

[IggyZuk]

I seem to be experiencing exactly the same issues as @nkolban, the code runs fine on FireFox, but not on Chrome. My setup is almost identical. Any fix for this?

[LegotronForce]

Capitalize the A in Assets