converting masks rendered in 3dsmax to be converted to svg format for color customisations

[chow choppe]

Hi everyone

 

this exactly is not a max question but it does involve creating matte elements in 3dsmax so i am posting this here.

we are working on a kitchen and  dining area render project which has to go on web . once its there a viewer should be able to change colors of things like cabinets, chair, counter top etc with a color or material picker on the webpage with help of a color mixer or color swatches on the screen. now that customisation thing will be created by the web developer using blend modes etc which is not part of our domain as 3d artist.

but what he wants from us is that we give him   masks like cabinet areas. sofa fabric area, flooring etc. we know how to create those masks by using multimatte or wirecolor render elements but he doesnt want those in image format. he wants the edges and masks colors  in svg format so that he can use those svg files in what he calls CSS blending modes.he wants those masks in svg formats.

the time consuming method to do this will be to trace out edges of mask in adobe illustrator but we are looking for a faster way to do this because we already have multimattes from max.we can use vray or corona both to create those mattes.

can anyone help with this?

has anyone done this kind of thing before? is there any other way of doing this color customisation of products for webpages? any other software?

[James Vella]

Would it be possible to ask the developer if they can write a piece of code that takes a particular wire color and then creates the outline automatically in the desired format? This way you can set a bunch of rules as to what items get each wire color and then the developer can use those images and run it through their script.

 

I would be weighing up the efficiency/time and put this forward as a possible solution. For example if it takes 3 days to write a script that does this job and saves 50+ artist hours then you have a sufficient case for the script to be developed.

Edited December 17, 2020 by James Vella

[chow choppe]

hi james. thanks for the response.

i figured out a way to create those outlines from masks.

i took the mask in photoshop . used magic wand to select an area and then right clicked and created workpath.after that i used file> export as > svg. so that thing is resolved. 

when we tested this the issue that is coming now is when the base color is white in the rendering the color can be customised perfectly using any color in the mixer or swatches. the  blend works perfectly but when the base color is not white but a darker shade and we click on a color swatch now the final color is different than what it was on a perfect white area. 

 

second issue is while using textures. if we try to create different options of lets stay stone then just a color swatch wont work. the whole stone texture has to change and mapping has to change accordingly based on stone size. 

i have seen something like this where kitchen cabinets show different texture options and the mapping and complete texture changes and not just the color.how to deal with this?

any luck here?

 

thanks

[Francisco Penaloza]

I was about to suggest, creating an action in Photoshop that will do that, select the black area then transform to path and save as.

Other way could be an action in Illustrator and tracing pixel to path, same difference.

Regarding changing textures,  then it get complicated. A quick though would be to create passes with different textures in V-Ray, you can choose the render selected only option. That way the CSS code will swap the image as need it.  I would recommend rendering the image with a medium gray material, that way when you overly the new textures or colors they are closer to what they represent, rather that shifting a color from the original image.

A more advanced software such Unity, may be a better choice for this type of work nowadays, but CSS is very powerful, but it need some pre-work to be done for sure.