3D im Web: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
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 ==
Zeile 31: Zeile 10:
 
  https://www.youtube.com/watch?v=uzkedMF-l4Q&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM
 
  https://www.youtube.com/watch?v=uzkedMF-l4Q&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM
 
  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)
+
Aktuell beste Library für anspruchsvolle Aufgaben und interaktives 3D im Web (Stand 2019). Unterstützt unter anderem glTF
  
 
== 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/

Version vom 16. August 2019, 11:43 Uhr

Formate

GLB / glTF

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

Three JS

https://www.youtube.com/watch?v=uzkedMF-l4Q&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM
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 und interaktives 3D im Web (Stand 2019). Unterstützt unter anderem glTF

Fake 3D / 360 Grad

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/