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

Share this post

Link to post
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)

Share this post

Link to post
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);


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.