All my viewport cordinates are upside down

[PowerKuz]

Im new to pixi and im trying to create a chunk system in pixix js. But for some reason is all my cordinates upside down so x is -x and y is -y. I have no idea of whats happening so how can i fix this. 

 

<script src="https://pixijs.download/v6.1.1/pixi.min.js"></script>
<script src="https://github.com/davidfig/pixi-cull/releases/download/2.0.1/pixi-cull.min.js"></script>
<script src="https://github.com/davidfig/pixi-viewport/releases/download/4.31.0/viewport.min.js"></script>

const app = new PIXI.Application({autoResize: true, resolution: devicePixelRatio})
document.body.appendChild(app.view)

// create viewport
const viewport = new pixi_viewport.Viewport({
  screenWidth: window.innerWidth,
  screenHeight: window.innerHeight,
  worldWidth: 3000000,
  worldHeight: 3000000,
  interaction: app.renderer.plugins.interaction
})

app.stage.addChild(viewport)
viewport.drag().pinch().wheel().decelerate().moveCenter(0, 0)

const shader = PIXI.Shader.from(`
    precision mediump float;
    attribute vec2 aVPos;
    attribute vec2 aIPos;
    attribute vec3 aICol;

    uniform mat3 translationMatrix;
    uniform mat3 projectionMatrix;

    varying vec3 vCol;

    void main() {
        vCol = aICol;

        gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVPos + aIPos, 1.0)).xy, 0.0, 1.0);
    }`,

`precision mediump float;

    varying vec3 vCol;

    void main() {
        gl_FragColor = vec4(vCol, 1.0);
    }

`);

const chunk_size = 16
const block_size = 100
var chunks = {}

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
}
function pos_string(x,y){
    return String(x) + ':' + String(y)
}

function append_chunk(mesh, x, y){
    chunks[pos_string(x,y)] = mesh
}

function add_chunk(x,y, blocks = new Array(chunk_size * chunk_size)){
    const geometry = new PIXI.Geometry()
        .addAttribute('aVPos', [block_size, 0, 0, 0, 0, block_size,
                           block_size, 0, block_size, block_size, 0, block_size]);

    geometry.instanced = true;
    geometry.instanceCount = chunk_size * chunk_size;

    const positionSize = 2;
    const colorSize = 3;
    const buffer = new PIXI.Buffer(new Float32Array(geometry.instanceCount * (positionSize + colorSize)));
    geometry.addAttribute('aIPos', buffer, positionSize, false, PIXI.TYPES.FLOAT, 4 * (positionSize + colorSize), 0, true);
    geometry.addAttribute('aICol', buffer, colorSize, false, PIXI.TYPES.FLOAT, 4 * (positionSize + colorSize), 4 * positionSize, true);

    
    const ex_chunk = chunks[pos_string(x,y)]
    if (ex_chunk){
        buffer.data = ex_chunk[1].data
        viewport.removeChild(ex_chunk[0])
    }

    for (const block of blocks) {
        const x = block.position.x + 1
        const y = block.position.y
        const instanceOffset = (x * y) * (positionSize + colorSize);
        const block_rgb = hexToRgb(block.color)

        buffer.data[instanceOffset + 0] = x * block_size;
        buffer.data[instanceOffset + 1] = y * block_size;

        buffer.data[instanceOffset + 2] = block_rgb ? block_rgb.r : 0;
        buffer.data[instanceOffset + 3] = block_rgb ? block_rgb.g : 0;
        buffer.data[instanceOffset + 4] = block_rgb ? block_rgb.b : 0;
    }
    const mesh = new PIXI.Mesh(geometry, shader);

    mesh.position.set(x * chunk_size * block_size, y * chunk_size * block_size);

    chunks[pos_string(x,y)] = [mesh, buffer]
    viewport.addChild(mesh)
}


// her is where i add and its inverted
add_chunk(-1,0, [{position: {x: 0, y: 0}, color: '#ff00ff'}])
add_chunk(0,0, [{position: {x: 5, y: 0}, color: '#0000ff'}])

setTimeout(t, 1000)

const cull = new Cull.Simple()
cull.addList(viewport.children)
cull.cull(viewport.getVisibleBounds())

PIXI.Ticker.shared.add(() => {
  if (viewport.dirty) {
    cull.cull(viewport.getVisibleBounds())
    viewport.dirty = false
  }
})

[ivan.popelyshev]

const instanceOffset = (x * y) * (positionSize + colorSize);

what the heck is that?

[PowerKuz]

Whats wrong with:
const instanceOffset = (x * y) * (positionSize + colorSize);

? Isnt that how i get the position of a item in the intanced geometry

Edited August 10, 2021 by PowerKuz

[Yeferson]

A quick solution could be:
x *= -1
y *= -1

I also use viewport and I did that hahaha

[Yeferson]

    for (const block of blocks) {
        const x = block.position.x + 1
        const y = block.position.y
        const instanceOffset = (x * y) * (positionSize + colorSize);
        const block_rgb = hexToRgb(block.color)

        buffer.data[instanceOffset + 0] = x * block_size;
        buffer.data[instanceOffset + 1] = y * block_size;

        buffer.data[instanceOffset + 2] = block_rgb ? block_rgb.r : 0;
        buffer.data[instanceOffset + 3] = block_rgb ? block_rgb.g : 0;
        buffer.data[instanceOffset + 4] = block_rgb ? block_rgb.b : 0;
    }

If you analyze the system a bit you may notice an error with " x * y * (positionSize + colorSize) "

Example:

blocks =  [
   {
     position: {x: 0, y: 1}, 
     color: "#000"
   }, 
   {
     position: {x: 1, y: 0}, 
     color: "#000"
   }
 ] 

With the first block the instanceOffset will be equal to: 0 * 1 * (2 + 3) = 0

and with the second block the instanceOffeset will be equal to: 1 * 0 * (2 + 3) = 0

So when you add the value of the second block to the buffer.data you will be replacing the data of the first block.

I don't have idea what you are trying to do but by analyzing that formula you can realize that problem

[ivan.popelyshev]

usually its something like "x + y * width" , not "x*y"

[Yeferson]

If you want to add it one after the other (Consecutively) you can use the following:

let sz = 0
for (const block of blocks) {
    const x = block.position.x + 1
    const y = block.position.y
    const block_rgb = hexToRgb(block.color)

    buffer.data[sz++] = x * block_size;
    buffer.data[sz++] = y * block_size;

    buffer.data[sz++] = block_rgb ? block_rgb.r : 0;
    buffer.data[sz++] = block_rgb ? block_rgb.g : 0;
    buffer.data[sz++] = block_rgb ? block_rgb.b : 0;
}

 

[Yeferson]

1 minute ago, ivan.popelyshev said:

usually its something like "x + y * width" , not "x*y"

Yes but I think he tries to add something like information for the shader right?

[ivan.popelyshev]

I mean, that in two-dimensional grid that is stuffed in one dimension array its "x+y*width" , and that's whats happenning here - grid separated to instances that are going to one-dimensional array

[Yeferson]

True, so you should use (x + y * chunk_size) * (positionSize + colorSize);

for (const block of blocks) {
    const x = block.position.x + 1
    const y = block.position.y
    const instanceOffset = (x + y * chunk_size) * (positionSize + colorSize);
    const block_rgb = hexToRgb(block.color)

    buffer.data[instanceOffset + 0] = x * block_size;
    buffer.data[instanceOffset + 1] = y * block_size;

    buffer.data[instanceOffset + 2] = block_rgb ? block_rgb.r : 0;
    buffer.data[instanceOffset + 3] = block_rgb ? block_rgb.g : 0;
    buffer.data[instanceOffset + 4] = block_rgb ? block_rgb.b : 0;
}