「Universal AR」の版間の差分

提供: ディーズガレージ wiki
移動先: 案内検索
(Unity)
(Unity)
21行目: 21行目:
 
|}
 
|}
  
='''Unity'''=
+
=='''USDZ Exporter'''==
==USDZ Exporter==
+
 
[https://docs.unity3d.com/Packages/com.unity.formats.usd@1.0/manual/index.html USD Unity SDK: USD C# Bindings for Unity]
 
[https://docs.unity3d.com/Packages/com.unity.formats.usd@1.0/manual/index.html USD Unity SDK: USD C# Bindings for Unity]
  

2019年11月30日 (土) 20:26時点における版

<model-viewer>の仕様に基づきUnityでUSDZとGLBを出力し組込みしてみます。

Model-viewer-001.jpg

https://dz.plala.jp/wiki_data/ios/index01.html

環境

DCCツール 3dsMax, V-Ray, Unity 2018, <model-viewer>
リソース Le Corbusier LC2 ©CASSINA IXC. Ltd.
Aeron Chair ©Herman Miller, Inc.
Ball Chair ©Eero Aarnio
Panton Chair ©Vitra
PH 5 ©Louis Poulsen
PH 2/1 Wall ©Louis Poulsen
検証環境 iPhone XS, Windows10(GTX1050Ti)

USDZ Exporter

USD Unity SDK: USD C# Bindings for Unity

HierarchyのGameObject選択 > USD > Export Selected as USDZ

メモ

  • Standard ShaderのMain MapsのTilingが使えない
  • Standard ShaderのSecondary Mapsが使えない
  • USD shaderがあるがAlbedoだけ
  • PNGでマテリアルを作成するとUSDZが大きいデータになる JPGが無難
  • iPhoneでtransparentが効いてない Substance PainterのUSD PBR Metal Roughness Presetが解決策に見える
  • マテリアルの両面表示 未検証

GLTF Exporter

GitHub - Plattar/gltf-exporter

Plattar.ExporterのExport ObjextにGameObjectをセット > Export *** to GLTF

その他

GLTF Importer

GitHub - sketchfab/UnityGLTF: Runtime GLTF Loader for Unity3D

アカウント登録しなくてもImporterで使用できる

サンプルモデル

Sketchfab - Littlest Tokyo by glenatron
three.js - animation - keyframes
GitHub - LittlestTokyo.glb at dev · three.js
<model-viewer>iPhoneで不安定すぎる
scaleが大きすぎる
three.jsのLittlestTokyo.glbは軽量で都合いいが<model-viewer>でエラー

https://dz.plala.jp/wiki_data/ios/index07.html

GLTF Debug

https://vr.google.com/scene-viewer-preview

GLTF to GLB

Facebook for Developers
https://glb-packer.glitch.me

GLTF to USDZ

GitHub - google/usd_from_gltf

PC Windows10 VMware Workstation 15 Player
OS Ubuntu 18.04.3 LTS

USD

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install build-essential cmake libboost-dev libboost-all-dev libtbb-dev git pyside-tools python-pip
$ pip install PyOpenGL
$ sudo apt install libx11-dev libglew-dev libxrandr-dev libxcursor-dev libxinerama-dev libxi-dev
$ git clone https://github.com/PixarAnimationStudios/USD
$ sudo python USD/build_scripts/build_usd.py /usr/local/USD

usd_from_gltf

$ sudo apt install nasm
$ pip install Pillow
$ git clone https://github.com/google/usd_from_gltf
$ python usd_from_gltf/tools/ufginstall/ufginstall.py ~/usd_from_gltf /usr/local/USD

error

ん~CentOS 7がよさげ
検証中

<model-viewer>

参考: GitHub - model-viewer/README.md
参考: GitHub - model-viewer/POLYFILLS.md
参考: GitHub - model-viewer/Document

ソース

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no, user-scalable=no, viewport-fit=cover">
    <title>&lt;model-viewer&gt;</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        overflow: hidden;
    }

    #thumbList {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .thumb {
        width: 45px;
        height: auto;
        margin-right: 10px;
    }

    button {
        position: absolute;
        bottom: 40px;
        right: 40px;
        width: 80px;
        height: 80px;
        background-image: url(images/ar-button.png);
        border-radius: 50%;
        border: solid 1px #f9f9f9;
        box-shadow: 0px 0px 6px 3px #f9f9f9;
        opacity: 0;
    }

    :root {
        --progress-bar-color: rgba(0, 0, 255, 1.0);
    }
</style>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script>
<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>
<script src="https://unpkg.com/focus-visible@5.0.1/dist/focus-visible.js" defer></script>
<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<script>
    var parser = UAParser();
    if (parser.device.type) {
        $(":root").css({ "--progress-bar-height": "0px" });
    } else {
        $(":root").css({ "--progress-bar-height": "2px" });
    };
    $(window).on('load resize', function () {
        $("model-viewer").css({ width: $(window).width(), height: $(window).height() });
        $("button").css({ opacity: 1.0 });
    });
</script>

<body>
    <model-viewer src="cas_LC2_1R.glb" ios-src="cas_LC2_1R.usdz" environment-image="studioLight.hdr" ar auto-rotate
        auto-rotate-delay="2000" camera-controls camera-orbit="0deg 75deg 115%"
        alt="Le Corbusier LC2 ©CASSINA IXC. Ltd." background-color="#fff" shadow-intensity="1.0" shadow-softness="1.0"
        quick-look-browsers="safari chrome" magic-leap unstable-webxr>
        <button slot="ar-button"></button>
    </model-viewer>
    <div id="thumbList">
        <a href="index01.html"><img class="thumb" src="images/thumb01.png"></a>
        <a href="index02.html"><img class="thumb" src="images/thumb02.png"></a>
        <a href="index03.html"><img class="thumb" src="images/thumb03.png"></a>
        <a href="index04.html"><img class="thumb" src="images/thumb04.png"></a>
        <a href="index05.html"><img class="thumb" src="images/thumb05.png"></a>
        <a href="index06.html"><img class="thumb" src="images/thumb06.png"></a>
    </div>
</body>

</html>

gzip圧縮

効果があるのか疑問
.htaccess

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
 
#古いブラウザ対策
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
 
#画像は圧縮しない GIF、JPEG、PNG、ICO
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

#圧縮するファイル
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/glb
AddOutputFilterByType DEFLATE application/usdz
</IfModule>

更新履歴

  • 2019.10.25 公開