Transformations on 3D models

Cloudinary supports 3D models in the FBX and glTF formats that are uploaded as a single zip file. Some transformations are supported on the bundle as a whole and these are detailed below. No transformations are currently supported on its contained assets.

Two models are used in the examples below:

  • DamagedHelmet3D.gltz: a zip file, uploaded as an image resource type, containing a glTF file and other associated files.
  • foyer-table.fbxz: a zip file, uploaded as an image resource type, containing an FBX file and other associated files. [© HippoStance]

Generating a 360 animated image from a 3D model

To generate a 360 animated image from a 3D model, use the animated flag and specify a file format that supports animation, such as GIF. You can do this either by specifying the file extension (format in SDKs), or by adding the fetch_format parameter (f in URLs). The following example generates a 360 animated GIF from a glTF model of a helmet (in addition to applying other image transformations):

Ruby:
Copy to clipboard
cl_image_tag("DamagedHelmet3D", :transformation=>[
  {:fetch_format=>"gif"},
  {:flags=>"animated"},
  {:aspect_ratio=>"1.0", :height=>200, :crop=>"fill"},
  {:background=>"#a17ec5"}
  ])
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("DamagedHelmet3D", array("transformation"=>array(
  array("fetch_format"=>"gif"),
  array("flags"=>"animated"),
  array("aspect_ratio"=>"1.0", "height"=>200, "crop"=>"fill"),
  array("background"=>"#a17ec5")
  )))
PHP (cloudinary_php v2.x):
Copy to clipboard
# This code example is not currently available.
Python:
Copy to clipboard
CloudinaryImage("DamagedHelmet3D").image(transformation=[
  {'fetch_format': "gif"},
  {'flags': "animated"},
  {'aspect_ratio': "1.0", 'height': 200, 'crop': "fill"},
  {'background': "#a17ec5"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("DamagedHelmet3D", {transformation: [
  {fetch_format: "gif"},
  {flags: "animated"},
  {aspect_ratio: "1.0", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .fetchFormat("gif").chain()
  .flags("animated").chain()
  .aspectRatio("1.0").height(200).crop("fill").chain()
  .background("#a17ec5")).imageTag("DamagedHelmet3D");
JS:
Copy to clipboard
cloudinary.imageTag('DamagedHelmet3D', {transformation: [
  {fetchFormat: "gif"},
  {flags: "animated"},
  {aspectRatio: "1.0", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("DamagedHelmet3D", {transformation: [
  {fetch_format: "gif"},
  {flags: "animated"},
  {aspect_ratio: "1.0", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]})
React:
Copy to clipboard
<Image publicId="DamagedHelmet3D" >
  <Transformation fetchFormat="gif" />
  <Transformation flags="animated" />
  <Transformation aspectRatio="1.0" height="200" crop="fill" />
  <Transformation background="#a17ec5" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="DamagedHelmet3D" >
  <cld-transformation fetch-format="gif" />
  <cld-transformation flags="animated" />
  <cld-transformation aspect-ratio="1.0" height="200" crop="fill" />
  <cld-transformation background="#a17ec5" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="DamagedHelmet3D" >
  <cl-transformation fetch-format="gif">
  </cl-transformation>
  <cl-transformation flags="animated">
  </cl-transformation>
  <cl-transformation aspect-ratio="1.0" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation background="#a17ec5">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .FetchFormat("gif").Chain()
  .Flags("animated").Chain()
  .AspectRatio("1.0").Height(200).Crop("fill").Chain()
  .Background("#a17ec5")).BuildImageTag("DamagedHelmet3D")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setFetchFormat("gif").chain()
  .setFlags("animated").chain()
  .setAspectRatio("1.0").setHeight(200).setCrop("fill").chain()
  .setBackground("#a17ec5")).generate("DamagedHelmet3D")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .fetchFormat("gif").chain()
  .flags("animated").chain()
  .aspectRatio("1.0").height(200).crop("fill").chain()
  .background("#a17ec5")).generate("DamagedHelmet3D");
Kotlin:
Copy to clipboard
// This code example is not currently available.
Damaged Helmet 360 animated gif

Generating a 360 video from a 3D model

To generate a 360 video from a 3D model, use the animated flag and specify a video file format, such as MP4. You can do this either by specifying the file extension (format in SDKs), or by adding the fetch_format parameter (f in URLs). The following example generates a 360 video from an FBX model of a foyer table (in addition to applying other image transformations):

3D model zip files are uploaded as image types, so make sure you set the resource_type parameter to image when implementing the video tag:

Ruby:
Copy to clipboard
cl_video_tag("docs/foyer-table", 
  :resource_type=>"image",
  :transformation=>[
    {:fetch_format=>"mp4"},
    {:background=>"#d5d2ca", :height=>300, :flags=>"animated", :crop=>"scale"}])
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("docs/foyer-table", [
"resource_type"=>"image",
"transformation"=>[
  ["fetch_format"=>"mp4"],
  ["background"=>"#d5d2ca", "height"=>300, "flags"=>"animated", "crop"=>"scale"]]]);
PHP (cloudinary_php v2.x):
Copy to clipboard
VideoTag::fromParams("docs/foyer-table", [
"resource_type"=>"image",
"transformation"=>[
  ["fetch_format"=>"mp4"],
  ["background"=>"#d5d2ca", "height"=>300, "flags"=>"animated", "crop"=>"scale"]]]);
Python:
Copy to clipboard
CloudinaryVideo("docs/foyer-table").video(resource_type = "image", 
 transformation = 
        [{'fetch_format': "mp4"},
         {'background': "#d5d2ca", 'height': 300, 'flags': "animated"}])
Node.js:
Copy to clipboard
cloudinary.video("docs/foyer-table",
    {resource_type: "image",
     transformation: [
       {fetch_format: "mp4"},
       {background: "#d5d2ca", height: 300, flags: "animated", crop: "scale"}]}
    )
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
    .fetch_format("mp4").chain()
    .background("#d5d2ca").height(300).flags("animated").crop("scale")).resourceType("image")
    .videoTag("docs/foyer-table");
JS:
Copy to clipboard
cloudinary.videoTag('docs/foyer-table', resource_type: "image", {transformation: [
  {fetchFormat: "mp4"},
  {background: "#d5d2ca", height: 300, flags: "animated", crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("docs/foyer-table", {resource_type: "image", transformation: [
  {fetch_format: "mp4"},
  {background: "#d5d2ca", height: 300, flags: "animated", crop: "scale"}
  ]})
React:
Copy to clipboard
<Video publicId="docs/foyer-table" resourceType="image">
  <Transformation fetchFormat="mp4" />
  <Transformation background="#d5d2ca" height="300" flags="animated" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="docs/foyer-table" resourceType="image">
  <cld-transformation fetchFormat="mp4" />
  <cld-transformation background="#d5d2ca" height="300" flags="animated" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="docs/foyer-table" resource-type="image">
  <cl-transformation fetch-format="mp4">
  </cl-transformation>
  <cl-transformation background="#d5d2ca" height="300" flags="animated" crop="scale">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
    .FetchFormat("mp4").Chain()
    .Background("#d5d2ca").Height(300).Flags("animated").Crop("scale")).ResourceType("image")
    .BuildVideoTag("docs/foyer-table");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("image").setTransformation(CLDTransformation()
  .setFetchFormat("mp4").chain()
  .setBackground("#d5d2ca").setHeight(300).setFlags("animated").setCrop("scale")).generate("docs/foyer-table")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .fetchFormat("mp4").chain()
  .background("#d5d2ca").height(300).flags("animated").crop("scale")).resourceType("image").generate("docs/foyer-table");

Generating an image from a 3D model

You can generate a single image from a 3D model by setting the fetch_format parameter in SDKs (f in URLs) to an image format such as PNG or JPG, or by specifying the file extension (format in SDKs) as appropriate.

For example, the DamagedHelmet3D.gltz file can be requested as a PNG file by setting the fetch_format parameter to png, as follows:

  • Using the URL syntax:

  • Using the SDK syntax:

    Ruby:
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", :fetch_format=>"png")
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", ["fetch_format"=>"png"])
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    ImageTag::fromParams("DamagedHelmet3D", ["fetch_format"=>"png"])
    Python:
    Copy to clipboard
    CloudinaryImage("DamagedHelmet3D").image(fetch_format="png")
    Node.js:
    Copy to clipboard
    cloudinary.image("DamagedHelmet3D", {fetch_format: "png"})
    Java:
    Copy to clipboard
    cloudinary.url().fetch_format("png").imageTag("DamagedHelmet3D");
    JS:
    Copy to clipboard
    cloudinary.imageTag('DamagedHelmet3D', {fetchFormat: "png"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("DamagedHelmet3D", {fetch_format: "png"})
    React:
    Copy to clipboard
    <Image publicId="DamagedHelmet3D" fetchFormat="png">
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="DamagedHelmet3D" fetchFormat="png">
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="DamagedHelmet3D" fetch-format="png">
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.FetchFormat("png").BuildImageTag("DamagedHelmet3D")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setFetchFormat("png").generate("DamagedHelmet3D")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().fetchFormat("png").generate("DamagedHelmet3D");

Or, by specifying the .png extension, as follows:

  • Using the URL syntax:

  • Using the SDK syntax:

    Ruby:
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", :format=>"png")
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", ["format"=>"png"])
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    ImageTag::fromParams("DamagedHelmet3D", ["format"=>"png"])
    Python:
    Copy to clipboard
    CloudinaryImage("DamagedHelmet3D").image(format="png")
    Node.js:
    Copy to clipboard
    cloudinary.image("DamagedHelmet3D", {format: "png"})
    Java:
    Copy to clipboard
    cloudinary.url().format("png").imageTag("DamagedHelmet3D");
    JS:
    Copy to clipboard
    cloudinary.imageTag('DamagedHelmet3D', {format: "png"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("DamagedHelmet3D", {format: "png"})
    React:
    Copy to clipboard
    <Image publicId="DamagedHelmet3D" format="png">
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="DamagedHelmet3D" format="png">
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="DamagedHelmet3D" format="png">
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Format("png").BuildImageTag("DamagedHelmet3D")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setFormat("png").generate("DamagedHelmet3D")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().format("png").generate("DamagedHelmet3D");

Damaged Helmet single image

You can then apply further transformations to the image, for example:

Ruby:
Copy to clipboard
cl_image_tag("DamagedHelmet3D", :transformation=>[
  {:fetch_format=>"png"},
  {:angle=>90},
  {:aspect_ratio=>"1", :gravity=>"auto", :height=>200, :crop=>"fill"},
  {:background=>"#a17ec5"}
  ])
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("DamagedHelmet3D", array("transformation"=>array(
  array("fetch_format"=>"png"),
  array("angle"=>90),
  array("aspect_ratio"=>"1", "gravity"=>"auto", "height"=>200, "crop"=>"fill"),
  array("background"=>"#a17ec5")
  )))
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('DamagedHelmet3D'))
  ->delivery(Delivery::format(Format::png()))
  ->rotate(Rotate::byAngle(90))
  ->resize(Resize::fill()->height(200)->aspectRatio(1.0)->gravity(Gravity::autoGravity()))
  ->backgroundColor(Color::rgb('a17ec5'));
Python:
Copy to clipboard
CloudinaryImage("DamagedHelmet3D").image(transformation=[
  {'fetch_format': "png"},
  {'angle': 90},
  {'aspect_ratio': "1", 'gravity': "auto", 'height': 200, 'crop': "fill"},
  {'background': "#a17ec5"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("DamagedHelmet3D", {transformation: [
  {fetch_format: "png"},
  {angle: 90},
  {aspect_ratio: "1", gravity: "auto", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .fetchFormat("png").chain()
  .angle(90).chain()
  .aspectRatio("1").gravity("auto").height(200).crop("fill").chain()
  .background("#a17ec5")).imageTag("DamagedHelmet3D");
JS:
Copy to clipboard
cloudinary.imageTag('DamagedHelmet3D', {transformation: [
  {fetchFormat: "png"},
  {angle: 90},
  {aspectRatio: "1", gravity: "auto", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("DamagedHelmet3D", {transformation: [
  {fetch_format: "png"},
  {angle: 90},
  {aspect_ratio: "1", gravity: "auto", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]})
React:
Copy to clipboard
<Image publicId="DamagedHelmet3D" >
  <Transformation fetchFormat="png" />
  <Transformation angle="90" />
  <Transformation aspectRatio="1" gravity="auto" height="200" crop="fill" />
  <Transformation background="#a17ec5" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="DamagedHelmet3D" >
  <cld-transformation fetch-format="png" />
  <cld-transformation angle="90" />
  <cld-transformation aspect-ratio="1" gravity="auto" height="200" crop="fill" />
  <cld-transformation background="#a17ec5" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="DamagedHelmet3D" >
  <cl-transformation fetch-format="png">
  </cl-transformation>
  <cl-transformation angle="90">
  </cl-transformation>
  <cl-transformation aspect-ratio="1" gravity="auto" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation background="#a17ec5">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .FetchFormat("png").Chain()
  .Angle(90).Chain()
  .AspectRatio("1").Gravity("auto").Height(200).Crop("fill").Chain()
  .Background("#a17ec5")).BuildImageTag("DamagedHelmet3D")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setFetchFormat("png").chain()
  .setAngle(90).chain()
  .setAspectRatio("1").setGravity("auto").setHeight(200).setCrop("fill").chain()
  .setBackground("#a17ec5")).generate("DamagedHelmet3D")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .fetchFormat("png").chain()
  .angle(90).chain()
  .aspectRatio("1").gravity("auto").height(200).crop("fill").chain()
  .background("#a17ec5")).generate("DamagedHelmet3D");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("DamagedHelmet3D")
delivery(Delivery.format(Format.png()))
rotate(Rotate.byAngle(90))
resize(Resize.fill() {
height(200)
aspectRatio(1.0f)
gravity(Gravity.autoGravity())
})
backgroundColor(Color.rgb("#a17ec5"))
}.generate()
Damaged Helmet single image with transformations

Applying Draco compression to glTF files

You can optimize the mesh buffer in glTF files using Draco compression. To apply Draco compression, use the draco flag (fl_draco in URLs):

Ruby:
Copy to clipboard
cl_image_tag("DamagedHelmet3D.gltz", :flags=>"draco")
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("DamagedHelmet3D.gltz", array("flags"=>"draco"))
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('DamagedHelmet3D.gltz'))
  ->addFlag('draco');
Python:
Copy to clipboard
CloudinaryImage("DamagedHelmet3D.gltz").image(flags="draco")
Node.js:
Copy to clipboard
cloudinary.image("DamagedHelmet3D.gltz", {flags: "draco"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().flags("draco")).imageTag("DamagedHelmet3D.gltz");
JS:
Copy to clipboard
cloudinary.imageTag('DamagedHelmet3D.gltz', {flags: "draco"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("DamagedHelmet3D.gltz", {flags: "draco"})
React:
Copy to clipboard
<Image publicId="DamagedHelmet3D.gltz" >
  <Transformation flags="draco" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="DamagedHelmet3D.gltz" >
  <cld-transformation flags="draco" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="DamagedHelmet3D.gltz" >
  <cl-transformation flags="draco">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("draco")).BuildImageTag("DamagedHelmet3D.gltz")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags("draco")).generate("DamagedHelmet3D.gltz")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().flags("draco")).generate("DamagedHelmet3D.gltz");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("DamagedHelmet3D.gltz")
addFlag("draco")
}.generate()

  • If you use the .gltz extension, the whole zip file is delivered containing the modified glTF file, referencing the Draco mesh.
  • If you use the .gltf extension, only the modified glTF file is delivered.

Delivering FBX files as glTF

You can deliver an FBX file in the glTF format either by setting the fetch_format parameter to gltf (f_gltf in URLs), or by specifying the .gltf file extension (format in SDKs). The following example delivers the foyer-table FBX file as glTF, using the .gltf extension:

  • Using the URL syntax:

  • Using the SDK syntax:

    Ruby:
    Copy to clipboard
    cl_image_tag("foyer-table", :format=>"gltf")
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_image_tag("foyer-table", ["format"=>"gltf"])
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    ImageTag::fromParams("foyer-table", ["format"=>"gltf"])
    Python:
    Copy to clipboard
    CloudinaryImage("foyer-table").image(format="gltf")
    Node.js:
    Copy to clipboard
    cloudinary.image("foyer-table", {format: "gltf"})
    Java:
    Copy to clipboard
    cloudinary.url().format("gltf").imageTag("foyer-table");
    JS:
    Copy to clipboard
    cloudinary.imageTag('foyer-table', {format: "gltf"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("foyer-table", {format: "gltf"})
    React:
    Copy to clipboard
    <Image publicId="foyer-table" format="gltf">
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="foyer-table" format="gltf">
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="foyer-table" format="gltf">
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Format("gltf").BuildImageTag("foyer-table")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setFormat("gltf").generate("foyer-table")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().format("gltf").generate("foyer-table");

You can also deliver an FBX file in the gltz (zipped) format. Either way, you can apply Draco compression to the model at the same time:

  • Using the URL syntax:

  • Using the SDK syntax:

    Ruby:
    Copy to clipboard
    cl_image_tag("docs/foyer-table", :transformation=>[
    {:format=>"gltz"},
    {:flags=>"draco"}
    ])
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_image_tag("docs/foyer-table", ["transformation"=>[
    ["format"=>"gltz"],
    ["flags"=>"draco"]]])
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    ImageTag::fromParams("docs/foyer-table", ["transformation"=>[
    ["format"=>"gltz"],
    ["flags"=>"draco"]]])
    Python:
    Copy to clipboard
    CloudinaryImage("docs/foyer-table").image(transformation=[
    {'format': "gltz"},
    {'flags': "draco"}
    ])
    Node.js:
    Copy to clipboard
    cloudinary.image("docs/foyer-table", {transformation: [
    {format: "gltz"},
    {flags: "draco"}
    ]})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation()
    .format("gltz").chain()
    .flags("draco")).imageTag("docs/foyer-table");
    JS:
    Copy to clipboard
    cloudinary.imageTag('docs/foyer-table', {transformation: [
    {format: "gltz"},
    {flags: "draco"}
    ]}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("docs/foyer-table", {transformation: [
    {format: "gltz"},
    {flags: "draco"}
    ]})
    React:
    Copy to clipboard
    <Image publicId="docs/foyer-table" >
    <Transformation format="gltz" />
    <Transformation flags="draco" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="docs/foyer-table" >
    <cld-transformation format="gltz" />
    <cld-transformation flags="draco" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="docs/foyer-table" >
    <cl-transformation format="gltz">
    </cl-transformation>
    <cl-transformation flags="draco">
    </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation()
    .Format("gltz").Chain()
    .Flags("draco")).BuildImageTag("docs/foyer-table")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
    .setFormat("gltz").chain()
    .setFlags("draco")).generate("docs/foyer-table")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation()
    .format("gltz").chain()
    .flags("draco")).generate("docs/foyer-table");

Note
It is not possible to deliver a glTF file as FBX.

Delivering glTF files as GLB

GLB is the binary file format representation of 3D models saved in the GL Transmission Format (glTF).

You can deliver an uploaded glTF file in the GLB format either by setting the fetch_format parameter to glb (f_glb in URLs), or by specifying the .glb file extension (format in SDKs).

For example, the DamagedHelmet3D.gltz file can be requested as a GLB file by setting the fetch_format parameter to glb, as follows:

  • Using the URL syntax:

  • Using the SDK syntax:

    Ruby:
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", :fetch_format=>"glb")
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", ["fetch_format"=>"glb"])
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    ImageTag::fromParams("DamagedHelmet3D", ["fetch_format"=>"glb"])
    Python:
    Copy to clipboard
    CloudinaryImage("DamagedHelmet3D").image(fetch_format="glb")
    Node.js:
    Copy to clipboard
    cloudinary.image("DamagedHelmet3D", {fetch_format: "glb"})
    Java:
    Copy to clipboard
    cloudinary.url().fetch_format("glb").imageTag("DamagedHelmet3D");
    JS:
    Copy to clipboard
    cloudinary.imageTag('DamagedHelmet3D', {fetchFormat: "glb"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("DamagedHelmet3D", {fetch_format: "glb"})
    React:
    Copy to clipboard
    <Image publicId="DamagedHelmet3D" fetchFormat="glb">
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="DamagedHelmet3D" fetchFormat="glb">
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="DamagedHelmet3D" fetch-format="glb">
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.FetchFormat("glb").BuildImageTag("DamagedHelmet3D")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setFetchFormat("glb").generate("DamagedHelmet3D")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().fetchFormat("glb").generate("DamagedHelmet3D");

Or, by specifying the .glb extension, as follows:

  • Using the URL syntax:

  • Using the SDK syntax:

    Ruby:
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", :format=>"glb")
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", ["format"=>"glb"])
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    ImageTag::fromParams("DamagedHelmet3D", ["format"=>"glb"])
    Python:
    Copy to clipboard
    CloudinaryImage("DamagedHelmet3D").image(format="glb")
    Node.js:
    Copy to clipboard
    cloudinary.image("DamagedHelmet3D", {format: "glb"})
    Java:
    Copy to clipboard
    cloudinary.url().format("glb").imageTag("DamagedHelmet3D");
    JS:
    Copy to clipboard
    cloudinary.imageTag('DamagedHelmet3D', {format: "glb"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("DamagedHelmet3D", {format: "glb"})
    React:
    Copy to clipboard
    <Image publicId="DamagedHelmet3D" format="glb">
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="DamagedHelmet3D" format="glb">
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="DamagedHelmet3D" format="glb">
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Format("glb").BuildImageTag("DamagedHelmet3D")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setFormat("glb").generate("DamagedHelmet3D")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().format("glb").generate("DamagedHelmet3D");

Delivering glTF files as USDZ

USDZ (Universal Scene Description) is a file format for 3D models, introduced by Apple for its ARKit, to display 3D models on iPad, iPhone or Mac.

You can deliver an uploaded glTF file in the USDZ format either by setting the fetch_format parameter to usdz (f_usdz in URLs), or by specifying the .usdz file extension (format in SDKs).

For example, the DamagedHelmet3D.gltz file can be requested as a USDZ file by setting the fetch_format parameter to usdz, as follows:

  • Using the URL syntax:

  • Using the SDK syntax:

    Ruby:
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", :fetch_format=>"usdz")
    PHP:
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", ["fetch_format"=>"usdz"])
    Python:
    Copy to clipboard
    CloudinaryImage("DamagedHelmet3D").image(fetch_format="usdz")
    Node.js:
    Copy to clipboard
    cloudinary.image("DamagedHelmet3D", {fetch_format: "usdz"})
    Java:
    Copy to clipboard
    cloudinary.url().fetch_format("usdz").imageTag("DamagedHelmet3D");
    JS:
    Copy to clipboard
    cloudinary.imageTag('DamagedHelmet3D', {fetchFormat: "usdz"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("DamagedHelmet3D", {fetch_format: "usdz"})
    React:
    Copy to clipboard
    <Image publicId="DamagedHelmet3D" fetchFormat="usdz">
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="DamagedHelmet3D" fetchFormat="usdz">
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="DamagedHelmet3D" fetch-format="usdz">
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.FetchFormat("usdz").BuildImageTag("DamagedHelmet3D")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setFetchFormat("usdz").generate("DamagedHelmet3D")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().fetchFormat("usdz").generate("DamagedHelmet3D");

Or, by specifying the .usdz extension, as follows:

  • Using the URL syntax:

  • Using the SDK syntax:

    Ruby:
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", :format=>"usdz")
    PHP:
    Copy to clipboard
    cl_image_tag("DamagedHelmet3D", ["format"=>"usdz"])
    Python:
    Copy to clipboard
    CloudinaryImage("DamagedHelmet3D").image(format="usdz")
    Node.js:
    Copy to clipboard
    cloudinary.image("DamagedHelmet3D", {format: "usdz"})
    Java:
    Copy to clipboard
    cloudinary.url().format("usdz").imageTag("DamagedHelmet3D");
    JS:
    Copy to clipboard
    cloudinary.imageTag('DamagedHelmet3D', {format: "usdz"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("DamagedHelmet3D", {format: "usdz"})
    React:
    Copy to clipboard
    <Image publicId="DamagedHelmet3D" format="usdz">
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="DamagedHelmet3D" format="usdz">
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="DamagedHelmet3D" format="usdz">
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Format("usdz").BuildImageTag("DamagedHelmet3D")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setFormat("usdz").generate("DamagedHelmet3D")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().format("usdz").generate("DamagedHelmet3D");

✔️ Feedback sent!

Rate this page: