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)

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

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

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

Цитата:

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

добавил )

Цитата:

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

у меня есть

Код:

                        window.onresize = function(e)

                        {

                                canvas.width = window.innerWidth;

                                canvas.height = window.innerHeight;

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

Цитата:

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

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

Цитата:

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

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

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

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

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

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

Ответ: 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, чтобы предотвратить скроллинг.