Tiling Textures

Questions
1

I’ve run in to either a documentation error or a bug that’s been introduced. The documentaion reads to use uScale and vScale to tile a texture, but these aren’t fields on a BaseTexture. This won’t run in a Playground and also fails to compile on a github pages deploy.

What is the proper way to tile a texture on a Material?

2

How does console.log(groundMaterial.diffuseTexture) show the properties but accessing them breaks it?

3

My guess is that the console.log() call is retrieving a reference to the Texture I created, yet when trying to access the properies, it’s coming back as a BaseTexture.

This doesn’t work in a playground, but I’ve managed to cast it to a Texture and then set it:

    /**
     * Creates and returns a StandardMaterial for the ground with a diffuse texture.
     * The texture is scaled to repeat 50 times along both the U and V axes.
     *
     * @returns {StandardMaterial} The configured ground material.
     */

    private createGroundMaterial(): StandardMaterial {
        const groundMaterial = new StandardMaterial("groundMaterial", Main.scene);
        groundMaterial.diffuseTexture = new Texture("./textures/ButtonBackground.png", Main.scene);
        (groundMaterial.diffuseTexture as Texture).uScale = 50;
        (groundMaterial.diffuseTexture as Texture).vScale = 50;
        return groundMaterial;
    }
4

It should work: https://playground.babylonjs.com/#SXEKIS#1 (also includes alternative if you do nt want to type cast).

@withADoveInOneHand It is a TypeScript thing. The props are there. It is just that Material.diffuseTexture is defined as type BaseTexture. So TypeScript assumes the props are missing.

5

Oh! I see what I did wrong and why I thought it didn’t work in Playground.

(groundMaterial.diffuseTexture as BABYLON.Texture).uScale = 50;

I’m so used to not working in the playground, I left off BABYLON when I was trying it out.

Ultimately, I went with something quite similar to your alternate solution because it makes the code more readable.

The documentation needs to be updated.

1 Like