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

提供: ディーズガレージ wiki
移動先: 案内、 検索
(→‎AR確認)
(→‎)
159行目: 159行目:
  
 
     :root {
 
     :root {
−
         /*--progress-bar-color: rgba(0, 0, 255, 1.0);*/
+
         --progress-bar-color: rgba(0, 0, 255, 1.0);
−
        --progress-bar-height: 0px;
+
 
     }
 
     }
 
</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の場合 > 法線を編集モディファイヤ > 全ての面選択 > リセット
  • 金属加工部品は不向きっぽい > 手動作成

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

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

<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>&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>
<!-- 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 公開
「http://dz.plala.jp/wiki/index.php?title=リトポロジでリダクション&oldid=29246」から取得