UI: Theme options for checkerboard pattern colors and size

This patch adds ability to set up colors and size of background
(transparency) checkerboard pattern in viewport and 2d editors. No new
backgrounds, only changing colors in existing ones.

This is not the background of the viewport, it is a transparency
checkerboard that is turned on only in render mode, when the
transparency mode is on. And also in 2D-editors, (image, sequencer,
etc).

Reviewed By: Pablo Vazquez, Julian Eisel

Differential Revision: https://developer.blender.org/D6791

release/datafiles/userdef/userdef_default_theme.c

@@ -240,6 +240,9 @@ const bTheme U_theme_default = {
     .editor_outline = RGBA(0x1f1f1fff),
     .icon_alpha = 1.0f,
     .icon_saturation = 0.5f,
+    .transparent_checker_primary = RGBA(0x333333ff),
+    .transparent_checker_secondary = RGBA(0x262626ff),
+    .transparent_checker_size = 8,
     .widget_text_cursor = RGBA(0x3399e6ff),
     .xaxis = RGBA(0xff3352ff),
     .yaxis = RGBA(0x8bdc00ff),

release/scripts/startup/bl_ui/space_userpref.py

@@ -897,6 +897,23 @@ class USERPREF_PT_theme_interface_styles(ThemePanel, CenterAlignMixIn, Panel):
         flow.prop(ui, "widget_emboss")
 
 
+class USERPREF_PT_theme_interface_transparent_checker(ThemePanel, CenterAlignMixIn, Panel):
+    bl_label = "Transparent Checkerboard"
+    bl_options = {'DEFAULT_CLOSED'}
+    bl_parent_id = "USERPREF_PT_theme_user_interface"
+
+    def draw_centered(self, context, layout):
+        theme = context.preferences.themes[0]
+        ui = theme.user_interface
+
+        flow = layout.grid_flow(
+            row_major=False, columns=0, even_columns=True, even_rows=False, align=False)
+
+        flow.prop(ui, "transparent_checker_primary")
+        flow.prop(ui, "transparent_checker_secondary")
+        flow.prop(ui, "transparent_checker_size")
+
+
 class USERPREF_PT_theme_interface_gizmos(ThemePanel, CenterAlignMixIn, Panel):
     bl_label = "Axis & Gizmo Colors"
     bl_options = {'DEFAULT_CLOSED'}
@@ -2219,6 +2236,7 @@ classes = (
     USERPREF_PT_theme_interface_state,
     USERPREF_PT_theme_interface_styles,
     USERPREF_PT_theme_interface_gizmos,
+    USERPREF_PT_theme_interface_transparent_checker,
     USERPREF_PT_theme_interface_icons,
     USERPREF_PT_theme_text_style,
     USERPREF_PT_theme_bone_color_sets,

source/blender/blenloader/intern/versioning_userdef.c

@@ -216,6 +216,9 @@ static void do_versions_theme(const UserDef *userdef, bTheme *btheme)
    */
   {
     /* Keep this block, even when empty. */
+    FROM_DEFAULT_V4_UCHAR(tui.transparent_checker_primary);
+    FROM_DEFAULT_V4_UCHAR(tui.transparent_checker_secondary);
+    btheme->tui.transparent_checker_size = U_theme_default.tui.transparent_checker_size;
   }
 
 #undef FROM_DEFAULT_V4_UCHAR

source/blender/draw/engines/overlay/shaders/background_frag.glsl

@@ -71,10 +71,10 @@ void main()
       bg_col += dither();
       break;
     case BG_CHECKER:
-      float size = 8.0 * sizePixel;
+      float size = sizeChecker * sizePixel;
       ivec2 p = ivec2(floor(gl_FragCoord.xy / size));
       bool check = mod(p.x, 2) == mod(p.y, 2);
-      bg_col = (check) ? colorCheckerLow.rgb : colorCheckerHigh.rgb;
+      bg_col = (check) ? colorCheckerPrimary.rgb : colorCheckerSecondary.rgb;
       break;
   }
 

source/blender/draw/intern/draw_common.c

@@ -91,8 +91,9 @@ void DRW_globals_update(void)
   UI_GetThemeColor4fv(TH_SKIN_ROOT, gb->colorSkinRoot);
   UI_GetThemeColor4fv(TH_BACK, gb->colorBackground);
   UI_GetThemeColor4fv(TH_BACK_GRAD, gb->colorBackgroundGradient);
-  UI_COLOR_RGBA_FROM_U8(0x26, 0x26, 0x26, 0xFF, gb->colorCheckerLow);
+  UI_GetThemeColor4fv(TH_TRANSPARENT_CHECKER_PRIMARY, gb->colorCheckerPrimary);
-  UI_COLOR_RGBA_FROM_U8(0x33, 0x33, 0x33, 0xFF, gb->colorCheckerHigh);
+  UI_GetThemeColor4fv(TH_TRANSPARENT_CHECKER_SECONDARY, gb->colorCheckerSecondary);
+  gb->sizeChecker = UI_GetThemeValuef(TH_TRANSPARENT_CHECKER_SIZE);
   UI_GetThemeColor4fv(TH_V3D_CLIPPING_BORDER, gb->colorClippingBorder);
 
   /* Custom median color to slightly affect the edit mesh colors. */

source/blender/draw/intern/draw_common.h

@@ -82,8 +82,8 @@ typedef struct GlobalsUboStorage {
 
   float colorBackground[4];
   float colorBackgroundGradient[4];
-  float colorCheckerLow[4];
+  float colorCheckerPrimary[4];
-  float colorCheckerHigh[4];
+  float colorCheckerSecondary[4];
   float colorClippingBorder[4];
   float colorEditMeshMiddle[4];
 
@@ -148,8 +148,9 @@ typedef struct GlobalsUboStorage {
   float sizePixel, pixelFac;
   float sizeObjectCenter, sizeLightCenter, sizeLightCircle, sizeLightCircleShadow;
   float sizeVertex, sizeEdge, sizeEdgeFix, sizeFaceDot;
+  float sizeChecker;
 
-  float pad_globalsBlock[2];
+  float pad_globalsBlock;
 } GlobalsUboStorage;
 /* Keep in sync with globalsBlock in shaders */
 BLI_STATIC_ASSERT_ALIGN(GlobalsUboStorage, 16)

source/blender/draw/intern/shaders/common_globals_lib.glsl

@@ -45,8 +45,8 @@ layout(std140) uniform globalsBlock
 
   vec4 colorBackground;
   vec4 colorBackgroundGradient;
-  vec4 colorCheckerLow;
+  vec4 colorCheckerPrimary;
-  vec4 colorCheckerHigh;
+  vec4 colorCheckerSecondary;
   vec4 colorClippingBorder;
   vec4 colorEditMeshMiddle;
 
@@ -116,6 +116,7 @@ layout(std140) uniform globalsBlock
   float sizeEdge;
   float sizeEdgeFix;
   float sizeFaceDot;
+  float sizeChecker;
 
   float pad_globalsBlock;
 };

source/blender/editors/include/UI_resources.h

@@ -308,6 +308,10 @@ typedef enum ThemeColorID {
   TH_WIDGET_TEXT_CURSOR,
   TH_EDITOR_OUTLINE,
 
+  TH_TRANSPARENT_CHECKER_PRIMARY,
+  TH_TRANSPARENT_CHECKER_SECONDARY,
+  TH_TRANSPARENT_CHECKER_SIZE,
+
   TH_AXIS_X, /* X/Y/Z Axis */
   TH_AXIS_Y,
   TH_AXIS_Z,

source/blender/editors/interface/resources.c

@@ -899,6 +899,18 @@ const uchar *UI_ThemeGetColorPtr(bTheme *btheme, int spacetype, int colorid)
         case TH_WIDGET_TEXT_CURSOR:
           cp = btheme->tui.widget_text_cursor;
           break;
+
+        case TH_TRANSPARENT_CHECKER_PRIMARY:
+          cp = btheme->tui.transparent_checker_primary;
+          break;
+        case TH_TRANSPARENT_CHECKER_SECONDARY:
+          cp = btheme->tui.transparent_checker_secondary;
+          break;
+        case TH_TRANSPARENT_CHECKER_SIZE:
+          cp = &btheme->tui.transparent_checker_size;
+          break;
+
+
         case TH_AXIS_X:
           cp = btheme->tui.xaxis;
           break;

source/blender/gpu/intern/gpu_immediate_util.c

@@ -29,6 +29,8 @@
 #include "GPU_immediate.h"
 #include "GPU_immediate_util.h"
 
+#include "UI_resources.h"
+
 static const float cube_coords[8][3] = {
     {-1, -1, -1},
     {-1, -1, +1},
@@ -362,11 +364,17 @@ void imm_draw_box_wire_3d(uint pos, float x1, float y1, float x2, float y2)
 void imm_draw_box_checker_2d(float x1, float y1, float x2, float y2)
 {
   uint pos = GPU_vertformat_attr_add(immVertexFormat(), "pos", GPU_COMP_F32, 2, GPU_FETCH_FLOAT);
-  immBindBuiltinProgram(GPU_SHADER_2D_CHECKER);
+  float checker_primary[4];
+  float checker_secondary[4];
+  int checker_size = UI_GetThemeValue(TH_TRANSPARENT_CHECKER_SIZE);
 
-  immUniform4f("color1", 0.15f, 0.15f, 0.15f, 1.0f);
+  immBindBuiltinProgram(GPU_SHADER_2D_CHECKER);
-  immUniform4f("color2", 0.2f, 0.2f, 0.2f, 1.0f);
+  UI_GetThemeColor4fv(TH_TRANSPARENT_CHECKER_PRIMARY, checker_primary);
-  immUniform1i("size", 8);
+  UI_GetThemeColor4fv(TH_TRANSPARENT_CHECKER_SECONDARY, checker_secondary);
+
+  immUniform4fv("color1", checker_primary);
+  immUniform4fv("color2", checker_secondary);
+  immUniform1i("size", checker_size);
 
   immRectf(pos, x1, y1, x2, y2);
 

source/blender/makesdna/DNA_userdef_types.h

@@ -169,7 +169,11 @@ typedef struct ThemeUI {
   short menu_shadow_width;
 
   unsigned char editor_outline[4];
-  char _pad0[2];
+
+  /* Transparent Grid */
+  unsigned char transparent_checker_primary[4], transparent_checker_secondary[4];
+  unsigned char transparent_checker_size;
+  char _pad1[1];
 
   float icon_alpha;
   float icon_saturation;

source/blender/makesrna/intern/rna_userdef.c

@@ -1533,6 +1533,28 @@ static void rna_def_userdef_theme_ui(BlenderRNA *brna)
       prop, "Text Cursor", "Color of the interface widgets text insertion cursor (caret)");
   RNA_def_property_update(prop, 0, "rna_userdef_theme_update");
 
+  /* Transparent Grid */
+  prop = RNA_def_property(srna, "transparent_checker_primary", PROP_FLOAT, PROP_COLOR_GAMMA);
+  RNA_def_property_float_sdna(prop, NULL, "transparent_checker_primary");
+  RNA_def_property_array(prop, 3);
+  RNA_def_property_ui_text(
+      prop, "Primary Color", "Primary color of checkerboard pattern indicating transparent areas");
+  RNA_def_property_update(prop, 0, "rna_userdef_theme_update");
+
+  prop = RNA_def_property(srna, "transparent_checker_secondary", PROP_FLOAT, PROP_COLOR_GAMMA);
+  RNA_def_property_float_sdna(prop, NULL, "transparent_checker_secondary");
+  RNA_def_property_array(prop, 3);
+  RNA_def_property_ui_text(prop,
+                           "Secondary Color",
+                           "Secondary color of checkerboard pattern indicating transparent areas");
+  RNA_def_property_update(prop, 0, "rna_userdef_theme_update");
+
+  prop = RNA_def_property(srna, "transparent_checker_size", PROP_INT, PROP_PIXEL);
+  RNA_def_property_ui_text(
+      prop, "Checkerboard Size", "Size of checkerboard pattern indicating transparent areas");
+  RNA_def_property_range(prop, 2, 48);
+  RNA_def_property_update(prop, 0, "rna_userdef_theme_update");
+
   /* axis */
   prop = RNA_def_property(srna, "axis_x", PROP_FLOAT, PROP_COLOR_GAMMA);
   RNA_def_property_float_sdna(prop, NULL, "xaxis");