Scaling box without scaling texture

Questions
1

I am using “react-babylonjs” to be able to code things declaratively, there is an issue though, that only properties of existing instances are updated declaratively, if you will change props passed to constructor like size then it won’t be updated. I get it, it makes sense, but.
I want to scale box dynamically so I am updating “scaling” property on a box, together with box size also texture is scaled, but I want texture to stay the same size and if box is now larger then just repeat that texture, so I understand I have to update UV map to do that. So I am doing that, but it doesn’t work for some reason. If I will recreate Mesh with new faceUV, then it works, but if I will just try to update existing UV then it doesn’t change anything.

Here is an example: https://playground.babylonjs.com/#ED6HW8#6
First we create box with size 1, then I resize it to size 2 and recompute faceUV, but it doesn’t work.
What should I do?

2

Hello @Quetzakubica , how are you doing?

Can’t you use tri-planar projection do achieve the effect you are looking for instead of changing the UV values manually?

Here is a example I did using you playground: Box Scaling with texture | Babylon.js Playground (babylonjs.com)

3

Sorry, I don’t see any changes in your example

4

Sorry, I sent you the wrong link. Try this one:

Box Scaling with texture | Babylon.js Playground (babylonjs.com)

1 Like
5

Thanks, I think that will do the work. Didn’t know there is something like this already in place.

6

Different problem I have now.

When I used this TriPlanarMaterial then my scene looks like this:

image
image1920×1141 63.3 KB

It should have normal colors, green grass and grey stone wall, I don’t see any difference in my setup, this is code that is rendering these blocks:

export function WorldBoxView(props: { id: string; box: TileBox; texture: Texture; enablePointerMoveEvents?: boolean }) {
    const boxRef = useRef<Mesh | null>(null)
    const scene = useScene()
    useEffect(() => {
        if (!boxRef.current || !scene) return

        const triPlanarMaterial = new TriPlanarMaterial("TriPlanarMaterial", scene)
        triPlanarMaterial.diffuseTextureX = props.texture.babylonTexture
        triPlanarMaterial.diffuseTextureY = props.texture.babylonTexture
        triPlanarMaterial.diffuseTextureZ = props.texture.babylonTexture
        triPlanarMaterial.tileSize = props.texture.size

        boxRef.current.material = triPlanarMaterial
    }, [])

    const meshRenderSize = getTileBoxMeshRenderSize(props.box)
    return (
        <box
            name={props.id}
            id={props.id}
            position={getTileBoxMeshRenderPosition(props.box)}
            scaling={meshRenderSize}
            wrap={true}
            enablePointerMoveEvents={props.enablePointerMoveEvents ?? true}
            ref={boxRef}
        ></box>
    )
}

This is scene code:

                                    <>
                                        <arcRotateCamera name="Camera1" target={Vector3.Zero()} alpha={-Math.PI / 2} beta={Math.PI / 3} radius={10} />
                                        <hemisphericLight name="Light1" intensity={0.7} direction={Vector3.Up()} />
                                        <EditorToolView tool={model.selectedEditorTool} textures={model.textures} />
                                        <WorldView blocks={blocks} textures={model.textures} />
                                    </>
7

I can reproduce it in example, just change Y size to 20, then sides are black and top wall is getting white, why is it happening? https://playground.babylonjs.com/#ED6HW8#8

8

Non uniform scaling is currently not handled by the tri-planar material.

This PR will fix it:

2 Likes
9

That was fast, thanks! How long it usually takes from PR to release?

10

The Playground will be updated the day after the PR is merged (which should happen today I think), and the npm packages are available on the next friday after the PR is merged.

2 Likes
12

There are still some bugs I think, most of the time it seems to work correctly but for some sizes it behaves odd. In example here - https://playground.babylonjs.com/#ED6HW8#11 box is very dark, for some sizes it’s very bright, like here https://playground.babylonjs.com/#ED6HW8#12

13

Indeed, there was also a bug in the case of uniform scaling, when the scaling is not 1.

This PR will fix the problem:

2 Likes
14

Thank you very much