three.js
three.js copied to clipboard
mrdoob
Editor: Project assets management
Description
Problem
Since there is no single place for loading texture in editor, we currently have to load texture's explicitly where ever needed. This causes duplication of resources. for example : If I have 3 materials on which I want to use same diffuse map I have to load that image on the map for every material individually, this causes causes 3 textures and 3 images to be created and then assigned which is inefficient.
Proposed Solution I propose to solve this issue in 3 steps.
- Add functionality to import textures using the import option in the file menu.
- Add dedicated texture's panel in the sidebar project section in order to manage the texture.
- Texture slots ( material maps and scene background etc ) to show an option to select the texture for the loaded list.
Regarding the above 3rd point I am completely not sure on how the ui or the interaction will work. A rough Idea I had was to another select / dropdown components besides the map preview slot, in which we can list all the existing textures.
Also I am planning to add a texture panel besides the material panel in sidebar. It can be helpful in configuring the textures like setting encoding, tilling etc.
Also I am planning to add a texture panel besides the material panel in sidebar.
I think this is the wrong place. The UI for this needs to be placed elsewhere since your marked place is object sensitive. Meaning it shows information depending on the selected 3D object.
Since there is no single place for loading texture in editor,
This also true for materials. Generally speaking, the editor needs the ability to manage resources independently from added 3D objects. So you have a place where you can create, edit and delete materials and textures. In the sidebar highlighted in the above screenshot, you can then select existing materials and resources from select boxes.
How about having a bottom bar, some sort of assets panel it will solve both the issues with the materials and textures
Yes, that could be a possible approach.
Or the a material and textures panels are placed inside the Project tab because they represent in some sense the project's assets. Unity's project window does it the same way.
BTW: There was an initial material browser in the editor however it is not integrated in the view anymore since last release (see e5139eb6d699c7e17dab669771007eb971d6a0a4).
Or the a material and textures panels are placed inside the Project tab because they represent in some sense the project's assets. Unity's project window does it the same way.
Yeah that's a possibility but extra switching of tabs feels too much. But that's what I feel, if others don't mind it then we can surely go with that approach.
BTW: There was an initial material browser in the editor however it is not integrated in the view anymore since last release (see e5139eb).
Yeah that was by me as well :)
Ok here is something I thought of,
Materials and Textures as a TabbedPanel in the project pane.
So the idea is that selecting the texture in the texture list will show texture option below the list, will make a quick draft on that as well later
@mrdoob I noticed you had disabled the material panel, any specific reason to do this. I am asking coz I am enabling it back again in this PR if its ok.
Ok here is something I thought of,
That is looking good!
We'll need a geometries tab too 💪
Yes we can have that. I am only concerned about storing this data in indexed db, since its going to be huge
I am only concerned about storing this data in indexed db, since its going to be huge
Lets keep things simple and not store this in indexed db. If the tab reloads and the geometry/material/texture has not been added to the scene we'll have to lose it for now.
Then where do you want to store this data ? Editor class already has a map for the textures, materials and geometries ( Only materials is maintained for now though ) and editor.toJSON() already converts all this and saves it back to indexed db
We skip adding texture to editor texture hash if user loading the same image file. This will be decided based on the image filename.
@mrdoob and @Mugen87 any thoughts on this.
For now importing same image file a 100 times loads 100 textures in the editor texture hash
For testing: https://raw.githack.com/dineshsalunke/three.js/editor-texture-panel/editor/
UI feedback:
We don't need to add a title to the section. We can already see we're in the TEXTURES tab.
Editor class already has a map for the textures, materials and geometries ( Only materials is maintained for now though )
Yes, lets use these for now.
What about this
We skip adding texture to editor texture hash if user loading the same image file. This will be decided based on the image filename.
@mrdoob Added a properties panel to update the texture. it visible when selecting the texture in the list
For now I have only added label's. this is to confirm if this route is ok. If it's ok then I will move forward and complete the implementation
https://raw.githack.com/dineshsalunke/three.js/editor-texture-panel/editor/
@mrdoob I have only included the bare minimum props for the texture in the texture panel for now. If you feel something else is needed let me know
I'll have to think about this...
For the time being, could you remove the line under the tabs?
So it looks like this:
Hmm, I need to think about the UX...
If we do this for textures, we would have to do the same for materials and geometries, which means that we would have duplicated functionality.
After this PR I was gonna go for that change as it is.
Also just a crazy thought, at some point I thought of creating a generic properties inspector panel. :D
Added a preview for the texture, not the best UI but does the job.
Hmm, I need to think about the UX...
If we do this for textures, we would have to do the same for materials and geometries, which means that we would have duplicated functionality.
any update on this ?
@mrdoob a quick question, why don't we have the assets panel at the bottom on the window ? Is there any reason why all the things are implemented and pushed in the sidebar ?
@mrdoob @Mugen87 I have extracted the textures panel code in a separate standalone component, we could do this for the material panel as well and reuse it where ever needed, your thoughts ?!