Png texture mask

[captainleighwalker]

Hi

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

[Guest]

We need more info

can you try to create a sample on the PG to demonstrate what you want to achieve?

[captainleighwalker]

(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)

[Guest]

I guess then DynamicTextures: http://doc.babylonjs.com/how_to/dynamictexture

[captainleighwalker]

I'm sure that will do the job thanks. ?

[captainleighwalker]

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);

[captainleighwalker]

This is with uv texture squares map. You can see bump is mapping ok but not texture?

[captainleighwalker]

I assume the problem is the texture cant tile?

[Guest]

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

[captainleighwalker]

Finally got a PG Repro. My format code doesn't seem to work.

coordinatesIndex is 0 for both textures.

https://www.babylonjs-playground.com/#WFLKH#55

You will see it maps ok if applying texture directly.

 

[Guest]

Ok now we talk

https://playground.babylonjs.com/#WFLKH#58

The dynamic texture is in clamp mode by default

[captainleighwalker]

Thanks, it works in chrome but its just black in ie and Edge?

[Guest]

Pinging @trevordev who should be able to help

[trevordev]

@captainleighwalker this is because Edge is using webGL 1.0 which does not support non-power of two texture width/height (Unfortunately no webGL warning was displayed in console to tell you this). If you use an image with a size of 256 for example this will should work. See https://playground.babylonjs.com/#WFLKH#63