Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
-
Upload
ontico -
Category
Engineering
-
view
164 -
download
1
Transcript of Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
![Page 1: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/1.jpg)
![Page 2: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/2.jpg)
Стабильность WebGL приложений
Кирилл Дмитренко, разработчик интерфейсов
FrondendConf, 31 мая 2016
Логотип партнера
![Page 3: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/3.jpg)
3
О себе
• В Яндексе с 2011;
• Занимаюсь графикой в Картах с 2014;
• Написал движок панорам.
![Page 4: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/4.jpg)
WebGL
![Page 5: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/5.jpg)
5
WebGL
• Аппаратно-ускоренная графика прямо из JS;
WebGL
![Page 6: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/6.jpg)
6
WebGL
• Аппаратно-ускоренная графика прямо из JS;
• Специфицирован в 2011;
WebGL
![Page 7: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/7.jpg)
7
WebGL
• Аппаратно-ускоренная графика прямо из JS;
• Специфицирован в 2011;
• >80% браузеров поддерживают.
WebGL
![Page 8: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/8.jpg)
8
![Page 9: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/9.jpg)
9
![Page 10: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/10.jpg)
10
![Page 11: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/11.jpg)
11
![Page 12: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/12.jpg)
12
![Page 13: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/13.jpg)
13
![Page 14: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/14.jpg)
14
![Page 15: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/15.jpg)
Почему так происходит?
![Page 16: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/16.jpg)
16
DOM
HTML DOM RenderingOS +
драйвер GPU
GPU
![Page 17: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/17.jpg)
17
WebGL
JS WebGLOS +
драйвер GPU
GPU
![Page 18: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/18.jpg)
Почему стабильность важна?
![Page 19: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/19.jpg)
Почему стабильность важна? 19
• Счастье пользователей;
![Page 20: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/20.jpg)
Почему стабильность важна? 20
• Счастье пользователей;
• Ответственность перед экосистемой.
![Page 21: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/21.jpg)
21
![Page 22: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/22.jpg)
Почему стабильность важна? 22
Уже сегодня
• gfx.crash-guard.status.glcontext
![Page 23: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/23.jpg)
Как с этим бороться?
![Page 24: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/24.jpg)
Как с этим бороться? 24
• Учитывать лимиты платформы
![Page 25: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/25.jpg)
Как с этим бороться? 25
• Учитывать лимиты платформы
• Тестировать, тестировать, тестировать
![Page 26: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/26.jpg)
Как с этим бороться? 26
• Учитывать лимиты платформы
• Тестировать, тестировать, тестировать
• Переписать код
![Page 27: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/27.jpg)
Как с этим бороться? 27
• Учитывать лимиты платформы
• Тестировать, тестировать, тестировать
• Переписать код
• Black-листы
![Page 28: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/28.jpg)
Как с этим бороться? 28
• Учитывать лимиты платформы
• Тестировать, тестировать, тестировать
• Переписать код
• Black-листы
• Sanity checks
![Page 29: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/29.jpg)
Мобильный Firefox
![Page 30: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/30.jpg)
30
![Page 31: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/31.jpg)
31
Фикс
• В черный список
Мобильный Firefox
![Page 32: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/32.jpg)
Galaxy Tab II
![Page 33: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/33.jpg)
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)
![Page 34: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/34.jpg)
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)
![Page 35: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/35.jpg)
OS X 10.11
![Page 36: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/36.jpg)
OS X 10.11 36
![Page 37: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/37.jpg)
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);
![Page 38: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/38.jpg)
OS X 10.11 38
![Page 39: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/39.jpg)
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);
![Page 40: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/40.jpg)
OS X 10.11 40
![Page 41: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/41.jpg)
OS X 10.11 41
![Page 42: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/42.jpg)
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);/* ... */
}}
![Page 43: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/43.jpg)
OS X 10.11 43
Кстати, о дебаге
• Все печально;
![Page 44: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/44.jpg)
OS X 10.11 44
Кстати, о дебаге
• Все печально;
• «Метод пристального взгляда»;
![Page 45: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/45.jpg)
OS X 10.11 45
Кстати, о дебаге
• Все печально;
• «Метод пристального взгляда»;
• Отладочный «вывод»;
![Page 46: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/46.jpg)
OS X 10.11 46
Кстати, о дебаге
• Все печально;
• «Метод пристального взгляда»;
• Отладочный «вывод»;
• GLSL Reference Compiler.
![Page 47: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/47.jpg)
Intel GMA 4500
![Page 48: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/48.jpg)
48
![Page 49: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/49.jpg)
Intel GMA 4500 49
Тайлик с сервера
Текстура с тайликом
Сектор панорамной текстуры
![Page 50: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/50.jpg)
Intel GMA 4500 50
![Page 51: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/51.jpg)
Intel GMA 4500 51
Фикс
• Переделан рендеринг квадрата;
![Page 52: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/52.jpg)
Intel GMA 4500 52
Фикс
• Переделан рендеринг квадрата;
• Заведен баг в Mozilla.
![Page 53: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/53.jpg)
Выводы
![Page 54: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/54.jpg)
Выводы 54
• Все на самом деле довольно стабильно
![Page 55: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/55.jpg)
Выводы 55
• Все на самом деле довольно стабильно
• То, что нестабильно, тестируем и правим
![Page 56: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/56.jpg)
Выводы 56
• Все на самом деле довольно стабильно
• То, что нестабильно, тестируем и правим
• То, что не можем поправить, запрещаем
![Page 57: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/57.jpg)
Выводы 57
• Все на самом деле довольно стабильно
• То, что нестабильно, тестируем и правим
• То, что не можем поправить, запрещаем
• Репортим баги
![Page 58: Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)](https://reader036.fdocuments.net/reader036/viewer/2022062523/586f8f931a28ab54768b7645/html5/thumbnails/58.jpg)
58
Полезная ссылка
WebGL Dev List GG