Improve WebGL beginShape() performance when only drawing triangles

[davepagurek]

Increasing Access

The default shape mode, TESS, can handle more complicated shapes, but can be an unnecessary performance slowdown when only drawing triangles. We can detect this case and speed up performance so sketches hitting this bottleneck run fast again.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature request details

This would involve, when endShape is called, changing the shape mode to TRIANGLES if only 3 vertices were supplied.

[davepagurek]

Alternatively, translating this to triangle() may speed things up further when lines are drawn, since they will be cached in the retained triangle geometry. This particular speedup only works if you use endShape(CLOSE) though.

[Gaurav-1306]

I looked into the issue and i was trying to come up with a solution following you suggestion. do you thing i can work something with this.

/**
 * End shape drawing and render vertices to screen.
 * @chainable
 */
p5.RendererGL.prototype.endShape = function(
  mode,
  isCurve,
  isBezier,
  isQuadratic,
  isContour,
  shapeKind,
  count = 1
) {
  if (this.immediateMode.shapeMode === constants.POINTS) {
    this._drawPoints(
      this.immediateMode.geometry.vertices,
      this.immediateMode.buffers.point
    );
    return this;
  }
  // this is how i am trying to implement it
  // if(vertices = 3 or 1 and 4 vertices are same then (this.immediateMode.shapeMode == traingle))
  this.isProcessingVertices = true;
  this._processVertices(...arguments);
  this.isProcessingVertices = false;

this is like pesudo code.``

[davepagurek]

I think so! The check for duplicate vertices is probably more trouble than it's worth, so I think just checking for three vertices will be sufficient.

[harshsharma-11]

@davepagurek @Gaurav-1306 how to setup the project please help ,where is the documentation

[Gaurav-1306]

@davepagurek @Gaurav-1306 how to setup the project please help ,where is the documentation

this is where you can get stepwise documentation for the setup. don't forget to checkout the documentation folder for more details about the areas.

[harshsharma-11]

@Gaurav-1306 thanks a lot bro

[harshsharma-11]

@Gaurav-1306 is there community channel like slack of processing

[harshsharma-11]

but how i see project in some local host, after npm ci ,command to run it on localhost