「Universal AR」の版間の差分

提供: ディーズガレージ wiki
移動先: 案内検索
(GLTF Importer)
(Tool)
(同じ利用者による、間の44版が非表示)
3行目: 3行目:
 
|}
 
|}
  
<model-viewer>の仕様に基づきUnityでUSDZとGLBを出力し組込みしてみます。
+
UnityでUSDZとGLBを出力し<model-viewer>に組込みしてみます。
  
 
[[ファイル:model-viewer-001.jpg|310px]]
 
[[ファイル:model-viewer-001.jpg|310px]]
15行目: 15行目:
 
|-
 
|-
 
| style="padding-left:10px;padding-right:10px;"| リソース
 
| style="padding-left:10px;padding-right:10px;"| リソース
| style="padding-left:10px;padding-right:10px;"| [https://www.cassina-ixc.jp/shop/g/glc2 Le Corbusier LC2 ©CASSINA IXC. Ltd.]<br />[https://www.hermanmiller.com/ja_jp/products/seating/office-chairs/aeron-chairs/pro-resources Aeron Chair ©Herman Miller, Inc.]<br />Ball Chair ©Eero Aarnio<br />[https://www.vitra.com/ja-jp/product/panton-chair Panton Chair ©Vitra]<br />[https://www.louispoulsen.com/ja-jp/download-center?type=fbx&productId=90293 PH 5 ©Louis Poulsen]<br />[https://www.louispoulsen.com/ja-jp/download-center?type=fbx&productId=90388 PH 2/1 Wall ©Louis Poulsen]
+
| style="padding-left:10px;padding-right:10px;"| [https://www.cassina-ixc.jp/shop/g/glc2 Le Corbusier LC2 ©CASSINA IXC. Ltd.]<br />[https://www.hermanmiller.com/ja_jp/products/seating/office-chairs/aeron-chairs/pro-resources Aeron Chair ©Herman Miller, Inc.]<br />Ball Chair ©Eero Aarnio<br />[https://www.vitra.com/ja-jp/product/panton-chair Panton Chair ©Vitra]<br />[https://www.louispoulsen.com/ja-jp/download-center?type=fbx&productId=90293 PH 5 ©Louis Poulsen]<br />[https://www.louispoulsen.com/ja-jp/download-center?type=fbx&productId=90388 PH 2/1 Wall ©Louis Poulsen]<br />[https://80.lv/articles/tips-on-creating-stylized-3d-content/ Littlest Tokyo @ glenatron]
 
|-
 
|-
 
| style="padding-left:10px;padding-right:10px;"| 検証環境
 
| style="padding-left:10px;padding-right:10px;"| 検証環境
21行目: 21行目:
 
|}
 
|}
  
=='''USDZ Exporter'''==
+
=='''Exporter'''==
[https://docs.unity3d.com/Packages/com.unity.formats.usd@1.0/manual/index.html USD Unity SDK: USD C# Bindings for Unity]
+
==='''USDZ'''===
 +
[https://docs.unity3d.com/Packages/com.unity.formats.usd@1.0/manual/index.html Unity - USD Unity SDK]
  
HierarchyのGameObject選択 > USD > Export Selected as USDZ
+
==='''GLTF'''===
 
+
メモ
+
* 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'''==
+
 
[https://github.com/Plattar/gltf-exporter GitHub - Plattar/gltf-exporter]<br />
 
[https://github.com/Plattar/gltf-exporter GitHub - Plattar/gltf-exporter]<br />
  
Plattar.ExporterのExport ObjextにGameObjectをセット > Export *** to GLTF
+
その他<br />
 +
[https://github.com/KhronosGroup/glTF GitHub - KhronosGroup/glTF]<br />
 +
[https://github.com/AnalyticalGraphicsInc/gltf-vscode GitHub - glTF Tools Extension for Visual Studio Code]<br />
 +
[https://github.com/GoogleWebComponents/model-viewer/issues/278 GitHub - Bundled tool to convert GLTF/GLB to USDZ on Linux/OSX]
  
その他
+
=='''Importer'''==
* [https://github.com/KhronosGroup/glTF GitHub - KhronosGroup/glTF]
+
==='''GLTF'''===
* [https://github.com/AnalyticalGraphicsInc/gltf-vscode GitHub - glTF Tools Extension for Visual Studio Code]
+
* [https://github.com/GoogleWebComponents/model-viewer/issues/278 GitHub - Bundled tool to convert GLTF/GLB to USDZ on Linux/OSX]
+
 
+
=='''GLTF Importer'''==
+
 
[https://github.com/sketchfab/UnityGLTF GitHub - sketchfab/UnityGLTF: Runtime GLTF Loader for Unity3D]
 
[https://github.com/sketchfab/UnityGLTF GitHub - sketchfab/UnityGLTF: Runtime GLTF Loader for Unity3D]
  
 
アカウント登録しなくてもImporterで使用できる
 
アカウント登録しなくてもImporterで使用できる
  
サンプルモデル
+
=='''Tool'''==
[https://sketchfab.com/3d-models/littlest-tokyo-94b24a60dc1b48248de50bf087c0f042 Sketchfab - Littlest Tokyo by glenatron]
+
==='''GLTF to GLB Packer'''===
[https://threejs.org/examples/webgl_animation_keyframes.html three.js - animation - keyframes]
+
[https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials?locale=ja_JP Facebook for Developers]<br />
[https://github.com/mrdoob/three.js/blob/dev/examples/models/gltf/LittlestTokyo.glb GitHub - LittlestTokyo.glb at dev · three.js]
+
https://glb-packer.glitch.me
<model-viewer>iPhoneで不安定すぎる
+
scaleが大きすぎる
+
three.jsのLittlestTokyo.glbは軽量で都合いいが<model-viewer>でエラー
+
  
[[ファイル:model-viewer-002.jpg|310px]]
+
==='''Scene Viewer Debug'''===
 
+
https://dz.plala.jp/wiki_data/ios/index07.html
+
 
+
=='''GLTF Debug'''==
+
 
https://vr.google.com/scene-viewer-preview
 
https://vr.google.com/scene-viewer-preview
  
=='''GLTF to GLB'''==
+
==='''USD from glTF'''===
[https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials?locale=ja_JP Facebook for Developers]<br />
+
https://glb-packer.glitch.me
+
 
+
=='''GLTF to USDZ'''==
+
 
[https://github.com/google/usd_from_gltf GitHub - google/usd_from_gltf]<br />
 
[https://github.com/google/usd_from_gltf GitHub - google/usd_from_gltf]<br />
  

2019年12月3日 (火) 23:27時点における版

UnityでUSDZとGLBを出力し<model-viewer>に組込みしてみます。

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
Littlest Tokyo @ glenatron
検証環境 iPhone XS, Windows10(GTX1050Ti)

Exporter

USDZ

Unity - USD Unity SDK

GLTF

GitHub - Plattar/gltf-exporter

その他
GitHub - KhronosGroup/glTF
GitHub - glTF Tools Extension for Visual Studio Code
GitHub - Bundled tool to convert GLTF/GLB to USDZ on Linux/OSX

Importer

GLTF

GitHub - sketchfab/UnityGLTF: Runtime GLTF Loader for Unity3D

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

Tool

GLTF to GLB Packer

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

Scene Viewer Debug

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

USD from glTF

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 公開