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