Как избежать размытия объекта при изменении позиции физикой?

Question

[historydev]

Для отрисовки используется p5js, но это можно повторить на любом языке и любой граф. библиотеке (не движком).

Если двигать объект без фикс. временного шага и интерполяции - он чёткий, а с фикс. и интерполяцией - мыльный, если убрать интерполяцию - ещё и дёрганый по понятным причинам.
- Комменты оставил.

Песочница: editor.p5js.org, вставьте пример слева и запустите кнопкой или ctrl + enter.

const step = 1 / 60; // Шаг физики
let acc = 0; // Аккумулятор

let pos1; // Верхний прямоугольник 
let lastPos1; // Последняя позиция верхнего прямоугольника
let pos2; // Нижний прямоугольник

// Функция вызывается один раз (init)
function setup() {
  createCanvas(windowWidth, windowHeight); // Создаём канвас
  frameRate(144); // Устанавливаем кол-во кадров / сек
  
  // Инициализируем позиции прямоугольников
  pos1 = createVector(0, height/2 - 100); 
  pos2 = createVector(0, height/2);
}

// Функция вызывается каждый кадр
function draw() {
  background(220); // Заливаем фон
  
  acc += deltaTime / 1000; // Увеличиваем аккумулятор
  
  lastPos1 = pos1; // Сохраняем последнюю позицию верхнего прямоугольника
  
  
  while(acc >= step) { // Пока аккумулятор больше шага физики
    pos1.x += 100 * step; // Двигаем верхний прямоугольник вправо
    acc -= step; // Уменьшаем аккумулятор
  }
  
  pos2.x += 100 * (deltaTime / 1000); // Двигаем нижний прямоугольник вправо
  
  const alpha = acc / step; // Коэффициент интерполяции
  
  // Интерполяция позиции
  const interpPos = p5.Vector.lerp(lastPos1, pos1, alpha);
  
  // Верхний прямоугольник (двигает: физики)
  rect(interpPos.x, interpPos.y, 200, 50);
  
  // Нижний прямоугольник (двигает: рендер)
  rect(pos2.x, pos2.y, 200, 50);
}

Comments

[GavriKos]

Честно не вижу никакой мыльности.

Мб дело в антиалиасинге или подобной фигне?

[VoidVolker]

GavriKos,
Вот тут на скриншоте по отрисовке видно, что у них позиционирование отличается:

x4

Причём, что интересно, по вертикали там x.5 позиция, а если округлить до целого — то и по вертикали добавляются "тени".

[historydev]

GavriKos, frameRate под свою герцовку пробовали менять?

Эффект можно усилить понижением частоты кадров относительно герцовки:
frameRate(60);

[historydev]

VoidVolker, Что значит x4, x.5?
- Их позиции не должны совпадать, т.к. к верхнему применяется интерполяция, пробовал округлять координаты, нейросети кричат что это решает проблему - но это не так или я что-то делаю не так.

[VoidVolker]

historydev, x4 — масштаб скриншота, x.5 — десятичная часть координаты по вертикали. По горизонтали там тоже дроби после точки. Я бы предположил, что это косяк конкретного движка рендеринга или каких-то его опций. Возможно там какое-то масштабирование, сглаживание или толщина линий отличается от одного пикселя. При целых координатах линии смазаны и судя по всему попадают не в пиксель, а между ними и в резульатате чем-то сглаживаются.

[GavriKos]

historydev, кста, а попробуйте то же самое сделать вообще без рендер движка. Чисто на канвасе.

Теория - что движок все равно рендерит через камеру, а не через честные пиксели. Вот и накапливается ошибка

[historydev]

VoidVolker, Ситуация повторится если сделать тоже самое на: rust + macroquad, c++ + glfw - так что дело точно не в рендере, вот пример на rust:
Cargo.toml:

[package]
name = "Example"
version = "0.1.0"
edition = "2021"

[dependencies]
macroquad = "0.4.13"

main.rs

use interpolation::lerp;
use macroquad::color::{BLACK, LIGHTGRAY, WHITE};
use macroquad::prelude::{
    clear_background, draw_rectangle, draw_rectangle_lines, next_frame, screen_width,
};
use macroquad::time::get_frame_time;
use macroquad::window::screen_height;
use miniquad::conf::Conf;

#[derive(Clone, Copy)]
struct Pos {
    x: f32,
    y: f32,
}

pub fn conf() -> Conf {
    Conf::default()
}

#[macroquad::main(conf)]
async fn main() {
    const STEP: f32 = 1. / 60.;
    let mut acc: f32 = 0.;

    let mut pos1 = Pos {
        x: screen_width() / 2.0,
        y: screen_height() / 2. - 100.,
    };
    let mut last_pos1 = pos1;
    let mut pos2 = Pos {
        x: screen_width() / 2.0,
        y: screen_height() / 2.,
    };

    loop {
        clear_background(LIGHTGRAY);

        acc += get_frame_time();

        last_pos1 = pos1;

        while acc >= STEP {
            pos1.x += 100. * STEP;
            acc -= STEP;
        }

        pos2.x += 100. * get_frame_time();

        let alpha = acc / STEP;

        draw_rectangle(
            lerp(&last_pos1.x, &pos1.x, &alpha),
            lerp(&last_pos1.y, &pos1.y, &alpha),
            200.,
            50.,
            WHITE,
        );

        draw_rectangle_lines(
            lerp(&last_pos1.x, &pos1.x, &alpha),
            lerp(&last_pos1.y, &pos1.y, &alpha),
            200.,
            50.,
            2.,
            BLACK,
        );

        draw_rectangle(pos2.x, pos2.y, 200., 50., WHITE);

        draw_rectangle_lines(pos2.x, pos2.y, 200., 50., 2., BLACK);

        next_frame().await
    }
}

[historydev]

GavriKos, Дело точно не так глубоко

[VoidVolker]

historydev, ваш код на расте не проверял, но вот например я спокойно рисовал и в том же древнем GDI и просто полностью ручной отрисовкой и анимацией, и на canvas в браузере и проблем с точным позиционированием элементов по пикселям не было.

[historydev]

VoidVolker, С изменением позиции как в моём случае?

[VoidVolker]

historydev, да.

[historydev]

VoidVolker, Вы не на том зациклились - проблема не в отрисовке. Вот последний пример, чистый канвас:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

const step = 1 / 60;
let acc = 0;
let lastTime = 0;

let pos1 = { x: 0, y: 0 };
let lastPos1 = { ...pos1 };
let pos2 = { x: 0, y: 0 };
let lastPos2 = { ...pos2 };

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    pos1.y = canvas.height / 2 - 100;
    pos2.y = canvas.height / 2;
    lastPos1.y = pos1.y;
    lastPos2.y = pos2.y;
}

window.addEventListener('resize', resize);
resize();

function lerp(start, end, t) {
    return start + (end - start) * t;
}

function update(dt) {
    acc += dt;
    lastPos1 = { ...pos1 };
    lastPos2 = { ...pos2 };

    while (acc >= step) {
        pos1.x += 100 * step;
        acc -= step;
    }

    pos2.x += 100 * dt;
}

function draw() {
    ctx.fillStyle = 'rgb(220, 220, 220)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const alpha = acc / step;
    
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;

    const ix1 = lerp(lastPos1.x, pos1.x, alpha);
    ctx.fillRect(ix1, pos1.y, 200, 50);
    ctx.strokeRect(ix1, pos1.y, 200, 50);

    const ix2 = lerp(lastPos2.x, pos2.x, alpha);
    ctx.fillRect(ix2, pos2.y, 200, 50);
    ctx.strokeRect(ix2, pos2.y, 200, 50);
}

function loop(currentTime) {
    const dt = (currentTime - lastTime) / 1000;
    lastTime = currentTime;

    update(dt);
    draw();

    requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

Answer 1

[Пума Тайланд]

У тебя lastPos1 = pos1 копирует ссылку на вектор, а не его значение. После физического цикла оба имени указывают на один объект с уже обновлённым x, и lerp интерполирует между двумя одинаковыми точками — по факту ничего не делает. Замени на lastPos1 = pos1.copy(), тогда интерполяция заработает как задумано. Если после этого останется мыльность от субпиксельного рендера — попробуй округлить координаты перед отрисовкой, но для плавной анимации это может добавить лёгкое дрожание.

Comments

[historydev]

Да, упустил ссылку - эффект всё равно остаётся, и чем больше скорость - тем лучше его видно.
- Подёргиваний не должно быть, в этом и смысл интерполяции.

const step = 1 / 60; // Шаг физики
let acc = 0; // Аккумулятор

let pos1; // Верхний прямоугольник 
let lastPos1; // Последняя позиция верхнего прямоугольника
let pos2; // Нижний прямоугольник
let lastPos2;

// Функция вызывается один раз (init)
function setup() {
  createCanvas(windowWidth, windowHeight); // Создаём канвас
  frameRate(144); // Устанавливаем кол-во кадров / сек
  
  // Инициализируем позиции прямоугольников
  pos1 = createVector(0, height/2 - 100); 
  pos2 = createVector(0, height/2);
}

// Функция вызывается каждый кадр
function draw() {
  background(220); // Заливаем фон
  
  acc += deltaTime / 1000; // Увеличиваем аккумулятор
  
  lastPos1 = pos1.copy(); // Сохраняем последнюю позицию верхнего прямоугольника
  lastPos2 = pos2.copy();
  
  
  while(acc >= step) { // Пока аккумулятор больше шага физики
    pos1.x += 300 * step; // Двигаем верхний прямоугольник вправо
    acc -= step; // Уменьшаем аккумулятор
  }
  
  pos2.x += 300 * (deltaTime / 1000); // Двигаем нижний прямоугольник вправо
  
  const alpha = acc / step; // Коэффициент интерполяции
  
  // Интерполяция позиции
  const interpPos1 = p5.Vector.lerp(
    createVector(lastPos1.x, lastPos1.y),
    createVector(pos1.x, pos1.y),
    alpha
  );
  
  // Верхний прямоугольник (двигает: физики)
  rect(interpPos1.x, interpPos1.y, 200, 50);
  
  // Интерполяция позиции
  const interpPos2 = p5.Vector.lerp(lastPos2, pos2, alpha);
  
  // Нижний прямоугольник (двигает: рендер)
  rect(pos2.x, pos2.y, 200, 50);
}

[historydev]

Забытая ссылка ввела меня в заблуждение, теперь при переносе обновления последней позиции в цикл физики всё работает как нужно:

const step = 1 / 30; // Шаг физики
let acc = 0; // Аккумулятор

let pos1; // Верхний прямоугольник 
let lastPos1; // Последняя позиция верхнего прямоугольника
let pos2; // Нижний прямоугольник
let lastPos2;

// Функция вызывается один раз (init)
function setup() {
  createCanvas(windowWidth, windowHeight); // Создаём канвас
  //frameRate(144); // Устанавливаем кол-во кадров / сек
  
  // Инициализируем позиции прямоугольников
  pos1 = createVector(0, height/2 - 100); 
  lastPos1 = pos1.copy();
  pos2 = createVector(0, height/2);
}

// Функция вызывается каждый кадр
function draw() {
  background(220); // Заливаем фон
  
  acc += deltaTime / 1000; // Увеличиваем аккумулятор
  
   // Сохраняем последнюю позицию верхнего прямоугольника
  lastPos2 = pos2.copy();
  
  while(acc >= step) { // Пока аккумулятор больше шага физики
    lastPos1 = pos1.copy();
    pos1.x += 100 * step; // Двигаем верхний прямоугольник вправо
    acc -= step; // Уменьшаем аккумулятор
  }
  
  pos2.x += 100 * (deltaTime / 1000); // Двигаем нижний прямоугольник вправо
  
  const alpha = acc / step; // Коэффициент интерполяции
  
  // Интерполяция позиции
  const interpPos1 = p5.Vector.lerp(
    createVector(lastPos1.x, lastPos1.y),
    createVector(pos1.x, pos1.y),
    alpha
  );
  
  // Верхний прямоугольник (двигает: физики)
  rect(interpPos1.x, interpPos1.y, 200, 50);
  
  // Интерполяция позиции
  const interpPos2 = p5.Vector.lerp(lastPos2, pos2, alpha);
  
  // Нижний прямоугольник (двигает: рендер)
  rect(pos2.x, pos2.y, 200, 50);
}