Creating Content

From Decentraland
Jump to: navigation, search

THIS PAGE NEEDS UPDATING (Add more details about tools and methodology)

High Level Summary

  • WebGL is the 3D rendering engine that is included in modern web browers.
  • WebVR is a JavaScript library on top of WebGL that supports HMDs, tracking of HMD movement, the use of touch controllers.
  • A-Frame is a JavaScript library plus syntax you can add to an HTML page, to build WebVR content using skills familiar to website builders.
  • Decentraland's 3D world and tools uses A-Minus, which is an extended subset of A-Frame
    • Extended in the sense that the DCL apps know about the Ethereum blockchain, accounts, land, permissions, scenes, etc.
    • Subset in that not all A-Frame entities are supported, and scripting is only being introduced as its security can be developed.
  • You can learn the basics of DCL scene building by learning about A-Frame, linked below.
  • You can use the A-Frame Inspector tool when building the prototype of your scene on some other web server.
  • Decentraland provides a Command Line Interface for uploading scenes to your plots of lands.

Here is the basic overview of building and editing content on your land

  • Purchase or otherwise obtain rights to edit the parcel(s).
  • Decide about which "plot" of land (one or more parcels) you will build for.
  • Obtain or make the models and materials for your scene
    • A plot scene can contain a number of primitives (e.g. Cubes defined in the A-Frame html markup), and/or one or more .OBJ and .GLTF assets, with their materials
    • You can make 3D models and materials in 3D Modeling tools, like Blender (see below) or Maya, then export them to .OBJ and .MTL files along with .PNG texture map image files. You can also export them to .GLTF format, which should perform better in WebVR than individual .OBJ and .MTL files.
    • You can alternatively obtain 3D models and materials from online content libraries (see below)
    • .OBJ files contain the 3D mesh data, as well as the UV maps that control how 2D "materials" get mapped to the 3D mesh.
    • .MTL files contain "materials" for defining the appearance of object surfaces, and typically also reference "texture maps" which are additional, separate image files.
    • .GLTF files contain a package of one or more models and their materials.
  • You can test your scene composition in an out-of-world website
    • Upload the A-Minus html file and the objects and materials to a website you have control of
    • Be sure to put the right things in the right directories, so that they will conform to the requirements of the DCL CLI upload tool.
    • Test it on your test website
    • You can edit the composition of the scene in your test site using the A-Frame Inspector, re-save the HTML, re-upload it to your test site, and then refresh your browser.
  • Store your assets and markup in a repository, not just on your website or in ipfs, so you can resume editing and manage versions.
  • Once you are happy with the plot scene on your test website, use the Decentraland CLI tools to upload it to your land.
  • Keep track of which parcels are in which plots, as you will wish to avoid creating overlapping plots

About A-Frame

See https://a-frame.io

See Why We Use A-Frame

See Getting Started in A-Frame

About A-Minus: Scene Format documentation

A-Minus is the scene format language supported by the DCL Editor and Client

A-Minus is a subset of A-Frame, restricted for security and performance

See A-Minus

3D Content Libraries

There are a number of 3D model libraries and markets on the web. Some of them have open licensing that would allow there models to be freely used, or used if purchased, in DCL. But read their license terms carefully.

Because the DCL Editor puts content onto IPFS, which is public, you should not even put a model into the editor if you don't have a license to it being used in a public manner.

Also, you may have to work on the model or material some to get it to work well in DCL, although most of that can be taken care of by an Export from Blender with the right option settings.

Here are some libraries with more open licensing

See Ben Nolan's great tutorial on how to prepare Thingiverse files for A-Frame (or Decentraland) using Blender

Commercial libraries with stricter licensing

Read their latest licensing carefully before putting anything into the Editor and hence into IPFS storage. If in doubt, contact them to discuss licensing.

Pay close attention to license restrictions that content sites have. For example, TurboSquid models should not be used without getting clarification and/or permission from TurboSquid, since Decentraland probably would be categorized as an "Open" not "Closed" universe. See [1], especially the section on "Using TurboSquid products in Virtual Worlds"

Tips and Hints

Collaborative Editing

The current toolset from Decentraland does not support multiple simultaneous realtime editors of content on the land. However, one person can edit and upload while other people observe the scene, reloading it in their browser after each upload. This approach can be used on a dev server, or the testnet, or the main net.

In collaborative editing, one person should be the "Designated Saver", and make note of the newest IPFS Hash, then continue editing. Anyone else in the scene should NOT save, and instead should reload the browser from the scene name URL

Using Blender to create objects for use in Decentraland

The Blender 3D free modelling app can produce Decentraland-compatible (A-Frame-compatible) object files. It can also be used to convert 3D models and materials from other formats to the file formats that can be imported into Decentraland. Here are the steps:

  • Create the 3D model in Blender, or import a model of another file format.
  • Use Blender's "File - Export - Wavefront (.obj)" process to export the files for Decentraland.
    • For an object to work well in Decentraland, be sure to select, in Blender's export process, the following options:
      • Forward = -Z Forward and Up = Y Up
      • (because that is the coordination system that A-Frame uses)
    • Also turn on the following options:
      • Selection Only (if you had more than one object in Blender, and selected the one you want to export)
      • Apply Modifiers
      • Include Edges
      • Write Normals
      • Include UVs
      • Write Materials
      • Triangulate Faces
      • Objects as OBJ Objects
    • This export process will produce one .obj file, one .mtl file, and there will also typically be one or more "texture" files, typically .PNG image files, that are related to the .mtl file.
    • For more Blender-to-A-Frame tips, see Ben Nolan's great tutorial on how to prepare Thingiverse files for A-Frame (or Decentraland) using Blender

Tips on how to use the A-Frame Inspector to build a prototype of your scene

Although as of 2/18/18 the Decentraland tools do not include a visual land editor, just the CLI tool, it is possible to visually edit a scene using the A-Frame Inspector.

See the tutorials at https://A-Frame.io for more information.

Consider having a webserver of your own for dev and testing purposes, where you can upload your content and point your browser or HMD at that.

This scene on a webserver can have exactly the A-Minus content that you will later upload to your Decentraland land plot.

Restrict your A-Frame entities and object materials to the ones supported in A-Minus, and build the structure of your scene files and folders as described in the CLI tools documentation

To import .GLTF or .OBJ objects into the Inspector:

  1. Put the desired .gltf files, .obj files, .mtl file, and any .png texture maps into the assets directory of the scene file structure on the web server
  2. In the Inspector, after adding a .gltf or .obj entity, go to the Component panel on the right, give the object a unique ID, then go to the bottom of the panel and browse to the files.
    1. For .gltf objects, click the dark grey box next to .gltf, and provide the URL to the file.
    2. For .obj files:
      1. Click on the dark gray box next to .mtl, and then in the file finder, MUTIPLE SELECT the .mtl file and any needed .png texture image files that the .mtl refers to. It will take about a second for each file to upload, be patient. The IPFS path to where the files have been placed will appear in the path area to the right.
      2. Click on the dark gray box next to .obj and select the .obj file to upload. (Be careful to put the mtl in the mtl and the obj in the obj.)

If you import an .obj file into the Editor, but you don't see anything but the selection tool, it might be below the floor or behind something else. Try moving it into view.

About Blender

If you want to begin learning how to make your own 3D content, Blender is a free but very capable 3D modeling and material making tool. The Blender site has free documentation and tutorials, and there are many Blender tutorials available on the Web and on YouTube.

Making Great Experiences

See also Tips and Hints for Creating Great Experiences