2015-09-01 4 views
0

Я работаю над частицами через threejs, и я не получаю одинаковый результат на разных устройствах. На других экранах размер точки выглядит меньше, то же самое на моем смартфоне, только в вертикальной ориентации. Пока я видел проблему на нескольких разных экранах, я тестировал только следующие эксперименты с моим ноутбуком + смартфоном.gl_PointSize меняется с помощью devicePixelRatio?

Correct look for certain screensbad look on others

Левый: правильный взгляд с реальным кодом на некоторых экранах & на моем смартфоне в горизонтальной ориентации.Право: неправильный вид с фактическим кодом на других экранах & мой смартфон в вертикальной ориентации.

Я сначала подумал, что что-то делать с window.devicePixelRatio но alert(window.devicePixelRatio) гравюр тот же номер (3) в моем смартфоне с обеих ориентациях, хотя рендеринг правильно только в горизонтальной.

Далее я попытался:

  • renderer.setPixelRatio(window.devicePixelRatio): визуализации как в ориентации шоу 3 раза меньших размеров, и по-прежнему различны.

  • Передача window.devicePixelRatio в вершинный шейдер, чтобы написать что-то вроде gl_PointSize*=devicePixelRatio, в дополнение к предыдущей идее, возвращает этот размер в исходное состояние.

Как сделать частицы одинаковыми на всех экранах?

Весь код на http://codepen.io/Astrak/pen/BoBWPB

ответ

0

После изменения размера окна достаточно я понимаемые gl_PointSize каким-то образом представляет собой абсолютный размер в то время как в моем примере я хочу быть пропорциональна window.innerHeight. Я добавил это значение в шейдер: gl_PointSize*=innerHeight, который решил проблему.