透视投影时反转z轴

Question

I am creating a rhythm game. But I am not using metronome to calculate¬ the positions of the notes on the screen (game interface). What I have is a file with notes map that is very similar to a subtitles file.

The problem is that when I project the notes in perspective, the notes are not shown correctly. It seems that I have inverted the Z axis and I can not change it. I would like to know how to change the axis correctly because. Or if someone can help me with other solution, I would appreciate. I tried different things but I am not capable to make appear the notes correctly.

Here is the fiddle , and the function where I execute the calculation of the perspective.

function updateNotes() {
    currentPosition = (sound.seek() * 1000);

    notes.forEach(function(note, index) {
    var notePosition = (currentPosition * noteSpeed) - ((note.position * noteSpeed) - deadLine);

    if (notePosition > offScreenY && notePosition < height) {
    var ball = new Ball3d(5, '#000000');
    var scale = fov / (fov + notePosition);
    console.log(notePosition);
    ball.x = halfWidth;
    ball.y = halfHeight + notePosition * scale;
    ball.scaleX = ball.scaleY = scale;
    ball.draw(context);
    balls.push(ball);
  } else {
    // elimino la nota
    balls.splice(index, 1);
  }
  });
}

Thanks in advance.

Answer 1

The z-axis isn't inverted, the notes are coming from top to bottom, but they seem like they are going further away, as they scale down, so you have to adjust your scale-assignment. When using var scale = (fov + notePosition) / fov; it looks more like they are coming towards the user, although you'd have to adjust your formula a bit more to give it a better look.

  // init variables var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), width = canvas.width = window.innerWidth, height = canvas.height = window.innerHeight, halfWidth = width / 2, halfHeight = height / 2, deadLine = height - 100, fov = 250, offScreenY = -100, currentPosition = 0, balls = [], noteSpeed = 0.3, animId; var sound = new Howl({ src: ['https://rawcdn.githack.com/noeszc/atwood/master/assets/sounds/mario.ogg'], onload: function(){ setup(); }, onend : function(){ stop(); } }); function setup(){ sound.play(); sound.mute(); drawDeadLine(); gameLoop(); } function gameLoop() { animId = requestAnimationFrame(gameLoop, canvas); context.clearRect(0, 0, width, height); updateNotes(); drawDeadLine(); } function updateNotes() { currentPosition = (sound.seek() * 1000); notes.forEach(function(note, index) { var notePosition = (currentPosition * noteSpeed) - ((note.position * noteSpeed) - deadLine); if (notePosition > offScreenY && notePosition < height) { var ball = new Ball3d(5, '#000000'); var scale = (fov + notePosition)/fov; ball.x = halfWidth; ball.y = halfHeight + notePosition * scale; ball.scaleX = ball.scaleY = scale; ball.draw(context); balls.push(ball); } else { // elimino la nota balls.splice(index, 1); } }); } // dibuja la linea base donde deben llegar las notas al ritmo function drawDeadLine() { context.beginPath(); context.moveTo(0, deadLine); context.lineTo(width, deadLine); context.stroke(); } function stop() { context.clearRect(0, 0, width, height); cancelAnimationFrame(animId); drawDeadLine(); console.log('======= end music ========='); console.log(balls); } 

 body { margin: 0; } canvas { display: block; } 

 <script src="https://rawcdn.githack.com/noeszc/atwood/master/scripts/ball3D.js"></script> <script src="https://rawcdn.githack.com/noeszc/atwood/master/scripts/notes.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.2/howler.min.js"></script> <canvas id="canvas"></canvas>