Various Nodes in the project have controls to set a color or a texture.
Fundamentally a color is just a 1x1 texture.
One example is in Material where there is
- Albedo (texture) and Diffuse (color).
- Metallic (texture) and Specular (color).
- AO (texture) and Emissive (color).
To simplify the user interface and reduce redundancy, we can implement a selection system that allows users to choose between a color picker and a texture selector within the same control.
Selection System Design
The selection system will consist of the following components:
- Selection Control: A UI element that allows users to toggle between "Color" and "Texture" modes.
- Color Picker: A UI component that allows users to select a color when in "Color" mode.
- Texture Selector: A UI component that allows users to select a texture when in "Texture" mode.
- Data Binding: Logic to bind the selected color or texture to the corresponding property in the node.
- State Management: Logic to manage the state of the selection control and ensure that the correct UI component is displayed based on the user's choice.
- Persistence: Logic to save and load the selected color or texture when the project is saved or loaded.
- Validation: Logic to validate the selected color or texture to ensure it meets any necessary criteria (e.g., texture format, color range).
- User Feedback: Visual indicators to show which mode is currently active (e.g., highlighting the selected option).
Look and Feel
Similar system exists in Blender for texture nodes where users can choose between different types of inputs.
The system should have a small button on the left side of the control to toggle between Color and Texture modes.
When Color mode is selected, a color icon should be displayed.
When Texture mode is selected, a texture icon should be displayed.
The right side of the control will display either the Color Picker or the Texture Selector based on the selected mode.
The right side is the CENTER portion of the control, which will be dynamically updated based on the selected mode.
Implementation Steps
- Create the Selection Control UI element with options for "Color" and "Texture".
- Implement the Color Picker component based on PanelHelper.addColorPicker.
- Implement the Texture Selector component based on PanelHelper.addTextureSelector.
- Set up data binding to link the selected color or texture to the node's property.
- Implement state management to toggle between the Color Picker and Texture Selector based on user selection.
- Add persistence logic to save and load the selected values.
- Implement validation logic to ensure selected values are valid.
- Add user feedback elements to indicate the active mode.
- Test the selection system thoroughly to ensure it works as expected in various scenarios.
Example Usage
When a user wants to set the Albedo property of a Material node, they can use the
selection control to choose between picking a color or selecting a texture. Depending on their choice, the appropriate
UI component will be displayed, allowing them to make their selection seamlessly within the same interface.
Notes
- It would be nice if 1x1 textures did not pollute the texture selection lists. Having said that, all textures still
need to be registered with the Texture Manager for proper resource management. TextureWithMetaData will need a
persistent flag to hide them from selection lists.
- All the TextureLayerIndex values should work with the new system.
- The mesh shader should no longer need to accept color values, only texture indices. The 1x1 texture can be used
to represent solid colors.
Various Nodes in the project have controls to set a color or a texture.
Fundamentally a color is just a 1x1 texture.
One example is in Material where there is
To simplify the user interface and reduce redundancy, we can implement a selection system that allows users to choose between a color picker and a texture selector within the same control.
Selection System Design
The selection system will consist of the following components:
Look and Feel
Similar system exists in Blender for texture nodes where users can choose between different types of inputs.
The system should have a small button on the left side of the control to toggle between Color and Texture modes.
When Color mode is selected, a color icon should be displayed.
When Texture mode is selected, a texture icon should be displayed.
The right side of the control will display either the Color Picker or the Texture Selector based on the selected mode.
The right side is the CENTER portion of the control, which will be dynamically updated based on the selected mode.
Implementation Steps
Example Usage
When a user wants to set the Albedo property of a Material node, they can use the
selection control to choose between picking a color or selecting a texture. Depending on their choice, the appropriate
UI component will be displayed, allowing them to make their selection seamlessly within the same interface.
Notes
need to be registered with the Texture Manager for proper resource management. TextureWithMetaData will need a
persistent flag to hide them from selection lists.
to represent solid colors.