Стабильность WebGL приложений

Кирилл Дмитренко, разработчик интерфейсов

FrondendConf, 31 мая 2016

Логотип партнера

3

О себе

• В Яндексе с 2011;

• Занимаюсь графикой в Картах с 2014;

• Написал движок панорам.

WebGL

5

WebGL

• Аппаратно-ускоренная графика прямо из JS;

WebGL

6

WebGL

• Аппаратно-ускоренная графика прямо из JS;

• Специфицирован в 2011;

WebGL

7

WebGL

• Аппаратно-ускоренная графика прямо из JS;

• Специфицирован в 2011;

• >80% браузеров поддерживают.

WebGL

8

9

10

11

12

13

14

Почему так происходит?

16

DOM

HTML DOM RenderingOS +

драйвер GPU

GPU

17

WebGL

JS WebGLOS +

драйвер GPU

GPU

Почему стабильность важна?

Почему стабильность важна? 19

• Счастье пользователей;

Почему стабильность важна? 20

• Счастье пользователей;

• Ответственность перед экосистемой.

21

Почему стабильность важна? 22

Уже сегодня

• gfx.crash-guard.status.glcontext

Как с этим бороться?

Как с этим бороться? 24

• Учитывать лимиты платформы

Как с этим бороться? 25

• Учитывать лимиты платформы

• Тестировать, тестировать, тестировать

Как с этим бороться? 26

• Учитывать лимиты платформы

• Тестировать, тестировать, тестировать

• Переписать код

Как с этим бороться? 27

• Учитывать лимиты платформы

• Тестировать, тестировать, тестировать

• Переписать код

• Black-листы

Как с этим бороться? 28

• Учитывать лимиты платформы

• Тестировать, тестировать, тестировать

• Переписать код

• Black-листы

• Sanity checks

Мобильный Firefox

30

31

Фикс

• В черный список

Мобильный Firefox

Galaxy Tab II

33Galaxy Tab II

glEnable(0x0be2)

glBlendEquation(32774)

glBlendFuncSeparate(770, 771, 1, 771)

glDisable(0x0b71)

glCreateTexture()

glBindTexture(3553, 910013)

glTexImage2D(3553, 0, 6408, 64, 64, 0, 6408, 5121, 0x6495a008)

Galaxy Tab II 34

glEnable(GL_BLEND)

glBlendEquation(GL_FUNC_ADD)

glBlendFuncSeparate(770, 771, 1, 771)

glDisable(GL_DEPTH_TEST)

glCreateTexture()

glBindTexture(GL_TEXTURE_2D, 910013)

glTexImage2D(GL_TEXTURE_2D, 0, 6408, 64, 64, 0, 6408, 5121, 0x6495a008)

OS X 10.11

OS X 10.11 36

OS X 10.11 37

vec3 c = 0.0;

for (float dx = -4.0; dx < 4.0; dx += 1.0) {

for (float dy = -4.0; dy < 4.0; dy += 1.0) {

c += f(dx, dy) *

texture2D(t, x + dx, y + yd);

}

}

gl_FragColor = vec4(c, 1);

OS X 10.11 38

OS X 10.11 39

float c = 0.0;

for (float dx = -4.0; dx < 4.0; dx += 1.0) {

for (float dy = -4.0; dy < 4.0; dy += 1.0) {

c += 1.0 / 64.0;

}

}

gl_FragColor = vec4(vec3(c), 1);

OS X 10.11 40

OS X 10.11 41

OS X 10.11 42

float c = 0.0;for (int dx = -4; dx < 4; ++dx) {for (int dy = -4; dy < 4; ++dy) {vec2 dxdy = vec2(dx, dy);/* ... */

}}

OS X 10.11 43

Кстати, о дебаге

• Все печально;

OS X 10.11 44

Кстати, о дебаге

• Все печально;

• «Метод пристального взгляда»;

OS X 10.11 45

Кстати, о дебаге

• Все печально;

• «Метод пристального взгляда»;

• Отладочный «вывод»;

OS X 10.11 46

Кстати, о дебаге

• Все печально;

• «Метод пристального взгляда»;

• Отладочный «вывод»;

• GLSL Reference Compiler.

Intel GMA 4500

48

Intel GMA 4500 49

Тайлик с сервера

Текстура с тайликом

Сектор панорамной текстуры

Intel GMA 4500 50

Intel GMA 4500 51

Фикс

• Переделан рендеринг квадрата;

Intel GMA 4500 52

Фикс

• Переделан рендеринг квадрата;

• Заведен баг в Mozilla.

Выводы

Выводы 54

• Все на самом деле довольно стабильно

Выводы 55

• Все на самом деле довольно стабильно

• То, что нестабильно, тестируем и правим

Выводы 56

• Все на самом деле довольно стабильно

• То, что нестабильно, тестируем и правим

• То, что не можем поправить, запрещаем

Выводы 57

• Все на самом деле довольно стабильно

• То, что нестабильно, тестируем и правим

• То, что не можем поправить, запрещаем

• Репортим баги

58

Полезная ссылка

WebGL Dev List GG

Спасибо за внимание!

dmikis@yandex-team.ru dmikis

dmikis

Кирилл ДмитренкоРазработчик интерфейсов