Stroke odd behaviour for small shapes but up-close camera

[JetStarBlues]

Most appropriate sub-area of p5.js?

• WebGL

Details about the bug:

• p5.js version: 1.3.1 (though I think this bug is not specific to this version)
• Web browser and version: Chrome, Firefox
• Operating System: Windows 10, Ubuntu 20.04
• Steps to reproduce this:
  • Visible on the:
    • camera() reference page (first example with a plane (white fill, black stroke))
      • 
    • frustum() reference page (example with two cubes(no fill, blue stroke))
      • 

It seems by default, the stroke shader draws "small" objects with a thick background. I think this is to help with visibility. For example:

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(204);
  plane(10, 10);
}

generates,

When the object is larger, the stroke gets thinner.

plane(40, 40);

generates,

plane(80, 80);

generates,

However, this thinning of the stroke does not happen when instead of the object getting bigger, the camera moves closer to the object.

The default camera position is calculated as (0, 0, (height / 2) / tan(PI / 6)). For a canvas with height 100, this is ~(0, 0, 87).

let cam;

function setup() {
  createCanvas(100, 100, WEBGL);
  cam = createCamera();
}

function draw() {
  background(204);
  cam.camera(
    0, 0, 87,
    0, 0, 0,
    0, 1, 0
  );
  plane(10, 10);
}

generates,

As we move the camera closer, though the object gets bigger, the stroke does not get thinner.

cam.camera(
  0, 0, 25,
  ...

generates,

cam.camera(
  0, 0, 12,
  ...

generates,

Expected behaviour: stroke should get thinner as camera moves closer

[stalgiag]

Hi @JetStarBlues thanks for the well-written issue. This may just be my perspective (smh) but I wouldn't expect the stroke to get smaller in the second set of examples. The reason the stroke appears to be getting smaller is that its relative size is shifting. 1px stroke is 1/10th of plane(10, 10) and 1/80th plane(80, 80). In the first set of examples, the plane is growing bigger and the camera is not moving so the stroke never grows. It just appears to shrink due to relative perception. In the second set of examples, the camera is moving closer to the stroke so it grows but it never changes in proportion to the plane.

This is all to say that unless I am missing something the behavior is expected. The stroke grows when the camera gets closer to it and does not change otherwise.

Let me know if this makes sense.

[JetStarBlues]

The reason the stroke appears to be getting smaller is that its relative size is shifting

Ah, I see! That makes a lot of sense! Thanks for taking the time to explain this.

I'm tempted to change the code used in the frustum() example (use bigger boxes, and a camera that's further away - or use filled boxes (normalMaterial)). Currently it is hard to tell what the example is trying to demonstrate. (I imagine the visual effect is supposed to be similar in spirit to the persepective() and ortho() examples).