tab_materials.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. ///if (is_paint || is_sculpt)
  2. function tab_materials_draw(htab: zui_handle_t) {
  3. let mini: bool = config_raw.layout[layout_size_t.SIDEBAR_W] <= ui_base_sidebar_mini_w;
  4. mini ? tab_materials_draw_mini(htab) : tab_materials_draw_full(htab);
  5. }
  6. function tab_materials_draw_mini(htab: zui_handle_t) {
  7. zui_set_hovered_tab_name(tr("Materials"));
  8. zui_begin_sticky();
  9. zui_separator(5);
  10. tab_materials_button_nodes();
  11. tab_materials_button_new("+");
  12. zui_end_sticky();
  13. zui_separator(3, false);
  14. tab_materials_draw_slots(true);
  15. }
  16. function tab_materials_draw_full(htab: zui_handle_t) {
  17. if (zui_tab(htab, tr("Materials"))) {
  18. zui_begin_sticky();
  19. let row: f32[] = [1 / 4, 1 / 4, 1 / 4];
  20. zui_row(row);
  21. tab_materials_button_new(tr("New"));
  22. if (zui_button(tr("Import"))) {
  23. project_import_material();
  24. }
  25. tab_materials_button_nodes();
  26. zui_end_sticky();
  27. zui_separator(3, false);
  28. tab_materials_draw_slots(false);
  29. }
  30. }
  31. function tab_materials_button_nodes() {
  32. let ui: zui_t = ui_base_ui;
  33. if (zui_button(tr("Nodes"))) {
  34. ui_base_show_material_nodes();
  35. }
  36. else if (ui.is_hovered) {
  37. zui_tooltip(tr("Show Node Editor") + " (" + map_get(config_keymap, "toggle_node_editor") + ")");
  38. }
  39. }
  40. let _tab_materials_draw_slots: i32;
  41. function tab_materials_draw_slots(mini: bool) {
  42. let ui: zui_t = ui_base_ui;
  43. let slotw: i32 = math_floor(51 * zui_SCALE(ui));
  44. let num: i32 = math_floor(config_raw.layout[layout_size_t.SIDEBAR_W] / slotw);
  45. for (let row: i32 = 0; row < math_floor(math_ceil(project_materials.length / num)); ++row) {
  46. let mult: i32 = config_raw.show_asset_names ? 2 : 1;
  47. let ar: f32[] = [];
  48. for (let i = 0; i < num * mult; ++i) {
  49. array_push(ar, 1 / num);
  50. }
  51. zui_row(ar);
  52. ui._x += 2;
  53. let off: f32 = config_raw.show_asset_names ? zui_ELEMENT_OFFSET(ui) * 10.0 : 6;
  54. if (row > 0) {
  55. ui._y += off;
  56. }
  57. for (let j: i32 = 0; j < num; ++j) {
  58. let imgw: i32 = math_floor(50 * zui_SCALE(ui));
  59. let i: i32 = j + row * num;
  60. if (i >= project_materials.length) {
  61. zui_end_element(imgw);
  62. if (config_raw.show_asset_names) {
  63. zui_end_element(0);
  64. }
  65. continue;
  66. }
  67. let img: image_t = zui_SCALE(ui) > 1 ? project_materials[i].image : project_materials[i].image_icon;
  68. let imgFull: image_t = project_materials[i].image;
  69. // Highligh selected
  70. if (context_raw.material == project_materials[i]) {
  71. if (mini) {
  72. let w: f32 = ui._w / zui_SCALE(ui);
  73. zui_rect(0, -2, w - 2, w - 4, ui.ops.theme.HIGHLIGHT_COL, 3);
  74. }
  75. else {
  76. let off: i32 = row % 2 == 1 ? 1 : 0;
  77. let w: i32 = 50;
  78. if (config_raw.window_scale > 1) {
  79. w += math_floor(config_raw.window_scale * 2);
  80. }
  81. zui_fill(-1, -2, w + 3, 2, ui.ops.theme.HIGHLIGHT_COL);
  82. zui_fill(-1, w - off, w + 3, 2 + off, ui.ops.theme.HIGHLIGHT_COL);
  83. zui_fill(-1, -2, 2, w + 3, ui.ops.theme.HIGHLIGHT_COL);
  84. zui_fill(w + 1, -2, 2, w + 4, ui.ops.theme.HIGHLIGHT_COL);
  85. }
  86. }
  87. ///if krom_opengl
  88. ui.image_invert_y = project_materials[i].preview_ready;
  89. ///end
  90. // Draw material icon
  91. let uix: f32 = ui._x;
  92. let uiy: f32 = ui._y;
  93. let tile: i32 = zui_SCALE(ui) > 1 ? 100 : 50;
  94. let imgh: f32 = mini ? ui_base_default_sidebar_mini_w * 0.85 * zui_SCALE(ui) : -1.0;
  95. let state = project_materials[i].preview_ready ?
  96. zui_image(img, 0xffffffff, imgh) :
  97. zui_image(resource_get("icons.k"), 0xffffffff, -1.0, tile, tile, tile, tile);
  98. // Draw material numbers when selecting a material via keyboard shortcut
  99. let is_typing: bool = ui.is_typing || ui_view2d_ui.is_typing || ui_nodes_ui.is_typing;
  100. if (!is_typing) {
  101. if (i < 9 && operator_shortcut(map_get(config_keymap, "select_material"), shortcut_type_t.DOWN)) {
  102. let number: string = any_to_string(i + 1);
  103. let width: i32 = g2_font_width(ui.ops.font, ui.font_size, number) + 10;
  104. let height: i32 = g2_font_height(ui.ops.font, ui.font_size);
  105. g2_set_color(ui.ops.theme.TEXT_COL);
  106. g2_fill_rect(uix, uiy, width, height);
  107. g2_set_color(ui.ops.theme.ACCENT_COL);
  108. g2_draw_string(number, uix + 5, uiy);
  109. }
  110. }
  111. // Select material
  112. if (state == zui_state_t.STARTED && ui.input_y > ui._window_y) {
  113. if (context_raw.material != project_materials[i]) {
  114. context_select_material(i);
  115. ///if is_paint
  116. if (context_raw.tool == workspace_tool_t.MATERIAL) {
  117. app_notify_on_init(base_update_fill_layers);
  118. }
  119. ///end
  120. }
  121. base_drag_off_x = -(mouse_x - uix - ui._window_x - 3);
  122. base_drag_off_y = -(mouse_y - uiy - ui._window_y + 1);
  123. base_drag_material = context_raw.material;
  124. // Double click to show nodes
  125. if (time_time() - context_raw.select_time < 0.25) {
  126. ui_base_show_material_nodes();
  127. base_drag_material = null;
  128. base_is_dragging = false;
  129. }
  130. context_raw.select_time = time_time();
  131. }
  132. // Context menu
  133. if (ui.is_hovered && ui.input_released_r) {
  134. context_select_material(i);
  135. let add: i32 = project_materials.length > 1 ? 1 : 0;
  136. _tab_materials_draw_slots = i;
  137. ui_menu_draw(function (ui: zui_t) {
  138. let i: i32 = _tab_materials_draw_slots;
  139. let m: slot_material_t = project_materials[i];
  140. if (ui_menu_button(ui, tr("To Fill Layer"))) {
  141. context_select_material(i);
  142. base_create_fill_layer();
  143. }
  144. if (ui_menu_button(ui, tr("Export"))) {
  145. context_select_material(i);
  146. box_export_show_material();
  147. }
  148. ///if is_paint
  149. if (ui_menu_button(ui, tr("Bake"))) {
  150. context_select_material(i);
  151. box_export_show_bake_material();
  152. }
  153. ///end
  154. if (ui_menu_button(ui, tr("Duplicate"))) {
  155. app_notify_on_init(function () {
  156. let i: i32 = _tab_materials_draw_slots;
  157. context_raw.material = slot_material_create(project_materials[0].data);
  158. array_push(project_materials, context_raw.material);
  159. let cloned: zui_node_canvas_t = json_parse(json_stringify(project_materials[i].canvas));
  160. context_raw.material.canvas = cloned;
  161. tab_materials_update_material();
  162. history_duplicate_material();
  163. });
  164. }
  165. if (project_materials.length > 1 && ui_menu_button(ui, tr("Delete"), "delete")) {
  166. tab_materials_delete_material(m);
  167. }
  168. let base_handle: zui_handle_t = zui_nest(zui_handle(__ID__), m.id);
  169. if (base_handle.init) {
  170. base_handle.selected = m.paint_base;
  171. }
  172. let opac_handle: zui_handle_t = zui_nest(zui_handle(__ID__), m.id);
  173. if (opac_handle.init) {
  174. opac_handle.selected = m.paint_opac;
  175. }
  176. let nor_handle: zui_handle_t = zui_nest(zui_handle(__ID__), m.id);
  177. if (nor_handle.init) {
  178. nor_handle.selected = m.paint_nor;
  179. }
  180. let occ_handle: zui_handle_t = zui_nest(zui_handle(__ID__), m.id);
  181. if (occ_handle.init) {
  182. occ_handle.selected = m.paint_occ;
  183. }
  184. let rough_handle: zui_handle_t = zui_nest(zui_handle(__ID__), m.id);
  185. if (rough_handle.init) {
  186. rough_handle.selected = m.paint_rough;
  187. }
  188. let met_handle: zui_handle_t = zui_nest(zui_handle(__ID__), m.id);
  189. if (met_handle.init) {
  190. met_handle.selected = m.paint_met;
  191. }
  192. let height_handle: zui_handle_t = zui_nest(zui_handle(__ID__), m.id);
  193. if (height_handle.init) {
  194. height_handle.selected = m.paint_height;
  195. }
  196. let emis_handle: zui_handle_t = zui_nest(zui_handle(__ID__), m.id);
  197. if (emis_handle.init) {
  198. emis_handle.selected = m.paint_emis;
  199. }
  200. let subs_handle: zui_handle_t = zui_nest(zui_handle(__ID__), m.id);
  201. if (subs_handle.init) {
  202. subs_handle.selected = m.paint_subs;
  203. }
  204. ui_menu_fill(ui);
  205. m.paint_base = zui_check(base_handle, tr("Base Color"));
  206. ui_menu_fill(ui);
  207. m.paint_opac = zui_check(opac_handle, tr("Opacity"));
  208. ui_menu_fill(ui);
  209. m.paint_nor = zui_check(nor_handle, tr("Normal"));
  210. ui_menu_fill(ui);
  211. m.paint_occ = zui_check(occ_handle, tr("Occlusion"));
  212. ui_menu_fill(ui);
  213. m.paint_rough = zui_check(rough_handle, tr("Roughness"));
  214. ui_menu_fill(ui);
  215. m.paint_met = zui_check(met_handle, tr("Metallic"));
  216. ui_menu_fill(ui);
  217. m.paint_height = zui_check(height_handle, tr("Height"));
  218. ui_menu_fill(ui);
  219. m.paint_emis = zui_check(emis_handle, tr("Emission"));
  220. ui_menu_fill(ui);
  221. m.paint_subs = zui_check(subs_handle, tr("Subsurface"));
  222. if (base_handle.changed ||
  223. opac_handle.changed ||
  224. nor_handle.changed ||
  225. occ_handle.changed ||
  226. rough_handle.changed ||
  227. met_handle.changed ||
  228. height_handle.changed ||
  229. emis_handle.changed ||
  230. subs_handle.changed) {
  231. make_material_parse_paint_material();
  232. ui_menu_keep_open = true;
  233. }
  234. }, 13 + add);
  235. }
  236. if (ui.is_hovered) {
  237. zui_tooltip_image(imgFull);
  238. if (i < 9) {
  239. zui_tooltip(project_materials[i].canvas.name + " - (" + map_get(config_keymap, "select_material") + " " + (i + 1) + ")");
  240. }
  241. else {
  242. zui_tooltip(project_materials[i].canvas.name);
  243. }
  244. }
  245. if (config_raw.show_asset_names) {
  246. ui._x = uix;
  247. ui._y += slotw * 0.9;
  248. zui_text(project_materials[i].canvas.name, zui_align_t.CENTER);
  249. if (ui.is_hovered) {
  250. if (i < 9) {
  251. zui_tooltip(project_materials[i].canvas.name + " - (" + map_get(config_keymap, "select_material") + " " + (i + 1) + ")");
  252. }
  253. else {
  254. zui_tooltip(project_materials[i].canvas.name);
  255. }
  256. }
  257. ui._y -= slotw * 0.9;
  258. if (i == project_materials.length - 1) {
  259. ui._y += j == num - 1 ? imgw : imgw + zui_ELEMENT_H(ui) + zui_ELEMENT_OFFSET(ui);
  260. }
  261. }
  262. }
  263. ui._y += mini ? 0 : 6;
  264. ///if krom_opengl
  265. ui.image_invert_y = false; // Material preview
  266. ///end
  267. }
  268. let in_focus: bool = ui.input_x > ui._window_x && ui.input_x < ui._window_x + ui._window_w &&
  269. ui.input_y > ui._window_y && ui.input_y < ui._window_y + ui._window_h;
  270. if (in_focus && ui.is_delete_down && project_materials.length > 1) {
  271. ui.is_delete_down = false;
  272. tab_materials_delete_material(context_raw.material);
  273. }
  274. }
  275. function tab_materials_button_new(text: string) {
  276. if (zui_button(text)) {
  277. let current: image_t = _g2_current;
  278. g2_end();
  279. context_raw.material = slot_material_create(project_materials[0].data);
  280. array_push(project_materials, context_raw.material);
  281. tab_materials_update_material();
  282. g2_begin(current);
  283. history_new_material();
  284. }
  285. }
  286. function tab_materials_update_material() {
  287. ui_header_handle.redraws = 2;
  288. ui_nodes_hwnd.redraws = 2;
  289. ui_nodes_group_stack = [];
  290. make_material_parse_paint_material();
  291. util_render_make_material_preview();
  292. let decal: bool = context_raw.tool == workspace_tool_t.DECAL || context_raw.tool == workspace_tool_t.TEXT;
  293. if (decal) {
  294. util_render_make_decal_preview();
  295. }
  296. }
  297. function tab_materials_update_material_pointers(nodes: zui_node_t[], i: i32) {
  298. for (let i: i32 = 0; i < nodes.length; ++i) {
  299. let n: zui_node_t = nodes[i];
  300. if (n.type == "MATERIAL") {
  301. if (n.buttons[0].default_value[0] == i) {
  302. n.buttons[0].default_value[0] = 9999; // Material deleted
  303. }
  304. else if (n.buttons[0].default_value[0] > i) {
  305. n.buttons[0].default_value[0]--; // Offset by deleted material
  306. }
  307. }
  308. }
  309. }
  310. function tab_materials_accept_swatch_drag(swatch: swatch_color_t) {
  311. context_raw.material = slot_material_create(project_materials[0].data);
  312. for (let i: i32 = 0; i < context_raw.material.canvas.nodes.length; ++i) {
  313. let node: zui_node_t = context_raw.material.canvas.nodes[i];
  314. if (node.type == "RGB" ) {
  315. node.outputs[0].default_value = f32_array_create_xyzw(
  316. color_get_rb(swatch.base) / 255,
  317. color_get_gb(swatch.base) / 255,
  318. color_get_bb(swatch.base) / 255,
  319. color_get_ab(swatch.base) / 255
  320. );
  321. }
  322. else if (node.type == "OUTPUT_MATERIAL_PBR") {
  323. node.inputs[1].default_value[0] = swatch.opacity;
  324. node.inputs[2].default_value[0] = swatch.occlusion;
  325. node.inputs[3].default_value[0] = swatch.roughness;
  326. node.inputs[4].default_value[0] = swatch.metallic;
  327. node.inputs[7].default_value[0] = swatch.height;
  328. }
  329. }
  330. array_push(project_materials, context_raw.material);
  331. tab_materials_update_material();
  332. history_new_material();
  333. }
  334. function tab_materials_delete_material(m: slot_material_t) {
  335. let i: i32 = array_index_of(project_materials, m);
  336. for (let i: i32 = 0; i < project_layers.length; ++i) {
  337. let l: slot_layer_t = project_layers[i];
  338. if (l.fill_layer == m) {
  339. l.fill_layer = null;
  340. }
  341. }
  342. history_delete_material();
  343. context_select_material(i == project_materials.length - 1 ? i - 1 : i + 1);
  344. array_splice(project_materials, i, 1);
  345. ui_base_hwnds[1].redraws = 2;
  346. for (let i: i32 = 0; i < project_materials.length; ++i) {
  347. let m: slot_material_t = project_materials[i];
  348. tab_materials_update_material_pointers(m.canvas.nodes, i);
  349. }
  350. }
  351. ///end