25 мая 2010 в 13:53

3d движок на js + canvas

Как то раз наткнулся я на забугорную статью про светлое будущие Canvas и WebGL, и была в этой статье картинка с «3d чайничком» нарисованном c помощью canvas'a, поразила она меня ну прям ващеее, понял я что должен сделать нечто подобное, и сделал.

image


Делая поправку на производительность JavaScript, z-буфер реализовал по полигонный, а не по пиксельный. Выглядит всё хорошо пока нет взаимного пересечения проникновения моделей.

Экспорт модели происходит прямо из 3ds max, через ASCII Scene Export.

image

Должно работать во всех хороших последних браузерах. В демку добавил «спидометр» или «FPSмометр» или «FPSметр», ну вы поняли — в вверху справа, «текущий FPS» — опредаляяется по последним 10и рендерам, а «средний» по всем рендерам с самого начала работы скрипта, серез пару минут среднее значение перестает колебаться и показывает истинное значение скорости работы браузера.

У меня расстановка сил следующая:

image

для ie использовался explorercanvas

— огорчает отсутствие поддержки canvas в ie9 preview, по первым впечатлением jit в нём работает оч хорошо.

Какое будущие у этой технологии? Кто-то видит в этом основу для будущих онлайн игр, кто-то конкурента флешу, кто-то ненужный тег в html, а как вы считаете? Пока что единственное применение которое я нашел — это потестировать скорость работы браузеров.

P.S. пока WebGL не используется, но планирую его прикрутить и сравнить результаты.

UPD1: (версии браузеров)
Chrome 5.0.375.53 beta
FireFox 3.6.3
Opera 10.51

UPD2: (подробности)
image

UPD3: Хабраэффект со свистом вынес vps,… подкрутил гайки, пнул и он снова в строю.

UPD4: Добавил результаты FF 3.7 Alpha 4
(спасибо за результаты в комментах, но я тут подумал, если я их добавлю в сводную статистику, то она не будет отражать реальную картину, ибо железо у всех разное — по слабже/по мощнее)
Алексей Емельянов @babarun
карма
67,0
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (74)

  • +3
    А какие версии браузеров?
    у меня в опере 10.54 (3388) среднее — 40
    в хроме 4.1.249.1064 (45376) — 27
    в статье наверно хром 5?
    • 0
      да, хром — пятая бета, какие еще браузеры погонять?
    • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    График крайне невнятный, видно только лидеров (и то догадываешься)
    • +1
      Ещё бы построить график использования CPU.
      У меня, к примеру (Intel 2.4 GHz, C2D)

      960 — Opera 58%, Safari 63%
      2880 — Opera 62%, Safari 68%
  • 0
    Сделайте пожалуйста более явные цвета и легенду побольше, а то по ниточкам сложно цвет понять, а также добавьте версии браузеров и ос, которые вы использовали.
  • +1
    WebGL в разы быстрее, чем все эти велосипеды. 20 fps на 960 полигонах (Chrome 6.0.401.1, Mac OS X Snow Leo, Mac mini с GMA 950).
    WebGL'ный Quake 2 летает :)
    • 0
      я бы сказал в сотни раз быстрее, но его судьба пока под вопросом — ждём в какую сторону повернётся MS
      • 0
        Mozilla, а не MS ;)
  • +2
    Хабраэффект в действии…
    • +2
      сервак скончался в конвульсиях…
      • +2
        перезаливай, так делать нельзя
      • 0
        собственно, а зачем за тем урлом пхп файл? сделай хтмл-статику, твой nginx выдержит без пхп
    • –2
      В очередь, гады, в очередь.
      • +1
        правильная цитата — «сукины дети»
    • 0
      да уж, пятисотая стабильно!
      тест на выносливость завален)
  • 0
    Красиво, черт возьми!
  • +1
    Samsung i5700, Android 2.1 (JE1)
    960 — 1.3
    1200 — 1.1
    1440 — 1
    1680 — 0.8
    1920 — 0.7
    Дальше тестить некогда, работа. Если надо позже продолжу тестить

    • +1
      2160 — 0,7
      2400 — 0.6
      2640 — 0.6
      2880 — 0.5

      P.S. Не удержался, растянул перерыв, интерес поборол желание поработать. Нельзя такие темы посреди рабочего дня кидать, все сразу кидаются тестировать!
      P.P.S. Могла быть погрешность, т.к. в фоне постоянно синхронизировался по WiFi.
      • 0
        ой спасиба! ввечером надеюсь на ipad'e потестировать.
        • 0
          Мне куда интереснее тесты на Nexus One и HTC HD2 (под Opera Mobile 10)
          • 0
            на HTC HD2 Opera Mobile 10
            1920 — 0.8
            пока что мобильные устройства не для таких целей. Надо аккумуляторы поемче — тогда и гигахерцы пойдут повыше. А там, глядишь, и ускорители графики помощней)
            • 0
              Понятно что не для этого, но тут спортивный интерес.
              Померятся скоростью браузеров, и длинной мегагерцев :)
              Больше всего интересуют результаты нексуса с прошивкой 2.1 и 2.2. Говорят в 2.2 сильно ускорили браузер, хочется пруфа!
  • 0
    Nokia 5800 с Opera Mobile, 960 полигонов — 1 fps :)
    Стандартный браузер не отображает :(
    • 0
      2880 — 0.3 fps…
  • +1
    Записывайте результаты для Epiphany (Дефолтный браузер для Gnome) и Midori (Дефолтный браузер для XFCE):

    960 полигонов 38
    1200 полигонов 34.1
    1440 полигонов 32.2
    1680 полигонов 29.1
    1920 полигонов 26.5
    2160 полигонов 24.7
    2400 полигонов 23.8
    2640 полигонов 22.2
    2880 полигонов 20.5

    Вообщем, Safari — подвинься, Opera — держись, «босота» на пятки наступает. :)
  • 0
    Chrome 6.0.408.1 dev

    960 полигонов — 61 fps
    2880 полигонов — 33 fps
    • 0
      впечатляет! чуть поподробнее?
      • +1
        Видимо есть зависимость от производительности самой машины, вот у человека ниже еще выше показатели
    • +1
      У меня одного возникают мысли, что Хром хочет обогнать не только по производительности, но и по номеру мажорной версии?
  • 0
    Желательно перед тем как меряться указывать процессор и частоту (если разогнан)
    Core i5 750 @ default Turbo Boost on,

    Chrome 6.0.408.1 все ядра:
    960 — 63
    2888 — 40

    Chrome 6.0.408.1 одно 4-ое ядро:
    960 — 68 (загрузка ядра ~45%)
    2888 — 40 (загрузка ядра ~55%)
  • 0
    Core i5 750 @ default, Nvidia GT 220

    Firefox 3.7 Alpha 4 (D2D) enabled
    960 — 115
    2888 — 45

    Видуха слабовата, офисная лошадка, все-таки
    • 0
      Видяха тут особого значения не имеет
      • 0
        В данном случае имеет, ибо включено аппаратное ускорение видеокартой.
        • 0
          Это не webgl, это обычный 2d canvas, все расчеты по 3d преобразованиям выполняет скрипт.
          • 0
            Вот лишь бы затроллить. Кто говорил WebGL?
            Пусть расчеты по преобразованию вершин делают скрипт, а вот отрисовка полигонов ускоряется видеокартой, причем отрисовка ест куда больше ресурсов, чем просчет координат.
            Прирост должен быть больше, просто скрипт как-то неоптимизировано кушает ресурсы, ни один из браузеров не нагружал ядро больше чем на 70%.
            • 0
              при отрисовке — самые ресурсоёмкие операции — это заливка замкнутого контура и сглаживание, которые аппаратно поддерживаются(на уровне драйвера видеокарты) с незапамятных времён, это объясняет ваш потрясающий резулатат в 115 против моих 29 (без аппаратного ускорения)
              • 0
                Это мне как раз понятно, megahertz писал что видяха тут особого значения не имеет, с чем я не согласен.
                Теоретически дома фпс должен быть больше, т.к. 8800GTS, приду потестирую.
            • 0
              Отрисовка 3000 полигонов это не та задача которая загрузит современный GPU. Заливка действительно выполняется долго, но если посмотреть загрузку GPU то она находится на уровне 0-1% (Opera 10.53, 6600GT), так что потери где-то выше.

              Троллить никого не собирался, если в чем-то не прав или не так понял, то извиняюсь.
  • 0
    Chromium 6.0.415.0 (48135):
    2880 полигонов — Средний fps: 35.7
    960 полигонов — Средний fps: 62.2
  • 0
    MacBook Pro 2.16 GHz Intel Core Duo
    Mac OS X 10.6.3
    Firefox 3.6.3

    Tекущий fps: 8
    Средний fps: 8.3
    Полигонов: 2880
    Вершин: 1440
  • 0
    Когда же уже Q3 Arena сделают на яваскрипте… а ведь когда-то сделают =)
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Игра запускается через плугин ;)
        • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Думаю, к тому времени мы будем смотреть на Q3 Arena Javascript как сейчас смотрим на эмулятор Денди или сборки первого Принца персии, лишь как на нечто далекое и ностальгическое. К тому времени процессоры станут настолько быстры, что Q3 можно будет написать на любом языке для этого не предназначенном. Хотя к тому времени наверное все забудут про Javascript.
  • +1
    Интересно заливку Гуро добавить… Когда цветовая координата всего одна (градации красного, например), она должна сводиться к LinearGradient…
  • 0
    AMD Athlon 64 X2 5000+, 2Gb Ram, Radeon 4650

    Opera 10.54 Beta (3394):
    Текущий fps: 22
    Полигонов: 2880
    Вершин: 1440

    Chrome 5.0.396.0:
    Текущий fps: 27.6
    Полигонов: 2880
    Вершин: 1440
  • 0
    Intel core 2 cpu 6300 1.86GHz, 2gb Ram, Nvidia 7900

    Opera 10.54
    Средний fps: 24
    Полигонов: 2880
    Вершин: 1440

    Chrome 5.0.396.0:
    Средний fps: 14.7
    Полигонов: 2880
    Вершин: 1440
  • 0
    Интересно было-бы узнать сколько ресурсов потребляют расчеты, и сколько — отрисовка в canvas.
  • 0
    Мой адблок зачем-то скушал все картинки. в посте. Буду думать(
  • 0
    Кпк HP rw6815
    opera mobile:
    960 — 0.4
    2880 — 0. На глаз, где-то 1 кадр в 5-7 секунд
    Остальные не пробовал. Опера при этом работает стабильно, не тормозит.
  • 0
    iPhone 3G:
    safari: среднее ~1.1-1.2 / 960 полигонов.
    opera — (нет результата)
    • 0
      и не могло быть, так-как яваскрипты вырезаются.
  • 0
    может сделать отдельную сводную таблицу для мобильных устройств?
  • 0
    Chrome 6.0.401.1

    Текущий fps: 43.3
    Средний fps: 41.6
    Полигонов: 1440

    Текущий fps: 29.6
    Средний fps: 27.8
    Полигонов: 2880

    • 0
      Обновил chrome и сравнил результаты. Итог — новая сборка дает +1% к производительности
      • 0
        Что-то вы намутили во второй строке
        • 0
          точно, там должен быть минус -1.01%
  • 0
    Провел тестирование дома, чуть позже попробую добавить IE9 Preview 2.
    • 0
      Резкое падение/прирост производительности в FF 3.7, могу объяснить только тем что сработал EIST, проверял раз 20, результат один.

      Проверка проводилась на чистом браузере без плагинов, все приложения были переведены на первое ядро, тестируемый браузер на второе (в Хроме поставил главному процессу Affinity на второе ядро, все следующие процессы форкались с правильным Affinity). Перед каждым тестом открывалась новая пустая вкладка, закрывалась вкладка с тестом, после чего в оставшейся пустой вставлялась, скопированная заранее, ссылка на тест. Тест проводился 3 раза на каждый режим в обе стороны.

      Была замечена очень странная особенность, объяснение которой не могу найти:
      если тест закрывать во время того как фигура повернута на 0-40 градусов относительно старта — результат на 5-20% больше. Причем во всех браузерах. Картина повторяется если вместо закрытия вкладки просто клацать по ссылке.
    • 0
      Поставил последний IE9 Preview, работает просто ужасно, видать из-за ExCanvas.
      Щас попробую сохранить и отключить эмуляцию для IE9, stay tuned
  • +4
    Очень не понравилась строка:
    setTimeout(draw, 40);
    Вы же ограничиваете производительность.

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

    P.S. Сделал минимальную оптимизацию:
    удалил указанную строчку, а в onload поставил setInterval(draw, 0); — результат в FF3.7 с D2D при 960 полигонах вырос до 183фпс, ядро наконец-то загружено полностью.
    • 0
      результат в FF3.7 с D2D при 960 полигонах вырос до 183фпс

      Было 129…
    • –1
      самому не очень, но «setInterval(draw, 0)» ещё хуже — загрузка цп 100%, правилная реализация есть в процессинге и заключается она в том, что бы держать планку не ниже ~24 кадров в секунду и не перегружать ЦП
      • +1
        Если вы ставите счетчик фпс и приводите сравнение разных браузеров, то не корректно неполностью нагружать проц. Это уже не бенч а демка и счетчик надо убрать.

        Плюс ко всему у вас скорость вращения привязана к фпс, а не ко времени, что есть не гуд. Неужели нельзя было сделать cam.z_rotation = (Date.now() % 10000) / 10000 * 2 * Math.Pi; ?
        • +1
          небольшая поправка: Math.PI, писал с телефоне, сразу не увидел :(
        • +1
          Если надо стартовать всегда с одной точки можно при инициализации сохранить время старта:
          var test_start_time = Date.now();

          а при отрисовке считать:
          cam.z_rotation = ( (Date.now() - test_start_time) % 10000) / 10000 * 2 * Math.Pi;
  • 0
    AMD Athlon II X2 245@3.48, без видеокарты (AMD785G)
    Полигонов: 2880

    Chrome 5.0.375:
    fps: 49
    Firefox 3.6.3:
    fps: 19
    Opera 10.50:
    fps: 34
  • 0
    Вроде пока никто не написал, напишу. Итак, Nokia n900.
    Microb@960: 1.7 fps
    Opera 10@960: 3.6 fps
    Chromium@960 (ого): 4.8 fps

    Who's your, как грицца, daddy :P
  • 0
    Текущий fps: 13.4
    Средний fps: 13.6
    Полигонов: 1920
    Вершин: 960

    FF 3.6.3, Archlinux x64, Core2 Duo E8200 @ 2.66GHz, Nvidia GeForce 8600 GT, драйвер nvidia 195.36.15
    Cpu0: 64.5%us, 6.5%sy, 0.0%ni, 29.0%id, 0.0%wa, 0.0%hi, 0.0%si, 0.0%st
    Cpu1: 64.1%us, 5.8%sy, 0.0%ni, 30.2%id, 0.0%wa, 0.0%hi, 0.0%si, 0.0%st

    FF ощутимо напрягся…

    Из Майки бы как-нить попробовать, а то облом ставить макс :), тем более он глючит и тормозит в вмвари.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.