csg_tools.rst 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. :article_outdated: True
  2. .. _doc_csg_tools:
  3. Prototyping levels with CSG
  4. ===========================
  5. CSG stands for **Constructive Solid Geometry**, and is a tool to combine basic
  6. shapes or custom meshes to create more complex shapes. In 3D modeling software,
  7. CSG is mostly known as "Boolean Operators".
  8. Level prototyping is one of the main uses of CSG in Godot. This technique allows
  9. users to create the most common shapes by combining primitives.
  10. Interior environments can be created by using inverted primitives.
  11. .. note:: The CSG nodes in Godot are mainly intended for prototyping. There is
  12. no built-in support for UV mapping or editing 3D polygons (though
  13. extruded 2D polygons can be used with the CSGPolygon3D node).
  14. If you're looking for an easy to use level design tool for a project,
  15. you may want to use `FuncGodot <https://github.com/func-godot/func_godot_plugin>`__
  16. or `Cyclops Level Builder <https://github.com/blackears/cyclopsLevelBuilder>`__
  17. instead.
  18. .. video:: video/csg_tools.webm
  19. :alt: CSG being used to subtract a torus shape from a box
  20. :autoplay:
  21. :loop:
  22. :muted:
  23. :align: default
  24. .. seealso::
  25. You can check how to use CSG nodes to build various shapes (such as stairs or roads) using the
  26. `Constructive Solid Geometry demo project <https://github.com/godotengine/godot-demo-projects/tree/master/3d/csg>`__.
  27. Introduction to CSG nodes
  28. -------------------------
  29. Like other features of Godot, CSG is supported in the form of nodes. These are
  30. the CSG nodes:
  31. - :ref:`CSGBox3D <class_CSGBox3D>`
  32. - :ref:`CSGCylinder3D <class_CSGCylinder3D>` (also supports cone)
  33. - :ref:`CSGSphere3D <class_CSGSphere3D>`
  34. - :ref:`CSGTorus3D <class_CSGTorus3D>`
  35. - :ref:`CSGPolygon3D <class_CSGPolygon3D>`
  36. - :ref:`CSGMesh3D <class_CSGMesh3D>`
  37. - :ref:`CSGCombiner3D <class_CSGCombiner3D>`
  38. .. image:: img/csg_nodes.png
  39. .. image:: img/csg_mesh.png
  40. CSG tools features
  41. ~~~~~~~~~~~~~~~~~~
  42. Every CSG node supports 3 kinds of boolean operations:
  43. - **Union:** Geometry of both primitives is merged, intersecting geometry
  44. is removed.
  45. - **Intersection:** Only intersecting geometry remains, the rest is removed.
  46. - **Subtraction:** The second shape is subtracted from the first, leaving a dent
  47. with its shape.
  48. .. image:: img/csg_operation_menu.png
  49. .. image:: img/csg_operation.png
  50. CSGPolygon
  51. ~~~~~~~~~~
  52. The :ref:`CSGPolygon3D <class_CSGPolygon3D>` node extrude along a Polygon drawn in
  53. 2D (in X, Y coordinates) in the following ways:
  54. - **Depth:** Extruded back a given amount.
  55. - **Spin:** Extruded while spinning around its origin.
  56. - **Path:** Extruded along a Path node. This operation is commonly called
  57. lofting.
  58. .. image:: img/csg_poly_mode.png
  59. .. image:: img/csg_poly.png
  60. .. note:: The **Path** mode must be provided with a :ref:`Path3D <class_Path3D>`
  61. node to work. In the Path node, draw the path and the polygon in
  62. CSGPolygon3D will extrude along the given path.
  63. Custom meshes
  64. ~~~~~~~~~~~~~
  65. Custom meshes can be used for :ref:`CSGMesh3D <class_CSGMesh3D>` as long as the
  66. mesh is *manifold*. The mesh can be modeled in other software and imported into
  67. Godot. Multiple materials are supported.
  68. For a mesh to be used as a CSG mesh, it is required to:
  69. - be closed
  70. - have each edge connect to only two faces
  71. - have volume
  72. And it is recommended to avoid:
  73. - negative volume
  74. - self-intersection
  75. - interior faces
  76. Godot uses the `manifold <https://github.com/elalish/manifold>`__ library to
  77. implement CSG meshes. The technical definition of "manifold" used by Godot is
  78. the following, adapted from that library's `definition of "manifold"
  79. <https://github.com/elalish/manifold/wiki/Manifold-Library#manifoldness-definition>`__:
  80. Every edge of every triangle must contain the same two vertices (by index) as
  81. exactly one other triangle edge, and the start and end vertices must switch
  82. places between these two edges. The triangle vertices must appear in clockwise
  83. order when viewed from the outside of the Godot Engine manifold mesh.
  84. .. image:: img/csg_custom_mesh.png
  85. Making an existing mesh manifold with Blender
  86. ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  87. .. UPDATE: This relies on a specific Blender addon. If it becomes unsupported,
  88. .. we can remove this section.
  89. If you have an existing mesh that is not already manifold, you can make it
  90. manifold using Blender.
  91. In Blender, install and enable the
  92. `3D Print Toolbox <https://extensions.blender.org/add-ons/print3d-toolbox/>`_
  93. addon.
  94. Select the mesh you want to make manifold. Open the sidebar by clicking on the arrow:
  95. .. image:: img/csg_manifold_step_1.webp
  96. In the **3D Print** tab, under **Clean Up**, click the **Make Manifold** button:
  97. .. image:: img/csg_manifold_step_2.webp
  98. The mesh should now be manifold, and can be used as a custom mesh.
  99. CSGCombiner3D
  100. ~~~~~~~~~~~~~
  101. The :ref:`CSGCombiner3D <class_CSGCombiner3D>` node is an empty shape used for
  102. organization. It will only combine children nodes.
  103. Processing order
  104. ~~~~~~~~~~~~~~~~
  105. Every CSG node will first process its children nodes and their operations:
  106. union, intersection, or subtraction, in tree order, and apply them to itself one
  107. after the other.
  108. .. note:: In the interest of performance, make sure CSG geometry remains
  109. relatively simple, as complex meshes can take a while to process.
  110. If adding objects together (such as table and room objects), create
  111. them as separate CSG trees. Forcing too many objects in a single tree
  112. will eventually start affecting performance.
  113. Only use binary operations where you actually need them.
  114. Prototyping a level
  115. -------------------
  116. We will prototype a room to practice the use of CSG tools.
  117. .. tip:: Working in **Orthogonal** projection gives a better view when combining
  118. the CSG shapes.
  119. Our level will contain these objects:
  120. - a room,
  121. - a bed,
  122. - a lamp,
  123. - a desk,
  124. - a bookshelf.
  125. Create a scene with a Node3D node as root node.
  126. .. tip:: The default lighting of the environment doesn't provide clear shading
  127. at some angles. Change the display mode using **Display Overdraw** in
  128. the 3D viewport menu, or add a DirectionalLight node to help you see
  129. clearly.
  130. .. image:: img/csg_overdraw.png
  131. Create a CSGBox3D and name it ``room``, enable **Invert Faces** and change the
  132. dimensions of your room.
  133. .. image:: img/csg_room.png
  134. .. image:: img/csg_room_invert.png
  135. Next, create a CSGCombiner3D and name it ``desk``.
  136. A desk has one surface and 4 legs:
  137. - Create 1 CSGBox3D children node in **Union** mode for the surface
  138. and adjust the dimensions.
  139. - Create 4 CSGBox3D children nodes in **Union** mode for the legs
  140. and adjust the dimensions.
  141. Adjust their placement to resemble a desk.
  142. .. image:: img/csg_desk.png
  143. .. note:: CSG nodes inside a CSGCombiner3D will only process their operation
  144. within the combiner. Therefore, CSGCombiner3Ds are used to organize
  145. CSG nodes.
  146. Create a CSGCombiner3D and name it ``bed``.
  147. Our bed consists of 3 parts: the bed, the mattress and a pillow. Create a CSGBox3D
  148. and adjust its dimension for the bed. Create another CSGBox3D and adjust its
  149. dimension for the mattress.
  150. .. image:: img/csg_bed_mat.png
  151. We will create another CSGCombiner3D named ``pillow`` as the child of ``bed``.
  152. The scene tree should look like this:
  153. .. image:: img/csg_bed_tree.png
  154. We will combine 3 CSGSphere3D nodes in **Union** mode to form a pillow. Scale the
  155. Y axis of the spheres and enable **Smooth Faces**.
  156. .. image:: img/csg_pillow_smooth.png
  157. Select the ``pillow`` node and switch the mode to **Subtraction**; the combined
  158. spheres will cut a hole into the mattress.
  159. .. image:: img/csg_pillow_hole.png
  160. Try to re-parent the ``pillow`` node to the root ``Node3D`` node; the hole will
  161. disappear.
  162. .. note:: This is to illustrate the effect of CSG processing order.
  163. Since the root node is not a CSG node, the CSGCombiner3D nodes are
  164. the end of the operations; this shows the use of CSGCombiner3D to
  165. organize the CSG scene.
  166. Undo the re-parent after observing the effect. The bed you've built should look
  167. like this:
  168. .. image:: img/csg_bed.png
  169. Create a CSGCombiner3D and name it ``lamp``.
  170. A lamp consists of 3 parts: the stand, the pole and the lampshade.
  171. Create a CSGCylinder3D, enable the **Cone** option and make it the stand. Create
  172. another CSGCylinder3D and adjust the dimensions to use it as a pole.
  173. .. image:: img/csg_lamp_pole_stand.png
  174. We will use a CSGPolygon3D for the lampshade. Use the **Spin** mode for the
  175. CSGPolygon3D and draw a `trapezoid <https://en.wikipedia.org/wiki/Trapezoid>`_
  176. while in **Front View** (numeric keypad 1); this shape will extrude around the
  177. origin and form the lampshade.
  178. .. image:: img/csg_lamp_spin.png
  179. .. image:: img/csg_lamp_polygon.png
  180. .. image:: img/csg_lamp_extrude.png
  181. Adjust the placement of the 3 parts to make it look like a lamp.
  182. .. image:: img/csg_lamp.png
  183. Create a CSGCombiner3D and name it ``bookshelf``.
  184. We will use 3 CSGBox3D nodes for the bookshelf. Create a CSGBox3D and adjust its
  185. dimensions; this will be the size of the bookshelf.
  186. .. image:: img/csg_shelf_big.png
  187. Duplicate the CSGBox3D and shorten the dimensions of each axis and change the mode
  188. to **Subtraction**.
  189. .. image:: img/csg_shelf_subtract.png
  190. .. image:: img/csg_shelf_subtract_menu.png
  191. You've almost built a shelf. Create one more CSGBox3D for dividing the shelf into
  192. two levels.
  193. .. image:: img/csg_shelf.png
  194. Position your furniture in your room as you like and your scene should look
  195. this:
  196. .. image:: img/csg_room_result.png
  197. You've successfully prototyped a room level with the CSG tools in Godot.
  198. CSG tools can be used for designing all kinds of levels, such as a maze
  199. or a city; explore its limitations when designing your game.
  200. Using prototype textures
  201. ------------------------
  202. Godot's :ref:`doc_standard_material_3d` supports *triplanar mapping*, which can be
  203. used to automatically apply a texture to arbitrary objects without distortion.
  204. This is handy when using CSG as Godot doesn't support editing UV maps on CSG
  205. nodes yet. Triplanar mapping is relatively slow, which usually restricts its
  206. usage to organic surfaces like terrain. Still, when prototyping, it can be used
  207. to quickly apply textures to CSG-based levels.
  208. .. note:: If you need some textures for prototyping, Kenney made a
  209. `set of CC0-licensed prototype textures <https://kenney.nl/assets/prototype-textures>`__.
  210. There are two ways to apply a material to a CSG node:
  211. - Applying it to a CSGCombiner3D node as a material override
  212. (**Geometry > Material Override** in the Inspector). This will affect its
  213. children automatically, but will make it impossible to change the material in
  214. individual children.
  215. - Applying a material to individual nodes (**Material** in the Inspector). This
  216. way, each CSG node can have its own appearance. Subtractive CSG nodes will
  217. apply their material to the nodes they're "digging" into.
  218. To apply triplanar mapping to a CSG node, select it, go to the Inspector, click
  219. the **[empty]** text next to **Material Override** (or **Material** for
  220. individual CSG nodes). Choose **New StandardMaterial3D**. Click the newly created
  221. material's icon to edit it. Unfold the **Albedo** section and load a texture
  222. into the **Texture** property. Now, unfold the **Uv1** section and check
  223. **Triplanar**. You can change the texture offset and scale on each axis by
  224. playing with the **Scale** and **Offset** properties just above. Higher values
  225. in the **Scale** property will cause the texture to repeat more often.
  226. .. tip:: You can copy a StandardMaterial3D to reuse it across CSG nodes. To do so,
  227. click the dropdown arrow next to a material property in the Inspector
  228. and choose **Copy**. To paste it, select the node you'd like to apply
  229. the material onto, click the dropdown arrow next to its material
  230. property then choose **Paste**.
  231. .. _doc_csg_tools_converting_to_mesh_instance_3d:
  232. Converting to MeshInstance3D
  233. ----------------------------
  234. Since Godot 4.4, you can convert a CSG node and its children to a :ref:`class_MeshInstance3D` node.
  235. This has several benefits:
  236. - Bake lightmaps, since UV2 can be generated on a MeshInstance3D.
  237. - Bake occlusion culling, since the occlusion culling bake process only takes MeshInstance3D into account.
  238. - Faster loading times, since the CSG mesh no longer needs to be rebuilt when the scene loads.
  239. - Better performance when updating the node's transform if using the mesh within another CSG node.
  240. To convert a CSG node to a MeshInstance3D node, select it, then choose
  241. **CSG > Bake Mesh Instance** in the toolbar. The MeshInstance3D node
  242. will be created as a sibling. Note that the CSG node that was used for baking is **not** hidden
  243. automatically, so remember to hide it to prevent its geometry from overlapping with the newly created
  244. MeshInstance3D.
  245. You can also create a trimesh collision shape using **CSG > Bake Collision Shape**.
  246. The generated :ref:`class_CollisionShape3D` node must be a child of a :ref:`class_StaticBody3D`
  247. or :ref:`class_AnimatableBody3D` node to be effective.
  248. .. tip::
  249. Remember to keep the original CSG node in the scene tree, so that you can
  250. perform changes to the geometry later if needed. To make changes to the
  251. geometry, remove the MeshInstance3D node and make the root CSG node visible
  252. again.
  253. Exporting as glTF
  254. -----------------
  255. It can be useful to block out a level using CSG, then export it as a 3d model, to
  256. import into 3D modeling software. You can do this by selecting **Scene > Export As... >
  257. glTF 2.0 Scene**.
  258. .. image:: img/export_as_gltf.webp