Description
Increasing Access
This is currently a bit of inconsistency between WebGL mode and 2D mode, where 2D example code can look broken in WebGL mode. Understanding why it happens in order to work around it requires a fairly deep knowledge of how WebGL works and how p5's stroke rendering works A more consistent experience would let newcomers work with 3D more easily.
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 enhancement details
The problem
Currently, in order to make lines visible on top of 3D geometry at all angles, we move lines slightly closer to the camera. This has a few unfortunate side effects:
1. 2D code using the painter's algorithm looks different in WebGL.
Here's some example code which, in 2D, draws a second rectangle overtop of the first. In WebGL, the lines stick through:
| Code | 2D | WebGL |
|---|---|---|
function setup() {
createCanvas(170, 170, WEBGL);
}
function draw() {
background(220);
translate(-width/2, -height/2)
stroke('black')
fill('red')
rect(20, 20, 100, 100)
fill('blue')
rect(50, 50, 100, 100)
} |
|
|
Live: https://editor.p5js.org/davepagurek/sketches/5L3gMnhB1
2. When rotating shapes in 3D, lines "pop" sometimes
In #5802, when testing higher-fidelity strokes, we noticed this effect, although it was also present before this change. Notice how some lines shift widths:
Live: https://editor.p5js.org/davepagurek/sketches/8SSUdaVhi
It seems to be because of this line that puts line vertices slightly above faces. If you keep rotating a face, there's an angle at which that scale value isn't enough to keep the line on top of the face, so it disappears.
Potential solutions
If we use a scale of 1 (no z change) for the line when it's perpendicular to the screen and slowly bring it closer to the camera it gets more perpendicular, it would fix the first problem. However, this would still introduce some issues: e.g. for lines on a cube, when one line is directly perpendicular to the camera, one connecting to it will not be. Increasing the scale on the non-perpendicular line might cause the joint between the lines to appear disconnected. Perhaps there's a similar method that wouldn't disconnect joints?