Puzzle challenge – wine label visualizer

Home Forums Puzzles Puzzle challenge – wine label visualizer

This topic contains 14 replies, has 3 voices, and was last updated by Yuri Kovelenov Yuri Kovelenov 5 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #12967
    Pottsie
    Pottsie
    Newbie

    Hello!

    I’m trying to create a wine label visualizer tool. I’ve attached my current puzzle layout along with the my app UI. Note: the only buttons I’m focusing on right now are the “Texture” and “Upload Design” buttons.

    How it currently functions:
    – User clicks on a “Texture” button to choose a texture. These are predetermined materials (just two currently, in Blender – tex1Diffuse and tex2Diff -I know, they should be consistently named :-( ). Both have different normal maps, and a shared placeholder diffuse (BLANK).
    – Then, the user will click on “Upload Design” to upload their own image.

    Next, this is where I’m having issues.

    I would like the user, after they upload their own image, to be able to go back and choose another texture to see against their design (uploaded image). However, as it currently is, when you click on one of the texture buttons, it reverts back to only showing the texture material. So it discards the uploaded image, because the initial texture material is applied. I do understand why this happens. But I just don’t know if what I’m trying to program is possible with the current puzzle options.

    https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:3330f49894/applications/wine_label/index.html

    Attachments:
    You must be logged in to view attached files.

    Check out my sketch book :) | www.instagram.com/b.potts.art/

    #12971
    elk
    elk
    Licensee

    Just had a quick look at your puzzles, so i might be reading it wrong, but It looks to me like you are trying to assign the textures(or “state”?) and not the materials when you press the texture 1 and 2 buttons, so changing tex1 and tex2 in the two top puzzles “groups” with Tex1Diffuse and Tex2Diff in the assign material puzzles should help i think. Also it looks like you are updating both materials with the new texture when using the upload button, i guess you would want to separate that out to one event for each button. Hope that makes scense … if I´m thinking correctly here …

    • This reply was modified 6 months ago by elk elk.
    • This reply was modified 6 months ago by elk elk.
    #12984
    Pottsie
    Pottsie
    Newbie

    elk – Thank you for checking it out. I’ll try what you suggested.

    But I’m thinking I have to somehow store the “opened file” from the user, via the “send data” snippet. I just don’t know how to wrap my brain around this right now.

    I don’t know if there is a way to construct a material by targeting Blender node inputs/outputs….?

    • This reply was modified 6 months ago by Pottsie Pottsie.

    Check out my sketch book :) | www.instagram.com/b.potts.art/

    #12986
    elk
    elk
    Licensee

    I think you only need to use the send data node if you actually need it to go to the web server, and the opened file would just be “cached” in your browser if not.

    Don’t know how you set up the materials, but indeed you should be able to manipulate parts of it, like changing textures if there is a texture node in your material setup, which looked to me like it was working in the link you posted

    So the simplest would be having a material applied to something out of sight, and them swapping that into the label object once “uploaded”.

    Just experimented a little bit with the texture swapping and opened file feature so far, so I might be slightly of on some things here. But i hope this helps you out a little, and the Verge3D team can probably fill out some details if you need.

    #12994
    Pottsie
    Pottsie
    Newbie

    Hmm. Now I’m wondering how to call the cached image, if it’s possible…?

    Can “opened file” be assigned to a variable?

    I’m just putting that question out there for anybody in general.

    • This reply was modified 6 months ago by Pottsie Pottsie.

    Check out my sketch book :) | www.instagram.com/b.potts.art/

    #12997
    elk
    elk
    Licensee

    Hello again. So I just had to try this, and this is what I came up with(see attachment).

    I tried to keep your setup for the most parts, just moved some things around and added some outlines to the “buttons” so you could see which “texture slot” was selected at any given time. The top group also sets the Label to the first material right away and enables the outline.

    So there are 3 materials;
    -One to hold the default material to start with (material0, not used in the puzzels)
    -Material 1 to hold texture number 1 (material1)
    -Material 2 to hold texture number 2 (material2)

    The three planes under the box is just to show of the three materials as you change stuff.

    One thing that surprised me, but makes real sense, is that if you have the same texture in all materials, even if the materials are individual, the reffarance to the image seems to be the same, real handy if you got the same texture used multiple places and just want to change all at once, so you see the textures have an extra number at the end just to make them individual.

    I hope this is useful to you, if not at least I learned a couple of things ;)

    You can test the “final” project here;
    https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:53632680b5/applications/test_texture_swap/test_texture_swap.html

    Push the gray boxes behind the text, I did not bother making the text itself clickable or align the text to the buttons for that matter, but i think its clear enough for a little demo :)

    Attachments:
    You must be logged in to view attached files.
    #12999
    Pottsie
    Pottsie
    Newbie

    You’re amazing. Thank you! Gonna start rebuilding. :yahoo: :yahoo: :yahoo:

    And I’m glad it helped you a bit! :)

    • This reply was modified 6 months ago by Pottsie Pottsie.

    Check out my sketch book :) | www.instagram.com/b.potts.art/

    #13000
    elk
    elk
    Licensee

    Did not see your last post before I posted. Not sure if you could store it in a variable, my solution was to use the material to store it in a way, using a variable might be better if that would work, at least for some more complex scenarios.

    #13001
    elk
    elk
    Licensee

    hehe. No problem. Happy to help :good:

    #13042
    Pottsie
    Pottsie
    Newbie

    Hi again! One more thing. For the top piece (assign material), does that just initiate when the scene loads, I’m assuming?

    Check out my sketch book :) | www.instagram.com/b.potts.art/

    #13061
    elk
    elk
    Licensee

    Yes, anything that is just straight puzzles that is not in an event handler or anything should just run straight away. The event handler in a sense also gets run straight away, but that will only registrer the event handler so the javascript under the hood can call it on events in the browser.

    That being said I am not sure of the order if you put more lose puzzles in a tab, that is why I have only been using one connected block of these together. The more correct thing would probably be to do that initialisation in the default init tab.

    This is mostly based on my assumptions tho, and might be putting it oversimplifide but i think this is the basis of it, please correct me if I missed something here Verge3D team :)

    • This reply was modified 6 months ago by elk elk.
    • This reply was modified 6 months ago by elk elk.
    #13077
    Yuri Kovelenov
    Yuri Kovelenov
    Developer

    yes, you are right! Puzzles in the init tab are initialized even before the WebGL context is created. The other tabs are executed after the main .gltf file is loaded.

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #13093
    elk
    elk
    Licensee

    Thanks for clearifying that Yuri. So then I would not be possible to do the initialization with the materials in the init tab because the scene data is not loaded yet. But based on those constraints you might be able to do some other initialization in the init tab, other than the obveiouse initialization puzzles.

    #13094
    elk
    elk
    Licensee

    You could also then set up the first custom tab to be you own “init afte sceneload” in a sense then, assuming the tabs will always be processed from left to right … !?

    #13165
    Yuri Kovelenov
    Yuri Kovelenov
    Developer

    yep, I think so! :)

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.