192 lines
7.6 KiB
HTML
192 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Code — 3Dcomunity</title>
|
|
|
|
<!-- ÚNICO CSS de esta página -->
|
|
<link rel="stylesheet" href="code.css"/>
|
|
|
|
<!-- Visor 3D -->
|
|
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
|
|
|
|
<meta name="description" content="Proceso STL→GLB, visualización y publicación en Oasis/SSB de 3Dcomunity."/>
|
|
</head>
|
|
<body>
|
|
<!-- HEADER -->
|
|
<header class="site-header">
|
|
<a class="site-logo" href="/" aria-label="Ir a inicio">
|
|
<img src="3d_comunity_not_cool.webp" alt="Logo 3Dcomunity" width="44" height="44" loading="eager">
|
|
</a>
|
|
|
|
<h1 class="site-title">3Dcomunity</h1>
|
|
|
|
<nav class="nav-menu" aria-label="Navegación principal">
|
|
<button class="active" onclick="location.href='/code.html'">Code</button>
|
|
<button onclick="location.href='/sub/gallery.html'">Gallery</button>
|
|
<button onclick="location.href='/sub/tutorials.html'">Tutorials</button>
|
|
<button onclick="location.href='/sub/about.html'">About</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="code-page">
|
|
|
|
<!-- HERO -->
|
|
<section class="doc-card hero-head">
|
|
<h2 class="hero-title">Cómo movemos tus modelos: de <span>STL</span> a <span>GLB</span>, a la web y a Oasis</h2>
|
|
<p class="hero-subtitle">
|
|
Resumen simple de nuestra cadena: limpiamos STL/OBJ, convertimos a GLB optimizado, generamos miniaturas,
|
|
servimos por web estática y anunciamos en el PUB Oasis para replicación. Todo ligero, auditable y resistente.
|
|
</p>
|
|
<div class="btn-row">
|
|
<a class="btn btn-green" href="#pipeline">Ver pipeline</a>
|
|
<a class="btn btn-orange" href="#visor3d">Probar visor 3D</a>
|
|
<a class="btn btn-outline" href="#red">Esquema de red</a>
|
|
<a class="btn btn-outline" href="#faq">FAQ</a>
|
|
</div>
|
|
<ul class="pills" aria-label="Puntos clave">
|
|
<li class="pill">STL/OBJ → GLB</li>
|
|
<li class="pill">Thumbnails</li>
|
|
<li class="pill">Catálogo JSON</li>
|
|
<li class="pill">Nginx estático</li>
|
|
<li class="pill">Oasis / SSB</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- ÍNDICE RÁPIDO -->
|
|
<nav class="doc-card index-row" aria-label="Índice">
|
|
<a class="btn btn-outline" href="#pipeline">Pipeline</a>
|
|
<a class="btn btn-outline" href="#visor3d">Visor 3D</a>
|
|
<a class="btn btn-outline" href="#red">Topología</a>
|
|
<a class="btn btn-outline" href="#conceptos">Conceptos</a>
|
|
<a class="btn btn-outline" href="#faq">FAQ</a>
|
|
</nav>
|
|
|
|
<!-- PIPELINE -->
|
|
<section id="pipeline" class="doc-card block">
|
|
<h3 class="block-title">Pipeline básico (alto nivel)</h3>
|
|
|
|
<pre class="ascii gn" aria-label="Pipeline STL→GLB→Web→Oasis">
|
|
[1] Ingesta [2] Limpieza [3] Conversión [4] Thumbs
|
|
STL / OBJ / STEP --> escala/ejes/normales --> GLB optimizado --> JPG/WEBP 512px
|
|
|
|
[5] Catálogo [6] Web estática [7] Anuncio Oasis
|
|
JSON (metadatos) --> Nginx / CDN --> PUB: hash + URL/refs
|
|
</pre>
|
|
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<h4>1) Ingesta & limpieza</h4>
|
|
<ul class="dash-list">
|
|
<li>Validamos licencia y autoría.</li>
|
|
<li>Normalizamos unidades (mm) y ejes (Y-up → Z-up si procede).</li>
|
|
<li>Recalculamos normales, soldamos vértices duplicados.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>2) Conversión a GLB</h4>
|
|
<p>Usamos herramientas reproducibles (ej. Blender CLI / gltfpack) para un GLB ligero y web-friendly.</p>
|
|
<pre class="code"><code># Ejemplo (alto nivel)
|
|
blender -b -P scripts/stl2glb.py -- --in model.stl --out model.glb
|
|
gltfpack -i model.glb -o model.glb -cc -tc # compresión + tangentes</code></pre>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>3) Miniaturas</h4>
|
|
<ul class="dash-list">
|
|
<li>Render rápido con cámara fija → <code>/sub/thumbs/*.webp</code>.</li>
|
|
<li>Nombres consistentes: <code>nombre.glb</code> ↔ <code>nombre.webp</code>.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>4) Catálogo & publicación</h4>
|
|
<ul class="dash-list">
|
|
<li>Metadatos en <code>catalog.json</code> (autor, tema, material, complejidad, tags).</li>
|
|
<li>Web estática servida por Nginx.</li>
|
|
<li>Mensaje en Oasis/SSB con hash de contenido y referencias públicas.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- VISOR 3D DEMO -->
|
|
<section id="visor3d" class="doc-card block">
|
|
<h3 class="block-title">Demo visor 3D — <code>snh_base.glb</code></h3>
|
|
<p>Previsualización rápida con <strong><model-viewer></strong>. Mueve, rota y haz zoom sin plugins.</p>
|
|
|
|
<div class="demo-3d">
|
|
<model-viewer
|
|
src="/sub/modelos/snh_base.glb"
|
|
camera-controls
|
|
auto-rotate
|
|
shadow-intensity="1"
|
|
exposure="1.05"
|
|
alt="Modelo 3D snh_base">
|
|
</model-viewer>
|
|
</div>
|
|
|
|
<div class="btn-row">
|
|
<a class="btn btn-orange" href="/sub/modelos/snh_base.glb" download>Descargar GLB</a>
|
|
<a class="btn btn-outline" href="/sub/gallery.html">Ver galería</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- RED -->
|
|
<section id="red" class="doc-card block">
|
|
<h3 class="block-title">Topología mínima de despliegue</h3>
|
|
<pre class="ascii or" aria-label="Topología de red">
|
|
Navegador ──HTTPS──► Nginx (RP)
|
|
│
|
|
├──► / (estático: HTML/CSS/GLB/WEBP)
|
|
└──► /app (si hay backend/API)
|
|
|
|
Gossip (SSB) ──TCP/7724──► PUB Oasis
|
|
</pre>
|
|
<p>La web es estática para rapidez y resiliencia. Oasis se usa para anunciar y replicar referencias de modelos/contenidos.</p>
|
|
</section>
|
|
|
|
<!-- CONCEPTOS -->
|
|
<section id="conceptos" class="doc-card block">
|
|
<h3 class="block-title">Conceptos claros</h3>
|
|
<ul class="check-list">
|
|
<li><strong>GLB</strong>: formato web binario (gltf) con mejor carga que STL/OBJ.</li>
|
|
<li><strong>Offline-first</strong>: puedes navegar la web estática sin depender del PUB.</li>
|
|
<li><strong>PUB Oasis</strong>: nodo público para descubrimiento/replicación (no SPOF).</li>
|
|
<li><strong>Auditable</strong>: herramientas CLI, ficheros estáticos y hashes verificables.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq" class="doc-card block">
|
|
<h3 class="block-title">FAQ</h3>
|
|
|
|
<details class="faq">
|
|
<summary>¿Por qué convertís a GLB?</summary>
|
|
<p>Porque reduce peso, empaqueta materiales y es el estándar de facto para la web (cargas rápidas y consistentes).</p>
|
|
</details>
|
|
|
|
<details class="faq">
|
|
<summary>¿Qué se replica exactamente en Oasis?</summary>
|
|
<p>Metadatos y referencias (hash/URL) de los modelos, para que otros nodos puedan descubrirlos/verificarlos.</p>
|
|
</details>
|
|
|
|
<details class="faq">
|
|
<summary>¿Se puede usar sin JavaScript?</summary>
|
|
<p>La web funciona; sin JS no verás el visor interactivo, pero podrás descargar GLB/WEBP desde la galería.</p>
|
|
</details>
|
|
</section>
|
|
|
|
<!-- CTA FINAL -->
|
|
<section class="doc-card">
|
|
<div class="btn-row">
|
|
<a class="btn btn-green" href="#pipeline">Revisar pipeline</a>
|
|
<a class="btn btn-orange" href="#visor3d">Probar visor</a>
|
|
<a class="btn btn-outline" href="/sub/gallery.html">Más modelos</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|