Problem with canvas as texture

Questions
1

Now I want to use canvas as the texture of the mesh. Using HtmlElementTexture and PBRMaterial can meet my requirements, but I am not sure if this is the best way. And I found that the fill color of canvas is black. If I want the fill color to be How should I do transparent color?Even though I used CreateFromBase64String, the effect is the same.Because I use an external library, I cannot provide a playground. The following is part of my code.I can provide this base64 if needed

 const canvas1 = document.querySelector('.heatmap').children[0];
                console.log(canvas1)
                var texture = new BABYLON.HtmlElementTexture("", canvas1, {
                    scene
                });
                // const textureInBase64 = canvas1.toDataURL();
                // console.log(textureInBase64);
                // var texture = new BABYLON.Texture.CreateFromBase64String(
                //     textureInBase64,
                //     "theTexture",
                //     scene
                // )

                var material = new BABYLON.PBRMaterial("", scene);
                material.unlit = true;
                material.alpha = 1;
                material.albedoTexture = texture;
                // material.albedoColor = new BABYLON.Color3(1, 0, 0);
                box.material = material;

This is the result of demo:

image
image1920×931 66.6 KB

2

@491667914

hey use DynamicTexture

3

@nasimiasl I am a beginner when it comes to textures, could you please provide some pseudo code for me to understand :wink:

4

yes sure
you can find all here

5

@nasimiasl Thank you very much for your suggestions, I tried DynamicTexture, but I still don’t know how to make the surrounding area that is not drawn transparent or change its color so that it is not black.This is my current code and results:

                const myDynamicTexture = new BABYLON.DynamicTexture('', { width: canvas1.width, height: canvas1.height }, scene);
                myDynamicTexture._canvas = canvas1;
                myDynamicTexture.update();
                var material = new BABYLON.StandardMaterial("", scene);
                material.diffuseTexture = myDynamicTexture;
                material.useAlphaFromDiffuseTexture = true;

image
image1920×931 57.5 KB

6

Dynamic Texture Example | Babylon.js Playground (babylonjs.com)

1 Like
7

Closing this as it seems to have been resolved in Use canvas as texture - Questions - Babylon.js (babylonjs.com)

Please keep questions about the same topic in a single post to help organization :slight_smile: