Инверсия оси z при проецировании в перспективе

Question

Я создаю ритм-игру. Но я не использую метроном, чтобы вычислять позиции заметок на экране (игровой интерфейс). У меня есть файл с картой заметок, который очень похож на файл субтитров.

Проблема заключается в том, что при проектировании нот в перспективе примечания отображаются неправильно. Кажется, что я перевернул ось Z, и я не могу ее изменить. Я хотел бы знать, как правильно изменить ось, потому что. Или, если кто-то может помочь мне с другим решением, я был бы признателен. Я пробовал разные вещи, но я не способен правильно отображать заметки.

Here is the fiddle и функция, в которой я выполняю расчет перспективы.

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); 
    } 
    }); 
} 

Заранее спасибо.

Answer 1

Ось Z не инвертирована, ноты идут сверху вниз, но они кажутся, что они уходят дальше, так как они уменьшаются, поэтому вам нужно настроить назначение шкалы. При использовании var scale = (fov + notePosition)/fov; это больше похоже на то, что они приближаются к пользователю, хотя вам придется немного подправить свою формулу, чтобы лучше выглядеть.

// 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>