Поток gltf из HttpServlet в элемент ‹web-viewer›

У меня есть Tomcat, на котором запущено приложение JavaWebApplication. Я хочу использовать элемент <model-viewer> (информация здесь) для отображения 3D-модели с «изменяемые» текстуры. Поэтому я хочу получить необходимый файл gltf из сервлета, чтобы я мог повлиять на него, а не просто получить доступ к файлу. Я знаю, что оба (структура gltf, а также средство просмотра моделей в моем веб-приложении) работают, поскольку они работают безупречно, если я ссылаюсь на src следующим образом:

<model-viewer
    poster-color="black"
    poster="<%=
        "ressource?type=coloredmodelpic&key=" +
        model +
        "&ptype=" +
        type +
        "&color=" +
        color
        %>"
    camera-controls
    auto-rotate
    alt="<%= "A 3D model of " + model + "-" + type %>"
    src="data/RON-AA/RON-AA.gltf">

тогда как очевидно, что RON-AA.gltf содержит структуру json. Вызов атрибута плаката также работает безупречно, но когда я хочу использовать тот же сервлет (на который ссылается «ресурс») для потоковой передачи данных, он не будет отображать модель.

<model-viewer
    poster-color="black"
    poster="<%=
        "ressource?type=coloredmodelpic&key=" +
        model +
        "&ptype=" +
        type +
        "&color=" +
        color
        %>"
    camera-controls
    auto-rotate
    alt="<%= "A 3D model of " + model + "-" + type %>"
    src="<%=
        "ressource?type=gltf&key=" +
        model +
        "&ptype=" +
        type +
        "&color=" +
        color
        %>"
>

Я знаю, что сам вызов работает, так как, когда я напрямую вызываю URL-адрес в любом браузере, я получаю правильный gltf для загрузки. Он также предоставляет правильные данные, так как когда я просматриваю загрузку в vim, все в порядке. В сервлете я предоставляю такие данные (не совсем так, как они распределены по нескольким методам, но в целом примерно так):

...
case "gltf":
    key = request.getParameter("key");
    ptype = request.getParameter("ptype");
    colorString = request.getParameter("color");
    response.setContentType("model/gltf+json");
    response.setHeader("Content-Type", "model/gltf+json");

    InputStream is;
    OutputStream os = response.getOutputStream();
    is = new FileInputStream(new File("...path to the same gltf... .gltf"));
    byte[] buffer = new byte[1024];
    int bytesRead;
    while ((bytesRead = is.read(buffer)) != -1) 
        os.write(buffer, 0, bytesRead);
        
    os.flush();
    os.close();
    is.close();

Поэтому я устанавливаю правильный (?) mimetype и получаю доступ к правильному «шаблону» для проверки потока, поскольку результат в vim — правильные данные. Меня это еще больше сбивает с толку, поскольку, когда я пытаюсь передать двоичный файл вместо gltf для той же настройки элемента модели-просмотрщика, это работает. Итак, следующее работает нормально:

...
case "glb":
    key = request.getParameter("key");
    ptype = request.getParameter("ptype");
    colorString = request.getParameter("color");
    response.setContentType("model/gltf-binary");
    response.setHeader("Content-Type", "model/gltf-binary");

    InputStream is;
    OutputStream os = response.getOutputStream();
    is = new FileInputStream(new File("...path to the glb... .glb"));
    byte[] buffer = new byte[1024];
    int bytesRead;
    while ((bytesRead = is.read(buffer)) != -1) 
        os.write(buffer, 0, bytesRead);
        
    os.flush();
    os.close();
    is.close();[info here][1]

Может кто-нибудь, пожалуйста, дайте мне подсказку, что происходит, потому что у меня действительно нет идей прямо сейчас...


person roediGERhard    schedule 16.07.2020    source источник


Ответы (1)


Файл JSON *.gltf сам по себе может включать или не включать все части модели. Он может ссылаться на внешний файл .bin, а текстуры — на внешние файлы .jpg и .png. В частности, файл BIN содержит 32-битные данные вершин с плавающей запятой, поэтому без этого файла вы не увидите ни одного полигона.

Вы можете проверить содержимое .gltf, чтобы увидеть, есть ли оно там: Найдите .bin, .jpg и .png. .bin будут перечислены в разделе под названием buffers, а изображения — в разделе под названием images.

Кроме того, проверьте вкладку DevTools Network, чтобы узнать, действительно ли <model-viewer> запросил эти внешние файлы, и каков был ответ на каждый из них.

Для размещения на веб-сайтах .glb обычно является лучшей формой, поскольку все эти дополнительные части объединены в одну загрузку. GLB предназначен для обеспечения наилучшей производительности в Интернете среди всех разновидностей glTF.

person emackey    schedule 16.07.2020
comment
Вы на вес золота ;D Я уже знал о ссылках и уже ввел правильные uri, чтобы получить двоичный файл. Но я забыл про текстуры. Теперь все работает идеально. СПАСИБО еще раз! - person roediGERhard; 16.07.2020