csg_tools.rst 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  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 modelling 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 `Qodot <https://github.com/Shfty/qodot-plugin>`__
  16. instead. It lets you design levels using
  17. `TrenchBroom <https://kristianduske.com/trenchbroom/>`__ and import
  18. them in Godot.
  19. .. image:: img/csg.gif
  20. Introduction to CSG nodes
  21. -------------------------
  22. Like other features of Godot, CSG is supported in the form of nodes. These are
  23. the CSG nodes:
  24. - :ref:`CSGBox3D <class_CSGBox3D>`
  25. - :ref:`CSGCylinder3D <class_CSGCylinder3D>` (also supports cone)
  26. - :ref:`CSGSphere3D <class_CSGSphere3D>`
  27. - :ref:`CSGTorus3D <class_CSGTorus3D>`
  28. - :ref:`CSGPolygon3D <class_CSGPolygon3D>`
  29. - :ref:`CSGMesh3D <class_CSGMesh3D>`
  30. - :ref:`CSGCombiner3D <class_CSGCombiner3D>`
  31. .. image:: img/csg_nodes.png
  32. .. image:: img/csg_mesh.png
  33. CSG tools features
  34. ~~~~~~~~~~~~~~~~~~
  35. Every CSG node supports 3 kinds of boolean operations:
  36. - **Union:** Geometry of both primitives is merged, intersecting geometry
  37. is removed.
  38. - **Intersection:** Only intersecting geometry remains, the rest is removed.
  39. - **Subtraction:** The second shape is subtracted from the first, leaving a dent
  40. with its shape.
  41. .. image:: img/csg_operation_menu.png
  42. .. image:: img/csg_operation.png
  43. CSGPolygon
  44. ~~~~~~~~~~
  45. The :ref:`CSGPolygon3D <class_CSGPolygon3D>` node extrude along a Polygon drawn in
  46. 2D (in X, Y coordinates) in the following ways:
  47. - **Depth:** Extruded back a given amount.
  48. - **Spin:** Extruded while spinning around its origin.
  49. - **Path:** Extruded along a Path node. This operation is commonly called
  50. lofting.
  51. .. image:: img/csg_poly_mode.png
  52. .. image:: img/csg_poly.png
  53. .. note:: The **Path** mode must be provided with a :ref:`Path3D <class_Path3D>`
  54. node to work. In the Path node, draw the path and the polygon in
  55. CSGPolygon3D will extrude along the given path.
  56. Custom meshes
  57. ~~~~~~~~~~~~~
  58. Any mesh can be used for :ref:`CSGMesh3D <class_CSGMesh3D>`; the mesh can be
  59. modelled in other software and imported into Godot. Multiple materials are
  60. supported. There are some restrictions for geometry:
  61. - it must be closed,
  62. - it must not self-intersect,
  63. - it must not contain internal faces,
  64. - every edge must connect to only two other faces.
  65. .. image:: img/csg_custom_mesh.png
  66. CSGCombiner3D
  67. ~~~~~~~~~~~~~
  68. The :ref:`CSGCombiner3D <class_CSGCombiner3D>` node is an empty shape used for
  69. organization. It will only combine children nodes.
  70. Processing order
  71. ~~~~~~~~~~~~~~~~
  72. Every CSG node will first process its children nodes and their operations:
  73. union, intersection, or subtraction, in tree order, and apply them to itself one
  74. after the other.
  75. .. note:: In the interest of performance, make sure CSG geometry remains
  76. relatively simple, as complex meshes can take a while to process.
  77. If adding objects together (such as table and room objects), create
  78. them as separate CSG trees. Forcing too many objects in a single tree
  79. will eventually start affecting performance.
  80. Only use binary operations where you actually need them.
  81. Prototyping a level
  82. -------------------
  83. We will prototype a room to practice the use of CSG tools.
  84. .. tip:: Working in **Orthogonal** projection gives a better view when combining
  85. the CSG shapes.
  86. Our level will contain these objects:
  87. - a room,
  88. - a bed,
  89. - a lamp,
  90. - a desk,
  91. - a bookshelf.
  92. Create a scene with a Node3D node as root node.
  93. .. tip:: The default lighting of the environment doesn't provide clear shading
  94. at some angles. Change the display mode using **Display Overdraw** in
  95. the 3D viewport menu, or add a DirectionalLight node to help you see
  96. clearly.
  97. .. image:: img/csg_overdraw.png
  98. Create a CSGBox3D and name it ``room``, enable **Invert Faces** and change the
  99. dimensions of your room.
  100. .. image:: img/csg_room.png
  101. .. image:: img/csg_room_invert.png
  102. Next, create a CSGCombiner3D and name it ``desk``.
  103. A desk has one surface and 4 legs:
  104. - Create 1 CSGBox3D children node in **Union** mode for the surface
  105. and adjust the dimensions.
  106. - Create 4 CSGBox3D children nodes in **Union** mode for the legs
  107. and adjust the dimensions.
  108. Adjust their placement to resemble a desk.
  109. .. image:: img/csg_desk.png
  110. .. note:: CSG nodes inside a CSGCombiner3D will only process their operation
  111. within the combiner. Therefore, CSGCombiner3Ds are used to organize
  112. CSG nodes.
  113. Create a CSGCombiner3D and name it ``bed``.
  114. Our bed consists of 3 parts: the bed, the mattress and a pillow. Create a CSGBox3D
  115. and adjust its dimension for the bed. Create another CSGBox3D and adjust its
  116. dimension for the mattress.
  117. .. image:: img/csg_bed_mat.png
  118. We will create another CSGCombiner3D named ``pillow`` as the child of ``bed``.
  119. The scene tree should look like this:
  120. .. image:: img/csg_bed_tree.png
  121. We will combine 3 CSGSphere3D nodes in **Union** mode to form a pillow. Scale the
  122. Y axis of the spheres and enable **Smooth Faces**.
  123. .. image:: img/csg_pillow_smooth.png
  124. Select the ``pillow`` node and switch the mode to **Subtraction**; the combined
  125. spheres will cut a hole into the mattress.
  126. .. image:: img/csg_pillow_hole.png
  127. Try to re-parent the ``pillow`` node to the root ``Node3D`` node; the hole will
  128. disappear.
  129. .. note:: This is to illustrate the effect of CSG processing order.
  130. Since the root node is not a CSG node, the CSGCombiner3D nodes are
  131. the end of the operations; this shows the use of CSGCombiner3D to
  132. organize the CSG scene.
  133. Undo the re-parent after observing the effect. The bed you've built should look
  134. like this:
  135. .. image:: img/csg_bed.png
  136. Create a CSGCombiner3D and name it ``lamp``.
  137. A lamp consists of 3 parts: the stand, the pole and the lampshade.
  138. Create a CSGCylinder3D, enable the **Cone** option and make it the stand. Create
  139. another CSGCylinder3D and adjust the dimensions to use it as a pole.
  140. .. image:: img/csg_lamp_pole_stand.png
  141. We will use a CSGPolygon3D for the lampshade. Use the **Spin** mode for the
  142. CSGPolygon3D and draw a `trapezoid <https://en.wikipedia.org/wiki/Trapezoid>`_
  143. while in **Front View** (numeric keypad 1); this shape will extrude around the
  144. origin and form the lampshade.
  145. .. image:: img/csg_lamp_spin.png
  146. .. image:: img/csg_lamp_polygon.png
  147. .. image:: img/csg_lamp_extrude.png
  148. Adjust the placement of the 3 parts to make it look like a lamp.
  149. .. image:: img/csg_lamp.png
  150. Create a CSGCombiner3D and name it ``bookshelf``.
  151. We will use 3 CSGBox3D nodes for the bookshelf. Create a CSGBox3D and adjust its
  152. dimensions; this will be the size of the bookshelf.
  153. .. image:: img/csg_shelf_big.png
  154. Duplicate the CSGBox3D and shorten the dimensions of each axis and change the mode
  155. to **Subtraction**.
  156. .. image:: img/csg_shelf_subtract.png
  157. .. image:: img/csg_shelf_subtract_menu.png
  158. You've almost built a shelf. Create one more CSGBox3D for dividing the shelf into
  159. two levels.
  160. .. image:: img/csg_shelf.png
  161. Position your furniture in your room as you like and your scene should look
  162. this:
  163. .. image:: img/csg_room_result.png
  164. You've successfully prototyped a room level with the CSG tools in Godot.
  165. CSG tools can be used for designing all kinds of levels, such as a maze
  166. or a city; explore its limitations when designing your game.
  167. Using prototype textures
  168. ------------------------
  169. Godot's :ref:`doc_standard_material_3d` supports *triplanar mapping*, which can be
  170. used to automatically apply a texture to arbitrary objects without distortion.
  171. This is handy when using CSG as Godot doesn't support editing UV maps on CSG
  172. nodes yet. Triplanar mapping is relatively slow, which usually restricts its
  173. usage to organic surfaces like terrain. Still, when prototyping, it can be used
  174. to quickly apply textures to CSG-based levels.
  175. .. note:: If you need some textures for prototyping, Kenney made a
  176. `set of CC0-licensed prototype textures <https://kenney.nl/assets/prototype-textures>`__.
  177. There are two ways to apply a material to a CSG node:
  178. - Applying it to a CSGCombiner3D node as a material override
  179. (**Geometry > Material Override** in the Inspector). This will affect its
  180. children automatically, but will make it impossible to change the material in
  181. individual children.
  182. - Applying a material to individual nodes (**Material** in the Inspector). This
  183. way, each CSG node can have its own appearance. Subtractive CSG nodes will
  184. apply their material to the nodes they're "digging" into.
  185. To apply triplanar mapping to a CSG node, select it, go to the Inspector, click
  186. the **[empty]** text next to **Material Override** (or **Material** for
  187. individual CSG nodes). Choose **New StandardMaterial3D**. Click the newly created
  188. material's icon to edit it. Unfold the **Albedo** section and load a texture
  189. into the **Texture** property. Now, unfold the **Uv1** section and check
  190. **Triplanar**. You can change the texture offset and scale on each axis by
  191. playing with the **Scale** and **Offset** properties just above. Higher values
  192. in the **Scale** property will cause the texture to repeat more often.
  193. .. tip:: You can copy a StandardMaterial3D to reuse it across CSG nodes. To do so,
  194. click the dropdown arrow next to a material property in the Inspector
  195. and choose **Copy**. To paste it, select the node you'd like to apply
  196. the material onto, click the dropdown arrow next to its material
  197. property then choose **Paste**.