「リトポロジでリダクション」の版間の差分

提供: ディーズガレージ wiki
移動先: 案内検索
(USDZ)
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>&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 公開
 
* 2019.08.25 公開

2019年11月12日 (火) 01: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の場合 > 法線を編集モディファイヤ > 全ての面選択 > リセット
  • 金属加工部品は不向きっぽい > 手動作成

Instant Meshes.jpg

焼き付け

法線バンプ マップを作成するには - 3ds Max 2016
オリジナルモデルのポリゴン凹凸(ディティール)をリトポロジ加工モデルのUV(Normalmap)に焼き付け差分を吸収
Cas LC2 1R normal.jpg

NVIDIA Normal Map filter

参考: NVIDIA Texture Tools for Adobe Photoshop | NVIDIA Developer
革製品のNormalmap作成
Leather.jpg

Combine Normal

Combine Normal - Portfolio Vincent Callebaut
焼き付けで作るNormalmapは無加工のオリジナルモデルによるもの
革製品の材質は通常のNormalmap
この2枚を合成
Cas LC2 1R leather normal.jpg

更新履歴

  • 2019.08.25 公開