Кто какую игру делает? Скрины

[den]

вот так выглядит основной цикл (в начале программы вызывается функция _step):

var _step = function() {
        setTimeout(function() {
                if(_run) {
                    requestAnimFrame(_step);
                    _this.step();
                }
            }, 1000/_fps);
    } 


_fps - это фпс, в данном случае 60
requestAnimFrame - это requestAnimationFrame, только с префиксами:

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame;
})(); 


_this.step - функция где всё и происходит (в том числе и рендер)


Сам рендеринг использую крайне просто:
есть несколько тайлсетов (карта, декорации, человек), и рендерю отдельный спрайт из тайлсета с помощью функции ctx.drawImage с 9 параметрами, где ctx - контекст канвы. 1 параметр - тайсет, 2-5 - положение спрайта и размер спрайта на тайлсете, 6-9 - положение и размер спрайта на канвасе. Больше никакие методы из ctx не вызываю (ну кроме отчистки). Мне показалось это наиболее производительным решением. Это так и есть?

Буквально всё разбито по классам, есть несколько слоев абстракций, я написал только саму суть.

есть ли элементы пверх канвы (их ререндер, может вызывать рефлой, и ререндер всей канвы).

не очень понял, но на страничке кроме канваса ничего нет.

Если по ноду и socket.io что нада - говори, я тоже юзаю их и юзал в нескольких проектах.

ок) но пока идет всё гладко, и то и то весьма очень простое, но при этом очень мощное

[moka]

У тебя таймер в таймере, ты в курсе?

Всё что тебе нужно это только requestAnimationFrame:

function render() {
  requestAnimFrame(function() {
    render();
  });

  // твой рендер тут

} 


Ну и естественно почти такой-же костыль как твой, только с использованием таймера как фаллбэк:

window.requestAnimFrame = (function() {
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
})(); 


ок) но пока идет всё гладко, и то и то весьма очень простое, но при этом очень мощное

Угу, как только познаёшь простоту и мощ, другое брать ничего не хочешь. Но там есть много тонкостей, т.к. например socket.io очень абстрагирован от внутрянки, и не все знают как он на самом деле использует xhr-longPoll в большинстве случаев (на андройде например), что не тоже самое что и WebSockets.
Далее сессия и утентификация - тоже нужно чуток middleware понять.
Ну там потом будут тонкости.

[ABTOMAT]

Сделал подобие скиннинга.
Всю ночь парился Были моменты, когда не понимал, что 10 раз всё проверил, а всё равно не работает. Эмоции были как у этого шофёра:

Видео на YouTube

Наконец с ResetXForm'овой помощью заставил работать (естессно дальше мне придётся отказаться от такого чита, как ResetXForm в Максе и учесть все трансформации самостоятельно). А ещё мне надо хранить изначальное положение костей в позе Т, делать экспортёр из Макса, чтобы веса вершин экспортил... Весов ещё и в движке нетуть: привязка определяется прямо в шейдере по z-координате вершины. Мда, топорно. Но хотя бы уже есть отчего отталкиваться. Очень хочу в ближайшем времени загрузить не сосиску на палочке, а нормального солдатика.
Там же.

[den]

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

У тебя таймер в таймере, ты в курсе?

Всё что тебе нужно это только requestAnimationFrame:

function render() {
  requestAnimFrame(function() {
    render();
  });

  // твой рендер тут

} 


Но в этом случае фпс не будет ограничен. Скорость передвижения героев ограничить то не сложно (сделать её обратно зависимой от времени прорисовки кадра), но хороши ли, что браузер жрет всё время и игра почти не спит?

UPD: я походу ошибался, requestAnimationFrame ограничивает фпс до 60, и вариант моки работает одинокого хорошо и на хроме и на лисе (хотя на хроме всё таки игра основное время спит, а на лисе рисует)

[moka]

requestAnimFrame будет всегда стараться придерживаться 60 кадрам. Если старый комп, упадёт до 30ти, и будет придерживаться 30ти. Т.к. придерживаться определённого FPS на много лучше чем прагать вверх-вниз.

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

Например:
nx += elapsed * speed;
где elapsed - будет мс после последнего рендера до текущего. Например при 60 фпс, elapsed будет 16мс. При скорости 1.0, это 16 единиц. Если фпс упал до 35, то elapsed будет 28.6, и скорость следственно увеличивается.
Можно нормализовать это число от 0.5 до 1.0 (30 - 60 фпс). И это и будет дельта, затем делить на неё все время зависимые изменения.

Учти что requestAnimFrame будет всегда стараться иметь 60 кадров, и не более, следственно и setTimeout должен быть 1000 / 60, и никак не иначе.

[ABTOMAT]

Опять ковырял свой двиг... Где до сих пор одна глобальная shaderProgram. А для скелетки мне нужны раздельные вершинные шейдеры для скиненных мешей и не скиненных. В-общем оказалось что мне придётся прибрать кучу всего в порядок.

А ещё веса не увидеть никак: моделек-то пока заскиненных нет.

Не очень-то слепишь вручную буфер меша с вершинами с весами... Придётся импортить из Макса. Набросал скелеточку: чайник крутит носиком как слон.

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

[Mr_F_]

Нельзя просто взять и получить соответствие id : вес для каждой вершины.

Можно! (не удержался). С этим как раз всё наименее через жопу там (подробности запостил в асю).

[ABTOMAT]

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

Можно! (не удержался). С этим как раз всё наименее через жопу там (подробности запостил в асю).

А вот куй там! Можно-то можно, но совпадает нумерация не во всех случаях! Тем не менее спасибо за советы, они ускорили мой прогресс.

При экспорте модельки метрокопа порядок совпал, а вот у чайника — нет. Я не знаю, может, там иерархия влияет, хотя судя по всему нет... В асю написал подробности.

Итак, джентльмены! Впервые за несколько дней мало-мальски интересный скриншот:



Ссылка

Можно крутить камеру вокруг сцены при помощи A и D.

Сделал скелетку.

Ну, "Сделал" — громко сказано. Вопросов появилось больше, чем ответов.

Во-первых, с чайником почему-то перепутались id костей, с метрокопом при экспорте всё ОК. Даже не знаю, буду ли сейчас исправлять, посмотрим, как оно себя ведёт на других модельках.

Во-вторых, столкнулся с проблемой, что заскиненная модель требует 8 дополнительных атрибутов для каждой вершины, а точнее с тем, что структура буфера стала другая, и, чтобы не перепуталась нумерация в буферах статичных моделей пришлось им тоже добавить веса и id (нулевые). Вот такой костыль. По-хорошему надо переключать шейдер, а шейдер у меня всего один.

В него пишется куча атрибутов во время рендера, всё размазано по говнокоду... Чтоб сделать переключение шейдеров, придётся собрать всё это говно, размазанное по стенам. С другой стороны, всё равно когда-то придётся этим заняться.

В-третьих, почему-то обосрались группы сглаживания при экспорте метрокопа из Макса (виноваты ли в этом веса вершин? буду ещё ковырять). Это можно заметить по несглаженности модельки. И вроде UV тоже обосралися (на ногах-то).

Ещё нужно сделать детект класса костей, чтобы они своими полигонами не портили вид.

Ну, в-общем, работы ещё дохренища. В области скиннинга и не только. На скрине — два брата-акробата из Халвы.

[Mr_F_]

Отчасти кусок планируемой игры, а заодно и моя дипломная работа (успешно сданная).
Освещение на всём/от всего что размером от тачки и менее - динамическое, на остальном препросчитанное.

[ABTOMAT]

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

Отчасти кусок планируемой игры, а заодно и моя дипломная работа (успешно сданная).
Освещение на всём/от всего что размером от тачки и менее - динамическое, на остальном препросчитанное.

Ну всё, теперь на мой большой пост никто внимания не обратит

[Taugeshtu]

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

Отчасти кусок планируемой игры, а заодно и моя дипломная работа (успешно сданная).
Освещение на всём/от всего что размером от тачки и менее - динамическое, на остальном препросчитанное.

Сюда бы ещё тень от ножек стульев и стола на второй скрин, чтоб рядом с точкой касания была... Мечты)

[Mr_F_]

Если приглядишсься, они там есть, но слишком размытые).
Для теней от солнца мне удалось сделать плавное увеличение пенумбры (PCSS+VSM), но для кучи фонариков это было неподъёмно, так что для них я сделал просто dual paraboloid + VSM с конст блюром.

----
Вот кстати скрины с оригинальной proof-of-concept демки отдельно теней
----

Если кому интересно, то вот и она сама:
http://rghost.net/47769774

В ini файлике можно поменять разрешение.
Если у вас не нвидия - снизьте antialiasing, т.к. по умолчанию там нвидия-специфик CSAA.

Мышь + WASD - летать
LMB - задать направление света в соответствнии с направлением камеры.
Колесо мыши - менять размер источника света (т.е. размер пенумбры теней). Идеально чёткими конечно не сделать, т.к. ограничено разрешением шадоумапы.

Требуется нормальная видеокарта скорее всего.
---

Вообще эта демка куда более извращенская чем финал. Изначально я юзал summed area tables для быстрого и широкого блюра, но их генерация, вес и ломание точности флоата заставили меня на них забить (но в демке они).

[impersonalis]

Какова тем диплома? Можно ли будет почитать?

[Mr_F_]

Какова тем диплома?

"Реалистичные материалы в реалтайм рендеринге".
Планировалось как обычно в 10 раз больше и круче всего, но что успелось, то успелось :D.
Ещё видосики есть, потом залью.
---
Почитать как-нибудь могу кинуть, но из-за идиотского требования "не меньше 60 страниц", чтиво пришлось наполнять водой и искусственно растягивать. Я думаю перепилить потом в нормальную укороченную версию.

[Arton]

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

Если приглядишсься, они там есть, но слишком размытые).
Для теней от солнца мне удалось сделать плавное увеличение пенумбры (PCSS+VSM), но для кучи фонариков это было неподъёмно, так что для них я сделал просто dual paraboloid + VSM с конст блюром.

----
Вот кстати скрины с оригинальной proof-of-concept демки отдельно теней
----

Если кому интересно, то вот и она сама:
http://rghost.net/47769774

В ini файлике можно поменять разрешение.
Если у вас не нвидия - снизьте antialiasing, т.к. по умолчанию там нвидия-специфик CSAA.

Мышь + WASD - летать
LMB - задать направление света в соответствнии с направлением камеры.
Колесо мыши - менять размер источника света (т.е. размер пенумбры теней). Идеально чёткими конечно не сделать, т.к. ограничено разрешением шадоумапы.

Требуется нормальная видеокарта скорее всего.
---

Вообще эта демка куда более извращенская чем финал. Изначально я юзал summed area tables для быстрого и широкого блюра, но их генерация, вес и ломание точности флоата заставили меня на них забить (но в демке они).

Влетает при запуске, в лог ничего не пишет, в консоли ругается на "shadowDemo.ids".