|
|
58行目: |
58行目: |
| この2枚を合成<br /> | | この2枚を合成<br /> |
| [[ファイル:cas_LC2_1R_leather_normal.jpg|120px]] | | [[ファイル:cas_LC2_1R_leather_normal.jpg|120px]] |
− |
| |
− | =='''USDZ'''==
| |
− | 参考: [https://developer.apple.com/jp/augmented-reality/quick-look/ AR Quick Look - Apple]<br />
| |
− | 参考: [https://blogs.unity3d.com/jp/2019/03/28/pixars-universal-scene-description-for-unity-out-in-preview/ Pixar の Universal Scene Description - Unity]<br />
| |
− | 参考: [https://docs.unity3d.com/Packages/com.unity.formats.usd@1.0/manual/index.html USD Unity SDK: USD C# Bindings for Unity]<br />
| |
− | 参考: [https://graphics.pixar.com/usd/docs/Usdz-File-Format-Specification.html USD Documentation : Usdz File Format Specification - Pixar]
| |
− |
| |
− | iPhone向けAR<br />
| |
− | [https://dz.plala.jp/wiki_data/ios/cas_LC2_1R.usdz USDZ - Le Corbusier LC2 ©CASSINA IXC. Ltd.]<br />
| |
− | [https://dz.plala.jp/wiki_data/ios/hmi_Aeron_Chair_A.usdz USDZ - Aeron Chair ©Herman Miller, Inc.]<br />
| |
− | [https://dz.plala.jp/wiki_data/ios/ea_Ball_Chair.usdz USDZ - Ball Chair ©Eero Aarnio]<br />
| |
− | <!--[[ファイル:usdz_cas_LC2_1R.jpg|240px]]
| |
− | [[ファイル:usdz_hmi_Aeron_Chair_A.jpg|240px]]
| |
− | [[ファイル:usdz_ea_Ball_Chair.jpg|240px]]-->
| |
− |
| |
− | メモ
| |
− | * Main MapsのTilingが使えない気がする
| |
− | * Secondary Mapsが使えない気がする
| |
− | * USD shaderがあるがAlbedoだけ
| |
− | * Standard ShaderのNormal Mapは動く
| |
− | * PNGでマテリアルを作成するとUSDZが大きいデータになるのでJPGが無難
| |
− | * transparentが効いてない気がする Substance PainterのUSD PBR Metal Roughness Presetが解決策に見える
| |
− | * gzip圧縮効くんだろうか?
| |
− | * VRayCompleteMapをAlbedoに設定できるがiOSの疑似光源?か何か悪さしてる
| |
− | * USDZファイルはzip圧縮なので拡張子変更でソースが見える
| |
− |
| |
− | リソース<br />
| |
− | アーロンチェア–A Size<br />
| |
− | https://www.hermanmiller.com/ja_jp/products/seating/office-chairs/aeron-chairs/pro-resources/
| |
− |
| |
− | =='''glb'''==
| |
− | 参考: [https://github.com/Plattar/gltf-exporter GitHub - Plattar/gltf-exporter: Unity3D GLTF2 importer and exporter toolchain]<br />
| |
− | 参考: [https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials?locale=ja_JP GLBチュートリアル - シェア機能 - ドキュメンテーション - Facebook for Developers]
| |
− |
| |
− | * GLBはglTF 2.0ファイル形式のバイナリバージョン
| |
− | * glTFからGLBへの変換 https://glb-packer.glitch.me
| |
− |
| |
− | =='''<model-viewer>'''==
| |
− | 参考: [https://github.com/GoogleWebComponents/model-viewer GitHub - model-viewer/README.md]<br />
| |
− | 参考: [https://github.com/GoogleWebComponents/model-viewer/blob/master/POLYFILLS.md GitHub - model-viewer/POLYFILLS.md]<br />
| |
− | 参考: [https://googlewebcomponents.github.io/model-viewer/index.html GitHub - Document]
| |
− |
| |
− | ソース
| |
− | <syntaxhighlight lang="html">
| |
− | <!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><model-viewer></title>
| |
− | <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
| |
− | <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
| |
− | <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
| |
− | <link rel="manifest" href="images/site.webmanifest">
| |
− | <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
| |
− | <link rel="shortcut icon" href="images/favicon.ico">
| |
− | <meta name="msapplication-TileColor" content="#eeeeee">
| |
− | <meta name="msapplication-config" content="images/browserconfig.xml">
| |
− | <meta name="theme-color" content="#ffffff">
| |
− |
| |
− | </head>
| |
− | <style>
| |
− | * {
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | }
| |
− |
| |
− | body {
| |
− | overflow: hidden;
| |
− | }
| |
− |
| |
− | #thumbList {
| |
− | position: absolute;
| |
− | left: 10px;
| |
− | top: 10px;
| |
− | height: 60px;
| |
− | }
| |
− |
| |
− | .thumb {
| |
− | width: 60px;
| |
− | height: 60px;
| |
− | 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": "1px" });
| |
− | };
| |
− | $(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 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>
| |
− | </div>
| |
− | </body>
| |
− |
| |
− | </html>
| |
− | </syntaxhighlight>
| |
− |
| |
− | .htaccess gzip圧縮
| |
− | <pre>
| |
− | <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>
| |
− | </pre>
| |
− |
| |
− | =='''AR 動作確認'''==
| |
− | https://dz.plala.jp/wiki_data/ios/index01.html
| |
− | https://dz.plala.jp/wiki_data/ios/index02.html
| |
− | https://dz.plala.jp/wiki_data/ios/index03.html
| |
| | | |
| =='''更新履歴'''== | | =='''更新履歴'''== |
− | * 2019.10.25 USDZ,glb,<model-viewer> 追加
| |
| * 2019.08.25 公開 | | * 2019.08.25 公開 |