WebGL vs CSS3D для большого разброса изображений

Question

Я создаю веб-приложение, которое отобразит большое количество миниатюр изображений в виде 3D-облака и предоставит возможность нажимать на отдельные изображения для запуска большого вида. Я успешно сделал это в CSS3D, используя three.js, создав THREE.CSS3DObject для каждого миниатюры, а затем добавьте миниатюру в виде изображения svg :.

Он отлично работает для upto ~ 1200 эскизов, а затем производительность начинает снижаться (очень низкое FPS и длительное время загрузки). К тому моменту, когда вы нажмете 2500 эскизов, это непригодно. В идеале я хочу работать с более чем 10 тыс. Эскизов.

Из того, что я могу сказать, я смогу достичь такого же результата, создав каждый миниатюру в виде сетки WebGL с текстурой. Я новичок с three.js, хотя, поэтому, прежде чем я приложил все усилия, я надеялся на руководство, могу ли я ожидать, что производительность будет лучше или я просто прошу слишком много 3D в браузере?

Answer 1

Что касается рендеринга, то CSS3 должен быть относительно хорош для рендеринга довольно большого количества «спрайтов». Но 10k, вероятно, будет слишком много.

WebGL, вероятно, будет лучшим вариантом. Вы также можете позаботиться о дальнейшей оптимизации, хранить эскизы в текстуре атласа или такие ...

Но рендеринг - это всего лишь одна часть. Обработка событий может быть серьезным узким местом, если не обрабатываться тщательно.

Я не знаю, как вы обрабатываете событие часов мыши и переход к полноразмерному изображению, но добавление прослушивателя событий к каждому из объектов 2.5k +, вероятно, не является хорошим выбором. С помощью чистого WebGL вы можете использовать пространство изображений для обнаружения щелкнутого объекта. Кодирование каждой плитки с другим идентификатором/цветом и использование этого для определения того, что нажали. Я предполагаю, что компилятор WebGL/CSS3D также может использовать этот подход.

Чтобы ответить на вопрос, WebGL должен обрабатывать 10 тыс. Штрафов. Возможно, вам нужно подумать о какой-то оптимизации, если ваши прямоугольники большие, и они занимают значительную сумму на экране, но есть способы обойти это, если эта проблема возникнет.