Custom widget light bloom?

clone45 · November 8, 2021, 2:26am

Hello! When drawing custom widgets using nvgRect, nvgFillColor, etc, is it up to the developer to draw the light bloom, or is that done automatically somehow? Thanks!

unlessgames · November 8, 2021, 6:20am

Up to you as it is only being rendered for LightWidgets by the drawHalo function which simply draws a gradient with transparency, so it isn’t a post processing effect that works in screenspace like bloom in games and such (this would be neat though).

github.com

VCVRack/Rack/blob/219bbaf137d5dc70c96bd4206c3f8aad5524a81b/src/app/LightWidget.cpp#L63

    
      
          		float radius = std::min(box.size.x, box.size.y) / 2.0;
          		nvgBeginPath(args.vg);
          		nvgCircle(args.vg, radius, radius, radius);
          
          
		nvgFillColor(args.vg, color);
          		nvgFill(args.vg);
          	}
          }
          
          

          
void LightWidget::drawHalo(const DrawArgs& args) {
          	// Don't draw halo if rendering in a framebuffer, e.g. screenshots or Module Browser
          	if (args.fb)
          		return;
          
          
	const float halo = settings::haloBrightness;
          	if (halo == 0.f)
          		return;
          
          
	// If light is off, rendering the halo gives no effect.
          	if (color.r == 0.f && color.g == 0.f && color.b == 0.f)

xandra-max · November 8, 2021, 12:54pm

LightWidget::drawHalo works well for light sources that are solid circles, but it needs to be adapted for other shapes.

For anyone interested in some examples, on my v2 branch I’ve implemented halos on ring lights, line lights, and my display backlight. The latter two are rounded rectangles (box gradients) while the ring lights are composed of two radial gradients: an outer one and an inverse inner gradient.

Once I had ring halos and line halos, I got knob-light halos for free.

Something to be aware of with box gradients in nanovg is that the specified boundary corresponds to the center of the gradient, not its outer edge.

xandra-max · November 23, 2021, 6:37pm

There’s an issue in nanovg related to antialiasing, and it manifests in Rack if a path with a hole is drawn on layer 1.

I’m currently working around this by adding the following line to my ring halo draw functions: nvgShapeAntiAliasing(args.vg, false);

zero-height fill causes 1-pixel-width leak of overlapping strokes

opened 09:38AM - 09 Oct 20 UTC

jiandingzhe

The following drawing contains two overlapping strokes and one fill between them…. Specifically, the fill contains a zero-height part where corresponding stroke is purely horizontal. As a result, there will have one-pixel-width leakage of previous stroke (green) on the latter one (red). In addition: - If you remove the fill, there wont have leakage. - If you extend the zero-height fill to (0,0) and (175,0), the pure-horizontal stroke on that position would also have leakage. nvgTranslate( nvg, float( w / 2 ), float( h / 2 ) ); nvgStrokeWidth( nvg, 4.0f ); // 1: stroke nvgBeginPath( nvg ); nvgMoveTo( nvg, 0, 0 ); nvgLineTo( nvg, 25, 0 ); nvgLineTo( nvg, 50, -50 ); nvgLineTo( nvg, 75, 0 ); nvgLineTo( nvg, 100, 0 ); nvgLineTo( nvg, 125, -50 ); nvgLineTo( nvg, 150, 0 ); nvgLineTo( nvg, 175, 0 ); nvgStrokeColor( nvg, nvgRGBA( 0, 255, 0, 255 ) ); nvgStroke( nvg ); // 2: fill nvgBeginPath( nvg ); nvgMoveTo( nvg, 25, 0 ); nvgLineTo( nvg, 50, -50 ); nvgLineTo( nvg, 75, 0 ); nvgLineTo( nvg, 100, 0 ); nvgLineTo( nvg, 125, -50 ); nvgLineTo( nvg, 150, 0 ); nvgFillColor( nvg, nvgRGBA( 0, 0, 255, 255 ) ); nvgFill( nvg ); // 3: stroke nvgBeginPath( nvg ); nvgMoveTo( nvg, 0, 0 ); nvgLineTo( nvg, 25, 0 ); nvgLineTo( nvg, 50, -50 ); nvgLineTo( nvg, 75, 0 ); nvgLineTo( nvg, 100, 0 ); nvgLineTo( nvg, 125, -50 ); nvgLineTo( nvg, 150, 0 ); nvgLineTo( nvg, 175, 0 ); nvgStrokeColor( nvg, nvgRGBA( 255, 0, 0, 255 ) ); nvgStroke( nvg );