3D im Web: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(2 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 3: Zeile 3:
 
GLB ist die Binary Version von glTF 2.0. Das Format wird z.B. von Facebook für 3D Bilder verwendet. glTF ist quasi Standard Format für Web 3D (Stand 2019).
 
GLB ist die Binary Version von glTF 2.0. Das Format wird z.B. von Facebook für 3D Bilder verwendet. glTF ist quasi Standard Format für Web 3D (Stand 2019).
  
−
[[GLB / glTF]]
+
[[GLB / glTF]]
−
 
 
−
https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2 Von Blender nach Three JS als glTF
 
 
  https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials/ - Facebook Manual
 
  https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials/ - Facebook Manual
−
https://www.khronos.org/blog/art-pipeline-for-gltf - Übersicht über den Workflow nach glTF
 
−
 
−
==== glTF - Spezifikation ====
 
−
The glTF format supports the following textures for the Metallic-Roughness PBR model:
 
−
 
−
    Base Color
 
−
    Metallic
 
−
    Roughness
 
−
    Normal
 
−
    Ambient Occlusion
 
−
    Emission
 
−
 
−
The format does expect the textures in a specific format, however. The Base Color, Normal, and Emission textures are saved as individual files, preferably a PNG as the format is lossless. The Ambient Occlusion, Roughness, and Metallic textures are saved in a single channel-packed texture to reduce the number of texture loads. The textures need to be packed into the channels of your texture as follows:
 
−
 
−
    Red: Ambient Occlusion
 
−
    Green: Roughness
 
−
    Blue: Metallic
 
−
 
−
Going forward, I will refer to this channel-packed texture as the ORM texture for Occlusion, Roughness, and Metallic.
 
  
 
== Libraries ==
 
== Libraries ==
 
=== Three JS ===
 
=== Three JS ===
−
  https://www.youtube.com/watch?v=uzkedMF-l4Q&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM
+
[[Three JS]]
 +
Aktuell beste Library für anspruchsvolle Aufgaben und interaktives 3D im Web (Stand 2019). Unterstützt unter anderem glTF
 +
  https://www.youtube.com/watch?v=uzkedMF-l4Q&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM Einführung in Three JS
 
  https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2
 
  https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2
−
Aktuell beste Library für anspruchsvolle Aufgaben (Stand 2019)
 
  
 
== Fake 3D / 360 Grad ==
 
== Fake 3D / 360 Grad ==
 
Oft reicht auch ein 360 Grad Skript das mehrere Bilder in unterschiedlichen Winkeln der Reihe nach oder interaktiv zeigt.  
 
Oft reicht auch ein 360 Grad Skript das mehrere Bilder in unterschiedlichen Winkeln der Reihe nach oder interaktiv zeigt.  
 
  https://scaleflex.github.io/js-cloudimage-360-view/
 
  https://scaleflex.github.io/js-cloudimage-360-view/

Aktuelle Version vom 2. September 2019, 11:33 Uhr

Formate[Bearbeiten]

GLB / glTF[Bearbeiten]

GLB ist die Binary Version von glTF 2.0. Das Format wird z.B. von Facebook für 3D Bilder verwendet. glTF ist quasi Standard Format für Web 3D (Stand 2019).

GLB / glTF
https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials/ - Facebook Manual

Libraries[Bearbeiten]

Three JS[Bearbeiten]

Three JS

Aktuell beste Library für anspruchsvolle Aufgaben und interaktives 3D im Web (Stand 2019). Unterstützt unter anderem glTF

https://www.youtube.com/watch?v=uzkedMF-l4Q&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM Einführung in Three JS
https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2

Fake 3D / 360 Grad[Bearbeiten]

Oft reicht auch ein 360 Grad Skript das mehrere Bilder in unterschiedlichen Winkeln der Reihe nach oder interaktiv zeigt.

https://scaleflex.github.io/js-cloudimage-360-view/