Transformations on 3D models

Cloudinary supports 3D models in various different formats and allows certain transformations as described below.

Note
3D models should be uploaded with the image asset type (see Uploading 3D models for details).

Three models are used in the examples below:

  • CldLogo3D.glb: a GLB file, uploaded as an image asset type.
  • DamagedHelmet3D.gltz: a zip file, uploaded as an image asset type, containing a glTF file and other associated files.
  • foyer-table.fbxz: a zip file, uploaded as an image asset 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 (f_gif,fl_animated). The following example generates a 360 animated GIF from a GLB model of the Cloudinary logo (in addition to applying other image transformations):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("docs/CldLogo3D", :transformation=>[
  {:delay=>"10", :flags=>"animated", :fetch_format=>"gif"},
  {:height=>200, :width=>400, :crop=>"fill"},
  {:background=>"#3448C5"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('docs/CldLogo3D'))
  ->transcode(Transcode::toAnimated(
  AnimatedFormat::gif()))
  ->animated(Animated::edit()->delay(10))
  ->resize(Resize::fill()->width(400)
->height(200))
  ->backgroundColor(Color::rgb("3448C5"));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/CldLogo3D", array("transformation"=>array(
  array("delay"=>"10", "flags"=>"animated", "fetch_format"=>"gif"),
  array("height"=>200, "width"=>400, "crop"=>"fill"),
  array("background"=>"#3448C5")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("docs/CldLogo3D").image(transformation=[
  {'delay': "10", 'flags': "animated", 'fetch_format': "gif"},
  {'height': 200, 'width': 400, 'crop': "fill"},
  {'background': "#3448C5"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("docs/CldLogo3D", {transformation: [
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"},
  {background: "#3448C5"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill").chain()
  .background("#3448C5")).imageTag("docs/CldLogo3D");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("docs/CldLogo3D")
  .transcode(toAnimated("gif"))
  .animated(edit().delay(10))
  .resize(fill().width(400).height(200))
  .backgroundColor("#3448C5");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/CldLogo3D', {transformation: [
  {delay: "10", flags: "animated", fetchFormat: "gif"},
  {height: 200, width: 400, crop: "fill"},
  {background: "#3448C5"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("docs/CldLogo3D", {transformation: [
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"},
  {background: "#3448C5"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("docs/CldLogo3D")
  .transcode(toAnimated("gif"))
  .animated(edit().delay(10))
  .resize(fill().width(400).height(200))
  .backgroundColor("#3448C5");
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="docs/CldLogo3D" >
  <Transformation delay="10" flags="animated" fetchFormat="gif" />
  <Transformation height="200" width="400" crop="fill" />
  <Transformation background="#3448C5" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="docs/CldLogo3D" >
  <cld-transformation delay="10" flags="animated" fetch-format="gif" />
  <cld-transformation height="200" width="400" crop="fill" />
  <cld-transformation background="#3448C5" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("docs/CldLogo3D")
  .transcode(toAnimated("gif"))
  .animated(edit().delay(10))
  .resize(fill().width(400).height(200))
  .backgroundColor("#3448C5");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="docs/CldLogo3D" >
  <cl-transformation delay="10" flags="animated" fetch-format="gif">
  </cl-transformation>
  <cl-transformation height="200" width="400" crop="fill">
  </cl-transformation>
  <cl-transformation background="#3448C5">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Delay("10").Flags("animated").FetchFormat("gif").Chain()
  .Height(200).Width(400).Crop("fill").Chain()
  .Background("#3448C5")).BuildImageTag("docs/CldLogo3D")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setDelay("10").setFlags("animated").setFetchFormat("gif").chain()
  .setHeight(200).setWidth(400).setCrop("fill").chain()
  .setBackground("#3448C5")).generate("docs/CldLogo3D")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill").chain()
  .background("#3448C5")).generate("docs/CldLogo3D");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Cloudinary logo 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 (f_mp4,fl_animated). 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 (cloudinary 1.x):
Copy to clipboard
cl_video_tag("docs/foyer-table", 
  :resource_type=>"image",
  :transformation=>[
    {:delay=>"10", :flags=>"animated", :fetch_format=>"mp4"},
    {:height=>300, :width=>500, :crop=>"fill"},
    {:background=>"#d5d2ca"}]
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('docs/foyer-table'))
  ->transcode(Transcode::toAnimated(
    AnimatedFormat::videoMp4()))
  ->animated(Animated::edit()->delay(10))
  ->resize(Resize::fill()->width(500)
  ->height(300))
  ->backgroundColor(Color::rgb("d5d2ca"))
  ->assetType("image");
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("docs/foyer-table", "resource_type"=>"image", array("transformation"=>array(
  array("delay"=>"10", "flags"=>"animated", "fetch_format"=>"mp4"),
  array("height"=>300, "width"=>500, "crop"=>"fill"),
  array("background"=>"#d5d2ca")
)))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("docs/foyer-table").video(resource_type = "image", 
 transformation = 
        [{'delay': "10", 'flags': "animated", 'fetch_format': "mp4"},
         {'height': 300, 'width': 500, 'crop': "fill"},
         {'background': "#d5d2ca"}])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("docs/foyer-table",
    {resource_type: "image",
     transformation: [
      {delay: "10", flags: "animated", fetch_format: "mp4"},
      {height: 300, width: 500, crop: "fill"},
      {background: "#d5d2ca"}]}
    )
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
    .delay("10").flags("animated").fetchFormat("mp4").chain()
    .height(300).width(500).crop("fill").chain()
    .background("#d5d2ca")).videoTag("docs/foyer-table");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('docs/foyer-table', resource_type: "image", {transformation: [
   {delay: "10", flags: "animated", fetchFormat: "mp4"},
   {height: 300, width: 500, crop: "fill"},
   {background: "#d5d2ca"}
]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("docs/foyer-table", {resource_type: "image", transformation: [
  {delay: "10", flags: "animated", fetch_format: "mp4"},
  {height: 300, width: 500, crop: "fill"},
  {background: "#d5d2ca"}
]})
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="docs/foyer-table" resourceType="image">
  <Transformation delay="10" flags="animated" fetchFormat="mp4" />
  <Transformation height="300" width="500" crop="fill" />
  <Transformation background="#d5d2ca" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video publicId="docs/foyer-table" resourceType="image">
  <cld-transformation delay="10" flags="animated" fetch-format="mp4" />
  <cld-transformation height="300" width="500" crop="fill" />
  <cld-transformation background="#d5d2ca" />
</cld-video>
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="docs/foyer-table" resource-type="image">
  <cl-transformation delay="10" flags="animated" fetch-format="mp4">
  </cl-transformation>
  <cl-transformation height="300" width="500" crop="fill">
  </cl-transformation>
  <cl-transformation background="#d5d2ca">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
    .Delay("10").Flags("animated").FetchFormat("mp4").Chain()
    .Height(300).Width(500).Crop("fill").Chain()
    .Background("#d5d2ca"))
    .ResourceType("image")
    .BuildVideoTag("docs/foyer-table");
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("image").setTransformation(CLDTransformation()
  .setDelay("10").setFlags("animated").setFetchFormat("mp4").chain()
  .setHeight(300).setWidth(500).setCrop("fill").chain()
  .setBackground("#d5d2ca")).generate("docs/foyer-table")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .delay("10").flags("animated").fetchFormat("mp4").chain()
  .height(300).width(500).crop("fill").chain()
  .background("#d5d2ca"))
  .resourceType("image").generate("docs/foyer-table");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Go (cloudinary-go 1.x):
Copy to clipboard
myImg, err := cld.Image("docs/foyer-table")
myImg.Transformation = "dl_10,f_mp4,fl_animated/c_fill,h_300,w_500/b_rgb:d5d2ca"
url, err := myImg.String()


Generating an image from a 3D model

You can generate a single image from a 3D model by setting the format to an image format such as PNG or JPG.

For example, the DamagedHelmet3D.gltz file can be requested as a PNG file (f_png) as follows:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("DamagedHelmet3D.gltz", :fetch_format=>"png")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('DamagedHelmet3D.gltz'))
  ->delivery(Delivery::format(
  Format::png()));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("DamagedHelmet3D.gltz", array("fetch_format"=>"png"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("DamagedHelmet3D.gltz").image(fetch_format="png")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("DamagedHelmet3D.gltz", {fetch_format: "png"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().fetchFormat("png")).imageTag("DamagedHelmet3D.gltz");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("DamagedHelmet3D.gltz").delivery(format(png()));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('DamagedHelmet3D.gltz', {fetchFormat: "png"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("DamagedHelmet3D.gltz", {fetch_format: "png"})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D.gltz").delivery(format(png()));
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="DamagedHelmet3D.gltz" >
  <Transformation fetchFormat="png" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="DamagedHelmet3D.gltz" >
  <cld-transformation fetch-format="png" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D.gltz").delivery(format(png()));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="DamagedHelmet3D.gltz" >
  <cl-transformation fetch-format="png">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat("png")).BuildImageTag("DamagedHelmet3D.gltz")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat("png")).generate("DamagedHelmet3D.gltz")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().fetchFormat("png")).generate("DamagedHelmet3D.gltz");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("DamagedHelmet3D.gltz")
   delivery(Delivery.format(
  Format.png())) 
}.generate()

Or, by specifying the .png extension:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("DamagedHelmet3D.png")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('DamagedHelmet3D.png'));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("DamagedHelmet3D.png")
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("DamagedHelmet3D.png").image()
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("DamagedHelmet3D.png")
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().imageTag("DamagedHelmet3D.png");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("DamagedHelmet3D.png");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('DamagedHelmet3D.png').toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("DamagedHelmet3D.png")
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D.png");
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="DamagedHelmet3D.png" >

</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="DamagedHelmet3D.png" >

</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D.png");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="DamagedHelmet3D.png" >

</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("DamagedHelmet3D.png")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("DamagedHelmet3D.png")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().generate("DamagedHelmet3D.png");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("DamagedHelmet3D.png") 
}.generate()
Damaged Helmet single image

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

Ruby (cloudinary 1.x):
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 2.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"));
PHP (cloudinary_php 1.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")
  )))
Python (cloudinary 1.x):
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 (cloudinary 1.x):
Copy to clipboard
cloudinary.image("DamagedHelmet3D", {transformation: [
  {fetch_format: "png"},
  {angle: 90},
  {aspect_ratio: "1", gravity: "auto", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]})
Java (cloudinary 1.x):
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 (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("DamagedHelmet3D")
  .delivery(format(png()))
  .rotate(byAngle(90))
  .resize(
    fill()
      .height(200)
      .aspectRatio("1.0")
      .gravity(autoGravity())
  )
  .backgroundColor("#a17ec5");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('DamagedHelmet3D', {transformation: [
  {fetchFormat: "png"},
  {angle: 90},
  {aspectRatio: "1", gravity: "auto", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("DamagedHelmet3D", {transformation: [
  {fetch_format: "png"},
  {angle: 90},
  {aspect_ratio: "1", gravity: "auto", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D")
  .delivery(format(png()))
  .rotate(byAngle(90))
  .resize(
    fill()
      .height(200)
      .aspectRatio("1.0")
      .gravity(autoGravity())
  )
  .backgroundColor("#a17ec5");
React (cloudinary-react 1.x):
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 (cloudinary-vue 1.x):
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 (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D")
  .delivery(format(png()))
  .rotate(byAngle(90))
  .resize(
    fill()
      .height(200)
      .aspectRatio("1.0")
      .gravity(autoGravity())
  )
  .backgroundColor("#a17ec5");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
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 (CloudinaryDotNet 1.x):
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 (cloudinary 3.x):
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 (cloudinary-android 1.x):
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 (kotlin-url-gen 1.x):
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 (cloudinary 1.x):
Copy to clipboard
cl_image_tag("DamagedHelmet3D.gltz", :flags=>"draco")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('DamagedHelmet3D.gltz'))
  ->addFlag("draco");
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("DamagedHelmet3D.gltz", array("flags"=>"draco"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("DamagedHelmet3D.gltz").image(flags="draco")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("DamagedHelmet3D.gltz", {flags: "draco"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().flags("draco")).imageTag("DamagedHelmet3D.gltz");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("DamagedHelmet3D.gltz").addFlag("draco");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('DamagedHelmet3D.gltz', {flags: "draco"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("DamagedHelmet3D.gltz", {flags: "draco"})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D.gltz").addFlag("draco");
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="DamagedHelmet3D.gltz" >
  <Transformation flags="draco" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="DamagedHelmet3D.gltz" >
  <cld-transformation flags="draco" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D.gltz").addFlag("draco");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="DamagedHelmet3D.gltz" >
  <cl-transformation flags="draco">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("draco")).BuildImageTag("DamagedHelmet3D.gltz")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags("draco")).generate("DamagedHelmet3D.gltz")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().flags("draco")).generate("DamagedHelmet3D.gltz");
Kotlin (kotlin-url-gen 1.x):
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 3D models in different 3D formats

You can deliver any uploaded 3D model in any other format that is supported for encoding.

3D format Supported for upload
as an image type
Supported for encoding
bw Yes No
fbx Yes No
glb Yes Yes
gltf Yes Yes
obj Yes No
ply Yes Yes
u3ma Yes No
usdz No Yes

So, for example, you can deliver an OBJ model as GLB, or a glTF model as USDZ. However, you cannot deliver a glTF model as FBX, or a PLY model as OBJ.

To deliver a model in a different format, either:

  • Specify the 3D format as the extension on the public ID (see Example 1), or
  • Set the fetch_format/format transformation parameter to the required format (see Example 2).

Example 1: Deliver a glTF model as GLB

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

Deliver the DamagedHelmet3D glTF model as a GLB model by setting the extension to .glb, as follows:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("DamagedHelmet3D.glb")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('DamagedHelmet3D.glb'));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("DamagedHelmet3D.glb")
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("DamagedHelmet3D.glb").image()
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("DamagedHelmet3D.glb")
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().imageTag("DamagedHelmet3D.glb");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("DamagedHelmet3D.glb");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('DamagedHelmet3D.glb').toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("DamagedHelmet3D.glb")
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D.glb");
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="DamagedHelmet3D.glb" >

</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="DamagedHelmet3D.glb" >

</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("DamagedHelmet3D.glb");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="DamagedHelmet3D.glb" >

</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("DamagedHelmet3D.glb")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("DamagedHelmet3D.glb")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().generate("DamagedHelmet3D.glb");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("DamagedHelmet3D.glb") 
}.generate()

Example 2: Deliver an FBX model 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.

Deliver the foyer-table FBX model as a USDZ model by setting the fetch_format/format parameter to usdz, as follows:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("docs/foyer-table.fbxz", :fetch_format=>"usdz")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('docs/foyer-table.fbxz'))
  ->delivery(Delivery::format(
  Format::usdz()));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/foyer-table.fbxz", array("fetch_format"=>"usdz"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("docs/foyer-table.fbxz").image(fetch_format="usdz")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("docs/foyer-table.fbxz", {fetch_format: "usdz"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().fetchFormat("usdz")).imageTag("docs/foyer-table.fbxz");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("docs/foyer-table.fbxz").delivery(format(usdz()));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/foyer-table.fbxz', {fetchFormat: "usdz"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("docs/foyer-table.fbxz", {fetch_format: "usdz"})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("docs/foyer-table.fbxz").delivery(format(usdz()));
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="docs/foyer-table.fbxz" >
  <Transformation fetchFormat="usdz" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="docs/foyer-table.fbxz" >
  <cld-transformation fetch-format="usdz" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("docs/foyer-table.fbxz").delivery(format(usdz()));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="docs/foyer-table.fbxz" >
  <cl-transformation fetch-format="usdz">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat("usdz")).BuildImageTag("docs/foyer-table.fbxz")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat("usdz")).generate("docs/foyer-table.fbxz")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().fetchFormat("usdz")).generate("docs/foyer-table.fbxz");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("docs/foyer-table.fbxz")
   delivery(Delivery.format(
  Format.usdz())) 
}.generate()

Changing the texture of a 3D model

You can replace the texture of a 3D model by using the swap_image effect. This effect takes two parameters, image and index. Set image to a file reference variable, initialized with the public ID of the new texture to use (any image). Set index to the index in the model to swap with.

In this example, the image at index 0 is replaced with the raindrops image that's in the docs folder:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("docs/CldLogo3D", :transformation=>[
  {:variables=>[["$new", "ref:!docs:raindrops!"]]},
  {:effect=>"swap_image:image_$new;index_0"},
  {:delay=>"10", :flags=>"animated", :fetch_format=>"gif"},
  {:height=>200, :width=>400, :crop=>"fill"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
// This code example is not currently available.
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/CldLogo3D", array("transformation"=>array(
  array("variables"=>array(array("$new", "ref:!docs:raindrops!"))),
  array("effect"=>"swap_image:image_$new;index_0"),
  array("delay"=>"10", "flags"=>"animated", "fetch_format"=>"gif"),
  array("height"=>200, "width"=>400, "crop"=>"fill")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("docs/CldLogo3D").image(transformation=[
  {'variables': [["$new", "ref:!docs:raindrops!"]]},
  {'effect': "swap_image:image_$new;index_0"},
  {'delay': "10", 'flags': "animated", 'fetch_format': "gif"},
  {'height': 200, 'width': 400, 'crop': "fill"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("docs/CldLogo3D", {transformation: [
  {variables: [["$new", "ref:!docs:raindrops!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .variables(variable("$new","ref:!docs:raindrops!")).chain()
  .effect("swap_image:image_$new;index_0").chain()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill")).imageTag("docs/CldLogo3D");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/CldLogo3D', {transformation: [
  {variables: [["$new", "ref:!docs:raindrops!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {delay: "10", flags: "animated", fetchFormat: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("docs/CldLogo3D", {transformation: [
  {variables: [["$new", "ref:!docs:raindrops!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
// This code example is not currently available.
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="docs/CldLogo3D" >
  <Transformation variables={[["$new", "ref:!docs:raindrops!"]]} />
  <Transformation effect="swap_image:image_$new;index_0" />
  <Transformation delay="10" flags="animated" fetchFormat="gif" />
  <Transformation height="200" width="400" crop="fill" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="docs/CldLogo3D" >
  <cld-transformation :variables="[['$new', 'ref:!docs:raindrops!']]" />
  <cld-transformation effect="swap_image:image_$new;index_0" />
  <cld-transformation delay="10" flags="animated" fetch-format="gif" />
  <cld-transformation height="200" width="400" crop="fill" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This code example is not currently available.
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="docs/CldLogo3D" >
  <cl-transformation variables="[['$new', 'ref:!docs:raindrops!']]">
  </cl-transformation>
  <cl-transformation effect="swap_image:image_$new;index_0">
  </cl-transformation>
  <cl-transformation delay="10" flags="animated" fetch-format="gif">
  </cl-transformation>
  <cl-transformation height="200" width="400" crop="fill">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Variables("$new", ref:!docs:raindrops!).Chain()
  .Effect("swap_image:image_$new;index_0").Chain()
  .Delay("10").Flags("animated").FetchFormat("gif").Chain()
  .Height(200).Width(400).Crop("fill")).BuildImageTag("docs/CldLogo3D")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .chain()
  .setEffect("swap_image:image_$new;index_0").chain()
  .setDelay("10").setFlags("animated").setFetchFormat("gif").chain()
  .setHeight(200).setWidth(400).setCrop("fill")).generate("docs/CldLogo3D")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .variables(variable("$new","ref:!docs:raindrops!")).chain()
  .effect("swap_image:image_$new;index_0").chain()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill")).generate("docs/CldLogo3D");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Cloudinary logo with different texture

You can also use a base64 encoded URL of a remote image as the texture by setting the file reference variable to !fetch:<encoded URL>!. For example:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("docs/CldLogo3D", :transformation=>[
  {:variables=>[["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {:effect=>"swap_image:image_$new;index_0"},
  {:delay=>"10", :flags=>"animated", :fetch_format=>"gif"},
  {:height=>200, :width=>400, :crop=>"fill"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
// This code example is not currently available.
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/CldLogo3D", array("transformation"=>array(
  array("variables"=>array(array("$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"))),
  array("effect"=>"swap_image:image_$new;index_0"),
  array("delay"=>"10", "flags"=>"animated", "fetch_format"=>"gif"),
  array("height"=>200, "width"=>400, "crop"=>"fill")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("docs/CldLogo3D").image(transformation=[
  {'variables': [["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {'effect': "swap_image:image_$new;index_0"},
  {'delay': "10", 'flags': "animated", 'fetch_format': "gif"},
  {'height': 200, 'width': 400, 'crop': "fill"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("docs/CldLogo3D", {transformation: [
  {variables: [["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .variables(variable("$new","ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!")).chain()
  .effect("swap_image:image_$new;index_0").chain()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill")).imageTag("docs/CldLogo3D");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/CldLogo3D', {transformation: [
  {variables: [["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {delay: "10", flags: "animated", fetchFormat: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("docs/CldLogo3D", {transformation: [
  {variables: [["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
// This code example is not currently available.
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="docs/CldLogo3D" >
  <Transformation variables={[["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]} />
  <Transformation effect="swap_image:image_$new;index_0" />
  <Transformation delay="10" flags="animated" fetchFormat="gif" />
  <Transformation height="200" width="400" crop="fill" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="docs/CldLogo3D" >
  <cld-transformation :variables="[['$new', 'ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!']]" />
  <cld-transformation effect="swap_image:image_$new;index_0" />
  <cld-transformation delay="10" flags="animated" fetch-format="gif" />
  <cld-transformation height="200" width="400" crop="fill" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This code example is not currently available.
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="docs/CldLogo3D" >
  <cl-transformation variables="[['$new', 'ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!']]">
  </cl-transformation>
  <cl-transformation effect="swap_image:image_$new;index_0">
  </cl-transformation>
  <cl-transformation delay="10" flags="animated" fetch-format="gif">
  </cl-transformation>
  <cl-transformation height="200" width="400" crop="fill">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Variables("$new", ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!).Chain()
  .Effect("swap_image:image_$new;index_0").Chain()
  .Delay("10").Flags("animated").FetchFormat("gif").Chain()
  .Height(200).Width(400).Crop("fill")).BuildImageTag("docs/CldLogo3D")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .chain()
  .setEffect("swap_image:image_$new;index_0").chain()
  .setDelay("10").setFlags("animated").setFetchFormat("gif").chain()
  .setHeight(200).setWidth(400).setCrop("fill")).generate("docs/CldLogo3D")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .variables(variable("$new","ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!")).chain()
  .effect("swap_image:image_$new;index_0").chain()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill")).generate("docs/CldLogo3D");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Cloudinary logo with different texture

✔️ Feedback sent!

Rate this page: