3D im Web: Unterschied zwischen den Versionen
| Zeile 5: | Zeile 5: | ||
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://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 | + | 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 == | ||
Version vom 15. August 2019, 12:23 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
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://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
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 (Stand 2019)
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/
