Помогите с имитацией глубины в HTML5 Canvas

Question

По сути, я пытаюсь сделать 3D-проекцию на 2D-холст с имитацией глубины. Как правило, тела, которые находятся дальше, «затенены» больше и меньше, чем тела, которые находятся ближе к зрителю. Единственное, чего не хватает, так это того, что тела, которые находятся дальше, всегда тянутся за телами, которые находятся ближе.

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

Я пытаюсь решить это, сортируя тела по z-позиции. Массив тел представляет собой массив объектов с 0, содержащим массив позиции тела, 0 - это x, 1 - это y, 2 - это z. Сначала у меня обновляется положение тел в соответствии с поворотами по осям x, y и z, сохраняются в значении np объекта body, затем выполняется сортировка и рисуется тело. Я пытался изменить порядок сортировки массива, изменить порядок цикла, но сигары по-прежнему нет.

Просто интересно, может ли кто-нибудь указать мне правильное направление, чтобы заставить этот трехмерный «движок» вести себя правильно. Любая помощь приветствуется. Несколько быстрых примечаний: Вращение по трем осям осуществляется с помощью клавиш Q / A, W / S и E / D, увеличение и уменьшение оси Z осуществляется с помощью клавиш R / F, а вращение по умолчанию относительно ось z может быть выполнена с помощью клавиши P. То, что я пытаюсь сделать, находится здесь:

http://jsbin.com/aholu/5/

Answer 1

Вы сортируете исходные значения xyz вместо преобразованных значений np. Я сделал так, чтобы выглядело правильно, переключаясь ...

    bodies.sort(function(a,b) {return a[0][2]-b[0][2]});
to
    bodies.sort(function(a,b) {return a.np[1]-b.np[1]});

с изменениями см. http://home.comcast.net/~trochoid/mod5.html

Я не слежу за всем вашим кодом, так что это может не быть полным решением. В частности, я думал, что он будет отсортирован по np [2] для преобразованного значения z, но np [1] дает правильные результаты. Я думаю, может быть, вы переключите эти координаты. Кроме того, похоже, что вы трансформируете и проецируете значение z, а кодовое исправление, приведенное выше, сортирует это проецируемое значение z. Кажется, все работает хорошо, но я никогда не проектировал само значение z, просто использовал преобразованный z для проецирования xy. В любом случае, выглядит хорошо!

Answer 2

Я знаю, что это не отвечает на первоначальный вопрос, но в зависимости от того, чего вы пытаетесь достичь в целом, имейте в виду, что существует также «параллаксная прокрутка» ( пример ) (особенно в CSS3 ( пример ).

Answer 3

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

Если вы заметили, что оси вращения для x и y вращаются при вращении любой другой оси (например, если вы нажимаете W, чтобы повернуть, а затем повернуть другую ось, а затем снова нажмите W, вы заметите, что спираль в вашем коде вращается так же). T

это не так с осью Z. Независимо от того, как вы вращаете оси x и y, ось z всегда будет вращаться «справа налево» (например, в конфигурации по умолчанию спираль идет по оси z или ось поворачивается с помощью клавиш E / D, но если вы вращаете спираль вдоль любой другой оси, вращение с помощью клавиш E / D больше не приводит к спирали спирали).

Я не знаю, почему поведение на этой оси будет другим, поэтому я хотел бы, чтобы вы помогли этому вращению работать правильно. Спасибо.