content
This commit is contained in:
parent
c4316e4cdf
commit
2eb2a67cde
17 changed files with 188 additions and 96 deletions
28
content/blog/3d-workflow.md
Normal file
28
content/blog/3d-workflow.md
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
title: 3D Workflow
|
||||
excerpt: Mein Workflow zur 3D-Beabeitung und Nutzung in Web-Apps.
|
||||
---
|
||||
|
||||
## Datenformate für 3D im Web
|
||||
|
||||
Die meisten Datenformate für 3D-Inhalte sind für das Web ungeeignet. Entweder sind sie zu groß und würden die Ladezeit der Webseite massiv beeinträchtigen oder sie unterstützen nicht alle benötigten Elemente eines 3D-Modells. Viele 3D-Modelle außerhalb derer, die mit CAD-Software erstellt wurden, bestehen nicht nur aus der Geometrie, sondern auch verschiedenen weiteren Daten wie Texturen, Animationen, Belichtung und Unterelementen. Da man auch diese Informationen ins Web bringen muss, bleiben nur ein paar Formate übrig. Als aufkommender Standard für 3D im Web hat sich das Graphics Library Transmission Format (kurz: <a href="https://www.khronos.org/gltf/">GLTF</a>) durchgesetzt. Dieser offene Standard, an dem mehrere große Unternehmen wie Epic Games, NVIDIA, Meta und Blender mitarbeiten, hat die erforderlichen Eigenschaften, die die meisten Projekte im Web benötigen.
|
||||
|
||||
## Erzeugung der 3D-Daten
|
||||
|
||||
Leider gibt es viele Scanner und Systeme, die das direkte Speichern der Rohdaten (oder des ersten verarbeiteten 3D-Modells) als `.gltf`-Datei nicht unterstützen. Oft muss man dann ein anderes Format als Zwischenspeicherung wählen, wobei sich hier `.obj` am meisten eignet. Es unterstützt neben Geometrieinformationen auch Materialien bzw. Textur-Dateien, die als `.png` oder `.jpg` in eigenen Dateien neben der `.obj`-Datei gespeichert werden. Das Format ist zwar nicht ideal, aber reicht für den Austausch zu open-source Programmen wie Blender zur weiteren Nachbearbeitung aus. Es sollte darauf geachtet werden das 3D-Modell in der **größtmöglichen** Qualität zu exportieren, da sich in den nachfolgenden Schritten die Menge der Daten und damit auch die Qualität des finalen 3D-Modells leicht reduzieren lässt. Wählt man allerdings beim Export eine niedrigere Qualität, verliert man in späteren Schritten unter Umständen noch mehr Qualität und erhöht die Abweichung von der echten Geometrie des gescannten Objekts.
|
||||
|
||||
## Nachbearbeitung
|
||||
|
||||
### Schritt 1: Reduzierung der Geometrie
|
||||
|
||||
Das generierte 3D-Modell (wie beschrieben in der bestmöglichsten Qualität) sollte nun für eine schnellere Bearbeitung in der Komplexität seiner Geometrie reduziert werden. Das bedeutet praktisch die Anzahl der Vertices bzw. Faces zu reduzieren.
|
||||
|
||||
- Meshlab
|
||||
- Blender
|
||||
- gltf-transform
|
||||
- gltf.report
|
||||
|
||||
## Kompression
|
||||
|
||||
- Draco
|
||||
- Meshoptimizer
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
layout: layouts/overview.njk
|
||||
title: All blogposts
|
||||
title: All Posts
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ eleventyExcludeFromCollections: true
|
|||
<a href="{{post.url}}">{{post.data.title}}</a>
|
||||
</h1>
|
||||
|
||||
<!--time>{{post.date | formatDate }}</time-->
|
||||
<time>{{post.date | formatDate }}</time>
|
||||
</header>
|
||||
|
||||
<p>{{post.data.excerpt}}</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Hello World This is a title
|
||||
excerpt: This is the excerpt
|
||||
---
|
||||
|
||||
Creating a successful blog post involves a few key elements: engaging content, valuable insights, and a clear structure. Begin with a captivating introduction that highlights what readers will gain. In the body, break down the topic into digestible sections using headings for clarity. Keep paragraphs short, use bullet points, and include examples to keep readers interested. To wrap it up, a summary or actionable takeaway helps solidify the message. Don’t forget to add visuals, as they increase engagement and make the post more shareable.
|
||||
|
|
@ -4,10 +4,17 @@ layout: layouts/base.njk
|
|||
permalink: /contact/index.html
|
||||
---
|
||||
|
||||
<section>
|
||||
<section class="section-background" style="
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
url('/images/contact.jpg');
|
||||
">
|
||||
<div class="section-content">
|
||||
<p>Feel free to contact me at <a href="mailto:mail@luca-junge.de">mail@luca-junge.de</a>
|
||||
</p>
|
||||
<div>
|
||||
<h1>Kontakt</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>Für Kontaktanfragen schreibe bitte eine E-Mail an <a href="mailto:mail@luca-junge.de">mail@luca-junge.de</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -31,15 +31,15 @@ button,
|
|||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border: 3px solid rgba(0, 0, 0, 0.7);
|
||||
border: 3px solid rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover,
|
||||
button:focus-visible,
|
||||
.button:focus-visible {
|
||||
background-color: rgba(60, 60, 60, 0.7);
|
||||
border: 3px solid rgba(60, 60, 60, 0.7);
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
border: 3px solid rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.inline-button {
|
||||
|
|
|
|||
36
content/feed.njk
Normal file
36
content/feed.njk
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---json
|
||||
{
|
||||
"permalink": "feed.xml",
|
||||
"eleventyExcludeFromCollections": true,
|
||||
"metadata": {
|
||||
"title": "Luca Junge - Blog",
|
||||
"description": "Mein Blog",
|
||||
"language": "de",
|
||||
"base": "https://luca-junge.de/",
|
||||
"author": {
|
||||
"name": "Luca Junge"
|
||||
}
|
||||
}
|
||||
}
|
||||
---
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:base="{{ metadata.base | addPathPrefixToFullUrl }}" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>{{ metadata.title }}</title>
|
||||
<link>{{ metadata.base | addPathPrefixToFullUrl }}</link>
|
||||
<atom:link href="{{ permalink | htmlBaseUrl(metadata.base) }}" rel="self" type="application/rss+xml" />
|
||||
<description>{{ metadata.description }}</description>
|
||||
<language>{{ metadata.language or page.lang }}</language>
|
||||
{%- for post in collections.post | reverse %}
|
||||
{%- set absolutePostUrl = post.url | htmlBaseUrl(metadata.base) %}
|
||||
<item>
|
||||
<title>{{ post.data.title }}</title>
|
||||
<link>{{ absolutePostUrl }}</link>
|
||||
<description>{{ post.data.excerpt | renderTransforms(post.data.page, metadata.base) }}</description>
|
||||
<pubDate>{{ post.date | dateToRfc822 }}</pubDate>
|
||||
<dc:creator>{{ metadata.author.name }}</dc:creator>
|
||||
<guid>{{ absolutePostUrl }}</guid>
|
||||
</item>
|
||||
{%- endfor %}
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -7,11 +7,11 @@ permalink: /index.html
|
|||
<section class="hero">
|
||||
<div class="section-content">
|
||||
<div>
|
||||
<h1>Welcome to my website!</h1>
|
||||
<h1>3D / XR / Games</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
I'm Luca Junge ― a web developer creating 3D Applications and Tools</p>
|
||||
Ich bin Luca Junge ― Ein Webentwickler, spezialisiert auf die Entwicklung von 3D-Web-Apps, unter anderem im Museum</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -19,11 +19,10 @@ permalink: /index.html
|
|||
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/museum2_mobile.jpg');">
|
||||
<div class="section-content">
|
||||
<div>
|
||||
<h1>Interactive Applications & Games</h1>
|
||||
<h1>Interaktive Anwendungen & Games</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>My focus is on interactive applications in the museum context</p>
|
||||
<p></p>
|
||||
<p>Mein Fokus liegt dabei auf interaktiven Anwendungen und Möglichkeiten, Menschen damit zu begeistern</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -31,23 +30,12 @@ permalink: /index.html
|
|||
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/blog_mobile.jpg');">
|
||||
<div class="section-content">
|
||||
<div>
|
||||
<h1>Open-Source Workflow and Tools</h1>
|
||||
<h1>Open-Source Workflow und Tools</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>Every part of my workflow uses open-source tools and software:</p>
|
||||
<p>VS Codium, three.js, Godot Engine, Meshlab, Meshroom, Instant Meshes & more</p>
|
||||
<p>Jeder Schritt meiner Workflows nutzt open-source Tools und Software:</p>
|
||||
<p>VS Codium, three.js, Godot Engine, Meshlab, Meshroom, Instant Meshes & mehr</p>
|
||||
<!--a class="button" href="/workflows/">Zum Workflow</a-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/blog_mobile.jpg');">
|
||||
<div class="section-content">
|
||||
<div>
|
||||
<h1>My Blog</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p></p>
|
||||
<a class="button" href="/blog/">Visit</a>
|
||||
</div>
|
||||
</div>
|
||||
</section-->
|
||||
</section>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
layout: layouts/base.njk
|
||||
title: "My Portfolio"
|
||||
permalink: /portfolio/index.html
|
||||
---
|
||||
|
||||
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/under-construction_mobile.jpg');">
|
||||
<div class="section-content">
|
||||
<p>My Portfolio is currently under construction</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
51
content/projects.njk
Normal file
51
content/projects.njk
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
layout: layouts/base.njk
|
||||
title: 'Projekte'
|
||||
permalink: /projects/index.html
|
||||
---
|
||||
|
||||
<section
|
||||
class="section-background"
|
||||
style="
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
url('/images/screenshot_artefact.png');
|
||||
">
|
||||
<div class="section-content">
|
||||
<div>
|
||||
<h1>ARtefact</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
ARtefact ist eine webbasierte 3D-Quiz-App mit Augmented
|
||||
Reality-Funktion, welche mit Schulklassen und Lehrer:innen aus
|
||||
Bremerhaven partizipativ entwickelt wurde.
|
||||
</p>
|
||||
<a class="button" href="https://github.com/dsm-museum/artefact"
|
||||
>Zum Projekt</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="section-background"
|
||||
style="
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
url('/images/godot_engine_background.jpg');
|
||||
">
|
||||
<div class="section-content">
|
||||
<div>
|
||||
<h1>Support für ARCore in der Godot Game Engine</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
Zusammen mit einer kleinen Gruppe bin ich an der erstmaligen
|
||||
Unterstützung von ARCore für Android-Geräte in der Godot Game Engine
|
||||
beteiligt.
|
||||
</p>
|
||||
<a class="button" href="https://github.com/GodotVR/godot_arcore"
|
||||
>Zum Projekt</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Add table
Add a link
Reference in a new issue