Почему анимация ведет себя не адекватно WebGL

SkyWeb · Регистрация: 04.04.2015

Author24 — интернет-сервис помощи студентам

Всем привет.

Вот пример: http://playcode.io/224929?tabs... .js&output

Тут 2 файла
engine.js - библиотека
test.js - тут работаем с библиотекой

Если Вы откроете пример то все работает отлично, большой треугольник крутиться вокруг маленького треугольника.
Но если вы перейдете на другую вкладку (на любой другой сайт, не закрывая эту вкладку), на 1-2 секунды, и вернетесь обратно, будет видно что треугольник который крутится сместился.

Почему так происходит?! Как будто если пользователь не находится на этой вкладке, позиция меняется дальше, а вращение останавливается. И когда мы возвращаемся обратно на страницу, получается что позиция сменилась и включается дальше вращение.

Пожалуйста подскажите в чем проблема, почему так происходит? Заранее всем спасибо.

Добавлено через 4 часа 55 минут
Нашел способ отследить что именно происходит. Сделал через

Javascript

1 2	window.onblur = function () { console.warn('>>> onblur'); } window.onfocus = function () { console.error('>>> onfocus'); }

И выявил вот такую вот вещь

Javascript

Угол 1.53 , Позиция 0.0085 ,
Угол 1.6199999999999999 , Позиция 0.009 ,
Угол 1.53 , Позиция 0.0085 ,
Угол 1.44 , Позиция 0.008 ,
>>> onblur
>>> onfocus
Угол 113.85 , Позиция 0.6325 ,
Угол 1.53 , Позиция 0.0085 ,
Угол 1.6199999999999999 , Позиция 0.009 ,
Угол 3.1500000000000004 , Позиция 0.0175 ,
Угол 1.26 , Позиция 0.007 ,

Видно скачек угла и позиции. Ошибка во времени которое я получаю с момента последней отрисовки. requestAnimationFrame останавливается если перейти на другую вкладку и потом запускается если вернуться, разница во времени большая, и после умножения угла и позиции на это большое время вот и получается большой такой скачек. Буду думать как исправить.

Добавлено через 27 минут

Javascript

renderer.animate(scene, function(seconds) {
  var deg = 90 * seconds;
  var pos = 0.5 * seconds;
 
  object.matrix.rotation(deg, 0.0, 0.0, 1.0);
  object.matrix.position(pos, 0, 0);
});

Заменил на

Javascript

var deg = 0;
renderer.animate(scene, function(seconds) {      
  deg += 90 * seconds;
      
  object.matrix.matRotation(deg, 0.0, 0.0, 1.0);
  object.matrix.position(0.35, 0, 0);
});

Что изменилось:
1) Угол мы всегда прибавляем к прошлому углу, это как раз на тот случай если мы вышли, вернулись и видим нужный угол, буд-то анимация шла пока нас не было на сайте.
2) Матрицу модели я всегда переопределяю. Создаю новую матрицу вращения, вращаю и потом к ней применяю позицию.

Тогда все работает как нужно.

@8Observer8 · 06.03.2019, 13:23

Сообщение от SkyWeb

большой треугольник крутиться вокруг маленького треугольника.

Google Translate:
Я вижу только один треугольник, который вращается с разной скоростью. Вначале треугольник вращается с очень высокой скоростью, и в дальнейшем скорость снижается. Это нормально?

В следующий раз скопируйте код на форуме, потому что ваш пример может быть изменен или может быть удален из playcode.io. Прочитайте правило 4.11:

4. Порядок создания тем.

11. Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме.

Original Message

I see only one triangle that rotates with different speed. At beginning the triangle rotates with a very high speed and further the speed speed down. Is it normal?

In next time copy code on the forum because your example may be changed or it may be deleted from playcode.io. Read the rule 4.11:

4. Порядок создания тем.

11. Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме.

@8Observer8 5158 / 2770 / 465 Регистрация: 05.10.2013 Сообщений: 7,321 Записей в блоге: 147
	06.03.2019, 13:23	2
	Сообщение от SkyWeb большой треугольник крутиться вокруг маленького треугольника. Google Translate: Я вижу только один треугольник, который вращается с разной скоростью. Вначале треугольник вращается с очень высокой скоростью, и в дальнейшем скорость снижается. Это нормально? В следующий раз скопируйте код на форуме, потому что ваш пример может быть изменен или может быть удален из playcode.io. Прочитайте правило 4.11: 4. Порядок создания тем. 11. Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме. Original Message I see only one triangle that rotates with different speed. At beginning the triangle rotates with a very high speed and further the speed speed down. Is it normal? In next time copy code on the forum because your example may be changed or it may be deleted from playcode.io. Read the rule 4.11: 4. Порядок создания тем. 11. Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме. 0