渲染复杂 3D 模型 .obj - p5.js 的问题

Question

大家好，我在使用 p5.js WEBGL 模式渲染 3D 模型时遇到问题。

我正在为具有 3D 框的客户开发一个项目，其中一些渲染得很好 - 较小的 .obj 文件具有更简单的几何形状。更大的形状更复杂的形状会因扭曲的几何形状而严重渲染。在其他 3d 浏览器查看器中，大型模型渲染良好。

这是一个小代码示例，它被设置为渲染导致问题的复杂模型：

代码：
https://glitch.com/edit/#!/four-polyester-tent
预习：
https://four-polyester-tent.glitch.me

我不希望更改渲染方法，因为项目快完成了，但如果这是唯一的选择，那么可以。

提前感谢您的帮助！

Answer 1

这是由于 p5.js 的错误/限制，它只能处理少于 65535 个顶点的几何图形。这是因为它使用Uint16Array 来存储顶点索引。

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

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

    // ...
};

当将缓冲区传递给drawTriangles时，它指定了gl.UNSIGNED_SHORT的类型：

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

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

    // ...
}

这很可能是因为 WebGL 1.0 需要扩展 ('OES_element_index_uint') 才能支持 32 位顶点索引。

但是，我能够拼凑出一个潜在的修复方法。这是一个草图，展示了它在您的模型中的作用：

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();
}

<script src="https://www.paulwheeler.us/files/p5-large-model-fix.min.js"></script>

你可以找到我的补丁here的未缩小版本。