Jump to content

Png texture mask

Recommended Posts


I have a black and white .jpg image since .png is a bit too big file size. I need to use the black from the image but programmatically make it a different colour (mask). I assume I can still use the normal diffuse colour 'below'? Is this possible?

This is to make different colour wood and grain.

Thanks in advance

Link to comment
Share on other sites

(I've just realised I did use a png in 2D on canvas but black and white jpg would be nice ?)

It would be very hard to make anything in PG as this is my problem!

I'm sure you will understand if I show you in 2D on canvas

   img = "grain with transparency.png";

                var grainCanvas = document.createElement("canvas");
                grainCanvas.width = img.naturalWidth;
                grainCanvas.height = img.naturalHeight;
                var grainContext = grainCanvas.getContext("2d");
                grainContext.drawImage(img, 0, 0);

                grainContext.globalCompositeOperation = 'source-in';
                grainContext.fillStyle = "grain colour";
                grainContext.fillRect(0, 0, grainCanvas.width, grainCanvas.height);

Then use this canvas as the texture for the material and let the diffuse show through under it.  (which is one solution but I would prefer not to make a canvas - just use Babylon textures)

Link to comment
Share on other sites

Well I've tried! I've made the texture the same size as my bump texture but it seems like the cords are not the same or something? What's missing here?

Also I take it you have to set has Alpha to show the diffuseColor below?

     var texture = new BABYLON.DynamicTexture("slabOutsideTexture", { width: img.naturalWidth, height: img.naturalHeight }, scene);

   var context = texture.getContext();
            context.fillStyle = "white";
            context.fillRect(0, 0, img.naturalWidth, img.naturalHeight);
            context.drawImage(img, 0, 0);


Link to comment
Share on other sites

The texture can tile..can you make sure that texture.coordinatesIndex is the same as the bump texture

Also can you create a repro on the playground? it will be far easier to fix it for you then

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.

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.


  • Recently Browsing   0 members

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