Skip to content

5 Tips for Customizing Your Dplug Plugin UI Style

Jump to bottom
p0nce edited this page Dec 7, 2021 · 4 revisions

The Problem

How do you avoid looking like Auburn Sounds, original author of this plug-in framework?

It turns out starting with Dplug v9.1 your plug-in can look however you want them to be.

Tip #0: Custom Knobs

Difficulty: intermediate

Use UIImageKnob to get a PBR textured Knob.

You can find an example of such a knob in examples/distort.

Tip #1: Color correction

Difficulty: easy

Use the UIColorCorrection to get a Raw pass of color correction and have a distinct style.

// Here is a snippet to add color correction to your UI
mat3x4!float A = mat3x4!float(-0.03f, 1.04f, 1.045f, 0.22f,
                               0.00f, 0.99f, 0.98f,  0.175f,
                               0.13f, 1.0f,  0.965f, 0.245f);
UIColorCorrection colorCorrection;
addChild(colorCorrection = mallocNew!UIColorCorrection(context()));
colorCorrection.setLiftGammaGainContrastRGB(C);
colorCorrection.position = box2i.rectangle(0, 0, WIDTH, HEIGHT); // cover the whole UI
colorCorrection.setZOrder(10); // is on top

Tip #2: Tweak PBRCompositor lights

Difficulty: easy

Even when using the default PBRCompositor and dplug:pbr-widgets, you can customize lighting settings, or curves to get a distinctive look.

Example:

void initializeCompositorForMyBrand(PBRCompositor comp, float globalLightFactor = 1.0f) nothrow @nogc
{
    // `globalLightFactor` is useful in the event you realize the 
    // light sources are too weak in energy to make white plastic
    comp.light1Color = vec3f(/* a color */)  * globalLightFactor ;
    comp.light2Dir = vec3f(/* a normal */).normalized;
    comp.light2Color = vec3f(/* a color */) * globalLightFactor ;
    comp.light3Dir = vec3f(/* a normal */).normalized;
    comp.light3Color = vec3f(/* a color */) * globalLightFactor ;
    comp.ambientLight = ambientFactor * globalLightFactor ;
    comp.skyboxAmount = skyboxFactor * globalLightFactor ;
}

Tip #3: Use RGBA flat widgets

Difficulty: medium

dplug:flat-widgets contains a collection of widgets that only live in the Raw layer, and only write to a RGBA buffer.

Widgets that live in Raw are also useful as final graphic passes that operates on 8-bit RGBA. A UIELement can also draw to both PBR and Raw layers, if you want some kind of hybrid.

Tip #4: Making your own compositor

Difficulty: advanced

Since Dplug v9.1 you can make your own compositor.

  • inherit from MultipassCompositor and add passes (inherit from CompositorPass to make new ones) OR implement ICompositor directly
  • override buildCompositor in your main gui object (inheriting GUIGraphics). Return the new custom compositor.

Custom compositors allow you to implement a wide variety of rendering techniques yourself.

The limitation is that you will be stuck with the channel count of dplug:gui and its associated mip-mapping.

  • You can choose a new meaning for every channel
  • You can reuse legacy PBR passes (in legacypbr.d), mix and match them
  • But you can't change mipmapping or the channels the widgets write too

Tip #5: Replace dplug:gui altogether

Difficulty: insane

The most radical solution is not to use dplug:gui at all. If you implement IGraphics, you can do anything you want with eg: other window libraries, OpenGL, etc... No one has done it yet but it should be possible. Is that even wise?

Clone this wiki locally