Skip to content

[p5.js 2.0+ Bug Report]: getFinalColor applies alpha inconsistently in line shader #8786

@davepagurek

Description

@davepagurek

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • WebGPU
  • p5.strands
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

p5.js version

2.2.3

Web browser and version

All

Operating system

All

Steps to reproduce this

In the line shader, the input to getFinalColor is already premultiplied, and the output is also assumed to be:

OUT_COLOR = HOOK_getFinalColor(vec4(inputs.color.rgb, 1.) * inputs.color.a, vec2(0.0, 0.0));

In the material shader, both the input and output are assumed to be unmultiplied, and it premultiplies the alpha for you:

OUT_COLOR = HOOK_getFinalColor(HOOK_combineColors(c), vTexCoord);
OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering

In WebGPU, both lines and materials work with unmultiplied alpha and do the multiplication after:

var col = HOOK_getFinalColor(inputs.color, vec2<f32>(0.0, 0.0));
col = vec4<f32>(col.rgb, 1.0) * col.a;

var outColor = HOOK_getFinalColor(
HOOK_combineColors(components), input.vTexCoord
);
outColor = vec4<f32>(outColor.rgb * outColor.a, outColor.a);

These should be consistent so that users of p5.strands never have to think about premultiplied alpha.

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

Status

Completed

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions