Jump to content

Diffuse Texture map with alpha and a diffuse color (Layered texture maps)


FbFGlobal_Dev
 Share

Recommended Posts

Is there a way to layer texture maps? For instance, I want to allow users to be able to modify a geometry's diffuse color, but have a black and white texture map overlay the color so it can keep the look of grime/grit (like setting a layer to multiply in photoshop). Or do I just have to make different colored texture maps in photoshop that already have the grime/grit applied and toggle between them?

Link to comment
Share on other sites

Hiya @FbFGlobal_Dev.  Yes, there are a few ways to get some "blending" of various material properties.

But first, a picture of a flower... https://upload.wikimedia.org/wikipedia/commons/f/fd/Cactus_flower_extracted.png

Purrrrrdy.  Now let's mess it up.

http://playground.babylonjs.com/#15S2KH

Check out that left sphere (sphere5/material5). 
1.  It has the tree texture just like the right sphere, but it's used as an emissiveTexture (line 33).  Look close, you'll see it.
2.  It has that flower... as the diffuseTexture (line 31).  Easy to see the flower... and still see the tree foliage.
3.  It has blue as the emissiveColor.  This causes the flower petals to be purple.
4.  It has a half-red diffuseColor causing the yellow center part of the flower... to be red.

Wow, huh?  :)

AmbientTexture can get involved, too.

What's that?  You want to see it on the left sphere?  Well... I suppose.  :)  Now we bring in the 3rd texture (the 2nd offsite url).  This is a heart shape.

http://playground.babylonjs.com/#15S2KH#1

Still got the foliage of tree.png, still got the red flower center, still got blue/purple petals, and our new heart shape.  That's some serious textures/colors for a single material, huh?

The right sphere... sphere6/material6 is much simpler.  It uses the tree texture as its diffuseTexture, and the diffuseColor starts red (line 38) but a timer in lines 55-61 is changing the diffuseColor once per second.  Boring but still fun.

I am NOT experienced in textures.  Others know cool secrets that I don't, and others understand blending more than I do.  But, this should answer your question.  BJS materials are the best materials in all of webGL land... and a great place to do some mad scientist experiments and see if you can blow something up. 

Feel free to use that playground to do edits, hit RUN over and over, make SAVES as often as you like, and if you make something cool... click SAVE, and paste its new url here.  Perhaps tell us what you did.  Show'n'tell, ya know?  :)

Need some usable (CORS-clear) textures?  http://tinyurl.com/jszvcmh

That's a short-link to a Google image search... with "labeled for reuse" set in Google's "search tools".  (It also avoids pixabay which just gets in the way, as none of their images are CORS-clear.) 

I like using wikipedia commons pictures/textures.  They always work well in playground demos.  Party on!

What's that?  No scene.ambientColor and materialSphere5.ambientColor?  Ok fine.  http://playground.babylonjs.com/#15S2KH#2

AmbientColor has two things involved... line 3 and line 37.  They are both set red-ish.  It just brightened up the red of the flower center.  SO many knobs to turn/adjust on BJS materials, eh?  Gotta love 'em.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...