p5.js
p5.js copied to clipboard
Long time spent in `_edgesToVertices` when assembling shapes into composite models
Most appropriate sub-area of p5.js?
- [ ] Accessibility
- [ ] Color
- [X] Core/Environment/Rendering
- [ ] Data
- [ ] DOM
- [ ] Events
- [ ] Image
- [ ] IO
- [ ] Math
- [ ] Typography
- [ ] Utilities
- [x] WebGL
- [ ] Build process
- [ ] Unit testing
- [ ] Internationalization
- [ ] Friendly errors
- [ ] Other (specify if possible)
p5.js version
v1.10.0
Web browser and version
Firefox 128.0.3, Chrome 128.0.6613.84
Operating system
Any
Steps to reproduce this
I am assembling my "world" into geometry, updating it whenever the world changes. Since updates are very rare, this should give me a nice boost in performance. I noticed that whenever the world does change, and I have to refresh the prebuilt geometry, a lot of time is spent in _edgesToVertices (up to 88% when first drawing the new geometry). While it does make sense to me that high-fidelity strokes cost performance and need this step, I do not see why it needs to go through this step in the first place, given that I assemble my geometry from primitives that already should have, or should have cached, their strokes.
EDIT: The above is compounded by the fact that this step is apparently done even when I explicitly render the model with noStroke() (during [begin|end]Geometry and when rendering with model(..)) meaning I can not find a way to work around this post processing step.
Steps:
Snippet:
const TSZ = 50; // Tilesize
const BLH = 30; // Block height
const FLH = 10; // Floor height
this.hasFloor: boolean[] = [....];
// I do the following every time hasFloor changes
p5.beginGeometry();
for (let x = 0; x < this.length; x++) {
for (let y = 0; y < this.width; y++) {
if (!this.hasFloor[x * this.width + y])
continue;
p5.push();
p5.translate(x * TSZ, y * TSZ, (-BLH - FLH) * 0.5);
p5.box(TSZ, TSZ, FLH);
p5.pop();
}
}
const floorModel = p5.endGeometry();
// ...I do the following every draw call
p5.model(floorModel);