3D graphics defines a visualization method that utilizes three-dimensional assets for creating many different types of content, from real-world recreations, to the abstract and everything in between.
This content is extremely versatile where it can be used for creating still images, animations, real-time interactions in games, and the applications are even expanding into the real world with technology like Augmented and Virtual Reality and 3D printing.
The fact that it is set in 3 dimensions, just like the real world, makes this workflow very intuitive and convenient.
3D graphics are being used in multiple industries:
A 3D scene is a three-dimensional space which typically contains camera and 3D objects. Users are able to orbit and/or animate the camera in space and manipulate the objects in order to compose a scene. Each of the scene’s objects has XYZ space coordinates, rotation and scale values.
3D objects are the primary medium used in a 3D scene. They are sometimes referred to as meshes. They are the representation of every and any thing from basic shapes to organic and abstract elements. They are made up of many vertices (dots in 3D space). Those dots are connected to make polygons, which ultimately make up the 3D object itself.
A UV map is an unwrapped and flattened 2D representation of a 3D object. It places each of the object’s vertices onto a two-dimensional surface. The horizontal axis of this quadrant is U, while the vertical axis is V (hence UV). UV maps are used to map 2D textures around a 3D surface. They are an embedded property that are stored with their respective 3D object.
A good way to visualize UV maps is by pretending the 3D object is made of paper, and you use a razorblade to carefully slice it into pieces that can be laid flat.
Textures are 2D images that are applied to a 3D object using its respective UV map. They are an important component of a material. They most commonly represent a 3D object's base color, but can also be used to customize other elements, such as reflection, roughness, or normal direction.
A material is a combination of textures and additional variables. It ultimately defines how 3D objects in a scene look with its respective lighting. A material typically has a variety of properties which users can control (color, reflection, roughness, etc). These properties are controlled by sliders, colors or textures.
Materials are generally governed by a shader, which is code that provides additional customizations on how a 3D object looks. By changing the shader in a material, you can make something look cartoony, realistic, or abstract without altering the 3D object or texture.
Lights interact with the materials applied to 3D objects in the scene and allow them to be visually represented through a rendering process.
They simulate the way light photons are being transported in real life using a process called raytracing.
3D rendering typically refers to process of creating a 2D image by processing the interaction of lights and scene’s objects which have materials associated to them. It is computed by software and highly dependant upon the render settings. These settings will determine the quality but also the render time.
Another type of rendering is real-time rendering, where 2D frames are calculated fast enough for real-time interaction as seen in game engines like Unity and Unreal.
Dimension has been designed with designers and other non-3D experts in mind. As such, it aims to take the complexity away, while still delivering high end results. It is easy to learn and is relatable to existing Adobe users as it share the same UI paradigm as other Adobe’s tools, like Photoshop, Illustrator, etc.
Key features:
At the moment, Dimension is not capable of geometry creation or direct texture editing/layering.
In this lesson we will cover the UI and some of the basic features of Dimension. Dimension has two separate modes: Design mode, where the scene is being assembled and Render mode, where the final image is being processed (or rendered)
This is the Design mode interface, where we’ll spend most time (Render mode will be covered later):
Online tutorials: https://helpx.adobe.com/dimension/tutorials.html
Scene panel contains all the elements in the scene:
Here, you are able to adjust object’s position and rotation in space as well as its scale by entering numeric values. Also, you can change the position of its pivot.
There are 4 types of libraries in Dimension, which contain ready-to-use free assets:
Adobe Stock (stock.adobe.com/3d-assets) contains a huge selection of both, free and paid assets from each of the categories listed above.
3D graphics can be used for testing various apparel design variations. Dimension has a specifically designed set of tools, which make this iterative workflow smooth and efficient.
The scene in this exercise features a mannequin wearing a shirt, which needs to be designed. Therefore, the shirt’s material is the only one we need to worry about. Our goal is to try different colorways, edit them and see how we can apply a logo, using pre-made Illustrator templates.
The scene already has two camera bookmarks, allowing you to quickly swap between the front and the rear view.
The final results will be rendered out as 2D images which can be added into AEM.
Open your browser to http://localhost:4502 and login as admin/admin
Click on the user icon on top right of the screen, then click My Preferences
Enable Show desktop actions for Assets and click Accept.
Select preferences from the AEM Desktop App icon from the menu bar
The AEM Assets URL should read http://localhots:4502
Click Save & Close to keep any changes.
Select Connect from the AEM Desktop icon in the menu bar
Enter admin/admin for the login and click Sign In
You should see the message Successful connection; Successfully connected to AEM. Click here to learn more.
With a successful connection you should be able to browse AEM folders on your file system.
Switch to the chrome browser with AEM window open
Click on the AEM logo on top left and select Assets > Files
Navigate to > Assets > Summit 2019 > 3 Dimension > 3-1 Mannequin
Select the Checkmark as you hover over prototyping_apparel_START.dn (You can ask the TA how to maintain a version of this)
From the top toolbar, select Desktop Actions > Open (you can check "Always..." and then "Open...")
The file prototyping_apparel_START.dn open in Dimensions CC
Select the Outside Fabric object, located in the Scene panel > Standing Mannequin > Shirt folder (you can also CTRL+click on the shirt).
Select the shirt’s material (it is called “Shirt Material”) by double clicking on the object in the Scene panel.
We are only going to tweak the Base Color parameter. Click on its color/texture input, switch the mode from Color to Image
Load the colorways.ai file.
Make sure your “AEM Desktop” is connected
Open your Finder window to > localhost > DAM > summit-2019 > 2-colorways > 2-2-uv-maps
Drag the colorways.ai file to dotted box in Dn.
Dimension is able to read the Artboards if they are included in the Ai file. Therefore, when you load the colorways.ai file, you will be able to pick which artboard you want to use as a color texture.
You are also able to edit the selected artboard, by clicking on the pen icon. This will take you to Illustrator, where you can make changes to the file (on one or more artboards).
Try changing the existing colorways and save the file:
The changes will be reflected in Dimension as soon as the file is saved:
You can save your colorways by saving the Illustrator file into > localhost > DAM > summit-2019 > colorways > uv-maps with the name colorways.ai (click on the filename to save time). Note there is a 30 second delay before upload to AEM. You can check upload status in AEM Desktop app > View Asset Status.
Now, we’ll try adding the logo. Drag and drop logos.ai
from localhost > DAM > summit-2019 > colorways > logos directly onto the shirt object in the Dimension scene viewport. The logo (called “Graphic”) will appear right above the material in the Scene panel hierarchy. You can change its size, position and rotation using the gizmo. Furthermore, you can tweak its material properties like Roughness and Metallic values. Try centering the logo on the shirt.
Once again, you are able to pick the Artboards if they are included in the loaded Graphic’s file. Try swapping the logo by changing the artboards.
Click on the edit button of the Graphic, so we can change it in Illustrator, just like we did with the colorways file. Try changing the color:
Finally, let’s add a logo on the back. Change the camera bookmark from front to back, so we can see the back of the shirt.
This time, we’ll use an existing graphics from the library. Go to the Images library, drag and drop “Brand logo” file onto the shirt object and position it where you like.
It’s time to render out our design so it can be added to AEM. You can set the resolution by clicking on its current value in the upper left corner of the canvas. Set the resolution to 1000x1000px (smaller resolution will render faster).
Change the mode from Design to Render.
Here, you can select which view you would like to render. Pick front and back views and select High quality render. Finally, set the path (localhost > DAM > summit-2019 > 4-renders) and hit render. Dimension will now process the scene elements (lights, materials and objects) and produce 2D images (renders). However, you are also able to save the renders in the current state, even before the rendering has been fully completed. This feature is called Take a Snapshot and we’ll use it after letting Dimension render for about a minute or so. This will save us some time.
Dimension is capable of publishing the entire 3D scene to the Web, enabling users a more immersive experience, where they are able to rotate, move and pan the camera. They can also leave comments, so it’s a convenient way of interactive collaboration in the early stages of prototyping the design.
In this exercise, we’ll use Dimension to create an assortment deck, used for merchandising purposes. The goal is to have a visual overview in InDesign, so it is easy to pick and drop desired colorways.
Typically, this process is done using actual photographs of samples, or, in many cases - a simple 2D sketch is used. Having a 3D render is a much more informative solution.
We’ll use the same workflow as in the previous exercise, but this time the focus is to create a spread of designs, rather than tweaking the existing ones.
Open the scene visualization_apparel_START.dn from DAM/Assets > Summit 2019 > Dimension > Assortment via browser or Finder (Save or Discard changes to file already open in Dimension)
The scene contains 4 identical shirts placed on their mannequins. We also have 5 pre-saved camera bookmarks - one for each shirt and one that shows all of them.
Select the shirts one by one, go to their materials and load the file localhost > DAM > summit-2019 > 2-colorways > 2-2-uv-maps > colorways.ai into their Base Color channels.
Now, all 4 shirts should have the same colorway. Since, the Ai file we’ve used has 4 different colorways, we can go ahead and pick a different artboard/colorway for each shirt. This way, we’ll create a spread of design variations.
We’ll do the same thing with logos: drag and drop the file logos.ai
to all the shirts and then select and position a different artboard/logo for each one.
The final step is to render out each colorway, so it can be used in InDesign. Change the canvas size to 250 x 250
Go to the Render tab and select colorway 01 - 04. If you want to have the entire deck on the same render you may also select “all colorways”. Select High quality settings, export format as PNG, set the output path to localhost > DAM > summit-2019 > 5-assortment and start the rendering process. Dimension will render out individual colorway images.
Once the png’s are rendered, navigate to DAM/Assets > Summit 2019 > Assortment via browser or Finder and open the file Visual Assortment_START.indd
Have your rendered png’s open in finder so you can drag and drop your visuals onto the assortment deck
Optionally, you can also drag color chips from the DAM/Assets > Summit 2019 > 2 Colorways > 2-4 Color chips folder
You can also drag color chips from the DAM/Assets > Summit 2019 > Colorways > Color chips folder
Dimension can be used to produce both photo-realistic and highly stylized renderings, by composing the 3D elements with a background photo.
Once rendered, the image can be further edited in Photoshop. In this exercise, we’ll create an image which could be used for (fictional) marketing purposes.
Navigate to AEM > Assets > Summit 2019 > 3 Dimension > 3-3 Posed, open the scene creative_marketing_apparel_START.dn (save or discard changes to dn file already open in Dimensions)
First, let’s plug the colorway and the logo to the shirt, just like we did before (or change the existing one in creative_marketing_apparel_START.dn)
Then, we’ll add some materials to other objects in the scene:
Select the Stool object folder in the Scene panel and assign the “Metal” material from the Material library.
Now select just the seat (CTRL+click on the object) and assign the “American Cherry Wood” material; in the material properties, set Repeat to 2 and Rotate by 90 deg.
Select the Pants object, assign the “Denim” material and set Repeat to 3
Select the Mannequin object and then use the Sampler Tool (I) to pick and assign the metal material from the chair.
Now, let’s add the background: go to the Image library and drag and drop the “Gallery” image into the empty space of the Scene’s viewport (note: if you drag it on top of an object, you will create a Graphic instead). Alternatively, you can use the background_abstract.jpg or background_beach.jpg images, located in the project folder. Simply drag them from the file browser into an empty space of the Scene’s viewport.
It is clear that the background image doesn’t quite match the 3D scene. To fix this, we can use the Match Image function, found in the Actions, with Environment selected. Match Image will try to perform a set of actions, using the machine learning algorithm:
Resize canvas to match the image size ratio or the image size (in out case, we can deselect this option)
Create Environment Image (makes an IBL out of the background image)
Match Sunlight (if possible)
Match Camera Perspective (if possible)
Now, the scene looks integrated into the background more closely (which can be seen by observing how materials like metals are reflecting the newly created environment and how the perspective matches the background). However, we can fine adjust the lights, reposition the sunlight, increase the intensity etc. to match it even better with the environment. You can also adjust the Ground plane properties: its roughness and its opacity.
We are ready to render out the scene, just like in the previous example. Set the canvas size to 250 x 250, switch to the Render mode, pick High quality settings, select the output path summit-2019 > 6-creative > 6-2-landing-page-banners > completed and render out the image.
When the render is complete you will get a layered PSD document. The document contains the background and the 3D elements on separate layers, so you can independently edit the two. Furthermore, you’ll get a several “utility” layers:
Material selection: a layer where each material has a plain color assign to it. This makes it easy to select and edit the material in Photoshop.
Object selection has a similar logic as the material selection, but here, colors are assigned to each independent object in the scene.
Depth pass is a grayscale, gradient layer, whose values are tied to the proximity of the 3D objects to the camera; the closer an object gets to the camera, the brighter it’s going to be and vice-versa. This layer can be used to emulate depth of field, using the Lens Blur filter in Photoshop. It can be also used as environment fog if it’s inverted and has the screen blending mode applied.
The power of 3D allow you to create photorealistic images and go even beyond that, where you are able to pursue any artistic direction you might have. Here are a several variations, which were created by changing just a few parameters shown above with some light adjustments in Photoshop:
AEM does not have native 3D rendering capabilities. Rendering a 3D scene is computationally intensive and for some renders, requires hours to complete when rendering locally. DI3D Cloud Rendering Service reduces the time to render and offloads render processing to remote servers. In this exercise, we use the AEM and DI3D cloud rendering services integration to create thumbnails and renditions of Dimension CC files uploaded to AEM. This integration will enable AEM to render Dimension scenes (.dn files) directly from AEM Assets
Open Dimension CC and create a new Dn file (File > New)
Create a simple 3D scene by dropping a coffee model from Models onto Canvas
Save the file to your desktop, name it <SEAT> – <LAST_NAME>.dn.
For example, for a student named Bond who is sitting in seat 007, they would name their file 007 – Bond.dn
Switch to the chrome browser with AEM window open
Click on the AEM logo on top left and select Assets > Files
Navigate to Assets > Summit 2019 > 3 Dimension
Upload the dimension file created above to AEM (you can also save the file to desktop app and sync it to AEM)
You can see the banner 3D Rendition unavailable on file, as AEM does not have native 3D rendering capabilities
Select the file and click DI3D Convert in toolbar
AEM authenticates with the Dimension cloud rendering service using IMS and submits a generate renditions request of selected file. The process may take few minutes for completion. AEM UI shows the processing states... (refresh screen)
After completion, renditions are downloaded and added in AEM for thumbnail views
Next we will use our photorealistic creative assets for a landing page banner on our online store
Click on the Adobe Experience Manager banner at the top
Select Sites
Then navigate to we.retail > United States > English > Experience
Select one of the pages there with a check mark
Then click Edit from the tool bar
First let’s open our side panel
We can now see our creative assets
Click on the Hero Image and make sure that web component is unlinked
Now click the wrench icon to edit the web component
This brings up the Image edit popup
Drag your image over the existing one
And click the checkbox to save
You can click Preview to see your page without editing controls
Next, let’s give our customer an immersive augmented reality experience. A usdz file has been pre-generated for you
While in edit mode, click on an empty component
And click the plus icon
Select a Text type component then click the pencil to edit
Type in some text and then select what you want to hyperlink and then click the link button
Click the checkbox next to the Path field to navigate to the usdz file
Navigate to Assets > Summit 2019 > Creative > AR usdz and select (checkmark) the .usdz file there and click Select
The path should be filled for you, so check the Blue check box to save the path
Then click the checkbox at the end to save the text component
Next go into Preview mode to test the link. You can access the page and AR model with an iPhone at http://enterprise-demo.com:4502/content/we-retail/us/en/experience/wester-australia-by-camper-van.html