📍

Blender for New Art City

New Art City Home

Blender for New Art City

Visit the Miss Sammie's Shape Garden where you can download every shape straight from the space. Blender is a free, open-source 3D modeling program which makes an ideal companion to New Art City. If you don't have it already, you can download it here. This set of tutorials will continue to grow and requests are always welcomed in our Discord.

Getting Started

Install glTF Import-Export

  • Go to the Preferences page (at the bottom of the edit menu in the top bar), go to Add-ons, search "glTF," and install Import-Export: glTF 2.0 Format
  • image
    image

  • Export gLTFs
    • Go to File>Export>gLTF
    • image
    • If you want to export only the selected object in your scene, tick "Selected Objects." Same goes for Visible Objects and so on.
    • To include lights in your scene, tick "Punctual Lights." Your Blender scene automatically includes a Sun which will blow out your New Art City scene. Make sure to delete it before exporting.
    • If you are using modifiers, tick "Apply Modifiers." Be aware, physics modifiers and may not export as you expect them. More tutorials for making use of Blender simulation and exporting it for the web are forthcoming.

PERFORMANCE PRO TIP:

  • Under the Images section of the Geometry tab, select JPEG Format. Many free PBR textures come as PNGs and TIFs which can make a model with low polygons unnecessarily huge. Checking this box can often dramatically reduce file size and can be especially useful for web-optimizing models you've downloaded online.

Basic architecture

  • Helpful Hotkeys:
    • Tab: Switch from Object Mode to Edit Mode
    • G: move (or 'grab') your object
    • R: rotate your object
    • S: scale your object
    • A: select all
    • G + X, Y, or Z: move your object along an axis
    • R + X, Y, or Z: rotate around an axis
    • S + X, Y, or Z: scale your object along an axis
    • E + X, Y, or Z: Extrude a face along an axis

How to make a wall

  • Add a plane
    1. image
    2. R —> Y —> 90 to rotate the plane 90 degrees
    3. G —> Z —> 1 to move the plane up to ground level
  • Make a corner:
    1. image
    2. Press Tab to enter Edit Mode
    3. Select the right two vertices
    4. E —> X —> 2 to extrude the vertices along the x axis by 2 units
  • Solidify the walls:
    • Face —> Solidify Faces
    • image
    • A to select all
    • Choose thickness in bottom left menu
    • image
  • Extend walls
    • Go back into Edit Mode, enable face select in the top left corner and select the face on the end of the wall you want to extend
    • image
    • E —> Y — -4 to extrude the face along the y axis by -4 units
    • image

How to make a frame

Download the frame here.

  • Install the “Import images as planes” add-on
  • image
  • Import your image or video
  • image
  • Press Tab to enter edit mode and select “Solidify Faces”
  • image
  • Select the front and back faces, then invert your selection by pressing Command + I
  • Select Face > Extrude Faces Along Normals to extrude your frame
  • image
  • Select the front face and invert your selection again, so the components of the frame are selected
  • Create a new material and assign it to the selected faces
  • image
  • To get more dimensionality, you can either inset your image or extrude your frame.
    • Inset your image by selecting it, pressing G to move it, and Z to lock the movement on the Z axis.
    • Extrude your frame by selecting the outer ring of the frame, pressing E to extrude. It will automatically lock on the Z axis.
  • Performance Tip
    • The frame on its own is an extremely low-poly object. If you remove the image texture (by pressing the in the shader menu, that will make your file only a few kilobytes. You can export this, duplicate it within New Art City, and place your images inside it as you would in a physical gallery, and they will match the dimensions of your images.
  • Bonus Technique
    • Use an image texture as described in this section of the guide– there are a lot of free wood, concrete, and metal textures available online.
    • Simulate a glass pane over your image.
      • Enter Edge Select mode (top left corner) and hold Alt while selecting an inner edge of your frame to select the edge loop
      • image
      • Press F to create a new face
      • Assign a new material to that face
      • image
      • Under Settings at the bottom of your shader, select “Alpha Blend” and set your Alpha to <.2 so it is transparent
      • image
      • Reduce Roughness to zero and increase Metallic to make it semi-reflective
      • image

Shader Editor

Changing Colors

  • Add a shader to an entire object:
    • In Object Mode, select the Materials tab on the right side bar (bottom icon)
    • Add a new material by selecting “New” or select an existing material by clicking the “Browse Material To Be Linked” button next to it, which will display a list of materials available in your project
    • image
    • Change "Base Color" to your desired color
    • image
    • See your color in the viewport by enabling Viewport Shading in the top right corner
    • image

  • Add a shader to a specific face on an object
    • Enter Edit Mode by pressing Tab
    • Enter Face Select Mode
    • image
    • Select the faces on which you wish to apply your new material
    • Select your desired material in the Materials tab and click “Assign”
    • image

Shading with Principled BSDF

The Principled BSDF shader is the default shader in Blender. The following parameters from Principled BSDF can export to glTF:

  • Base Color
  • Metallic
  • Roughness
  • Specular
  • Transmission
  • Transmission Roughness
  • Normal
  • Emission
  • Alpha

Metallic and Roughness apply to reflectivity– screen space reflection (objects reflecting other objects in the scene) isn't possible in New Art City and reflections may behave strangely. If you want a perfectly matte surface, set Metallic to 0 and Roughness to 1. Experiment!

Transmission and Alpha both correspond to transparency. In order to enable transparency, set the Blend Mode to "Alpha Blend" in the shader editor, then adjust Transmission and Alpha.

image

Create realistic textures with PBR image textures

PBR textures apply images to your model. This is a classic game design technique which allows you to add complex materials, raised textures, and variable reflectivity. There are lots of resources for free PBR textures. This website aggregates many of them into a searchable interface and this list contains even more resources.

🚨 Performance Warning 🚨

While PBR textures can bring an element of realism to a scene, image textures can take a model from kilobytes to megabytes. Use with caution, and keep an eye on your performance budget in the right corner of the edit page on New Art City.

image

How to import and apply a PBR texture

  • Select the object you want to shade and enter the Shading tab
  • You can use three images to make your texture. You aren’t required to use all three and fewer images means better performance.
    • Color (sometimes labeled diffuse, or albedo)
    • Roughness (this controls how reflective your substance is)
    • Normal (this creates a raised texture)
  • Import these images by dragging them into the node editor
image
  • On the Roughness and Normal images, change the Color Space from sRGB to Non-Color
image
  • Connect your color node to the Base Color of your Principled BSDF shader to apply the color
image
  • Add two nodes: ColorRamp and Normal Map either by clicking the "Add" button at the top of the node editor, or pressing Shift + A and typing the nodes into the search bar.
  • Connect the nodes as they are in the diagram, patching the Roughness image through the ColorRamp into the Roughness input of the Principled BSDF shader and the Normal image through the Normal Map into the Normal input of the Principled BSDF shader.
image
  • Adjust the height of your Normal Map by adjusting the strength.
  • Adjusting the ColorRamp will make the surface as a whole more reflective, but edits to the ColorRamp will not show up in New Art City (most nodes in Blender outside of Principled BSDF and Image Textures are not supported by glTF)
image

UV Maps

OK so I put on an image texture like you said... Why did my model come out so weird??? It’s probably the UV map.

  • UV maps determine what parts of the image are displayed on what faces of your shape. Blender’s mesh primitives (default cube, sphere, and so on) have UV maps that are pre-loaded, so when you apply an image texture it should work without any adjustments. When you make transformations to your shape, those UV maps change and they can cause distortions in the translation between 2D and 3D.
  • image

  • To see your UV map, enter the UV editing tab and press Tab enter Edit Mode. Select all of the faces on your model by pressing A. The vertices of your shape are now represented in 2D on your image.
  • image

  • To fix the streaking effect, we need to unwrap our model. To do this, select all with A, click UV > Smart UV Project
  • image
  • Streaking effect gone!
  • image

Baking Textures (Advanced)

Baking textures is only necessary if you are using light effects that produce shadow or shader nodes besides image textures and Principled BSDF shaders. Always try exporting your model first. If your material doesn’t show, then attempt baking. This is a way to create the illusion of shadows or apply more complex generative shaders to your model. Most of the nodes in Blender's shader editor will not export to gLTF without first being baked as an image texture. This includes the mapping nodes you might use to scale PBR texture. Learning how to bake colors will open up a wide variety of new fun textures to play with.

  • Begin by unwrapping your UV map as described above.
  • Below is a very simple shader created with a Musgrave texture and a Color Ramp. This texture will not export to gLTF without baking!
  • image
  • To bake your texture, first add an Image Texture node by either clicking "Add" in the Shader editor or using the Shift + A shortcut and searching in the search bar.
  • image
  • Create a new image by selecting "New" on your Image Texture. Default resolution is 1024 by 1024 (1k), which is usually fine. If your bake comes out too grainy, try creating a new image texture at 2048 by 2048 (2k).
  • 🚨 TEXTURES ABOVE 2K WILL NOT RENDER ON iOS 🚨

    image
  • Now make sure your rendering engine is set to Cycles (the default is Eevee which has no baking options)
  • image
  • Under the render tab, go to Bake, which by default is set to Combined. On the dropdown menu, select Diffuse, and deselect Direct and Indirect.
  • image
  • Making sure that both your object and the image texture are selected, press Bake. Once the bake is complete, connect your new image texture to the color input of your Principled BSDF shader.
  • image
  • This shape will export to gLTF and work in New Art City. Happy shading!

Light

Anecdotally, spot lights seem to function the best in New Art City. Light will affect the surfaces of 3D models in interesting ways, especially models with PBR textures. Light goes through walls, so place them accordingly. Lights shine much more intensely in New Art City– a light too dim to see in your Blender scene will totally blow out your space. Keep lights between about 2 and 6 watts and they should function correctly.

  • Changing the color of your flashlight (how to export a light in Blender)
    • Download the flashlight model here, or create your own in Object Mode by selecting Add>Light>Spot
    • Add another object to indicate where the light source is coming from, otherwise you won't be able to find it when you upload it to New Art City.
    • In Blender, go to File>Import, select Import glTF, find the flashlight, and import.
    • Expand the Spot object and select the Spot with the green icon next to it.
    • image
    • You can now edit the properties of the light under Object Data Properties.
    • image
    • Adjust the parameters on this menu to change the character of your light.
    • Blender automatically places one light in your scene when you open a new project, so make sure to delete that before exporting.
    • Export your new flashlight by going to File>Export glTF and selecting "Include Punctual Lights"
    • image
      image

Animation

Animation typically just works in New Art City, without altering any of Blender's export settings. It is possible to animate location, rotation, and scale. Key frames can be applied to transformation of the entire object and also to shape keys, which allow you to animate transformations to individual vertices.

Key Frames

Key Shortcuts:

  • Press i to insert a key frame
  • Go to the Animation tab to view your key frames
  • Insert a Key Frame at position 0 on your animation timeline, selecting from the provided menu. You can animate Location, Rotation or Scale individually or collectively.
image
  • Move your playhead to another position on the timeline, perform a transformation on your object, and add it as a key frame by pressing i again and selecting the same option you did for the previous Key Frame.
image
  • To make a perfect loop, duplicate your start position keyframes by selecting them and pressing Shift + D then move them to the end of your timeline. You can select all of your key frames by clicking the dot in the top row marked Summary.

Shape keys

  • In Object Mode, add your first shape key in the Object Data Properties tab– this is the resting state of your object.
image
  • Add a second shape key
image
  • Select the second shape key you created, press Tab to enter Edit Mode, and transform the vertices of your object as you like
image
  • When you return to Object Mode, you'll notice that your transformations disappeared. You can now control the vertex transformation by changing the 0-1 value attached to your shape key.
image
  • You can animate this value with key frames. Right click the number next to your shape key and select "Insert Key Frame," or press Enter —> i. This will place a shape key at 0 on your animation timeline at the bottom of the screen.
  • image
  • Move the blue playhead further down your timeline, edit the value, press Enter and press i again to insert a new key frame.
  • image
  • To make a perfect loop, make sure your last key frame value matches your first key frame value.
  • Press Space Bar to watch your animation!