Using uvs on sps causes inverted rows?

Questions
1

I’m trying to apply a texture over a wall of cubes like this: https://playground.babylonjs.com/#V9FSLG#1
As you can see, the whole image is displayed, as each cube gets a little part of the texture. This is the correct look.

But now i’m trying to do the same thing with the SPS, and it ‘kind of’ works, but each 2nd row is inverted. I’m fairly sure the math is correct, but I suspect it has something to do with how textures are applied on the mesh.
https://playground.babylonjs.com/#US03I4#5

Any ideas where i’m going wrong with this here?

2

Hi JD. Friend, SPS inventor, and superhero @jerome has a dynamicTextured exploding wall of SPS particles… here…

http://jerome.bousquie.fr/BJS/demos/blow.html

A look-see at blow.js source… http://jerome.bousquie.fr/BJS/demos/blow.js… mid-doc… there’s a function called sps.initParticles. Aw heck, I’ll just paste the func below…

    sps.initParticles = function(widthNb, heightNb, size) {
        var p = 0;
        for (var j = 0; j < heightNb; j++) {
            for (var i = 0; i < widthNb; i++) {

                // let's position the quads on a grid
                sps.particles[p].position.x = i * size + sps.vars.shiftx;
                sps.particles[p].position.y = j * size + sps.vars.shifty;
                sps.particles[p].position.z = 0;

                // let's set the texture per quad
                sps.particles[p].uvs.x = i * size / sps.vars.totalWidth;
                sps.particles[p].uvs.y = j * size / sps.vars.totalHeight;
                sps.particles[p].uvs.z = (i + 1) * size / sps.vars.totalWidth;
                sps.particles[p].uvs.w = (j + 1) * size / sps.vars.totalHeight;

                // set a custom random value per particle
                sps.particles[p].rand =  1 / (1 + Math.random()) / 10;

                // increment the particle index
                p++;
            }
        }
    }

Maybe there is something in the UV ops there… that could give some help. No promises. :slight_smile:

1 Like
3

Thanks, ill check the example.

Mine looks like the example you posted, but on the back of that wall! Each odd row is ‘inverted’!

1 Like
4

Yuh, good and interesting observation.

I found a few playground examples of the SPS wall… like this one… https://www.babylonjs-playground.com/#5RVPZK#1 .

I selected various BJS versions from “latest”… back to 3.3… all had same phenomena.
(on back-side of wall).

I don’t know if this is a bug or not. Might be normal, but… strange, that’s for sure.

Calling all helpers… ideas/comments welcome.

1 Like
5

Yeah I tried using UV faces and any setting I could find regarding this, this might just be a actual bug. I can’t make any reason why only every 2nd row would be inverted…

6

@jerome some help if possible

7

I would say that there is something wrong in the way how you lay your cubes. You should lay them in the same order as you map the uvs.

I have changed the coordinates for the front side and it looks ok (adding counters instead of subtracting and changed them). I would also lay all sides the same way and then rotate particles for each side around pivot point.

1 Like
8

I did exactly as you described regarding pivot and rotating, but it increases complexity quite alot, because you lose the positioning and everything needs to be adjusted and computed via that pivot.
I’m thinking ill try to create a separate shape, and swap the faces, and then apply the texture. Ill see if it works…

This is a clear simple example: https://www.babylonjs-playground.com/#ICZEXW#294

9

Got it solved. Did a invert of the back face.
https://www.babylonjs-playground.com/#ICZEXW#295

3 Likes