We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

GlifTek Examples: “Color Levels: COLOR RAMP”

Home › Forums › Tutorials › GlifTek Examples: “Color Levels: COLOR RAMP”

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • 2020-06-28 at 5:12 pm #29348
    GLiFTeK
    Customer

    Gliftek_Examples_Color_Levels_COLOR_RAMP.png

    Hi-ho!
    Your friendly forum GlifTek here again with one in a series of Example Projects to help in the Verge3D learning experience, or just to use in your own projects.
    Feel free to copy or change the Material Nodes (blender) and/or puzzle networks as you see fit!
    The project file is attached to this post as a ZIP file. Just unpack it into your verge3D applications folder.

    This one is “Color Levels: COLOR RAMP”.
    link to online demo – “Color Levels: COLOR RAMP”

    The color selection in this project is based on a Color Ramp Node.
    I’ll post one based on specific RGB vertex color values and another on an RGB node later.

    The three sliders control Color, Brightness, and Opacity levels.
    You can use the mouse wheel to scroll up and down through their values while hovered over them. (mouse wheel scroll attenuation may vary by browsers and OS settings. To adjust, change the math in the PROCESS_MOUSEWHEEL_DELTA_Y.)
    The radial dial cycles through color. The play button automates the cycling.

    Enjoy!

    P.S. The ‘up’ axis on any UI feature is ‘Y’.

    Visit the GLIFTEK Verge3D Plugins Store!
     
    GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
     
    LIKE The GLIFTEK Facebook Page for updates!
     
    Join the Verge 3D Discord Server!
    plz share Discord link & on your signature!

    2020-06-28 at 10:10 pm #29357
    dssctr
    Customer

    Nice! :good:

    2020-06-29 at 9:50 am #29365
    Yuri Kovelenov
    Staff

    thanks for sharing! :good:

    Chief 3D Verger | LinkedIn | Twitter

    2020-06-29 at 4:50 pm #29381
    cameronm125
    Participant

    I added the wheel to my project but I noticed an issue of not being able to get past teal. I’ve messed around in puzzles and can get the full spectrum but it’s either repeated (red at 0 and 180 with full spectrum on either side) or one side (0 to 180/180 to 360) is entirely red.

    Attached are the puzzles for the double spectrum wheel.

    2020-06-29 at 8:47 pm #29395
    cameronm125
    Participant

    Also any idea on how to have the slider output to a selected material? I have multiple parts on my model that need to be independently customizable. I tried this with no luck.

    2020-06-30 at 12:52 am #29400
    GLiFTeK
    Customer
    cameronm125 wrote:

    I added the wheel to my project but I noticed an issue of not being able to get past teal. I’ve messed around in puzzles and can get the full spectrum but it’s either repeated (red at 0 and 180 with full spectrum on either side) or one side (0 to 180/180 to 360) is entirely red.
    Attached are the puzzles for the double spectrum wheel.

    Hi cameron,
    The dial is actually a pseudo-cycle
    It goes from 0 to 180 then from -180 to -0.

    This is because of the way three.js processes degrees data if I’m correct.

    Possibly someone here could share their solution to this. (I may have solved it in a different project but can’t seem to locate it) I’d update the project files accordingly if a solution is provided.
    EDIT: I found something here (link) that is going to be of help. I knew it was degrees to radians. I’ll update the project with this incorporated.

    As far as separate materials go, you would make the material slot in the “set value” puzzle be a variable which changes according to the selected material.

    Ie: you have a method to change materials like a menu or HTML drop down input and that changes the material variable to be, say,: Material_A or Material_B where those are the actual names of your blender materials.

    You’d keep the value names the exact same on each.

    I have a project (where this sample comes from) where users change the values based on one material with multiple value names ie: Color.000, Color.001, Color.002 etc. All discernible through the vertex color map value of their according geometry.

    I left that out as I didn’t want to overwhelm forum members past the basic concept in the example project.

    I’ll share that multi-value material in another example in the Color Level series though.

    For now, I would be careful of how you name your values with *.001, etc. That can cause headaches if you’ve copied nodes and aren’t doing tat naming intentionally.
    :good:

    Edit: I know you’re new to things, but are you using your material name as the same name as your object’s name?
    Because that’s what would be occurring with your “when clicked” puzzle on the left of your image.

    Visit the GLIFTEK Verge3D Plugins Store!
     
    GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
     
    LIKE The GLIFTEK Facebook Page for updates!
     
    Join the Verge 3D Discord Server!
    plz share Discord link & on your signature!

    2020-06-30 at 2:01 pm #29443
    cameronm125
    Participant

    I have 3 versions of each material and each material corresponds with a specific part. One material is “Window P” for a polished metal material on the windows, I also have a Window L for liquid paint and B for brushed. The way I switch is by clicking on the part you want to change and then on 1 of 3 spheres next to my customizable object that shows brushed, liquid, and polished materials. The .00x names were just frustration and laziness lol.

    I really appreciate all the help and how supportive everyone is here. My first project is almost done!

    2020-06-30 at 4:39 pm #29449
    cameronm125
    Participant

    Update: The puzzles I had set up worked for multi-output I just needed to add a list to limit the selectable objects because I believe it was grabbing the material from the color wheel “handle”.

    2020-06-30 at 8:44 pm #29455
    GLiFTeK
    Customer

    That’s awesome man!
    Nice going! Glad I could help! :good:

    Visit the GLIFTEK Verge3D Plugins Store!
     
    GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
     
    LIKE The GLIFTEK Facebook Page for updates!
     
    Join the Verge 3D Discord Server!
    plz share Discord link & on your signature!

    2020-06-30 at 10:02 pm #29458
    cameronm125
    Participant

    I swapped the provided nodes for a HueSaturationValue node to customize the color but now my input value nodes seem to be wonky. I have a value node labeled “Color” controlling the colorramp spectrum input but now my ‘Set value “Color” in material’ puzzle is controlling the value of the HSV node. The value of the HSV node should be controlled by a value node labeled “Brightness”.

    2020-07-01 at 4:16 am #29460
    GLiFTeK
    Customer

    Yeah I toyed with the hsv node for quite a while. To no avail. I mean you can culvecycle through cmyk with it or raise the brightness, but only visually additive, I couldn’t get black like the brightness group does.

    There’s a different method that uses. Keyframes and one node I’ll post, where you get all the flavors of the rainbow

    Visit the GLIFTEK Verge3D Plugins Store!
     
    GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
     
    LIKE The GLIFTEK Facebook Page for updates!
     
    Join the Verge 3D Discord Server!
    plz share Discord link & on your signature!

    2020-07-01 at 4:33 pm #29485
    cameronm125
    Participant

    I can use your provided color and brightness nodes, however those two can’t make grey. I added a Mix node after the first two to control the saturation but that doesn’t work either. Is this just a bug in Verge?

    2020-07-02 at 5:37 am #29501
    GLiFTeK
    Customer
    cameronm125 wrote:

    I can use your provided color and brightness nodes, however those two can’t make grey. I added a Mix node after the first two to control the saturation but that doesn’t work either. Is this just a bug in Verge?


    You can put a math multiply node, and Mix RGB Mix node in line before the transparency or material output.

    math node will convert to grayscale.

    Have the output of your brightness (or whatever was the last one before transparency or material output) have that go through the multiply math node into the other input of the the RGB mix . have a value node in the multiply math node’s other input to change its mix amount of gray.

    EDIT: changed these instructions…
    Or you can just use an rgb to bw node if you want gray.

    Essentialy you’d be mixing the original output with another that goes through the RGB to BW node, amount of which is controlled by a value node into the MIX RGB node.
    example in next post.

    Visit the GLIFTEK Verge3D Plugins Store!
     
    GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
     
    LIKE The GLIFTEK Facebook Page for updates!
     
    Join the Verge 3D Discord Server!
    plz share Discord link & on your signature!

    2020-07-02 at 4:07 pm #29578
    cameronm125
    Participant
    GLiFTeK wrote:

    You can put a math multiply node, and Mix RGB Mix node in line before the transparency or material output.
    math node will convert to grayscale.
    Have the output of your brightness (or whatever was the last one before transparency or material output) have that go through the multiply math node into the other input of the the RGB mix . have a value node in the multiply math node’s other input to change its mix amount of gray.
    Or you can just use an rgb to bw node if you want gray.
    Essentialy you’d be mixing the original output with another that goes through the math node, amount of which is controlled by a value node into the math multiply node.
    I’ll add this element into an updated version soon.

    It seems like the issue comes from the MixRGB node. I tried your method with no luck. I even tried the ColorRamp spectrum trick to control the saturation values because the other ColorRamp node for color seems to work fine, but still nothing.

    2020-07-04 at 4:55 pm #29642
    GLiFTeK
    Customer

    Hi Cameron,
    do it like this:
    have a grayscale group:
    grayscale group

    then inside the grayscale group:
    grayscale group contents

    working on the post of the keyframed RGB node that goes therough both RGB and CMYK together as one cycle through animation frame changes of the color node. (this grayscale node will be included)

    Visit the GLIFTEK Verge3D Plugins Store!
     
    GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
     
    LIKE The GLIFTEK Facebook Page for updates!
     
    Join the Verge 3D Discord Server!
    plz share Discord link & on your signature!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.