-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Edges offseted in webgl ortho #6956
Comments
Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you! |
The way we make lines go on top of fills on angled surfaces is by scaling down their coordinates based on their angle here: p5.js/src/webgl/shaders/line.vert Lines 82 to 89 in bcf9134
p5.js/src/webgl/shaders/line.vert Lines 91 to 94 in bcf9134
The idea (described more in #2938 (comment)) is that when it's perpendicular to the camera, we don't need to move it forward at all, but we want to move it forward a little bit if it's on an angle that points it into the camera a bit. I think the thing that has changed from before is that the camera is now 800 away from the subject by default, where previously things were closer. So scaling coordinates by 0.995 has a bigger impact than before. So, if anyone wants to tackle this, some things to try:
|
Changing the scaling factor to 0.9985 seems to eliminate this problem, without causing any issues on the more complicated graphic from #2938 shape.rotation.movSubtracting a constant of 1.0 from the z value also works, and with fewer 'jumping' artifacts: shape.rotation.2.mov |
Awesome, thanks for experimenting with this! Maybe we should be going with the constant offset then. Maybe the last test we should run is just drawing some rectangles on top of each other at the same depth (basically a 2d sketch but in WebGL) to make sure the latest drawn rectangle goes on top without earlier strokes poking through. If that still works, feel free to open a PR with this! |
Good call - I tested 2 squares and found that the biggest I could offset before the stroke clipped through was ~0.00045, which isn't enough to fix the stroke jumping issue with more complex objects like the sphere above - though it does fix the edge clipping with the 3d cubes. Perhaps there's something we could do to more explicitly handle rendering 2d shapes when using webGL? Like setting a z-offset to shift shapes that should be on top forward a bit, to create a little more room for the stroke z-offset? |
This is a tough one because you could change the camera angle and see through the gap between them. When you were doing the offset, was that still using a |
Using float zOffset = mix(-0.00045, -1., facingCamera) solves the square overlaps but reintroduces some of the jumping effects in 3d. I think it's a good compromise. Maybe in the future we could conditionally apply the stroke z-offset only to 3d objects |
that sounds good for now, thanks for your help! |
Closed by #7064 |
Most appropriate sub-area of p5.js?
p5.js version
1.91
Web browser and version
123.0.6312.106
Operating system
Windows
Steps to reproduce this
When creating geometry in webgl canvas in ortho() edges get offseted from the fill geometry
link to p5 editor sketch
simpified code:
The text was updated successfully, but these errors were encountered: