WebGL тесты

[mauNgerS]

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

[Mr_F_]

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

добавил )

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

у меня есть

			window.onresize = function(e)
			{
				canvas.width = window.innerWidth;
				canvas.height = window.innerHeight;

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

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

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

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

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

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

[mauNgerS]

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

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

[moka]

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

у меня есть

window.onresize = function(e) {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

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

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

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


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

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

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


Стиль у него:

#ruler {
  position: fixed;
  width: auto;
  height: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
} 


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

var bounds = ruler.getBoundingClientRect();
if (bounds.width != oldWidth || bounds.height != oldHeight) {
  // размер изменился
} 


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

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