XML3D: Эффективное отображение и изменение больших текстур

Question

Я использую модель XML3D и сферу для отображения 360 фотографий. Проблема в том, что мне нужно часто менять большие текстуры.

• Каков оптимальный способ использования XML3D или webgl для визуализации 360 фотографий?
• Как оптимизировать переключение текстур? Было бы лучше иметь набор меньших текстур? Есть ли набор «хороших практик» для рендеринга 360 изображений?
• Каков оптимальный способ достижения эффекта размытия между двумя 360
  Текстуры «неба»?

Answer 1

Если вы переключение между только два или три текстуры было бы быстрее альтернативы, но с таким количеством текстур ваш единственный практический вариант, чтобы загрузить их один за другим, изменив тег изображения:

<texture name="diffuseTexture"> 
    <img id="photo" src="images/photo1.jpg"/> 
</texture> 

document.querySelector("#photo").src = "images/photo2.jpg"; 

Если вы просматриваете это с помощью больших текстур (4096x2048), вы увидите огромное количество времени, затрачиваемого на вызов gl.texImage2D, где данные изображения декодируются, преобразуются и отправляются на GPU. Даже на рабочем столе это может привести к заиканию, ситуация становится намного хуже на мобильных устройствах.

Уменьшение размера ваших текстур ускорит процесс. Например, падение их с 4096x2048 до 2048x1024 приносит время, проведенное в gl.texImage2D, с ~ 53% до ~ 13% на моем рабочем столе.

Более низкоуровневая библиотека WebGL может дать вам еще несколько опций (например, преобразование изображений в Uint8Arrays вручную, прежде чем передать их texImage2D), но XML3D на самом деле не был разработан с учетом этого. И пока вы работаете с большими текстурами, у вас будут замедление, независимо от того, что вы делаете, особенно на мобильных устройствах.

Если вы можете поместить свои фотографии в видео, это будет работать намного лучше, так как в этом случае на GPU будет выполнено декодирование и преобразование. Конечно, у него есть свои недостатки.

выцветание одну текстуры в другую можно сделать очень просто в шейдере используя единую переменный:

uniform float uFade; 
... 
vec4 color1 = texture2D(texture1, texcoords); 
vec4 color2 = texture2D(texture2, texcoords); 
gl_FragColor = mix(color1, color2, uFade); 

Размытие включает в себя несколько этапов. Сначала вам нужно сделать вышеупомянутый микс в заставку FrameBuffer. Это становится входной текстурой для горизонтального размытия шейдера, выход которого задается вертикальным размытым шейдером, и, наконец, выход этого используется как текстура для объекта неба во время прохождения рендеринга сцены. Первые три шага должны быть представлены на полноэкранном квадранте.

Этот может быть сделано в XML3D используя RenderInterface и собственные RenderPasses, но ИМО это много хлопот, чтобы пройти для эффекта, который не очень отличается от простого замирания.