「リトポロジでリダクション」の版間の差分
(→AR確認) |
(→) |
||
159行目: | 159行目: | ||
:root { | :root { | ||
− | + | --progress-bar-color: rgba(0, 0, 255, 1.0); | |
− | + | ||
} | } | ||
</style> | </style> | ||
184行目: | 183行目: | ||
<script src="https://code.jquery.com/jquery-3.4.1.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 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 nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script> | ||
<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 () { | $(window).on('load resize', function () { | ||
$("model-viewer").css({ width: $(window).width(), height: $(window).height() }); | $("model-viewer").css({ width: $(window).width(), height: $(window).height() }); |
2019年11月3日 (日) 20:26時点における版
夢に見たリダクションに出会えた気がします。ワークフローを探ってみます。
Instant Meshes
GitHub - wjakob/instant-meshes
Pre-compiled binariesからダウンロード
Microsoft Windows
Mac OS X
Linux
操作方法
参考: Instant Meshes で自動リトポロジーしてみる
参考: 方向場による再メッシュ - Mesh Wiki
サンプルデータ
LC2(ソファ/オットマン) Cassina | カッシーナ
ダウンロード
2D/3Dボタン > 3D(obj)
国内張地 > FX革 XBL1G / BL 1 ブラック
具合
- objで一括リトポロジは失敗する
3D(fbx) > 3Dソフトに読込み > 部材ごとに分割 > 部材ごとにobj書き出し > 部材ごとにリダクション > obj保存 > 3Dソフトに読込み - 原点がCADっぽい リトポロジ前に3Dソフトで整理するのが無難
- リトポロジ後、法線情報が壊れる? 3dsMaxの場合 > 法線を編集モディファイヤ > 全ての面選択 > リセット
- 金属加工部品は不向きっぽい > 手動作成
焼き付け
法線バンプ マップを作成するには - 3ds Max 2016
オリジナルモデルのポリゴン凹凸(ディティール)をリトポロジ加工モデルのUV(Normalmap)に焼き付け差分を吸収
NVIDIA Normal Map filter
参考: NVIDIA Texture Tools for Adobe Photoshop | NVIDIA Developer
革製品のNormalmap作成
Combine Normal
Combine Normal - Portfolio Vincent Callebaut
焼き付けで作るNormalmapは無加工のオリジナルモデルによるもの
革製品の材質は通常のNormalmap
この2枚を合成
USDZ
参考: AR Quick Look - Apple
参考: Pixar の Universal Scene Description - Unity
参考: USD Unity SDK: USD C# Bindings for Unity
参考: USD Documentation : Usdz File Format Specification - Pixar
iPhone向けAR
USDZ - Le Corbusier LC2 ©CASSINA IXC. Ltd.
USDZ - Aeron Chair ©Herman Miller, Inc. 調整中
USDZ - Ball Chair ©Eero Aarnio
メモ
- 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圧縮なので拡張子変更でソースが見える
リソース
アーロンチェア–A Size
https://www.hermanmiller.com/ja_jp/products/seating/office-chairs/aeron-chairs/pro-resources/
glb
参考: GitHub - Plattar/gltf-exporter: Unity3D GLTF2 importer and exporter toolchain
参考: GLBチュートリアル - シェア機能 - ドキュメンテーション - Facebook for Developers
- GLBはglTF 2.0ファイル形式のバイナリバージョン
- glTFからGLBへの変換 https://glb-packer.glitch.me
<model-viewer>
参考: GitHub - model-viewer/README.md
参考: GitHub - model-viewer/POLYFILLS.md
参考: GitHub - Document
ソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<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>
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>
<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
<script src="https://unpkg.com/focus-visible@5.0.1/dist/focus-visible.js" defer></script>
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<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
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>
.htaccess gzip圧縮
<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>
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 公開