差分

移動先: 案内検索

リトポロジでリダクション

7,793 バイト除去, 2019年11月11日 (月) 16:26
編集の要約なし
この2枚を合成<br />
[[ファイル: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>&lt;model-viewer&gt;</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 公開

案内メニュー