Problem rendering complex 3D models .obj - p5.js

Question

Hi everyone i have a problem with rendering 3D models using p5.js WEBGL mode.

I am working on a project for a client with 3D boxes, some of them render fine - the smaller .obj files with simpler geometry. The bigger with more complex shapes render badly with distorted geometry. In other 3d browser viewers the big models render fine.

Here is a small sample of the code, it is set to render the complex model that causes the problem:

code:
https://glitch.com/edit/#!/four-polyester-tent
preview:
https://four-polyester-tent.glitch.me

I would prefer not to change the render method, as the project is almost finished, but if this is the only option then ok.

Thanks for any help in advance !

user_229247 · Answer

This is due to a bug/limitation of p5.js that it can only handle geometry with fewer than 65535 vertices. This is because it uses a Uint16Array to store vertex indices.

p5.RendererGL.prototype.createBuffers = function(gId, model) {  
    // ...

    this._bindBuffer(indexBuffer, gl.ELEMENT_ARRAY_BUFFER, vals, Uint16Array);

    // ...
};

And when passing the buffer to drawTriangles it specified the type gl.UNSIGNED_SHORT:

p5.RendererGL.prototype._drawElements = function(drawMode, gId) {
    // ...

    gl.drawElements(gl.TRIANGLES, buffers.vertexCount, gl.UNSIGNED_SHORT, 0);

    // ...
}

This is most likely due to the fact that WebGL 1.0 requires an extension ('OES_element_index_uint') in order to support 32 bit vertex indices.

However I was able to throw together a potential fix. Here is a sketch demonstrating it in action with your model:

let mdl;
let cnv;

function preload() {
  mdl = loadModel("https://art-open.pl/3D/Z-5.obj", true);
}

function setup() {
  cnv = createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke();
}

function draw() {
  background(237);
  orbitControl(2, 2, 0.01);

  let locX = 0;
  let locY = 200;
  ambientLight(120, 120, 120);
  pointLight(255, 255, 255, locX, locY, 200);
  pointLight(255, 255, 255, locX, locY, -200);

  // normalMaterial();
  push();
  translate(0, 70, 0);
  scale(6, -6, 6);
  model(mdl);
  pop();
}

You can find the un-minified version of my patch here.

Problem rendering complex 3D models .obj - p5.js

1 Answers