WebGL огни ограничение номера

Question

Контекст: Я играю с Three.js и некоторыми PointLighthere.

После быстрого поиска кажется, что для WebGL и OpenGL допускается только небольшое количество источников света (в то же время). Похоже, это было бы общим требованием для большинства 3D-сцен. Как показать длинную улицу с лампами. Или, как в этой маленькой сцене, связанной выше, чтобы одновременно стрелять более 10 пушек. Это единственное решение, использующее отложенный рендерер (я не знаю, о чем говорю, но этот метод был ответом от Google и что демонстрации об этом выглядят великолепно).

Может ли простейшее решение создать фрагментарный шейдер для вычисления подсветки группы 8? И затем используйте какую-то технику смешивания (опять же: «полностью начинаешь с этих предметов)?

Answer 1

Nice demo.

За исключением соображений производительности количество огней should not be an issue с WebGLRenderer. (Да, если у вас много огней, WebGLDeferredRenderer было бы предпочтительнее.)

Я считаю это ошибкой three.js. Обратите внимание, что вы генерируете ошибки консоли.

Проблема заключается в том, что вы создаете свет и устанавливаете его видимость до false до первого рендеринга. Если вы устанавливаете видимость каждого индикатора на true в начале, демонстрационная версия работает без ошибок.

три.js r.66.

EDIT: @ gero3 исправил эту ошибку в ветке three.js r.67dev.

Answer 2

WebGL и OpenGL ES 2.0 не имеют ограничений с лампами. Возможно, Three.js. старый OpenGL перед шейдерами. С шейдерами вы пишете свой собственный так, чтобы вы могли разместить столько, сколько хотите, до пределов памяти/ресурсов аппаратного обеспечения.

Отсроченный рендеринг может быть быстрее для большего количества огней. Это, возможно, слишком большая тема для stackoverflow. Может быть, кто-то еще справится с этой задачей. Короткий вариант заключается в том, что вместо вычисления конечного цвета пикселя, подобного большинству шейдеров, шейдер просто хранит кучу данных (нечеткие цвета, нормали, позиции) в несколько текстур. После чего другой шейдер читает эти текстуры и вычисляет освещение. По разным причинам, которые могут оказаться быстрее. с ограничением, что он не может справиться с прозрачностью.

Here's a tutorial here for OpenGL that might be useful. И есть несколько three.js examples вы можете вскрыть

Примечание: Отсроченный рендеринг обычно требует исполнения WEBGL_draw_buffers extension.