forum.boolean.name - WebGL тесты

forum.boolean.name (http://forum.boolean.name/index.php)

- Болтовня (http://forum.boolean.name/forumdisplay.php?f=25)

- - WebGL тесты (http://forum.boolean.name/showthread.php?t=18530)

Mr_F_

12.09.2013 17:36

WebGL тесты

Вложений: 1

Тоже пишу свой мини-движок на webGL.

Просьба затестить:
http://ftest1024.zz.mu/webgl.html
Мышка/тач - крутить камерой, WASD летать, c шифтом быстрее.

В первую очередь интересуют телефоны.
Зарепортите сюда:
- время загрузки;
- тормозит или нет;
- удаётся ли крутить камеру тачем.

А ещё расскажите мне, как на телефонах люди ходят в играх от 1 лица?
Типа, чем WASD заменить? Там же тоже кнопки типа стрелочек есть? Может знаете как их детектить в JS?
Я видел только варианты с виртуальным джойстиком в углу экрана, но ИМХО очень неудобно.

---
upd: модель устройства тоже интересно знать

Harter

12.09.2013 17:39

Ответ: WebGL тесты

8 сек
нет
не удаётся

Dream

12.09.2013 18:46

Ответ: WebGL тесты

Цитата:

Сообщение от Mr_F_ (Сообщение 266901)

Тоже пишу свой мини-движок на webGL.

Просьба затестить:
http://ftest1024.ucoz.ru/webgl.html
Мышка/тач - крутить камерой, WASD летать, c шифтом быстрее.

В первую очередь интересуют телефоны.
Зарепортите сюда:
- время загрузки;
- тормозит или нет;
- удаётся ли крутить камеру тачем.

А ещё расскажите мне, как на телефонах люди ходят в играх от 1 лица?
Типа, чем WASD заменить? Там же тоже кнопки типа стрелочек есть? Может знаете как их детектить в JS?
Я видел только варианты с виртуальным джойстиком в углу экрана, но ИМХО очень неудобно.

---
upd: модель устройства тоже интересно знать

Обычно в шутерах на моьбилах - с левой стороны двух позицоный джойстик(вперед назад) весь остальной экран(или правая половина) для вращения камеры через драг

moka	12.09.2013 18:48

Ответ: WebGL тесты

На Mac OS X в Chrome не загружается - жпеги не грузятся, и много храма в консоли.
Сделай progress bar загрузки, и выведи если не удалось загрузить.

Dream

12.09.2013 18:51

Ответ: WebGL тесты

Цитата:

Сообщение от moka (Сообщение 266913)

В сафари все ок

Mr_F_

12.09.2013 19:12

Ответ: WebGL тесты

Цитата:

Сделай progress bar загрузки, и

токо что добавил.
---
правда чёто он у меня только в лисе пашет, а хром не обновляет канвас пока всё не загрузится.
---

Цитата:

жпеги не грузятся, и много храма в консоли.

жпеги не грузятся - это ты в консоли прочитал? это as designed, так и должно быть, он просто проверяет наличие файлов :D

Цитата:

с левой стороны двух позицоный джойстик(вперед назад) в

это я про него и писал: "варианты с виртуальным джойстиком в углу экрана, но ИМХО очень неудобно.".
разве не удобнее кнопочками ходить было бы? у меня от этого экранного джойстика багет полный.

moka	12.09.2013 19:19

Ответ: WebGL тесты

progress бар сделай DOM'ом а не в канве.

Mr_F_

12.09.2013 19:34

Ответ: WebGL тесты

добавил домовый прогресс в виде циферки процента загрузки, НО в хроме даже он не обновляется пока всё не загрузится.
видимо ничего там не обновляется, пока не выполнится длинный JS.
в лисе обе версии пашут. не могу понять как заставить хром.

moka	12.09.2013 21:01

Ответ: WebGL тесты

Юзаешь requestAnimationFrame для загрузки? Если да, то ничего не обновится во время выполнении callback'а в requestAnimFrame.
ЗЫ, в FF на маке работает как положено. Красивая сценка.

Только сделай чтобы канва расейзилась на весь экран :)

Gector

12.09.2013 21:11

Ответ: WebGL тесты

Цитата:

Сообщение от Mr_F_ (Сообщение 266917)

Блин. Заработало только на десктопном лисе. Ни на десктопном хроме ни на хроме в Xperia Sola не пашет(.

Mr_F_

12.09.2013 21:12

Ответ: WebGL тесты

Цитата:

Юзаешь requestAnimationFrame для загрузки

Нет, там setInterval раз в секунду обновляет прогрессбар.
"игра" сама тоже им обновляется 60 раз в сек.
До этого пробовал requestAnimationFrame, но почему-то (?) он выглядел тормозяще в лисе (фпс на 20), хоть в хроме и работал как положено.
СетИнтервал работает одинаково плавно в обоих браузерах.
Оба браузера последние версии.

Цитата:

Только сделай чтобы канва расейзилась на весь экран

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

Цитата:

Ни на десктопном хроме

ну почему в хроме всё время всё не пашет? он что, ИЕ?
как именно не пашет?
этот сайт у тебя в хроме что говорит? http://doesmybrowsersupportwebgl.com/

moka	12.09.2013 21:19

Ответ: WebGL тесты

На счёт requestAnimFrame - куча примеров онлайн ложные и сбивают с толку, поэтому и может голимо работает.

Gector

12.09.2013 21:20

Ответ: WebGL тесты

Цитата:

Сообщение от Mr_F_ (Сообщение 266924)

ну почему в хроме всё время всё не пашет? он что, ИЕ?

Сам уже подумываю вернуться к лисе.:mad:

Цитата:

Сообщение от Mr_F_ (Сообщение 266924)

как именно не пашет?

Долго грузит не показывая экран загрузки. А потом показывает 98% и все.

Цитата:

Сообщение от Mr_F_ (Сообщение 266924)

http://doesmybrowsersupportwebgl.com/

yay).

Mr_F_

12.09.2013 21:31

Ответ: WebGL тесты

Цитата:

Долго грузит не показывая экран загрузки. А потом показывает 98% и все.

тоже такое в нём славливаю.
по какой-то необъяснимой причине пара текстур не загружается при ctrl+f5.
зато если второй раз зайти туда же (или нажать просто ф5 после 98%) без полного обновления, то догружается %)

картинки создаются так:

Код:

                                        var tex = gl.createTexture();

                                        tex.image = new Image();

                                        

                                        tex.image.onload = function(fname, tex)

                                        {

                                                return function()

                                                {

                                                        onLoadTexture(fname, tex);

                                                }

                                        }(fname, tex);

                                        

                                        tex.image.src = fname;

                                        resourcesLoading++;



--------



                        function onLoadTexture(fname, tex)

                        {

                                filesLoaded++;

                                RenderProgressBar(filesLoaded/filesToLoad);



                                resourcesLoading--;

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

Mr_F_

12.09.2013 22:17

Ответ: WebGL тесты

по какой-то таинственной причине у меня теперь пашет и в хроме. может и у вас?
кое-что менял но вроде не должно было повлиять

RBK	13.09.2013 13:34

Ответ: WebGL тесты

все работает, загружается 10 - 12 секунд. FPS всего 2. браузер FF23.0.1

Mr_F_

13.09.2013 13:43

Ответ: WebGL тесты

Цитата:

FPS всего 2

это на ПК или чём?

Dream

13.09.2013 15:53

Ответ: WebGL тесты

Сквозь стенку возле стола и стульчика можно вылететь из комнаты кстати:)

Mr_F_

13.09.2013 16:07

Ответ: WebGL тесты

ага, коллизию пару минут назад добавил, она ещё в процессе =)
---
вроде починил там некоторое

moka	13.09.2013 17:29

Ответ: WebGL тесты

Юзаешь чистый WebGL или какие-то фреймворки?

Mr_F_

13.09.2013 17:32

Ответ: WebGL тесты

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

модели грузяться из формата, который я юзал раньше в своём C++/DX9 движке, соответственно, у меня был экспортер отлаженный.
коллизию писал первый раз в жизни.

moka	13.09.2013 17:33

Ответ: WebGL тесты

Как первые впечатления от WebGL и от JS?

Mr_F_

13.09.2013 17:41

Ответ: WebGL тесты

JS - быстрее, чем я ожидал. Ещё на его примере первый раз узнал, что такое лямбда-выражения (спс. Автомату за объяснение).
Но серьезное чёто реально конечно не напишешь на нём. Где мои SSE-интринсики, где полный контроль за памятью, почему я не могу кастовать что угодно в что угодно? :D

WebGL - убитый, даже до ДХ9 не дотягивает, ему ещё предстоит развиваться. Нет sRGB гамма коррекции (она в железе встроена), UBO (aka constant buffers из дх10+), шейдерная версия допотопная - не могу задать layout юниформов чётко, да вообще капец.
Но в принципе после ДХ8 с ассемблерными шейдерами и ограничением на пару десятков инструкций, меня уже сложно напугать. Если очень хотеть что-то реализовать, то можно.

Wegox

13.09.2013 18:01

Ответ: WebGL тесты

Хром 98% Лиса 0%:)

Mr_F_

13.09.2013 18:11

Ответ: WebGL тесты

Цитата:

Хром 98% Лиса 0%

ПК? Последние версии браузеров?
В лисе, можешь нажать правой мышкой - Inpsect Element, выбрать console и скопировать её содержимое?
В хроме можешь нажать тот же inpsect element и тоже скопировать?
--
кажется нашёл баг: в хроме у одной текстуры вызывается эвент onerror - попробую повторно форсить загрузку. но почему он срабатывает, причём так непостоянно?

проверьте повторно у кого 98%, а то у меня хром опять самопочинился.
--
щас вот словил, но форсированный релоад спас!
---
алсо в лог во время onerror хром пишет "Failed to load resource" - но тоже через раз

moka	13.09.2013 19:24

Ответ: WebGL тесты

WebGL - это же OpenGL ES 2.0 - то же дерьмо что и на мобилках.
Следственно ожидать от него чего-то крутого - не стоит.

А про шейдеры, хз, я писал на HLSL (dx9 sm3.0) и большой разницы с GLSL ES не уловил (ну синтаксис и мелочи есть, но не вижу ограничений у второго перед первым).

лямбда-функций кстати таки в JS нету, это ты говоришь про anonymous functions.
Лямбда или inline (оффициально arrow function) выглядит так:

PHP код:


		
			
arr.sort((a, b) => a - b );

Является частью ECMA6 (harmony) и пока только держиться в последних FF, очень приятно порой писать такие функции.
CoffeeScript уже давно поддерживает их - но я терпеть не могу это кофейное дерьмище.

Кстати, если по JS нада чё, спрашивай тож. Я правда в асе не бываю почти :)

Wegox

13.09.2013 19:30

Ответ: WebGL тесты

Цитата:

Сообщение от Mr_F_ (Сообщение 266991)

Да, теперь чётко всё.:super: Хром.

Видео на YouTube

RBK	13.09.2013 20:38

Ответ: WebGL тесты

Цитата:

Сообщение от Mr_F_ (Сообщение 266971)

это на ПК или чём?

да мой старичок пк, записан в подписи.

Mr_F_

13.09.2013 20:55

Ответ: WebGL тесты

Цитата:

да мой старичок пк, записан в подписи.

но 2 фпс это сурово, даже в телефонах больше наблюдается.
можешь сказать свой фпс на каждой из этих страниц? (там не будет сцены, будет просто серый/красный фон, но фпс интересен все равно)
http://ftest1024.ucoz.ru/webgl_nofill.html
http://ftest1024.ucoz.ru/webgl_onecolor.html
http://ftest1024.ucoz.ru/webgl_empty.html

ffinder

13.09.2013 21:24

Ответ: WebGL тесты

ноутбук, видеочип HD3000, linux mint 14, firefox 16 - работает отлично

единственный баг - ты не ограничил поворот по вертикали, можно перевернуться вверх ногами и тогда очень странно всё это смотрится;)

LLI.T.A.L.K.E.R.

14.09.2013 10:07

Ответ: WebGL тесты

На фф не загрузилась страница даже
В хроме норм 56 фпс.
всё последней версии
комп года 2011

но пользуюсь я фф

А в хроме много инф-ии дал

Mr_F_

14.09.2013 11:28

Ответ: WebGL тесты

прям совсем странно. может переустановить ФФ? какие-то плагины стоят кроме адблока?
а чужие демки пашут? например
http://psych.gs/public_html/playgame...=Danger%20Dirt

RBK	14.09.2013 21:31

Ответ: WebGL тесты

http://ftest1024.ucoz.ru/webgl_nofill.html - стабильно 2 fps
http://ftest1024.ucoz.ru/webgl_onecolor.html - 6-7, иногда падает до 5
http://ftest1024.ucoz.ru/webgl_empty.html - 5-6 fps

может у меня выключено что нужное?

Mr_F_

14.09.2013 21:41

Ответ: WebGL тесты

Цитата:

может у меня выключено что нужное?

похоже на то. в webgl_empty вообще ничего не рисуется, а просто серый фон.
можешь попробовать в хроме ещё?
а дрова на видюху давно обновлял?

Кирпи4

14.09.2013 23:13

Ответ: WebGL тесты

стабильно в районе 60 fps

RBK	14.09.2013 23:49

Ответ: WebGL тесты

Обновил дрова, все также
да в webgl_empty просто серый фон
хрома у меня нет, может позже поставлю попробую.

Nex	15.09.2013 06:33

Ответ: WebGL тесты

В Хроме:
55-58 фпс
100%

mauNgerS

15.09.2013 19:32

Ответ: WebGL тесты

Хром
58-62
58-62
100%

Mr_F_

17.09.2013 01:27

Ответ: WebGL тесты

адрес поменялся
http://ftest1024.zz.mu/webgl.html

тач теперь в телефонах и планшетах точно должен работать.
прогресс бар должен показывать более реалистичное отображение процентов (к тем у кого был всё время 0%).

Arton

17.09.2013 02:27

Ответ: WebGL тесты

Цитата:

Сообщение от Mr_F_ (Сообщение 267204)

ФПС стал 15 =/
В самом первом демо было 60.

wolfhound512

17.09.2013 10:00

Ответ: WebGL тесты

Opera 16
FPS: 58-62

Прогрессбар так и должен раходиться от центра?

Mr_F_

17.09.2013 11:02

Ответ: WebGL тесты

Цитата:

ФПС стал 15 =/
В самом первом демо было 60.

на чём/в чём запускаешь?
возможно в этот раз у тебя фоном куча тяжелых прог висело просто?)

Цитата:

Прогрессбар так и должен раходиться от центра?

потом исправлю)
но он до 100% доходит? не до 250 или 406? а то такой баг тоже был.
---

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

Arton

17.09.2013 14:38

Ответ: WebGL тесты

Цитата:

Сообщение от Mr_F_ (Сообщение 267218)

на чём/в чём запускаешь?
возможно в этот раз у тебя фоном куча тяжелых прог висело просто?)

Ой забыл :@ Файерфокс конечно, нет тяжёлых прог не было. Мозила плагинами не нагружена.
Прогрессбар работает нормально.

________________

Сейчас ты менял, фпс стал прежнем, бешено мигает 62.

m_512

18.09.2013 00:00

Ответ: WebGL тесты

Фпс 60 стабильно, GTX570.
Но камера какая-то дерганная (см видео), сделай сглаживание параметров и можно даже слегка инертности добавить как в панорамах. будет лучше.

Видео на YouTube

moka	18.09.2013 02:50

Ответ: WebGL тесты

Nexus 4:
Chrome Beta 30fps
Firefox Beta - 60fps (стабильно)

С разрешением, на мобилках нужно поипаться. Во первых есть два варианта - придерживаться DPI следственно разрешение обычно будет 320x480, либо не придерживаться, то оно будет обычно такое же как и мобила поддерживает, но естественно фпс будет гораздо ниже.

Чтобы насильно поставить разрешение ниже на мобилках, добавь в header вот это:

PHP код:


		
			
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

Также это отрубает скейлинг и т.п.

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

mauNgerS

18.09.2013 04:23

Ответ: WebGL тесты

ПК хром
58-62
Планшет huawei mediapad fhd - вылетает и в хроме и во встроенном браузере
Телефон LG Optimus II пишет не удалось инициализировать webgl

Mr_F_

18.09.2013 12:16

Ответ: WebGL тесты

Цитата:

Также это отрубает скейлинг и т.п.

добавил )

Цитата:

Это нужно для мобилок когда ориентацию меняешь, или некоторые броузеры адрес бар уберают.

у меня есть

Код:

                        window.onresize = function(e)

                        {

                                canvas.width = window.innerWidth;

                                canvas.height = window.innerHeight;

срабатывает при смене размера окна на винде или вытаскивании снизу консоли. не работает на телефонах?

Цитата:

ну и для проекции матрицу пересчитать

а чёрт, точно, забыл, там же пропорции могут меняться.

Цитата:

Телефон LG Optimus II пишет не удалось инициализировать webgl

хром? попробуй включить weblgl в настройках - напиши в адресной строке chrome://flags и там будет.

-----
Добавил пересчёт проекции после смены разрешения, правда есть подозрение что на мобилках с таким фовом мало в экран влезет теперь.
Так ли это?

mauNgerS

18.09.2013 13:32

Ответ: WebGL тесты

Включил, теперь:
Планшет huawei 25-30
Телефон lg 15-20

Тач везде работает.
На huawei при взгляде на розовые цветочки появляются артефакты - вытянутые в разные стороны полигоны, выглядит как ёжик.

moka	18.09.2013 13:57

Ответ: WebGL тесты

Цитата:

Сообщение от Mr_F_ (Сообщение 267272)

у меня есть

Код:

window.onresize = function(e) {

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

}

срабатывает при смене размера окна на винде или вытаскивании снизу консоли. не работает на телефонах?
а чёрт, точно, забыл, там же пропорции могут меняться.

Не только пропорции меняются что требует пересчёт матрицы проекции, но также и это не будет стабильно работать на всех платформах. Проблема в том что евент onresize на практике срабатывает часто до того как ориентация полностью поменялась и новый размер был присвоен, т.к. смена ориентации обычно сопровождается анимацией.
Есть евент "orientationchange":

PHP код:


		
			
window.addEventListener('orientationchange', function() {

  // ...

}

Он также будет срабатывать во время ориентации, и значения window.innerWidth = могут часто разводить.
Кстати для ориентации можешь заюзать также window.orientation - это чисто для константы.

Решение я нашёл, небольшой костыль, но не хак:
Заводим элемент вначале всего body:

PHP код:


		
			
<div id='ruler'></div>

Стиль у него:

PHP код:


		
			
#ruler {

  position: fixed;

  width: auto;

  height: auto;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  visibility: hidden;

}

И далее при onresize, orientationchange а также каждые 200 мс, проверяй его размер (именно этого элемента). Т.к. проверка его размера "насильно" заставит броузер пересчитать размеры (reflow), что выдаст реальные данные:

PHP код:


		
			
var bounds = ruler.getBoundingClientRect();

if (bounds.width != oldWidth || bounds.height != oldHeight) {

  // размер изменился

}

Я тестировл на куче платформ работает отлично, и реагирует на все евенты.
Заметил что на некоторых платформах нужно на 4 пикселя меньше делать.

Также не забудь указать overflow:hidden в css для body, чтобы предотвратить скроллинг.

Часовой пояс GMT +4, время: 09:05.