Skip to content
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

fill() bug in p5.Geometry -> strange alpha behaviour #6539

Closed
2 of 17 tasks
acamposuribe opened this issue Nov 8, 2023 · 1 comment · Fixed by #6541
Closed
2 of 17 tasks

fill() bug in p5.Geometry -> strange alpha behaviour #6539

acamposuribe opened this issue Nov 8, 2023 · 1 comment · Fixed by #6541

Comments

@acamposuribe
Copy link
Contributor

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)

p5.js version

1.8

Web browser and version

No response

Operating System

No response

Steps to reproduce this

There is a strange behaviour with fill() calls within the buildGeometry() function or between beginGeometry() and endGeometry(). I've found two problems:

  1. Alpha/opacity bug: when trying to fill with translucent colors, the background is white rather than transparent. For alpha = 0, the shapes fill with white [1,1,1,1] rather than transparent background
  2. Bugged fill() behaviour: if you call fill() only once, the fill color is ignored

I've created this sketch to show both problems:

Snippet:

Sample in p5 online editor

@acamposuribe
Copy link
Contributor Author

acamposuribe commented Nov 8, 2023

@davepagurek identified the problem.
It's here:

p5.RendererGL.prototype._applyColorBlend = function(colors) {

This is turning off blending because it's checking the current fill color and not the model.

An easy fix is to add this check:

p5.RendererGL.prototype._applyColorBlend = function(colors) {
  const gl = this.GL;

  const isTexture = this.drawMode === constants.TEXTURE;
  const doBlend =
    this.userFillShader ||
    this.userStrokeShader ||
    this.userPointShader ||
    isTexture ||
    this.curBlendMode !== constants.BLEND ||
    colors[colors.length - 1] < 1.0 ||
    this._isErasing ||
    this._useVertexColor;  // NEW CHECK HERE

etc.

As @davepagurek explains, this works:

"although there's a question of whether it's slower to always apply blending to anything that has per vertex colors, or whether we should check if any of those colors is semitransparent (and maybe cache that so we only check once?)
I don't actually know how much of a difference that makes for a complex shape though
could be that it's totally fine
I guess we do it already for if there's a texture set, right?"

A better solution might be possible, hence I keep this bug open.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: DONE! 🎉
Development

Successfully merging a pull request may close this issue.

1 participant