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

Posted 2023-03-23

【中文标题】渲染复杂 3D 模型 .obj - p5.js 的问题

【英文标题】：Problem rendering complex 3D models .obj - p5.js

【发布时间】：2021-08-16 20:37:42

【问题描述】：

大家好，我在使用 p5.js WEBGL 模式渲染 3D 模型时遇到问题。 我正在为具有 3D 框的客户开发一个项目，其中一些渲染得很好 - 较小的 .obj 文件具有更简单的几何形状。更大的形状更复杂的形状会因扭曲的几何形状而严重渲染。在其他 3d 浏览器查看器中，大型模型渲染良好。 这是一个小代码示例，它被设置为渲染导致问题的复杂模型： 代码： https://glitch.com/edit/#!/four-polyester-tent 预习： https://four-polyester-tent.glitch.me 我不希望更改渲染方法，因为项目快完成了，但如果这是唯一的选择，那么可以。

提前感谢您的帮助！

【问题讨论】：

我很确定您发现了一个错误，即 p5.js 无法渲染具有 > 65535 个顶点的模型。我正在调查修复。

保罗的回答太棒了！ （+1）。该模型非常重（几乎 20MB），对于数据计划的人来说很有趣。一旦我提出的建议是简化模型，作为一种 hacky 解决方法。大多数 3D 编辑器都可以简化网格，例如 Blender（免费/开源）有一个 Decimate 修饰符

【参考方案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的未缩小版本。

【讨论】：

提交的问题和公关：github.com/processing/p5.js/pull/5271