зеркало из https://github.com/microsoft/sketch360.git
228 строки
10 KiB
HTML
228 строки
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de-de">
|
|
<head>
|
|
<title>Sketch 360</title>
|
|
<meta name="description" content="Über Sketch 360" />
|
|
<meta name="keywords" content="sketch360,WebVR,Garage,Microsoft,360-Grad zeichnen" />
|
|
<meta name="generator" content="Sketch 360" />
|
|
<meta name="application-name" content="Sketch 360" />
|
|
<meta name="author" content="Microsoft Garage" />
|
|
<style type="text/css">
|
|
img.center {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
</style>
|
|
<link href="about.css" rel="stylesheet" />
|
|
<script src="babylon.4.1.js"></script>
|
|
<noscript></noscript>
|
|
</head>
|
|
<body style="background-color: beige; font-family: sans-serif;">
|
|
<h1>Sketch 360</h1>
|
|
<h6>Ein Microsoft Garage Projekt</h6>
|
|
<p>
|
|
Mit Sketch 360 können Sie 360-Grad-Panoramaskizzen erstellen
|
|
indem Sie von einem einzigen Blickpunkt in mehrere Richtungen schauen.
|
|
|
|
360-Grad Kameras speichern solche sphärischen Bilder als JPEG-Dateien
|
|
unter Verwendung einer Rektangularprojektion und fügte den Bildern bestimmte
|
|
Metadaten hinzu, die sie als 360-Grad Fotos identifizierten.
|
|
|
|
Sketch 360 speichert Bilddateien auf die gleiche Weise, sodass die Skizzen
|
|
als 360-Fotos auf Websites wie Facebook, Adobe Lightroom.com und Kuula.co
|
|
angezeigt werden können.
|
|
</p>
|
|
<img src="grid.jpg" width="320" alt="Gleichwinkliges Gitter" class="center" />
|
|
<div><center>Gleichwinkliges Gitter in 2D</center></div>
|
|
<canvas id="renderCanvas" class="RenderCanvas" aria-label="360 preview"></canvas>
|
|
<br />
|
|
<div><center>Gleichwinkliges Gitter in 360-Grad 3D <br/>(Sie können mit diesem Bild interagieren)</center></div>
|
|
<h2>Benutzung von Sketch 360</h2>
|
|
<p>
|
|
Sketch 360 verfügt über zwei Hauptbedienungsoberflächen: eine Zeichenfläche und eine 360-Grad-Ansicht.
|
|
Sie zeichnen Sie mit einem Stift oder einer Berührung auf die Leinwand der Zeichenfläche und jedes Mal, wenn ein
|
|
Strich hinzugefügt wird, wird die 360-Grad-Ansicht aktualisiert und hin zum Endpunkt des Tintenstrichs
|
|
gedreht. Sie können die 360-Grad-Ansicht auch jederzeit mit Ihrem Finger manuell drehen, um andere Ansichten der
|
|
Skizze anzuzeigen.
|
|
</p>
|
|
<h2>Zeichnen und Löschen</h2>
|
|
<img src="ui.png" width="420" alt="Sketch 360 Benutzeroberfläche" class="center" />
|
|
<ol>
|
|
<li>Menü</li>
|
|
<li>Malmodus </li>
|
|
<li>Löschmodus </li>
|
|
<li>Berührungszeichnen</li>
|
|
<li>Rückgängig machen</li>
|
|
<li>Wiederholen </li>
|
|
<li>Zeichnungsansicht </li>
|
|
<li>360-Grad-Ansicht</li>
|
|
<li>Zoom-Schieberegler </li>
|
|
<li>Stiftfarbe </li>
|
|
<li>Stiftdicke </li>
|
|
<li>Schablonen</li>
|
|
<li>Zeichnungsleinwand </li>
|
|
</ol>
|
|
<p>
|
|
Mit einem Gerät, das einen Stift unterstützt wie zum Beispiel das Microsoft Surface Duo oder dem
|
|
Samsung Galaxy Note, zeichnen Sie mit dem Griffel und manipulieren die Position und
|
|
Vergrößerung der Leinwand mit Berührungen. Auf Geräten, die nicht mit einem Stift ausgestattet sind,
|
|
können Sie in den Modus zum Berührungszeichnen wechseln, um Fingerberührungen als Stift- oder Radiergummistriche
|
|
zu interpretieren, anstatt die Ansicht zu schwenken und zu zoomen.
|
|
Anstelle von Zoom-Gesten zum Einstellen der Leinwandvergrößerung, können Sie auch den
|
|
Zoom-Schieberegler verwenden.
|
|
</p>
|
|
<p>
|
|
Wenn Sie einen Stift mit einer Radiergummifunktion wie den Surface Pen verwenden, können Sie jeden Strich löschen,
|
|
indem Sie die Stiftrückseite darüber ziehen.
|
|
Wenn Sie Berührungszeichenmodus verwenden, drücken Sie die Radiergummitaste, um in den Löschmodus zu wechseln.
|
|
</p>
|
|
<p>
|
|
Um die Verbindung der linken und rechten Kante einer Zeichnung in der 360-Grad-Ansicht zu erleichtern, sehen Sie einen Teil
|
|
der gegenüberliegenden Seite wenn Sie am Randes der Zeichenfläche arbeiten.
|
|
</p>
|
|
<p>
|
|
Berühren Sie die <b>kippen & drehen</b>-Taste in der 360-Grad-Ansicht, damit der Positionssensor des Geräts die
|
|
Neigung und Drehung der Kamera automatisch bestimmen kann.
|
|
</p>
|
|
<h2>
|
|
Stiftfarbe und -dicke
|
|
</h2>
|
|
<p>
|
|
Neben der Zeichenfläche können Sie auf Schaltflächen tippen, um die Farbe oder Dicke der erstellten Linien zu ändern.
|
|
</p>
|
|
<h2>
|
|
Rückgängig machen und Wiederholen
|
|
</h2>
|
|
<p>
|
|
Jeder Zeichen- oder Löschvorgang kann einfach durch Tippen auf der entsprechenden Schaltflächen rückgängig gemacht oder wiederholt werden.
|
|
</p>
|
|
<h2>
|
|
Zeichnungsansicht und 360-Grad-Ansicht
|
|
</h2>
|
|
<p>
|
|
Wechseln Sie in die Zeichnungsansicht- oder den 360-Grad-Ansichtsmodus, um nur eines der beiden Fenster bildschirmfüllend anzuzeigen.
|
|
Navigieren Sie in der App mit dem Zurück-Knopf oder der Zurück-Geste, um zur standard Zwei-Fenster-Ansicht zurückzukehren.
|
|
</p>
|
|
|
|
<h2>
|
|
Senkrechte Hilfslinien
|
|
</h2>
|
|
<p>
|
|
Aktivieren Sie die Hilfslinienfunktion um Linien zu zeichnen, die an den Primärachsen im gleichwinkligen Gitter ausgerichtet sind
|
|
wenn Sie zum Mittelpunkt der Zeichenfläche zeigen.
|
|
</p>
|
|
<ul>
|
|
<li> Rote Linien verlaufen von vorne nach hinten. </li>
|
|
<li> Blaue Linien verlaufen von links nach rechts. </li>
|
|
<li> Grüne Linien verlaufen von oben nach unten. </li>
|
|
|
|
<li>
|
|
Mit der Zweipunktschablone können Sie Linien zeichnen, die genau durch zwei beliebige
|
|
Punkte führen. Um die Schablone zu positionieren, positionieren Sie zuerst die beiden Kreise
|
|
und zeichnen Sie dann die Linie über die gestrichelte Schablonenkurve.
|
|
Diese Schablone wurde in Zusammenarbeit mit António B. Araújo an der Universidade Aberta in Portugal
|
|
entwickelt.
|
|
Weitere Informationen finden Sie <a href="https://aka.ms/AAancza">hier</a>.
|
|
</li>
|
|
</ul>
|
|
<h2>Menü</h2>
|
|
<ul>
|
|
<li>
|
|
<b> Neue Skizze </b>: Löschen Sie die aktuelle Skizze und erstellen Sie eine neue leere Skizze.
|
|
</li>
|
|
<li>
|
|
<b> Skizze öffnen </b>: Öffnen Sie eine .sketch360-Datei, die zuvor auf dem Gerät gespeichert wurde.
|
|
</li>
|
|
<li>
|
|
<b> Skizze speichern </b>: Speichern Sie die aktuelle Zeichnung in einer .sketch360-Datei auf dem Gerät.
|
|
</li>
|
|
<li>
|
|
<b> Bild exportieren </b>: Speichern Sie die aktuelle Zeichnung in einem JPEG-Bild inklusive 360-Grad Metadaten auf dem Gerät.
|
|
</li>
|
|
<li>
|
|
<b> Freigeben </b>: Geben Sie die Skizze als JPEG-Bild mit 360-Grad Metadaten für andere Apps auf dem Gerät frei.
|
|
</li>
|
|
<li>
|
|
<b> Skizzeneigenschaften </b>: Ändern Sie den Namen und die Hintergrundfarbe der Skizze.
|
|
</li>
|
|
<li>
|
|
<b> Einstellungen </b>: Ändern Sie die Rasteropazität, die Ausrichtung der beiden Bedienungsoberflächen,
|
|
die Pixelgröße der exportierten Bilder, und laden Sie die Beispielskizze die beim ersten Start der App angezeigt wird neu.
|
|
</li>
|
|
<li>
|
|
<b> Hilfe </b>: Diese Hilfeseite anzeigen.
|
|
</li>
|
|
<li>
|
|
<b> Über Sketch 360 </b>: Details zum Team, das die App erstellt hat.
|
|
</li>
|
|
</ul>
|
|
<h2>Apps und Websites, auf denen 360-Grad Bilder angezeigt werden</h2>
|
|
<ul>
|
|
<li>
|
|
Adobe <a target="=_blank" href="lightroom.adobe.com">lightroom.adobe.com</a>
|
|
</li>
|
|
<li>
|
|
Adobe <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://kuula.co/">Kuula</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://facebook.com">Facebook</a>:
|
|
Bilder müssen von der Facebook.com-Website (facebook.com oder m.facebook.com) hochgeladen werden, nicht von der mobilen Facebook-App.
|
|
</li>
|
|
<li>
|
|
<a href="https://flickr.com">Flickr</a>
|
|
</li>
|
|
</ul>
|
|
<h2>Die Technologie, die hinter Sketch 360 steckt</h2>
|
|
<ul>
|
|
<li>
|
|
<a href="https://dotnet.microsoft.com/apps/xamarin/xamarin-forms">Xamarin Forms</a> mit C#
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/mono/SkiaSharp">SkiaSharp</a> für die Zeichenfläche
|
|
</li>
|
|
<li><a href="https://www.babylonjs.com/">Babylon.js</a> für die 360-Grad Ansicht mit JavaScript</li>
|
|
</ul>
|
|
<h2>Über Sketch 360</h2>
|
|
<p>
|
|
Sketch 360 wurde ursprünglich von Michael Scherotter erstellt und
|
|
<a target = "_blank" href = "https://www.microsoft.com/en-us/garage/blog/2018/11/finally-a-way-to-sketch-360-degree-vr-scenes/ ">
|
|
als kostenlose App
|
|
</a> im Jahr 2018 für Microsoft Surface im
|
|
<a href="https://www.microsoft.com/en-us/p/sketch-360/9p89s2qlh11t">
|
|
Windows Store
|
|
</a> veröffentlicht.
|
|
Es half ihm bei der Erstellung von 360-Grad Skizzen.
|
|
Hier sind einige
|
|
<a href="https://adobe.ly/2UMv7Ew">
|
|
Beispiele für Skizzen
|
|
</a>
|
|
die er damit auf dem Microsoft Surface Pro und Surface Go zeichnete.
|
|
Michael seit dreißig Jahren aks er Architektur am College zu studierte
|
|
<a href="https://adobe.ly/2GpnWYN">
|
|
Skizziert und Tagebücher
|
|
</a> geführt.
|
|
Er machte seine Karriere in Softwareentwicklung, behielt aber seine Leidenschaft für kreative Werkzeuge
|
|
und hat nie aufgehört weiter zu skizzieren.
|
|
<br />
|
|
|
|
<p>
|
|
Sketch 360 für Android wurde von Microsoft-Mitarbeitern, Michael Scherotter, Matthew Leibowitz, Shane Neuville und Komal Priya
|
|
während unternehmensweiter Hackathons, die von der <a href="https://www.microsoft.com/en-us/garage/"> Microsoft Garage </a>
|
|
durchgeführt werden, erstellt.
|
|
</p>
|
|
|
|
<p>
|
|
Gleichwinklige Schablonenwerkzeuge <a href="https://aka.ms/AAancza"> (Gl. A Snap) </a> von António B. Araújo.
|
|
<br />
|
|
Übersetzungen ins Deutsche von Andreas Schiffler.
|
|
</p>
|
|
</p>
|
|
<img src="garage.png" alt="Microsoft Garage Logo" width="100" class="center" />
|
|
<script src="about.js">
|
|
</script>
|
|
</body>
|
|
</html> |