introduction.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <!DOCTYPE html>
  2. <html class="writer-html5" lang="en" >
  3. <head>
  4. <meta charset="utf-8" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
  5. <meta property="article:modified_time" content="2026-02-18T11:21:18+00:00" /><meta property="og:title" content="Introduction" />
  6. <meta property="og:type" content="website" />
  7. <meta property="og:url" content="https://docs.crownengine.org/html/latest/rendering/introduction.html" />
  8. <meta property="og:site_name" content="Crown 0.60.0 Manual" />
  9. <meta property="og:description" content="Rendering is a core part of any game engine. Crown supports both 3D and 2D rendering with dynamic lighting and shadows, and exposes high-level objects and modern post-processing features to achieve good visual results. Lights: Crown provides three light types: directional, omn..." />
  10. <meta property="og:image" content="https://docs.crownengine.org/html/latest/_images/lights_directional.png" />
  11. <meta property="og:image:alt" content="Crown 0.60.0 Manual" />
  12. <meta name="description" content="Rendering is a core part of any game engine. Crown supports both 3D and 2D rendering with dynamic lighting and shadows, and exposes high-level objects and modern post-processing features to achieve good visual results. Lights: Crown provides three light types: directional, omn..." />
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  14. <title>Introduction &mdash; Crown 0.60.0 Manual 0.61.0 documentation</title>
  15. <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  16. <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  17. <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
  18. <link rel="shortcut icon" href="../_static/org.crownengine.Crown.svg"/>
  19. <link rel="canonical" href="https://docs.crownengine.org/html/latest/rendering/introduction.html" />
  20. <!--[if lt IE 9]>
  21. <script src="../_static/js/html5shiv.min.js"></script>
  22. <![endif]-->
  23. <script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
  24. <script src="../_static/jquery.js"></script>
  25. <script src="../_static/underscore.js"></script>
  26. <script src="../_static/doctools.js"></script>
  27. <script src="../_static/js/theme.js"></script>
  28. <link rel="index" title="Index" href="../genindex.html" />
  29. <link rel="search" title="Search" href="../search.html" />
  30. <link rel="copyright" title="Copyright" href="../copyright.html" />
  31. <link rel="next" title="Writing Gameplay" href="../gameplay/index.html" />
  32. <link rel="prev" title="Rendering" href="index.html" />
  33. </head>
  34. <body class="wy-body-for-nav">
  35. <div class="wy-grid-for-nav">
  36. <nav data-toggle="wy-nav-shift" class="wy-nav-side">
  37. <div class="wy-side-scroll">
  38. <div class="wy-side-nav-search" >
  39. <a href="../index.html">
  40. <img src="../_static/org.crownengine.Crown.svg" class="logo" alt="Logo"/>
  41. </a>
  42. <div class="version">
  43. Crown 0.60.0 Manual
  44. </div>
  45. <div role="search">
  46. <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
  47. <input type="text" name="q" placeholder="Search docs" />
  48. <input type="hidden" name="check_keywords" value="yes" />
  49. <input type="hidden" name="area" value="default" />
  50. </form>
  51. </div>
  52. </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">
  53. <ul class="current">
  54. <li class="toctree-l1"><a class="reference internal" href="../changelog.html">Changelog</a></li>
  55. <li class="toctree-l1"><a class="reference internal" href="../introduction.html">Introduction</a></li>
  56. <li class="toctree-l1"><a class="reference internal" href="../installing_crown/index.html">Installing Crown</a></li>
  57. <li class="toctree-l1"><a class="reference internal" href="../getting_started/index.html">Getting Started</a></li>
  58. <li class="toctree-l1"><a class="reference internal" href="../level_editor/index.html">The Level Editor</a></li>
  59. <li class="toctree-l1"><a class="reference internal" href="../importing_resources/index.html">Importing Resources</a></li>
  60. <li class="toctree-l1"><a class="reference internal" href="../units/index.html">Units</a></li>
  61. <li class="toctree-l1 current"><a class="reference internal" href="index.html">Rendering</a><ul class="current">
  62. <li class="toctree-l2 current"><a class="current reference internal" href="#">Introduction</a><ul>
  63. <li class="toctree-l3"><a class="reference internal" href="#lights">Lights</a><ul>
  64. <li class="toctree-l4"><a class="reference internal" href="#directional-light">Directional light</a></li>
  65. <li class="toctree-l4"><a class="reference internal" href="#local-lights">Local lights</a></li>
  66. </ul>
  67. </li>
  68. <li class="toctree-l3"><a class="reference internal" href="#shadows">Shadows</a></li>
  69. </ul>
  70. </li>
  71. </ul>
  72. </li>
  73. <li class="toctree-l1"><a class="reference internal" href="../gameplay/index.html">Writing Gameplay</a></li>
  74. <li class="toctree-l1"><a class="reference internal" href="../deploying/index.html">Deploying</a></li>
  75. <li class="toctree-l1"><a class="reference internal" href="../reference/index.html">Reference</a></li>
  76. <li class="toctree-l1"><a class="reference internal" href="../lua_api.html">Lua API reference</a></li>
  77. <li class="toctree-l1"><a class="reference internal" href="../glossary.html">Glossary</a></li>
  78. <li class="toctree-l1"><a class="reference internal" href="../copyright.html">License</a></li>
  79. <li class="toctree-l1"><a class="reference internal" href="../hackers/index.html">Engine Hackers</a></li>
  80. </ul>
  81. </div>
  82. </div>
  83. </nav>
  84. <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" >
  85. <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
  86. <a href="../index.html">Crown 0.60.0 Manual</a>
  87. </nav>
  88. <div class="wy-nav-content">
  89. <div class="rst-content">
  90. <div role="navigation" aria-label="Page navigation">
  91. <ul class="wy-breadcrumbs">
  92. <li><a href="../index.html" class="icon icon-home"></a> &raquo;</li>
  93. <li><a href="index.html">Rendering</a> &raquo;</li>
  94. <li>Introduction</li>
  95. <li class="wy-breadcrumbs-aside">
  96. <a href="../_sources/rendering/introduction.rst.txt" rel="nofollow"> View page source</a>
  97. </li>
  98. </ul>
  99. <hr/>
  100. </div>
  101. <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
  102. <div itemprop="articleBody">
  103. <section id="introduction">
  104. <h1>Introduction<a class="headerlink" href="#introduction" title="Permalink to this headline">¶</a></h1>
  105. <p>Rendering is a core part of any game engine. Crown supports both 3D and 2D
  106. rendering with dynamic lighting and shadows, and exposes high-level objects
  107. and modern post-processing features to achieve good visual results.</p>
  108. <section id="lights">
  109. <h2>Lights<a class="headerlink" href="#lights" title="Permalink to this headline">¶</a></h2>
  110. <p>Crown provides three light types: directional, omni, and spot. Lights are
  111. regular <a class="reference internal" href="../units/introduction.html#units"><span class="std std-ref">Units</span></a> with a Light Component attached; the component’s
  112. <code class="docutils literal notranslate"><span class="pre">Type</span></code> property selects the light type. Add a light to the level using
  113. <code class="docutils literal notranslate"><span class="pre">Spawn</span></code> -&gt; <code class="docutils literal notranslate"><span class="pre">Light</span></code> in the <a class="reference internal" href="../level_editor/level_editor.html#editor-overview"><span class="std std-ref">Menubar</span></a>.</p>
  114. <section id="directional-light">
  115. <h3>Directional light<a class="headerlink" href="#directional-light" title="Permalink to this headline">¶</a></h3>
  116. <p>A directional light illuminates objects from a uniform direction; The
  117. brightest directional light in a Level (the one with the highest
  118. <code class="docutils literal notranslate"><span class="pre">Intensity</span></code>) is considered the sun. The sun typically renders shadows for
  119. the entire level using Cascaded Shadow Maps.</p>
  120. <figure class="align-center" id="id1">
  121. <a class="reference internal image-reference" href="../_images/lights_directional.png"><img alt="../_images/lights_directional.png" src="../_images/lights_directional.png" style="width: 564.0px; height: 474.40000000000003px;" /></a>
  122. <figcaption>
  123. <p><span class="caption-text">A directional light illuminating objects in the Level Viewport.</span><a class="headerlink" href="#id1" title="Permalink to this image">¶</a></p>
  124. </figcaption>
  125. </figure>
  126. </section>
  127. <section id="local-lights">
  128. <h3>Local lights<a class="headerlink" href="#local-lights" title="Permalink to this headline">¶</a></h3>
  129. <p>Local lights affect only nearby objects. They expose a maximum range property
  130. to limit their influence. Keep ranges reasonably small to reduce performance
  131. cost and to avoid shadowing artifacts; very large ranges can make shadows and
  132. lighting harder to tune.</p>
  133. <section id="omni-light">
  134. <h4>Omni light<a class="headerlink" href="#omni-light" title="Permalink to this headline">¶</a></h4>
  135. <p>Omni lights emit in all directions and are suitable for simulating point light
  136. sources such as light bulbs, fireplaces and so on.</p>
  137. <figure class="align-center" id="id2">
  138. <a class="reference internal image-reference" href="../_images/lights_omni.png"><img alt="../_images/lights_omni.png" src="../_images/lights_omni.png" style="width: 564.0px; height: 552.0px;" /></a>
  139. <figcaption>
  140. <p><span class="caption-text">An omni light illuminating objects in the Level Viewport.</span><a class="headerlink" href="#id2" title="Permalink to this image">¶</a></p>
  141. </figcaption>
  142. </figure>
  143. </section>
  144. <section id="spot-light">
  145. <h4>Spot light<a class="headerlink" href="#spot-light" title="Permalink to this headline">¶</a></h4>
  146. <p>Spot lights emit light inside a cone. Use the Light Component’s <code class="docutils literal notranslate"><span class="pre">Spot</span> <span class="pre">Angle</span></code>
  147. and <code class="docutils literal notranslate"><span class="pre">Range</span></code> to shape the cone. Spot lights are appropriate for torches,
  148. street lights and similar sources.</p>
  149. <figure class="align-center" id="id3">
  150. <a class="reference internal image-reference" href="../_images/lights_spot.png"><img alt="../_images/lights_spot.png" src="../_images/lights_spot.png" style="width: 564.0px; height: 509.6px;" /></a>
  151. <figcaption>
  152. <p><span class="caption-text">A spot light illuminating objects in the Level Viewport.</span><a class="headerlink" href="#id3" title="Permalink to this image">¶</a></p>
  153. </figcaption>
  154. </figure>
  155. </section>
  156. </section>
  157. </section>
  158. <section id="shadows">
  159. <h2>Shadows<a class="headerlink" href="#shadows" title="Permalink to this headline">¶</a></h2>
  160. <p>Crown uses different shadow mapping approaches depending on the light type.
  161. Directional light shadows are rendered with Cascaded Shadow Maps (4 splits).
  162. Local lights combine tetrahedron mapping and regular shadow maps inside a
  163. single shadow atlas. Use the <span class="xref std std-ref">Render Config</span> to tune shadow-map
  164. resolution and related parameters.</p>
  165. <p>Rendering convincing shadows require careful tuning. Two common shadow mapping
  166. artifacts are shadow acne and peter-panning. Use the Light Component’s
  167. <code class="docutils literal notranslate"><span class="pre">Shadow</span> <span class="pre">Bias</span></code> property to reduce these issues.</p>
  168. <p>The <code class="docutils literal notranslate"><span class="pre">Shadow</span> <span class="pre">Bias</span></code> offsets depth comparisons to compensate for shadow map
  169. precision limits. Lower bias values reduce peter-panning but can expose
  170. shadow acne; higher bias values reduce acne but can cause noticeable
  171. separation between casting objects and their shadows (peter-panning). Adjust
  172. bias incrementally to find the best compromise for your Level.</p>
  173. <figure class="align-center" id="id4">
  174. <a class="reference internal image-reference" href="../_images/shadow_artifacts.png"><img alt="../_images/shadow_artifacts.png" src="../_images/shadow_artifacts.png" style="width: 2844.0px; height: 1132.0px;" /></a>
  175. <figcaption>
  176. <p><span class="caption-text">Left: shadow acne (low bias). Right: peter-panning (high bias).</span><a class="headerlink" href="#id4" title="Permalink to this image">¶</a></p>
  177. </figcaption>
  178. </figure>
  179. </section>
  180. </section>
  181. </div>
  182. </div>
  183. <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
  184. <a href="index.html" class="btn btn-neutral float-left" title="Rendering" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
  185. <a href="../gameplay/index.html" class="btn btn-neutral float-right" title="Writing Gameplay" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
  186. </div>
  187. <hr/>
  188. <div role="contentinfo">
  189. <p>&#169; <a href="../copyright.html">Copyright</a> Except where otherwise noted, content on this page is licensed under a CC-BY-SA 4.0 Int. License.
  190. <span class="lastupdated">Last updated on Feb 18, 2026.
  191. </span></p>
  192. </div>
  193. Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
  194. <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
  195. provided by <a href="https://readthedocs.org">Read the Docs</a>.
  196. </footer>
  197. </div>
  198. </div>
  199. </section>
  200. </div>
  201. <script>
  202. jQuery(function () {
  203. SphinxRtdTheme.Navigation.enable(true);
  204. });
  205. </script>
  206. <!-- Theme Analytics -->
  207. <script async src="https://www.googletagmanager.com/gtag/js?id=G-XNVGCMNDZH"></script>
  208. <script>
  209. window.dataLayer = window.dataLayer || [];
  210. function gtag(){dataLayer.push(arguments);}
  211. gtag('js', new Date());
  212. gtag('config', 'G-XNVGCMNDZH', {
  213. 'anonymize_ip': true,
  214. });
  215. </script>
  216. </body>
  217. </html>