Match line drawing orientation to primitive face

[inaridarkfox4231]

Line drawing in p5.js is done by creating a rectangle with both vertices offset slightly in the direction perpendicular to the line.
In doing so, the orientation of the triangles that make it up is the opposite of the orientation of the faces of primitives (sphere, box, and so on).
This orientation can be matched by reversing the direction of the normals used to shift the vertices in the shader.

Resolves #5877

Changes:

here: src/webgl/shaders/line.vert
Reverses the direction of vertices that are displaced when drawing lines.
This ensures that culling the FRONT to draw only the front face does not cause the lines to disappear.

Screenshots of the change:

sampleCode
left: before, right: after

let gl;

function setup(){
  createCanvas(400, 400, WEBGL);
  
  gl = this._renderer.GL;
  gl.enable(gl.CULL_FACE);
  gl.cullFace(gl.FRONT);
  
  background(128);
  fill(255, 128, 0);
  stroke(255);
  strokeWeight(3);
  directionalLight(255, 255, 255, 0, 0, -1);
  ambientLight(128);
  rotateX(TAU/8);
  rotateY(TAU/12);

  box(120);
}

PR Checklist

• WebGL

[davepagurek]

Nice work!

[inaridarkfox4231]

thanks very much!('ω')