diff --git a/docs/Filament.html b/docs/Filament.html
index 8b961b92bc..7fc099660e 100644
--- a/docs/Filament.html
+++ b/docs/Filament.html
@@ -29,128 +29,128 @@ counter-increment: h6;margin-right:10px}</style><style>.hljs{display:block;overf
 </p><center><a href="images/filament_logo.png" target="_blank"><img class="markdeep" src="images/filament_logo.png"></a></center>
 
 <p></p>
-<div class="longTOC"><div class="tocHeader">Contents</div><p><a href="#about" class="level1"><span class="tocNumber">1&#xA0; </span>About</a><br>
-&#xA0;&#xA0;<a href="#about/authors" class="level2"><span class="tocNumber">1.1&#xA0; </span>Authors</a><br>
-<a href="#overview" class="level1"><span class="tocNumber">2&#xA0; </span>Overview</a><br>
-&#xA0;&#xA0;<a href="#overview/principles" class="level2"><span class="tocNumber">2.1&#xA0; </span>Principles</a><br>
-&#xA0;&#xA0;<a href="#overview/physicallybasedrendering" class="level2"><span class="tocNumber">2.2&#xA0; </span>Physically based rendering</a><br>
-<a href="#notation" class="level1"><span class="tocNumber">3&#xA0; </span>Notation</a><br>
-<a href="#materialsystem" class="level1"><span class="tocNumber">4&#xA0; </span>Material system</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/standardmodel" class="level2"><span class="tocNumber">4.1&#xA0; </span>Standard model</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/dielectricsandconductors" class="level2"><span class="tocNumber">4.2&#xA0; </span>Dielectrics and conductors</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/energyconservation" class="level2"><span class="tocNumber">4.3&#xA0; </span>Energy conservation</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/specularbrdf" class="level2"><span class="tocNumber">4.4&#xA0; </span>Specular BRDF</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/specularbrdf/normaldistributionfunction(speculard)" class="level3"><span class="tocNumber">4.4.1&#xA0; </span>Normal distribution function (specular D)</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/specularbrdf/geometricshadowing(specularg)" class="level3"><span class="tocNumber">4.4.2&#xA0; </span>Geometric shadowing (specular G)</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/specularbrdf/fresnel(specularf)" class="level3"><span class="tocNumber">4.4.3&#xA0; </span>Fresnel (specular F)</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/diffusebrdf" class="level2"><span class="tocNumber">4.5&#xA0; </span>Diffuse BRDF</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/standardmodelsummary" class="level2"><span class="tocNumber">4.6&#xA0; </span>Standard model summary</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/improvingthebrdfs" class="level2"><span class="tocNumber">4.7&#xA0; </span>Improving the BRDFs</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/improvingthebrdfs/energygainindiffusereflectance" class="level3"><span class="tocNumber">4.7.1&#xA0; </span>Energy gain in diffuse reflectance</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/improvingthebrdfs/energylossinspecularreflectance" class="level3"><span class="tocNumber">4.7.2&#xA0; </span>Energy loss in specular reflectance</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/parameterization" class="level2"><span class="tocNumber">4.8&#xA0; </span>Parameterization</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/parameterization/standardparameters" class="level3"><span class="tocNumber">4.8.1&#xA0; </span>Standard parameters</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/parameterization/typesandranges" class="level3"><span class="tocNumber">4.8.2&#xA0; </span>Types and ranges</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/parameterization/remapping" class="level3"><span class="tocNumber">4.8.3&#xA0; </span>Remapping</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/parameterization/blendingandlayering" class="level3"><span class="tocNumber">4.8.4&#xA0; </span>Blending and layering</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/parameterization/craftingphysicallybasedmaterials" class="level3"><span class="tocNumber">4.8.5&#xA0; </span>Crafting physically based materials</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/clearcoatmodel" class="level2"><span class="tocNumber">4.9&#xA0; </span>Clear coat model</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/clearcoatmodel/clearcoatspecularbrdf" class="level3"><span class="tocNumber">4.9.1&#xA0; </span>Clear coat specular BRDF</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/clearcoatmodel/integrationinthesurfaceresponse" class="level3"><span class="tocNumber">4.9.2&#xA0; </span>Integration in the surface response</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/clearcoatmodel/clearcoatparameterization" class="level3"><span class="tocNumber">4.9.3&#xA0; </span>Clear coat parameterization</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/clearcoatmodel/baselayermodification" class="level3"><span class="tocNumber">4.9.4&#xA0; </span>Base layer modification</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/anisotropicmodel" class="level2"><span class="tocNumber">4.10&#xA0; </span>Anisotropic model</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/anisotropicmodel/anisotropicspecularbrdf" class="level3"><span class="tocNumber">4.10.1&#xA0; </span>Anisotropic specular BRDF</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/anisotropicmodel/anisotropicparameterization" class="level3"><span class="tocNumber">4.10.2&#xA0; </span>Anisotropic parameterization</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/subsurfacemodel" class="level2"><span class="tocNumber">4.11&#xA0; </span>Subsurface model</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/subsurfacemodel/subsurfacespecularbrdf" class="level3"><span class="tocNumber">4.11.1&#xA0; </span>Subsurface specular BRDF</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/subsurfacemodel/subsurfaceparameterization" class="level3"><span class="tocNumber">4.11.2&#xA0; </span>Subsurface parameterization</a><br>
-&#xA0;&#xA0;<a href="#materialsystem/clothmodel" class="level2"><span class="tocNumber">4.12&#xA0; </span>Cloth model</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/clothmodel/clothspecularbrdf" class="level3"><span class="tocNumber">4.12.1&#xA0; </span>Cloth specular BRDF</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/clothmodel/clothdiffusebrdf" class="level3"><span class="tocNumber">4.12.2&#xA0; </span>Cloth diffuse BRDF</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialsystem/clothmodel/clothparameterization" class="level3"><span class="tocNumber">4.12.3&#xA0; </span>Cloth parameterization</a><br>
-<a href="#lighting" class="level1"><span class="tocNumber">5&#xA0; </span>Lighting</a><br>
-&#xA0;&#xA0;<a href="#lighting/units" class="level2"><span class="tocNumber">5.1&#xA0; </span>Units</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/units/lightunitsvalidation" class="level3"><span class="tocNumber">5.1.1&#xA0; </span>Light units validation</a><br>
-&#xA0;&#xA0;<a href="#lighting/directlighting" class="level2"><span class="tocNumber">5.2&#xA0; </span>Direct lighting</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/directlighting/directionallights" class="level3"><span class="tocNumber">5.2.1&#xA0; </span>Directional lights</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/directlighting/punctuallights" class="level3"><span class="tocNumber">5.2.2&#xA0; </span>Punctual lights</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/directlighting/photometriclights" class="level3"><span class="tocNumber">5.2.3&#xA0; </span>Photometric lights</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/directlighting/arealights" class="level3"><span class="tocNumber">5.2.4&#xA0; </span>Area lights</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/directlighting/lightsparameterization" class="level3"><span class="tocNumber">5.2.5&#xA0; </span>Lights parameterization</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/directlighting/pre-exposedlights" class="level3"><span class="tocNumber">5.2.6&#xA0; </span>Pre-exposed lights</a><br>
-&#xA0;&#xA0;<a href="#lighting/imagebasedlights" class="level2"><span class="tocNumber">5.3&#xA0; </span>Image based lights</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/imagebasedlights/ibltypes" class="level3"><span class="tocNumber">5.3.1&#xA0; </span>IBL Types</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/imagebasedlights/iblunit" class="level3"><span class="tocNumber">5.3.2&#xA0; </span>IBL Unit</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/imagebasedlights/processinglightprobes" class="level3"><span class="tocNumber">5.3.3&#xA0; </span>Processing light probes</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/imagebasedlights/distantlightprobes" class="level3"><span class="tocNumber">5.3.4&#xA0; </span>Distant light probes</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/imagebasedlights/clearcoat" class="level3"><span class="tocNumber">5.3.5&#xA0; </span>Clear coat</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/imagebasedlights/anisotropy" class="level3"><span class="tocNumber">5.3.6&#xA0; </span>Anisotropy</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/imagebasedlights/subsurface" class="level3"><span class="tocNumber">5.3.7&#xA0; </span>Subsurface</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/imagebasedlights/cloth" class="level3"><span class="tocNumber">5.3.8&#xA0; </span>Cloth</a><br>
-&#xA0;&#xA0;<a href="#lighting/staticlighting" class="level2"><span class="tocNumber">5.4&#xA0; </span>Static lighting</a><br>
-&#xA0;&#xA0;<a href="#lighting/transparencyandtranslucencylighting" class="level2"><span class="tocNumber">5.5&#xA0; </span>Transparency and translucency lighting</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/transparencyandtranslucencylighting/transparency" class="level3"><span class="tocNumber">5.5.1&#xA0; </span>Transparency</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/transparencyandtranslucencylighting/translucency" class="level3"><span class="tocNumber">5.5.2&#xA0; </span>Translucency</a><br>
-&#xA0;&#xA0;<a href="#lighting/occlusion" class="level2"><span class="tocNumber">5.6&#xA0; </span>Occlusion</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/occlusion/diffuseocclusion" class="level3"><span class="tocNumber">5.6.1&#xA0; </span>Diffuse occlusion</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/occlusion/specularocclusion" class="level3"><span class="tocNumber">5.6.2&#xA0; </span>Specular occlusion</a><br>
-&#xA0;&#xA0;<a href="#lighting/normalmapping" class="level2"><span class="tocNumber">5.7&#xA0; </span>Normal mapping</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/normalmapping/reorientednormalmapping" class="level3"><span class="tocNumber">5.7.1&#xA0; </span>Reoriented normal mapping</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#lighting/normalmapping/udnblending" class="level3"><span class="tocNumber">5.7.2&#xA0; </span>UDN blending</a><br>
-<a href="#volumetriceffects" class="level1"><span class="tocNumber">6&#xA0; </span>Volumetric effects</a><br>
-&#xA0;&#xA0;<a href="#volumetriceffects/exponentialheightfog" class="level2"><span class="tocNumber">6.1&#xA0; </span>Exponential height fog</a><br>
-<a href="#anti-aliasing" class="level1"><span class="tocNumber">7&#xA0; </span>Anti-aliasing</a><br>
-<a href="#imagingpipeline" class="level1"><span class="tocNumber">8&#xA0; </span>Imaging pipeline</a><br>
-&#xA0;&#xA0;<a href="#imagingpipeline/physicallybasedcamera" class="level2"><span class="tocNumber">8.1&#xA0; </span>Physically based camera</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/physicallybasedcamera/exposuresettings" class="level3"><span class="tocNumber">8.1.1&#xA0; </span>Exposure settings</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/physicallybasedcamera/exposurevalue" class="level3"><span class="tocNumber">8.1.2&#xA0; </span>Exposure value</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/physicallybasedcamera/exposure" class="level3"><span class="tocNumber">8.1.3&#xA0; </span>Exposure</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/physicallybasedcamera/automaticexposure" class="level3"><span class="tocNumber">8.1.4&#xA0; </span>Automatic exposure</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/physicallybasedcamera/bloom" class="level3"><span class="tocNumber">8.1.5&#xA0; </span>Bloom</a><br>
-&#xA0;&#xA0;<a href="#imagingpipeline/opticspost-processing" class="level2"><span class="tocNumber">8.2&#xA0; </span>Optics post-processing</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/opticspost-processing/colorfringing" class="level3"><span class="tocNumber">8.2.1&#xA0; </span>Color fringing</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/opticspost-processing/lensflares" class="level3"><span class="tocNumber">8.2.2&#xA0; </span>Lens flares</a><br>
-&#xA0;&#xA0;<a href="#imagingpipeline/filmicpost-processing" class="level2"><span class="tocNumber">8.3&#xA0; </span>Filmic post-processing</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/filmicpost-processing/contrast" class="level3"><span class="tocNumber">8.3.1&#xA0; </span>Contrast</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/filmicpost-processing/curves" class="level3"><span class="tocNumber">8.3.2&#xA0; </span>Curves</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/filmicpost-processing/levels" class="level3"><span class="tocNumber">8.3.3&#xA0; </span>Levels</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/filmicpost-processing/colorgrading" class="level3"><span class="tocNumber">8.3.4&#xA0; </span>Color grading</a><br>
-&#xA0;&#xA0;<a href="#imagingpipeline/lightpath" class="level2"><span class="tocNumber">8.4&#xA0; </span>Light path</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/lightpath/clusteredforwardrendering" class="level3"><span class="tocNumber">8.4.1&#xA0; </span>Clustered Forward Rendering</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/lightpath/implementationnotes" class="level3"><span class="tocNumber">8.4.2&#xA0; </span>Implementation notes</a><br>
-&#xA0;&#xA0;<a href="#imagingpipeline/validation" class="level2"><span class="tocNumber">8.5&#xA0; </span>Validation</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/validation/scenereferredvisualization" class="level3"><span class="tocNumber">8.5.1&#xA0; </span>Scene referred visualization</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/validation/referencerenderings" class="level3"><span class="tocNumber">8.5.2&#xA0; </span>Reference renderings</a><br>
-&#xA0;&#xA0;<a href="#imagingpipeline/coordinatessystems" class="level2"><span class="tocNumber">8.6&#xA0; </span>Coordinates systems</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/coordinatessystems/worldcoordinatessystem" class="level3"><span class="tocNumber">8.6.1&#xA0; </span>World coordinates system</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/coordinatessystems/cameracoordinatessystem" class="level3"><span class="tocNumber">8.6.2&#xA0; </span>Camera coordinates system</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#imagingpipeline/coordinatessystems/cubemapscoordinatessystem" class="level3"><span class="tocNumber">8.6.3&#xA0; </span>Cubemaps coordinates system</a><br>
-<a href="#annex" class="level1"><span class="tocNumber">9&#xA0; </span>Annex</a><br>
-&#xA0;&#xA0;<a href="#annex/specularcolor" class="level2"><span class="tocNumber">9.1&#xA0; </span>Specular color</a><br>
-&#xA0;&#xA0;<a href="#annex/importancesamplingfortheibl" class="level2"><span class="tocNumber">9.2&#xA0; </span>Importance sampling for the IBL</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#annex/importancesamplingfortheibl/choosingimportantdirections" class="level3"><span class="tocNumber">9.2.1&#xA0; </span>Choosing important directions</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#annex/importancesamplingfortheibl/pre-filteredimportancesampling" class="level3"><span class="tocNumber">9.2.2&#xA0; </span>Pre-filtered importance sampling</a><br>
-&#xA0;&#xA0;<a href="#annex/choosingimportantdirectionsforsamplingthebrdf" class="level2"><span class="tocNumber">9.3&#xA0; </span>Choosing important directions for sampling the BRDF</a><br>
-&#xA0;&#xA0;<a href="#annex/hammersleysequence" class="level2"><span class="tocNumber">9.4&#xA0; </span>Hammersley sequence</a><br>
-&#xA0;&#xA0;<a href="#annex/precomputinglforimage-basedlighting" class="level2"><span class="tocNumber">9.5&#xA0; </span>Precomputing L for image-based lighting</a><br>
-&#xA0;&#xA0;<a href="#annex/sphericalharmonics" class="level2"><span class="tocNumber">9.6&#xA0; </span>Spherical Harmonics</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#annex/sphericalharmonics/basisfunctions" class="level3"><span class="tocNumber">9.6.1&#xA0; </span>Basis functions</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#annex/sphericalharmonics/decompositionandreconstruction" class="level3"><span class="tocNumber">9.6.2&#xA0; </span>Decomposition and reconstruction</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#annex/sphericalharmonics/decompositionof%5C(%5Cleft%5C)" class="level3"><span class="tocNumber">9.6.3&#xA0; </span>Decomposition of \(\left&lt; cos \theta \right&gt;\)</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#annex/sphericalharmonics/convolution" class="level3"><span class="tocNumber">9.6.4&#xA0; </span>Convolution</a><br>
-&#xA0;&#xA0;<a href="#annex/samplevalidationsceneformitsuba" class="level2"><span class="tocNumber">9.7&#xA0; </span>Sample validation scene for Mitsuba</a><br>
-&#xA0;&#xA0;<a href="#annex/lightassignmentwithfroxels" class="level2"><span class="tocNumber">9.8&#xA0; </span>Light assignment with froxels</a><br>
-<a href="#revisions" class="level1"><span class="tocNumber">10&#xA0; </span>Revisions</a><br>
-<a href="#bibliography" class="level1"><span class="tocNumber">11&#xA0; </span>Bibliography</a><br>
-</p></div><a class="target" name="about">&#xA0;</a><a class="target" name="about">&#xA0;</a><a class="target" name="toc1">&#xA0;</a><h1>About</h1>
+<div class="longTOC"><div class="tocHeader">Contents</div><p><a href="#about" class="level1"><span class="tocNumber">1&nbsp; </span>About</a><br>
+&nbsp;&nbsp;<a href="#about/authors" class="level2"><span class="tocNumber">1.1&nbsp; </span>Authors</a><br>
+<a href="#overview" class="level1"><span class="tocNumber">2&nbsp; </span>Overview</a><br>
+&nbsp;&nbsp;<a href="#overview/principles" class="level2"><span class="tocNumber">2.1&nbsp; </span>Principles</a><br>
+&nbsp;&nbsp;<a href="#overview/physicallybasedrendering" class="level2"><span class="tocNumber">2.2&nbsp; </span>Physically based rendering</a><br>
+<a href="#notation" class="level1"><span class="tocNumber">3&nbsp; </span>Notation</a><br>
+<a href="#materialsystem" class="level1"><span class="tocNumber">4&nbsp; </span>Material system</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/standardmodel" class="level2"><span class="tocNumber">4.1&nbsp; </span>Standard model</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/dielectricsandconductors" class="level2"><span class="tocNumber">4.2&nbsp; </span>Dielectrics and conductors</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/energyconservation" class="level2"><span class="tocNumber">4.3&nbsp; </span>Energy conservation</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/specularbrdf" class="level2"><span class="tocNumber">4.4&nbsp; </span>Specular BRDF</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/specularbrdf/normaldistributionfunction(speculard)" class="level3"><span class="tocNumber">4.4.1&nbsp; </span>Normal distribution function (specular D)</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/specularbrdf/geometricshadowing(specularg)" class="level3"><span class="tocNumber">4.4.2&nbsp; </span>Geometric shadowing (specular G)</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/specularbrdf/fresnel(specularf)" class="level3"><span class="tocNumber">4.4.3&nbsp; </span>Fresnel (specular F)</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/diffusebrdf" class="level2"><span class="tocNumber">4.5&nbsp; </span>Diffuse BRDF</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/standardmodelsummary" class="level2"><span class="tocNumber">4.6&nbsp; </span>Standard model summary</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/improvingthebrdfs" class="level2"><span class="tocNumber">4.7&nbsp; </span>Improving the BRDFs</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/improvingthebrdfs/energygainindiffusereflectance" class="level3"><span class="tocNumber">4.7.1&nbsp; </span>Energy gain in diffuse reflectance</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/improvingthebrdfs/energylossinspecularreflectance" class="level3"><span class="tocNumber">4.7.2&nbsp; </span>Energy loss in specular reflectance</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/parameterization" class="level2"><span class="tocNumber">4.8&nbsp; </span>Parameterization</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/parameterization/standardparameters" class="level3"><span class="tocNumber">4.8.1&nbsp; </span>Standard parameters</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/parameterization/typesandranges" class="level3"><span class="tocNumber">4.8.2&nbsp; </span>Types and ranges</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/parameterization/remapping" class="level3"><span class="tocNumber">4.8.3&nbsp; </span>Remapping</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/parameterization/blendingandlayering" class="level3"><span class="tocNumber">4.8.4&nbsp; </span>Blending and layering</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/parameterization/craftingphysicallybasedmaterials" class="level3"><span class="tocNumber">4.8.5&nbsp; </span>Crafting physically based materials</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/clearcoatmodel" class="level2"><span class="tocNumber">4.9&nbsp; </span>Clear coat model</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/clearcoatmodel/clearcoatspecularbrdf" class="level3"><span class="tocNumber">4.9.1&nbsp; </span>Clear coat specular BRDF</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/clearcoatmodel/integrationinthesurfaceresponse" class="level3"><span class="tocNumber">4.9.2&nbsp; </span>Integration in the surface response</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/clearcoatmodel/clearcoatparameterization" class="level3"><span class="tocNumber">4.9.3&nbsp; </span>Clear coat parameterization</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/clearcoatmodel/baselayermodification" class="level3"><span class="tocNumber">4.9.4&nbsp; </span>Base layer modification</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/anisotropicmodel" class="level2"><span class="tocNumber">4.10&nbsp; </span>Anisotropic model</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/anisotropicmodel/anisotropicspecularbrdf" class="level3"><span class="tocNumber">4.10.1&nbsp; </span>Anisotropic specular BRDF</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/anisotropicmodel/anisotropicparameterization" class="level3"><span class="tocNumber">4.10.2&nbsp; </span>Anisotropic parameterization</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/subsurfacemodel" class="level2"><span class="tocNumber">4.11&nbsp; </span>Subsurface model</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/subsurfacemodel/subsurfacespecularbrdf" class="level3"><span class="tocNumber">4.11.1&nbsp; </span>Subsurface specular BRDF</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/subsurfacemodel/subsurfaceparameterization" class="level3"><span class="tocNumber">4.11.2&nbsp; </span>Subsurface parameterization</a><br>
+&nbsp;&nbsp;<a href="#materialsystem/clothmodel" class="level2"><span class="tocNumber">4.12&nbsp; </span>Cloth model</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/clothmodel/clothspecularbrdf" class="level3"><span class="tocNumber">4.12.1&nbsp; </span>Cloth specular BRDF</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/clothmodel/clothdiffusebrdf" class="level3"><span class="tocNumber">4.12.2&nbsp; </span>Cloth diffuse BRDF</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialsystem/clothmodel/clothparameterization" class="level3"><span class="tocNumber">4.12.3&nbsp; </span>Cloth parameterization</a><br>
+<a href="#lighting" class="level1"><span class="tocNumber">5&nbsp; </span>Lighting</a><br>
+&nbsp;&nbsp;<a href="#lighting/units" class="level2"><span class="tocNumber">5.1&nbsp; </span>Units</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/units/lightunitsvalidation" class="level3"><span class="tocNumber">5.1.1&nbsp; </span>Light units validation</a><br>
+&nbsp;&nbsp;<a href="#lighting/directlighting" class="level2"><span class="tocNumber">5.2&nbsp; </span>Direct lighting</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/directlighting/directionallights" class="level3"><span class="tocNumber">5.2.1&nbsp; </span>Directional lights</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/directlighting/punctuallights" class="level3"><span class="tocNumber">5.2.2&nbsp; </span>Punctual lights</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/directlighting/photometriclights" class="level3"><span class="tocNumber">5.2.3&nbsp; </span>Photometric lights</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/directlighting/arealights" class="level3"><span class="tocNumber">5.2.4&nbsp; </span>Area lights</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/directlighting/lightsparameterization" class="level3"><span class="tocNumber">5.2.5&nbsp; </span>Lights parameterization</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/directlighting/pre-exposedlights" class="level3"><span class="tocNumber">5.2.6&nbsp; </span>Pre-exposed lights</a><br>
+&nbsp;&nbsp;<a href="#lighting/imagebasedlights" class="level2"><span class="tocNumber">5.3&nbsp; </span>Image based lights</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/imagebasedlights/ibltypes" class="level3"><span class="tocNumber">5.3.1&nbsp; </span>IBL Types</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/imagebasedlights/iblunit" class="level3"><span class="tocNumber">5.3.2&nbsp; </span>IBL Unit</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/imagebasedlights/processinglightprobes" class="level3"><span class="tocNumber">5.3.3&nbsp; </span>Processing light probes</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/imagebasedlights/distantlightprobes" class="level3"><span class="tocNumber">5.3.4&nbsp; </span>Distant light probes</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/imagebasedlights/clearcoat" class="level3"><span class="tocNumber">5.3.5&nbsp; </span>Clear coat</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/imagebasedlights/anisotropy" class="level3"><span class="tocNumber">5.3.6&nbsp; </span>Anisotropy</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/imagebasedlights/subsurface" class="level3"><span class="tocNumber">5.3.7&nbsp; </span>Subsurface</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/imagebasedlights/cloth" class="level3"><span class="tocNumber">5.3.8&nbsp; </span>Cloth</a><br>
+&nbsp;&nbsp;<a href="#lighting/staticlighting" class="level2"><span class="tocNumber">5.4&nbsp; </span>Static lighting</a><br>
+&nbsp;&nbsp;<a href="#lighting/transparencyandtranslucencylighting" class="level2"><span class="tocNumber">5.5&nbsp; </span>Transparency and translucency lighting</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/transparencyandtranslucencylighting/transparency" class="level3"><span class="tocNumber">5.5.1&nbsp; </span>Transparency</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/transparencyandtranslucencylighting/translucency" class="level3"><span class="tocNumber">5.5.2&nbsp; </span>Translucency</a><br>
+&nbsp;&nbsp;<a href="#lighting/occlusion" class="level2"><span class="tocNumber">5.6&nbsp; </span>Occlusion</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/occlusion/diffuseocclusion" class="level3"><span class="tocNumber">5.6.1&nbsp; </span>Diffuse occlusion</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/occlusion/specularocclusion" class="level3"><span class="tocNumber">5.6.2&nbsp; </span>Specular occlusion</a><br>
+&nbsp;&nbsp;<a href="#lighting/normalmapping" class="level2"><span class="tocNumber">5.7&nbsp; </span>Normal mapping</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/normalmapping/reorientednormalmapping" class="level3"><span class="tocNumber">5.7.1&nbsp; </span>Reoriented normal mapping</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#lighting/normalmapping/udnblending" class="level3"><span class="tocNumber">5.7.2&nbsp; </span>UDN blending</a><br>
+<a href="#volumetriceffects" class="level1"><span class="tocNumber">6&nbsp; </span>Volumetric effects</a><br>
+&nbsp;&nbsp;<a href="#volumetriceffects/exponentialheightfog" class="level2"><span class="tocNumber">6.1&nbsp; </span>Exponential height fog</a><br>
+<a href="#anti-aliasing" class="level1"><span class="tocNumber">7&nbsp; </span>Anti-aliasing</a><br>
+<a href="#imagingpipeline" class="level1"><span class="tocNumber">8&nbsp; </span>Imaging pipeline</a><br>
+&nbsp;&nbsp;<a href="#imagingpipeline/physicallybasedcamera" class="level2"><span class="tocNumber">8.1&nbsp; </span>Physically based camera</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/physicallybasedcamera/exposuresettings" class="level3"><span class="tocNumber">8.1.1&nbsp; </span>Exposure settings</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/physicallybasedcamera/exposurevalue" class="level3"><span class="tocNumber">8.1.2&nbsp; </span>Exposure value</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/physicallybasedcamera/exposure" class="level3"><span class="tocNumber">8.1.3&nbsp; </span>Exposure</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/physicallybasedcamera/automaticexposure" class="level3"><span class="tocNumber">8.1.4&nbsp; </span>Automatic exposure</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/physicallybasedcamera/bloom" class="level3"><span class="tocNumber">8.1.5&nbsp; </span>Bloom</a><br>
+&nbsp;&nbsp;<a href="#imagingpipeline/opticspost-processing" class="level2"><span class="tocNumber">8.2&nbsp; </span>Optics post-processing</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/opticspost-processing/colorfringing" class="level3"><span class="tocNumber">8.2.1&nbsp; </span>Color fringing</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/opticspost-processing/lensflares" class="level3"><span class="tocNumber">8.2.2&nbsp; </span>Lens flares</a><br>
+&nbsp;&nbsp;<a href="#imagingpipeline/filmicpost-processing" class="level2"><span class="tocNumber">8.3&nbsp; </span>Filmic post-processing</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/filmicpost-processing/contrast" class="level3"><span class="tocNumber">8.3.1&nbsp; </span>Contrast</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/filmicpost-processing/curves" class="level3"><span class="tocNumber">8.3.2&nbsp; </span>Curves</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/filmicpost-processing/levels" class="level3"><span class="tocNumber">8.3.3&nbsp; </span>Levels</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/filmicpost-processing/colorgrading" class="level3"><span class="tocNumber">8.3.4&nbsp; </span>Color grading</a><br>
+&nbsp;&nbsp;<a href="#imagingpipeline/lightpath" class="level2"><span class="tocNumber">8.4&nbsp; </span>Light path</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/lightpath/clusteredforwardrendering" class="level3"><span class="tocNumber">8.4.1&nbsp; </span>Clustered Forward Rendering</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/lightpath/implementationnotes" class="level3"><span class="tocNumber">8.4.2&nbsp; </span>Implementation notes</a><br>
+&nbsp;&nbsp;<a href="#imagingpipeline/validation" class="level2"><span class="tocNumber">8.5&nbsp; </span>Validation</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/validation/scenereferredvisualization" class="level3"><span class="tocNumber">8.5.1&nbsp; </span>Scene referred visualization</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/validation/referencerenderings" class="level3"><span class="tocNumber">8.5.2&nbsp; </span>Reference renderings</a><br>
+&nbsp;&nbsp;<a href="#imagingpipeline/coordinatessystems" class="level2"><span class="tocNumber">8.6&nbsp; </span>Coordinates systems</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/coordinatessystems/worldcoordinatessystem" class="level3"><span class="tocNumber">8.6.1&nbsp; </span>World coordinates system</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/coordinatessystems/cameracoordinatessystem" class="level3"><span class="tocNumber">8.6.2&nbsp; </span>Camera coordinates system</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#imagingpipeline/coordinatessystems/cubemapscoordinatessystem" class="level3"><span class="tocNumber">8.6.3&nbsp; </span>Cubemaps coordinates system</a><br>
+<a href="#annex" class="level1"><span class="tocNumber">9&nbsp; </span>Annex</a><br>
+&nbsp;&nbsp;<a href="#annex/specularcolor" class="level2"><span class="tocNumber">9.1&nbsp; </span>Specular color</a><br>
+&nbsp;&nbsp;<a href="#annex/importancesamplingfortheibl" class="level2"><span class="tocNumber">9.2&nbsp; </span>Importance sampling for the IBL</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#annex/importancesamplingfortheibl/choosingimportantdirections" class="level3"><span class="tocNumber">9.2.1&nbsp; </span>Choosing important directions</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#annex/importancesamplingfortheibl/pre-filteredimportancesampling" class="level3"><span class="tocNumber">9.2.2&nbsp; </span>Pre-filtered importance sampling</a><br>
+&nbsp;&nbsp;<a href="#annex/choosingimportantdirectionsforsamplingthebrdf" class="level2"><span class="tocNumber">9.3&nbsp; </span>Choosing important directions for sampling the BRDF</a><br>
+&nbsp;&nbsp;<a href="#annex/hammersleysequence" class="level2"><span class="tocNumber">9.4&nbsp; </span>Hammersley sequence</a><br>
+&nbsp;&nbsp;<a href="#annex/precomputinglforimage-basedlighting" class="level2"><span class="tocNumber">9.5&nbsp; </span>Precomputing L for image-based lighting</a><br>
+&nbsp;&nbsp;<a href="#annex/sphericalharmonics" class="level2"><span class="tocNumber">9.6&nbsp; </span>Spherical Harmonics</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#annex/sphericalharmonics/basisfunctions" class="level3"><span class="tocNumber">9.6.1&nbsp; </span>Basis functions</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#annex/sphericalharmonics/decompositionandreconstruction" class="level3"><span class="tocNumber">9.6.2&nbsp; </span>Decomposition and reconstruction</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#annex/sphericalharmonics/decompositionof%5C(%5Cleft%5C)" class="level3"><span class="tocNumber">9.6.3&nbsp; </span>Decomposition of \(\left&lt; cos \theta \right&gt;\)</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#annex/sphericalharmonics/convolution" class="level3"><span class="tocNumber">9.6.4&nbsp; </span>Convolution</a><br>
+&nbsp;&nbsp;<a href="#annex/samplevalidationsceneformitsuba" class="level2"><span class="tocNumber">9.7&nbsp; </span>Sample validation scene for Mitsuba</a><br>
+&nbsp;&nbsp;<a href="#annex/lightassignmentwithfroxels" class="level2"><span class="tocNumber">9.8&nbsp; </span>Light assignment with froxels</a><br>
+<a href="#revisions" class="level1"><span class="tocNumber">10&nbsp; </span>Revisions</a><br>
+<a href="#bibliography" class="level1"><span class="tocNumber">11&nbsp; </span>Bibliography</a><br>
+</p></div><a class="target" name="about">&nbsp;</a><a class="target" name="about">&nbsp;</a><a class="target" name="toc1">&nbsp;</a><h1>About</h1>
 <p>
 
 
-This document is part of the <a href="https://github.com/google/filament">Filament project</a>. To report errors in this document please use the <a href="https://github.com/google/filament/issues">project&apos;s issue tracker</a>.
+This document is part of the <a href="https://github.com/google/filament">Filament project</a>. To report errors in this document please use the <a href="https://github.com/google/filament/issues">project's issue tracker</a>.
 
 </p>
-<a class="target" name="authors">&#xA0;</a><a class="target" name="about/authors">&#xA0;</a><a class="target" name="toc1.1">&#xA0;</a><h2>Authors</h2>
+<a class="target" name="authors">&nbsp;</a><a class="target" name="about/authors">&nbsp;</a><a class="target" name="toc1.1">&nbsp;</a><h2>Authors</h2>
 <p>
 
 
@@ -161,7 +161,7 @@ This document is part of the <a href="https://github.com/google/filament">Filame
 <li class="minus"><a href="https://github.com/pixelflinger">Mathias Agopian</a>, <a href="https://twitter.com/darthmoosious">@darthmoosious</a></li></ul>
 
 <p></p>
-<a class="target" name="overview">&#xA0;</a><a class="target" name="overview">&#xA0;</a><a class="target" name="toc2">&#xA0;</a><h1>Overview</h1>
+<a class="target" name="overview">&nbsp;</a><a class="target" name="overview">&nbsp;</a><a class="target" name="toc2">&nbsp;</a><h1>Overview</h1>
 <p>
 
 
@@ -180,11 +180,11 @@ This document is not intended as a design document. It focuses solely on algorit
 Unless noted otherwise, all the 3D renderings present in this document have been generated in-engine (prototype or production). Many of these 3D renderings were captured during the early stages of development of Filament and do not reflect the final quality.
 
 </p>
-<a class="target" name="principles">&#xA0;</a><a class="target" name="overview/principles">&#xA0;</a><a class="target" name="toc2.1">&#xA0;</a><h2>Principles</h2>
+<a class="target" name="principles">&nbsp;</a><a class="target" name="overview/principles">&nbsp;</a><a class="target" name="toc2.1">&nbsp;</a><h2>Principles</h2>
 <p>
 
 
-Real-time rendering is an active area of research and there is a large number of equations, algorithms and implementation to choose from for every single feature that needs to be implemented (the book <em class="asterisk">Rendering real-time shadows</em>, for instance, is a 400 pages summary of dozens of shadows rendering techniques). As such, we must first define our goals (or principles, to follow Brent Burley&apos;s seminal paper Physically-based shading at Disney [<a href="#citation-burley12">Burley12</a>]) before we can make informed decisions.
+Real-time rendering is an active area of research and there is a large number of equations, algorithms and implementation to choose from for every single feature that needs to be implemented (the book <em class="asterisk">Rendering real-time shadows</em>, for instance, is a 400 pages summary of dozens of shadows rendering techniques). As such, we must first define our goals (or principles, to follow Brent Burley's seminal paper Physically-based shading at Disney [<a href="#citation-burley12">Burley12</a>]) before we can make informed decisions.
 
 </p><p>
 
@@ -213,7 +213,7 @@ Real-time rendering is an active area of research and there is a large number of
 </p></dd><dt>Deployment size</dt><dd><p>    While not directly related to the content of this document, it bears emphasizing our desire to keep the rendering library as small as possible so any application can bundle it without increasing the binary to undesirable sizes.
 
 </p></dd></dl><p></p>
-<a class="target" name="physicallybasedrendering">&#xA0;</a><a class="target" name="overview/physicallybasedrendering">&#xA0;</a><a class="target" name="toc2.2">&#xA0;</a><h2>Physically based rendering</h2>
+<a class="target" name="physicallybasedrendering">&nbsp;</a><a class="target" name="overview/physicallybasedrendering">&nbsp;</a><a class="target" name="toc2.2">&nbsp;</a><h2>Physically based rendering</h2>
 <p>
 
 
@@ -224,7 +224,7 @@ We chose to adopt PBR for its benefits from an artistic and production efficient
 Physically based rendering is a rendering method that provides a more accurate representation of materials and how they interact with light when compared to traditional real-time models. The separation of materials and lighting at the core of the PBR method makes it easier to create realistic assets that look accurate in all lighting conditions.
 
 </p>
-<a class="target" name="notation">&#xA0;</a><a class="target" name="notation">&#xA0;</a><a class="target" name="toc3">&#xA0;</a><h1>Notation</h1>
+<a class="target" name="notation">&nbsp;</a><a class="target" name="notation">&nbsp;</a><a class="target" name="toc3">&nbsp;</a><h1>Notation</h1>
 <p>
 
 
@@ -250,7 +250,7 @@ $$
 
 </p><p>
 
-The equations found throughout this document use the symbols described in <a href="#table_symbols">table&#xA0;1</a>.
+The equations found throughout this document use the symbols described in <a href="#table_symbols">table&nbsp;1</a>.
 
 </p><p>
 
@@ -272,17 +272,17 @@ The equations found throughout this document use the symbols described in <a hre
 <tr><td style="text-align:center"> \(n_{ior}\) </td><td style="text-align:left"> Index of refraction (IOR) of an interface </td></tr>
 <tr><td style="text-align:center"> \(\left&lt; \NoL \right&gt;\) </td><td style="text-align:left"> Dot product clamped to [0..1] </td></tr>
 <tr><td style="text-align:center"> \(\left&lt; a \right&gt;\) </td><td style="text-align:left"> Saturated value (clamped to [0..1]) </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_symbols">&#xA0;</a><b style="font-style:normal;">Table&#xA0;1:</b> Symbols definitions</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_symbols">&nbsp;</a><b style="font-style:normal;">Table&nbsp;1:</b> Symbols definitions</div></div>
 
 <p></p>
-<a class="target" name="materialsystem">&#xA0;</a><a class="target" name="materialsystem">&#xA0;</a><a class="target" name="toc4">&#xA0;</a><h1>Material system</h1>
+<a class="target" name="materialsystem">&nbsp;</a><a class="target" name="materialsystem">&nbsp;</a><a class="target" name="toc4">&nbsp;</a><h1>Material system</h1>
 <p>
 
 
 The sections below describe multiple material models to simplify the description of various surface features such as anisotropy or the clear coat layer. In practice however some of these models are condensed into a single one. For instance, the standard model, the clear coat model and the anisotropic model can be combined to form a single, more flexible and powerful model. Please refer to the <a href="./Materials.md.html">Materials documentation</a> to get a description of the material models as implemented in Filament.
 
 </p>
-<a class="target" name="standardmodel">&#xA0;</a><a class="target" name="materialsystem/standardmodel">&#xA0;</a><a class="target" name="toc4.1">&#xA0;</a><h2>Standard model</h2>
+<a class="target" name="standardmodel">&nbsp;</a><a class="target" name="materialsystem/standardmodel">&nbsp;</a><a class="target" name="toc4.1">&nbsp;</a><h2>Standard model</h2>
 <p>
 
 
@@ -305,11 +305,11 @@ The BRDF describes the surface response of a standard material as a function mad
 
 <p></p><p>
 
-The relationship between a surface, the surface normal, incident light and these terms is shown in <a href="#figure_frfd">figure&#xA0;1</a> (we ignore subsurface scattering for now):
+The relationship between a surface, the surface normal, incident light and these terms is shown in <a href="#figure_frfd">figure&nbsp;1</a> (we ignore subsurface scattering for now):
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_fr_fd.png" target="_blank"><img class="markdeep" src="images/diagram_fr_fd.png"></a><div class="imagecaption"><a class="target" name="figure_frfd">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;1:</b> Interaction of the light with a surface using BRDF model with a diffuse term \( f_d \) and a specular term \( f_r \)</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_fr_fd.png" target="_blank"><img class="markdeep" src="images/diagram_fr_fd.png"></a><div class="imagecaption"><a class="target" name="figure_frfd">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;1:</b> Interaction of the light with a surface using BRDF model with a diffuse term \( f_d \) and a specular term \( f_r \)</div></div></center>
 
 <p></p><p>
 
@@ -331,27 +331,27 @@ Commonly encountered surfaces are usually not made of a flat interface so we nee
 
 </p><p>
 
-A microfacet BRDF is a good physically plausible BRDF for that purpose. Such BRDF states that surfaces are not smooth at a micro level, but made of a large number of randomly aligned planar surface fragments, called microfacets. <a href="#figure_microfacetvsflat">Figure&#xA0;2</a> shows the difference between a flat interface and an irregular interface at a micro level:
+A microfacet BRDF is a good physically plausible BRDF for that purpose. Such BRDF states that surfaces are not smooth at a micro level, but made of a large number of randomly aligned planar surface fragments, called microfacets. <a href="#figure_microfacetvsflat">Figure&nbsp;2</a> shows the difference between a flat interface and an irregular interface at a micro level:
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_microfacet.png" target="_blank"><img class="markdeep" src="images/diagram_microfacet.png"></a><div class="imagecaption"><a class="target" name="figure_microfacetvsflat">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;2:</b> Irregular interface as modeled by a microfacet model (left) and flat interface (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_microfacet.png" target="_blank"><img class="markdeep" src="images/diagram_microfacet.png"></a><div class="imagecaption"><a class="target" name="figure_microfacetvsflat">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;2:</b> Irregular interface as modeled by a microfacet model (left) and flat interface (right)</div></div></center>
 
 <p></p><p>
 
-Only the microfacets whose normal is oriented halfway between the light direction and the view direction will reflect visible light, as shown in <a href="#figure_microfacets">figure&#xA0;3</a>.
+Only the microfacets whose normal is oriented halfway between the light direction and the view direction will reflect visible light, as shown in <a href="#figure_microfacets">figure&nbsp;3</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_macrosurface.png" target="_blank"><img class="markdeep" src="images/diagram_macrosurface.png"></a><div class="imagecaption"><a class="target" name="figure_microfacets">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;3:</b> Microfacets</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_macrosurface.png" target="_blank"><img class="markdeep" src="images/diagram_macrosurface.png"></a><div class="imagecaption"><a class="target" name="figure_microfacets">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;3:</b> Microfacets</div></div></center>
 
 <p></p><p>
 
-However, not all microfacets with a properly oriented normal will contribute reflected light as the BRDF takes into account masking and shadowing. This is illustrated in <a href="#figure_microfacetshadowing">figure&#xA0;4</a>.
+However, not all microfacets with a properly oriented normal will contribute reflected light as the BRDF takes into account masking and shadowing. This is illustrated in <a href="#figure_microfacetshadowing">figure&nbsp;4</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_shadowing_masking.png" target="_blank"><img class="markdeep" src="images/diagram_shadowing_masking.png"></a><div class="imagecaption"><a class="target" name="figure_microfacetshadowing">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;4:</b> Masking and shadowing of microfacets</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_shadowing_masking.png" target="_blank"><img class="markdeep" src="images/diagram_shadowing_masking.png"></a><div class="imagecaption"><a class="target" name="figure_microfacetshadowing">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;4:</b> Masking and shadowing of microfacets</div></div></center>
 
 <p></p><p>
 
@@ -359,11 +359,11 @@ A microfacet BRDF is heavily influenced by a <em class="underscore">roughness</e
 
 </p><p>
 
-<a href="#figure_roughness">Figure&#xA0;5</a> shows surfaces of different roughness and how light interacts with them.
+<a href="#figure_roughness">Figure&nbsp;5</a> shows surfaces of different roughness and how light interacts with them.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_roughness.png" target="_blank"><img class="markdeep" src="images/diagram_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_roughness">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;5:</b> Varying roughness (from left to right, rough to smooth) and the resulting BRDF specular component lobe</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_roughness.png" target="_blank"><img class="markdeep" src="images/diagram_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_roughness">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;5:</b> Varying roughness (from left to right, rough to smooth) and the resulting BRDF specular component lobe</div></div></center>
 
 <p></p><p>
 
@@ -386,7 +386,7 @@ $$\begin{equation}
 
 </p><p>
 
-The term \(D\) models the distribution of the microfacets (this term is also referred to as the NDF or Normal Distribution Function). This term plays a primordial role in the appearance of surfaces as shown in <a href="#figure_roughness">figure&#xA0;5</a>.
+The term \(D\) models the distribution of the microfacets (this term is also referred to as the NDF or Normal Distribution Function). This term plays a primordial role in the appearance of surfaces as shown in <a href="#figure_roughness">figure&nbsp;5</a>.
 
 </p><p>
 
@@ -402,7 +402,7 @@ It is important to note that this equation is used to integrate over the hemisph
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_micro_vs_macro.png" target="_blank"><img class="markdeep" src="images/diagram_micro_vs_macro.png"></a><div class="imagecaption"><a class="target" name="figure_microlevel">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;6:</b> Modeling the surface response at a single point requires an integration at the micro level</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_micro_vs_macro.png" target="_blank"><img class="markdeep" src="images/diagram_micro_vs_macro.png"></a><div class="imagecaption"><a class="target" name="figure_microlevel">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;6:</b> Modeling the surface response at a single point requires an integration at the micro level</div></div></center>
 
 <p></p><p>
 
@@ -417,7 +417,7 @@ At a micro level however, the surface is not flat and we cannot assume a single
 It is obviously not practical to compute the full integration over the microfacets hemisphere for each shaded fragment. We will therefore rely on approximations of the integration for both the specular and diffuse components.
 
 </p>
-<a class="target" name="dielectricsandconductors">&#xA0;</a><a class="target" name="materialsystem/dielectricsandconductors">&#xA0;</a><a class="target" name="toc4.2">&#xA0;</a><h2>Dielectrics and conductors</h2>
+<a class="target" name="dielectricsandconductors">&nbsp;</a><a class="target" name="materialsystem/dielectricsandconductors">&nbsp;</a><a class="target" name="toc4.2">&nbsp;</a><h2>Dielectrics and conductors</h2>
 <p>
 
 
@@ -425,19 +425,19 @@ To better understand some of the equations and behaviors shown below, we must fi
 
 </p><p>
 
-We saw earlier that when incident light hits a surface governed by a BRDF, the light is reflected as two separate components: the diffuse reflectance and the specular reflectance. The modelization of this behavior is straightforward as shown in <a href="#figure_bsdfbrdf">figure&#xA0;7</a>.
+We saw earlier that when incident light hits a surface governed by a BRDF, the light is reflected as two separate components: the diffuse reflectance and the specular reflectance. The modelization of this behavior is straightforward as shown in <a href="#figure_bsdfbrdf">figure&nbsp;7</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_fr_fd.png" target="_blank"><img class="markdeep" src="images/diagram_fr_fd.png"></a><div class="imagecaption"><a class="target" name="figure_bsdfbrdf">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;7:</b> Modelization of the BRDF part of a BSDF</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_fr_fd.png" target="_blank"><img class="markdeep" src="images/diagram_fr_fd.png"></a><div class="imagecaption"><a class="target" name="figure_bsdfbrdf">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;7:</b> Modelization of the BRDF part of a BSDF</div></div></center>
 
 <p></p><p>
 
-This modelization is a simplification of how the light actually interacts with the surface. In reality, part of the incident light will penetrate the surface, scatter inside, and exit the surface again as diffuse reflectance. This phenomenon is illustrated in <a href="#figure_diffusescattering">figure&#xA0;8</a>.
+This modelization is a simplification of how the light actually interacts with the surface. In reality, part of the incident light will penetrate the surface, scatter inside, and exit the surface again as diffuse reflectance. This phenomenon is illustrated in <a href="#figure_diffusescattering">figure&nbsp;8</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_scattering.png" target="_blank"><img class="markdeep" src="images/diagram_scattering.png"></a><div class="imagecaption"><a class="target" name="figure_diffusescattering">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;8:</b> Scattering of diffuse light</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_scattering.png" target="_blank"><img class="markdeep" src="images/diagram_scattering.png"></a><div class="imagecaption"><a class="target" name="figure_diffusescattering">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;8:</b> Scattering of diffuse light</div></div></center>
 
 <p></p><p>
 
@@ -445,21 +445,21 @@ Here lies the difference between conductors and dielectrics. There is no subsurf
 
 </p><p>
 
-To properly modelize the BRDF we must therefore distinguish between dielectrics and conductors (scattering not shown for clarity), as shown in <a href="#figure_dielectricconductor">figure&#xA0;9</a>.
+To properly modelize the BRDF we must therefore distinguish between dielectrics and conductors (scattering not shown for clarity), as shown in <a href="#figure_dielectricconductor">figure&nbsp;9</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_brdf_dielectric_conductor.png" target="_blank"><img class="markdeep" src="images/diagram_brdf_dielectric_conductor.png"></a><div class="imagecaption"><a class="target" name="figure_dielectricconductor">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;9:</b> BRDF modelization for dielectric and conductor surfaces</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_brdf_dielectric_conductor.png" target="_blank"><img class="markdeep" src="images/diagram_brdf_dielectric_conductor.png"></a><div class="imagecaption"><a class="target" name="figure_dielectricconductor">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;9:</b> BRDF modelization for dielectric and conductor surfaces</div></div></center>
 
 <p></p>
-<a class="target" name="energyconservation">&#xA0;</a><a class="target" name="materialsystem/energyconservation">&#xA0;</a><a class="target" name="toc4.3">&#xA0;</a><h2>Energy conservation</h2>
+<a class="target" name="energyconservation">&nbsp;</a><a class="target" name="materialsystem/energyconservation">&nbsp;</a><a class="target" name="toc4.3">&nbsp;</a><h2>Energy conservation</h2>
 <p>
 
 
 Energy conservation is one of the key components of a good BRDF for physically based rendering. An energy conservative BRDF states that the total amount of specular and diffuse reflectance energy is less than the total amount of incident energy. Without an energy conservative BRDF, artists must manually ensure that the light reflected off a surface is never more intense than the incident light.
 
 </p>
-<a class="target" name="specularbrdf">&#xA0;</a><a class="target" name="materialsystem/specularbrdf">&#xA0;</a><a class="target" name="toc4.4">&#xA0;</a><h2>Specular BRDF</h2>
+<a class="target" name="specularbrdf">&nbsp;</a><a class="target" name="materialsystem/specularbrdf">&nbsp;</a><a class="target" name="toc4.4">&nbsp;</a><h2>Specular BRDF</h2>
 <p>
 
 
@@ -476,7 +476,7 @@ f_r(v,l) = \frac{D(h, \alpha) G(v, l, \alpha) F(v, h, f0)}{4(\NoV)(\NoL)}
 Given our real-time constraints, we must use an approximation for the three terms \(D\), \(G\) and \(F\). [<a href="#citation-karis13a">Karis13a</a>] has compiled a great list of formulations for these three terms that can be used with the Cook-Torrance specular BRDF. The sections that follow describe the equations we picked for these terms.
 
 </p>
-<a class="target" name="normaldistributionfunction(speculard)">&#xA0;</a><a class="target" name="materialsystem/specularbrdf/normaldistributionfunction(speculard)">&#xA0;</a><a class="target" name="toc4.4.1">&#xA0;</a><h3>Normal distribution function (specular D)</h3>
+<a class="target" name="normaldistributionfunction(speculard)">&nbsp;</a><a class="target" name="materialsystem/specularbrdf/normaldistributionfunction(speculard)">&nbsp;</a><a class="target" name="toc4.4.1">&nbsp;</a><h3>Normal distribution function (specular D)</h3>
 <p>
 
 
@@ -490,13 +490,13 @@ D_{GGX}(h,\alpha) = \frac{\aa}{\pi ( (\NoH)^2 (\aa - 1) + 1)^2}
 
 </p><p>
 
-The GLSL implementation of the NDF, shown in <a href="#listing_speculard">listing&#xA0;1</a>, is simple and efficient.
+The GLSL implementation of the NDF, shown in <a href="#listing_speculard">listing&nbsp;1</a>, is simple and efficient.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-function"><span class="hljs-keyword">float</span> <span class="hljs-title">D_GGX</span><span class="hljs-params">(<span class="hljs-keyword">float</span> NoH, <span class="hljs-keyword">float</span> roughness)</span> </span>{</span>
 <span class="line">    <span class="hljs-keyword">float</span> a = NoH * roughness;</span>
 <span class="line">    <span class="hljs-keyword">float</span> k = roughness / (<span class="hljs-number">1.0</span> - NoH * NoH + a * a);</span>
 <span class="line">    <span class="hljs-keyword">return</span> k * k * (<span class="hljs-number">1.0</span> / PI);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_speculard">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;1:</b> Implementation of the specular D term in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_speculard">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;1:</b> Implementation of the specular D term in GLSL</div>
 <p>
 
 
@@ -504,7 +504,7 @@ We can improve this implementation by using half precision floats. This optimiza
 
 </p><p>
 
-The solution involves Lagrange&apos;s identity:
+The solution involves Lagrange's identity:
 
 </p><p>
 
@@ -514,7 +514,7 @@ $$\begin{equation}
 
 </p><p>
 
-Since both \(n\) and \(h\) are unit vectors, \(|n \times h|^2 = 1 - (\NoH)^2\). This allows us to compute \(1 - (\NoH)^2\) directly with half precision floats by using a simple cross product. <a href="#listing_speculardfp16">Listing&#xA0;2</a> shows the final optimized implementation.
+Since both \(n\) and \(h\) are unit vectors, \(|n \times h|^2 = 1 - (\NoH)^2\). This allows us to compute \(1 - (\NoH)^2\) directly with half precision floats by using a simple cross product. <a href="#listing_speculardfp16">Listing&nbsp;2</a> shows the final optimized implementation.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-meta">#define MEDIUMP_FLT_MAX    65504.0</span></span>
 <span class="line"><span class="hljs-meta">#define saturateMediump(x) min(x, MEDIUMP_FLT_MAX)</span></span>
@@ -525,9 +525,9 @@ Since both \(n\) and \(h\) are unit vectors, \(|n \times h|^2 = 1 - (\NoH)^2\).
 <span class="line">    <span class="hljs-type">float</span> k = roughness / (<span class="hljs-built_in">dot</span>(NxH, NxH) + a * a);</span>
 <span class="line">    <span class="hljs-type">float</span> d = k * k * (<span class="hljs-number">1.0</span> / PI);</span>
 <span class="line">    <span class="hljs-keyword">return</span> saturateMediump(d);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_speculardfp16">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;2:</b> Implementation of the specular D term in GLSL optimized for fp16</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_speculardfp16">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;2:</b> Implementation of the specular D term in GLSL optimized for fp16</div>
 
-<a class="target" name="geometricshadowing(specularg)">&#xA0;</a><a class="target" name="materialsystem/specularbrdf/geometricshadowing(specularg)">&#xA0;</a><a class="target" name="toc4.4.2">&#xA0;</a><h3>Geometric shadowing (specular G)</h3>
+<a class="target" name="geometricshadowing(specularg)">&nbsp;</a><a class="target" name="materialsystem/specularbrdf/geometricshadowing(specularg)">&nbsp;</a><a class="target" name="toc4.4.2">&nbsp;</a><h3>Geometric shadowing (specular G)</h3>
 <p>
 
 
@@ -627,14 +627,14 @@ V(v,l,\alpha) = \frac{0.5}{\NoL \sqrt{(\NoV)^2 (1 - \aa) + \aa} + \NoV \sqrt{(\N
 
 </p><p>
 
-The GLSL implementation of the visibility term, shown in <a href="#listing_specularv">listing&#xA0;3</a>, is a bit more expensive than we would like since it requires two <code>sqrt</code> operations.
+The GLSL implementation of the visibility term, shown in <a href="#listing_specularv">listing&nbsp;3</a>, is a bit more expensive than we would like since it requires two <code>sqrt</code> operations.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-function"><span class="hljs-keyword">float</span> <span class="hljs-title">V_SmithGGXCorrelated</span><span class="hljs-params">(<span class="hljs-keyword">float</span> NoV, <span class="hljs-keyword">float</span> NoL, <span class="hljs-keyword">float</span> roughness)</span> </span>{</span>
 <span class="line">    <span class="hljs-keyword">float</span> a2 = roughness * roughness;</span>
 <span class="line">    <span class="hljs-keyword">float</span> GGXV = NoL * <span class="hljs-built_in">sqrt</span>(NoV * NoV * (<span class="hljs-number">1.0</span> - a2) + a2);</span>
 <span class="line">    <span class="hljs-keyword">float</span> GGXL = NoV * <span class="hljs-built_in">sqrt</span>(NoL * NoL * (<span class="hljs-number">1.0</span> - a2) + a2);</span>
 <span class="line">    <span class="hljs-keyword">return</span> <span class="hljs-number">0.5</span> / (GGXV + GGXL);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularv">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;3:</b> Implementation of the specular V term in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularv">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;3:</b> Implementation of the specular V term in GLSL</div>
 <p>
 
 
@@ -648,14 +648,14 @@ V(v,l,\alpha) = \frac{0.5}{\NoL (\NoV (1 - \alpha) + \alpha) + \NoV (\NoL (1 - \
 
 </p><p>
 
-This approximation is mathematically wrong but saves two square root operations and is good enough for real-time mobile applications, as shown in <a href="#listing_approximatedspecularv">listing&#xA0;4</a>.
+This approximation is mathematically wrong but saves two square root operations and is good enough for real-time mobile applications, as shown in <a href="#listing_approximatedspecularv">listing&nbsp;4</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-function"><span class="hljs-keyword">float</span> <span class="hljs-title">V_SmithGGXCorrelatedFast</span><span class="hljs-params">(<span class="hljs-keyword">float</span> NoV, <span class="hljs-keyword">float</span> NoL, <span class="hljs-keyword">float</span> roughness)</span> </span>{</span>
 <span class="line">    <span class="hljs-keyword">float</span> a = roughness;</span>
 <span class="line">    <span class="hljs-keyword">float</span> GGXV = NoL * (NoV * (<span class="hljs-number">1.0</span> - a) + a);</span>
 <span class="line">    <span class="hljs-keyword">float</span> GGXL = NoV * (NoL * (<span class="hljs-number">1.0</span> - a) + a);</span>
 <span class="line">    <span class="hljs-keyword">return</span> <span class="hljs-number">0.5</span> / (GGXV + GGXL);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_approximatedspecularv">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;4:</b> Implementation of the approximated specular V term in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_approximatedspecularv">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;4:</b> Implementation of the approximated specular V term in GLSL</div>
 <p>
 
 
@@ -668,19 +668,19 @@ V(v,l,\alpha) = \frac{0.5}{lerp(2 (\NoL) (\NoV), \NoL + \NoV, \alpha)}
 \end{equation}$$
 
 </p>
-<a class="target" name="fresnel(specularf)">&#xA0;</a><a class="target" name="materialsystem/specularbrdf/fresnel(specularf)">&#xA0;</a><a class="target" name="toc4.4.3">&#xA0;</a><h3>Fresnel (specular F)</h3>
+<a class="target" name="fresnel(specularf)">&nbsp;</a><a class="target" name="materialsystem/specularbrdf/fresnel(specularf)">&nbsp;</a><a class="target" name="toc4.4.3">&nbsp;</a><h3>Fresnel (specular F)</h3>
 <p>
 
 
-The Fresnel effect plays an important role in the appearance of physically based materials. This effect models the fact that the amount of light the viewer sees reflected from a surface depends on the viewing angle. Large bodies of water are a perfect way to experience this phenomenon, as shown in <a href="#figure_fresnellake">figure&#xA0;10</a>. When looking at the water straight down (at normal incidence) you can see through the water. However, when looking further out in the distance (at grazing angle, where perceived light rays are getting parallel to the surface), you will see the specular reflections on the water become more intense.
+The Fresnel effect plays an important role in the appearance of physically based materials. This effect models the fact that the amount of light the viewer sees reflected from a surface depends on the viewing angle. Large bodies of water are a perfect way to experience this phenomenon, as shown in <a href="#figure_fresnellake">figure&nbsp;10</a>. When looking at the water straight down (at normal incidence) you can see through the water. However, when looking further out in the distance (at grazing angle, where perceived light rays are getting parallel to the surface), you will see the specular reflections on the water become more intense.
 
 </p><p>
 
-The amount of light reflected depends not only on the viewing angle, but also on the index of refraction (IOR) of the material. At normal incidence (perpendicular to the surface, or 0&#xB0; angle), the amount of light reflected back is noted \(\fNormal\) and can be derived from the IOR as we will see in section  <a href="#toc4.8.3.2">4.8.3.2</a>. The amount of light reflected back at grazing angle is noted \(\fGrazing\) and approaches 100% for smooth materials.
+The amount of light reflected depends not only on the viewing angle, but also on the index of refraction (IOR) of the material. At normal incidence (perpendicular to the surface, or 0° angle), the amount of light reflected back is noted \(\fNormal\) and can be derived from the IOR as we will see in section  <a href="#toc4.8.3.2">4.8.3.2</a>. The amount of light reflected back at grazing angle is noted \(\fGrazing\) and approaches 100% for smooth materials.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/photo_fresnel_lake.jpg" target="_blank"><img class="markdeep" src="images/photo_fresnel_lake.jpg"></a><div class="imagecaption"><a class="target" name="figure_fresnellake">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;10:</b> The Fresnel effect is particularly evident on large bodies of water</div></div></center>
+</p><center><div class="image" style=""><a href="images/photo_fresnel_lake.jpg" target="_blank"><img class="markdeep" src="images/photo_fresnel_lake.jpg"></a><div class="imagecaption"><a class="target" name="figure_fresnellake">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;10:</b> The Fresnel effect is particularly evident on large bodies of water</div></div></center>
 
 <p></p><p>
 
@@ -694,26 +694,26 @@ F_{Schlick}(v,h,\fNormal,\fGrazing) = \fNormal + (\fGrazing - \fNormal)(1 - \VoH
 
 </p><p>
 
-The constant \(\fNormal\) represents the specular reflectance at normal incidence and is achromatic for dielectrics, and chromatic for metals. The actual value depends on the index of refraction of the interface. The GLSL implementation of this term requires the use of a <code>pow</code>, as shown in <a href="#listing_specularf">listing&#xA0;5</a>, which can be replaced by a few multiplications.
+The constant \(\fNormal\) represents the specular reflectance at normal incidence and is achromatic for dielectrics, and chromatic for metals. The actual value depends on the index of refraction of the interface. The GLSL implementation of this term requires the use of a <code>pow</code>, as shown in <a href="#listing_specularf">listing&nbsp;5</a>, which can be replaced by a few multiplications.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> F_Schlick(<span class="hljs-type">float</span> u, <span class="hljs-type">vec3</span> f0, <span class="hljs-type">float</span> f90) {</span>
 <span class="line">    <span class="hljs-keyword">return</span> f0 + (<span class="hljs-type">vec3</span>(f90) - f0) * <span class="hljs-built_in">pow</span>(<span class="hljs-number">1.0</span> - u, <span class="hljs-number">5.0</span>);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;5:</b> Implementation of the specular F term in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;5:</b> Implementation of the specular F term in GLSL</div>
 <p>
 
 
-This Fresnel function can be seen as interpolating between the incident specular reflectance and the reflectance at grazing angles, represented here by \(\fGrazing\). Observation of real world materials show that both dielectrics and conductors exhibit achromatic specular reflectance at grazing angles and that the Fresnel reflectance is 1.0 at 90&#xB0;. A more correct \(\fGrazing\) is discussed in section  <a href="#toc5.6.2">5.6.2</a>.
+This Fresnel function can be seen as interpolating between the incident specular reflectance and the reflectance at grazing angles, represented here by \(\fGrazing\). Observation of real world materials show that both dielectrics and conductors exhibit achromatic specular reflectance at grazing angles and that the Fresnel reflectance is 1.0 at 90°. A more correct \(\fGrazing\) is discussed in section  <a href="#toc5.6.2">5.6.2</a>.
 
 </p><p>
 
-Using \(\fGrazing\) set to 1, the Schlick approximation for the Fresnel term can be optimized for scalar operations by refactoring the code slightly. The result is shown in <a href="#listing_scalarspecularf">listing&#xA0;6</a>.
+Using \(\fGrazing\) set to 1, the Schlick approximation for the Fresnel term can be optimized for scalar operations by refactoring the code slightly. The result is shown in <a href="#listing_scalarspecularf">listing&nbsp;6</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> F_Schlick(<span class="hljs-type">float</span> u, <span class="hljs-type">vec3</span> f0) {</span>
 <span class="line">    <span class="hljs-type">float</span> f = <span class="hljs-built_in">pow</span>(<span class="hljs-number">1.0</span> - u, <span class="hljs-number">5.0</span>);</span>
 <span class="line">    <span class="hljs-keyword">return</span> f + f0 * (<span class="hljs-number">1.0</span> - f);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_scalarspecularf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;6:</b> Scalar optimization of the specular F term in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_scalarspecularf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;6:</b> Scalar optimization of the specular F term in GLSL</div>
 
-<a class="target" name="diffusebrdf">&#xA0;</a><a class="target" name="materialsystem/diffusebrdf">&#xA0;</a><a class="target" name="toc4.5">&#xA0;</a><h2>Diffuse BRDF</h2>
+<a class="target" name="diffusebrdf">&nbsp;</a><a class="target" name="materialsystem/diffusebrdf">&nbsp;</a><a class="target" name="toc4.5">&nbsp;</a><h2>Diffuse BRDF</h2>
 <p>
 
 
@@ -738,13 +738,13 @@ $$\begin{equation}
 
 </p><p>
 
-In practice, the diffuse reflectance \(\sigma\) is multiplied later, as shown in <a href="#listing_diffusebrdf">listing&#xA0;8</a>.
+In practice, the diffuse reflectance \(\sigma\) is multiplied later, as shown in <a href="#listing_diffusebrdf">listing&nbsp;8</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-function"><span class="hljs-keyword">float</span> <span class="hljs-title">Fd_Lambert</span><span class="hljs-params">()</span> </span>{</span>
 <span class="line">    <span class="hljs-keyword">return</span> <span class="hljs-number">1.0</span> / PI;</span>
 <span class="line">}</span>
 <span class="line"></span>
-<span class="line">vec3 Fd = diffuseColor * Fd_Lambert();</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_diffusebrdf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;7:</b> Implementation of the diffuse Lambertian BRDF in GLSL</div>
+<span class="line">vec3 Fd = diffuseColor * Fd_Lambert();</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_diffusebrdf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;7:</b> Implementation of the diffuse Lambertian BRDF in GLSL</div>
 <p>
 
 
@@ -783,22 +783,22 @@ $$\begin{equation}
 <span class="line">    <span class="hljs-keyword">float</span> lightScatter = F_Schlick(NoL, <span class="hljs-number">1.0</span>, f90);</span>
 <span class="line">    <span class="hljs-keyword">float</span> viewScatter = F_Schlick(NoV, <span class="hljs-number">1.0</span>, f90);</span>
 <span class="line">    <span class="hljs-keyword">return</span> lightScatter * viewScatter * (<span class="hljs-number">1.0</span> / PI);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_diffusebrdf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;8:</b> Implementation of the diffuse Disney BRDF in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_diffusebrdf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;8:</b> Implementation of the diffuse Disney BRDF in GLSL</div>
 <p>
 
 
-<a href="#figure_lambert_vs_disney">Figure&#xA0;11</a> shows a comparison between a simple Lambertian diffuse BRDF and the higher quality Disney diffuse BRDF, using a fully rough dielectric material. For comparison purposes, the right sphere was mirrored. The surface response is very similar with both BRDFs but the Disney one exhibits some nice retro-reflections at grazing angles (look closely at the left edge of the spheres).
+<a href="#figure_lambert_vs_disney">Figure&nbsp;11</a> shows a comparison between a simple Lambertian diffuse BRDF and the higher quality Disney diffuse BRDF, using a fully rough dielectric material. For comparison purposes, the right sphere was mirrored. The surface response is very similar with both BRDFs but the Disney one exhibits some nice retro-reflections at grazing angles (look closely at the left edge of the spheres).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_lambert_vs_disney.png" target="_blank"><img class="markdeep" src="images/diagram_lambert_vs_disney.png"></a><div class="imagecaption"><a class="target" name="figure_lambert_vs_disney">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;11:</b> Comparison between the Lambertian diffuse BRDF (left) and the Disney diffuse BRDF (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_lambert_vs_disney.png" target="_blank"><img class="markdeep" src="images/diagram_lambert_vs_disney.png"></a><div class="imagecaption"><a class="target" name="figure_lambert_vs_disney">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;11:</b> Comparison between the Lambertian diffuse BRDF (left) and the Disney diffuse BRDF (right)</div></div></center>
 
 <p></p><p>
 
 We could allow artists/developers to choose the Disney diffuse BRDF depending on the quality they desire and the performance of the target device. It is important to note however that the Disney diffuse BRDF is not energy conserving as expressed here.
 
 </p>
-<a class="target" name="standardmodelsummary">&#xA0;</a><a class="target" name="materialsystem/standardmodelsummary">&#xA0;</a><a class="target" name="toc4.6">&#xA0;</a><h2>Standard model summary</h2>
+<a class="target" name="standardmodelsummary">&nbsp;</a><a class="target" name="materialsystem/standardmodelsummary">&nbsp;</a><a class="target" name="toc4.6">&nbsp;</a><h2>Standard model summary</h2>
 <p>
 
 
@@ -810,7 +810,7 @@ We could allow artists/developers to choose the Disney diffuse BRDF depending on
 
 </p><p>
 
-The full GLSL implementation of the standard model is shown in <a href="#listing_glslbrdf">listing&#xA0;9</a>.
+The full GLSL implementation of the standard model is shown in <a href="#listing_glslbrdf">listing&nbsp;9</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">float</span> D_GGX(<span class="hljs-type">float</span> NoH, <span class="hljs-type">float</span> a) {</span>
 <span class="line">    <span class="hljs-type">float</span> a2 = a * a;</span>
@@ -855,16 +855,16 @@ The full GLSL implementation of the standard model is shown in <a href="#listing
 <span class="line">    <span class="hljs-type">vec3</span> Fd = diffuseColor * Fd_Lambert();</span>
 <span class="line"></span>
 <span class="line">    <span class="hljs-comment">// apply lighting...</span></span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_glslbrdf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;9:</b> Evaluation of the BRDF in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_glslbrdf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;9:</b> Evaluation of the BRDF in GLSL</div>
 
-<a class="target" name="improvingthebrdfs">&#xA0;</a><a class="target" name="materialsystem/improvingthebrdfs">&#xA0;</a><a class="target" name="toc4.7">&#xA0;</a><h2>Improving the BRDFs</h2>
+<a class="target" name="improvingthebrdfs">&nbsp;</a><a class="target" name="materialsystem/improvingthebrdfs">&nbsp;</a><a class="target" name="toc4.7">&nbsp;</a><h2>Improving the BRDFs</h2>
 <p>
 
 
 We mentioned in section  <a href="#toc4.3">4.3</a> that energy conservation is one of the key components of a good BRDF. Unfortunately the BRDFs explored previously suffer from two problems that we will examine below.
 
 </p>
-<a class="target" name="energygainindiffusereflectance">&#xA0;</a><a class="target" name="materialsystem/improvingthebrdfs/energygainindiffusereflectance">&#xA0;</a><a class="target" name="toc4.7.1">&#xA0;</a><h3>Energy gain in diffuse reflectance</h3>
+<a class="target" name="energygainindiffusereflectance">&nbsp;</a><a class="target" name="materialsystem/improvingthebrdfs/energygainindiffusereflectance">&nbsp;</a><a class="target" name="toc4.7.1">&nbsp;</a><h3>Energy gain in diffuse reflectance</h3>
 <p>
 
 
@@ -875,39 +875,39 @@ The Lambert diffuse BRDF does not account for the light that reflects at the sur
 [TODO: talk about the issue with fr+fd]
 
 </p>
-<a class="target" name="energylossinspecularreflectance">&#xA0;</a><a class="target" name="materialsystem/improvingthebrdfs/energylossinspecularreflectance">&#xA0;</a><a class="target" name="toc4.7.2">&#xA0;</a><h3>Energy loss in specular reflectance</h3>
+<a class="target" name="energylossinspecularreflectance">&nbsp;</a><a class="target" name="materialsystem/improvingthebrdfs/energylossinspecularreflectance">&nbsp;</a><a class="target" name="toc4.7.2">&nbsp;</a><h3>Energy loss in specular reflectance</h3>
 <p>
 
 
-The Cook-Torrance BRDF we presented earlier attempts to model several events at the microfacet level but does so by accounting for a single bounce of light. This approximation can cause a loss of energy at high roughness, the surface is not energy preserving. <a href="#figure_singlevsmultibounce">Figure&#xA0;12</a> shows why this loss of energy occurs. In the single bounce (or single scattering) model, a ray of light hitting the surface can be reflected back onto another microfacet and thus be discarded because of the masking and shadowing term. If we however account for multiple bounces (multiscattering), the same ray of light might escape the microfacet field and be reflected back towards the viewer.
+The Cook-Torrance BRDF we presented earlier attempts to model several events at the microfacet level but does so by accounting for a single bounce of light. This approximation can cause a loss of energy at high roughness, the surface is not energy preserving. <a href="#figure_singlevsmultibounce">Figure&nbsp;12</a> shows why this loss of energy occurs. In the single bounce (or single scattering) model, a ray of light hitting the surface can be reflected back onto another microfacet and thus be discarded because of the masking and shadowing term. If we however account for multiple bounces (multiscattering), the same ray of light might escape the microfacet field and be reflected back towards the viewer.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_single_vs_multi_scatter.png" target="_blank"><img class="markdeep" src="images/diagram_single_vs_multi_scatter.png"></a><div class="imagecaption"><a class="target" name="figure_singlevsmultibounce">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;12:</b> Single scattering (left) vs multiscattering</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_single_vs_multi_scatter.png" target="_blank"><img class="markdeep" src="images/diagram_single_vs_multi_scatter.png"></a><div class="imagecaption"><a class="target" name="figure_singlevsmultibounce">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;12:</b> Single scattering (left) vs multiscattering</div></div></center>
 
 <p></p><p>
 
-Based on this simple explanation, we can intuitively deduce that the rougher a surface is, the higher the chances are that energy gets lost because of the failure to account for multiple scattering events. This loss of energy appears to darken rough materials. Metallic surfaces are particularly affected because all of their reflectance is specular. This darkening effect is illustrated in <a href="#figure_metallicroughenergyloss">figure&#xA0;13</a>. With multiscattering, energy preservation can be achieved, as shown in <a href="#figure_metallicroughenergypreservation">figure&#xA0;14</a>.
+Based on this simple explanation, we can intuitively deduce that the rougher a surface is, the higher the chances are that energy gets lost because of the failure to account for multiple scattering events. This loss of energy appears to darken rough materials. Metallic surfaces are particularly affected because all of their reflectance is specular. This darkening effect is illustrated in <a href="#figure_metallicroughenergyloss">figure&nbsp;13</a>. With multiscattering, energy preservation can be achieved, as shown in <a href="#figure_metallicroughenergypreservation">figure&nbsp;14</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_metallic_energy_loss.png" target="_blank"><img class="markdeep" src="images/material_metallic_energy_loss.png"></a><div class="imagecaption"><a class="target" name="figure_metallicroughenergyloss">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;13:</b> Darkening increases with roughness due to single scattering</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_metallic_energy_loss.png" target="_blank"><img class="markdeep" src="images/material_metallic_energy_loss.png"></a><div class="imagecaption"><a class="target" name="figure_metallicroughenergyloss">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;13:</b> Darkening increases with roughness due to single scattering</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/material_metallic_energy_preservation.png" target="_blank"><img class="markdeep" src="images/material_metallic_energy_preservation.png"></a><div class="imagecaption"><a class="target" name="figure_metallicroughenergypreservation">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;14:</b> Energy preservation with multiscattering</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_metallic_energy_preservation.png" target="_blank"><img class="markdeep" src="images/material_metallic_energy_preservation.png"></a><div class="imagecaption"><a class="target" name="figure_metallicroughenergypreservation">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;14:</b> Energy preservation with multiscattering</div></div></center>
 
 <p></p><p>
 
-We can use a white furnace, a uniform lighting environment set to pure white, to validate the energy preservation property of a BRDF. When energy preservation is achieved, a purely reflective metallic surface (\(\fNormal = 1\)) should be indistinguishable from the background, no matter the roughness of said surface. <a href="#figure_whitefurnaceloss">Figure&#xA0;15</a> shows what such a surface looks like with the specular BRDF presented in the previous sections. The loss of energy as the roughness increases is obvious. In contrast, <a href="#figure_whitefurnacepreservation">figure&#xA0;16</a> shows that accounting for multiscattering events addresses the energy loss.
+We can use a white furnace, a uniform lighting environment set to pure white, to validate the energy preservation property of a BRDF. When energy preservation is achieved, a purely reflective metallic surface (\(\fNormal = 1\)) should be indistinguishable from the background, no matter the roughness of said surface. <a href="#figure_whitefurnaceloss">Figure&nbsp;15</a> shows what such a surface looks like with the specular BRDF presented in the previous sections. The loss of energy as the roughness increases is obvious. In contrast, <a href="#figure_whitefurnacepreservation">figure&nbsp;16</a> shows that accounting for multiscattering events addresses the energy loss.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_furnace_energy_loss.png" target="_blank"><img class="markdeep" src="images/material_furnace_energy_loss.png"></a><div class="imagecaption"><a class="target" name="figure_whitefurnaceloss">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;15:</b> Darkening increases with roughness due to single scattering</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_furnace_energy_loss.png" target="_blank"><img class="markdeep" src="images/material_furnace_energy_loss.png"></a><div class="imagecaption"><a class="target" name="figure_whitefurnaceloss">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;15:</b> Darkening increases with roughness due to single scattering</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/material_furnace_energy_preservation.png" target="_blank"><img class="markdeep" src="images/material_furnace_energy_preservation.png"></a><div class="imagecaption"><a class="target" name="figure_whitefurnacepreservation">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;16:</b> Energy preservation with multiscattering</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_furnace_energy_preservation.png" target="_blank"><img class="markdeep" src="images/material_furnace_energy_preservation.png"></a><div class="imagecaption"><a class="target" name="figure_whitefurnacepreservation">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;16:</b> Energy preservation with multiscattering</div></div></center>
 
 <p></p><p>
 
@@ -1001,29 +1001,29 @@ r = \int_{\Omega} D(l,v) V(l,v) \left&lt; \NoL \right&gt; dl
 
 </p><p>
 
-We can implement specular energy compensation at a negligible cost if we store \(r\) in the DFG lookup table presented in section  <a href="#toc5.3">5.3</a>. <a href="#listing_energycompensationimpl">Listing&#xA0;10</a> shows that the implementation is a direct conversion of equation \(\ref{scaledEnergyCompensationLobe}\).
+We can implement specular energy compensation at a negligible cost if we store \(r\) in the DFG lookup table presented in section  <a href="#toc5.3">5.3</a>. <a href="#listing_energycompensationimpl">Listing&nbsp;10</a> shows that the implementation is a direct conversion of equation \(\ref{scaledEnergyCompensationLobe}\).
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> energyCompensation = <span class="hljs-number">1.0</span> + f0 * (<span class="hljs-number">1.0</span> / dfg.y - <span class="hljs-number">1.0</span>);</span>
 <span class="line"><span class="hljs-comment">// Scale the specular lobe to account for multiscattering</span></span>
-<span class="line">Fr *= pixel.energyCompensation;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_energycompensationimpl">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;10:</b> Implementation of the energy compensation specular lobe</div>
+<span class="line">Fr *= pixel.energyCompensation;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_energycompensationimpl">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;10:</b> Implementation of the energy compensation specular lobe</div>
 <p>
 
 
 Please refer to section  <a href="#toc5.3">5.3</a> and section  <a href="#toc5.3.4.7">5.3.4.7</a> to learn how the DFG lookup table is derived and computed.
 
 </p>
-<a class="target" name="parameterization">&#xA0;</a><a class="target" name="materialsystem/parameterization">&#xA0;</a><a class="target" name="toc4.8">&#xA0;</a><h2>Parameterization</h2>
+<a class="target" name="parameterization">&nbsp;</a><a class="target" name="materialsystem/parameterization">&nbsp;</a><a class="target" name="toc4.8">&nbsp;</a><h2>Parameterization</h2>
 <p>
 
 
-Disney&apos;s material model described in [<a href="#citation-burley12">Burley12</a>] is a good starting point but its numerous parameters makes it impractical for real-time implementations. In addition, we would like our standard material model to be easy to understand and easy to use for both artists and developers.
+Disney's material model described in [<a href="#citation-burley12">Burley12</a>] is a good starting point but its numerous parameters makes it impractical for real-time implementations. In addition, we would like our standard material model to be easy to understand and easy to use for both artists and developers.
 
 </p>
-<a class="target" name="standardparameters">&#xA0;</a><a class="target" name="materialsystem/parameterization/standardparameters">&#xA0;</a><a class="target" name="toc4.8.1">&#xA0;</a><h3>Standard parameters</h3>
+<a class="target" name="standardparameters">&nbsp;</a><a class="target" name="materialsystem/parameterization/standardparameters">&nbsp;</a><a class="target" name="toc4.8.1">&nbsp;</a><h3>Standard parameters</h3>
 <p>
 
 
-<a href="#table_standardparameters">Table&#xA0;2</a> describes the list of parameters that satisfy our constraints.
+<a href="#table_standardparameters">Table&nbsp;2</a> describes the list of parameters that satisfy our constraints.
 
 </p><p>
 
@@ -1035,22 +1035,22 @@ Disney&apos;s material model described in [<a href="#citation-burley12">Burley12
 <tr><td style="text-align:right"> <strong class="asterisk">Reflectance</strong> </td><td style="text-align:left"> Fresnel reflectance at normal incidence for dielectric surfaces. This replaces an explicit index of refraction </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Emissive</strong> </td><td style="text-align:left"> Additional diffuse albedo to simulate emissive surfaces (such as neons, etc.) This parameter is mostly useful in an HDR pipeline with a bloom pass </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Ambient occlusion</strong> </td><td style="text-align:left"> Defines how much of the ambient light is accessible to a surface point. It is a per-pixel shadowing factor between 0.0 and 1.0. This parameter will be discussed in more details in the <a href="#lighting">lighting</a> section </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_standardparameters">&#xA0;</a><b style="font-style:normal;">Table&#xA0;2:</b> Parameters of the standard model</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_standardparameters">&nbsp;</a><b style="font-style:normal;">Table&nbsp;2:</b> Parameters of the standard model</div></div>
 
 <p></p><p>
 
-<a href="#figure_material_parameters">Figure&#xA0;17</a> shows how the metallic, roughness and reflectance parameters affect the appearance of a surface.
+<a href="#figure_material_parameters">Figure&nbsp;17</a> shows how the metallic, roughness and reflectance parameters affect the appearance of a surface.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_parameters.png" target="_blank"><img class="markdeep" src="images/material_parameters.png"></a><div class="imagecaption"><a class="target" name="figure_material_parameters">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;17:</b> From top to bottom: varying metallic, varying dielectric roughness, varying metallic roughness, varying reflectance</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_parameters.png" target="_blank"><img class="markdeep" src="images/material_parameters.png"></a><div class="imagecaption"><a class="target" name="figure_material_parameters">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;17:</b> From top to bottom: varying metallic, varying dielectric roughness, varying metallic roughness, varying reflectance</div></div></center>
 
 <p></p>
-<a class="target" name="typesandranges">&#xA0;</a><a class="target" name="materialsystem/parameterization/typesandranges">&#xA0;</a><a class="target" name="toc4.8.2">&#xA0;</a><h3>Types and ranges</h3>
+<a class="target" name="typesandranges">&nbsp;</a><a class="target" name="materialsystem/parameterization/typesandranges">&nbsp;</a><a class="target" name="toc4.8.2">&nbsp;</a><h3>Types and ranges</h3>
 <p>
 
 
-It is important to understand the type and range of the different parameters of our material model, described in <a href="#table_standardparameterstypes">table&#xA0;3</a>.
+It is important to understand the type and range of the different parameters of our material model, described in <a href="#table_standardparameterstypes">table&nbsp;3</a>.
 
 </p><p>
 
@@ -1062,7 +1062,7 @@ It is important to understand the type and range of the different parameters of
 <tr><td style="text-align:right"> <strong class="asterisk">Reflectance</strong> </td><td style="text-align:left"> Scalar [0..1] </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Emissive</strong> </td><td style="text-align:left"> Linear RGB [0..1] + exposure compensation </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Ambient occlusion</strong> </td><td style="text-align:left"> Scalar [0..1] </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_standardparameterstypes">&#xA0;</a><b style="font-style:normal;">Table&#xA0;3:</b> Range and type of the standard model&apos;s parameters</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_standardparameterstypes">&nbsp;</a><b style="font-style:normal;">Table&nbsp;3:</b> Range and type of the standard model's parameters</div></div>
 
 <p></p><p>
 
@@ -1077,26 +1077,26 @@ For instance, the base color could be expressed in sRGB space and converted to l
 Another example: the emissive parameter could be expressed as a color temperature and an intensity, to simulate the light emitted by a black body.
 
 </p>
-<a class="target" name="remapping">&#xA0;</a><a class="target" name="materialsystem/parameterization/remapping">&#xA0;</a><a class="target" name="toc4.8.3">&#xA0;</a><h3>Remapping</h3>
+<a class="target" name="remapping">&nbsp;</a><a class="target" name="materialsystem/parameterization/remapping">&nbsp;</a><a class="target" name="toc4.8.3">&nbsp;</a><h3>Remapping</h3>
 <p>
 
 
 To make the standard material model easier and more intuitive to use for artists, we must remap the parameters <em class="underscore">baseColor</em>, <em class="underscore">roughness</em> and <em class="underscore">reflectance</em>.
 
 </p>
-<a class="target" name="basecolorremapping">&#xA0;</a><a class="target" name="materialsystem/parameterization/remapping/basecolorremapping">&#xA0;</a><a class="target" name="toc4.8.3.1">&#xA0;</a><h4>Base color remapping</h4>
+<a class="target" name="basecolorremapping">&nbsp;</a><a class="target" name="materialsystem/parameterization/remapping/basecolorremapping">&nbsp;</a><a class="target" name="toc4.8.3.1">&nbsp;</a><h4>Base color remapping</h4>
 <p>
 
 
-The base color of a material is affected by the &#x201C;metallicness&#x201D; of said material. Dielectrics have achromatic specular reflectance but retain their base color as the diffuse color. Conductors on the other hand use their base color as the specular color and do not have a diffuse component.
+The base color of a material is affected by the “metallicness” of said material. Dielectrics have achromatic specular reflectance but retain their base color as the diffuse color. Conductors on the other hand use their base color as the specular color and do not have a diffuse component.
 
 </p><p>
 
-The lighting equations must therefore use the diffuse color and \(\fNormal\) instead of the base color. The diffuse color can easily be computed from the base color, as show in <a href="#listing_basecolortodiffuse">listing&#xA0;11</a>.
+The lighting equations must therefore use the diffuse color and \(\fNormal\) instead of the base color. The diffuse color can easily be computed from the base color, as show in <a href="#listing_basecolortodiffuse">listing&nbsp;11</a>.
 
-</p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> diffuseColor = (<span class="hljs-number">1.0</span> - metallic) * baseColor.rgb;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_basecolortodiffuse">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;11:</b> Conversion of base color to diffuse in GLSL</div>
+</p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> diffuseColor = (<span class="hljs-number">1.0</span> - metallic) * baseColor.rgb;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_basecolortodiffuse">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;11:</b> Conversion of base color to diffuse in GLSL</div>
 
-<a class="target" name="reflectanceremapping">&#xA0;</a><a class="target" name="materialsystem/parameterization/remapping/reflectanceremapping">&#xA0;</a><a class="target" name="toc4.8.3.2">&#xA0;</a><h4>Reflectance remapping</h4>
+<a class="target" name="reflectanceremapping">&nbsp;</a><a class="target" name="materialsystem/parameterization/remapping/reflectanceremapping">&nbsp;</a><a class="target" name="toc4.8.3.2">&nbsp;</a><h4>Reflectance remapping</h4>
 <p>
 
 
@@ -1114,11 +1114,11 @@ $$\begin{equation}
 
 </p><p>
 
-The goal is to map \(\fNormal\) onto a range that can represent the Fresnel values of both common dielectric surfaces (4% reflectance) and gemstones (8% to 16%). The mapping function is chosen to yield a 4% Fresnel reflectance value for an input reflectance of 0.5 (or 128 on a linear RGB gray scale). <a href="#figure_reflectance">Figure&#xA0;18</a> show those common values and how they relate to the mapping function.
+The goal is to map \(\fNormal\) onto a range that can represent the Fresnel values of both common dielectric surfaces (4% reflectance) and gemstones (8% to 16%). The mapping function is chosen to yield a 4% Fresnel reflectance value for an input reflectance of 0.5 (or 128 on a linear RGB gray scale). <a href="#figure_reflectance">Figure&nbsp;18</a> show those common values and how they relate to the mapping function.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_reflectance.png" target="_blank"><img class="markdeep" src="images/diagram_reflectance.png"></a><div class="imagecaption"><a class="target" name="figure_reflectance">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;18:</b> Common reflectance values</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_reflectance.png" target="_blank"><img class="markdeep" src="images/diagram_reflectance.png"></a><div class="imagecaption"><a class="target" name="figure_reflectance">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;18:</b> Common reflectance values</div></div></center>
 
 <p></p><p>
 
@@ -1142,7 +1142,7 @@ n_{ior} = \frac{2}{1 - \sqrt{\fNormal}} - 1
 
 </p><p>
 
-<a href="#table_commonmatreflectance">Table&#xA0;4</a> describes acceptable Fresnel reflectance values for various types of materials (no real world material has a value under 2%).
+<a href="#table_commonmatreflectance">Table&nbsp;4</a> describes acceptable Fresnel reflectance values for various types of materials (no real world material has a value under 2%).
 
 </p><p>
 
@@ -1159,25 +1159,25 @@ n_{ior} = \frac{2}{1 - \sqrt{\fNormal}} - 1
 <tr><td style="text-align:right"> Hair </td><td style="text-align:left"> 4.6% </td><td style="text-align:left"> 1.55 </td><td style="text-align:left"> 0.54 </td></tr>
 <tr><td style="text-align:right"> Teeth </td><td style="text-align:left"> 5.8% </td><td style="text-align:left"> 1.63 </td><td style="text-align:left"> 0.6 </td></tr>
 <tr><td style="text-align:right"> Default value </td><td style="text-align:left"> 4% </td><td style="text-align:left"> 1.5 </td><td style="text-align:left"> 0.5 </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_commonmatreflectance">&#xA0;</a><b style="font-style:normal;">Table&#xA0;4:</b> Reflectance of common materials (source: Real-Time Rendering 4th Edition)</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_commonmatreflectance">&nbsp;</a><b style="font-style:normal;">Table&nbsp;4:</b> Reflectance of common materials (source: Real-Time Rendering 4th Edition)</div></div>
 
 <p></p><p>
 
-<a href="#table_fnormalmetals">Table&#xA0;5</a> lists the \(\fNormal\) values for a few metals. The values are given in sRGB and must be used as the base color in our material model. Please refer to the annex, section  <a href="#toc9.1">9.1</a>, for an explanation of how these sRGB colors are computed from measured data.
+<a href="#table_fnormalmetals">Table&nbsp;5</a> lists the \(\fNormal\) values for a few metals. The values are given in sRGB and must be used as the base color in our material model. Please refer to the annex, section  <a href="#toc9.1">9.1</a>, for an explanation of how these sRGB colors are computed from measured data.
 
 </p><p>
 
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Metal </th><th style="text-align:center"> \(\fNormal\) in sRGB </th><th style="text-align:center"> Hexadecimal </th><th style="text-align:left"> Color </th></tr>
-<tr><td style="text-align:right"> Silver </td><td style="text-align:center"> 0.97, 0.96, 0.91 </td><td style="text-align:center"> #f7f4e8 </td><td style="text-align:left"> <div style="background-color: #f7f4e8; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Aluminum </td><td style="text-align:center"> 0.91, 0.92, 0.92 </td><td style="text-align:center"> #e8eaea </td><td style="text-align:left"> <div style="background-color: #e8eaea; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Titanium </td><td style="text-align:center"> 0.76, 0.73, 0.69 </td><td style="text-align:center"> #c1baaf </td><td style="text-align:left"> <div style="background-color: #c1baaf; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Iron </td><td style="text-align:center"> 0.77, 0.78, 0.78 </td><td style="text-align:center"> #c4c6c6 </td><td style="text-align:left"> <div style="background-color: #c4c6c6; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Platinum </td><td style="text-align:center"> 0.83, 0.81, 0.78 </td><td style="text-align:center"> #d3cec6 </td><td style="text-align:left"> <div style="background-color: #d3cec6; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Gold </td><td style="text-align:center"> 1.00, 0.85, 0.57 </td><td style="text-align:center"> #ffd891 </td><td style="text-align:left"> <div style="background-color: #ffd891; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Brass </td><td style="text-align:center"> 0.98, 0.90, 0.59 </td><td style="text-align:center"> #f9e596 </td><td style="text-align:left"> <div style="background-color: #f9e596; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Copper </td><td style="text-align:center"> 0.97, 0.74, 0.62 </td><td style="text-align:center"> #f7bc9e </td><td style="text-align:left"> <div style="background-color: #f7bc9e; width: 60px">&#xA0;</div> </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_fnormalmetals">&#xA0;</a><b style="font-style:normal;">Table&#xA0;5:</b> \(\fNormal\) for common metals</div></div>
+<tr><td style="text-align:right"> Silver </td><td style="text-align:center"> 0.97, 0.96, 0.91 </td><td style="text-align:center"> #f7f4e8 </td><td style="text-align:left"> <div style="background-color: #f7f4e8; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Aluminum </td><td style="text-align:center"> 0.91, 0.92, 0.92 </td><td style="text-align:center"> #e8eaea </td><td style="text-align:left"> <div style="background-color: #e8eaea; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Titanium </td><td style="text-align:center"> 0.76, 0.73, 0.69 </td><td style="text-align:center"> #c1baaf </td><td style="text-align:left"> <div style="background-color: #c1baaf; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Iron </td><td style="text-align:center"> 0.77, 0.78, 0.78 </td><td style="text-align:center"> #c4c6c6 </td><td style="text-align:left"> <div style="background-color: #c4c6c6; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Platinum </td><td style="text-align:center"> 0.83, 0.81, 0.78 </td><td style="text-align:center"> #d3cec6 </td><td style="text-align:left"> <div style="background-color: #d3cec6; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Gold </td><td style="text-align:center"> 1.00, 0.85, 0.57 </td><td style="text-align:center"> #ffd891 </td><td style="text-align:left"> <div style="background-color: #ffd891; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Brass </td><td style="text-align:center"> 0.98, 0.90, 0.59 </td><td style="text-align:center"> #f9e596 </td><td style="text-align:left"> <div style="background-color: #f9e596; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Copper </td><td style="text-align:center"> 0.97, 0.74, 0.62 </td><td style="text-align:center"> #f7bc9e </td><td style="text-align:left"> <div style="background-color: #f7bc9e; width: 60px">&nbsp;</div> </td></tr>
+</tbody></table><div class="tablecaption"><a class="target" name="table_fnormalmetals">&nbsp;</a><b style="font-style:normal;">Table&nbsp;5:</b> \(\fNormal\) for common metals</div></div>
 
 <p></p><p>
 
@@ -1191,11 +1191,11 @@ $$\begin{equation}
 
 </p><p>
 
-<a href="#figure_grazing_reflectance">Figure&#xA0;19</a> shows a red plastic ball. If you look closely at the edges of the sphere, you will be able to notice the achromatic specular reflectance at grazing angles.
+<a href="#figure_grazing_reflectance">Figure&nbsp;19</a> shows a red plastic ball. If you look closely at the edges of the sphere, you will be able to notice the achromatic specular reflectance at grazing angles.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_grazing_reflectance.png" target="_blank"><img class="markdeep" src="images/material_grazing_reflectance.png"></a><div class="imagecaption"><a class="target" name="figure_grazing_reflectance">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;19:</b> The specular reflectance becomes achromatic at grazing angles</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_grazing_reflectance.png" target="_blank"><img class="markdeep" src="images/material_grazing_reflectance.png"></a><div class="imagecaption"><a class="target" name="figure_grazing_reflectance">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;19:</b> The specular reflectance becomes achromatic at grazing angles</div></div></center>
 
 <p></p><p>
 
@@ -1213,11 +1213,11 @@ $$\begin{equation}
 
 </p><p>
 
-<a href="#listing_fnormal">Listing&#xA0;12</a> shows how \(\fNormal\) is computed for both dielectric and metallic materials. It shows that the color of the specular reflectance is derived from the base color in the metallic case.
+<a href="#listing_fnormal">Listing&nbsp;12</a> shows how \(\fNormal\) is computed for both dielectric and metallic materials. It shows that the color of the specular reflectance is derived from the base color in the metallic case.
 
-</p><pre class="listing tilde"><code><span class="line">vec3 f0 = 0.16 <span class="hljs-bullet">* reflectance *</span> reflectance <span class="hljs-bullet">* (1.0 - metallic) + baseColor *</span> metallic;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_fnormal">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;12:</b> Computing \(\fNormal\) for dielectric and metallic materials in GLSL</div>
+</p><pre class="listing tilde"><code><span class="line">vec3 f0 = 0.16 <span class="hljs-bullet">* reflectance *</span> reflectance <span class="hljs-bullet">* (1.0 - metallic) + baseColor *</span> metallic;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_fnormal">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;12:</b> Computing \(\fNormal\) for dielectric and metallic materials in GLSL</div>
 
-<a class="target" name="roughnessremappingandclamping">&#xA0;</a><a class="target" name="materialsystem/parameterization/remapping/roughnessremappingandclamping">&#xA0;</a><a class="target" name="toc4.8.3.3">&#xA0;</a><h4>Roughness remapping and clamping</h4>
+<a class="target" name="roughnessremappingandclamping">&nbsp;</a><a class="target" name="materialsystem/parameterization/remapping/roughnessremappingandclamping">&nbsp;</a><a class="target" name="toc4.8.3.3">&nbsp;</a><h4>Roughness remapping and clamping</h4>
 <p>
 
 
@@ -1231,11 +1231,11 @@ $$\begin{equation}
 
 </p><p>
 
-<a href="#figure_roughness_remap">Figure&#xA0;20</a> shows a silver metallic surface with increasing roughness (from 0.0 to 1.0), using the unmodified roughness value (bottom) and the remapped value (top).
+<a href="#figure_roughness_remap">Figure&nbsp;20</a> shows a silver metallic surface with increasing roughness (from 0.0 to 1.0), using the unmodified roughness value (bottom) and the remapped value (top).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_roughness_remap.png" target="_blank"><img class="markdeep" src="images/material_roughness_remap.png"></a><div class="imagecaption"><a class="target" name="figure_roughness_remap">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;20:</b> Roughness remapping comparison: perceptually linear roughness (top) and roughness (bottom)</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_roughness_remap.png" target="_blank"><img class="markdeep" src="images/material_roughness_remap.png"></a><div class="imagecaption"><a class="target" name="figure_roughness_remap">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;20:</b> Roughness remapping comparison: perceptually linear roughness (top) and roughness (bottom)</div></div></center>
 
 <p></p><p>
 
@@ -1263,10 +1263,10 @@ Since we also want specular highlights to have a minimum size (a roughness close
 
 </p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-frostbiteroughnessclamp">&#xA0;</a><sup>1</sup> The Frostbite engine clamps the roughness of analytical lights to 0.045 to reduce specular aliasing. This is possible when using single precision floats (fp32).
+</p><div class="endnote"><a class="target" name="endnote-frostbiteroughnessclamp">&nbsp;</a><sup>1</sup> The Frostbite engine clamps the roughness of analytical lights to 0.045 to reduce specular aliasing. This is possible when using single precision floats (fp32).
 </div>
 <p></p>
-<a class="target" name="blendingandlayering">&#xA0;</a><a class="target" name="materialsystem/parameterization/blendingandlayering">&#xA0;</a><a class="target" name="toc4.8.4">&#xA0;</a><h3>Blending and layering</h3>
+<a class="target" name="blendingandlayering">&nbsp;</a><a class="target" name="materialsystem/parameterization/blendingandlayering">&nbsp;</a><a class="target" name="toc4.8.4">&nbsp;</a><h3>Blending and layering</h3>
 <p>
 
 
@@ -1274,22 +1274,22 @@ As noted in [<a href="#citation-burley12">Burley12</a>] and [<a href="#citation-
 
 </p><p>
 
-For instance, <a href="#figure_materialblending">figure&#xA0;21</a> shows how the studio Ready at Dawn used material blending and layering in <em class="underscore">The Order: 1886</em> to create complex appearances from a library of simple materials (gold, copper, wood, rust, etc.).
+For instance, <a href="#figure_materialblending">figure&nbsp;21</a> shows how the studio Ready at Dawn used material blending and layering in <em class="underscore">The Order: 1886</em> to create complex appearances from a library of simple materials (gold, copper, wood, rust, etc.).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_blending.png" target="_blank"><img class="markdeep" src="images/material_blending.png"></a><div class="imagecaption"><a class="target" name="figure_materialblending">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;21:</b> Material blending and layering. Source: Ready at Dawn Studios</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_blending.png" target="_blank"><img class="markdeep" src="images/material_blending.png"></a><div class="imagecaption"><a class="target" name="figure_materialblending">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;21:</b> Material blending and layering. Source: Ready at Dawn Studios</div></div></center>
 
 <p></p><p>
 
-The blending and layering of materials is effectively an interpolation of the various parameters of the material model. <a href="#figure_material_interpolation">Figure&#xA0;22</a> show an interpolation between shiny metallic chrome and rough red plastic. While the intermediate blended materials make little physical sense, they look plausible.
+The blending and layering of materials is effectively an interpolation of the various parameters of the material model. <a href="#figure_material_interpolation">Figure&nbsp;22</a> show an interpolation between shiny metallic chrome and rough red plastic. While the intermediate blended materials make little physical sense, they look plausible.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_interpolation.png" target="_blank"><img class="markdeep" src="images/material_interpolation.png"></a><div class="imagecaption"><a class="target" name="figure_material_interpolation">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;22:</b> Interpolation from shiny chrome (left) to rough red plastic (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_interpolation.png" target="_blank"><img class="markdeep" src="images/material_interpolation.png"></a><div class="imagecaption"><a class="target" name="figure_material_interpolation">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;22:</b> Interpolation from shiny chrome (left) to rough red plastic (right)</div></div></center>
 
 <p></p>
-<a class="target" name="craftingphysicallybasedmaterials">&#xA0;</a><a class="target" name="materialsystem/parameterization/craftingphysicallybasedmaterials">&#xA0;</a><a class="target" name="toc4.8.5">&#xA0;</a><h3>Crafting physically based materials</h3>
+<a class="target" name="craftingphysicallybasedmaterials">&nbsp;</a><a class="target" name="materialsystem/parameterization/craftingphysicallybasedmaterials">&nbsp;</a><a class="target" name="toc4.8.5">&nbsp;</a><h3>Crafting physically based materials</h3>
 <p>
 
 
@@ -1301,7 +1301,7 @@ We provide a <a href="./Material%20Properties.pdf">useful chart/reference guide<
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_chart.jpg" target="_blank"><img class="markdeep" src="images/material_chart.jpg"></a><div class="imagecaption">Crafting physically based materials</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_chart.jpg" target="_blank"><img class="markdeep" src="images/material_chart.jpg"></a><div class="imagecaption">Crafting physically based materials</div></div></center>
 
 <p></p><p>
 
@@ -1336,7 +1336,7 @@ In addition, here is a quick summary of how to use our material model:
     <strong class="asterisk">Reflectance</strong> is ignored (calculated from the base color).
 
 </p></dd></dl><p></p>
-<a class="target" name="clearcoatmodel">&#xA0;</a><a class="target" name="materialsystem/clearcoatmodel">&#xA0;</a><a class="target" name="toc4.9">&#xA0;</a><h2>Clear coat model</h2>
+<a class="target" name="clearcoatmodel">&nbsp;</a><a class="target" name="materialsystem/clearcoatmodel">&nbsp;</a><a class="target" name="toc4.9">&nbsp;</a><h2>Clear coat model</h2>
 <p>
 
 
@@ -1344,7 +1344,7 @@ The standard material model described previously is a good fit for isotropic sur
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_clear_coat.png" target="_blank"><img class="markdeep" src="images/material_clear_coat.png"></a><div class="imagecaption"><a class="target" name="figure_materialclearcoat">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;23:</b> Comparison of a blue metallic surface under the standard material model (left) and the clear coat model (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_clear_coat.png" target="_blank"><img class="markdeep" src="images/material_clear_coat.png"></a><div class="imagecaption"><a class="target" name="figure_materialclearcoat">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;23:</b> Comparison of a blue metallic surface under the standard material model (left) and the clear coat model (right)</div></div></center>
 
 <p></p><p>
 
@@ -1352,14 +1352,14 @@ A clear coat layer can be simulated as an extension of the standard material mod
 
 </p><p>
 
-Since incoming light will traverse the clear coat layer, we must also take the loss of energy into account as shown in <a href="#figure_clearcoatmodel">figure&#xA0;24</a>. Our model will however not simulate inter reflection and refraction behaviors.
+Since incoming light will traverse the clear coat layer, we must also take the loss of energy into account as shown in <a href="#figure_clearcoatmodel">figure&nbsp;24</a>. Our model will however not simulate inter reflection and refraction behaviors.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_clear_coat.png" target="_blank"><img class="markdeep" src="images/diagram_clear_coat.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoatmodel">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;24:</b> Clear coat surface model</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_clear_coat.png" target="_blank"><img class="markdeep" src="images/diagram_clear_coat.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoatmodel">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;24:</b> Clear coat surface model</div></div></center>
 
 <p></p>
-<a class="target" name="clearcoatspecularbrdf">&#xA0;</a><a class="target" name="materialsystem/clearcoatmodel/clearcoatspecularbrdf">&#xA0;</a><a class="target" name="toc4.9.1">&#xA0;</a><h3>Clear coat specular BRDF</h3>
+<a class="target" name="clearcoatspecularbrdf">&nbsp;</a><a class="target" name="materialsystem/clearcoatmodel/clearcoatspecularbrdf">&nbsp;</a><a class="target" name="toc4.9.1">&nbsp;</a><h3>Clear coat specular BRDF</h3>
 <p>
 
 
@@ -1381,11 +1381,11 @@ This masking-shadowing function is not physically based, as shown in [<a href="#
 
 </p><p>
 
-In summary, our clear coat BRDF is a Cook-Torrance specular microfacet model, with a GGX normal distribution function, a Kelemen visibility function, and a Schlick Fresnel function. <a href="#listing_kelemen">Listing&#xA0;13</a> shows how trivial the GLSL implementation is.
+In summary, our clear coat BRDF is a Cook-Torrance specular microfacet model, with a GGX normal distribution function, a Kelemen visibility function, and a Schlick Fresnel function. <a href="#listing_kelemen">Listing&nbsp;13</a> shows how trivial the GLSL implementation is.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-function"><span class="hljs-keyword">float</span> <span class="hljs-title">V_Kelemen</span><span class="hljs-params">(<span class="hljs-keyword">float</span> LoH)</span> </span>{</span>
 <span class="line">    <span class="hljs-keyword">return</span> <span class="hljs-number">0.25</span> / (LoH * LoH);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_kelemen">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;13:</b> Implementation of the Kelemen visibility term in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_kelemen">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;13:</b> Implementation of the Kelemen visibility term in GLSL</div>
 <p>
 
 
@@ -1406,7 +1406,7 @@ $$\begin{equation}
 This corresponds to a Fresnel reflectance of 4% that we know is associated with common dielectric materials.
 
 </p>
-<a class="target" name="integrationinthesurfaceresponse">&#xA0;</a><a class="target" name="materialsystem/clearcoatmodel/integrationinthesurfaceresponse">&#xA0;</a><a class="target" name="toc4.9.2">&#xA0;</a><h3>Integration in the surface response</h3>
+<a class="target" name="integrationinthesurfaceresponse">&nbsp;</a><a class="target" name="materialsystem/clearcoatmodel/integrationinthesurfaceresponse">&nbsp;</a><a class="target" name="toc4.9.2">&nbsp;</a><h3>Integration in the surface response</h3>
 <p>
 
 
@@ -1423,11 +1423,11 @@ f(v,l)=\fDiffuse(n,l) (1 - F_c) + \fSpecular(n,l) (1 - F_c) + f_c(n,l)
 Where \(F_c\) is the Fresnel term of the clear coat BRDF and \(f_c\) the clear coat BRDF 
 
 </p>
-<a class="target" name="clearcoatparameterization">&#xA0;</a><a class="target" name="materialsystem/clearcoatmodel/clearcoatparameterization">&#xA0;</a><a class="target" name="toc4.9.3">&#xA0;</a><h3>Clear coat parameterization</h3>
+<a class="target" name="clearcoatparameterization">&nbsp;</a><a class="target" name="materialsystem/clearcoatmodel/clearcoatparameterization">&nbsp;</a><a class="target" name="toc4.9.3">&nbsp;</a><h3>Clear coat parameterization</h3>
 <p>
 
 
-The clear coat material model encompasses all the parameters previously defined for the standard material mode, plus two parameters described in <a href="#table_clearcoatparameters">table&#xA0;6</a>.
+The clear coat material model encompasses all the parameters previously defined for the standard material mode, plus two parameters described in <a href="#table_clearcoatparameters">table&nbsp;6</a>.
 
 </p><p>
 
@@ -1435,7 +1435,7 @@ The clear coat material model encompasses all the parameters previously defined
 <table class="table"><tbody><tr><th style="text-align:right"> Parameter </th><th style="text-align:left"> Definition </th></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">ClearCoat</strong> </td><td style="text-align:left"> Strength of the clear coat layer. Scalar between 0 and 1 </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">ClearCoatRoughness</strong> </td><td style="text-align:left"> Perceived smoothness or roughness of the clear coat layer. Scalar between 0 and 1 </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_clearcoatparameters">&#xA0;</a><b style="font-style:normal;">Table&#xA0;6:</b> Clear coat model parameters</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_clearcoatparameters">&nbsp;</a><b style="font-style:normal;">Table&nbsp;6:</b> Clear coat model parameters</div></div>
 
 <p></p><p>
 
@@ -1443,19 +1443,19 @@ The clear coat roughness parameter is remapped and clamped in a similar way to t
 
 </p><p>
 
-<a href="#figure_clearcoat">Figure&#xA0;25</a> and <a href="#figure_clearcoatroughness">figure&#xA0;26</a> show how the clear coat parameters affect the appearance of a surface.
+<a href="#figure_clearcoat">Figure&nbsp;25</a> and <a href="#figure_clearcoatroughness">figure&nbsp;26</a> show how the clear coat parameters affect the appearance of a surface.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_clear_coat1.png" target="_blank"><img class="markdeep" src="images/material_clear_coat1.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoat">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;25:</b> Clear coat varying from 0.0 (left) to 1.0 (right) with metallic set to 1.0 and roughness to 0.8</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_clear_coat1.png" target="_blank"><img class="markdeep" src="images/material_clear_coat1.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoat">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;25:</b> Clear coat varying from 0.0 (left) to 1.0 (right) with metallic set to 1.0 and roughness to 0.8</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/material_clear_coat2.png" target="_blank"><img class="markdeep" src="images/material_clear_coat2.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoatroughness">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;26:</b> Clear coat roughness varying from 0.0 (left) to 1.0 (right) with metallic set to 1.0, roughness to 0.8 and clear coat to 1.0</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_clear_coat2.png" target="_blank"><img class="markdeep" src="images/material_clear_coat2.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoatroughness">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;26:</b> Clear coat roughness varying from 0.0 (left) to 1.0 (right) with metallic set to 1.0, roughness to 0.8 and clear coat to 1.0</div></div></center>
 
 <p></p><p>
 
-<a href="#listing_clearcoatbrdf">Listing&#xA0;14</a> shows the GLSL implementation of the clear coat material model after remapping, parameterization and integration in the standard surface response.
+<a href="#listing_clearcoatbrdf">Listing&nbsp;14</a> shows the GLSL implementation of the clear coat material model after remapping, parameterization and integration in the standard surface response.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">BRDF</span><span class="hljs-params">(...)</span> </span>{</span>
 <span class="line">    <span class="hljs-comment">// compute Fd and Fr from standard model</span></span>
@@ -1472,9 +1472,9 @@ The clear coat roughness parameter is remapped and clamped in a similar way to t
 <span class="line"></span>
 <span class="line">    <span class="hljs-comment">// account for energy loss in the base layer</span></span>
 <span class="line">    <span class="hljs-keyword">return</span> color * ((Fd + Fr * (<span class="hljs-number">1.0</span> - Fc)) * (<span class="hljs-number">1.0</span> - Fc) + Frc);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clearcoatbrdf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;14:</b> Implementation of the clear coat BRDF in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clearcoatbrdf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;14:</b> Implementation of the clear coat BRDF in GLSL</div>
 
-<a class="target" name="baselayermodification">&#xA0;</a><a class="target" name="materialsystem/clearcoatmodel/baselayermodification">&#xA0;</a><a class="target" name="toc4.9.4">&#xA0;</a><h3>Base layer modification</h3>
+<a class="target" name="baselayermodification">&nbsp;</a><a class="target" name="materialsystem/clearcoatmodel/baselayermodification">&nbsp;</a><a class="target" name="toc4.9.4">&nbsp;</a><h3>Base layer modification</h3>
 <p>
 
 
@@ -1482,11 +1482,11 @@ The presence of a clear coat layer means that we should recompute \(\fNormal\),
 
 </p><p>
 
-This can be achieved by computing the material&apos;s index of refraction (IOR) from \(\fNormal\), then computing a new \(\fNormal\) based on the newly computed IOR and the IOR of the clear coat layer (1.5).
+This can be achieved by computing the material's index of refraction (IOR) from \(\fNormal\), then computing a new \(\fNormal\) based on the newly computed IOR and the IOR of the clear coat layer (1.5).
 
 </p><p>
 
-First, we compute the base layer&apos;s IOR:
+First, we compute the base layer's IOR:
 
 </p><p>
 
@@ -1506,7 +1506,7 @@ $$
 
 </p><p>
 
-Since the clear coat layer&apos;s IOR is fixed, we can combine both steps to simplify:
+Since the clear coat layer's IOR is fixed, we can combine both steps to simplify:
 
 </p><p>
 
@@ -1516,10 +1516,10 @@ $$
 
 </p><p>
 
-We should also modify the base layer&apos;s apparent roughness based on the IOR of the clear coat layer but this is something we have opted to leave out for now.
+We should also modify the base layer's apparent roughness based on the IOR of the clear coat layer but this is something we have opted to leave out for now.
 
 </p>
-<a class="target" name="anisotropicmodel">&#xA0;</a><a class="target" name="materialsystem/anisotropicmodel">&#xA0;</a><a class="target" name="toc4.10">&#xA0;</a><h2>Anisotropic model</h2>
+<a class="target" name="anisotropicmodel">&nbsp;</a><a class="target" name="materialsystem/anisotropicmodel">&nbsp;</a><a class="target" name="toc4.10">&nbsp;</a><h2>Anisotropic model</h2>
 <p>
 
 
@@ -1527,10 +1527,10 @@ The standard material model described previously can only describe isotropic sur
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_anisotropic.png" target="_blank"><img class="markdeep" src="images/material_anisotropic.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropic">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;27:</b> Comparison of isotropic material (left) and anisotropic material (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_anisotropic.png" target="_blank"><img class="markdeep" src="images/material_anisotropic.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropic">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;27:</b> Comparison of isotropic material (left) and anisotropic material (right)</div></div></center>
 
 <p></p>
-<a class="target" name="anisotropicspecularbrdf">&#xA0;</a><a class="target" name="materialsystem/anisotropicmodel/anisotropicspecularbrdf">&#xA0;</a><a class="target" name="toc4.10.1">&#xA0;</a><h3>Anisotropic specular BRDF</h3>
+<a class="target" name="anisotropicspecularbrdf">&nbsp;</a><a class="target" name="materialsystem/anisotropicmodel/anisotropicspecularbrdf">&nbsp;</a><a class="target" name="toc4.10.1">&nbsp;</a><h3>Anisotropic specular BRDF</h3>
 <p>
 
 
@@ -1587,7 +1587,7 @@ Note that this NDF requires the tangent and bitangent directions in addition to
 
 </p><p>
 
-The resulting implementation is described in <a href="#listing_anisotropicbrdf">listing&#xA0;15</a>.
+The resulting implementation is described in <a href="#listing_anisotropicbrdf">listing&nbsp;15</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">float</span> at = <span class="hljs-built_in">max</span>(roughness * (<span class="hljs-number">1.0</span> + anisotropy), <span class="hljs-number">0.001</span>);</span>
 <span class="line"><span class="hljs-type">float</span> ab = <span class="hljs-built_in">max</span>(roughness * (<span class="hljs-number">1.0</span> - anisotropy), <span class="hljs-number">0.001</span>);</span>
@@ -1601,7 +1601,7 @@ The resulting implementation is described in <a href="#listing_anisotropicbrdf">
 <span class="line">    <span class="hljs-keyword">highp</span> <span class="hljs-type">float</span> v2 = <span class="hljs-built_in">dot</span>(v, v);</span>
 <span class="line">    <span class="hljs-type">float</span> w2 = a2 / v2;</span>
 <span class="line">    <span class="hljs-keyword">return</span> a2 * w2 * w2 * (<span class="hljs-number">1.0</span> / PI);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_anisotropicbrdf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;15:</b> Implementation of Burley&apos;s anisotropic NDF in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_anisotropicbrdf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;15:</b> Implementation of Burley's anisotropic NDF in GLSL</div>
 <p>
 
 
@@ -1643,7 +1643,7 @@ V_{aniso}(\NoL,\NoV,\alpha) = \frac{1}{2((\NoL)\hat{\Lambda}_v+(\NoV)\hat{\Lambd
 
 </p><p>
 
-The term \( \hat{\Lambda}_v \) is the same for every light and can be computed only once if needed. The resulting implementation is described in <a href="#listing_anisotropicv">listing&#xA0;16</a>.
+The term \( \hat{\Lambda}_v \) is the same for every light and can be computed only once if needed. The resulting implementation is described in <a href="#listing_anisotropicv">listing&nbsp;16</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">float</span> at = <span class="hljs-built_in">max</span>(roughness * (<span class="hljs-number">1.0</span> + anisotropy), <span class="hljs-number">0.001</span>);</span>
 <span class="line"><span class="hljs-type">float</span> ab = <span class="hljs-built_in">max</span>(roughness * (<span class="hljs-number">1.0</span> - anisotropy), <span class="hljs-number">0.001</span>);</span>
@@ -1654,52 +1654,52 @@ The term \( \hat{\Lambda}_v \) is the same for every light and can be computed o
 <span class="line">    <span class="hljs-type">float</span> lambdaL = NoV * <span class="hljs-built_in">length</span>(<span class="hljs-type">vec3</span>(at * ToL, ab * BoL, NoL));</span>
 <span class="line">    <span class="hljs-type">float</span> v = <span class="hljs-number">0.5</span> / (lambdaV + lambdaL);</span>
 <span class="line">    <span class="hljs-keyword">return</span> saturateMediump(v);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_anisotropicv">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;16:</b> Implementation of the anisotropic visibility function in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_anisotropicv">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;16:</b> Implementation of the anisotropic visibility function in GLSL</div>
 
-<a class="target" name="anisotropicparameterization">&#xA0;</a><a class="target" name="materialsystem/anisotropicmodel/anisotropicparameterization">&#xA0;</a><a class="target" name="toc4.10.2">&#xA0;</a><h3>Anisotropic parameterization</h3>
+<a class="target" name="anisotropicparameterization">&nbsp;</a><a class="target" name="materialsystem/anisotropicmodel/anisotropicparameterization">&nbsp;</a><a class="target" name="toc4.10.2">&nbsp;</a><h3>Anisotropic parameterization</h3>
 <p>
 
 
-The anisotropic material model encompasses all the parameters previously defined for the standard material mode, plus an extra parameter described in <a href="#table_anisotropicparameters">table&#xA0;7</a>.
+The anisotropic material model encompasses all the parameters previously defined for the standard material mode, plus an extra parameter described in <a href="#table_anisotropicparameters">table&nbsp;7</a>.
 
 </p><p>
 
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Parameter </th><th style="text-align:left"> Definition </th></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">Anisotropy</strong> </td><td style="text-align:left"> Amount of anisotropy. Scalar between &#x2212;1 and 1 </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_anisotropicparameters">&#xA0;</a><b style="font-style:normal;">Table&#xA0;7:</b> Anisotropic model parameters</div></div>
+<tr><td style="text-align:right"> <strong class="asterisk">Anisotropy</strong> </td><td style="text-align:left"> Amount of anisotropy. Scalar between −1 and 1 </td></tr>
+</tbody></table><div class="tablecaption"><a class="target" name="table_anisotropicparameters">&nbsp;</a><b style="font-style:normal;">Table&nbsp;7:</b> Anisotropic model parameters</div></div>
 
 <p></p><p>
 
-No further remapping is required. Note that negative values will align the anisotropy with the bitangent direction instead of the tangent direction. <a href="#figure_anisotropyparameter">Figure&#xA0;28</a> shows how the anisotropy parameter affect the appearance of a rough metallic surface.
+No further remapping is required. Note that negative values will align the anisotropy with the bitangent direction instead of the tangent direction. <a href="#figure_anisotropyparameter">Figure&nbsp;28</a> shows how the anisotropy parameter affect the appearance of a rough metallic surface.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/anisotropy.png" target="_blank"><img class="markdeep" src="images/materials/anisotropy.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropyparameter">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;28:</b> Anisotropy varying from 0.0 (left) to 1.0 (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/materials/anisotropy.png" target="_blank"><img class="markdeep" src="images/materials/anisotropy.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropyparameter">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;28:</b> Anisotropy varying from 0.0 (left) to 1.0 (right)</div></div></center>
 
 <p></p>
-<a class="target" name="subsurfacemodel">&#xA0;</a><a class="target" name="materialsystem/subsurfacemodel">&#xA0;</a><a class="target" name="toc4.11">&#xA0;</a><h2>Subsurface model</h2>
+<a class="target" name="subsurfacemodel">&nbsp;</a><a class="target" name="materialsystem/subsurfacemodel">&nbsp;</a><a class="target" name="toc4.11">&nbsp;</a><h2>Subsurface model</h2>
 <p>
 
 
 [TODO]
 
 </p>
-<a class="target" name="subsurfacespecularbrdf">&#xA0;</a><a class="target" name="materialsystem/subsurfacemodel/subsurfacespecularbrdf">&#xA0;</a><a class="target" name="toc4.11.1">&#xA0;</a><h3>Subsurface specular BRDF</h3>
+<a class="target" name="subsurfacespecularbrdf">&nbsp;</a><a class="target" name="materialsystem/subsurfacemodel/subsurfacespecularbrdf">&nbsp;</a><a class="target" name="toc4.11.1">&nbsp;</a><h3>Subsurface specular BRDF</h3>
 <p>
 
 
 [TODO]
 
 </p>
-<a class="target" name="subsurfaceparameterization">&#xA0;</a><a class="target" name="materialsystem/subsurfacemodel/subsurfaceparameterization">&#xA0;</a><a class="target" name="toc4.11.2">&#xA0;</a><h3>Subsurface parameterization</h3>
+<a class="target" name="subsurfaceparameterization">&nbsp;</a><a class="target" name="materialsystem/subsurfacemodel/subsurfaceparameterization">&nbsp;</a><a class="target" name="toc4.11.2">&nbsp;</a><h3>Subsurface parameterization</h3>
 <p>
 
 
 [TODO]
 
 </p>
-<a class="target" name="clothmodel">&#xA0;</a><a class="target" name="materialsystem/clothmodel">&#xA0;</a><a class="target" name="toc4.12">&#xA0;</a><h2>Cloth model</h2>
+<a class="target" name="clothmodel">&nbsp;</a><a class="target" name="materialsystem/clothmodel">&nbsp;</a><a class="target" name="toc4.12">&nbsp;</a><h2>Cloth model</h2>
 <p>
 
 
@@ -1707,19 +1707,19 @@ All the material models described previously are designed to simulate dense surf
 
 </p><p>
 
-<a href="#figure_materialcloth">Figure&#xA0;29</a> shows how a traditional microfacet BRDF fails to capture the appearance of a sample of denim fabric. The surface appears rigid (almost plastic-like), more similar to a tarp than a piece of clothing. This figure also shows how important the softer specular lobe caused by absorption and scattering is to the faithful recreation of the fabric.
+<a href="#figure_materialcloth">Figure&nbsp;29</a> shows how a traditional microfacet BRDF fails to capture the appearance of a sample of denim fabric. The surface appears rigid (almost plastic-like), more similar to a tarp than a piece of clothing. This figure also shows how important the softer specular lobe caused by absorption and scattering is to the faithful recreation of the fabric.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_cloth.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth.png"></a><div class="imagecaption"><a class="target" name="figure_materialcloth">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;29:</b> Comparison of denim fabric rendered using a traditional microfacet BRDF (left) and our cloth BRDF (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_cloth.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth.png"></a><div class="imagecaption"><a class="target" name="figure_materialcloth">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;29:</b> Comparison of denim fabric rendered using a traditional microfacet BRDF (left) and our cloth BRDF (right)</div></div></center>
 
 <p></p><p>
 
-Velvet is an interesting use case for a cloth material model. As shown in <a href="#figure_materialvelvet">figure&#xA0;30</a> this type of fabric exhibits strong rim lighting due to forward and backward scattering. These scattering events are caused by fibers standing straight at the surface of the fabric. When the incident light comes from the direction opposite to the view direction, the fibers will forward-scatter the light. Similarly, when the incident light from the same direction as the view direction, the fibers will scatter the light backward.
+Velvet is an interesting use case for a cloth material model. As shown in <a href="#figure_materialvelvet">figure&nbsp;30</a> this type of fabric exhibits strong rim lighting due to forward and backward scattering. These scattering events are caused by fibers standing straight at the surface of the fabric. When the incident light comes from the direction opposite to the view direction, the fibers will forward-scatter the light. Similarly, when the incident light from the same direction as the view direction, the fibers will scatter the light backward.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_cloth_velvet.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_velvet.png"></a><div class="imagecaption"><a class="target" name="figure_materialvelvet">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;30:</b> Velvet fabric showcasing forward and backward scattering</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_cloth_velvet.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_velvet.png"></a><div class="imagecaption"><a class="target" name="figure_materialvelvet">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;30:</b> Velvet fabric showcasing forward and backward scattering</div></div></center>
 
 <p></p><p>
 
@@ -1730,7 +1730,7 @@ Since fibers are flexible, we should in theory model the ability to groom the su
 It is important to note that there are types of fabrics that are still best modeled by hard surface material models. For instance, leather, silk and satin can be recreated using the standard or anisotropic material models.
 
 </p>
-<a class="target" name="clothspecularbrdf">&#xA0;</a><a class="target" name="materialsystem/clothmodel/clothspecularbrdf">&#xA0;</a><a class="target" name="toc4.12.1">&#xA0;</a><h3>Cloth specular BRDF</h3>
+<a class="target" name="clothspecularbrdf">&nbsp;</a><a class="target" name="materialsystem/clothmodel/clothspecularbrdf">&nbsp;</a><a class="target" name="toc4.12.1">&nbsp;</a><h3>Cloth specular BRDF</h3>
 <p>
 
 
@@ -1764,21 +1764,21 @@ f_{r}(v,h,\alpha) = \frac{D_{velvet}(v,h,\alpha)}{4(\NoL + \NoV - (\NoL)(\NoV))}
 
 </p><p>
 
-The implementation of the velvet NDF is presented in <a href="#listing_clothbrdf">listing&#xA0;17</a>, optimized to properly fit in half float formats and to avoid computing a costly cotangent, relying instead on trigonometric identities. Note that we removed the Fresnel component from this BRDF.
+The implementation of the velvet NDF is presented in <a href="#listing_clothbrdf">listing&nbsp;17</a>, optimized to properly fit in half float formats and to avoid computing a costly cotangent, relying instead on trigonometric identities. Note that we removed the Fresnel component from this BRDF.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-function"><span class="hljs-keyword">float</span> <span class="hljs-title">D_Ashikhmin</span><span class="hljs-params">(<span class="hljs-keyword">float</span> roughness, <span class="hljs-keyword">float</span> NoH)</span> </span>{</span>
-<span class="line">    <span class="hljs-comment">// Ashikhmin 2007, &quot;Distribution-based BRDFs&quot;</span></span>
+<span class="line">    <span class="hljs-comment">// Ashikhmin 2007, "Distribution-based BRDFs"</span></span>
 <span class="line">	<span class="hljs-keyword">float</span> a2 = roughness * roughness;</span>
 <span class="line">	<span class="hljs-keyword">float</span> cos2h = NoH * NoH;</span>
 <span class="line">	<span class="hljs-keyword">float</span> sin2h = max(<span class="hljs-number">1.0</span> - cos2h, <span class="hljs-number">0.0078125</span>); <span class="hljs-comment">// 2^(-14/2), so sin2h^2 &gt; 0 in fp16</span></span>
 <span class="line">	<span class="hljs-keyword">float</span> sin4h = sin2h * sin2h;</span>
 <span class="line">	<span class="hljs-keyword">float</span> cot2 = -cos2h / (a2 * sin2h);</span>
 <span class="line">	<span class="hljs-keyword">return</span> <span class="hljs-number">1.0</span> / (PI * (<span class="hljs-number">4.0</span> * a2 + <span class="hljs-number">1.0</span>) * sin4h) * (<span class="hljs-number">4.0</span> * <span class="hljs-built_in">exp</span>(cot2) + sin4h);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clothbrdf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;17:</b> Implementation of Ashikhmin&apos;s velvet NDF in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clothbrdf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;17:</b> Implementation of Ashikhmin's velvet NDF in GLSL</div>
 <p>
 
 
-In [<a href="#citation-estevez17">Estevez17</a>] Estevez and Kulla propose a different NDF (called the &#x201C;Charlie&#x201D; sheen) that is based on an exponentiated sinusoidal instead of an inverted Gaussian. This NDF is appealing for several reasons: its parameterization feels more natural and intuitive, it provides a softer appearance and, as shown in equation \(\ref{charlieNDF}\), its implementation is simpler:
+In [<a href="#citation-estevez17">Estevez17</a>] Estevez and Kulla propose a different NDF (called the “Charlie” sheen) that is based on an exponentiated sinusoidal instead of an inverted Gaussian. This NDF is appealing for several reasons: its parameterization feels more natural and intuitive, it provides a softer appearance and, as shown in equation \(\ref{charlieNDF}\), its implementation is simpler:
 
 </p><p>
 
@@ -1789,28 +1789,28 @@ D(m) = \frac{(2 + \frac{1}{\alpha}) sin(\theta)^{\frac{1}{\alpha}}}{2 \pi}
 </p><p>
 
 [<a href="#citation-estevez17">Estevez17</a>] also presents a new shadowing term that we omit here because of its cost. We instead rely on the visibility term from [<a href="#citation-neubelt13">Neubelt13</a>] (shown in equation \(\ref{clothSpecularBRDF}\) above).
-The implementation of this NDF is presented in <a href="#listing_clothcharliebrdf">listing&#xA0;18</a>, optimized to properly fit in half float formats.
+The implementation of this NDF is presented in <a href="#listing_clothcharliebrdf">listing&nbsp;18</a>, optimized to properly fit in half float formats.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-function"><span class="hljs-keyword">float</span> <span class="hljs-title">D_Charlie</span><span class="hljs-params">(<span class="hljs-keyword">float</span> roughness, <span class="hljs-keyword">float</span> NoH)</span> </span>{</span>
-<span class="line">    <span class="hljs-comment">// Estevez and Kulla 2017, &quot;Production Friendly Microfacet Sheen BRDF&quot;</span></span>
+<span class="line">    <span class="hljs-comment">// Estevez and Kulla 2017, "Production Friendly Microfacet Sheen BRDF"</span></span>
 <span class="line">    <span class="hljs-keyword">float</span> invAlpha  = <span class="hljs-number">1.0</span> / roughness;</span>
 <span class="line">    <span class="hljs-keyword">float</span> cos2h = NoH * NoH;</span>
 <span class="line">    <span class="hljs-keyword">float</span> sin2h = max(<span class="hljs-number">1.0</span> - cos2h, <span class="hljs-number">0.0078125</span>); <span class="hljs-comment">// 2^(-14/2), so sin2h^2 &gt; 0 in fp16</span></span>
 <span class="line">    <span class="hljs-keyword">return</span> (<span class="hljs-number">2.0</span> + invAlpha) * <span class="hljs-built_in">pow</span>(sin2h, invAlpha * <span class="hljs-number">0.5</span>) / (<span class="hljs-number">2.0</span> * PI);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clothcharliebrdf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;18:</b> Implementation of the &#x201C;Charlie&#x201D; NDF in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clothcharliebrdf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;18:</b> Implementation of the “Charlie” NDF in GLSL</div>
 
-<a class="target" name="sheencolor">&#xA0;</a><a class="target" name="materialsystem/clothmodel/clothspecularbrdf/sheencolor">&#xA0;</a><a class="target" name="toc4.12.1.1">&#xA0;</a><h4>Sheen color</h4>
+<a class="target" name="sheencolor">&nbsp;</a><a class="target" name="materialsystem/clothmodel/clothspecularbrdf/sheencolor">&nbsp;</a><a class="target" name="toc4.12.1.1">&nbsp;</a><h4>Sheen color</h4>
 <p>
 
 
-To offer better control over the appearance of cloth and to give users the ability to recreate two-tone specular materials, we introduce the ability to directly modify the specular reflectance. <a href="#figure_materialclothsheen">Figure&#xA0;31</a> shows an example of using the parameter we call &#x201C;sheen color&#x201D;.
+To offer better control over the appearance of cloth and to give users the ability to recreate two-tone specular materials, we introduce the ability to directly modify the specular reflectance. <a href="#figure_materialclothsheen">Figure&nbsp;31</a> shows an example of using the parameter we call “sheen color”.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_cloth_sheen.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_sheen.png"></a><div class="imagecaption"><a class="target" name="figure_materialclothsheen">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;31:</b> Blue fabric without (left) and with (right) sheen</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_cloth_sheen.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_sheen.png"></a><div class="imagecaption"><a class="target" name="figure_materialclothsheen">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;31:</b> Blue fabric without (left) and with (right) sheen</div></div></center>
 
 <p></p>
-<a class="target" name="clothdiffusebrdf">&#xA0;</a><a class="target" name="materialsystem/clothmodel/clothdiffusebrdf">&#xA0;</a><a class="target" name="toc4.12.2">&#xA0;</a><h3>Cloth diffuse BRDF</h3>
+<a class="target" name="clothdiffusebrdf">&nbsp;</a><a class="target" name="materialsystem/clothmodel/clothdiffusebrdf">&nbsp;</a><a class="target" name="toc4.12.2">&nbsp;</a><h3>Cloth diffuse BRDF</h3>
 <p>
 
 
@@ -1828,7 +1828,7 @@ f_{d}(v,h) = \frac{c_{diff}}{\pi}(1 - F(v,h))
 
 </p><p>
 
-Where \(F(v,h)\) is the Fresnel term of the cloth specular BRDF in equation \(\ref{clothSpecularBRDF}\). In practice we&apos;ve opted to leave out the \(1 - F(v, h)\) term in the diffuse component. The effect is a bit subtle and we deemed it wasn&apos;t worth the added cost.
+Where \(F(v,h)\) is the Fresnel term of the cloth specular BRDF in equation \(\ref{clothSpecularBRDF}\). In practice we've opted to leave out the \(1 - F(v, h)\) term in the diffuse component. The effect is a bit subtle and we deemed it wasn't worth the added cost.
 
 </p><p>
 
@@ -1843,15 +1843,15 @@ f_{d}(v,h) = \frac{c_{diff}}{\pi}(1 - F(v,h)) \left&lt; \NoL + \frac{w}{(1 + w)^
 </p><p>
 
 Where \(w\) is a value between 0 and 1 defining by how much the diffuse light should wrap around the terminator. To avoid introducing another parameter, we fix \(w = 0.5\). Note that with wrap diffuse lighting, the diffuse term must not be multiplied by \(\NoL\). The effect of this cheap
-subsurface scattering approximation can be seen in <a href="#figure_materialclothsubsurface">figure&#xA0;32</a>.
+subsurface scattering approximation can be seen in <a href="#figure_materialclothsubsurface">figure&nbsp;32</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_cloth_subsurface.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_subsurface.png"></a><div class="imagecaption"><a class="target" name="figure_materialclothsubsurface">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;32:</b> White cloth (left column) vs white cloth with brown subsurface scattering (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_cloth_subsurface.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_subsurface.png"></a><div class="imagecaption"><a class="target" name="figure_materialclothsubsurface">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;32:</b> White cloth (left column) vs white cloth with brown subsurface scattering (right)</div></div></center>
 
 <p></p><p>
 
-The complete implementation of our cloth BRDF, including sheen color and optional subsurface scattering, can be found in <a href="#listing_clothfullbrdf">listing&#xA0;19</a>.
+The complete implementation of our cloth BRDF, including sheen color and optional subsurface scattering, can be found in <a href="#listing_clothfullbrdf">listing&nbsp;19</a>.
 
 </p><pre class="listing tilde"><code><span class="line">// specular BRDF</span>
 <span class="line">float D = distributionCloth(<span class="hljs-name">roughness</span>, NoH)<span class="hljs-comment">;</span></span>
@@ -1875,13 +1875,13 @@ The complete implementation of our cloth BRDF, including sheen color and optiona
 <span class="line">#else</span>
 <span class="line">vec3 color = Fd + Fr<span class="hljs-comment">;</span></span>
 <span class="line">color *= (<span class="hljs-name">lightIntensity</span> * lightAttenuation * NoL) * lightColor<span class="hljs-comment">;</span></span>
-<span class="line">#endif</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clothfullbrdf">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;19:</b> Implementation of our cloth BRDF in GLSL</div>
+<span class="line">#endif</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clothfullbrdf">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;19:</b> Implementation of our cloth BRDF in GLSL</div>
 
-<a class="target" name="clothparameterization">&#xA0;</a><a class="target" name="materialsystem/clothmodel/clothparameterization">&#xA0;</a><a class="target" name="toc4.12.3">&#xA0;</a><h3>Cloth parameterization</h3>
+<a class="target" name="clothparameterization">&nbsp;</a><a class="target" name="materialsystem/clothmodel/clothparameterization">&nbsp;</a><a class="target" name="toc4.12.3">&nbsp;</a><h3>Cloth parameterization</h3>
 <p>
 
 
-The cloth material model encompasses all the parameters previously defined for the standard material mode except for <em class="underscore">metallic</em> and <em class="underscore">reflectance</em>. Two extra parameters described in <a href="#table_clothparameters">table&#xA0;8</a> are also available.
+The cloth material model encompasses all the parameters previously defined for the standard material mode except for <em class="underscore">metallic</em> and <em class="underscore">reflectance</em>. Two extra parameters described in <a href="#table_clothparameters">table&nbsp;8</a> are also available.
 
 </p><p>
 
@@ -1889,14 +1889,14 @@ The cloth material model encompasses all the parameters previously defined for t
 <table class="table"><tbody><tr><th style="text-align:right"> Parameter </th><th style="text-align:left"> Definition </th></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">SheenColor</strong> </td><td style="text-align:left"> Specular tint to create two-tone specular fabrics (defaults to 0.04 to match the standard reflectance) </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">SubsurfaceColor</strong> </td><td style="text-align:left"> Tint for the diffuse color after scattering and absorption through the material </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_clothparameters">&#xA0;</a><b style="font-style:normal;">Table&#xA0;8:</b> Cloth model parameters</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_clothparameters">&nbsp;</a><b style="font-style:normal;">Table&nbsp;8:</b> Cloth model parameters</div></div>
 
 <p></p><p>
 
 To create a velvet-like material, the base color can be set to black (or a dark color). Chromaticity information should instead be set on the sheen color. To create more common fabrics such as denim, cotton, etc. use the base color for chromaticity and use the default sheen color or set the sheen color to the luminance of the base color.
 
 </p>
-<a class="target" name="lighting">&#xA0;</a><a class="target" name="lighting">&#xA0;</a><a class="target" name="toc5">&#xA0;</a><h1>Lighting</h1>
+<a class="target" name="lighting">&nbsp;</a><a class="target" name="lighting">&nbsp;</a><a class="target" name="toc5">&nbsp;</a><h1>Lighting</h1>
 <p>
 
 
@@ -1904,7 +1904,7 @@ The correctness and coherence of the lighting environment is paramount to achiev
 
 </p><p>
 
-The Unreal Engine, for instance, lets artists specify the &#x201C;brightness&#x201D; of a point light in lumens, a unit of luminous power. The brightness of directional lights is however expressed using an arbitrary unnamed unit. To match the brightness of a point light with a luminous power of 5,000 lumens, the artist must use a directional light of brightness 10. This kind of mismatch makes it difficult for artists to maintain the visual integrity of a scene when adding, removing or modifying lights.
+The Unreal Engine, for instance, lets artists specify the “brightness” of a point light in lumens, a unit of luminous power. The brightness of directional lights is however expressed using an arbitrary unnamed unit. To match the brightness of a point light with a luminous power of 5,000 lumens, the artist must use a directional light of brightness 10. This kind of mismatch makes it difficult for artists to maintain the visual integrity of a scene when adding, removing or modifying lights.
 Using solely arbitrary units is a coherent solution but it makes reusing lighting rigs a difficult task. For instance, an outdoor scene will use a directional light of brightness 10 as the sun and all other lights will be defined relative to that value. Moving these lights to an indoor environment would make them too bright.
 
 </p><p>
@@ -1921,14 +1921,14 @@ Our goal is therefore to make all lighting correct by default, while giving arti
 
 </p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-localprobesmobile">&#xA0;</a><sup>2</sup> Local light probes might be too expensive to support on mobile, we will first focus our efforts on distant light probes set at infinity
+</p><div class="endnote"><a class="target" name="endnote-localprobesmobile">&nbsp;</a><sup>2</sup> Local light probes might be too expensive to support on mobile, we will first focus our efforts on distant light probes set at infinity
 </div>
 <p></p>
-<a class="target" name="units">&#xA0;</a><a class="target" name="lighting/units">&#xA0;</a><a class="target" name="toc5.1">&#xA0;</a><h2>Units</h2>
+<a class="target" name="units">&nbsp;</a><a class="target" name="lighting/units">&nbsp;</a><a class="target" name="toc5.1">&nbsp;</a><h2>Units</h2>
 <p>
 
 
-The following sections will discuss how to implement various types of lights and the proposed equations make use of different symbols and units summarized in <a href="#table_lightunits">table&#xA0;9</a>.
+The following sections will discuss how to implement various types of lights and the proposed equations make use of different symbols and units summarized in <a href="#table_lightunits">table&nbsp;9</a>.
 
 </p><p>
 
@@ -1941,7 +1941,7 @@ The following sections will discuss how to implement various types of lights and
 <tr><td style="text-align:right"> Radiant power </td><td style="text-align:center"> \(\Phi_e\) </td><td style="text-align:left"> Watt (\(W\)) </td></tr>
 <tr><td style="text-align:right"> Luminous efficacy </td><td style="text-align:center"> \(\eta\) </td><td style="text-align:left"> Lumens per watt (\(\frac{lm}{W}\)) </td></tr>
 <tr><td style="text-align:right"> Luminous efficiency </td><td style="text-align:center"> \(V\) </td><td style="text-align:left"> Percentage (%) </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_lightunits">&#xA0;</a><b style="font-style:normal;">Table&#xA0;9:</b> Photometric units</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_lightunits">&nbsp;</a><b style="font-style:normal;">Table&nbsp;9:</b> Photometric units</div></div>
 
 <p></p><p>
 
@@ -1953,7 +1953,7 @@ The easiest way to achieve lighting coherency is to adopt physical light units.
 
 </p><p>
 
-<a href="#table_lighttypesunits">Table&#xA0;10</a> shows the light unit associated with each type of light we intend to support.
+<a href="#table_lighttypesunits">Table&nbsp;10</a> shows the light unit associated with each type of light we intend to support.
 
 </p><p>
 
@@ -1966,7 +1966,7 @@ The easiest way to achieve lighting coherency is to adopt physical light units.
 <tr><td style="text-align:right"> Masked photometric light </td><td style="text-align:left"> Luminous power (\(lm\)) </td></tr>
 <tr><td style="text-align:right"> Area light </td><td style="text-align:left"> Luminous power (\(lm\)) </td></tr>
 <tr><td style="text-align:right"> Image based light </td><td style="text-align:left"> Luminance (\(\frac{cd}{m^2}\)) </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_lighttypesunits">&#xA0;</a><b style="font-style:normal;">Table&#xA0;10:</b> Intensity unity for each light type</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_lighttypesunits">&nbsp;</a><b style="font-style:normal;">Table&nbsp;10:</b> Intensity unity for each light type</div></div>
 
 <p></p><p>
 
@@ -1978,7 +1978,7 @@ Even though commercially available light bulbs often display their brightness in
 
 </p><p>
 
-However, since artists might be accustomed to gauging a light&apos;s brightness by its power, we should allow users to use the power unit to define the brightness of a light. The conversion is presented in equation \(\ref{radiantPowerToLuminousPower}\).
+However, since artists might be accustomed to gauging a light's brightness by its power, we should allow users to use the power unit to define the brightness of a light. The conversion is presented in equation \(\ref{radiantPowerToLuminousPower}\).
 
 </p><p>
 
@@ -1998,7 +1998,7 @@ $$\begin{equation}\label{radiantPowerLuminousEfficiency}
 
 </p><p>
 
-<a href="#table_lighttypesefficacy">Table&#xA0;11</a> can be used as a reference to convert watts to lumens using either the luminous efficacy or the luminous efficiency of various types of lights. More specific values are available on Wikipedia&apos;s <a href="http://en.wikipedia.org/wiki/Luminous_efficacy">luminous efficacy</a> page.
+<a href="#table_lighttypesefficacy">Table&nbsp;11</a> can be used as a reference to convert watts to lumens using either the luminous efficacy or the luminous efficiency of various types of lights. More specific values are available on Wikipedia's <a href="http://en.wikipedia.org/wiki/Luminous_efficacy">luminous efficacy</a> page.
 
 </p><p>
 
@@ -2007,21 +2007,21 @@ $$\begin{equation}\label{radiantPowerLuminousEfficiency}
 <tr><td style="text-align:right"> Incandescent </td><td style="text-align:center"> 14-35 </td><td style="text-align:left"> 2-5% </td></tr>
 <tr><td style="text-align:right"> LED </td><td style="text-align:center"> 28-100 </td><td style="text-align:left"> 4-15% </td></tr>
 <tr><td style="text-align:right"> Fluorescent </td><td style="text-align:center"> 60-100 </td><td style="text-align:left"> 9-15% </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_lighttypesefficacy">&#xA0;</a><b style="font-style:normal;">Table&#xA0;11:</b> Efficacy and efficiency of various light types</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_lighttypesefficacy">&nbsp;</a><b style="font-style:normal;">Table&nbsp;11:</b> Efficacy and efficiency of various light types</div></div>
 
 <p></p>
-<a class="target" name="lightunitsvalidation">&#xA0;</a><a class="target" name="lighting/units/lightunitsvalidation">&#xA0;</a><a class="target" name="toc5.1.1">&#xA0;</a><h3>Light units validation</h3>
+<a class="target" name="lightunitsvalidation">&nbsp;</a><a class="target" name="lighting/units/lightunitsvalidation">&nbsp;</a><a class="target" name="toc5.1.1">&nbsp;</a><h3>Light units validation</h3>
 <p>
 
 
 One of the big advantages of using physical light units is the ability to physically validate our equations. We can use specialized devices to measure three light units.
 
 </p>
-<a class="target" name="illuminance">&#xA0;</a><a class="target" name="lighting/units/lightunitsvalidation/illuminance">&#xA0;</a><a class="target" name="toc5.1.1.1">&#xA0;</a><h4>Illuminance</h4>
+<a class="target" name="illuminance">&nbsp;</a><a class="target" name="lighting/units/lightunitsvalidation/illuminance">&nbsp;</a><a class="target" name="toc5.1.1.1">&nbsp;</a><h4>Illuminance</h4>
 <p>
 
 
-The illuminance reaching a surface can be measured using an incident light meter. For our tests, we use a <a href="http://www.sekonic.com/products/l-478d/overview.aspx">Sekonic L-478D</a>, shown in <a href="#figure_sekonic">figure&#xA0;33</a>.
+The illuminance reaching a surface can be measured using an incident light meter. For our tests, we use a <a href="http://www.sekonic.com/products/l-478d/overview.aspx">Sekonic L-478D</a>, shown in <a href="#figure_sekonic">figure&nbsp;33</a>.
 
 </p><p>
 
@@ -2029,21 +2029,21 @@ The incident light meter uses a white diffuse dome to capture the illuminance re
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/photo_light_meter.jpg" target="_blank"><img class="markdeep" src="images/photo_light_meter.jpg"></a><div class="imagecaption"><a class="target" name="figure_sekonic">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;33:</b> Sekonic L-478D incident light meter</div></div></center>
+</p><center><div class="image" style=""><a href="images/photo_light_meter.jpg" target="_blank"><img class="markdeep" src="images/photo_light_meter.jpg"></a><div class="imagecaption"><a class="target" name="figure_sekonic">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;33:</b> Sekonic L-478D incident light meter</div></div></center>
 
 <p></p>
-<a class="target" name="luminance">&#xA0;</a><a class="target" name="lighting/units/lightunitsvalidation/luminance">&#xA0;</a><a class="target" name="toc5.1.1.2">&#xA0;</a><h4>Luminance</h4>
+<a class="target" name="luminance">&nbsp;</a><a class="target" name="lighting/units/lightunitsvalidation/luminance">&nbsp;</a><a class="target" name="toc5.1.1.2">&nbsp;</a><h4>Luminance</h4>
 <p>
 
 
-The luminance at a surface, or the product of the incident light and the surface, can be measured using a luminance meter, also often called a spot meter. While incident light meters use a diffuse hemisphere to capture light from all directions, a spot meter uses a shield to measure incident light from a single direction. For our tests, we use a <a href="http://www.sekonic.com/products/l-478dr/accessories/np-finder-5-degree-for-l-478.aspx">Sekonic 5&#xB0; Viewfinder</a> that can replace the diffuser on the L-478D to measure luminance in a 5&#xB0; cone.
+The luminance at a surface, or the product of the incident light and the surface, can be measured using a luminance meter, also often called a spot meter. While incident light meters use a diffuse hemisphere to capture light from all directions, a spot meter uses a shield to measure incident light from a single direction. For our tests, we use a <a href="http://www.sekonic.com/products/l-478dr/accessories/np-finder-5-degree-for-l-478.aspx">Sekonic 5° Viewfinder</a> that can replace the diffuser on the L-478D to measure luminance in a 5° cone.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/photo_incident_light_meter.jpg" target="_blank"><img class="markdeep" src="images/photo_incident_light_meter.jpg"></a><div class="imagecaption">Sekonic L-478D working as a luminance meter using a special viewfinder</div></div></center>
+</p><center><div class="image" style=""><a href="images/photo_incident_light_meter.jpg" target="_blank"><img class="markdeep" src="images/photo_incident_light_meter.jpg"></a><div class="imagecaption">Sekonic L-478D working as a luminance meter using a special viewfinder</div></div></center>
 
 <p></p>
-<a class="target" name="luminousintensity">&#xA0;</a><a class="target" name="lighting/units/lightunitsvalidation/luminousintensity">&#xA0;</a><a class="target" name="toc5.1.1.3">&#xA0;</a><h4>Luminous intensity</h4>
+<a class="target" name="luminousintensity">&nbsp;</a><a class="target" name="lighting/units/lightunitsvalidation/luminousintensity">&nbsp;</a><a class="target" name="toc5.1.1.3">&nbsp;</a><h4>Luminous intensity</h4>
 <p>
 
 
@@ -2056,7 +2056,7 @@ I = E \cdot d^2
 \end{equation}$$
 
 </p>
-<a class="target" name="directlighting">&#xA0;</a><a class="target" name="lighting/directlighting">&#xA0;</a><a class="target" name="toc5.2">&#xA0;</a><h2>Direct lighting</h2>
+<a class="target" name="directlighting">&nbsp;</a><a class="target" name="lighting/directlighting">&nbsp;</a><a class="target" name="toc5.2">&nbsp;</a><h2>Direct lighting</h2>
 <p>
 
 
@@ -2069,19 +2069,19 @@ L_{out} = f(v,l)E
 \end{equation}$$
 
 </p>
-<a class="target" name="directionallights">&#xA0;</a><a class="target" name="lighting/directlighting/directionallights">&#xA0;</a><a class="target" name="toc5.2.1">&#xA0;</a><h3>Directional lights</h3>
+<a class="target" name="directionallights">&nbsp;</a><a class="target" name="lighting/directlighting/directionallights">&nbsp;</a><a class="target" name="toc5.2.1">&nbsp;</a><h3>Directional lights</h3>
 <p>
 
 
-The main purpose of directional lights is to recreate important light sources for outdoor environment, i.e. the sun and/or the moon. While directional lights do not truly exist in the physical world, any light source sufficiently far from the light receptor can be assumed to be directional (i.e. all the incident light rays are parallel, as shown in  <a href="#figure_directionallight">figure&#xA0;34</a>).
+The main purpose of directional lights is to recreate important light sources for outdoor environment, i.e. the sun and/or the moon. While directional lights do not truly exist in the physical world, any light source sufficiently far from the light receptor can be assumed to be directional (i.e. all the incident light rays are parallel, as shown in  <a href="#figure_directionallight">figure&nbsp;34</a>).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_directional_light.png" target="_blank"><img class="markdeep" src="images/diagram_directional_light.png"></a><div class="imagecaption"><a class="target" name="figure_directionallight">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;34:</b> Interaction between a directional light and a surface. The light source is a virtual construct that can only be represented by a direction</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_directional_light.png" target="_blank"><img class="markdeep" src="images/diagram_directional_light.png"></a><div class="imagecaption"><a class="target" name="figure_directionallight">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;34:</b> Interaction between a directional light and a surface. The light source is a virtual construct that can only be represented by a direction</div></div></center>
 
 <p></p><p>
 
-This approximation proves to work incredibly well for the diffuse response of a surface but the specular response is incorrect. The Frostbite engine solves this problem by treating the &#x201C;sun&#x201D; directional light as a disc area light. However, our tests have shown that the quality increase does not justify the added computational costs.
+This approximation proves to work incredibly well for the diffuse response of a surface but the specular response is incorrect. The Frostbite engine solves this problem by treating the “sun” directional light as a disc area light. However, our tests have shown that the quality increase does not justify the added computational costs.
 
 </p><p>
 
@@ -2099,7 +2099,7 @@ In the simplified luminance equation \(\ref{directionalLuminanceEquation}\), \(E
 
 </p><p>
 
-<a href="#table_sunskyilluminance">Table&#xA0;12</a> provides useful reference values for the sun and sky illumination, measured<sup><a href="#endnote-illuminancemeasures">3</a></sup> on a clear day in March, in California.
+<a href="#table_sunskyilluminance">Table&nbsp;12</a> provides useful reference values for the sun and sky illumination, measured<sup><a href="#endnote-illuminancemeasures">3</a></sup> on a clear day in March, in California.
 
 </p><p>
 
@@ -2108,11 +2108,11 @@ In the simplified luminance equation \(\ref{directionalLuminanceEquation}\), \(E
 <tr><td style="text-align:right"> \(Sky_{\bot} + Sun_{\bot}\) </td><td style="text-align:right"> 120,000 </td><td style="text-align:right"> 130,000 </td><td style="text-align:right"> 90,000 </td></tr>
 <tr><td style="text-align:right"> \(Sky_{\bot}\) </td><td style="text-align:right"> 20,000 </td><td style="text-align:right"> 25,000 </td><td style="text-align:right"> 9,000 </td></tr>
 <tr><td style="text-align:right"> \(Sun_{\bot}\) </td><td style="text-align:right"> 100,000 </td><td style="text-align:right"> 105,000 </td><td style="text-align:right"> 81,000 </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_sunskyilluminance">&#xA0;</a><b style="font-style:normal;">Table&#xA0;12:</b> Illuminance values in \(lx\) (a full moon has an illuminance of 1 \(lx\))</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_sunskyilluminance">&nbsp;</a><b style="font-style:normal;">Table&nbsp;12:</b> Illuminance values in \(lx\) (a full moon has an illuminance of 1 \(lx\))</div></div>
 
 <p></p><p>
 
-Dynamic directional lights are particularly cheap to evaluate at runtime, as shown in <a href="#listing_glsldirectionallight">listing&#xA0;20</a>.
+Dynamic directional lights are particularly cheap to evaluate at runtime, as shown in <a href="#listing_glsldirectionallight">listing&nbsp;20</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> l = <span class="hljs-built_in">normalize</span>(-lightDirection);</span>
 <span class="line"><span class="hljs-type">float</span> NoL = <span class="hljs-built_in">clamp</span>(<span class="hljs-built_in">dot</span>(n, l), <span class="hljs-number">0.0</span>, <span class="hljs-number">1.0</span>);</span>
@@ -2120,22 +2120,22 @@ Dynamic directional lights are particularly cheap to evaluate at runtime, as sho
 <span class="line"><span class="hljs-comment">// lightIntensity is the illuminance</span></span>
 <span class="line"><span class="hljs-comment">// at perpendicular incidence in lux</span></span>
 <span class="line"><span class="hljs-type">float</span> illuminance = lightIntensity * NoL;</span>
-<span class="line"><span class="hljs-type">vec3</span> luminance = BSDF(v, l) * illuminance;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_glsldirectionallight">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;20:</b> Implementation of directional lights in GLSL</div>
+<span class="line"><span class="hljs-type">vec3</span> luminance = BSDF(v, l) * illuminance;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_glsldirectionallight">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;20:</b> Implementation of directional lights in GLSL</div>
 <p>
 
 
-<a href="#figure_directionallighttest">Figure&#xA0;35</a> shows the effect of lighting a simple scene with a directional light setup to approximate a midday Sun (illuminance set to 110,000 \(lx\)). For illustration purposes, only direct lighting is shown.
+<a href="#figure_directionallighttest">Figure&nbsp;35</a> shows the effect of lighting a simple scene with a directional light setup to approximate a midday Sun (illuminance set to 110,000 \(lx\)). For illustration purposes, only direct lighting is shown.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_directional_light.png" target="_blank"><img class="markdeep" src="images/screenshot_directional_light.png"></a><div class="imagecaption"><a class="target" name="figure_directionallighttest">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;35:</b> Series of dielectric materials of varying roughness under a directional light</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_directional_light.png" target="_blank"><img class="markdeep" src="images/screenshot_directional_light.png"></a><div class="imagecaption"><a class="target" name="figure_directionallighttest">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;35:</b> Series of dielectric materials of varying roughness under a directional light</div></div></center>
 
 <p></p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-illuminancemeasures">&#xA0;</a><sup>3</sup> Measurements taken with an incident light meter (Sekonic L-478D)
+</p><div class="endnote"><a class="target" name="endnote-illuminancemeasures">&nbsp;</a><sup>3</sup> Measurements taken with an incident light meter (Sekonic L-478D)
 </div>
 <p></p>
-<a class="target" name="punctuallights">&#xA0;</a><a class="target" name="lighting/directlighting/punctuallights">&#xA0;</a><a class="target" name="toc5.2.2">&#xA0;</a><h3>Punctual lights</h3>
+<a class="target" name="punctuallights">&nbsp;</a><a class="target" name="lighting/directlighting/punctuallights">&nbsp;</a><a class="target" name="toc5.2.2">&nbsp;</a><h3>Punctual lights</h3>
 <p>
 
 
@@ -2171,19 +2171,19 @@ E = L_{in} \left&lt; \NoL \right&gt; = \frac{I}{d^2} \left&lt; \NoL \right&gt;
 The difference between point and spot lights lies in how \(E\) is computed, and in particular how the luminous intensity \(I\) is computed from the luminous power \(\Phi\).
 
 </p>
-<a class="target" name="pointlights">&#xA0;</a><a class="target" name="lighting/directlighting/punctuallights/pointlights">&#xA0;</a><a class="target" name="toc5.2.2.1">&#xA0;</a><h4>Point lights</h4>
+<a class="target" name="pointlights">&nbsp;</a><a class="target" name="lighting/directlighting/punctuallights/pointlights">&nbsp;</a><a class="target" name="toc5.2.2.1">&nbsp;</a><h4>Point lights</h4>
 <p>
 
 
-A point light is defined only by a position in space, as shown in <a href="#figure_pointlight">figure&#xA0;36</a>.
+A point light is defined only by a position in space, as shown in <a href="#figure_pointlight">figure&nbsp;36</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_point_light.png" target="_blank"><img class="markdeep" src="images/diagram_point_light.png"></a><div class="imagecaption"><a class="target" name="figure_pointlight">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;36:</b> Interaction between a point light and a surface. The attenuation only depends on the distance to the light</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_point_light.png" target="_blank"><img class="markdeep" src="images/diagram_point_light.png"></a><div class="imagecaption"><a class="target" name="figure_pointlight">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;36:</b> Interaction between a point light and a surface. The attenuation only depends on the distance to the light</div></div></center>
 
 <p></p><p>
 
-The luminous power of a point light is calculated by integrating the luminous intensity over the light&apos;s solid angle, as show in equation \(\ref{pointLightLuminousPower}\). The luminous intensity can then be easily derived from the luminous power.
+The luminous power of a point light is calculated by integrating the luminous intensity over the light's solid angle, as show in equation \(\ref{pointLightLuminousPower}\). The luminous intensity can then be easily derived from the luminous power.
 
 </p><p>
 
@@ -2204,26 +2204,26 @@ L_{out} = f(v,l) \frac{\Phi}{4 \pi d^2} \left&lt; \NoL \right&gt;
 
 </p><p>
 
-<a href="#figure_pointlighttest">Figure&#xA0;37</a> shows the effect of lighting a simple scene with a point light subject to distance attenuation. Light falloff is exaggerated for illustration purposes.
+<a href="#figure_pointlighttest">Figure&nbsp;37</a> shows the effect of lighting a simple scene with a point light subject to distance attenuation. Light falloff is exaggerated for illustration purposes.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_point_light.png" target="_blank"><img class="markdeep" src="images/screenshot_point_light.png"></a><div class="imagecaption"><a class="target" name="figure_pointlighttest">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;37:</b> Inverse square law applied to point lights evaluation</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_point_light.png" target="_blank"><img class="markdeep" src="images/screenshot_point_light.png"></a><div class="imagecaption"><a class="target" name="figure_pointlighttest">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;37:</b> Inverse square law applied to point lights evaluation</div></div></center>
 
 <p></p>
-<a class="target" name="spotlights">&#xA0;</a><a class="target" name="lighting/directlighting/punctuallights/spotlights">&#xA0;</a><a class="target" name="toc5.2.2.2">&#xA0;</a><h4>Spot lights</h4>
+<a class="target" name="spotlights">&nbsp;</a><a class="target" name="lighting/directlighting/punctuallights/spotlights">&nbsp;</a><a class="target" name="toc5.2.2.2">&nbsp;</a><h4>Spot lights</h4>
 <p>
 
 
-A spot light is defined by a position in space, a direction vector and two cone angles, \( \theta_{inner} \) and \( \theta_{outer} \) (see <a href="#figure_spotlight">figure&#xA0;38</a>). These two angles are used to define the angular falloff attenuation of the spot light. The light evaluation function of a spot light must therefore take into account both the inverse square law and these two angles to properly evaluate the luminance attenuation.
+A spot light is defined by a position in space, a direction vector and two cone angles, \( \theta_{inner} \) and \( \theta_{outer} \) (see <a href="#figure_spotlight">figure&nbsp;38</a>). These two angles are used to define the angular falloff attenuation of the spot light. The light evaluation function of a spot light must therefore take into account both the inverse square law and these two angles to properly evaluate the luminance attenuation.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_spot_light.png" target="_blank"><img class="markdeep" src="images/diagram_spot_light.png"></a><div class="imagecaption"><a class="target" name="figure_spotlight">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;38:</b> Interaction between a spot light and a surface. The attenuation depends on the distance to the light and the angle between the surface the spot light&apos;s direction vector</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_spot_light.png" target="_blank"><img class="markdeep" src="images/diagram_spot_light.png"></a><div class="imagecaption"><a class="target" name="figure_spotlight">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;38:</b> Interaction between a spot light and a surface. The attenuation depends on the distance to the light and the angle between the surface the spot light's direction vector</div></div></center>
 
 <p></p><p>
 
-Equation \( \ref{spotLightLuminousPower} \) describes how the luminous power of a spot light can be calculated in a similar fashion to point lights, using \( \theta_{outer} \) the outer angle of the spot light&apos;s cone in the range [0..\(\pi\)].
+Equation \( \ref{spotLightLuminousPower} \) describes how the luminous power of a spot light can be calculated in a similar fashion to point lights, using \( \theta_{outer} \) the outer angle of the spot light's cone in the range [0..\(\pi\)].
 
 </p><p>
 
@@ -2234,11 +2234,11 @@ I = \frac{\Phi}{2 \pi (1 - cos\frac{\theta_{outer}}{2})}
 
 </p><p>
 
-While this formulation is physically correct, it makes spot lights a little difficult to use: changing the outer angle of the cone changes the illumination levels. <a href="#figure_spotlighttestfocused">Figure&#xA0;39</a> shows the same scene lit by a spot light, with an outer angle of 55&#xB0; and an outer angle of 15&#xB0;. Observes how the illumination level increases as the cone aperture decreases.
+While this formulation is physically correct, it makes spot lights a little difficult to use: changing the outer angle of the cone changes the illumination levels. <a href="#figure_spotlighttestfocused">Figure&nbsp;39</a> shows the same scene lit by a spot light, with an outer angle of 55° and an outer angle of 15°. Observes how the illumination level increases as the cone aperture decreases.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_spot_light_focused.png" target="_blank"><img class="markdeep" src="images/screenshot_spot_light_focused.png"></a><div class="imagecaption"><a class="target" name="figure_spotlighttestfocused">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;39:</b> Comparison of spot light outer angles, 55&#xB0; (left) and 15&#xB0; (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_spot_light_focused.png" target="_blank"><img class="markdeep" src="images/screenshot_spot_light_focused.png"></a><div class="imagecaption"><a class="target" name="figure_spotlighttestfocused">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;39:</b> Comparison of spot light outer angles, 55° (left) and 15° (right)</div></div></center>
 
 <p></p><p>
 
@@ -2253,15 +2253,15 @@ I = \frac{\Phi}{\pi} \\
 
 </p><p>
 
-With this new formulation to compute the luminous intensity, the test scene in <a href="#figure_spotlighttest">figure&#xA0;40</a> exhibits similar illumination levels with both cone apertures.
+With this new formulation to compute the luminous intensity, the test scene in <a href="#figure_spotlighttest">figure&nbsp;40</a> exhibits similar illumination levels with both cone apertures.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_spot_light.png" target="_blank"><img class="markdeep" src="images/screenshot_spot_light.png"></a><div class="imagecaption"><a class="target" name="figure_spotlighttest">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;40:</b> Comparison of spot light outer angles, 55&#xB0; (left) and 15&#xB0; (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_spot_light.png" target="_blank"><img class="markdeep" src="images/screenshot_spot_light.png"></a><div class="imagecaption"><a class="target" name="figure_spotlighttest">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;40:</b> Comparison of spot light outer angles, 55° (left) and 15° (right)</div></div></center>
 
 <p></p><p>
 
-This new formulation can also be considered physically based if the spot&apos;s reflector is replaced with a matte, diffuse mask that absorbs light perfectly.
+This new formulation can also be considered physically based if the spot's reflector is replaced with a matte, diffuse mask that absorbs light perfectly.
 
 </p><p>
 
@@ -2282,7 +2282,7 @@ The spot light evaluation function can be expressed in two ways:
 
 <p></p><p>
 
-The term \( \lambda(l) \) in equations \( \ref{spotAbsorber} \) and \( \ref{spotReflector} \) is the spot&apos;s angle attenuation factor described in equation
+The term \( \lambda(l) \) in equations \( \ref{spotAbsorber} \) and \( \ref{spotReflector} \) is the spot's angle attenuation factor described in equation
  \( \ref{spotAngleAtt} \) below.
 
 </p><p>
@@ -2292,7 +2292,7 @@ $$\begin{equation}\label{spotAngleAtt}
 \end{equation}$$
 
 </p>
-<a class="target" name="attenuationfunction">&#xA0;</a><a class="target" name="lighting/directlighting/punctuallights/attenuationfunction">&#xA0;</a><a class="target" name="toc5.2.2.3">&#xA0;</a><h4>Attenuation function</h4>
+<a class="target" name="attenuationfunction">&nbsp;</a><a class="target" name="lighting/directlighting/punctuallights/attenuationfunction">&nbsp;</a><a class="target" name="toc5.2.2.3">&nbsp;</a><h4>Attenuation function</h4>
 <p>
 
 
@@ -2301,7 +2301,7 @@ A proper evaluation of the inverse square law attenuation factor is mandatory fo
 </p><p>
 
 </p><ol start="1">
-<li class="number">The division by the squared distance can lead to divides by 0 when objects intersect or &#x201C;touch&#x201D; light sources.
+<li class="number">The division by the squared distance can lead to divides by 0 when objects intersect or “touch” light sources.
 
 <p></p><p>
 
@@ -2324,7 +2324,7 @@ We can solve the second issue by introducing an influence radius for each light.
 
 </p><p>
 
-Mathematically, the illuminance of a light should smoothly reach zero at the limit defined by the influence radius. [<a href="#citation-karis13b">Karis13b</a>] proposes to window the inverse square function in such a way that the majority of the light&apos;s influence remains unaffected. The proposed windowing is described in equation \(\ref{attenuationWindowing}\), where \(r\) is the light&apos;s radius of influence.
+Mathematically, the illuminance of a light should smoothly reach zero at the limit defined by the influence radius. [<a href="#citation-karis13b">Karis13b</a>] proposes to window the inverse square function in such a way that the majority of the light's influence remains unaffected. The proposed windowing is described in equation \(\ref{attenuationWindowing}\), where \(r\) is the light's radius of influence.
 
 </p><p>
 
@@ -2334,7 +2334,7 @@ E = \frac{I}{max(d^2, {0.01}^2)} \left&lt; 1 - \frac{d^4}{r^4} \right&gt;^2
 
 </p><p>
 
-<a href="#listing_glslpunctuallight">Listing&#xA0;21</a> demonstrates how to implement physically based punctual lights in GLSL. Note that the light intensity used in this piece of code is the luminous intensity \(I\) in \(cd\), converted from the luminous power  CPU-side. This snippet is not optimized and some of the computations can be offloaded to the CPU (for instance the square of the light&apos;s inverse falloff radius, or the spot scale and angle).
+<a href="#listing_glslpunctuallight">Listing&nbsp;21</a> demonstrates how to implement physically based punctual lights in GLSL. Note that the light intensity used in this piece of code is the luminous intensity \(I\) in \(cd\), converted from the luminous power  CPU-side. This snippet is not optimized and some of the computations can be offloaded to the CPU (for instance the square of the light's inverse falloff radius, or the spot scale and angle).
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">float</span> getSquareFalloffAttenuation(<span class="hljs-type">vec3</span> posToLight, <span class="hljs-type">float</span> lightInvRadius) {</span>
 <span class="line">    <span class="hljs-type">float</span> distanceSquare = <span class="hljs-built_in">dot</span>(posToLight, posToLight);</span>
@@ -2366,9 +2366,9 @@ E = \frac{I}{max(d^2, {0.01}^2)} \left&lt; 1 - \frac{d^4}{r^4} \right&gt;^2
 <span class="line"></span>
 <span class="line">    <span class="hljs-type">vec3</span> luminance = (BSDF(v, l) * lightIntensity * attenuation * NoL) * lightColor;</span>
 <span class="line">    <span class="hljs-keyword">return</span> luminance;</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_glslpunctuallight">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;21:</b> Implementation of punctual lights in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_glslpunctuallight">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;21:</b> Implementation of punctual lights in GLSL</div>
 
-<a class="target" name="photometriclights">&#xA0;</a><a class="target" name="lighting/directlighting/photometriclights">&#xA0;</a><a class="target" name="toc5.2.3">&#xA0;</a><h3>Photometric lights</h3>
+<a class="target" name="photometriclights">&nbsp;</a><a class="target" name="lighting/directlighting/photometriclights">&nbsp;</a><a class="target" name="toc5.2.3">&nbsp;</a><h3>Photometric lights</h3>
 <p>
 
 
@@ -2385,11 +2385,11 @@ Punctual lights are an extremely practical and efficient way to light a scene bu
 
 <p></p><p>
 
-The lighting system we have described so far can easily address the first two points but we need a way to define the distribution of light within the space. Light distribution is especially important for indoor scenes or for some types of outdoor scenes or even road lighting. <a href="#figure_lightdistributiontest">Figure&#xA0;41</a> shows scenes where the light distribution is controlled by the artist. This type of distribution control is widely used when putting objects on display (museums, stores or galleries for instance).
+The lighting system we have described so far can easily address the first two points but we need a way to define the distribution of light within the space. Light distribution is especially important for indoor scenes or for some types of outdoor scenes or even road lighting. <a href="#figure_lightdistributiontest">Figure&nbsp;41</a> shows scenes where the light distribution is controlled by the artist. This type of distribution control is widely used when putting objects on display (museums, stores or galleries for instance).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_photometric_lights.png" target="_blank"><img class="markdeep" src="images/screenshot_photometric_lights.png"></a><div class="imagecaption"><a class="target" name="figure_lightdistributiontest">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;41:</b> Controlling the distribution of a point light</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_photometric_lights.png" target="_blank"><img class="markdeep" src="images/screenshot_photometric_lights.png"></a><div class="imagecaption"><a class="target" name="figure_lightdistributiontest">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;41:</b> Controlling the distribution of a point light</div></div></center>
 
 <p></p><p>
 
@@ -2397,27 +2397,27 @@ Photometric lights use a photometric profile to describe their intensity distrib
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/photo_photometric_lights.jpg" target="_blank"><img class="markdeep" src="images/photo_photometric_lights.jpg"></a><div class="imagecaption">Example of a real world luminaires that can be described by photometric profiles</div></div></center>
+</p><center><div class="image" style=""><a href="images/photo_photometric_lights.jpg" target="_blank"><img class="markdeep" src="images/photo_photometric_lights.jpg"></a><div class="imagecaption">Example of a real world luminaires that can be described by photometric profiles</div></div></center>
 
 <p></p><p>
 
-An IES profile stores luminous intensity for various angles on a sphere around the measured light source. This spherical coordinate system is usually referred to as the photometric web, which can be visualized using specialized tools such as <a href="http://www.photometricviewer.com/">IESviewer</a>. <a href="#figure_xarrow">Figure&#xA0;42</a> below shows the photometric web of the XArrow IES profile <a href="http://renderman.pixar.com/view/DP25764">provided by Pixar</a> for use with Renderman. This picture also shows a rendering in 3D space of the XArrow IES profile by our tool <code>lightgen</code>.
+An IES profile stores luminous intensity for various angles on a sphere around the measured light source. This spherical coordinate system is usually referred to as the photometric web, which can be visualized using specialized tools such as <a href="http://www.photometricviewer.com/">IESviewer</a>. <a href="#figure_xarrow">Figure&nbsp;42</a> below shows the photometric web of the XArrow IES profile <a href="http://renderman.pixar.com/view/DP25764">provided by Pixar</a> for use with Renderman. This picture also shows a rendering in 3D space of the XArrow IES profile by our tool <code>lightgen</code>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_xarrow.png" target="_blank"><img class="markdeep" src="images/screenshot_xarrow.png"></a><div class="imagecaption"><a class="target" name="figure_xarrow">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;42:</b> The XArrow IES profile rendered as a photometric web and as a point light in 3D space</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_xarrow.png" target="_blank"><img class="markdeep" src="images/screenshot_xarrow.png"></a><div class="imagecaption"><a class="target" name="figure_xarrow">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;42:</b> The XArrow IES profile rendered as a photometric web and as a point light in 3D space</div></div></center>
 
 <p></p><p>
 
-The IES format is poorly documented and it is not uncommon to find syntax variations between files found on the Internet. The best resource to understand IES profile is Ian Ashdown&apos;s &#x201C;Parsing the IESNA LM-63 photometric data file&#x201D; document [<a href="#citation-ashdown98">Ashdown98</a>]. Succinctly, an IES profiles stores luminous intensities in candela at various angles around the light source. For each measured horizontal angle, a series of luminous intensities at different vertical angles is provided. It is however fairly common for measured light sources to be horizontally symmetrical. The XArrow profile shown above is a good example: intensities vary with vertical angles (vertical axis) but are symmetrical on the horizontal axis. The range of vertical angles in an IES profile is 0 to 180&#xB0; and the range of horizontal angles is 0 to 360&#xB0;.
+The IES format is poorly documented and it is not uncommon to find syntax variations between files found on the Internet. The best resource to understand IES profile is Ian Ashdown's “Parsing the IESNA LM-63 photometric data file” document [<a href="#citation-ashdown98">Ashdown98</a>]. Succinctly, an IES profiles stores luminous intensities in candela at various angles around the light source. For each measured horizontal angle, a series of luminous intensities at different vertical angles is provided. It is however fairly common for measured light sources to be horizontally symmetrical. The XArrow profile shown above is a good example: intensities vary with vertical angles (vertical axis) but are symmetrical on the horizontal axis. The range of vertical angles in an IES profile is 0 to 180° and the range of horizontal angles is 0 to 360°.
 
 </p><p>
 
-<a href="#figure_lightensamples">Figure&#xA0;43</a> shows the series of IES profiles provided by Pixar for Renderman, rendered using our <code>lightgen</code> tool.
+<a href="#figure_lightensamples">Figure&nbsp;43</a> shows the series of IES profiles provided by Pixar for Renderman, rendered using our <code>lightgen</code> tool.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_lightgen_samples.png" target="_blank"><img class="markdeep" src="images/screenshot_lightgen_samples.png"></a><div class="imagecaption"><a class="target" name="figure_lightensamples">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;43:</b> Series of IES light profiles rendered with lightgen</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_lightgen_samples.png" target="_blank"><img class="markdeep" src="images/screenshot_lightgen_samples.png"></a><div class="imagecaption"><a class="target" name="figure_lightensamples">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;43:</b> Series of IES light profiles rendered with lightgen</div></div></center>
 
 <p></p><p>
 
@@ -2443,7 +2443,7 @@ The term \( \Psi(l) \) is the photometric attenuation function. It depends on th
 
 </p><p>
 
-The photometric attenuation function can be easily implemented in GLSL by adding a new attenuation factor to the implementation of punctual lights (<a href="#listing_glslpunctuallight">listing&#xA0;21</a>). The modified implementation is show in <a href="#listing_glslphotometricpunctuallight">listing&#xA0;22</a>.
+The photometric attenuation function can be easily implemented in GLSL by adding a new attenuation factor to the implementation of punctual lights (<a href="#listing_glslpunctuallight">listing&nbsp;21</a>). The modified implementation is show in <a href="#listing_glslphotometricpunctuallight">listing&nbsp;22</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">float</span> getPhotometricAttenuation(<span class="hljs-type">vec3</span> posToLight, <span class="hljs-type">vec3</span> lightDir) {</span>
 <span class="line">    <span class="hljs-type">float</span> cosTheta = <span class="hljs-built_in">dot</span>(-posToLight, lightDir);</span>
@@ -2463,11 +2463,11 @@ The photometric attenuation function can be easily implemented in GLSL by adding
 <span class="line"></span>
 <span class="line">    <span class="hljs-type">float</span> luminance = (BSDF(v, l) * lightIntensity * attenuation * NoL) * lightColor;</span>
 <span class="line">    <span class="hljs-keyword">return</span> luminance;</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_glslphotometricpunctuallight">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;22:</b> Implementation of attenuation from photometric profiles in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_glslphotometricpunctuallight">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;22:</b> Implementation of attenuation from photometric profiles in GLSL</div>
 <p>
 
 
-The light intensity is computed CPU-side (<a href="#listing_photometriclightintensity">listing&#xA0;23</a>) and depends on whether the photometric profile is used as a mask.
+The light intensity is computed CPU-side (<a href="#listing_photometriclightintensity">listing&nbsp;23</a>) and depends on whether the photometric profile is used as a mask.
 
 </p><pre class="listing tilde"><code><span class="line">float multiplier;</span>
 <span class="line"><span class="hljs-comment">// Photometric profile used as a mask</span></span>
@@ -2483,21 +2483,21 @@ The light intensity is computed CPU-side (<a href="#listing_photometriclightinte
 <span class="line">}</span>
 <span class="line"></span>
 <span class="line"><span class="hljs-comment">// The max intensity in cd comes from the IES profile</span></span>
-<span class="line">float lightIntensity = photometricLight.getMaxIntensity() * multiplier;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_photometriclightintensity">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;23:</b> Computing the intensity of a photometric light on the CPU</div>
+<span class="line">float lightIntensity = photometricLight.getMaxIntensity() * multiplier;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_photometriclightintensity">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;23:</b> Computing the intensity of a photometric light on the CPU</div>
 <p>
 
 
-</p><div class="endnote"><a class="target" name="endnote-xarrowintensity">&#xA0;</a><sup>4</sup> The XArrow profile declares a luminous intensity of 1,750 lm but a Monte-Carlo integration shows an intensity of only 350 lm.
+</p><div class="endnote"><a class="target" name="endnote-xarrowintensity">&nbsp;</a><sup>4</sup> The XArrow profile declares a luminous intensity of 1,750 lm but a Monte-Carlo integration shows an intensity of only 350 lm.
 </div>
 <p></p>
-<a class="target" name="arealights">&#xA0;</a><a class="target" name="lighting/directlighting/arealights">&#xA0;</a><a class="target" name="toc5.2.4">&#xA0;</a><h3>Area lights</h3>
+<a class="target" name="arealights">&nbsp;</a><a class="target" name="lighting/directlighting/arealights">&nbsp;</a><a class="target" name="toc5.2.4">&nbsp;</a><h3>Area lights</h3>
 <p>
 
 
 [TODO]
 
 </p>
-<a class="target" name="lightsparameterization">&#xA0;</a><a class="target" name="lighting/directlighting/lightsparameterization">&#xA0;</a><a class="target" name="toc5.2.5">&#xA0;</a><h3>Lights parameterization</h3>
+<a class="target" name="lightsparameterization">&nbsp;</a><a class="target" name="lighting/directlighting/lightsparameterization">&nbsp;</a><a class="target" name="toc5.2.5">&nbsp;</a><h3>Lights parameterization</h3>
 <p>
 
 
@@ -2505,7 +2505,7 @@ Similarly to the parameterization of the standard material model, our goal is to
 
 </p><p>
 
-The full list of light parameters is presented in <a href="#table_lightparameters">table&#xA0;13</a>.
+The full list of light parameters is presented in <a href="#table_lightparameters">table&nbsp;13</a>.
 
 </p><p>
 
@@ -2514,16 +2514,16 @@ The full list of light parameters is presented in <a href="#table_lightparameter
 <tr><td style="text-align:right"> <strong class="asterisk">Type</strong> </td><td style="text-align:left"> Directional, point, spot or area </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Direction</strong> </td><td style="text-align:left"> Used for directional lights, spot lights, photometric point lights, and linear and tubular area lights (orientation) </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Color</strong> </td><td style="text-align:left"> The color of emitted light, as a linear RGB color. Can be specified as an sRGB color or a color temperature in the tools </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">Intensity</strong> </td><td style="text-align:left"> The light&apos;s brightness. The unit depends on the type of light </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">Intensity</strong> </td><td style="text-align:left"> The light's brightness. The unit depends on the type of light </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Falloff radius</strong> </td><td style="text-align:left"> Maximum distance of influence </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Inner angle</strong> </td><td style="text-align:left"> Angle of the inner cone for spot lights, in degrees </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Outer angle</strong> </td><td style="text-align:left"> Angle of the outer cone for spot lights, in degrees </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Length</strong> </td><td style="text-align:left"> Length of the area light, used to create linear or tubular lights </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Radius</strong> </td><td style="text-align:left"> Radius of the area light, used to create spherical or tubular lights </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Photometric profile</strong> </td><td style="text-align:left"> Texture representing a photometric light profile, works only for punctual lights </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">Masked profile</strong> </td><td style="text-align:left"> Boolean indicating whether the IES profile is used as a mask or not. When used as a mask, the light&apos;s brightness will be multiplied by the ratio between the user specified intensity and the integrated IES profile intensity. When not used as a mask, the user specified intensity is ignored but the IES multiplier is used instead </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">Masked profile</strong> </td><td style="text-align:left"> Boolean indicating whether the IES profile is used as a mask or not. When used as a mask, the light's brightness will be multiplied by the ratio between the user specified intensity and the integrated IES profile intensity. When not used as a mask, the user specified intensity is ignored but the IES multiplier is used instead </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">Photometric multiplier</strong> </td><td style="text-align:left"> Brightness multiplier for photometric lights (if IES as mask is turned off) </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_lightparameters">&#xA0;</a><b style="font-style:normal;">Table&#xA0;13:</b> Light types parameters</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_lightparameters">&nbsp;</a><b style="font-style:normal;">Table&nbsp;13:</b> Light types parameters</div></div>
 
 <p></p><p>
 
@@ -2534,7 +2534,7 @@ The full list of light parameters is presented in <a href="#table_lightparameter
 <strong class="asterisk">Note</strong>: the light type can be inferred from other parameters (e.g. a point light has a length, radius, inner angle and outer angle of 0).
 
 </p>
-<a class="target" name="colortemperature">&#xA0;</a><a class="target" name="lighting/directlighting/lightsparameterization/colortemperature">&#xA0;</a><a class="target" name="toc5.2.5.1">&#xA0;</a><h4>Color temperature</h4>
+<a class="target" name="colortemperature">&nbsp;</a><a class="target" name="lighting/directlighting/lightsparameterization/colortemperature">&nbsp;</a><a class="target" name="toc5.2.5.1">&nbsp;</a><h4>Color temperature</h4>
 <p>
 
 
@@ -2542,15 +2542,15 @@ However, real-world artificial lights are often defined by their color temperatu
 
 </p><p>
 
-To compute RGB values from a temperature, we can use the Planckian locus, shown in <a href="#figure_planckianlocus">figure&#xA0;44</a>. This locus is the path that the color of an incandescent black body takes in a chromaticity space as the body&apos;s temperature changes.
+To compute RGB values from a temperature, we can use the Planckian locus, shown in <a href="#figure_planckianlocus">figure&nbsp;44</a>. This locus is the path that the color of an incandescent black body takes in a chromaticity space as the body's temperature changes.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_planckian_locus.png" target="_blank"><img class="markdeep" src="images/diagram_planckian_locus.png"></a><div class="imagecaption"><a class="target" name="figure_planckianlocus">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;44:</b> The Planckian locus visualized on a CIE 1931 chromaticity diagram (source: Wikipedia)</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_planckian_locus.png" target="_blank"><img class="markdeep" src="images/diagram_planckian_locus.png"></a><div class="imagecaption"><a class="target" name="figure_planckianlocus">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;44:</b> The Planckian locus visualized on a CIE 1931 chromaticity diagram (source: Wikipedia)</div></div></center>
 
 <p></p><p>
 
-The easiest way to compute RGB values from this locus is to use the formula described in [<a href="#citation-krystek85">Krystek85</a>]. Krystek&apos;s algorithm (equation \(\ref{krystek}\)) works in the CIE 1960 (UCS) space, using the following formula where \(T\) is the desired temperature, and \(u\) and \(v\) the coordinates in UCS.
+The easiest way to compute RGB values from this locus is to use the formula described in [<a href="#citation-krystek85">Krystek85</a>]. Krystek's algorithm (equation \(\ref{krystek}\)) works in the CIE 1960 (UCS) space, using the following formula where \(T\) is the desired temperature, and \(u\) and \(v\) the coordinates in UCS.
 
 </p><p>
 
@@ -2597,7 +2597,7 @@ Z = \frac{(1 - x - y)Y}{y}
 
 </p><p>
 
-For our needs, we will fix \(Y = 1\). This allows us to convert from the XYZ space to linear RGB with a simple 3&#xD7;3 matrix, as shown in equation \(\ref{XYZtoRGB}\).
+For our needs, we will fix \(Y = 1\). This allows us to convert from the XYZ space to linear RGB with a simple 3×3 matrix, as shown in equation \(\ref{XYZtoRGB}\).
 
 </p><p>
 
@@ -2638,66 +2638,66 @@ C_{sRGB} = \begin{cases} 12.92 \times \hat{C}_{linear} &amp; \hat{C}_{linear} \l
 
 </p><p>
 
-For convenience, <a href="#figure_colortemperaturescalecct">figure&#xA0;45</a> shows the range of correlated color temperatures from 1,000K to 12,500K. All the colors used below assume CIE \( D_{65} \) as the white point (as is the case in the sRGB color space).
+For convenience, <a href="#figure_colortemperaturescalecct">figure&nbsp;45</a> shows the range of correlated color temperatures from 1,000K to 12,500K. All the colors used below assume CIE \( D_{65} \) as the white point (as is the case in the sRGB color space).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_color_temperature_cct.png" target="_blank"><img class="markdeep" src="images/diagram_color_temperature_cct.png"></a><div class="imagecaption"><a class="target" name="figure_colortemperaturescalecct">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;45:</b> Scale of correlated color temperatures</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_color_temperature_cct.png" target="_blank"><img class="markdeep" src="images/diagram_color_temperature_cct.png"></a><div class="imagecaption"><a class="target" name="figure_colortemperaturescalecct">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;45:</b> Scale of correlated color temperatures</div></div></center>
 
 <p></p><p>
 
-Similarly, <a href="#figure_colortemperaturescalecie">figure&#xA0;46</a> shows the range of CIE standard illuminants series D from 1,000K to 12,500K.
+Similarly, <a href="#figure_colortemperaturescalecie">figure&nbsp;46</a> shows the range of CIE standard illuminants series D from 1,000K to 12,500K.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_color_temperature_cie.png" target="_blank"><img class="markdeep" src="images/diagram_color_temperature_cie.png"></a><div class="imagecaption"><a class="target" name="figure_colortemperaturescalecie">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;46:</b> Scale of CIE standard illuminants series D</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_color_temperature_cie.png" target="_blank"><img class="markdeep" src="images/diagram_color_temperature_cie.png"></a><div class="imagecaption"><a class="target" name="figure_colortemperaturescalecie">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;46:</b> Scale of CIE standard illuminants series D</div></div></center>
 
 <p></p><p>
 
-For reference, <a href="#figure_colortemperaturescalecctclamped">figure&#xA0;47</a> shows the range of correlated color temperatures without the normalization step presented in equation \(\ref{normalizedRGB}\).
+For reference, <a href="#figure_colortemperaturescalecctclamped">figure&nbsp;47</a> shows the range of correlated color temperatures without the normalization step presented in equation \(\ref{normalizedRGB}\).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_color_temperature_cct_clamped.png" target="_blank"><img class="markdeep" src="images/diagram_color_temperature_cct_clamped.png"></a><div class="imagecaption"><a class="target" name="figure_colortemperaturescalecctclamped">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;47:</b> Unnormalized scale of correlated color temperatures</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_color_temperature_cct_clamped.png" target="_blank"><img class="markdeep" src="images/diagram_color_temperature_cct_clamped.png"></a><div class="imagecaption"><a class="target" name="figure_colortemperaturescalecctclamped">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;47:</b> Unnormalized scale of correlated color temperatures</div></div></center>
 
 <p></p><p>
 
-<a href="#table_colortemperaturesamples">Table&#xA0;14</a> presents the correlated color temperature of various common light sources as sRGB color swatches. These colors are relative to the \( D_{65} \) white point, so their perceived hue might vary based on your display&apos;s white point. See <a href="http://jila.colorado.edu/~ajsh/colour/Tspectrum.html">What colour is the Sun?</a> for more information.
+<a href="#table_colortemperaturesamples">Table&nbsp;14</a> presents the correlated color temperature of various common light sources as sRGB color swatches. These colors are relative to the \( D_{65} \) white point, so their perceived hue might vary based on your display's white point. See <a href="http://jila.colorado.edu/~ajsh/colour/Tspectrum.html">What colour is the Sun?</a> for more information.
 
 </p><p>
 
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Temperature (K) </th><th style="text-align:left"> Light source </th><th style="text-align:left"> Color </th></tr>
-<tr><td style="text-align:right"> 1,700-1,800 </td><td style="text-align:left"> Match flame </td><td style="text-align:left"> <div style="background-color: #ff7d00; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 1,850-1,930 </td><td style="text-align:left"> Candle flame </td><td style="text-align:left"> <div style="background-color: #ff8701; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 2,000-3,000 </td><td style="text-align:left"> Sun at sunrise/sunset </td><td style="text-align:left"> <div style="background-color: #ffa64c; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 2,500-2,900 </td><td style="text-align:left"> Household tungsten lightbulb </td><td style="text-align:left"> <div style="background-color: #ffb05e; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 3,000 </td><td style="text-align:left"> Tungsten lamp 1K </td><td style="text-align:left"> <div style="background-color: #ffb86f; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 3,200-3,500 </td><td style="text-align:left"> Quartz lights </td><td style="text-align:left"> <div style="background-color: #ffbf7b; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 3,200-3,700 </td><td style="text-align:left"> Fluorescent lights </td><td style="text-align:left"> <div style="background-color: #ffbf7b; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 3,275 </td><td style="text-align:left"> Tungsten lamp 2K </td><td style="text-align:left"> <div style="background-color: #ffc180; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 3,380 </td><td style="text-align:left"> Tungsten lamp 5K, 10K </td><td style="text-align:left"> <div style="background-color: #ffc486; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 5,000-5,400 </td><td style="text-align:left"> Sun at noon </td><td style="text-align:left"> <div style="background-color: #ffe9d7; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 5,500-6,500 </td><td style="text-align:left"> Daylight (sun + sky) </td><td style="text-align:left"> <div style="background-color: #fff3f1; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 5,500-6,500 </td><td style="text-align:left"> Sun through clouds/haze </td><td style="text-align:left"> <div style="background-color: #fff3f1; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 6,000-7,500 </td><td style="text-align:left"> Overcast sky </td><td style="text-align:left"> <div style="background-color: #faf6ff; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 6,500 </td><td style="text-align:left"> RGB monitor white point </td><td style="text-align:left"> <div style="background-color: #fff8fe; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 7,000-8,000 </td><td style="text-align:left"> Shaded areas outdoors </td><td style="text-align:left"> <div style="background-color: #ebecff; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> 8,000-10,000 </td><td style="text-align:left"> Partly cloudy sky </td><td style="text-align:left"> <div style="background-color: #d6e0ff; width: 60px">&#xA0;</div> </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_colortemperaturesamples">&#xA0;</a><b style="font-style:normal;">Table&#xA0;14:</b> Normalized correlated color temperatures for common light sources</div></div>
+<tr><td style="text-align:right"> 1,700-1,800 </td><td style="text-align:left"> Match flame </td><td style="text-align:left"> <div style="background-color: #ff7d00; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 1,850-1,930 </td><td style="text-align:left"> Candle flame </td><td style="text-align:left"> <div style="background-color: #ff8701; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 2,000-3,000 </td><td style="text-align:left"> Sun at sunrise/sunset </td><td style="text-align:left"> <div style="background-color: #ffa64c; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 2,500-2,900 </td><td style="text-align:left"> Household tungsten lightbulb </td><td style="text-align:left"> <div style="background-color: #ffb05e; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 3,000 </td><td style="text-align:left"> Tungsten lamp 1K </td><td style="text-align:left"> <div style="background-color: #ffb86f; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 3,200-3,500 </td><td style="text-align:left"> Quartz lights </td><td style="text-align:left"> <div style="background-color: #ffbf7b; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 3,200-3,700 </td><td style="text-align:left"> Fluorescent lights </td><td style="text-align:left"> <div style="background-color: #ffbf7b; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 3,275 </td><td style="text-align:left"> Tungsten lamp 2K </td><td style="text-align:left"> <div style="background-color: #ffc180; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 3,380 </td><td style="text-align:left"> Tungsten lamp 5K, 10K </td><td style="text-align:left"> <div style="background-color: #ffc486; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 5,000-5,400 </td><td style="text-align:left"> Sun at noon </td><td style="text-align:left"> <div style="background-color: #ffe9d7; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 5,500-6,500 </td><td style="text-align:left"> Daylight (sun + sky) </td><td style="text-align:left"> <div style="background-color: #fff3f1; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 5,500-6,500 </td><td style="text-align:left"> Sun through clouds/haze </td><td style="text-align:left"> <div style="background-color: #fff3f1; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 6,000-7,500 </td><td style="text-align:left"> Overcast sky </td><td style="text-align:left"> <div style="background-color: #faf6ff; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 6,500 </td><td style="text-align:left"> RGB monitor white point </td><td style="text-align:left"> <div style="background-color: #fff8fe; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 7,000-8,000 </td><td style="text-align:left"> Shaded areas outdoors </td><td style="text-align:left"> <div style="background-color: #ebecff; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> 8,000-10,000 </td><td style="text-align:left"> Partly cloudy sky </td><td style="text-align:left"> <div style="background-color: #d6e0ff; width: 60px">&nbsp;</div> </td></tr>
+</tbody></table><div class="tablecaption"><a class="target" name="table_colortemperaturesamples">&nbsp;</a><b style="font-style:normal;">Table&nbsp;14:</b> Normalized correlated color temperatures for common light sources</div></div>
 
 <p></p>
-<a class="target" name="pre-exposedlights">&#xA0;</a><a class="target" name="lighting/directlighting/pre-exposedlights">&#xA0;</a><a class="target" name="toc5.2.6">&#xA0;</a><h3>Pre-exposed lights</h3>
+<a class="target" name="pre-exposedlights">&nbsp;</a><a class="target" name="lighting/directlighting/pre-exposedlights">&nbsp;</a><a class="target" name="toc5.2.6">&nbsp;</a><h3>Pre-exposed lights</h3>
 <p>
 
 
-Physically based rendering and physical light units pose an interesting challenge: how to store and handle the large range of values produced by the lighting code? Assuming computations performed at full precision in the shaders, we still want to be able to store the linear output of the lighting pass in a reasonably sized buffer (<code>RGB16F</code> or equivalent). The most obvious and easiest way to achieve this is to simply apply the camera exposure (see the <a href="#physicallybasedcamera">Physically based camera</a> section for more information) before writing out the result of the lighting pass. This simple step is shown in <a href="#listing_preexposedlighting">listing&#xA0;24</a>:
+Physically based rendering and physical light units pose an interesting challenge: how to store and handle the large range of values produced by the lighting code? Assuming computations performed at full precision in the shaders, we still want to be able to store the linear output of the lighting pass in a reasonably sized buffer (<code>RGB16F</code> or equivalent). The most obvious and easiest way to achieve this is to simply apply the camera exposure (see the <a href="#physicallybasedcamera">Physically based camera</a> section for more information) before writing out the result of the lighting pass. This simple step is shown in <a href="#listing_preexposedlighting">listing&nbsp;24</a>:
 
-</p><pre class="listing tilde"><code><span class="line">fragColor = luminance * camera.exposure;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_preexposedlighting">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;24:</b> The output of the lighting pass is pre-exposed to fit in half-float buffers</div>
+</p><pre class="listing tilde"><code><span class="line">fragColor = luminance * camera.exposure;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_preexposedlighting">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;24:</b> The output of the lighting pass is pre-exposed to fit in half-float buffers</div>
 <p>
 
 
-This solution solves the storage problem but requires intermediate computations to be performed with single precision floats. We would instead prefer to perform all (or at least most) of the lighting work using half precision floats instead. Doing so can greatly improve performance and power usage, particularly on mobile devices. Half precision floats are however ill-suited for this kind of work as common illuminance and luminance values (for the sun for instance) can exceed their range. The solution is to simply pre-expose the lights themselves instead of the result of the lighting pass. This can be done efficiently on the CPU if updating a light&apos;s constant buffer is cheap. This can also be done on the GPU, as shown in <a href="#listing_preexposedlights">listing&#xA0;25</a>.
+This solution solves the storage problem but requires intermediate computations to be performed with single precision floats. We would instead prefer to perform all (or at least most) of the lighting work using half precision floats instead. Doing so can greatly improve performance and power usage, particularly on mobile devices. Half precision floats are however ill-suited for this kind of work as common illuminance and luminance values (for the sun for instance) can exceed their range. The solution is to simply pre-expose the lights themselves instead of the result of the lighting pass. This can be done efficiently on the CPU if updating a light's constant buffer is cheap. This can also be done on the GPU, as shown in <a href="#listing_preexposedlights">listing&nbsp;25</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-comment">// The inputs must be highp/single precision,</span></span>
 <span class="line"><span class="hljs-comment">// both for range (intensity) and precision (exposure)</span></span>
@@ -2718,7 +2718,7 @@ This solution solves the storage problem but requires intermediate computations
 <span class="line">            colorIntensity.w, frameUniforms.exposure);</span>
 <span class="line"></span>
 <span class="line">    <span class="hljs-keyword">return</span> light;</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_preexposedlights">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;25:</b> Pre-exposing lights allows the entire shading pipeline to use half precision floats</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_preexposedlights">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;25:</b> Pre-exposing lights allows the entire shading pipeline to use half precision floats</div>
 <p>
 
 
@@ -2736,31 +2736,31 @@ In practice we pre-expose the following lights:
 <li class="minus">Material emissive: on the GPU</li></ul>
 
 <p></p>
-<a class="target" name="imagebasedlights">&#xA0;</a><a class="target" name="lighting/imagebasedlights">&#xA0;</a><a class="target" name="toc5.3">&#xA0;</a><h2>Image based lights</h2>
+<a class="target" name="imagebasedlights">&nbsp;</a><a class="target" name="lighting/imagebasedlights">&nbsp;</a><a class="target" name="toc5.3">&nbsp;</a><h2>Image based lights</h2>
 <p>
 
 
-In real life, light comes from every direction either directly from light sources or indirectly after bouncing off objects in the environment, being partially absorbed in the process. In a way the whole environment around an object can be seen as a light source. Images, in particular cubemaps, are a great way to encode such an &#x201C;environment light&#x201D;. This is called Image Based Lighting (IBL) or sometimes Indirect Lighting.
+In real life, light comes from every direction either directly from light sources or indirectly after bouncing off objects in the environment, being partially absorbed in the process. In a way the whole environment around an object can be seen as a light source. Images, in particular cubemaps, are a great way to encode such an “environment light”. This is called Image Based Lighting (IBL) or sometimes Indirect Lighting.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_ball_ibl.png" target="_blank"><img class="markdeep" src="images/screenshot_ball_ibl.png"></a><div class="imagecaption"><a class="target" name="figure_iblball">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;48:</b> The object shown here is lit only by image-encoded environment lights. Notice the subtle lighting effects that can be applied using this technique.</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_ball_ibl.png" target="_blank"><img class="markdeep" src="images/screenshot_ball_ibl.png"></a><div class="imagecaption"><a class="target" name="figure_iblball">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;48:</b> The object shown here is lit only by image-encoded environment lights. Notice the subtle lighting effects that can be applied using this technique.</div></div></center>
 
 <p></p><p>
 
-There are limitations with image-based lighting. Obviously the environment image must be acquired somehow and as we&apos;ll see below it needs to be pre-processed before it can be used for lighting. Typically, the environment image is acquired offline in the real world, or generated by the engine either offline or at run time; either way, local or distant probes are used.
+There are limitations with image-based lighting. Obviously the environment image must be acquired somehow and as we'll see below it needs to be pre-processed before it can be used for lighting. Typically, the environment image is acquired offline in the real world, or generated by the engine either offline or at run time; either way, local or distant probes are used.
 
 </p><p>
 
-These probes can be used to acquire the distant or local environment. In this document, we&apos;re focusing on distant environment probes, where the light is assumed to come from infinitely far away (which means every point on the object&apos;s surface uses the same environment map).
+These probes can be used to acquire the distant or local environment. In this document, we're focusing on distant environment probes, where the light is assumed to come from infinitely far away (which means every point on the object's surface uses the same environment map).
 
 </p><p>
 
-The whole environment contributes light to a given point on the object&apos;s surface; this is called <em class="underscore">irradiance</em> (\(E\)). The resulting light bouncing off of the object is called radiance (\(L_{out}\)). Incident lighting must be applied consistently to the diffuse and specular parts of the BRDF.
+The whole environment contributes light to a given point on the object's surface; this is called <em class="underscore">irradiance</em> (\(E\)). The resulting light bouncing off of the object is called radiance (\(L_{out}\)). Incident lighting must be applied consistently to the diffuse and specular parts of the BRDF.
 
 </p><p>
 
-The radiance \(L_{out}\) resulting from the interaction between an image based light&apos;s (IBL) irradiance and a material model (BRDF) \(f(\Theta)\)<sup><a href="#endnote-ibl1">5</a></sup> is computed as follows:
+The radiance \(L_{out}\) resulting from the interaction between an image based light's (IBL) irradiance and a material model (BRDF) \(f(\Theta)\)<sup><a href="#endnote-ibl1">5</a></sup> is computed as follows:
 
 </p><p>
 
@@ -2770,10 +2770,10 @@ L_{out}(n, v, \Theta) = \int_\Omega  f(l, v, \Theta) L_{\bot}(l) \left&lt; \NoL
 
 </p><p>
 
-Note that here we&apos;re looking at the behavior of the surface at <strong class="asterisk">macro</strong> level (not to be confused with the micro level equation), which is why it only depends on \(\vec n\) and \(\vec v\). Essentially, we&apos;re applying the BRDF to &#x201C;point-lights&#x201D; coming from all directions and encoded in the IBL.
+Note that here we're looking at the behavior of the surface at <strong class="asterisk">macro</strong> level (not to be confused with the micro level equation), which is why it only depends on \(\vec n\) and \(\vec v\). Essentially, we're applying the BRDF to “point-lights” coming from all directions and encoded in the IBL.
 
 </p>
-<a class="target" name="ibltypes">&#xA0;</a><a class="target" name="lighting/imagebasedlights/ibltypes">&#xA0;</a><a class="target" name="toc5.3.1">&#xA0;</a><h3>IBL Types </h3>
+<a class="target" name="ibltypes">&nbsp;</a><a class="target" name="lighting/imagebasedlights/ibltypes">&nbsp;</a><a class="target" name="toc5.3.1">&nbsp;</a><h3>IBL Types </h3>
 <p>
 
 
@@ -2782,7 +2782,7 @@ There are four common types of IBLs used in modern rendering engines:
 </p><p>
 
 </p><ul>
-<li class="minus"><strong class="asterisk">Distant light probes</strong>, used to capture lighting information at &#x201C;infinity&#x201D;, where parallax can be ignored. Distant probes typically contain the sky, distant landscape features or buildings, etc. They are either captured by the engine or acquired from a camera as high dynamic range images (HDRI).
+<li class="minus"><strong class="asterisk">Distant light probes</strong>, used to capture lighting information at “infinity”, where parallax can be ignored. Distant probes typically contain the sky, distant landscape features or buildings, etc. They are either captured by the engine or acquired from a camera as high dynamic range images (HDRI).
 
 <p></p><p>
 
@@ -2804,7 +2804,7 @@ There are four common types of IBLs used in modern rendering engines:
 In addition we must distinguish between static and dynamic IBLs. Implementing a fully dynamic day/night cycle requires for instance to recompute the distant light probes dynamically<sup><a href="#endnote-ibltypes1">6</a></sup>. Both planar and screen space reflections are inherently dynamic.
 
 </p>
-<a class="target" name="iblunit">&#xA0;</a><a class="target" name="lighting/imagebasedlights/iblunit">&#xA0;</a><a class="target" name="toc5.3.2">&#xA0;</a><h3>IBL Unit </h3>
+<a class="target" name="iblunit">&nbsp;</a><a class="target" name="lighting/imagebasedlights/iblunit">&nbsp;</a><a class="target" name="toc5.3.2">&nbsp;</a><h3>IBL Unit </h3>
 <p>
 
 
@@ -2838,11 +2838,11 @@ To properly reconstruct the luminance of an HDRI for IBL, artists must do more t
 [TODO] Measure and list common luminance values (clear sky, interior, etc.)
 
 </p>
-<a class="target" name="processinglightprobes">&#xA0;</a><a class="target" name="lighting/imagebasedlights/processinglightprobes">&#xA0;</a><a class="target" name="toc5.3.3">&#xA0;</a><h3>Processing light probes </h3>
+<a class="target" name="processinglightprobes">&nbsp;</a><a class="target" name="lighting/imagebasedlights/processinglightprobes">&nbsp;</a><a class="target" name="toc5.3.3">&nbsp;</a><h3>Processing light probes </h3>
 <p>
 
 
-We saw previously that the radiance of an IBL is computed by integrating over the surface&apos;s hemisphere. Since this would obviously be too expensive to do in real-time, we must first pre-process our light probes to convert them into a format better suited for real-time interactions.
+We saw previously that the radiance of an IBL is computed by integrating over the surface's hemisphere. Since this would obviously be too expensive to do in real-time, we must first pre-process our light probes to convert them into a format better suited for real-time interactions.
 
 </p><p>
 
@@ -2859,9 +2859,9 @@ The sections below will discuss the techniques used to accelerate the evaluation
 <li class="minus"><strong class="asterisk">Diffuse reflectance</strong>: irradiance map and spherical harmonics</li></ul>
 
 <p></p>
-<a class="target" name="distantlightprobes">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes">&#xA0;</a><a class="target" name="toc5.3.4">&#xA0;</a><h3>Distant light probes </h3>
+<a class="target" name="distantlightprobes">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes">&nbsp;</a><a class="target" name="toc5.3.4">&nbsp;</a><h3>Distant light probes </h3>
 
-<a class="target" name="diffusebrdfintegration">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/diffusebrdfintegration">&#xA0;</a><a class="target" name="toc5.3.4.1">&#xA0;</a><h4>Diffuse BRDF integration </h4>
+<a class="target" name="diffusebrdfintegration">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/diffusebrdfintegration">&nbsp;</a><a class="target" name="toc5.3.4.1">&nbsp;</a><h4>Diffuse BRDF integration </h4>
 <p>
 
 
@@ -2897,31 +2897,31 @@ The irradiance integral \(\Ed\) can be trivially, albeit slowly<sup><a href="#en
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_river_roughness_m0.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_river_roughness_m0.png" style="max-width:100%;"></a><div class="imagecaption"><a class="target" name="figure_ibloriginal">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;49:</b> Image-based environment</div></div></center>
+</p><center><div class="image" style=""><a href="images/ibl/ibl_river_roughness_m0.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_river_roughness_m0.png" style="max-width:100%;"></a><div class="imagecaption"><a class="target" name="figure_ibloriginal">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;49:</b> Image-based environment</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_irradiance.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_irradiance.png" style="max-width:100%;"></a><div class="imagecaption"><a class="target" name="figure_iblirradiance">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;50:</b> Image-based irradiance map using the Lambertian BRDF</div></div></center>
+</p><center><div class="image" style=""><a href="images/ibl/ibl_irradiance.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_irradiance.png" style="max-width:100%;"></a><div class="imagecaption"><a class="target" name="figure_iblirradiance">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;50:</b> Image-based irradiance map using the Lambertian BRDF</div></div></center>
 
 <p></p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-ibl1">&#xA0;</a><sup>5</sup> \(\Theta\) represents the parameters of the material model \(f\), i.e.: <em class="underscore">roughness</em>, albedo and so on...
+</p><div class="endnote"><a class="target" name="endnote-ibl1">&nbsp;</a><sup>5</sup> \(\Theta\) represents the parameters of the material model \(f\), i.e.: <em class="underscore">roughness</em>, albedo and so on...
 </div>
 <p></p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-ibltypes1">&#xA0;</a><sup>6</sup> This can be done through blending of static probes or by spreading the workload over time
+</p><div class="endnote"><a class="target" name="endnote-ibltypes1">&nbsp;</a><sup>6</sup> This can be done through blending of static probes or by spreading the workload over time
 </div>
 <p></p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-ibldiffuse1">&#xA0;</a><sup>7</sup> The Lambertian BRDF doesn&apos;t depend on \(\vec l\), \(\vec v\) or \(\theta\), so \(L_d(n,v,\theta) \equiv L_d(n,\sigma)\)
+</p><div class="endnote"><a class="target" name="endnote-ibldiffuse1">&nbsp;</a><sup>7</sup> The Lambertian BRDF doesn't depend on \(\vec l\), \(\vec v\) or \(\theta\), so \(L_d(n,v,\theta) \equiv L_d(n,\sigma)\)
 </div>
 <p></p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-ibldiffuse2">&#xA0;</a><sup>8</sup> \(\Omega_s\) can be approximated by \(\frac{2\pi}{6 \cdot width \cdot height}\) for a cubemap
+</p><div class="endnote"><a class="target" name="endnote-ibldiffuse2">&nbsp;</a><sup>8</sup> \(\Omega_s\) can be approximated by \(\frac{2\pi}{6 \cdot width \cdot height}\) for a cubemap
 </div>
 <p></p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-ibldiffuse3">&#xA0;</a><sup>9</sup> \(O(12\,n^2\,m^2)\), with \(n\) and \(m\) respectively the dimensions of the environment and the precomputed cubemap
+</p><div class="endnote"><a class="target" name="endnote-ibldiffuse3">&nbsp;</a><sup>9</sup> \(O(12\,n^2\,m^2)\), with \(n\) and \(m\) respectively the dimensions of the environment and the precomputed cubemap
 </div>
 <p></p><p>
 
@@ -2943,15 +2943,15 @@ SH decomposition is similar in concept to a Fourier transform, it expresses the
 
 <p></p><p>
 
-In practice only 4 or 9 coefficients (i.e.: 2 or 3 bands) are enough for \(\cosTheta\) meaning we don&apos;t need more either for \(\Lt\).
+In practice only 4 or 9 coefficients (i.e.: 2 or 3 bands) are enough for \(\cosTheta\) meaning we don't need more either for \(\Lt\).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_irradiance_sh3.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_irradiance_sh3.png" style="max-width:100%;"></a><div class="imagecaption"><a class="target" name="figure_iblsh3">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;51:</b> 3 bands (9 coefficients)</div></div></center>
+</p><center><div class="image" style=""><a href="images/ibl/ibl_irradiance_sh3.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_irradiance_sh3.png" style="max-width:100%;"></a><div class="imagecaption"><a class="target" name="figure_iblsh3">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;51:</b> 3 bands (9 coefficients)</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_irradiance_sh2.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_irradiance_sh2.png" style="max-width:100%;"></a><div class="imagecaption"><a class="target" name="figure_iblsh2">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;52:</b> 2 bands (4 coefficients)</div></div></center>
+</p><center><div class="image" style=""><a href="images/ibl/ibl_irradiance_sh2.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_irradiance_sh2.png" style="max-width:100%;"></a><div class="imagecaption"><a class="target" name="figure_iblsh2">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;52:</b> 2 bands (4 coefficients)</div></div></center>
 
 <p></p><p>
 
@@ -2970,7 +2970,7 @@ In practice we pre-convolve \(\Lt\) with \(\cosTheta\) and pre-scale these coeff
 <span class="line">        + sphericalHarmonics[<span class="hljs-number">6</span>] * (<span class="hljs-number">3.0</span> * n.z * n.z - <span class="hljs-number">1.0</span>)</span>
 <span class="line">        + sphericalHarmonics[<span class="hljs-number">7</span>] * (n.z * n.x)</span>
 <span class="line">        + sphericalHarmonics[<span class="hljs-number">8</span>] * (n.x * n.x - n.y * n.y);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_irradiancesh">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;26:</b> GLSL code to reconstruct the irradiance from the pre-scaled SH</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_irradiancesh">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;26:</b> GLSL code to reconstruct the irradiance from the pre-scaled SH</div>
 <p>
 
 
@@ -2981,11 +2981,11 @@ Note that with 2 bands, the computation above becomes a single \(4 \times 4\) ma
 Additionally, because of the pre-scaling by \(K_l^m\), the SH coefficients can be thought of as colors, in particular <code>sphericalHarmonics[0]</code> is directly the average irradiance.
 
 </p>
-<a class="target" name="specularbrdfintegration">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/specularbrdfintegration">&#xA0;</a><a class="target" name="toc5.3.4.2">&#xA0;</a><h4>Specular BRDF integration </h4>
+<a class="target" name="specularbrdfintegration">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/specularbrdfintegration">&nbsp;</a><a class="target" name="toc5.3.4.2">&nbsp;</a><h4>Specular BRDF integration </h4>
 <p>
 
 
-As we&apos;ve seen above, the radiance \(\Lout\) resulting from the interaction between an IBL&apos;s irradiance and a BRDF is:
+As we've seen above, the radiance \(\Lout\) resulting from the interaction between an IBL's irradiance and a BRDF is:
 
 </p><p>
 
@@ -3016,7 +3016,7 @@ which makes its evaluation extremely costly and unsuitable for real-time on mobi
 (even using pre-filtered importance sampling). 
 
 </p>
-<a class="target" name="simplifyingthebrdfintegration">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/specularbrdfintegration/simplifyingthebrdfintegration">&#xA0;</a><a class="target" name="toc5.3.4.2.1">&#xA0;</a><h5>Simplifying the BRDF integration </h5>
+<a class="target" name="simplifyingthebrdfintegration">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/specularbrdfintegration/simplifyingthebrdfintegration">&nbsp;</a><a class="target" name="toc5.3.4.2.1">&nbsp;</a><h5>Simplifying the BRDF integration </h5>
 <p>
 
 
@@ -3118,7 +3118,7 @@ approximation(\Lt) = correct(\bar{\Lt}) + simplified(\Lt - \bar{\Lt})
 
 </p><p>
 
-Now, let&apos;s look at each term:
+Now, let's look at each term:
 
 </p><p>
 
@@ -3134,7 +3134,7 @@ All three of these equations can be easily pre-calculated and stored in look-up
 below.
 
 </p>
-<a class="target" name="discretedomain">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/specularbrdfintegration/discretedomain">&#xA0;</a><a class="target" name="toc5.3.4.2.2">&#xA0;</a><h5>Discrete Domain </h5>
+<a class="target" name="discretedomain">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/specularbrdfintegration/discretedomain">&nbsp;</a><a class="target" name="toc5.3.4.2.2">&nbsp;</a><h5>Discrete Domain </h5>
 <p>
 
 
@@ -3150,7 +3150,7 @@ I(f(n, v, \alpha))        \equiv \frac{1}{N}\sum_{\forall \, i \in image} f(l_i,
 
 </p><p>
 
-However, in practice we&apos;re using <em class="underscore">importance sampling</em> which needs to take the \(pdf\) of the distribution
+However, in practice we're using <em class="underscore">importance sampling</em> which needs to take the \(pdf\) of the distribution
 into account and adds a term \(\frac{\left&lt;\VoH\right&gt;}{D(h_i, \alpha)\left&lt;\NoH\right&gt;}\).
 See <a href="#importancesamplingfortheibl">Importance Sampling For The IBL</a> section:
 
@@ -3191,7 +3191,7 @@ I(f(n, v, \alpha))  \equiv \frac{4}{N}\sum_i^N \frac{f(l_i, n, v, \alpha)}{D(h_i
 </p><p>
 
 Note that at this point, we could almost compute both remaining equations off-line. The only difficulty
-is that we don&apos;t know \(f_0\) nor \(f_{90}\) when we precompute those integrals. We will see below that
+is that we don't know \(f_0\) nor \(f_{90}\) when we precompute those integrals. We will see below that
 we can incorporate these terms at runtime for equation \ref{iblDFV}, alas, this is not possible for
 equation \ref{iblLD} and we have to assume \(f_0 = f_{90} = 1\) (i.e.: the fresnel term always evaluates to 1).
 
@@ -3202,7 +3202,7 @@ worst results compared to the ground truth, so we also set \(V = 1\).
 
 </p><p>
 
-Let&apos;s substitute \(f\) in equations \ref{iblLD} and \ref{iblDFV}:
+Let's substitute \(f\) in equations \ref{iblLD} and \ref{iblDFV}:
 
 </p><p>
 
@@ -3227,7 +3227,7 @@ I(f(n, v, \alpha))  \equiv \frac{4}{N}\sum_i^N \color{green}{F(f_0, f_{90}, \lef
 
 </p><p>
 
-Now, let&apos;s substitute the fresnel term into equation \ref{iblFV}:
+Now, let's substitute the fresnel term into equation \ref{iblFV}:
 
 </p><p>
 
@@ -3253,7 +3253,7 @@ $$
 
 </p><p>
 
-And finally, we extract the equations that can be calculated off-line (i.e.: the part that doesn&apos;t 
+And finally, we extract the equations that can be calculated off-line (i.e.: the part that doesn't 
 depend on the runtime parameters \(f_0\) and \(f_{90}\)):
 
 </p><p>
@@ -3287,14 +3287,14 @@ LD(n, \alpha)                    &amp;=      \frac{\sum_i^N V(l_i, n, \alpha)\le
 $$
 
 </p>
-<a class="target" name="the%5C(dfg_1%5C)and%5C(dfg_2%5C)termvisualized">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/the%5C(dfg_1%5C)and%5C(dfg_2%5C)termvisualized">&#xA0;</a><a class="target" name="toc5.3.4.3">&#xA0;</a><h4>The \(DFG_1\) and \(DFG_2\) term visualized </h4>
+<a class="target" name="the%5C(dfg_1%5C)and%5C(dfg_2%5C)termvisualized">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/the%5C(dfg_1%5C)and%5C(dfg_2%5C)termvisualized">&nbsp;</a><a class="target" name="toc5.3.4.3">&nbsp;</a><h4>The \(DFG_1\) and \(DFG_2\) term visualized </h4>
 <p>
 
 
 Both \(DFG_1\) and \(DFG_2\) can either be pre-calculated in a regular 2D texture indexed by \((\NoV, \alpha)\) 
 and sampled bilinearly, or computed at runtime using an analytic approximation of the surfaces. 
 See sample code in the annex. 
-The pre-calculated textures are shown in <a href="#table_texturedfg">table&#xA0;15</a>. 
+The pre-calculated textures are shown in <a href="#table_texturedfg">table&nbsp;15</a>. 
 A C++ implementation of the pre-computation can be found in section  <a href="#toc9.5">9.5</a>.
 
 </p><p>
@@ -3302,31 +3302,31 @@ A C++ implementation of the pre-computation can be found in section  <a href="#t
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:left"> \(DFG_1\) </th><th style="text-align:left"> \(DFG_2\) </th><th style="text-align:left"> \({ DFG_1, DFG_2, 0 }\) </th></tr>
 <tr><td style="text-align:left"> <a href="images/ibl/dfg1.png" target="_blank"><img class="markdeep" src="images/ibl/dfg1.png"></a> </td><td style="text-align:left"> <a href="images/ibl/dfg2.png" target="_blank"><img class="markdeep" src="images/ibl/dfg2.png"></a> </td><td style="text-align:left"> <a href="images/ibl/dfg.png" target="_blank"><img class="markdeep" src="images/ibl/dfg.png"></a> </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_texturedfg">&#xA0;</a><b style="font-style:normal;">Table&#xA0;15:</b> Y axis: \(\alpha\). X axis: \(cos \theta\)</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_texturedfg">&nbsp;</a><b style="font-style:normal;">Table&nbsp;15:</b> Y axis: \(\alpha\). X axis: \(cos \theta\)</div></div>
 
 <p></p><p>
 
-\(DFG_1\) and \(DFG_2\)  are conveniently within the \([0, 1]\) range, however 8-bits textures don&apos;t have
+\(DFG_1\) and \(DFG_2\)  are conveniently within the \([0, 1]\) range, however 8-bits textures don't have
 enough precision and will cause problems. 
 Unfortunately, on mobile, 16-bits or float textures are not ubiquitous and there are a limited 
 number of samplers. 
 Despite the attractive simplicity of the shader code using a texture, it might be better to use an 
 analytic approximation. Note however that since we only need to store two terms, 
-OpenGL ES 3.0&apos;s RG16F texture format is a good candidate.
+OpenGL ES 3.0's RG16F texture format is a good candidate.
 
 </p><p>
 
 Such analytic approximation is described in [<a href="#citation-karis14">Karis14</a>], itself based on [<a href="#citation-lazarov13">Lazarov13</a>]. 
 [<a href="#citation-narkowicz14">Narkowicz14</a>] is another interesting approximation. Note that these two approximations are not
 compatible with the energy compensation term presented in section  <a href="#toc5.3.4.7">5.3.4.7</a>.
-<a href="#table_textureapproxdfg">Table&#xA0;16</a> presents a visual representation of these approximations.
+<a href="#table_textureapproxdfg">Table&nbsp;16</a> presents a visual representation of these approximations.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:left"> \(DFG_1\) </th><th style="text-align:left"> \(DFG_2\) </th><th style="text-align:left"> \({ DFG_1, DFG_2, 0 }\) </th></tr>
 <tr><td style="text-align:left"> <a href="images/ibl/dfg1_approx.png" target="_blank"><img class="markdeep" src="images/ibl/dfg1_approx.png"></a> </td><td style="text-align:left"> <a href="images/ibl/dfg2_approx.png" target="_blank"><img class="markdeep" src="images/ibl/dfg2_approx.png"></a> </td><td style="text-align:left"> <a href="images/ibl/dfg_approx.png" target="_blank"><img class="markdeep" src="images/ibl/dfg_approx.png"></a> </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_textureapproxdfg">&#xA0;</a><b style="font-style:normal;">Table&#xA0;16:</b> Y axis: \(\alpha\). X axis: \(cos \theta\)</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_textureapproxdfg">&nbsp;</a><b style="font-style:normal;">Table&nbsp;16:</b> Y axis: \(\alpha\). X axis: \(cos \theta\)</div></div>
 
 <p></p>
-<a class="target" name="the%5C(ld%5C)termvisualized">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/the%5C(ld%5C)termvisualized">&#xA0;</a><a class="target" name="toc5.3.4.4">&#xA0;</a><h4>The \(LD\) term visualized </h4>
+<a class="target" name="the%5C(ld%5C)termvisualized">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/the%5C(ld%5C)termvisualized">&nbsp;</a><a class="target" name="toc5.3.4.4">&nbsp;</a><h4>The \(LD\) term visualized </h4>
 <p>
 
 
@@ -3359,22 +3359,22 @@ See an example below:
 <div class="image" style="max-width:100%;float:right;margin:4px 0px 0px 25px;"><a href="images/ibl/ibl_river_roughness_m4.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_river_roughness_m4.png" style="max-width:100%;"></a><div class="imagecaption">\(0.8\)</div></div>
 
 <p></p>
-<a class="target" name="indirectspecularandindirectdiffusecomponentsvisualized">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/indirectspecularandindirectdiffusecomponentsvisualized">&#xA0;</a><a class="target" name="toc5.3.4.5">&#xA0;</a><h4>Indirect specular and indirect diffuse components visualized </h4>
+<a class="target" name="indirectspecularandindirectdiffusecomponentsvisualized">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/indirectspecularandindirectdiffusecomponentsvisualized">&nbsp;</a><a class="target" name="toc5.3.4.5">&nbsp;</a><h4>Indirect specular and indirect diffuse components visualized </h4>
 <p>
 
 
-<a href="#figure_iblvisualized">Figure&#xA0;53</a> shows how indirect lighting interacts with dielectrics and conductors. Direct lighting was removed for illustration purposes.
+<a href="#figure_iblvisualized">Figure&nbsp;53</a> shows how indirect lighting interacts with dielectrics and conductors. Direct lighting was removed for illustration purposes.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_visualization.jpg" target="_blank"><img class="markdeep" src="images/ibl/ibl_visualization.jpg"></a><div class="imagecaption"><a class="target" name="figure_iblvisualized">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;53:</b> Indirect diffuse and specular decomposition</div></div></center>
+</p><center><div class="image" style=""><a href="images/ibl/ibl_visualization.jpg" target="_blank"><img class="markdeep" src="images/ibl/ibl_visualization.jpg"></a><div class="imagecaption"><a class="target" name="figure_iblvisualized">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;53:</b> Indirect diffuse and specular decomposition</div></div></center>
 
 <p></p>
-<a class="target" name="iblevaluationimplementation">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/iblevaluationimplementation">&#xA0;</a><a class="target" name="toc5.3.4.6">&#xA0;</a><h4>IBL evaluation implementation </h4>
+<a class="target" name="iblevaluationimplementation">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/iblevaluationimplementation">&nbsp;</a><a class="target" name="toc5.3.4.6">&nbsp;</a><h4>IBL evaluation implementation </h4>
 <p>
 
 
-<a href="#listing_iblevaluation">Listing&#xA0;27</a> presents a GLSL implementation to evaluate the IBL, using the various textures described in the previous sections. 
+<a href="#listing_iblevaluation">Listing&nbsp;27</a> presents a GLSL implementation to evaluate the IBL, using the various textures described in the previous sections. 
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> ibl(<span class="hljs-type">vec3</span> n, <span class="hljs-type">vec3</span> v, <span class="hljs-type">vec3</span> diffuseColor, <span class="hljs-type">vec3</span> f0, <span class="hljs-type">vec3</span> f90,</span>
 <span class="line">        <span class="hljs-type">float</span> perceptualRoughness) {</span>
@@ -3385,12 +3385,12 @@ See an example below:
 <span class="line">    <span class="hljs-type">vec2</span> Ldfg = <span class="hljs-built_in">textureLod</span>(dfgLut, <span class="hljs-type">vec2</span>(<span class="hljs-built_in">dot</span>(n, v), perceptualRoughness), <span class="hljs-number">0.0</span>).xy;</span>
 <span class="line">    <span class="hljs-type">vec3</span> Lr =  (f0 * Ldfg.x + f90 * Ldfg.y) * Lld;</span>
 <span class="line">    <span class="hljs-keyword">return</span> Ld + Lr;</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_iblevaluation">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;27:</b> GLSL implementation of image based lighting evaluation</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_iblevaluation">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;27:</b> GLSL implementation of image based lighting evaluation</div>
 <p>
 
 
 We can however save a couple of texture lookups by using Spherical Harmonics instead of an 
-irradiance cubemap and the analytical approximation of the \(DFG\) LUT, as shown in <a href="#listing_optimizediblevaluation">listing&#xA0;28</a>.
+irradiance cubemap and the analytical approximation of the \(DFG\) LUT, as shown in <a href="#listing_optimizediblevaluation">listing&nbsp;28</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> irradianceSH(<span class="hljs-type">vec3</span> n) {</span>
 <span class="line">    <span class="hljs-comment">// uniform vec3 sphericalHarmonics[9]</span></span>
@@ -3440,9 +3440,9 @@ irradiance cubemap and the analytical approximation of the \(DFG\) LUT, as shown
 <span class="line"></span>
 <span class="line">    <span class="hljs-comment">// Indirect contribution</span></span>
 <span class="line">    <span class="hljs-keyword">return</span> diffuseColor * indirectDiffuse + indirectSpecular * specularColor;</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_optimizediblevaluation">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;28:</b> GLSL implementation of image based lighting evaluation</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_optimizediblevaluation">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;28:</b> GLSL implementation of image based lighting evaluation</div>
 
-<a class="target" name="pre-integrationformultiscattering">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/pre-integrationformultiscattering">&#xA0;</a><a class="target" name="toc5.3.4.7">&#xA0;</a><h4>Pre-integration for multiscattering </h4>
+<a class="target" name="pre-integrationformultiscattering">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/pre-integrationformultiscattering">&nbsp;</a><a class="target" name="toc5.3.4.7">&nbsp;</a><h4>Pre-integration for multiscattering </h4>
 <p>
 
 
@@ -3469,7 +3469,7 @@ r \equiv  \frac{4}{N}\sum_i^N  V(l_i, v, \alpha)\frac{\left&lt;\VoH\right&gt;}{\
 </p><p>
 
 This equality is very similar to the terms \(DFG_1\) and \(DFG_2\) seen in equation \(\ref{iblAllEquations}\).
-In fact, it&apos;s the same, except without the Fresnel term.
+In fact, it's the same, except without the Fresnel term.
 
 </p><p>
 
@@ -3493,17 +3493,17 @@ These two new \(DFG\) terms simply need to replace the ones used in the implemen
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-keyword">float</span> Fc = <span class="hljs-built_in">pow</span>(<span class="hljs-number">1</span> - VoH, <span class="hljs-number">5.0f</span>);</span>
 <span class="line">r.x += Gv * Fc;</span>
-<span class="line">r.y += Gv;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_multiscatteriblpreintegration">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;29:</b> C++ implementation of the \(L_{DFG}\) term for multiscattering</div>
+<span class="line">r.y += Gv;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_multiscatteriblpreintegration">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;29:</b> C++ implementation of the \(L_{DFG}\) term for multiscattering</div>
 <p>
 
 
-To perform the reconstruction we need to slightly modify <a href="#listing_multiscatteriblevaluation">listing&#xA0;30</a>:
+To perform the reconstruction we need to slightly modify <a href="#listing_multiscatteriblevaluation">listing&nbsp;30</a>:
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec2</span> dfg = <span class="hljs-built_in">textureLod</span>(dfgLut, <span class="hljs-type">vec2</span>(<span class="hljs-built_in">dot</span>(n, v), perceptualRoughness), <span class="hljs-number">0.0</span>).xy;</span>
 <span class="line"><span class="hljs-comment">// (1 - f0) * dfg.x + f0 * dfg.y</span></span>
-<span class="line"><span class="hljs-type">vec3</span> specularColor = <span class="hljs-built_in">mix</span>(dfg.xxx, dfg.yyy, f0);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_multiscatteriblevaluation">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;30:</b> GLSL implementation of image based lighting evaluation, with multiscattering LUT</div>
+<span class="line"><span class="hljs-type">vec3</span> specularColor = <span class="hljs-built_in">mix</span>(dfg.xxx, dfg.yyy, f0);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_multiscatteriblevaluation">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;30:</b> GLSL implementation of image based lighting evaluation, with multiscattering LUT</div>
 
-<a class="target" name="summary">&#xA0;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/summary">&#xA0;</a><a class="target" name="toc5.3.4.8">&#xA0;</a><h4>Summary </h4>
+<a class="target" name="summary">&nbsp;</a><a class="target" name="lighting/imagebasedlights/distantlightprobes/summary">&nbsp;</a><a class="target" name="toc5.3.4.8">&nbsp;</a><h4>Summary </h4>
 <p>
 
 
@@ -3527,8 +3527,8 @@ approximations and compromises:
 <p></p><p>
 
 </p></li>
-    <li class="minus">Because mipmap levels are used to store the pre-integrated environment, they can&apos;t be used for
-          texture minification, as they ought to. This can causes aliasing or moir&#xE9; artifacts in high frequency 
+    <li class="minus">Because mipmap levels are used to store the pre-integrated environment, they can't be used for
+          texture minification, as they ought to. This can causes aliasing or moiré artifacts in high frequency 
           regions or the environment at low roughness and/or distant or small objects. 
           This can also impact performance due to the resulting poor cache access pattern. 
 
@@ -3545,7 +3545,7 @@ approximations and compromises:
 <p></p><p>
 
 </p></li>
-    <li class="minus">Schlick&apos;s Fresnel
+    <li class="minus">Schlick's Fresnel
 
 <p></p><p>
 
@@ -3554,101 +3554,101 @@ approximations and compromises:
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_prefilter_vs_reference.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_prefilter_vs_reference.png"></a><div class="imagecaption"><a class="target" name="figure_iblprefiltervsimportancesampling">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;54:</b>
+</p><center><div class="image" style=""><a href="images/ibl/ibl_prefilter_vs_reference.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_prefilter_vs_reference.png"></a><div class="imagecaption"><a class="target" name="figure_iblprefiltervsimportancesampling">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;54:</b>
 Comparison between importance-sampled reference (top) and prefiltered IBL (middle).</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_stretchy_reflections_error.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_stretchy_reflections_error.png"></a><div class="imagecaption"><a class="target" name="figure_iblstretchyreflectionloss">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;55:</b>
-Error in reflections due to assuming \(v = n\) (bottom) &#x2014; loss of &#x201C;stretchy reflections&#x201D;.</div></div></center>
+</p><center><div class="image" style=""><a href="images/ibl/ibl_stretchy_reflections_error.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_stretchy_reflections_error.png"></a><div class="imagecaption"><a class="target" name="figure_iblstretchyreflectionloss">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;55:</b>
+Error in reflections due to assuming \(v = n\) (bottom) — loss of “stretchy reflections”.</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_trilinear_0.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_trilinear_0.png"></a><div class="imagecaption"><a class="target" name="figure_iblroughnessinlods0">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;56:</b>
+</p><center><div class="image" style=""><a href="images/ibl/ibl_trilinear_0.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_trilinear_0.png"></a><div class="imagecaption"><a class="target" name="figure_iblroughnessinlods0">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;56:</b>
 Error due to storing the roughness in cubemaps LODs at roughness = 0.0625 (i.e.: sampling exactly between levels).
-Notice how instead of bluring we see a &#x201C;cross-fade&#x201D; between two blurs.</div></div></center>
+Notice how instead of bluring we see a “cross-fade” between two blurs.</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_trilinear_1.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_trilinear_1.png"></a><div class="imagecaption"><a class="target" name="figure_iblroughnessinlods1">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;57:</b>
+</p><center><div class="image" style=""><a href="images/ibl/ibl_trilinear_1.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_trilinear_1.png"></a><div class="imagecaption"><a class="target" name="figure_iblroughnessinlods1">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;57:</b>
 Error due to storing the roughness in cubemaps LODs at roughness = 0.125 (i.e.: sampling exactly level 1).
 When the roughness closely matches a LOD, the error due to trilinear filtering in the cubemap is
 reduced. Notice the errors due to \(v = n\) at grazing angles.</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/ibl/ibl_no_mipmaping.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_no_mipmaping.png"></a><div class="imagecaption"><a class="target" name="figure_iblmoirepattern">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;58:</b>
-Moir&#xE9; pattern due to texture minification on a metallic sphere at \(\alpha = 0\)
+</p><center><div class="image" style=""><a href="images/ibl/ibl_no_mipmaping.png" target="_blank"><img class="markdeep" src="images/ibl/ibl_no_mipmaping.png"></a><div class="imagecaption"><a class="target" name="figure_iblmoirepattern">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;58:</b>
+Moiré pattern due to texture minification on a metallic sphere at \(\alpha = 0\)
 using an environment made of colored vertical stripes (skybox hidden).</div></div></center>
 
 <p></p>
-<a class="target" name="clearcoat">&#xA0;</a><a class="target" name="lighting/imagebasedlights/clearcoat">&#xA0;</a><a class="target" name="toc5.3.5">&#xA0;</a><h3>Clear coat </h3>
+<a class="target" name="clearcoat">&nbsp;</a><a class="target" name="lighting/imagebasedlights/clearcoat">&nbsp;</a><a class="target" name="toc5.3.5">&nbsp;</a><h3>Clear coat </h3>
 <p>
 
 
-When sampling the IBL, the clear coat layer is calculated as a second specular lobe. This specular lobe is oriented along the view direction since we cannot reasonably integrate over the hemisphere. <a href="#listing_clearcoatibl">Listing&#xA0;31</a> demonstrates this approximation in practice. It also shows the energy conservation step. It is important to note that this second specular lobe is computed exactly the same way as the main specular lobe, using the same DFG approximation.
+When sampling the IBL, the clear coat layer is calculated as a second specular lobe. This specular lobe is oriented along the view direction since we cannot reasonably integrate over the hemisphere. <a href="#listing_clearcoatibl">Listing&nbsp;31</a> demonstrates this approximation in practice. It also shows the energy conservation step. It is important to note that this second specular lobe is computed exactly the same way as the main specular lobe, using the same DFG approximation.
 
-</p><pre class="listing tilde"><code><span class="line">// clearCoat_NoV == shading_NoV if the clear coat layer doesn&apos;t have its own normal map</span>
+</p><pre class="listing tilde"><code><span class="line">// clearCoat_NoV == shading_NoV if the clear coat layer doesn't have its own normal map</span>
 <span class="line">float Fc = F_Schlick(<span class="hljs-number">0.04</span>, <span class="hljs-number">1.0</span>, clearCoat_NoV) * clearCoat<span class="hljs-comment">;</span></span>
 <span class="line">// base layer attenuation for energy compensation</span>
 <span class="line">iblDiffuse  *= <span class="hljs-number">1.0</span> - Fc<span class="hljs-comment">;</span></span>
 <span class="line">iblSpecular *= sq(<span class="hljs-number">1.0</span> - Fc)<span class="hljs-comment">;</span></span>
-<span class="line">iblSpecular += specularIBL(<span class="hljs-name">r</span>, clearCoatPerceptualRoughness) * Fc<span class="hljs-comment">;</span></span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clearcoatibl">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;31:</b> GLSL implementation of the clear coat specular lobe for image-based lighting</div>
+<span class="line">iblSpecular += specularIBL(<span class="hljs-name">r</span>, clearCoatPerceptualRoughness) * Fc<span class="hljs-comment">;</span></span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clearcoatibl">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;31:</b> GLSL implementation of the clear coat specular lobe for image-based lighting</div>
 
-<a class="target" name="anisotropy">&#xA0;</a><a class="target" name="lighting/imagebasedlights/anisotropy">&#xA0;</a><a class="target" name="toc5.3.6">&#xA0;</a><h3>Anisotropy </h3>
+<a class="target" name="anisotropy">&nbsp;</a><a class="target" name="lighting/imagebasedlights/anisotropy">&nbsp;</a><a class="target" name="toc5.3.6">&nbsp;</a><h3>Anisotropy </h3>
 <p>
 
 
-[<a href="#citation-mcauley15">McAuley15</a>] describes a technique called &#x201C;bent reflection vector&#x201D;, based [<a href="#citation-revie12">Revie12</a>]. The bent reflection vector is a rough approximation of anisotropic lighting but the alternative is to use importance sampling. This approximation is sufficiently cheap to compute and provides good results, as shown in <a href="#figure_anisotropicibl1">figure&#xA0;59</a> and <a href="#figure_anisotropicibl2">figure&#xA0;60</a>.
+[<a href="#citation-mcauley15">McAuley15</a>] describes a technique called “bent reflection vector”, based [<a href="#citation-revie12">Revie12</a>]. The bent reflection vector is a rough approximation of anisotropic lighting but the alternative is to use importance sampling. This approximation is sufficiently cheap to compute and provides good results, as shown in <a href="#figure_anisotropicibl1">figure&nbsp;59</a> and <a href="#figure_anisotropicibl2">figure&nbsp;60</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_anisotropic_ibl1.jpg" target="_blank"><img class="markdeep" src="images/screenshot_anisotropic_ibl1.jpg"></a><div class="imagecaption"><a class="target" name="figure_anisotropicibl1">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;59:</b> Anisotropic indirect specular reflections using bent normals (left: roughness 0.3, right: roughness: 0.0; both: anisotropy 1.0)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_anisotropic_ibl1.jpg" target="_blank"><img class="markdeep" src="images/screenshot_anisotropic_ibl1.jpg"></a><div class="imagecaption"><a class="target" name="figure_anisotropicibl1">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;59:</b> Anisotropic indirect specular reflections using bent normals (left: roughness 0.3, right: roughness: 0.0; both: anisotropy 1.0)</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_anisotropic_ibl2.jpg" target="_blank"><img class="markdeep" src="images/screenshot_anisotropic_ibl2.jpg"></a><div class="imagecaption"><a class="target" name="figure_anisotropicibl2">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;60:</b> Anisotropic reflections with varying roughness, metallicness, etc.</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_anisotropic_ibl2.jpg" target="_blank"><img class="markdeep" src="images/screenshot_anisotropic_ibl2.jpg"></a><div class="imagecaption"><a class="target" name="figure_anisotropicibl2">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;60:</b> Anisotropic reflections with varying roughness, metallicness, etc.</div></div></center>
 
 <p></p><p>
 
-The implementation of this technique is straightforward, as demonstrated in <a href="#listing_bentreflectionvector">listing&#xA0;32</a>.
+The implementation of this technique is straightforward, as demonstrated in <a href="#listing_bentreflectionvector">listing&nbsp;32</a>.
 
 </p><pre class="listing tilde"><code><span class="line">vec3 anisotropicTangent = cross(<span class="hljs-name">bitangent</span>, v)<span class="hljs-comment">;</span></span>
 <span class="line">vec3 anisotropicNormal = cross(<span class="hljs-name">anisotropicTangent</span>, bitangent)<span class="hljs-comment">;</span></span>
 <span class="line">vec3 bentNormal = normalize(<span class="hljs-name">mix</span>(<span class="hljs-name">n</span>, anisotropicNormal, anisotropy))<span class="hljs-comment">;</span></span>
-<span class="line">vec3 r = reflect(<span class="hljs-name">-v</span>, bentNormal)<span class="hljs-comment">;</span></span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_bentreflectionvector">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;32:</b> GLSL implementation of the bent reflection vector</div>
+<span class="line">vec3 r = reflect(<span class="hljs-name">-v</span>, bentNormal)<span class="hljs-comment">;</span></span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_bentreflectionvector">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;32:</b> GLSL implementation of the bent reflection vector</div>
 <p>
 
 
-This technique can be made more useful by accepting negative <code>anisotropy</code> values, as shown in <a href="#listing_bentreflectionvectordirection">listing&#xA0;33</a>. When the anisotropy is negative, the highlights are not in the direction of the tangent, but in the direction of the bitangent instead.
+This technique can be made more useful by accepting negative <code>anisotropy</code> values, as shown in <a href="#listing_bentreflectionvectordirection">listing&nbsp;33</a>. When the anisotropy is negative, the highlights are not in the direction of the tangent, but in the direction of the bitangent instead.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> anisotropicDirection = anisotropy &gt;= <span class="hljs-number">0.0</span> ? bitangent : tangent;</span>
 <span class="line"><span class="hljs-type">vec3</span> anisotropicTangent = <span class="hljs-built_in">cross</span>(anisotropicDirection, v);</span>
 <span class="line"><span class="hljs-type">vec3</span> anisotropicNormal = <span class="hljs-built_in">cross</span>(anisotropicTangent, anisotropicDirection);</span>
 <span class="line"><span class="hljs-type">vec3</span> bentNormal = <span class="hljs-built_in">normalize</span>(<span class="hljs-built_in">mix</span>(n, anisotropicNormal, anisotropy));</span>
-<span class="line"><span class="hljs-type">vec3</span> r = <span class="hljs-built_in">reflect</span>(-v, bentNormal);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_bentreflectionvectordirection">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;33:</b> GLSL implementation of the bent reflection vector</div>
+<span class="line"><span class="hljs-type">vec3</span> r = <span class="hljs-built_in">reflect</span>(-v, bentNormal);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_bentreflectionvectordirection">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;33:</b> GLSL implementation of the bent reflection vector</div>
 <p>
 
 
-<a href="#figure_anisotropicdirection">Figure&#xA0;61</a> demonstrates this modified implementation in practice.
+<a href="#figure_anisotropicdirection">Figure&nbsp;61</a> demonstrates this modified implementation in practice.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_anisotropy_direction.png" target="_blank"><img class="markdeep" src="images/screenshot_anisotropy_direction.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropicdirection">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;61:</b> Control of the anisotropy direction using positive (left) and negative (right) values</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_anisotropy_direction.png" target="_blank"><img class="markdeep" src="images/screenshot_anisotropy_direction.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropicdirection">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;61:</b> Control of the anisotropy direction using positive (left) and negative (right) values</div></div></center>
 
 <p></p>
-<a class="target" name="subsurface">&#xA0;</a><a class="target" name="lighting/imagebasedlights/subsurface">&#xA0;</a><a class="target" name="toc5.3.7">&#xA0;</a><h3>Subsurface </h3>
+<a class="target" name="subsurface">&nbsp;</a><a class="target" name="lighting/imagebasedlights/subsurface">&nbsp;</a><a class="target" name="toc5.3.7">&nbsp;</a><h3>Subsurface </h3>
 <p>
 
 
 [TODO] Explain subsurface and IBL
 
 </p>
-<a class="target" name="cloth">&#xA0;</a><a class="target" name="lighting/imagebasedlights/cloth">&#xA0;</a><a class="target" name="toc5.3.8">&#xA0;</a><h3>Cloth </h3>
+<a class="target" name="cloth">&nbsp;</a><a class="target" name="lighting/imagebasedlights/cloth">&nbsp;</a><a class="target" name="toc5.3.8">&nbsp;</a><h3>Cloth </h3>
 <p>
 
 
-The IBL implementation for the cloth material model is more complicated than for the other material models. The main difference stems from the use of a different NDF (&#x201C;Charlie&#x201D; vs height-correlated Smith GGX). As described in this section, we use the split-sum approximation to compute the DFG term of the BRDF when computing an IBL. This DFG term is designed for a different BRDF and cannot be used for the cloth BRDF. Since we designed our  cloth BRDF to not need a Fresnel term, we can generate a single DG term in the 3rd channel of the DFG LUT. The result is shown in <a href="#figure_dfgclothlut">figure&#xA0;62</a>.
+The IBL implementation for the cloth material model is more complicated than for the other material models. The main difference stems from the use of a different NDF (“Charlie” vs height-correlated Smith GGX). As described in this section, we use the split-sum approximation to compute the DFG term of the BRDF when computing an IBL. This DFG term is designed for a different BRDF and cannot be used for the cloth BRDF. Since we designed our  cloth BRDF to not need a Fresnel term, we can generate a single DG term in the 3rd channel of the DFG LUT. The result is shown in <a href="#figure_dfgclothlut">figure&nbsp;62</a>.
 
 </p><p>
 
@@ -3656,7 +3656,7 @@ The DG term is generated using uniform sampling as recommended in [<a href="#cit
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/ibl/dfg_cloth.png" target="_blank"><img class="markdeep" src="images/ibl/dfg_cloth.png"></a><div class="imagecaption"><a class="target" name="figure_dfgclothlut">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;62:</b> DFG LUT with a 3rd channel encoding the DG term of the cloth BRDF</div></div></center>
+</p><center><div class="image" style=""><a href="images/ibl/dfg_cloth.png" target="_blank"><img class="markdeep" src="images/ibl/dfg_cloth.png"></a><div class="imagecaption"><a class="target" name="figure_dfgclothlut">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;62:</b> DFG LUT with a 3rd channel encoding the DG term of the cloth BRDF</div></div></center>
 
 <p></p><p>
 
@@ -3674,40 +3674,40 @@ The remainder of the image-based lighting implementation follows the same steps
 <span class="line">indirectDiffuse *= saturate(<span class="hljs-name">subsurfaceColor</span> + NoV)<span class="hljs-comment">;</span></span>
 <span class="line">#endif</span>
 <span class="line"></span>
-<span class="line">vec3 ibl = diffuseColor * indirectDiffuse + indirectSpecular * specularColor<span class="hljs-comment">;</span></span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clothapprox">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;34:</b> GLSL implementation of the DFG approximation for the cloth NDF</div>
+<span class="line">vec3 ibl = diffuseColor * indirectDiffuse + indirectSpecular * specularColor<span class="hljs-comment">;</span></span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_clothapprox">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;34:</b> GLSL implementation of the DFG approximation for the cloth NDF</div>
 <p>
 
 
-It is important to note that this only addresses part of the IBL problem. The pre-filtered specular environment maps described earlier are convolved with the standard shading model&apos;s BRDF, which differs from the cloth BRDF. To get accurate result we should in theory provide one set of IBLs per BRDF used in the engine. Providing a second set of IBLs is however not practical for our use case so we decided to rely on the existing IBLs instead.
+It is important to note that this only addresses part of the IBL problem. The pre-filtered specular environment maps described earlier are convolved with the standard shading model's BRDF, which differs from the cloth BRDF. To get accurate result we should in theory provide one set of IBLs per BRDF used in the engine. Providing a second set of IBLs is however not practical for our use case so we decided to rely on the existing IBLs instead.
 
 </p>
-<a class="target" name="staticlighting">&#xA0;</a><a class="target" name="lighting/staticlighting">&#xA0;</a><a class="target" name="toc5.4">&#xA0;</a><h2>Static lighting</h2>
+<a class="target" name="staticlighting">&nbsp;</a><a class="target" name="lighting/staticlighting">&nbsp;</a><a class="target" name="toc5.4">&nbsp;</a><h2>Static lighting</h2>
 <p>
 
 
-[TODO] Spherical-harmonics or spherical-gaussian lightmaps, irradiance volumes, PRT?&#x2026;
+[TODO] Spherical-harmonics or spherical-gaussian lightmaps, irradiance volumes, PRT?…
 
 </p>
-<a class="target" name="transparencyandtranslucencylighting">&#xA0;</a><a class="target" name="lighting/transparencyandtranslucencylighting">&#xA0;</a><a class="target" name="toc5.5">&#xA0;</a><h2>Transparency and translucency lighting</h2>
+<a class="target" name="transparencyandtranslucencylighting">&nbsp;</a><a class="target" name="lighting/transparencyandtranslucencylighting">&nbsp;</a><a class="target" name="toc5.5">&nbsp;</a><h2>Transparency and translucency lighting</h2>
 <p>
 
 
 Transparent and translucent materials are important to add realism and correctness to scenes. Filament must therefore provide lighting models for both types of materials to allow artists to properly recreate realistic scenes. Translucency can also be used effectively in a number of non-realistic settings.
 
 </p>
-<a class="target" name="transparency">&#xA0;</a><a class="target" name="lighting/transparencyandtranslucencylighting/transparency">&#xA0;</a><a class="target" name="toc5.5.1">&#xA0;</a><h3>Transparency</h3>
+<a class="target" name="transparency">&nbsp;</a><a class="target" name="lighting/transparencyandtranslucencylighting/transparency">&nbsp;</a><a class="target" name="toc5.5.1">&nbsp;</a><h3>Transparency</h3>
 <p>
 
 
-To properly light a transparent surface, we must first understand how the material&apos;s opacity is applied. Observe a window and you will see that the diffuse reflectance is transparent. On the other hand, the brighter the specular reflectance, the less opaque the window appears. This effect can be seen in <a href="#figure_cameratransparency">figure&#xA0;63</a>: the scene is properly reflected onto the glass surfaces but the specular highlight of the sun is bright enough to appear opaque.
+To properly light a transparent surface, we must first understand how the material's opacity is applied. Observe a window and you will see that the diffuse reflectance is transparent. On the other hand, the brighter the specular reflectance, the less opaque the window appears. This effect can be seen in <a href="#figure_cameratransparency">figure&nbsp;63</a>: the scene is properly reflected onto the glass surfaces but the specular highlight of the sun is bright enough to appear opaque.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_camera_transparency.jpg" target="_blank"><img class="markdeep" src="images/screenshot_camera_transparency.jpg"></a><div class="imagecaption"><a class="target" name="figure_cameratransparency">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;63:</b> Example of a complex object where lit surface transparency plays an important role</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_camera_transparency.jpg" target="_blank"><img class="markdeep" src="images/screenshot_camera_transparency.jpg"></a><div class="imagecaption"><a class="target" name="figure_cameratransparency">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;63:</b> Example of a complex object where lit surface transparency plays an important role</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_car.jpg" target="_blank"><img class="markdeep" src="images/screenshot_car.jpg"></a><div class="imagecaption"><a class="target" name="figure_litcar">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;64:</b> Example of a complex object where lit surface transparency plays an important role</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_car.jpg" target="_blank"><img class="markdeep" src="images/screenshot_car.jpg"></a><div class="imagecaption"><a class="target" name="figure_litcar">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;64:</b> Example of a complex object where lit surface transparency plays an important role</div></div></center>
 
 <p></p><p>
 
@@ -3733,7 +3733,7 @@ Blend_{dst} &amp;= 1 - src_{\alpha}
 
 </p><p>
 
-The GLSL implementation of these equations is presented in <a href="#listing_surfacetransparency">listing&#xA0;35</a>.
+The GLSL implementation of these equations is presented in <a href="#listing_surfacetransparency">listing&nbsp;35</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-comment">// baseColor has already been premultiplied</span></span>
 <span class="line"><span class="hljs-type">vec4</span> shadeSurface(<span class="hljs-type">vec4</span> baseColor) {</span>
@@ -3743,9 +3743,9 @@ The GLSL implementation of these equations is presented in <a href="#listing_sur
 <span class="line">    <span class="hljs-type">vec3</span> specularColor = evaluateSpecularLighting();    </span>
 <span class="line"></span>
 <span class="line">    <span class="hljs-keyword">return</span> <span class="hljs-type">vec4</span>(diffuseColor + specularColor, alpha);</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_surfacetransparency">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;35:</b> Implementation of lit surface transparency in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_surfacetransparency">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;35:</b> Implementation of lit surface transparency in GLSL</div>
 
-<a class="target" name="translucency">&#xA0;</a><a class="target" name="lighting/transparencyandtranslucencylighting/translucency">&#xA0;</a><a class="target" name="toc5.5.2">&#xA0;</a><h3>Translucency</h3>
+<a class="target" name="translucency">&nbsp;</a><a class="target" name="lighting/transparencyandtranslucencylighting/translucency">&nbsp;</a><a class="target" name="toc5.5.2">&nbsp;</a><h3>Translucency</h3>
 <p>
 
 
@@ -3768,10 +3768,10 @@ Volume translucency is useful to light particle systems, for instance clouds or
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_translucency.png" target="_blank"><img class="markdeep" src="images/screenshot_translucency.png"></a><div class="imagecaption"><a class="target" name="figure_translucency">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;65:</b> Front-lit translucent object (left) and back-lit translucent object (right), using approximated BTDF and BSSRDF. Model: Lucy from the Stanford University Computer Graphics Laboratory</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_translucency.png" target="_blank"><img class="markdeep" src="images/screenshot_translucency.png"></a><div class="imagecaption"><a class="target" name="figure_translucency">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;65:</b> Front-lit translucent object (left) and back-lit translucent object (right), using approximated BTDF and BSSRDF. Model: Lucy from the Stanford University Computer Graphics Laboratory</div></div></center>
 
 <p></p>
-<a class="target" name="occlusion">&#xA0;</a><a class="target" name="lighting/occlusion">&#xA0;</a><a class="target" name="toc5.6">&#xA0;</a><h2>Occlusion</h2>
+<a class="target" name="occlusion">&nbsp;</a><a class="target" name="lighting/occlusion">&nbsp;</a><a class="target" name="toc5.6">&nbsp;</a><h2>Occlusion</h2>
 <p>
 
 
@@ -3779,13 +3779,13 @@ Occlusion is an important darkening factor used to recreate shadowing at various
 
 </p><p>
 
-</p><dl><table><tbody><tr valign="top"><td><dt>Small&#xA0;scale</dt></td><td><dd><p>    Micro-occlusion used to handle creases, cracks and cavities.
+</p><dl><table><tbody><tr valign="top"><td><dt>Small&nbsp;scale</dt></td><td><dd><p>    Micro-occlusion used to handle creases, cracks and cavities.
 
-</p></dd></td></tr><tr valign="top"><td><dt>Medium&#xA0;scale</dt></td><td><dd><p>    Macro-occlusion used to handle occlusion by an object&apos;s own geometry or by geometry baked in normal maps (bricks, etc.).
+</p></dd></td></tr><tr valign="top"><td><dt>Medium&nbsp;scale</dt></td><td><dd><p>    Macro-occlusion used to handle occlusion by an object's own geometry or by geometry baked in normal maps (bricks, etc.).
 
-</p></dd></td></tr><tr valign="top"><td><dt>Large&#xA0;scale</dt></td><td><dd><p>    Occlusion coming from contact between objects, or from an object&apos;s own geometry.
+</p></dd></td></tr><tr valign="top"><td><dt>Large&nbsp;scale</dt></td><td><dd><p>    Occlusion coming from contact between objects, or from an object's own geometry.
 
-</p></dd></td></tr></tbody></table></dl>We currently ignore micro-occlusion, which is often exposed in tools and engines under the form of a &#x201C;cavity map&#x201D;. S&#xE9;bastien Lagarde offers an interesting discussion in [<a href="#citation-lagarde14">Lagarde14</a>] on how micro-occlusion is handled in Frostbite: diffuse micro-occlusion is pre-baked in diffuse maps and specular micro-occlusion is pre-baked in reflectance textures.
+</p></dd></td></tr></tbody></table></dl>We currently ignore micro-occlusion, which is often exposed in tools and engines under the form of a “cavity map”. Sébastien Lagarde offers an interesting discussion in [<a href="#citation-lagarde14">Lagarde14</a>] on how micro-occlusion is handled in Frostbite: diffuse micro-occlusion is pre-baked in diffuse maps and specular micro-occlusion is pre-baked in reflectance textures.
 In our system, micro-occlusion can simply be baked in the base color map. This must be done knowing that the specular light will not be affected by micro-occlusion.
 
 <p></p><p>
@@ -3801,7 +3801,7 @@ Large scale ambient occlusion is often computed using screen-space techniques su
 <strong class="asterisk">Note</strong>: to prevent over darkening when using both medium and large scale occlusion, Lagarde recommends to use \(min({AO}_{medium}, {AO}_{large})\).
 
 </p>
-<a class="target" name="diffuseocclusion">&#xA0;</a><a class="target" name="lighting/occlusion/diffuseocclusion">&#xA0;</a><a class="target" name="toc5.6.1">&#xA0;</a><h3>Diffuse occlusion</h3>
+<a class="target" name="diffuseocclusion">&nbsp;</a><a class="target" name="lighting/occlusion/diffuseocclusion">&nbsp;</a><a class="target" name="toc5.6.1">&nbsp;</a><h3>Diffuse occlusion</h3>
 <p>
 
 
@@ -3843,7 +3843,7 @@ $$\begin{equation}\label{diffuseAOTerm}
 
 </p><p>
 
-Since we use a pre-computed diffuse term, we cannot compute the exact accessibility of shaded points at runtime. To compensate for this lack of information in our precomputed term, we partially reconstruct incident lighting by applying an ambient occlusion factor specific to the surface&apos;s material at the shaded point.
+Since we use a pre-computed diffuse term, we cannot compute the exact accessibility of shaded points at runtime. To compensate for this lack of information in our precomputed term, we partially reconstruct incident lighting by applying an ambient occlusion factor specific to the surface's material at the shaded point.
 
 </p><p>
 
@@ -3851,27 +3851,27 @@ In practice, baked ambient occlusion is stored as a grayscale texture which can
 
 </p><p>
 
-<a href="#figure_aocomparison">Figure&#xA0;66</a> shows two different materials without and with diffuse ambient occlusion. Notice how the material ambient occlusion is used to recreate the natural shadowing that occurs between the different tiles. Without ambient occlusion, both materials appear too flat.
+<a href="#figure_aocomparison">Figure&nbsp;66</a> shows two different materials without and with diffuse ambient occlusion. Notice how the material ambient occlusion is used to recreate the natural shadowing that occurs between the different tiles. Without ambient occlusion, both materials appear too flat.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_ao.jpg" target="_blank"><img class="markdeep" src="images/screenshot_ao.jpg"></a><div class="imagecaption"><a class="target" name="figure_aocomparison">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;66:</b> Comparison of materials without diffuse ambient occlusion (left) and with (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_ao.jpg" target="_blank"><img class="markdeep" src="images/screenshot_ao.jpg"></a><div class="imagecaption"><a class="target" name="figure_aocomparison">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;66:</b> Comparison of materials without diffuse ambient occlusion (left) and with (right)</div></div></center>
 
 <p></p><p>
 
-Applying baked diffuse ambient occlusion in a GLSL shader is straightforward, as shown in <a href="#listing_bakeddiffuseao">listing&#xA0;36</a>.
+Applying baked diffuse ambient occlusion in a GLSL shader is straightforward, as shown in <a href="#listing_bakeddiffuseao">listing&nbsp;36</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-comment">// diffuse indirect</span></span>
 <span class="line"><span class="hljs-type">vec3</span> indirectDiffuse = <span class="hljs-built_in">max</span>(irradianceSH(n), <span class="hljs-number">0.0</span>) * Fd_Lambert();</span>
 <span class="line"><span class="hljs-comment">// ambient occlusion</span></span>
-<span class="line">indirectDiffuse *= <span class="hljs-built_in">texture2D</span>(aoMap, outUV).r;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_bakeddiffuseao">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;36:</b> Implementation of baked diffuse ambient occlusion in GLSL</div>
+<span class="line">indirectDiffuse *= <span class="hljs-built_in">texture2D</span>(aoMap, outUV).r;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_bakeddiffuseao">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;36:</b> Implementation of baked diffuse ambient occlusion in GLSL</div>
 <p>
 
 
 Note how the ambient occlusion term is only applied to indirect lighting.
 
 </p>
-<a class="target" name="specularocclusion">&#xA0;</a><a class="target" name="lighting/occlusion/specularocclusion">&#xA0;</a><a class="target" name="toc5.6.2">&#xA0;</a><h3>Specular occlusion</h3>
+<a class="target" name="specularocclusion">&nbsp;</a><a class="target" name="lighting/occlusion/specularocclusion">&nbsp;</a><a class="target" name="toc5.6.2">&nbsp;</a><h3>Specular occlusion</h3>
 <p>
 
 
@@ -3879,7 +3879,7 @@ Specular micro-occlusion can be derived from \(\fNormal\), itself derived from t
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">float</span> f90 = <span class="hljs-built_in">clamp</span>(<span class="hljs-built_in">dot</span>(f0, <span class="hljs-number">50.0</span> * <span class="hljs-number">0.33</span>), <span class="hljs-number">0.0</span>, <span class="hljs-number">1.0</span>);</span>
 <span class="line"><span class="hljs-comment">// cheap luminance approximation</span></span>
-<span class="line"><span class="hljs-type">float</span> f90 = <span class="hljs-built_in">clamp</span>(<span class="hljs-number">50.0</span> * f0.g, <span class="hljs-number">0.0</span>, <span class="hljs-number">1.0</span>);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularmicroocclusion">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;37:</b> Pre-baked specular occlusion in GLSL</div>
+<span class="line"><span class="hljs-type">float</span> f90 = <span class="hljs-built_in">clamp</span>(<span class="hljs-number">50.0</span> * f0.g, <span class="hljs-number">0.0</span>, <span class="hljs-number">1.0</span>);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularmicroocclusion">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;37:</b> Pre-baked specular occlusion in GLSL</div>
 <p>
 
 
@@ -3887,7 +3887,7 @@ The derivations mentioned earlier for ambient occlusion assume Lambertian surfac
 
 </p><p>
 
-S&#xE9;bastien Lagarde proposes an empirical approach to derive the specular occlusion term from the diffuse occlusion term in [<a href="#citation-lagarde14">Lagarde14</a>]. The result does not have any physical basis but produces visually pleasant results. The goal of his formulation is return the diffuse occlusion term unmodified for rough surfaces. For smooth surfaces, the formulation, implemented in <a href="#listing_specularocclusion">listing&#xA0;38</a>, reduces the influence of occlusion at normal incidence and increases it at grazing angles.
+Sébastien Lagarde proposes an empirical approach to derive the specular occlusion term from the diffuse occlusion term in [<a href="#citation-lagarde14">Lagarde14</a>]. The result does not have any physical basis but produces visually pleasant results. The goal of his formulation is return the diffuse occlusion term unmodified for rough surfaces. For smooth surfaces, the formulation, implemented in <a href="#listing_specularocclusion">listing&nbsp;38</a>, reduces the influence of occlusion at normal incidence and increases it at grazing angles.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">float</span> computeSpecularAO(<span class="hljs-type">float</span> NoV, <span class="hljs-type">float</span> ao, <span class="hljs-type">float</span> roughness) {</span>
 <span class="line">    <span class="hljs-keyword">return</span> <span class="hljs-built_in">clamp</span>(<span class="hljs-built_in">pow</span>(NoV + ao, <span class="hljs-built_in">exp2</span>(<span class="hljs-number">-16.0</span> * roughness - <span class="hljs-number">1.0</span>)) - <span class="hljs-number">1.0</span> + ao, <span class="hljs-number">0.0</span>, <span class="hljs-number">1.0</span>);</span>
@@ -3897,14 +3897,14 @@ S&#xE9;bastien Lagarde proposes an empirical approach to derive the specular occ
 <span class="line"><span class="hljs-type">vec3</span> indirectSpecular = evaluateSpecularIBL(r, perceptualRoughness);</span>
 <span class="line"><span class="hljs-comment">// ambient occlusion</span></span>
 <span class="line"><span class="hljs-type">float</span> ao = <span class="hljs-built_in">texture2D</span>(aoMap, outUV).r;</span>
-<span class="line">indirectSpecular *= computeSpecularAO(NoV, ao, roughness);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularocclusion">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;38:</b> Implementation of Lagarde&apos;s specular occlusion factor in GLSL</div>
+<span class="line">indirectSpecular *= computeSpecularAO(NoV, ao, roughness);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularocclusion">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;38:</b> Implementation of Lagarde's specular occlusion factor in GLSL</div>
 <p>
 
 
 Note how the specular occlusion factor is only applied to indirect lighting.
 
 </p>
-<a class="target" name="horizonspecularocclusion">&#xA0;</a><a class="target" name="lighting/occlusion/specularocclusion/horizonspecularocclusion">&#xA0;</a><a class="target" name="toc5.6.2.1">&#xA0;</a><h4>Horizon specular occlusion</h4>
+<a class="target" name="horizonspecularocclusion">&nbsp;</a><a class="target" name="lighting/occlusion/specularocclusion/horizonspecularocclusion">&nbsp;</a><a class="target" name="toc5.6.2.1">&nbsp;</a><h4>Horizon specular occlusion</h4>
 <p>
 
 
@@ -3912,21 +3912,21 @@ When computing the specular IBL contribution for a surface that uses a normal ma
 
 </p><p>
 
-The key idea is to occlude light coming from behind the surface. This can easily be achieved since a negative dot product between the reflected vector and the surface&apos;s normal indicates a reflection vector pointing towards the surface. Our implementation shown in <a href="#listing_horizonocclusion">listing&#xA0;39</a> is similar to Russell&apos;s, albeit without the artist controlled horizon fading factor.
+The key idea is to occlude light coming from behind the surface. This can easily be achieved since a negative dot product between the reflected vector and the surface's normal indicates a reflection vector pointing towards the surface. Our implementation shown in <a href="#listing_horizonocclusion">listing&nbsp;39</a> is similar to Russell's, albeit without the artist controlled horizon fading factor.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-comment">// specular indirect</span></span>
 <span class="line"><span class="hljs-type">vec3</span> indirectSpecular = evaluateSpecularIBL(r, perceptualRoughness);</span>
 <span class="line"></span>
 <span class="line"><span class="hljs-comment">// horizon occlusion with falloff, should be computed for direct specular too</span></span>
 <span class="line"><span class="hljs-type">float</span> horizon = <span class="hljs-built_in">min</span>(<span class="hljs-number">1.0</span> + <span class="hljs-built_in">dot</span>(r, n), <span class="hljs-number">1.0</span>);</span>
-<span class="line">indirectSpecular *= horizon * horizon;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_horizonocclusion">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;39:</b> Implementation of horizon specular occlusion in GLSL</div>
+<span class="line">indirectSpecular *= horizon * horizon;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_horizonocclusion">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;39:</b> Implementation of horizon specular occlusion in GLSL</div>
 <p>
 
 
 Horizon specular occlusion fading is cheap but can easily be omitted to improve performance as needed.
 
 </p>
-<a class="target" name="normalmapping">&#xA0;</a><a class="target" name="lighting/normalmapping">&#xA0;</a><a class="target" name="toc5.7">&#xA0;</a><h2>Normal mapping</h2>
+<a class="target" name="normalmapping">&nbsp;</a><a class="target" name="lighting/normalmapping">&nbsp;</a><a class="target" name="toc5.7">&nbsp;</a><h2>Normal mapping</h2>
 <p>
 
 
@@ -3934,43 +3934,43 @@ There are two common use cases of normal maps: replacing high-poly meshes with l
 
 </p><p>
 
-Let&apos;s imagine that we want to render a piece of furniture covered in tufted leather. Modeling the geometry to accurately represent the tufted pattern would require too many triangles so we instead bake a high-poly mesh into a normal map. Once the base map is applied to a simplified mesh (in this case, a quad), we get the result in <a href="#figure_normalmapped">figure&#xA0;67</a>. The base map used to create this effect is shown in <a href="#figure_basenormalmap">figure&#xA0;68</a>.
+Let's imagine that we want to render a piece of furniture covered in tufted leather. Modeling the geometry to accurately represent the tufted pattern would require too many triangles so we instead bake a high-poly mesh into a normal map. Once the base map is applied to a simplified mesh (in this case, a quad), we get the result in <a href="#figure_normalmapped">figure&nbsp;67</a>. The base map used to create this effect is shown in <a href="#figure_basenormalmap">figure&nbsp;68</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_normal_mapping.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_mapping.jpg"></a><div class="imagecaption"><a class="target" name="figure_normalmapped">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;67:</b> Low-poly mesh without normal mapping (left) and with (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_normal_mapping.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_mapping.jpg"></a><div class="imagecaption"><a class="target" name="figure_normalmapped">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;67:</b> Low-poly mesh without normal mapping (left) and with (right)</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_normal_map.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_map.jpg"></a><div class="imagecaption"><a class="target" name="figure_basenormalmap">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;68:</b> Normal map used as a base map</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_normal_map.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_map.jpg"></a><div class="imagecaption"><a class="target" name="figure_basenormalmap">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;68:</b> Normal map used as a base map</div></div></center>
 
 <p></p><p>
 
-A simple problem arises if we now want to combine this base map with a second normal map. For instance, let&apos;s use the detail map shown in <a href="#figure_detailnormalmap">figure&#xA0;69</a> to add cracks in the leather.
+A simple problem arises if we now want to combine this base map with a second normal map. For instance, let's use the detail map shown in <a href="#figure_detailnormalmap">figure&nbsp;69</a> to add cracks in the leather.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_normal_map_detail.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_map_detail.jpg"></a><div class="imagecaption"><a class="target" name="figure_detailnormalmap">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;69:</b> Normal map used as a detail map</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_normal_map_detail.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_map_detail.jpg"></a><div class="imagecaption"><a class="target" name="figure_detailnormalmap">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;69:</b> Normal map used as a detail map</div></div></center>
 
 <p></p><p>
 
 Given the nature of normal maps (XYZ components stored in tangent space), it is fairly obvious that naive approaches such as linear or overlay blending cannot work. We will use two more advanced techniques: a mathematically correct one and an approximation suitable for real-time shading.
 
 </p>
-<a class="target" name="reorientednormalmapping">&#xA0;</a><a class="target" name="lighting/normalmapping/reorientednormalmapping">&#xA0;</a><a class="target" name="toc5.7.1">&#xA0;</a><h3>Reoriented normal mapping</h3>
+<a class="target" name="reorientednormalmapping">&nbsp;</a><a class="target" name="lighting/normalmapping/reorientednormalmapping">&nbsp;</a><a class="target" name="toc5.7.1">&nbsp;</a><h3>Reoriented normal mapping</h3>
 <p>
 
 
-Colin Barr&#xE9;-Brisebois and Stephen Hill propose in [<a href="#citation-hill12">Hill12</a>] a mathematically sound solution called <em class="asterisk">Reoriented Normal Mapping</em>, which consists in rotating the basis of the detail map onto the normal from the base map. This technique relies on the shortest arc quaternion to apply the rotation, which greatly simplifies thanks to the properties of the tangent space.
+Colin Barré-Brisebois and Stephen Hill propose in [<a href="#citation-hill12">Hill12</a>] a mathematically sound solution called <em class="asterisk">Reoriented Normal Mapping</em>, which consists in rotating the basis of the detail map onto the normal from the base map. This technique relies on the shortest arc quaternion to apply the rotation, which greatly simplifies thanks to the properties of the tangent space.
 
 </p><p>
 
-Following the simplifications described in [<a href="#citation-hill12">Hill12</a>], we can produce the GLSL implementation shown in <a href="#listing_reorientednormalmapping">listing&#xA0;40</a>.
+Following the simplifications described in [<a href="#citation-hill12">Hill12</a>], we can produce the GLSL implementation shown in <a href="#listing_reorientednormalmapping">listing&nbsp;40</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> t = <span class="hljs-built_in">texture</span>(baseMap,   uv).xyz * <span class="hljs-type">vec3</span>( <span class="hljs-number">2.0</span>,  <span class="hljs-number">2.0</span>, <span class="hljs-number">2.0</span>) + <span class="hljs-type">vec3</span>(<span class="hljs-number">-1.0</span>, <span class="hljs-number">-1.0</span>,  <span class="hljs-number">0.0</span>);</span>
 <span class="line"><span class="hljs-type">vec3</span> u = <span class="hljs-built_in">texture</span>(detailMap, uv).xyz * <span class="hljs-type">vec3</span>(<span class="hljs-number">-2.0</span>, <span class="hljs-number">-2.0</span>, <span class="hljs-number">2.0</span>) + <span class="hljs-type">vec3</span>( <span class="hljs-number">1.0</span>,  <span class="hljs-number">1.0</span>, <span class="hljs-number">-1.0</span>);</span>
 <span class="line"><span class="hljs-type">vec3</span> r = <span class="hljs-built_in">normalize</span>(t * <span class="hljs-built_in">dot</span>(t, u) - u * t.z);</span>
-<span class="line"><span class="hljs-keyword">return</span> r;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_reorientednormalmapping">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;40:</b> Implementation of reoriented normal mapping in GLSL</div>
+<span class="line"><span class="hljs-keyword">return</span> r;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_reorientednormalmapping">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;40:</b> Implementation of reoriented normal mapping in GLSL</div>
 <p>
 
 
@@ -3982,54 +3982,54 @@ The normalization step is not strictly necessary and can be skipped if the techn
 
 </p><p>
 
-Since this technique is slightly more expensive than the one described below, we will mostly use it offline. We therefore provide a simple offline tool to combine two normal maps. <a href="#figure_blendednormalmaps">Figure&#xA0;70</a> presents the output of the tool with the base map and the detail map shown previously.
+Since this technique is slightly more expensive than the one described below, we will mostly use it offline. We therefore provide a simple offline tool to combine two normal maps. <a href="#figure_blendednormalmaps">Figure&nbsp;70</a> presents the output of the tool with the base map and the detail map shown previously.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_normal_map_blended.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_map_blended.jpg"></a><div class="imagecaption"><a class="target" name="figure_blendednormalmaps">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;70:</b> Blended normal and detail map (left) and resulting render when combined with a diffuse map (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_normal_map_blended.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_map_blended.jpg"></a><div class="imagecaption"><a class="target" name="figure_blendednormalmaps">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;70:</b> Blended normal and detail map (left) and resulting render when combined with a diffuse map (right)</div></div></center>
 
 <p></p>
-<a class="target" name="udnblending">&#xA0;</a><a class="target" name="lighting/normalmapping/udnblending">&#xA0;</a><a class="target" name="toc5.7.2">&#xA0;</a><h3>UDN blending</h3>
+<a class="target" name="udnblending">&nbsp;</a><a class="target" name="lighting/normalmapping/udnblending">&nbsp;</a><a class="target" name="toc5.7.2">&nbsp;</a><h3>UDN blending</h3>
 <p>
 
 
-The technique called UDN blending, described in [<a href="#citation-hill12">Hill12</a>], is a variant of the partial derivative blending technique. Its main advantage is the low number of shader instructions it requires (see <a href="#listing_udnblending">listing&#xA0;41</a>). While it leads to a reduction in details over flat areas, UDN blending is interesting if blending must be performed at runtime.
+The technique called UDN blending, described in [<a href="#citation-hill12">Hill12</a>], is a variant of the partial derivative blending technique. Its main advantage is the low number of shader instructions it requires (see <a href="#listing_udnblending">listing&nbsp;41</a>). While it leads to a reduction in details over flat areas, UDN blending is interesting if blending must be performed at runtime.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> t = <span class="hljs-built_in">texture</span>(baseMap,   uv).xyz * <span class="hljs-number">2.0</span> - <span class="hljs-number">1.0</span>;</span>
 <span class="line"><span class="hljs-type">vec3</span> u = <span class="hljs-built_in">texture</span>(detailMap, uv).xyz * <span class="hljs-number">2.0</span> - <span class="hljs-number">1.0</span>;</span>
 <span class="line"><span class="hljs-type">vec3</span> r = <span class="hljs-built_in">normalize</span>(t.xy + u.xy, t.z);</span>
-<span class="line"><span class="hljs-keyword">return</span> r;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_udnblending">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;41:</b> Implementation of UDN blending in GLSL</div>
+<span class="line"><span class="hljs-keyword">return</span> r;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_udnblending">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;41:</b> Implementation of UDN blending in GLSL</div>
 <p>
 
 
-The results are visually close to Reoriented Normal Mapping but a careful comparison of the data shows that UDN is indeed less correct. <a href="#figure_blendednormalmapsudn">Figure&#xA0;71</a> presents the result of the UDN blending approach using the same source data as in the previous examples.
+The results are visually close to Reoriented Normal Mapping but a careful comparison of the data shows that UDN is indeed less correct. <a href="#figure_blendednormalmapsudn">Figure&nbsp;71</a> presents the result of the UDN blending approach using the same source data as in the previous examples.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_normal_map_blended_udn.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_map_blended_udn.jpg"></a><div class="imagecaption"><a class="target" name="figure_blendednormalmapsudn">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;71:</b> Blended normal and detail map using the UDN blending technique</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_normal_map_blended_udn.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_map_blended_udn.jpg"></a><div class="imagecaption"><a class="target" name="figure_blendednormalmapsudn">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;71:</b> Blended normal and detail map using the UDN blending technique</div></div></center>
 
 <p></p>
-<a class="target" name="volumetriceffects">&#xA0;</a><a class="target" name="volumetriceffects">&#xA0;</a><a class="target" name="toc6">&#xA0;</a><h1>Volumetric effects</h1>
+<a class="target" name="volumetriceffects">&nbsp;</a><a class="target" name="volumetriceffects">&nbsp;</a><a class="target" name="toc6">&nbsp;</a><h1>Volumetric effects</h1>
 
-<a class="target" name="exponentialheightfog">&#xA0;</a><a class="target" name="volumetriceffects/exponentialheightfog">&#xA0;</a><a class="target" name="toc6.1">&#xA0;</a><h2>Exponential height fog</h2>
+<a class="target" name="exponentialheightfog">&nbsp;</a><a class="target" name="volumetriceffects/exponentialheightfog">&nbsp;</a><a class="target" name="toc6.1">&nbsp;</a><h2>Exponential height fog</h2>
 <p>
 
 
-</p><center><div class="image" style><a href="images/screenshot_fog1.jpg" target="_blank"><img class="markdeep" src="images/screenshot_fog1.jpg"></a><div class="imagecaption"><a class="target" name="figure_exponentialheightfog1">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;72:</b> Example of directional in-scattering with exponential height fog</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_fog1.jpg" target="_blank"><img class="markdeep" src="images/screenshot_fog1.jpg"></a><div class="imagecaption"><a class="target" name="figure_exponentialheightfog1">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;72:</b> Example of directional in-scattering with exponential height fog</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_fog2.jpg" target="_blank"><img class="markdeep" src="images/screenshot_fog2.jpg"></a><div class="imagecaption"><a class="target" name="figure_exponentialheightfog2">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;73:</b> Example of directional in-scattering with exponential height fog</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_fog2.jpg" target="_blank"><img class="markdeep" src="images/screenshot_fog2.jpg"></a><div class="imagecaption"><a class="target" name="figure_exponentialheightfog2">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;73:</b> Example of directional in-scattering with exponential height fog</div></div></center>
 
 <p></p>
-<a class="target" name="anti-aliasing">&#xA0;</a><a class="target" name="anti-aliasing">&#xA0;</a><a class="target" name="toc7">&#xA0;</a><h1>Anti-aliasing</h1>
+<a class="target" name="anti-aliasing">&nbsp;</a><a class="target" name="anti-aliasing">&nbsp;</a><a class="target" name="toc7">&nbsp;</a><h1>Anti-aliasing</h1>
 <p>
 
 
 [TODO] MSAA, geometric AA (normals and roughness), shader anti-aliasing (object-space shading?)
 
 </p>
-<a class="target" name="imagingpipeline">&#xA0;</a><a class="target" name="imagingpipeline">&#xA0;</a><a class="target" name="toc8">&#xA0;</a><h1>Imaging pipeline</h1>
+<a class="target" name="imagingpipeline">&nbsp;</a><a class="target" name="imagingpipeline">&nbsp;</a><a class="target" name="toc8">&nbsp;</a><h1>Imaging pipeline</h1>
 <p>
 
 
@@ -4042,46 +4042,46 @@ The series of transformations we are going to use form the following imaging pip
 </p><p>
 
 <svg class="diagram" xmlns="http://www.w3.org/2000/svg" version="1.1" height="432" width="672" style="margin:0 auto 0 auto;"><g transform="translate(8,16 )">
-<path d="M 8,0 L 8,64 " style="fill:none;"/>
-<path d="M 120,0 L 120,64 " style="fill:none;"/>
-<path d="M 176,0 L 176,64 " style="fill:none;"/>
-<path d="M 296,0 L 296,64 " style="fill:none;"/>
-<path d="M 352,0 L 352,64 " style="fill:none;"/>
-<path d="M 352,112 L 352,176 " style="fill:none;"/>
-<path d="M 352,224 L 352,288 " style="fill:none;"/>
-<path d="M 352,336 L 352,400 " style="fill:none;"/>
-<path d="M 416,64 L 416,104 " style="fill:none;"/>
-<path d="M 416,176 L 416,216 " style="fill:none;"/>
-<path d="M 416,288 L 416,328 " style="fill:none;"/>
-<path d="M 480,0 L 480,64 " style="fill:none;"/>
-<path d="M 480,112 L 480,176 " style="fill:none;"/>
-<path d="M 480,224 L 480,288 " style="fill:none;"/>
-<path d="M 480,336 L 480,400 " style="fill:none;"/>
-<path d="M 536,336 L 536,400 " style="fill:none;"/>
-<path d="M 648,336 L 648,400 " style="fill:none;"/>
-<path d="M 8,0 L 120,0 " style="fill:none;"/>
-<path d="M 176,0 L 296,0 " style="fill:none;"/>
-<path d="M 352,0 L 480,0 " style="fill:none;"/>
-<path d="M 120,32 L 168,32 " style="fill:none;"/>
-<path d="M 296,32 L 344,32 " style="fill:none;"/>
-<path d="M 8,64 L 120,64 " style="fill:none;"/>
-<path d="M 176,64 L 296,64 " style="fill:none;"/>
-<path d="M 352,64 L 480,64 " style="fill:none;"/>
-<path d="M 352,112 L 480,112 " style="fill:none;"/>
-<path d="M 352,176 L 480,176 " style="fill:none;"/>
-<path d="M 352,224 L 480,224 " style="fill:none;"/>
-<path d="M 352,288 L 480,288 " style="fill:none;"/>
-<path d="M 352,336 L 480,336 " style="fill:none;"/>
-<path d="M 536,336 L 648,336 " style="fill:none;"/>
-<path d="M 480,368 L 528,368 " style="fill:none;"/>
-<path d="M 352,400 L 480,400 " style="fill:none;"/>
-<path d="M 536,400 L 648,400 " style="fill:none;"/>
-<polygon points="536,368 524,362.4 524,373.6 " style="stroke:none" transform="rotate(0,528,368 )"/>
-<polygon points="424,328 412,322.4 412,333.6 " style="stroke:none" transform="rotate(90,416,328 )"/>
-<polygon points="424,216 412,210.4 412,221.6 " style="stroke:none" transform="rotate(90,416,216 )"/>
-<polygon points="424,104 412,98.4 412,109.6 " style="stroke:none" transform="rotate(90,416,104 )"/>
-<polygon points="352,32 340,26.4 340,37.6 " style="stroke:none" transform="rotate(0,344,32 )"/>
-<polygon points="176,32 164,26.4 164,37.6 " style="stroke:none" transform="rotate(0,168,32 )"/>
+<path d="M 8,0 L 8,64 " style="fill:none;"></path>
+<path d="M 120,0 L 120,64 " style="fill:none;"></path>
+<path d="M 176,0 L 176,64 " style="fill:none;"></path>
+<path d="M 296,0 L 296,64 " style="fill:none;"></path>
+<path d="M 352,0 L 352,64 " style="fill:none;"></path>
+<path d="M 352,112 L 352,176 " style="fill:none;"></path>
+<path d="M 352,224 L 352,288 " style="fill:none;"></path>
+<path d="M 352,336 L 352,400 " style="fill:none;"></path>
+<path d="M 416,64 L 416,104 " style="fill:none;"></path>
+<path d="M 416,176 L 416,216 " style="fill:none;"></path>
+<path d="M 416,288 L 416,328 " style="fill:none;"></path>
+<path d="M 480,0 L 480,64 " style="fill:none;"></path>
+<path d="M 480,112 L 480,176 " style="fill:none;"></path>
+<path d="M 480,224 L 480,288 " style="fill:none;"></path>
+<path d="M 480,336 L 480,400 " style="fill:none;"></path>
+<path d="M 536,336 L 536,400 " style="fill:none;"></path>
+<path d="M 648,336 L 648,400 " style="fill:none;"></path>
+<path d="M 8,0 L 120,0 " style="fill:none;"></path>
+<path d="M 176,0 L 296,0 " style="fill:none;"></path>
+<path d="M 352,0 L 480,0 " style="fill:none;"></path>
+<path d="M 120,32 L 168,32 " style="fill:none;"></path>
+<path d="M 296,32 L 344,32 " style="fill:none;"></path>
+<path d="M 8,64 L 120,64 " style="fill:none;"></path>
+<path d="M 176,64 L 296,64 " style="fill:none;"></path>
+<path d="M 352,64 L 480,64 " style="fill:none;"></path>
+<path d="M 352,112 L 480,112 " style="fill:none;"></path>
+<path d="M 352,176 L 480,176 " style="fill:none;"></path>
+<path d="M 352,224 L 480,224 " style="fill:none;"></path>
+<path d="M 352,288 L 480,288 " style="fill:none;"></path>
+<path d="M 352,336 L 480,336 " style="fill:none;"></path>
+<path d="M 536,336 L 648,336 " style="fill:none;"></path>
+<path d="M 480,368 L 528,368 " style="fill:none;"></path>
+<path d="M 352,400 L 480,400 " style="fill:none;"></path>
+<path d="M 536,400 L 648,400 " style="fill:none;"></path>
+<polygon points="536,368 524,362.4 524,373.6 " style="stroke:none" transform="rotate(0,528,368 )"></polygon>
+<polygon points="424,328 412,322.4 412,333.6 " style="stroke:none" transform="rotate(90,416,328 )"></polygon>
+<polygon points="424,216 412,210.4 412,221.6 " style="stroke:none" transform="rotate(90,416,216 )"></polygon>
+<polygon points="424,104 412,98.4 412,109.6 " style="stroke:none" transform="rotate(90,416,104 )"></polygon>
+<polygon points="352,32 340,26.4 340,37.6 " style="stroke:none" transform="rotate(0,344,32 )"></polygon>
+<polygon points="176,32 164,26.4 164,37.6 " style="stroke:none" transform="rotate(0,168,32 )"></polygon>
 <g transform="translate(0,0)"><text text-anchor="middle" x="48" y="20">S</text><text text-anchor="middle" x="56" y="20">c</text><text text-anchor="middle" x="64" y="20">e</text><text text-anchor="middle" x="72" y="20">n</text><text text-anchor="middle" x="80" y="20">e</text><text text-anchor="middle" x="200" y="20">N</text><text text-anchor="middle" x="208" y="20">o</text><text text-anchor="middle" x="216" y="20">r</text><text text-anchor="middle" x="224" y="20">m</text><text text-anchor="middle" x="232" y="20">a</text><text text-anchor="middle" x="240" y="20">l</text><text text-anchor="middle" x="248" y="20">i</text><text text-anchor="middle" x="256" y="20">z</text><text text-anchor="middle" x="264" y="20">e</text><text text-anchor="middle" x="272" y="20">d</text><text text-anchor="middle" x="32" y="36">l</text><text text-anchor="middle" x="40" y="36">u</text><text text-anchor="middle" x="48" y="36">m</text><text text-anchor="middle" x="56" y="36">i</text><text text-anchor="middle" x="64" y="36">n</text><text text-anchor="middle" x="72" y="36">a</text><text text-anchor="middle" x="80" y="36">n</text><text text-anchor="middle" x="88" y="36">c</text><text text-anchor="middle" x="96" y="36">e</text><text text-anchor="middle" x="200" y="36">l</text><text text-anchor="middle" x="208" y="36">u</text><text text-anchor="middle" x="216" y="36">m</text><text text-anchor="middle" x="224" y="36">i</text><text text-anchor="middle" x="232" y="36">n</text><text text-anchor="middle" x="240" y="36">a</text><text text-anchor="middle" x="248" y="36">n</text><text text-anchor="middle" x="256" y="36">c</text><text text-anchor="middle" x="264" y="36">e</text><text text-anchor="middle" x="368" y="36">W</text><text text-anchor="middle" x="376" y="36">h</text><text text-anchor="middle" x="384" y="36">i</text><text text-anchor="middle" x="392" y="36">t</text><text text-anchor="middle" x="400" y="36">e</text><text text-anchor="middle" x="416" y="36">b</text><text text-anchor="middle" x="424" y="36">a</text><text text-anchor="middle" x="432" y="36">l</text><text text-anchor="middle" x="440" y="36">a</text><text text-anchor="middle" x="448" y="36">n</text><text text-anchor="middle" x="456" y="36">c</text><text text-anchor="middle" x="464" y="36">e</text><text text-anchor="middle" x="216" y="52">(</text><text text-anchor="middle" x="224" y="52">H</text><text text-anchor="middle" x="232" y="52">D</text><text text-anchor="middle" x="240" y="52">R</text><text text-anchor="middle" x="248" y="52">)</text><text text-anchor="middle" x="368" y="148">C</text><text text-anchor="middle" x="376" y="148">o</text><text text-anchor="middle" x="384" y="148">l</text><text text-anchor="middle" x="392" y="148">o</text><text text-anchor="middle" x="400" y="148">r</text><text text-anchor="middle" x="416" y="148">g</text><text text-anchor="middle" x="424" y="148">r</text><text text-anchor="middle" x="432" y="148">a</text><text text-anchor="middle" x="440" y="148">d</text><text text-anchor="middle" x="448" y="148">i</text><text text-anchor="middle" x="456" y="148">n</text><text text-anchor="middle" x="464" y="148">g</text><text text-anchor="middle" x="368" y="260">T</text><text text-anchor="middle" x="376" y="260">o</text><text text-anchor="middle" x="384" y="260">n</text><text text-anchor="middle" x="392" y="260">e</text><text text-anchor="middle" x="408" y="260">m</text><text text-anchor="middle" x="416" y="260">a</text><text text-anchor="middle" x="424" y="260">p</text><text text-anchor="middle" x="432" y="260">p</text><text text-anchor="middle" x="440" y="260">i</text><text text-anchor="middle" x="448" y="260">n</text><text text-anchor="middle" x="456" y="260">g</text><text text-anchor="middle" x="576" y="356">P</text><text text-anchor="middle" x="584" y="356">i</text><text text-anchor="middle" x="592" y="356">x</text><text text-anchor="middle" x="600" y="356">e</text><text text-anchor="middle" x="608" y="356">l</text><text text-anchor="middle" x="400" y="372">O</text><text text-anchor="middle" x="408" y="372">E</text><text text-anchor="middle" x="416" y="372">T</text><text text-anchor="middle" x="424" y="372">F</text><text text-anchor="middle" x="576" y="372">v</text><text text-anchor="middle" x="584" y="372">a</text><text text-anchor="middle" x="592" y="372">l</text><text text-anchor="middle" x="600" y="372">u</text><text text-anchor="middle" x="608" y="372">e</text><text text-anchor="middle" x="576" y="388">(</text><text text-anchor="middle" x="584" y="388">L</text><text text-anchor="middle" x="592" y="388">D</text><text text-anchor="middle" x="600" y="388">R</text><text text-anchor="middle" x="608" y="388">)</text></g></g></svg>
 
 </p><p>
@@ -4093,14 +4093,14 @@ The series of transformations we are going to use form the following imaging pip
 [TODO] Color spaces (ACES, sRGB, Rec. 709, Rec. 2020, etc.), gamma/linear, etc.
 
 </p>
-<a class="target" name="physicallybasedcamera">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera">&#xA0;</a><a class="target" name="toc8.1">&#xA0;</a><h2>Physically based camera</h2>
+<a class="target" name="physicallybasedcamera">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera">&nbsp;</a><a class="target" name="toc8.1">&nbsp;</a><h2>Physically based camera</h2>
 <p>
 
 
-The first step in the image transformation process is to use a physically based camera to properly expose the scene&apos;s outgoing luminance.
+The first step in the image transformation process is to use a physically based camera to properly expose the scene's outgoing luminance.
 
 </p>
-<a class="target" name="exposuresettings">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposuresettings">&#xA0;</a><a class="target" name="toc8.1.1">&#xA0;</a><h3>Exposure settings</h3>
+<a class="target" name="exposuresettings">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposuresettings">&nbsp;</a><a class="target" name="toc8.1.1">&nbsp;</a><h3>Exposure settings</h3>
 <p>
 
 
@@ -4108,7 +4108,7 @@ Because we use photometric units throughout the lighting pipeline, the light rea
 
 </p><p>
 
-This range remapping is done in a camera by exposing the sensor for a certain time. To maximize the use of the limited range of the sensor, the scene&apos;s light range is centered around the &#x201C;middle gray&#x201D;, a value halfway between black and white. The exposition is therefore achieved by manipulating, either manually or automatically, 3 settings:
+This range remapping is done in a camera by exposing the sensor for a certain time. To maximize the use of the limited range of the sensor, the scene's light range is centered around the “middle gray”, a value halfway between black and white. The exposition is therefore achieved by manipulating, either manually or automatically, 3 settings:
 
 </p><p>
 
@@ -4121,22 +4121,22 @@ This range remapping is done in a camera by exposing the sensor for a certain ti
 
 <p></p><p>
 
-</p><dl><dt>Aperture</dt><dd><p>    Noted \(N\) and expressed in f-stops &#x192;, this setting controls how open or closed the camera system&apos;s aperture is. Since an f-stop indicate the ratio of the lens&apos; focal length to the diameter of the entrance pupil, high-values (&#x192;/16) indicate a small aperture and small values (&#x192;/1.4) indicate a wide aperture. In addition to the exposition, the aperture setting controls the depth of field.
+</p><dl><dt>Aperture</dt><dd><p>    Noted \(N\) and expressed in f-stops ƒ, this setting controls how open or closed the camera system's aperture is. Since an f-stop indicate the ratio of the lens' focal length to the diameter of the entrance pupil, high-values (ƒ/16) indicate a small aperture and small values (ƒ/1.4) indicate a wide aperture. In addition to the exposition, the aperture setting controls the depth of field.
 
 </p></dd><dt>Shutter speed</dt><dd><p>    Noted \(t\) and expressed in seconds \(s\), this setting controls how long the aperture remains opened (it also controls the timing of the sensor shutter(s), whether electronic or mechanical). In addition to the exposition, the shutter speed controls motion blur.
 
-</p></dd><dt>Sensitivity</dt><dd><p>    Noted \(S\) and expressed in ISO, this setting controls how the light reaching the sensor is quantized. Because of its unit, this setting is often referred to as simply the &#x201C;ISO&#x201D; or &#x201C;ISO setting&#x201D;. In addition to the exposition, the sensitivity setting controls the amount of noise.
+</p></dd><dt>Sensitivity</dt><dd><p>    Noted \(S\) and expressed in ISO, this setting controls how the light reaching the sensor is quantized. Because of its unit, this setting is often referred to as simply the “ISO” or “ISO setting”. In addition to the exposition, the sensitivity setting controls the amount of noise.
 
 </p></dd></dl><p></p>
-<a class="target" name="exposurevalue">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposurevalue">&#xA0;</a><a class="target" name="toc8.1.2">&#xA0;</a><h3>Exposure value</h3>
+<a class="target" name="exposurevalue">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposurevalue">&nbsp;</a><a class="target" name="toc8.1.2">&nbsp;</a><h3>Exposure value</h3>
 <p>
 
 
-Since referring to these 3 settings in our equations would be unwieldy, we instead summarize the &#x201C;exposure triangle&#x201D; by an exposure value, noted EV<sup><a href="#endnote-reciprocity">10</a></sup>.
+Since referring to these 3 settings in our equations would be unwieldy, we instead summarize the “exposure triangle” by an exposure value, noted EV<sup><a href="#endnote-reciprocity">10</a></sup>.
 
 </p><p>
 
-The EV is expressed in a base-2 logarithmic scale, with a difference of 1 EV called a stop. One positive stop (+1 EV) corresponds to a factor of two in luminance and one negative stop (&#x2212;1 EV) corresponds to a factor of half in luminance.
+The EV is expressed in a base-2 logarithmic scale, with a difference of 1 EV called a stop. One positive stop (+1 EV) corresponds to a factor of two in luminance and one negative stop (−1 EV) corresponds to a factor of half in luminance.
 
 </p><p>
 
@@ -4178,10 +4178,10 @@ Note that the operator (photographer, etc.) can achieve the same exposure (and t
 
 </p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-reciprocity">&#xA0;</a><sup>10</sup> We assume a digital sensor, which means we don&apos;t need to take reciprocity failure into account
+</p><div class="endnote"><a class="target" name="endnote-reciprocity">&nbsp;</a><sup>10</sup> We assume a digital sensor, which means we don't need to take reciprocity failure into account
 </div>
 <p></p>
-<a class="target" name="exposurevalueandluminance">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposurevalue/exposurevalueandluminance">&#xA0;</a><a class="target" name="toc8.1.2.1">&#xA0;</a><h4>Exposure value and luminance</h4>
+<a class="target" name="exposurevalueandluminance">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposurevalue/exposurevalueandluminance">&nbsp;</a><a class="target" name="toc8.1.2.1">&nbsp;</a><h4>Exposure value and luminance</h4>
 <p>
 
 
@@ -4226,7 +4226,7 @@ L = 2^{EV_{100}} \times \frac{12.5}{100} = 2^{EV_{100} - 3}
 \end{equation}$$
 
 </p>
-<a class="target" name="exposurevalueandilluminance">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposurevalue/exposurevalueandilluminance">&#xA0;</a><a class="target" name="toc8.1.2.2">&#xA0;</a><h4>Exposure value and illuminance</h4>
+<a class="target" name="exposurevalueandilluminance">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposurevalue/exposurevalueandilluminance">&nbsp;</a><a class="target" name="toc8.1.2.2">&nbsp;</a><h4>Exposure value and illuminance</h4>
 <p>
 
 
@@ -4273,7 +4273,7 @@ E = 2^{EV_{100}} \times 3.4
 \end{equation}$$
 
 </p>
-<a class="target" name="exposurecompensation">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposurevalue/exposurecompensation">&#xA0;</a><a class="target" name="toc8.1.2.3">&#xA0;</a><h4>Exposure compensation</h4>
+<a class="target" name="exposurecompensation">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposurevalue/exposurecompensation">&nbsp;</a><a class="target" name="toc8.1.2.3">&nbsp;</a><h4>Exposure compensation</h4>
 <p>
 
 
@@ -4286,7 +4286,7 @@ Applying an exposure compensation \(EC\) is a simple as adding an offset to the
 </p><p>
 
 $$\begin{equation}\label{ec}
-EV_{100}&apos; = EV_{100} - EC
+EV_{100}' = EV_{100} - EC
 \end{equation}$$
 
 </p><p>
@@ -4294,7 +4294,7 @@ EV_{100}&apos; = EV_{100} - EC
 This equation uses a negative sign because we are using \(EC\) in f-stops to adjust the final exposure. Increasing the EV is akin to closing down the aperture of the lens (or reducing shutter speed or reducing sensitivity). A higher EV will produce darker images.
 
 </p>
-<a class="target" name="exposure">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposure">&#xA0;</a><a class="target" name="toc8.1.3">&#xA0;</a><h3>Exposure</h3>
+<a class="target" name="exposure">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/exposure">&nbsp;</a><a class="target" name="toc8.1.3">&nbsp;</a><h3>Exposure</h3>
 <p>
 
 
@@ -4337,7 +4337,7 @@ This maximum luminance can then be used to normalize incident luminance \(L\) as
 </p><p>
 
 $$\begin{equation}\label{normalizedLuminance}
-L&apos; = L \frac{1}{L_{max}}
+L' = L \frac{1}{L_{max}}
 \end{equation}$$
 
 </p><p>
@@ -4354,9 +4354,9 @@ L_{max} &amp;= 2^{EV_{100}} \times 1.2
 
 </p><p>
 
-<a href="#listing_fragmentexposure">Listing&#xA0;42</a> shows how the exposure term can be applied directly to the pixel color computed in a fragment shader.
+<a href="#listing_fragmentexposure">Listing&nbsp;42</a> shows how the exposure term can be applied directly to the pixel color computed in a fragment shader.
 
-</p><pre class="listing tilde"><code><span class="line"><span class="hljs-comment">// Computes the camera&apos;s EV100 from exposure settings</span></span>
+</p><pre class="listing tilde"><code><span class="line"><span class="hljs-comment">// Computes the camera's EV100 from exposure settings</span></span>
 <span class="line"><span class="hljs-comment">// aperture in f-stops</span></span>
 <span class="line"><span class="hljs-comment">// shutterSpeed in seconds</span></span>
 <span class="line"><span class="hljs-comment">// sensitivity in ISO</span></span>
@@ -4365,7 +4365,7 @@ L_{max} &amp;= 2^{EV_{100}} \times 1.2
 <span class="line">}</span>
 <span class="line"></span>
 <span class="line"><span class="hljs-comment">// Computes the exposure normalization factor from</span></span>
-<span class="line"><span class="hljs-comment">// the camera&apos;s EV100</span></span>
+<span class="line"><span class="hljs-comment">// the camera's EV100</span></span>
 <span class="line"><span class="hljs-function"><span class="hljs-keyword">float</span> <span class="hljs-title">exposure</span><span class="hljs-params">(ev100)</span> </span>{</span>
 <span class="line">    <span class="hljs-keyword">return</span> <span class="hljs-number">1.0</span> / (<span class="hljs-built_in">pow</span>(<span class="hljs-number">2.0</span>, ev100) * <span class="hljs-number">1.2</span>);</span>
 <span class="line">}</span>
@@ -4374,7 +4374,7 @@ L_{max} &amp;= 2^{EV_{100}} \times 1.2
 <span class="line"><span class="hljs-keyword">float</span> exposure = exposure(ev100);</span>
 <span class="line"></span>
 <span class="line">vec4 color = evaluateLighting();</span>
-<span class="line">color.rgb *= exposure;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_fragmentexposure">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;42:</b> Implementation of exposure in GLSL</div>
+<span class="line">color.rgb *= exposure;</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_fragmentexposure">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;42:</b> Implementation of exposure in GLSL</div>
 <p>
 
 
@@ -4382,23 +4382,23 @@ In practice the exposure factor can be pre-computed on the CPU to save shader in
 
 </p><p>
 
-</p><div class="endnote"><a class="target" name="endnote-lensattenuation">&#xA0;</a><sup>11</sup> See <em class="asterisk">Film Speed, Measurements and calculations</em> on Wikipedia (<a href="https://en.wikipedia.org/wiki/Film_speed)" class="url">https://en.wikipedia.org/wiki/Film_speed)</a>
+</p><div class="endnote"><a class="target" name="endnote-lensattenuation">&nbsp;</a><sup>11</sup> See <em class="asterisk">Film Speed, Measurements and calculations</em> on Wikipedia (<a href="https://en.wikipedia.org/wiki/Film_speed)" class="url">https://en.wikipedia.org/wiki/Film_speed)</a>
 </div>
 <p></p>
-<a class="target" name="automaticexposure">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/automaticexposure">&#xA0;</a><a class="target" name="toc8.1.4">&#xA0;</a><h3>Automatic exposure</h3>
+<a class="target" name="automaticexposure">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/automaticexposure">&nbsp;</a><a class="target" name="toc8.1.4">&nbsp;</a><h3>Automatic exposure</h3>
 <p>
 
 
-The process described above relies on artists setting the camera exposure settings manually. This can prove cumbersome in practice since camera movements and/or dynamic effects can greatly affect the scene&apos;s luminance. Since we know how to compute the exposure value from a given luminance (see section  <a href="#toc8.1.2.1">8.1.2.1</a>), we can transform our camera into a spot meter. To do so, we need to measure the scene&apos;s luminance.
+The process described above relies on artists setting the camera exposure settings manually. This can prove cumbersome in practice since camera movements and/or dynamic effects can greatly affect the scene's luminance. Since we know how to compute the exposure value from a given luminance (see section  <a href="#toc8.1.2.1">8.1.2.1</a>), we can transform our camera into a spot meter. To do so, we need to measure the scene's luminance.
 
 </p><p>
 
-There are two common techniques used to measure the scene&apos;s luminance:
+There are two common techniques used to measure the scene's luminance:
 
 </p><p>
 
 </p><ul>
-<li class="minus"><strong class="asterisk">Luminance downsampling</strong>, by downsampling the previous frame successively until obtaining a 1&#xD7;1 log luminance buffer that can be read on the CPU (this could also be achieved using a compute shader). The result is the average log luminance of the scene. The first downsampling must extract the luminance of each pixel first. This technique can be unstable and its output should be smoothed over time.
+<li class="minus"><strong class="asterisk">Luminance downsampling</strong>, by downsampling the previous frame successively until obtaining a 1×1 log luminance buffer that can be read on the CPU (this could also be achieved using a compute shader). The result is the average log luminance of the scene. The first downsampling must extract the luminance of each pixel first. This technique can be unstable and its output should be smoothed over time.
 </li>
 <li class="minus"><strong class="asterisk">Using a luminance histogram</strong>, to find the average log luminance. This technique has an advantage over the previous one as it allows to ignore extreme values and offers more stable results.</li></ul>
 
@@ -4419,7 +4419,7 @@ These two techniques also limit the metering system to average metering, where e
 </p></dd><dt>Multi-zone or matrix metering</dt><dd><p>    A metering mode that differs for each manufacturer. The goal of this mode is to prioritize exposure for the most important parts of the scene. This is often achieved by splitting the image into a grid and by classifying each cell (using focus information, min/max luminance, etc.). Advanced implementations attempt to compare the scene to a known dataset to achieve proper exposure (backlit sunset, overcast snowy day, etc.).
 
 </p></dd></dl><p></p>
-<a class="target" name="spotmetering">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/automaticexposure/spotmetering">&#xA0;</a><a class="target" name="toc8.1.4.1">&#xA0;</a><h4>Spot metering</h4>
+<a class="target" name="spotmetering">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/automaticexposure/spotmetering">&nbsp;</a><a class="target" name="toc8.1.4.1">&nbsp;</a><h4>Spot metering</h4>
 <p>
 
 
@@ -4436,7 +4436,7 @@ w(x,y) = \begin{cases} 1 &amp; \left| p_{x,y} - s_{x,y} \right| \le s_r \\ 0 &am
 Where \(p\) is the position of the pixel, \(s\) the center of the spot and \( s_r \) the radius of the spot.
 
 </p>
-<a class="target" name="center-weightedmetering">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/automaticexposure/center-weightedmetering">&#xA0;</a><a class="target" name="toc8.1.4.2">&#xA0;</a><h4>Center-weighted metering</h4>
+<a class="target" name="center-weightedmetering">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/automaticexposure/center-weightedmetering">&nbsp;</a><a class="target" name="toc8.1.4.2">&nbsp;</a><h4>Center-weighted metering</h4>
 <p>
 
 
@@ -4446,10 +4446,10 @@ w(x,y) = smooth(\left| p_{x,y} - c \right| \times \frac{2}{width} )
 
 </p><p>
 
-Where \(c\) is the center of the time and \( smooth() \) a smoothing function such as GLSL&apos;s <code>smoothstep()</code>.
+Where \(c\) is the center of the time and \( smooth() \) a smoothing function such as GLSL's <code>smoothstep()</code>.
 
 </p>
-<a class="target" name="adaptation">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/automaticexposure/adaptation">&#xA0;</a><a class="target" name="toc8.1.4.3">&#xA0;</a><h4>Adaptation</h4>
+<a class="target" name="adaptation">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/automaticexposure/adaptation">&nbsp;</a><a class="target" name="toc8.1.4.3">&nbsp;</a><h4>Adaptation</h4>
 <p>
 
 
@@ -4466,7 +4466,7 @@ L_{avg} = L_{avg} + (L - L_{avg}) \times (1 - e^{-\Delta t \cdot \tau})
 Where \( \Delta t \) is the delta time from the previous frame and \(\tau\) a constant that controls the adaptation rate.
 
 </p>
-<a class="target" name="bloom">&#xA0;</a><a class="target" name="imagingpipeline/physicallybasedcamera/bloom">&#xA0;</a><a class="target" name="toc8.1.5">&#xA0;</a><h3>Bloom</h3>
+<a class="target" name="bloom">&nbsp;</a><a class="target" name="imagingpipeline/physicallybasedcamera/bloom">&nbsp;</a><a class="target" name="toc8.1.5">&nbsp;</a><h3>Bloom</h3>
 <p>
 
 
@@ -4474,7 +4474,7 @@ Because the EV scale is almost perceptually linear, the exposure value is also o
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_bloom.jpg" target="_blank"><img class="markdeep" src="images/screenshot_bloom.jpg"></a><div class="imagecaption"><a class="target" name="figure_bloom">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;74:</b> Saturated photosites on a sensor create a blooming effect in the bright parts of the scene</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_bloom.jpg" target="_blank"><img class="markdeep" src="images/screenshot_bloom.jpg"></a><div class="imagecaption"><a class="target" name="figure_bloom">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;74:</b> Saturated photosites on a sensor create a blooming effect in the bright parts of the scene</div></div></center>
 
 <p></p><p>
 
@@ -4489,7 +4489,7 @@ L_{bloom} = c \times 2^{EV_{bloom} - 3}
 
 </p><p>
 
-Equation \( \ref{bloomEV} \) can be used in a fragment shader to implement emissive blooms, as shown in <a href="#listing_fragmentemissive">listing&#xA0;43</a>.
+Equation \( \ref{bloomEV} \) can be used in a fragment shader to implement emissive blooms, as shown in <a href="#listing_fragmentemissive">listing&nbsp;43</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec4</span> surfaceShading() {</span>
 <span class="line">    <span class="hljs-type">vec4</span> color = evaluateLights();</span>
@@ -4498,11 +4498,11 @@ Equation \( \ref{bloomEV} \) can be used in a fragment shader to implement emiss
 <span class="line">    color.rgb += emissive.rgb * <span class="hljs-built_in">pow</span>(<span class="hljs-number">2.0</span>, ev100 + emissive.w - <span class="hljs-number">3.0</span>);</span>
 <span class="line">    color.rgb *= exposure;</span>
 <span class="line">    <span class="hljs-keyword">return</span> color;</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_fragmentemissive">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;43:</b> Implementation of emissive bloom in GLSL</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_fragmentemissive">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;43:</b> Implementation of emissive bloom in GLSL</div>
 
-<a class="target" name="opticspost-processing">&#xA0;</a><a class="target" name="imagingpipeline/opticspost-processing">&#xA0;</a><a class="target" name="toc8.2">&#xA0;</a><h2>Optics post-processing</h2>
+<a class="target" name="opticspost-processing">&nbsp;</a><a class="target" name="imagingpipeline/opticspost-processing">&nbsp;</a><a class="target" name="toc8.2">&nbsp;</a><h2>Optics post-processing</h2>
 
-<a class="target" name="colorfringing">&#xA0;</a><a class="target" name="imagingpipeline/opticspost-processing/colorfringing">&#xA0;</a><a class="target" name="toc8.2.1">&#xA0;</a><h3>Color fringing</h3>
+<a class="target" name="colorfringing">&nbsp;</a><a class="target" name="imagingpipeline/opticspost-processing/colorfringing">&nbsp;</a><a class="target" name="toc8.2.1">&nbsp;</a><h3>Color fringing</h3>
 <p>
 
 
@@ -4510,17 +4510,17 @@ Equation \( \ref{bloomEV} \) can be used in a fragment shader to implement emiss
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_fringing.jpg" target="_blank"><img class="markdeep" src="images/screenshot_fringing.jpg"></a><div class="imagecaption"><a class="target" name="figure_fringing">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;75:</b> Example of color fringing: look at the ear on the left or the chin at the bottom.</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_fringing.jpg" target="_blank"><img class="markdeep" src="images/screenshot_fringing.jpg"></a><div class="imagecaption"><a class="target" name="figure_fringing">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;75:</b> Example of color fringing: look at the ear on the left or the chin at the bottom.</div></div></center>
 
 <p></p>
-<a class="target" name="lensflares">&#xA0;</a><a class="target" name="imagingpipeline/opticspost-processing/lensflares">&#xA0;</a><a class="target" name="toc8.2.2">&#xA0;</a><h3>Lens flares</h3>
+<a class="target" name="lensflares">&nbsp;</a><a class="target" name="imagingpipeline/opticspost-processing/lensflares">&nbsp;</a><a class="target" name="toc8.2.2">&nbsp;</a><h3>Lens flares</h3>
 <p>
 
 
 [TODO] Notes: there is a physically based approach to generating lens flares, by tracing rays through the optical assembly of the lens, but we are going to use an image-based approach. This approach is cheaper and has a few welcome benefits such as free emitters occlusion and unlimited light sources support.
 
 </p>
-<a class="target" name="filmicpost-processing">&#xA0;</a><a class="target" name="imagingpipeline/filmicpost-processing">&#xA0;</a><a class="target" name="toc8.3">&#xA0;</a><h2>Filmic post-processing</h2>
+<a class="target" name="filmicpost-processing">&nbsp;</a><a class="target" name="imagingpipeline/filmicpost-processing">&nbsp;</a><a class="target" name="toc8.3">&nbsp;</a><h2>Filmic post-processing</h2>
 <p>
 
 
@@ -4531,15 +4531,15 @@ Equation \( \ref{bloomEV} \) can be used in a fragment shader to implement emiss
 It is important to provide color correction tools to give artists greater artistic control over the final image. These tools are found in every photo or video processing application, such as Adobe Photoshop or Adobe After Effects.
 
 </p>
-<a class="target" name="contrast">&#xA0;</a><a class="target" name="imagingpipeline/filmicpost-processing/contrast">&#xA0;</a><a class="target" name="toc8.3.1">&#xA0;</a><h3>Contrast</h3>
+<a class="target" name="contrast">&nbsp;</a><a class="target" name="imagingpipeline/filmicpost-processing/contrast">&nbsp;</a><a class="target" name="toc8.3.1">&nbsp;</a><h3>Contrast</h3>
 
-<a class="target" name="curves">&#xA0;</a><a class="target" name="imagingpipeline/filmicpost-processing/curves">&#xA0;</a><a class="target" name="toc8.3.2">&#xA0;</a><h3>Curves</h3>
+<a class="target" name="curves">&nbsp;</a><a class="target" name="imagingpipeline/filmicpost-processing/curves">&nbsp;</a><a class="target" name="toc8.3.2">&nbsp;</a><h3>Curves</h3>
 
-<a class="target" name="levels">&#xA0;</a><a class="target" name="imagingpipeline/filmicpost-processing/levels">&#xA0;</a><a class="target" name="toc8.3.3">&#xA0;</a><h3>Levels</h3>
+<a class="target" name="levels">&nbsp;</a><a class="target" name="imagingpipeline/filmicpost-processing/levels">&nbsp;</a><a class="target" name="toc8.3.3">&nbsp;</a><h3>Levels</h3>
 
-<a class="target" name="colorgrading">&#xA0;</a><a class="target" name="imagingpipeline/filmicpost-processing/colorgrading">&#xA0;</a><a class="target" name="toc8.3.4">&#xA0;</a><h3>Color grading</h3>
+<a class="target" name="colorgrading">&nbsp;</a><a class="target" name="imagingpipeline/filmicpost-processing/colorgrading">&nbsp;</a><a class="target" name="toc8.3.4">&nbsp;</a><h3>Color grading</h3>
 
-<a class="target" name="lightpath">&#xA0;</a><a class="target" name="imagingpipeline/lightpath">&#xA0;</a><a class="target" name="toc8.4">&#xA0;</a><h2>Light path</h2>
+<a class="target" name="lightpath">&nbsp;</a><a class="target" name="imagingpipeline/lightpath">&nbsp;</a><a class="target" name="toc8.4">&nbsp;</a><h2>Light path</h2>
 <p>
 
 
@@ -4583,46 +4583,46 @@ Tiled shading can be applied to both forward and deferred rendering methods. The
 
 </p><p>
 
-The scene displayed in <a href="#figure_sponza">figure&#xA0;76</a> was rendered using clustered forward rendering.
+The scene displayed in <a href="#figure_sponza">figure&nbsp;76</a> was rendered using clustered forward rendering.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_sponza.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza.jpg"></a><div class="imagecaption"><a class="target" name="figure_sponza">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;76:</b> Clustered forward rendering with dozens of dynamic lights and MSAA</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_sponza.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza.jpg"></a><div class="imagecaption"><a class="target" name="figure_sponza">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;76:</b> Clustered forward rendering with dozens of dynamic lights and MSAA</div></div></center>
 
 <p></p><p>
 
-<a href="#figure_sponzatiles">Figure&#xA0;77</a> shows the same scene split in tiles (in this case, a 1280&#xD7;720 render target with 80&#xD7;80px tiles).
+<a href="#figure_sponzatiles">Figure&nbsp;77</a> shows the same scene split in tiles (in this case, a 1280×720 render target with 80×80px tiles).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_sponza_tiles.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza_tiles.jpg"></a><div class="imagecaption"><a class="target" name="figure_sponzatiles">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;77:</b> Tiled shading (16&#xD7;9 tiles)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_sponza_tiles.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza_tiles.jpg"></a><div class="imagecaption"><a class="target" name="figure_sponzatiles">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;77:</b> Tiled shading (16×9 tiles)</div></div></center>
 
 <p></p>
-<a class="target" name="clusteredforwardrendering">&#xA0;</a><a class="target" name="imagingpipeline/lightpath/clusteredforwardrendering">&#xA0;</a><a class="target" name="toc8.4.1">&#xA0;</a><h3>Clustered Forward Rendering</h3>
+<a class="target" name="clusteredforwardrendering">&nbsp;</a><a class="target" name="imagingpipeline/lightpath/clusteredforwardrendering">&nbsp;</a><a class="target" name="toc8.4.1">&nbsp;</a><h3>Clustered Forward Rendering</h3>
 <p>
 
 
-We decided to explore another method called Clustered Shading, in its forward variant. Clustered shading expands on the idea of tiled rendering but adds a segmentation on the 3rd axis. The &#x201C;clustering&#x201D; is done in view space, by splitting the frustum into a 3D grid.
+We decided to explore another method called Clustered Shading, in its forward variant. Clustered shading expands on the idea of tiled rendering but adds a segmentation on the 3rd axis. The “clustering” is done in view space, by splitting the frustum into a 3D grid.
 
 </p><p>
 
-The frustum is first sliced on the depth axis as show in <a href="#figure_sponzaslices">figure&#xA0;78</a>.
+The frustum is first sliced on the depth axis as show in <a href="#figure_sponzaslices">figure&nbsp;78</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_sponza_slices.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza_slices.jpg"></a><div class="imagecaption"><a class="target" name="figure_sponzaslices">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;78:</b> Depth slicing (16 slices)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_sponza_slices.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza_slices.jpg"></a><div class="imagecaption"><a class="target" name="figure_sponzaslices">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;78:</b> Depth slicing (16 slices)</div></div></center>
 
 <p></p><p>
 
-And the depth slices are then combined with the screen tiles to &#x201C;voxelize&#x201D; the frustum. We call each cluster a froxel as it makes it clear what they represent (a voxel in frustum space). The result of the &#x201C;froxelization&#x201D; pass is shown in <a href="#figure_froxel1">figure&#xA0;79</a> and <a href="#figure_froxel2">figure&#xA0;80</a>.
+And the depth slices are then combined with the screen tiles to “voxelize” the frustum. We call each cluster a froxel as it makes it clear what they represent (a voxel in frustum space). The result of the “froxelization” pass is shown in <a href="#figure_froxel1">figure&nbsp;79</a> and <a href="#figure_froxel2">figure&nbsp;80</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_sponza_froxels1.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza_froxels1.jpg"></a><div class="imagecaption"><a class="target" name="figure_froxel1">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;79:</b> Frustum voxelization (5&#xD7;3 tiles, 8 depth slices)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_sponza_froxels1.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza_froxels1.jpg"></a><div class="imagecaption"><a class="target" name="figure_froxel1">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;79:</b> Frustum voxelization (5×3 tiles, 8 depth slices)</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_sponza_froxels2.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza_froxels2.jpg"></a><div class="imagecaption"><a class="target" name="figure_froxel2">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;80:</b> Frustum voxelization (5&#xD7;3 tiles, 8 depth slices)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_sponza_froxels2.jpg" target="_blank"><img class="markdeep" src="images/screenshot_sponza_froxels2.jpg"></a><div class="imagecaption"><a class="target" name="figure_froxel2">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;80:</b> Frustum voxelization (5×3 tiles, 8 depth slices)</div></div></center>
 
 <p></p><p>
 
@@ -4634,19 +4634,19 @@ The depth slicing is not linear, but exponential. In a typical scene, there will
 
 </p><p>
 
-<a href="#figure_froxeldistribution">Figure&#xA0;81</a> shows how much world space unit each depth slice uses with exponential slicing.
+<a href="#figure_froxeldistribution">Figure&nbsp;81</a> shows how much world space unit each depth slice uses with exponential slicing.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_froxels1.png" target="_blank"><img class="markdeep" src="images/diagram_froxels1.png"></a><div class="imagecaption"><a class="target" name="figure_froxeldistribution">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;81:</b> Near: 0.1m, Far: 100m, 16 slices</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_froxels1.png" target="_blank"><img class="markdeep" src="images/diagram_froxels1.png"></a><div class="imagecaption"><a class="target" name="figure_froxeldistribution">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;81:</b> Near: 0.1m, Far: 100m, 16 slices</div></div></center>
 
 <p></p><p>
 
-A simple exponential voxelization is unfortunately not enough. The graphic above clearly illustrates how world space is distributed across slices but it fails to show what happens close to the near plane. If we examine the same distribution in a smaller range (0.1m to 7m) we can see an interesting problem appear as shown in <a href="#figure_froxeldistributionclose">figure&#xA0;82</a>.
+A simple exponential voxelization is unfortunately not enough. The graphic above clearly illustrates how world space is distributed across slices but it fails to show what happens close to the near plane. If we examine the same distribution in a smaller range (0.1m to 7m) we can see an interesting problem appear as shown in <a href="#figure_froxeldistributionclose">figure&nbsp;82</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_froxels2.png" target="_blank"><img class="markdeep" src="images/diagram_froxels2.png"></a><div class="imagecaption"><a class="target" name="figure_froxeldistributionclose">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;82:</b> Depth distribution in the 0.1-7m range</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_froxels2.png" target="_blank"><img class="markdeep" src="images/diagram_froxels2.png"></a><div class="imagecaption"><a class="target" name="figure_froxeldistributionclose">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;82:</b> Depth distribution in the 0.1-7m range</div></div></center>
 
 <p></p><p>
 
@@ -4654,25 +4654,25 @@ This graphic shows that a simple exponential distribution uses up half of the sl
 
 </p><p>
 
-Our solution is to manually tweak the size of the first froxel depending on the scene and the near and far planes. By doing so, we can better distribute the remaining froxels across the frustum. <a href="#figure_froxeldistributionexp">Figure&#xA0;83</a> shows for instance what happens when we use a special froxel between 0.1m and 5m.
+Our solution is to manually tweak the size of the first froxel depending on the scene and the near and far planes. By doing so, we can better distribute the remaining froxels across the frustum. <a href="#figure_froxeldistributionexp">Figure&nbsp;83</a> shows for instance what happens when we use a special froxel between 0.1m and 5m.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_froxels3.png" target="_blank"><img class="markdeep" src="images/diagram_froxels3.png"></a><div class="imagecaption"><a class="target" name="figure_froxeldistributionexp">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;83:</b> Near: 0.1, Far: 100m, 16 slices, Special froxel: 0.1-5m</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_froxels3.png" target="_blank"><img class="markdeep" src="images/diagram_froxels3.png"></a><div class="imagecaption"><a class="target" name="figure_froxeldistributionexp">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;83:</b> Near: 0.1, Far: 100m, 16 slices, Special froxel: 0.1-5m</div></div></center>
 
 <p></p><p>
 
 This new distribution is much more efficient and allows a better assignment of the lights throughout the entire frustum.
 
 </p>
-<a class="target" name="implementationnotes">&#xA0;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes">&#xA0;</a><a class="target" name="toc8.4.2">&#xA0;</a><h3>Implementation notes</h3>
+<a class="target" name="implementationnotes">&nbsp;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes">&nbsp;</a><a class="target" name="toc8.4.2">&nbsp;</a><h3>Implementation notes</h3>
 <p>
 
 
 Lights assignment can be done in two different ways, on the GPU or on the CPU.
 
 </p>
-<a class="target" name="gpulightsassignment">&#xA0;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/gpulightsassignment">&#xA0;</a><a class="target" name="toc8.4.2.1">&#xA0;</a><h4>GPU lights assignment</h4>
+<a class="target" name="gpulightsassignment">&nbsp;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/gpulightsassignment">&nbsp;</a><a class="target" name="toc8.4.2.1">&nbsp;</a><h4>GPU lights assignment</h4>
 <p>
 
 
@@ -4695,25 +4695,25 @@ Intersection tests imply simple sphere/frustum or cone/frustum tests.
 See the annex for the source code of a GPU implementation (point lights only).
 
 </p>
-<a class="target" name="cpulightsassignment">&#xA0;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/cpulightsassignment">&#xA0;</a><a class="target" name="toc8.4.2.2">&#xA0;</a><h4>CPU lights assignment</h4>
+<a class="target" name="cpulightsassignment">&nbsp;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/cpulightsassignment">&nbsp;</a><a class="target" name="toc8.4.2.2">&nbsp;</a><h4>CPU lights assignment</h4>
 <p>
 
 
-On non-OpenGL ES 3.1 devices, lights assignment can be performed efficiently on the CPU. The algorithm is different from the GPU implementation. Instead of iterating over every light for each froxel, the engine will &#x201C;rasterize&#x201D; each light as froxels. For instance, given a point light&#x2019;s center and radius, it is trivial to compute the list of froxels it intersects with.
+On non-OpenGL ES 3.1 devices, lights assignment can be performed efficiently on the CPU. The algorithm is different from the GPU implementation. Instead of iterating over every light for each froxel, the engine will “rasterize” each light as froxels. For instance, given a point light’s center and radius, it is trivial to compute the list of froxels it intersects with.
 
 </p><p>
 
 This technique has the added benefit of providing tighter culling than in the GPU variant. The CPU implementation can also more easily generate a packed list of lights.
 
 </p>
-<a class="target" name="shading">&#xA0;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/shading">&#xA0;</a><a class="target" name="toc8.4.2.3">&#xA0;</a><h4>Shading</h4>
+<a class="target" name="shading">&nbsp;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/shading">&nbsp;</a><a class="target" name="toc8.4.2.3">&nbsp;</a><h4>Shading</h4>
 <p>
 
 
 The list of lights per froxel can be passed to the fragment shader either as an SSBO (OpenGL ES 3.1) or a texture.
 
 </p>
-<a class="target" name="fromdepthtofroxel">&#xA0;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/fromdepthtofroxel">&#xA0;</a><a class="target" name="toc8.4.2.4">&#xA0;</a><h4>From depth to froxel</h4>
+<a class="target" name="fromdepthtofroxel">&nbsp;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/fromdepthtofroxel">&nbsp;</a><a class="target" name="toc8.4.2.4">&nbsp;</a><h4>From depth to froxel</h4>
 <p>
 
 
@@ -4763,7 +4763,7 @@ This simplification is important because we pass the linear z value to a <code>l
 
 </p><p>
 
-All put together, computing the froxel index of a given fragment can be implemented fairly easily as shown in <a href="#listing_fragcoordtofroxel">listing&#xA0;44</a>.
+All put together, computing the froxel index of a given fragment can be implemented fairly easily as shown in <a href="#listing_fragcoordtofroxel">listing&nbsp;44</a>.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-meta">#define MAX_LIGHT_COUNT 16 // max number of lights per froxel</span></span>
 <span class="line"></span>
@@ -4787,7 +4787,7 @@ All put together, computing the froxel index of a given fragment can be implemen
 <span class="line"><span class="hljs-type">uint</span> slice = getDepthSlice();</span>
 <span class="line"><span class="hljs-type">uint</span> <span class="hljs-keyword">offset</span> = getFroxelOffset(slice);</span>
 <span class="line"></span>
-<span class="line"><span class="hljs-comment">// Compute lighting...</span></span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_fragcoordtofroxel">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;44:</b> GLSL implementation to compute a froxel index from a fragment&apos;s screen coordinates</div>
+<span class="line"><span class="hljs-comment">// Compute lighting...</span></span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_fragcoordtofroxel">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;44:</b> GLSL implementation to compute a froxel index from a fragment's screen coordinates</div>
 <p>
 
 
@@ -4803,7 +4803,7 @@ Several uniforms must be pre-computed for perform the index evaluation efficient
 <span class="line">zParams[<span class="hljs-number">2</span>] = (MAX_DEPTH_SLICES - <span class="hljs-number">1</span>) / log2(Z_SPECIAL_NEAR / Z_FAR);</span>
 <span class="line">zParams[<span class="hljs-number">3</span>] = MAX_DEPTH_SLICES;</span></code></pre><div class="listingcaption tilde">Listing ?</div>
 
-<a class="target" name="fromfroxeltodepth">&#xA0;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/fromfroxeltodepth">&#xA0;</a><a class="target" name="toc8.4.2.5">&#xA0;</a><h4>From froxel to depth</h4>
+<a class="target" name="fromfroxeltodepth">&nbsp;</a><a class="target" name="imagingpipeline/lightpath/implementationnotes/fromfroxeltodepth">&nbsp;</a><a class="target" name="toc8.4.2.5">&nbsp;</a><h4>From froxel to depth</h4>
 <p>
 
 
@@ -4824,7 +4824,7 @@ For \(i=0\), the z value is 0. The result of this equation is in the [0..1] rang
 The compute shader implementation should use <code>exp2</code> instead of a <code>pow</code>. The division can be precomputed and passed as a uniform.
 
 </p>
-<a class="target" name="validation">&#xA0;</a><a class="target" name="imagingpipeline/validation">&#xA0;</a><a class="target" name="toc8.5">&#xA0;</a><h2>Validation</h2>
+<a class="target" name="validation">&nbsp;</a><a class="target" name="imagingpipeline/validation">&nbsp;</a><a class="target" name="toc8.5">&nbsp;</a><h2>Validation</h2>
 <p>
 
 
@@ -4835,22 +4835,22 @@ Given the complexity of our lighting system, it is important to validate our imp
 [TODO] Explain light measurement validation (reading EV from the render target and comparing against values measure with light meters/cameras, etc.)
 
 </p>
-<a class="target" name="scenereferredvisualization">&#xA0;</a><a class="target" name="imagingpipeline/validation/scenereferredvisualization">&#xA0;</a><a class="target" name="toc8.5.1">&#xA0;</a><h3>Scene referred visualization</h3>
+<a class="target" name="scenereferredvisualization">&nbsp;</a><a class="target" name="imagingpipeline/validation/scenereferredvisualization">&nbsp;</a><a class="target" name="toc8.5.1">&nbsp;</a><h3>Scene referred visualization</h3>
 <p>
 
 
-A quick and easy way to validate a scene&apos;s lighting is to modify the shader to output colors that provide an intuitive mapping to relevant data. This can easily be done by using a custom debug tone-mapping operator that outputs fake colors.
+A quick and easy way to validate a scene's lighting is to modify the shader to output colors that provide an intuitive mapping to relevant data. This can easily be done by using a custom debug tone-mapping operator that outputs fake colors.
 
 </p>
-<a class="target" name="luminancestops">&#xA0;</a><a class="target" name="imagingpipeline/validation/scenereferredvisualization/luminancestops">&#xA0;</a><a class="target" name="toc8.5.1.1">&#xA0;</a><h4>Luminance stops</h4>
+<a class="target" name="luminancestops">&nbsp;</a><a class="target" name="imagingpipeline/validation/scenereferredvisualization/luminancestops">&nbsp;</a><a class="target" name="toc8.5.1.1">&nbsp;</a><h4>Luminance stops</h4>
 <p>
 
 
-With emissive materials and IBLs, it is fairly easy to obtain a scene in which specular highlights are brighter than their apparent caster. This type of issue can be difficult to observe after tone-mapping and quantization but is fairly obvious in the scene-referred space. <a href="#figure_luminanceviz">Figure&#xA0;84</a> shows how the custom operator described in <a href="#listing_tonemapluminanceviz">listing&#xA0;45</a> is used to show the exposed luminance of a scene.
+With emissive materials and IBLs, it is fairly easy to obtain a scene in which specular highlights are brighter than their apparent caster. This type of issue can be difficult to observe after tone-mapping and quantization but is fairly obvious in the scene-referred space. <a href="#figure_luminanceviz">Figure&nbsp;84</a> shows how the custom operator described in <a href="#listing_tonemapluminanceviz">listing&nbsp;45</a> is used to show the exposed luminance of a scene.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_luminance_debug.png" target="_blank"><img class="markdeep" src="images/screenshot_luminance_debug.png"></a><div class="imagecaption"><a class="target" name="figure_luminanceviz">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;84:</b> Visualizing luminance by color coding the stops: cyan is middle gray, blue is 1 stop darker, green 1 stop brighter, etc.</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_luminance_debug.png" target="_blank"><img class="markdeep" src="images/screenshot_luminance_debug.png"></a><div class="imagecaption"><a class="target" name="figure_luminanceviz">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;84:</b> Visualizing luminance by color coding the stops: cyan is middle gray, blue is 1 stop darker, green 1 stop brighter, etc.</div></div></center>
 
 <p></p><pre class="listing tilde"><code><span class="line"><span class="hljs-type">vec3</span> Tonemap_DisplayRange(<span class="hljs-keyword">const</span> <span class="hljs-type">vec3</span> x) {</span>
 <span class="line">    <span class="hljs-comment">// The 5th color in the array (cyan) represents middle gray (18%)</span></span>
@@ -4878,9 +4878,9 @@ With emissive materials and IBLs, it is fairly easy to obtain a scene in which s
 <span class="line">     <span class="hljs-type">vec3</span>(<span class="hljs-number">1.0</span>, <span class="hljs-number">0.0</span>, <span class="hljs-number">1.0</span>),         <span class="hljs-comment">// magenta</span></span>
 <span class="line">     <span class="hljs-type">vec3</span>(<span class="hljs-number">0.6</span>, <span class="hljs-number">0.3333</span>, <span class="hljs-number">0.7882</span>),   <span class="hljs-comment">// purple</span></span>
 <span class="line">     <span class="hljs-type">vec3</span>(<span class="hljs-number">1.0</span>, <span class="hljs-number">1.0</span>, <span class="hljs-number">1.0</span>)          <span class="hljs-comment">// white</span></span>
-<span class="line">);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_tonemapluminanceviz">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;45:</b> GLSL implementation of a custom debug tone-mapping operator for luminance visualization</div>
+<span class="line">);</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_tonemapluminanceviz">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;45:</b> GLSL implementation of a custom debug tone-mapping operator for luminance visualization</div>
 
-<a class="target" name="referencerenderings">&#xA0;</a><a class="target" name="imagingpipeline/validation/referencerenderings">&#xA0;</a><a class="target" name="toc8.5.2">&#xA0;</a><h3>Reference renderings</h3>
+<a class="target" name="referencerenderings">&nbsp;</a><a class="target" name="imagingpipeline/validation/referencerenderings">&nbsp;</a><a class="target" name="toc8.5.2">&nbsp;</a><h3>Reference renderings</h3>
 <p>
 
 
@@ -4888,15 +4888,15 @@ To validate our implementation against reference renderings, we will use a comme
 
 </p><p>
 
-<a href="#figure_mitsubareference">Figure&#xA0;85</a> and <a href="#figure_filamentreference">figure&#xA0;86</a> show a simple scene, a perfectly smooth dielectric sphere, rendered respectively with Mitsuba and Filament.
+<a href="#figure_mitsubareference">Figure&nbsp;85</a> and <a href="#figure_filamentreference">figure&nbsp;86</a> show a simple scene, a perfectly smooth dielectric sphere, rendered respectively with Mitsuba and Filament.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_ref_mitsuba.jpg" target="_blank"><img class="markdeep" src="images/screenshot_ref_mitsuba.jpg"></a><div class="imagecaption"><a class="target" name="figure_mitsubareference">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;85:</b> Rendered in 2048&#xD7;1440 in 1 minute and 42 seconds on a 12 core 2013 MacPro</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_ref_mitsuba.jpg" target="_blank"><img class="markdeep" src="images/screenshot_ref_mitsuba.jpg"></a><div class="imagecaption"><a class="target" name="figure_mitsubareference">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;85:</b> Rendered in 2048×1440 in 1 minute and 42 seconds on a 12 core 2013 MacPro</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_ref_filament.jpg" target="_blank"><img class="markdeep" src="images/screenshot_ref_filament.jpg"></a><div class="imagecaption"><a class="target" name="figure_filamentreference">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;86:</b> Rendered in 2048&#xD7;1440 with MSAA 4x at 60 fps on a Nexus 9 device (Tegra K1 GPU)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_ref_filament.jpg" target="_blank"><img class="markdeep" src="images/screenshot_ref_filament.jpg"></a><div class="imagecaption"><a class="target" name="figure_filamentreference">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;86:</b> Rendered in 2048×1440 with MSAA 4x at 60 fps on a Nexus 9 device (Tegra K1 GPU)</div></div></center>
 
 <p></p><p>
 
@@ -4921,7 +4921,7 @@ The parameters used to render both scenes are the following:
 </li></ul>
 </li><li class="minus">Indirect light: IBL
 <ul>
-  <li class="minus">256&#xD7;256 cubemap generated by cmgen from office.exr
+  <li class="minus">256×256 cubemap generated by cmgen from office.exr
 </li>
   <li class="minus">Multiplier: 35,000
 </li></ul>
@@ -4966,7 +4966,7 @@ The parameters used to render both scenes are the following:
 </li></ul>
 </li><li class="minus">Film: LDR
 <ul>
-  <li class="minus">Exposure: &#x2212;15.23, computed from log2(filamentExposure)
+  <li class="minus">Exposure: −15.23, computed from log2(filamentExposure)
 </li></ul>
 </li><li class="minus">Integrator: path
 </li>
@@ -4976,31 +4976,31 @@ The parameters used to render both scenes are the following:
 
 <p></p><p>
 
-The full Mitsuba scene can be found as an annex. Both scenes were rendered at the same resolution (2048&#xD7;1440).
+The full Mitsuba scene can be found as an annex. Both scenes were rendered at the same resolution (2048×1440).
 
 </p>
-<a class="target" name="comparison">&#xA0;</a><a class="target" name="imagingpipeline/validation/referencerenderings/comparison">&#xA0;</a><a class="target" name="toc8.5.2.1">&#xA0;</a><h4>Comparison</h4>
+<a class="target" name="comparison">&nbsp;</a><a class="target" name="imagingpipeline/validation/referencerenderings/comparison">&nbsp;</a><a class="target" name="toc8.5.2.1">&nbsp;</a><h4>Comparison</h4>
 <p>
 
 
-The slight differences between the two renderings come from the various approximations used by Filament: RGBM 256&#xD7;256 reflection probe, RGBM 1024&#xD7;1024 background map, Lambert diffuse, split-sum approximation, analytical approximation of the DFG term, etc.
+The slight differences between the two renderings come from the various approximations used by Filament: RGBM 256×256 reflection probe, RGBM 1024×1024 background map, Lambert diffuse, split-sum approximation, analytical approximation of the DFG term, etc.
 
 </p><p>
 
-<a href="#figure_referencecomparison">Figure&#xA0;87</a> shows the luminance gradient of the images produced by both engines. The comparison was performed on LDR images.
+<a href="#figure_referencecomparison">Figure&nbsp;87</a> shows the luminance gradient of the images produced by both engines. The comparison was performed on LDR images.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_ref_comparison.png" target="_blank"><img class="markdeep" src="images/screenshot_ref_comparison.png"></a><div class="imagecaption"><a class="target" name="figure_referencecomparison">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;87:</b> Luminance gradients from Mitsuba (left) and Filament (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_ref_comparison.png" target="_blank"><img class="markdeep" src="images/screenshot_ref_comparison.png"></a><div class="imagecaption"><a class="target" name="figure_referencecomparison">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;87:</b> Luminance gradients from Mitsuba (left) and Filament (right)</div></div></center>
 
 <p></p><p>
 
-The biggest difference is visible at grazing angles, which is most likely explained by Filament&apos;s use of a Lambertian diffuse term. The Disney diffuse term and its grazing retro-reflections would move Filament closer to Mitsuba.
+The biggest difference is visible at grazing angles, which is most likely explained by Filament's use of a Lambertian diffuse term. The Disney diffuse term and its grazing retro-reflections would move Filament closer to Mitsuba.
 
 </p>
-<a class="target" name="coordinatessystems">&#xA0;</a><a class="target" name="imagingpipeline/coordinatessystems">&#xA0;</a><a class="target" name="toc8.6">&#xA0;</a><h2>Coordinates systems</h2>
+<a class="target" name="coordinatessystems">&nbsp;</a><a class="target" name="imagingpipeline/coordinatessystems">&nbsp;</a><a class="target" name="toc8.6">&nbsp;</a><h2>Coordinates systems</h2>
 
-<a class="target" name="worldcoordinatessystem">&#xA0;</a><a class="target" name="imagingpipeline/coordinatessystems/worldcoordinatessystem">&#xA0;</a><a class="target" name="toc8.6.1">&#xA0;</a><h3>World coordinates system</h3>
+<a class="target" name="worldcoordinatessystem">&nbsp;</a><a class="target" name="imagingpipeline/coordinatessystems/worldcoordinatessystem">&nbsp;</a><a class="target" name="toc8.6.1">&nbsp;</a><h3>World coordinates system</h3>
 <p>
 
 
@@ -5008,34 +5008,34 @@ Filament uses a Y-up, right-handed coordinate system.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_coordinates.jpg" target="_blank"><img class="markdeep" src="images/screenshot_coordinates.jpg"></a><div class="imagecaption"><a class="target" name="figure_coordinates">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;88:</b> Red +X, green +Y, blue +Z (rendered in Marmoset Toolbag).</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_coordinates.jpg" target="_blank"><img class="markdeep" src="images/screenshot_coordinates.jpg"></a><div class="imagecaption"><a class="target" name="figure_coordinates">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;88:</b> Red +X, green +Y, blue +Z (rendered in Marmoset Toolbag).</div></div></center>
 
 <p></p>
-<a class="target" name="cameracoordinatessystem">&#xA0;</a><a class="target" name="imagingpipeline/coordinatessystems/cameracoordinatessystem">&#xA0;</a><a class="target" name="toc8.6.2">&#xA0;</a><h3>Camera coordinates system</h3>
+<a class="target" name="cameracoordinatessystem">&nbsp;</a><a class="target" name="imagingpipeline/coordinatessystems/cameracoordinatessystem">&nbsp;</a><a class="target" name="toc8.6.2">&nbsp;</a><h3>Camera coordinates system</h3>
 <p>
 
 
-Filament&apos;s Camera looks towards its local -Z axis. That is, when placing a camera in the world
-without any transform applied to it, the camera looks down the world&apos;s -Z axis.
+Filament's Camera looks towards its local -Z axis. That is, when placing a camera in the world
+without any transform applied to it, the camera looks down the world's -Z axis.
 
 </p>
-<a class="target" name="cubemapscoordinatessystem">&#xA0;</a><a class="target" name="imagingpipeline/coordinatessystems/cubemapscoordinatessystem">&#xA0;</a><a class="target" name="toc8.6.3">&#xA0;</a><h3>Cubemaps coordinates system</h3>
+<a class="target" name="cubemapscoordinatessystem">&nbsp;</a><a class="target" name="imagingpipeline/coordinatessystems/cubemapscoordinatessystem">&nbsp;</a><a class="target" name="toc8.6.3">&nbsp;</a><h3>Cubemaps coordinates system</h3>
 <p>
 
 
 All cubemaps used in Filament follow the OpenGL convention for face
-alignment shown in <a href="#figure_cubemapcoordinates">figure&#xA0;89</a>.
+alignment shown in <a href="#figure_cubemapcoordinates">figure&nbsp;89</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_cubemap_coordinates.png" target="_blank"><img class="markdeep" src="images/screenshot_cubemap_coordinates.png"></a><div class="imagecaption"><a class="target" name="figure_cubemapcoordinates">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;89:</b> Horizontal cross representation of a cubemap following the OpenGL faces alignment convention.</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_cubemap_coordinates.png" target="_blank"><img class="markdeep" src="images/screenshot_cubemap_coordinates.png"></a><div class="imagecaption"><a class="target" name="figure_cubemapcoordinates">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;89:</b> Horizontal cross representation of a cubemap following the OpenGL faces alignment convention.</div></div></center>
 
 <p></p><p>
 
 Note that environment background and reflection probes are mirrored (see section  <a href="#toc8.6.3.1">8.6.3.1</a>).
 
 </p>
-<a class="target" name="mirroring">&#xA0;</a><a class="target" name="imagingpipeline/coordinatessystems/cubemapscoordinatessystem/mirroring">&#xA0;</a><a class="target" name="toc8.6.3.1">&#xA0;</a><h4>Mirroring</h4>
+<a class="target" name="mirroring">&nbsp;</a><a class="target" name="imagingpipeline/coordinatessystems/cubemapscoordinatessystem/mirroring">&nbsp;</a><a class="target" name="toc8.6.3.1">&nbsp;</a><h4>Mirroring</h4>
 <p>
 
 
@@ -5046,7 +5046,7 @@ An easy way to achieve this for skyboxes is to use textured back faces. Filament
 this by default.
 
 </p>
-<a class="target" name="equirectangularenvironmentmaps">&#xA0;</a><a class="target" name="imagingpipeline/coordinatessystems/cubemapscoordinatessystem/equirectangularenvironmentmaps">&#xA0;</a><a class="target" name="toc8.6.3.2">&#xA0;</a><h4>Equirectangular environment maps</h4>
+<a class="target" name="equirectangularenvironmentmaps">&nbsp;</a><a class="target" name="imagingpipeline/coordinatessystems/cubemapscoordinatessystem/equirectangularenvironmentmaps">&nbsp;</a><a class="target" name="toc8.6.3.2">&nbsp;</a><h4>Equirectangular environment maps</h4>
 <p>
 
 
@@ -5054,20 +5054,20 @@ To convert equirectangular environment maps to horizontal/vertical cross cubemap
 +Z face in the center of the source rectilinear environment map.
 
 </p>
-<a class="target" name="worldspaceorientationofenvironmentmapsandskyboxes">&#xA0;</a><a class="target" name="imagingpipeline/coordinatessystems/cubemapscoordinatessystem/worldspaceorientationofenvironmentmapsandskyboxes">&#xA0;</a><a class="target" name="toc8.6.3.3">&#xA0;</a><h4>World space orientation of environment maps and Skyboxes</h4>
+<a class="target" name="worldspaceorientationofenvironmentmapsandskyboxes">&nbsp;</a><a class="target" name="imagingpipeline/coordinatessystems/cubemapscoordinatessystem/worldspaceorientationofenvironmentmapsandskyboxes">&nbsp;</a><a class="target" name="toc8.6.3.3">&nbsp;</a><h4>World space orientation of environment maps and Skyboxes</h4>
 <p>
 
 
 When specifying a skybox or an IBL in Filament, the specified cubemap is oriented such that its 
 -Z face points towards the +Z axis of the world (this is because filament assumes mirrored cubemaps, 
 see section  <a href="#toc8.6.3.1">8.6.3.1</a>). However, because environments and skyboxes are expected to be pre-mirrored, 
-their -Z (back) face points towards the world&apos;s -Z axis as expected (and the camera looks toward that 
+their -Z (back) face points towards the world's -Z axis as expected (and the camera looks toward that 
 direction by default, see section  <a href="#toc8.6.2">8.6.2</a>).
 
 </p>
-<a class="target" name="annex">&#xA0;</a><a class="target" name="annex">&#xA0;</a><a class="target" name="toc9">&#xA0;</a><h1>Annex</h1>
+<a class="target" name="annex">&nbsp;</a><a class="target" name="annex">&nbsp;</a><a class="target" name="toc9">&nbsp;</a><h1>Annex</h1>
 
-<a class="target" name="specularcolor">&#xA0;</a><a class="target" name="annex/specularcolor">&#xA0;</a><a class="target" name="toc9.1">&#xA0;</a><h2>Specular color</h2>
+<a class="target" name="specularcolor">&nbsp;</a><a class="target" name="annex/specularcolor">&nbsp;</a><a class="target" name="toc9.1">&nbsp;</a><h2>Specular color</h2>
 <p>
 
 
@@ -5075,7 +5075,7 @@ The specular color of a metallic surface, or \(\fNormal\), can be computed direc
 
 </p><p>
 
-Earlier in this document, we presented equation \(\ref{fresnelEquation}\) to compute the Fresnel reflectance at normal incidence for a dielectric surface given its IOR. The same equation can be rewritten for conductors by using complex numbers to represent the surface&apos;s IOR:
+Earlier in this document, we presented equation \(\ref{fresnelEquation}\) to compute the Fresnel reflectance at normal incidence for a dielectric surface given its IOR. The same equation can be rewritten for conductors by using complex numbers to represent the surface's IOR:
 
 </p><p>
 
@@ -5099,15 +5099,15 @@ To compute the specular color of a material we need to evaluate the complex Fres
 
 </p><p>
 
-We then sum (integrate) and normalize all the samples to obtain \(\fNormal\) in the XYZ color space. From there, a simple color space conversion yields a linear sRGB color or a non-linear sRGB color after applying the opto-electronic transfer function (OETF, commonly known as &#x201C;gamma&#x201D; curve). Note that for some materials such as gold the final sRGB color might fall out of gamut. We use a simple normalization step as a cheap form of gamut remapping but it would be interesting to consider computing values in a color space with a wider gamut (for instance BT.2020).
+We then sum (integrate) and normalize all the samples to obtain \(\fNormal\) in the XYZ color space. From there, a simple color space conversion yields a linear sRGB color or a non-linear sRGB color after applying the opto-electronic transfer function (OETF, commonly known as “gamma” curve). Note that for some materials such as gold the final sRGB color might fall out of gamut. We use a simple normalization step as a cheap form of gamut remapping but it would be interesting to consider computing values in a color space with a wider gamut (for instance BT.2020).
 
 </p><p>
 
-To achieve the desired result we used the ICE 1931 2&#xB0; CMFs, from 360nm to 830nm at 1nm intervals (<a href="http://cvrl.ioo.ucl.ac.uk/cmfs.htm">source</a>), and the CIE Standard Illuminant D65 relative spectral power distribution, from 300nm to 830nm, at 5nm intervals (<a href="http://files.cie.co.at/204.xls">source</a>).
+To achieve the desired result we used the ICE 1931 2° CMFs, from 360nm to 830nm at 1nm intervals (<a href="http://cvrl.ioo.ucl.ac.uk/cmfs.htm">source</a>), and the CIE Standard Illuminant D65 relative spectral power distribution, from 300nm to 830nm, at 5nm intervals (<a href="http://files.cie.co.at/204.xls">source</a>).
 
 </p><p>
 
-Our implementation is presented in <a href="#listing_specularcolorimpl">listing&#xA0;46</a>, with the actual data omitted for brevity.
+Our implementation is presented in <a href="#listing_specularcolorimpl">listing&nbsp;46</a>, with the actual data omitted for brevity.
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-comment">// CIE 1931 2-deg color matching functions (CMFs), from 360nm to 830nm,</span></span>
 <span class="line"><span class="hljs-comment">// at 1nm intervals</span></span>
@@ -5207,14 +5207,14 @@ Our implementation is presented in <a href="#listing_specularcolorimpl">listing&
 <span class="line">    <span class="hljs-keyword">if</span> (any(greaterThan(linear, float3{<span class="hljs-number">1.0f</span>}))) linear *= <span class="hljs-number">1.0f</span> / max(linear);</span>
 <span class="line"></span>
 <span class="line">    <span class="hljs-keyword">return</span> linear;</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularcolorimpl">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;46:</b> C++ implementation to compute the base color of a metallic surface from spectral data</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_specularcolorimpl">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;46:</b> C++ implementation to compute the base color of a metallic surface from spectral data</div>
 <p>
 
 
 Special thanks to Naty Hoffman for his valuable help on this topic.
 
 </p>
-<a class="target" name="importancesamplingfortheibl">&#xA0;</a><a class="target" name="annex/importancesamplingfortheibl">&#xA0;</a><a class="target" name="toc9.2">&#xA0;</a><h2>Importance sampling for the IBL</h2>
+<a class="target" name="importancesamplingfortheibl">&nbsp;</a><a class="target" name="annex/importancesamplingfortheibl">&nbsp;</a><a class="target" name="toc9.2">&nbsp;</a><h2>Importance sampling for the IBL</h2>
 <p>
 
 
@@ -5229,8 +5229,8 @@ $$\begin{equation}\label{iblSampling}
 </p><p>
 
 Unfortunately, we would need too many samples to evaluate this integral. A technique commonly used
-is to choose samples that are more &#x201C;important&#x201D; more often, this is called <em class="underscore">importance sampling</em>.
-In our case we&apos;ll use the distribution of micro-facets normals, \(D_{ggx}\), as the distribution of
+is to choose samples that are more “important” more often, this is called <em class="underscore">importance sampling</em>.
+In our case we'll use the distribution of micro-facets normals, \(D_{ggx}\), as the distribution of
 important samples.
 
 </p><p>
@@ -5266,7 +5266,7 @@ p(T_r(x)) = p(x) |J(T_r)|
 
 </p><p>
 
-Where \(|J(T_r)|\) is the determinant of the Jacobian of the transform. In our case we&apos;re considering
+Where \(|J(T_r)|\) is the determinant of the Jacobian of the transform. In our case we're considering
 the transform from \(h_i\) to \(l_i\) and the determinant of its Jacobian is given in \ref{iblPDF}.
 
 </p><p>
@@ -5277,7 +5277,7 @@ p(l,v,\Theta) = D(h,\alpha) \left&lt; \NoH \right&gt; |J_{h \rightarrow l}| \\
 \end{equation}$$
 
 </p>
-<a class="target" name="choosingimportantdirections">&#xA0;</a><a class="target" name="annex/importancesamplingfortheibl/choosingimportantdirections">&#xA0;</a><a class="target" name="toc9.2.1">&#xA0;</a><h3>Choosing important directions</h3>
+<a class="target" name="choosingimportantdirections">&nbsp;</a><a class="target" name="annex/importancesamplingfortheibl/choosingimportantdirections">&nbsp;</a><a class="target" name="toc9.2.1">&nbsp;</a><h3>Choosing important directions</h3>
 <p>
 
 
@@ -5296,11 +5296,11 @@ l = \{ cos \phi sin \theta, sin \phi sin \theta, cos \theta \}
 Typically, \( (\zeta_{\phi},\zeta_{\theta}) \) are chosen using the Hammersley uniform distribution algorithm described in section  <a href="#toc9.4">9.4</a>.
 
 </p>
-<a class="target" name="pre-filteredimportancesampling">&#xA0;</a><a class="target" name="annex/importancesamplingfortheibl/pre-filteredimportancesampling">&#xA0;</a><a class="target" name="toc9.2.2">&#xA0;</a><h3>Pre-filtered importance sampling</h3>
+<a class="target" name="pre-filteredimportancesampling">&nbsp;</a><a class="target" name="annex/importancesamplingfortheibl/pre-filteredimportancesampling">&nbsp;</a><a class="target" name="toc9.2.2">&nbsp;</a><h3>Pre-filtered importance sampling</h3>
 <p>
 
 
-Importance sampling considers only the PDF to generate important directions; in particular, it is oblivious to the actual content of the IBL. If the latter contains high frequencies in areas without a lot of samples, the integration won&#x2019;t be accurate. This can be somewhat mitigated by using a technique called <em class="underscore">pre-filtered importance sampling</em>, in addition this allows the integral to converge with many fewer samples.
+Importance sampling considers only the PDF to generate important directions; in particular, it is oblivious to the actual content of the IBL. If the latter contains high frequencies in areas without a lot of samples, the integration won’t be accurate. This can be somewhat mitigated by using a technique called <em class="underscore">pre-filtered importance sampling</em>, in addition this allows the integral to converge with many fewer samples.
 
 </p><p>
 
@@ -5329,24 +5329,24 @@ Where \(K\) is a constant determined empirically, \(p\) the PDF of the BRDF, \(
 
 </p><p>
 
-Cubemap sampling is done using seamless trilinear filtering. It is extremely important to sample the cubemap correctly across faces using OpenGL&apos;s seamless sampling feature or any other technique that avoids/reduces seams.
+Cubemap sampling is done using seamless trilinear filtering. It is extremely important to sample the cubemap correctly across faces using OpenGL's seamless sampling feature or any other technique that avoids/reduces seams.
 
 </p><p>
 
-<a href="#table_importancesamplingviz">Table&#xA0;17</a> shows a comparison between importance sampling and pre-filtered importance sampling when applied to <a href="#figure_importancesamplingref">figure&#xA0;90</a>.
+<a href="#table_importancesamplingviz">Table&nbsp;17</a> shows a comparison between importance sampling and pre-filtered importance sampling when applied to <a href="#figure_importancesamplingref">figure&nbsp;90</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/image_is_original.png" target="_blank"><img class="markdeep" src="images/image_is_original.png"></a><div class="imagecaption"><a class="target" name="figure_importancesamplingref">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;90:</b> Importance sampling image reference</div></div></center>
+</p><center><div class="image" style=""><a href="images/image_is_original.png" target="_blank"><img class="markdeep" src="images/image_is_original.png"></a><div class="imagecaption"><a class="target" name="figure_importancesamplingref">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;90:</b> Importance sampling image reference</div></div></center>
 
 <p></p><p>
 
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:left"> Samples </th><th style="text-align:left"> Importance sampling </th><th style="text-align:left"> Pre-filtered importance sampling </th></tr>
-<tr><td style="text-align:left"> 4096 </td><td style="text-align:left"> <a href="images/image_is_4096.png" target="_blank"><img class="markdeep" src="images/image_is_4096.png"></a> </td><td style="text-align:left"> &#xA0; </td></tr>
+<tr><td style="text-align:left"> 4096 </td><td style="text-align:left"> <a href="images/image_is_4096.png" target="_blank"><img class="markdeep" src="images/image_is_4096.png"></a> </td><td style="text-align:left"> &nbsp; </td></tr>
 <tr><td style="text-align:left"> 1024 </td><td style="text-align:left"> <a href="images/image_is_1024.png" target="_blank"><img class="markdeep" src="images/image_is_1024.png"></a> </td><td style="text-align:left"> <a href="images/image_fis_1024.png" target="_blank"><img class="markdeep" src="images/image_fis_1024.png"></a> </td></tr>
 <tr><td style="text-align:left"> 32 </td><td style="text-align:left"> <a href="images/image_is_32.png" target="_blank"><img class="markdeep" src="images/image_is_32.png"></a> </td><td style="text-align:left"> <a href="images/image_fis_32.png" target="_blank"><img class="markdeep" src="images/image_fis_32.png"></a> </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_importancesamplingviz">&#xA0;</a><b style="font-style:normal;">Table&#xA0;17:</b> Importance sampling vs pre-filtered importance sampling with \(\alpha = 0.4\)</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_importancesamplingviz">&nbsp;</a><b style="font-style:normal;">Table&nbsp;17:</b> Importance sampling vs pre-filtered importance sampling with \(\alpha = 0.4\)</div></div>
 
 <p></p><p>
 
@@ -5425,7 +5425,7 @@ Left: reference renderer, right: pre-filtered importance sampling.
 </p></td></tr></tbody></table>
 
 <p></p>
-<a class="target" name="choosingimportantdirectionsforsamplingthebrdf">&#xA0;</a><a class="target" name="annex/choosingimportantdirectionsforsamplingthebrdf">&#xA0;</a><a class="target" name="toc9.3">&#xA0;</a><h2>Choosing important directions for sampling the BRDF</h2>
+<a class="target" name="choosingimportantdirectionsforsamplingthebrdf">&nbsp;</a><a class="target" name="annex/choosingimportantdirectionsforsamplingthebrdf">&nbsp;</a><a class="target" name="toc9.3">&nbsp;</a><h2>Choosing important directions for sampling the BRDF</h2>
 <p>
 
 
@@ -5499,7 +5499,7 @@ l &amp;= \{ cos\phi sin\theta,sin\phi sin\theta,cos\theta \}
 \end{align*}$$
 
 </p>
-<a class="target" name="hammersleysequence">&#xA0;</a><a class="target" name="annex/hammersleysequence">&#xA0;</a><a class="target" name="toc9.4">&#xA0;</a><h2>Hammersley sequence</h2>
+<a class="target" name="hammersleysequence">&nbsp;</a><a class="target" name="annex/hammersleysequence">&nbsp;</a><a class="target" name="toc9.4">&nbsp;</a><h2>Hammersley sequence</h2>
 <pre class="listing tilde"><code><span class="line">vec2f hammersley(<span class="hljs-type">uint</span> i, <span class="hljs-type">float</span> numSamples) {</span>
 <span class="line">    <span class="hljs-type">uint</span> bits = i;</span>
 <span class="line">    bits = (bits &lt;&lt; <span class="hljs-number">16</span>) | (bits &gt;&gt; <span class="hljs-number">16</span>);</span>
@@ -5510,7 +5510,7 @@ l &amp;= \{ cos\phi sin\theta,sin\phi sin\theta,cos\theta \}
 <span class="line">    <span class="hljs-keyword">return</span> vec2f(i / numSamples, bits / <span class="hljs-built_in">exp2</span>(<span class="hljs-number">32</span>));</span>
 <span class="line">}</span></code></pre><div class="listingcaption tilde">C++ implementation of a Hammersley sequence generator</div>
 
-<a class="target" name="precomputinglforimage-basedlighting">&#xA0;</a><a class="target" name="annex/precomputinglforimage-basedlighting">&#xA0;</a><a class="target" name="toc9.5">&#xA0;</a><h2>Precomputing L for image-based lighting</h2>
+<a class="target" name="precomputinglforimage-basedlighting">&nbsp;</a><a class="target" name="annex/precomputinglforimage-basedlighting">&nbsp;</a><a class="target" name="toc9.5">&nbsp;</a><h2>Precomputing L for image-based lighting</h2>
 <p>
 
 
@@ -5550,7 +5550,7 @@ The term \( L_{DFG} \) is only dependent on \( \NoV \). Below, the normal is arb
 <span class="line">    <span class="hljs-keyword">return</span> r * (<span class="hljs-number">1.0</span>f / sampleCount);</span>
 <span class="line">}</span></code></pre><div class="listingcaption tilde">C++ implementation of the \( L_{DFG} \) term</div>
 
-<a class="target" name="sphericalharmonics">&#xA0;</a><a class="target" name="annex/sphericalharmonics">&#xA0;</a><a class="target" name="toc9.6">&#xA0;</a><h2>Spherical Harmonics</h2>
+<a class="target" name="sphericalharmonics">&nbsp;</a><a class="target" name="annex/sphericalharmonics">&nbsp;</a><a class="target" name="toc9.6">&nbsp;</a><h2>Spherical Harmonics</h2>
 <p>
 
 </p><div class="table">
@@ -5559,10 +5559,10 @@ The term \( L_{DFG} \) is only dependent on \( \NoV \). Below, the normal is arb
 <tr><td style="text-align:center"> \(P^m_l(x)\) </td><td style="text-align:left"> Associated Legendre polynomials </td></tr>
 <tr><td style="text-align:center"> \(y^m_l\) </td><td style="text-align:left"> Spherical harmonics bases, or SH bases </td></tr>
 <tr><td style="text-align:center"> \(L^m_l\) </td><td style="text-align:left"> SH coefficients of the \(L(s)\) function defined on the unit sphere </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_shsymbols">&#xA0;</a><b style="font-style:normal;">Table&#xA0;18:</b> Spherical harmonics symbols definitions</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_shsymbols">&nbsp;</a><b style="font-style:normal;">Table&nbsp;18:</b> Spherical harmonics symbols definitions</div></div>
 
 <p></p>
-<a class="target" name="basisfunctions">&#xA0;</a><a class="target" name="annex/sphericalharmonics/basisfunctions">&#xA0;</a><a class="target" name="toc9.6.1">&#xA0;</a><h3>Basis functions</h3>
+<a class="target" name="basisfunctions">&nbsp;</a><a class="target" name="annex/sphericalharmonics/basisfunctions">&nbsp;</a><a class="target" name="toc9.6.1">&nbsp;</a><h3>Basis functions</h3>
 <p>
 
 
@@ -5623,18 +5623,18 @@ P^m_l(x) = \frac{((2l - 1) x P^m_{l - 1} - (l + m - 1) P^m_{l - 2})}{l - m} \\
 
 Computing \(y^{|m|}_l\) requires to compute \(P^{|m|}_l(z)\) first.
 This can be accomplished fairly easily using the recursions in equation \(\ref{shRecursions}\).
-The third recursion can be used to &#x201C;move diagonally&#x201D; in <a href="#table_basisfunctions">table&#xA0;20</a>, i.e. calculating \(y^0_0\), \(y^1_1\), \(y^2_2\) etc.
+The third recursion can be used to “move diagonally” in <a href="#table_basisfunctions">table&nbsp;20</a>, i.e. calculating \(y^0_0\), \(y^1_1\), \(y^2_2\) etc.
 Then, the fourth recursion can be used to move vertically.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:center"> Band index </th><th style="text-align:center"> Basis functions \(-l &lt;= m &lt;= l\) </th></tr>
 <tr><td style="text-align:center"> \(l = 0\) </td><td style="text-align:center"> \(y^0_0\) </td></tr>
 <tr><td style="text-align:center"> \(l = 1\) </td><td style="text-align:center"> \(y^{-1}_1\) \(y^0_1\) \(y^1_1\) </td></tr>
 <tr><td style="text-align:center"> \(l = 2\) </td><td style="text-align:center"> \(y^{-2}_2\) \(y^{-1}_2\) \(y^0_2\) \(y^1_2\) \(y^2_2\) </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_basisfunctions">&#xA0;</a><b style="font-style:normal;">Table&#xA0;19:</b> Basis functions per band</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_basisfunctions">&nbsp;</a><b style="font-style:normal;">Table&nbsp;19:</b> Basis functions per band</div></div>
 
 <p></p><p>
 
-It&#x2019;s also fairly easy to compute the trigonometric terms recursively:
+It’s also fairly easy to compute the trigonometric terms recursively:
 
 </p><p>
 
@@ -5661,7 +5661,7 @@ The equations above have an extra term \(sin(\theta)^{-|m + 1|}\) but we can com
 
 </p><p>
 
-<a href="#listing_nonnormalizedshbasis">Listing&#xA0;47</a> shows the C++ code to compute the non-normalized SH basis \(\frac{y^m_l(s)}{\sqrt{2} K^m_l}\):
+<a href="#listing_nonnormalizedshbasis">Listing&nbsp;47</a> shows the C++ code to compute the non-normalized SH basis \(\frac{y^m_l(s)}{\sqrt{2} K^m_l}\):
 
 </p><pre class="listing tilde"><code><span class="line"><span class="hljs-function"><span class="hljs-keyword">static</span> <span class="hljs-keyword">inline</span> size_t <span class="hljs-title">SHindex</span><span class="hljs-params">(<span class="hljs-keyword">ssize_t</span> m, <span class="hljs-keyword">size_t</span> l)</span> </span>{</span>
 <span class="line">    <span class="hljs-keyword">return</span> l * (l + <span class="hljs-number">1</span>) + m;</span>
@@ -5716,7 +5716,7 @@ The equations above have an extra term \(sin(\theta)^{-|m + 1|}\) but we can com
 <span class="line">        Cm = Cm1;</span>
 <span class="line">        Sm = Sm1;</span>
 <span class="line">    }</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_nonnormalizedshbasis">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;47:</b> C++ implementation to compute a non-normalized SH basis</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_nonnormalizedshbasis">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;47:</b> C++ implementation to compute a non-normalized SH basis</div>
 <p>
 
 
@@ -5726,10 +5726,10 @@ Normalized SH basis functions \(y^m_l(s)\) for the first 3 bands:
 <tr><td style="text-align:center"> \(l = 0\) </td><td style="text-align:center">  </td><td style="text-align:center">  </td><td style="text-align:center"> \(\frac{1}{2}\sqrt{\frac{1}{\pi}}\) </td><td style="text-align:center">  </td><td style="text-align:center">  </td></tr>
 <tr><td style="text-align:center"> \(l = 1\) </td><td style="text-align:center">  </td><td style="text-align:center"> \(-\frac{1}{2}\sqrt{\frac{3}{\pi}}y\) </td><td style="text-align:center"> \(\frac{1}{2}\sqrt{\frac{3}{\pi}}z\) </td><td style="text-align:center"> \(-\frac{1}{2}\sqrt{\frac{3}{\pi}}x\) </td><td style="text-align:center">  </td></tr>
 <tr><td style="text-align:center"> \(l = 2\) </td><td style="text-align:center"> \(\frac{1}{2}\sqrt{\frac{15}{\pi}}xy\) </td><td style="text-align:center"> \(-\frac{1}{2}\sqrt{\frac{15}{\pi}}yz\) </td><td style="text-align:center"> \(\frac{1}{4}\sqrt{\frac{5}{\pi}}(2z^2 - x^2 - y^2)\) </td><td style="text-align:center"> \(-\frac{1}{2}\sqrt{\frac{15}{\pi}}xz\) </td><td style="text-align:center"> \(\frac{1}{4}\sqrt{\frac{15}{\pi}}(x^2 - y^2)\)  </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_basisfunctions">&#xA0;</a><b style="font-style:normal;">Table&#xA0;20:</b> Normalized basis functions per band</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_basisfunctions">&nbsp;</a><b style="font-style:normal;">Table&nbsp;20:</b> Normalized basis functions per band</div></div>
 
 <p></p>
-<a class="target" name="decompositionandreconstruction">&#xA0;</a><a class="target" name="annex/sphericalharmonics/decompositionandreconstruction">&#xA0;</a><a class="target" name="toc9.6.2">&#xA0;</a><h3>Decomposition and reconstruction</h3>
+<a class="target" name="decompositionandreconstruction">&nbsp;</a><a class="target" name="annex/sphericalharmonics/decompositionandreconstruction">&nbsp;</a><a class="target" name="toc9.6.2">&nbsp;</a><h3>Decomposition and reconstruction</h3>
 <p>
 
 
@@ -5757,7 +5757,7 @@ $$\begin{equation}
 \end{equation}$$
 
 </p>
-<a class="target" name="decompositionof%5C(%5Cleft%5C)">&#xA0;</a><a class="target" name="annex/sphericalharmonics/decompositionof%5C(%5Cleft%5C)">&#xA0;</a><a class="target" name="toc9.6.3">&#xA0;</a><h3>Decomposition of \(\left&lt; cos \theta \right&gt;\)</h3>
+<a class="target" name="decompositionof%5C(%5Cleft%5C)">&nbsp;</a><a class="target" name="annex/sphericalharmonics/decompositionof%5C(%5Cleft%5C)">&nbsp;</a><a class="target" name="toc9.6.3">&nbsp;</a><h3>Decomposition of \(\left&lt; cos \theta \right&gt;\)</h3>
 <p>
 
 
@@ -5799,14 +5799,14 @@ C_4 &amp;= -0.11078
 
 </p><p>
 
-Very few coefficients are needed to reasonably approximate \(\left&lt; cos \theta \right&gt;\), as shown in <a href="#figure_shcosthetaapprox">figure&#xA0;91</a>.
+Very few coefficients are needed to reasonably approximate \(\left&lt; cos \theta \right&gt;\), as shown in <a href="#figure_shcosthetaapprox">figure&nbsp;91</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/chart_sh_cos_thera_approx.png" target="_blank"><img class="markdeep" src="images/chart_sh_cos_thera_approx.png"></a><div class="imagecaption"><a class="target" name="figure_shcosthetaapprox">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;91:</b> Approximation of \(cos \theta\) with SH coefficients</div></div></center>
+</p><center><div class="image" style=""><a href="images/chart_sh_cos_thera_approx.png" target="_blank"><img class="markdeep" src="images/chart_sh_cos_thera_approx.png"></a><div class="imagecaption"><a class="target" name="figure_shcosthetaapprox">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;91:</b> Approximation of \(cos \theta\) with SH coefficients</div></div></center>
 
 <p></p>
-<a class="target" name="convolution">&#xA0;</a><a class="target" name="annex/sphericalharmonics/convolution">&#xA0;</a><a class="target" name="toc9.6.4">&#xA0;</a><h3>Convolution</h3>
+<a class="target" name="convolution">&nbsp;</a><a class="target" name="annex/sphericalharmonics/convolution">&nbsp;</a><a class="target" name="toc9.6.4">&nbsp;</a><h3>Convolution</h3>
 <p>
 
 
@@ -5869,70 +5869,70 @@ Here is the C++ code to compute \(\hat{C}_l\):
 <span class="line">   }</span>
 <span class="line">   <span class="hljs-keyword">return</span> r;</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="samplevalidationsceneformitsuba">&#xA0;</a><a class="target" name="annex/samplevalidationsceneformitsuba">&#xA0;</a><a class="target" name="toc9.7">&#xA0;</a><h2>Sample validation scene for Mitsuba</h2>
-<pre class="listing tilde"><code><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">scene</span> <span class="hljs-attr">version</span>=<span class="hljs-string">&quot;0.5.0&quot;</span>&gt;</span></span>
-<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">integrator</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;path&quot;</span>/&gt;</span></span>
+<a class="target" name="samplevalidationsceneformitsuba">&nbsp;</a><a class="target" name="annex/samplevalidationsceneformitsuba">&nbsp;</a><a class="target" name="toc9.7">&nbsp;</a><h2>Sample validation scene for Mitsuba</h2>
+<pre class="listing tilde"><code><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">scene</span> <span class="hljs-attr">version</span>=<span class="hljs-string">"0.5.0"</span>&gt;</span></span>
+<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">integrator</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"path"</span>/&gt;</span></span>
 <span class="line"></span>
-<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">shape</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;serialized&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;sphere_mesh&quot;</span>&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;filename&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;plastic_sphere.serialized&quot;</span>/&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">integer</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;shapeIndex&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;0&quot;</span>/&gt;</span></span>
+<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">shape</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"serialized"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sphere_mesh"</span>&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filename"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"plastic_sphere.serialized"</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">integer</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"shapeIndex"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"0"</span>/&gt;</span></span>
 <span class="line"></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">bsdf</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;roughplastic&quot;</span>&gt;</span></span>
-<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;distribution&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;ggx&quot;</span>/&gt;</span></span>
-<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;alpha&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;0.0&quot;</span>/&gt;</span></span>
-<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">srgb</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;diffuseReflectance&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;0.81, 0.0, 0.0&quot;</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">bsdf</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"roughplastic"</span>&gt;</span></span>
+<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"distribution"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"ggx"</span>/&gt;</span></span>
+<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"alpha"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"0.0"</span>/&gt;</span></span>
+<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">srgb</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"diffuseReflectance"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"0.81, 0.0, 0.0"</span>/&gt;</span></span>
 <span class="line">        <span class="hljs-tag">&lt;/<span class="hljs-name">bsdf</span>&gt;</span></span>
 <span class="line">    <span class="hljs-tag">&lt;/<span class="hljs-name">shape</span>&gt;</span></span>
 <span class="line"></span>
-<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">emitter</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;envmap&quot;</span>&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;filename&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;../../environments/office/office.exr&quot;</span>/&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;scale&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;35000.0&quot;</span> /&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">boolean</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cache&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;false&quot;</span> /&gt;</span></span>
+<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">emitter</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"envmap"</span>&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filename"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"../../environments/office/office.exr"</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"scale"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"35000.0"</span> /&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">boolean</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cache"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"false"</span> /&gt;</span></span>
 <span class="line">    <span class="hljs-tag">&lt;/<span class="hljs-name">emitter</span>&gt;</span></span>
 <span class="line"></span>
-<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">emitter</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;directional&quot;</span>&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">vector</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;direction&quot;</span> <span class="hljs-attr">x</span>=<span class="hljs-string">&quot;-1&quot;</span> <span class="hljs-attr">y</span>=<span class="hljs-string">&quot;-1&quot;</span> <span class="hljs-attr">z</span>=<span class="hljs-string">&quot;1&quot;</span> /&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">rgb</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;irradiance&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;120000.0, 115200.0, 114000.0&quot;</span> /&gt;</span></span>
+<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">emitter</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"directional"</span>&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">vector</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"direction"</span> <span class="hljs-attr">x</span>=<span class="hljs-string">"-1"</span> <span class="hljs-attr">y</span>=<span class="hljs-string">"-1"</span> <span class="hljs-attr">z</span>=<span class="hljs-string">"1"</span> /&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">rgb</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"irradiance"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"120000.0, 115200.0, 114000.0"</span> /&gt;</span></span>
 <span class="line">    <span class="hljs-tag">&lt;/<span class="hljs-name">emitter</span>&gt;</span></span>
 <span class="line"></span>
-<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">sensor</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;perspective&quot;</span>&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;farClip&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;12.0&quot;</span>/&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;focusDistance&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;4.1&quot;</span>/&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;fov&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;45&quot;</span>/&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;fovAxis&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;y&quot;</span>/&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;nearClip&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;0.01&quot;</span>/&gt;</span></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">transform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;toWorld&quot;</span>&gt;</span></span>
+<span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">sensor</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"perspective"</span>&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"farClip"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"12.0"</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"focusDistance"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"4.1"</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fov"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"45"</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fovAxis"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"y"</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"nearClip"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"0.01"</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">transform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"toWorld"</span>&gt;</span></span>
 <span class="line"></span>
-<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">lookat</span> <span class="hljs-attr">target</span>=<span class="hljs-string">&quot;0, 0, 0&quot;</span> <span class="hljs-attr">origin</span>=<span class="hljs-string">&quot;0, 0, -3.1&quot;</span> <span class="hljs-attr">up</span>=<span class="hljs-string">&quot;0, 1, 0&quot;</span>/&gt;</span></span>
+<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">lookat</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"0, 0, 0"</span> <span class="hljs-attr">origin</span>=<span class="hljs-string">"0, 0, -3.1"</span> <span class="hljs-attr">up</span>=<span class="hljs-string">"0, 1, 0"</span>/&gt;</span></span>
 <span class="line">        <span class="hljs-tag">&lt;/<span class="hljs-name">transform</span>&gt;</span></span>
 <span class="line"></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">sampler</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;ldsampler&quot;</span>&gt;</span></span>
-<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">integer</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sampleCount&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;256&quot;</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">sampler</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"ldsampler"</span>&gt;</span></span>
+<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">integer</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sampleCount"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"256"</span>/&gt;</span></span>
 <span class="line">        <span class="hljs-tag">&lt;/<span class="hljs-name">sampler</span>&gt;</span></span>
 <span class="line"></span>
-<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">film</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;ldrfilm&quot;</span>&gt;</span></span>
-<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">integer</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;height&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;1440&quot;</span>/&gt;</span></span>
-<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">integer</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;width&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;2048&quot;</span>/&gt;</span></span>
-<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;exposure&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;-15.23&quot;</span> /&gt;</span></span>
-<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">rfilter</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;gaussian&quot;</span>/&gt;</span></span>
+<span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">film</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"ldrfilm"</span>&gt;</span></span>
+<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">integer</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"height"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1440"</span>/&gt;</span></span>
+<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">integer</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"width"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2048"</span>/&gt;</span></span>
+<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">float</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"exposure"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"-15.23"</span> /&gt;</span></span>
+<span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">rfilter</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"gaussian"</span>/&gt;</span></span>
 <span class="line">        <span class="hljs-tag">&lt;/<span class="hljs-name">film</span>&gt;</span></span>
 <span class="line">    <span class="hljs-tag">&lt;/<span class="hljs-name">sensor</span>&gt;</span></span>
 <span class="line"><span class="hljs-tag">&lt;/<span class="hljs-name">scene</span>&gt;</span></span></code></pre>
-<a class="target" name="lightassignmentwithfroxels">&#xA0;</a><a class="target" name="annex/lightassignmentwithfroxels">&#xA0;</a><a class="target" name="toc9.8">&#xA0;</a><h2>Light assignment with froxels</h2>
+<a class="target" name="lightassignmentwithfroxels">&nbsp;</a><a class="target" name="annex/lightassignmentwithfroxels">&nbsp;</a><a class="target" name="toc9.8">&nbsp;</a><h2>Light assignment with froxels</h2>
 <p>
 
 
-Assigning lights to froxels can be implemented on the GPU using two compute shaders. The first one, shown in <a href="#listing_froxelgeneration">listing&#xA0;48</a>, creates the froxels data (4 planes + a min Z and max Z per froxel) in an SSBO and needs to be run only once. The shader requires the following uniforms:
+Assigning lights to froxels can be implemented on the GPU using two compute shaders. The first one, shown in <a href="#listing_froxelgeneration">listing&nbsp;48</a>, creates the froxels data (4 planes + a min Z and max Z per froxel) in an SSBO and needs to be run only once. The shader requires the following uniforms:
 
 </p><p>
 
-</p><dl><table><tbody><tr valign="top"><td><dt>Projection&#xA0;matrix</dt></td><td><dd><p>    The projection matrix used to render the scene (view space to clip space transformation).
+</p><dl><table><tbody><tr valign="top"><td><dt>Projection&nbsp;matrix</dt></td><td><dd><p>    The projection matrix used to render the scene (view space to clip space transformation).
 
-</p></dd></td></tr><tr valign="top"><td><dt>Inverse&#xA0;projection&#xA0;matrix</dt></td><td><dd><p>    The inverse of the projection matrix used to render the scene (clip space to view space transformation).
+</p></dd></td></tr><tr valign="top"><td><dt>Inverse&nbsp;projection&nbsp;matrix</dt></td><td><dd><p>    The inverse of the projection matrix used to render the scene (clip space to view space transformation).
 
-</p></dd></td></tr><tr valign="top"><td><dt>Depth&#xA0;parameters</dt></td><td><dd><p>    \(-log2(\frac{z_{lighnear}}{z_{far}}) \frac{1}{maxSlices-1}\), maximum number of depth slices, Z near and Z far.
+</p></dd></td></tr><tr valign="top"><td><dt>Depth&nbsp;parameters</dt></td><td><dd><p>    \(-log2(\frac{z_{lighnear}}{z_{far}}) \frac{1}{maxSlices-1}\), maximum number of depth slices, Z near and Z far.
 
-</p></dd></td></tr><tr valign="top"><td><dt>Clip&#xA0;space&#xA0;size</dt></td><td><dd><p>    \(\frac{F_x \times F_r}{w} \times 2\), with \(F_x\) the number of tiles on the X axis, \(F_r\) the resolution in pixels of a tile and w the width in pixels of the render target.
+</p></dd></td></tr><tr valign="top"><td><dt>Clip&nbsp;space&nbsp;size</dt></td><td><dd><p>    \(\frac{F_x \times F_r}{w} \times 2\), with \(F_x\) the number of tiles on the X axis, \(F_r\) the resolution in pixels of a tile and w the width in pixels of the render target.
 
 </p></dd></td></tr></tbody></table></dl><p></p><pre class="listing tilde"><code><span class="line"><span class="hljs-meta">#version 310 es</span></span>
 <span class="line"></span>
@@ -6039,19 +6039,19 @@ Assigning lights to froxels can be implemented on the GPU using two compute shad
 <span class="line">        froxels.data[<span class="hljs-keyword">index</span>].plane3 = createPlane(frustum[<span class="hljs-number">3</span>], frustum[<span class="hljs-number">0</span>]);</span>
 <span class="line">        froxels.data[<span class="hljs-keyword">index</span>].minMaxZ = minMaxZ;</span>
 <span class="line">    }</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_froxelgeneration">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;48:</b> GLSL implementation of froxels data generation (compute shader)</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_froxelgeneration">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;48:</b> GLSL implementation of froxels data generation (compute shader)</div>
 <p>
 
 
-The second compute shader, shown in <a href="#listing_froxelevaluation">listing&#xA0;49</a>, runs every frame (if the camera and/or lights have changed) and assigns all the lights to their respective froxels. This shader relies only on a couple of uniforms (the number of point/spot lights and the view matrix) and four SSBOs:
+The second compute shader, shown in <a href="#listing_froxelevaluation">listing&nbsp;49</a>, runs every frame (if the camera and/or lights have changed) and assigns all the lights to their respective froxels. This shader relies only on a couple of uniforms (the number of point/spot lights and the view matrix) and four SSBOs:
 
 </p><p>
 
-</p><dl><dt>Light index buffer</dt><dd><p>    For each froxel, the index of each light that affects said froxel. The indices for point lights are written first and if there is enough space left, the indices for spot lights are written as well. A sentinel of value 0&#xD7;7fffffffu separates point and spot lights and/or marks the end of the froxel&apos;s list of lights. Each froxel has a maximum number of lights (point + spot).
+</p><dl><dt>Light index buffer</dt><dd><p>    For each froxel, the index of each light that affects said froxel. The indices for point lights are written first and if there is enough space left, the indices for spot lights are written as well. A sentinel of value 0×7fffffffu separates point and spot lights and/or marks the end of the froxel's list of lights. Each froxel has a maximum number of lights (point + spot).
 
-</p></dd><dt>Point lights buffer</dt><dd><p>    Array of structures describing the scene&apos;s point lights.
+</p></dd><dt>Point lights buffer</dt><dd><p>    Array of structures describing the scene's point lights.
 
-</p></dd><dt>Spot lights buffer</dt><dd><p>    Array of structures describing the scene&apos;s spot lights.
+</p></dd><dt>Spot lights buffer</dt><dd><p>    Array of structures describing the scene's spot lights.
 
 </p></dd><dt>Froxels buffer</dt><dd><p>    The list of froxels represented by planes, created by the previous compute shader.
 
@@ -6179,13 +6179,13 @@ The second compute shader, shown in <a href="#listing_froxelevaluation">listing&
 <span class="line">            lightIndexBuffer.<span class="hljs-keyword">index</span>[<span class="hljs-keyword">offset</span> + pointLightCount] = LIGHT_BUFFER_SENTINEL;</span>
 <span class="line">        }</span>
 <span class="line">    }</span>
-<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_froxelevaluation">&#xA0;</a><b style="font-style:normal;">Listing&#xA0;49:</b> GLSL implementation of assigning lights to froxels (compute shader)</div>
+<span class="line">}</span></code></pre><div class="listingcaption tilde"><a class="target" name="listing_froxelevaluation">&nbsp;</a><b style="font-style:normal;">Listing&nbsp;49:</b> GLSL implementation of assigning lights to froxels (compute shader)</div>
 
-<a class="target" name="revisions">&#xA0;</a><a class="target" name="revisions">&#xA0;</a><a class="target" name="toc10">&#xA0;</a><h1>Revisions</h1>
+<a class="target" name="revisions">&nbsp;</a><a class="target" name="revisions">&nbsp;</a><a class="target" name="toc10">&nbsp;</a><h1>Revisions</h1>
 <p>
 
 
-</p><table class="schedule"><tbody><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2019-2-20">&#xA0;</a>Wednesday<br>20 Feb 2019</td><td><b>Cloth shading</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
+</p><table class="schedule"><tbody><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2019-2-20">&nbsp;</a>Wednesday<br>20 Feb 2019</td><td><b>Cloth shading</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
 
 <p></p><p>
 
@@ -6196,7 +6196,7 @@ The second compute shader, shown in <a href="#listing_froxelevaluation">listing&
 
 <p></p><p>
 
-</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-21">&#xA0;</a>Tuesday<br>21 Aug 2018</td><td><b>Multiscattering</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
+</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-21">&nbsp;</a>Tuesday<br>21 Aug 2018</td><td><b>Multiscattering</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
 
 <p></p><p>
 
@@ -6205,7 +6205,7 @@ The second compute shader, shown in <a href="#listing_froxelevaluation">listing&
 
 <p></p><p>
 
-</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-17">&#xA0;</a>Friday<br>17 Aug 2018</td><td><b>Specular color</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
+</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-17">&nbsp;</a>Friday<br>17 Aug 2018</td><td><b>Specular color</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
 
 <p></p><p>
 
@@ -6214,7 +6214,7 @@ The second compute shader, shown in <a href="#listing_froxelevaluation">listing&
 
 <p></p><p>
 
-</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-15">&#xA0;</a>Wednesday<br>15 Aug 2018</td><td><b>Fresnel</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
+</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-15">&nbsp;</a>Wednesday<br>15 Aug 2018</td><td><b>Fresnel</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
 
 <p></p><p>
 
@@ -6223,7 +6223,7 @@ The second compute shader, shown in <a href="#listing_froxelevaluation">listing&
 
 <p></p><p>
 
-</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-9">&#xA0;</a>Thursday<br>9 Aug 2018</td><td><b>Lighting</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
+</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-9">&nbsp;</a>Thursday<br>9 Aug 2018</td><td><b>Lighting</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
 
 <p></p><p>
 
@@ -6232,56 +6232,56 @@ The second compute shader, shown in <a href="#listing_froxelevaluation">listing&
 
 <p></p><p>
 
-</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-7">&#xA0;</a>Tuesday<br>7 Aug 2018</td><td><b>Cloth model</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
+</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-7">&nbsp;</a>Tuesday<br>7 Aug 2018</td><td><b>Cloth model</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
 
 <p></p><p>
 
 </p><ul>
- <li class="minus">Added description of the &#x201C;Charlie&#x201D; NDF</li></ul>
+ <li class="minus">Added description of the “Charlie” NDF</li></ul>
 
 <p></p><p>
 
-</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-3">&#xA0;</a>Friday<br>3 Aug 2018</td><td><b>First public version</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
+</p></td></tr><tr valign="top"><td style="width:100px;padding-right:15px" rowspan="2"><a class="target" name="schedule1_2018-8-3">&nbsp;</a>Friday<br>3 Aug 2018</td><td><b>First public version</b></td></tr><tr valign="top"><td style="padding-bottom:25px">
 
 <p></p><p>
 
 </p></td></tr></tbody></table>
 
 <p></p>
-<a class="target" name="bibliography">&#xA0;</a><a class="target" name="bibliography">&#xA0;</a><a class="target" name="toc11">&#xA0;</a><h1>Bibliography</h1>
+<a class="target" name="bibliography">&nbsp;</a><a class="target" name="bibliography">&nbsp;</a><a class="target" name="toc11">&nbsp;</a><h1>Bibliography</h1>
 <p>
 
-</p><div class="bib">[<a class="target" name="citation-ashdown98">&#xA0;</a><b>Ashdown98</b>] Ian Ashdown. 1998. Parsing the IESNA LM-63 photometric data file. <a href="http://lumen.iee.put.poznan.pl/kw/iesna.txt" class="url">http://lumen.iee.put.poznan.pl/kw/iesna.txt</a>
-</div><div class="bib">[<a class="target" name="citation-ashikhmin00">&#xA0;</a><b>Ashikhmin00</b>] Michael Ashikhmin, Simon Premoze and Peter Shirley. A Microfacet-based BRDF Generator. <em class="asterisk">SIGGRAPH &apos;00 Proceedings</em>, 65-74.
-</div><div class="bib">[<a class="target" name="citation-ashikhmin07">&#xA0;</a><b>Ashikhmin07</b>] Michael Ashikhmin and Simon Premoze. 2007. Distribution-based BRDFs.
-</div><div class="bib">[<a class="target" name="citation-burley12">&#xA0;</a><b>Burley12</b>] Brent Burley. 2012. Physically Based Shading at Disney. <em class="asterisk">Physically Based Shading in Film and Game Production, ACM SIGGRAPH 2012 Courses</em>.
-</div><div class="bib">[<a class="target" name="citation-estevez17">&#xA0;</a><b>Estevez17</b>] Alejandro Conty Estevez and Christopher Kulla. 2017. Production Friendly Microfacet Sheen BRDF. <em class="asterisk">ACM SIGGRAPH 2017</em>.
-</div><div class="bib">[<a class="target" name="citation-hammon17">&#xA0;</a><b>Hammon17</b>] Earl Hammon. 217. PBR Diffuse Lighting for GGX+Smith Microsurfaces. <em class="asterisk">GDC 2017</em>.
-</div><div class="bib">[<a class="target" name="citation-heitz14">&#xA0;</a><b>Heitz14</b>] Eric Heitz. 2014. Understanding the Masking-Shadowing Function
+</p><div class="bib">[<a class="target" name="citation-ashdown98">&nbsp;</a><b>Ashdown98</b>] Ian Ashdown. 1998. Parsing the IESNA LM-63 photometric data file. <a href="http://lumen.iee.put.poznan.pl/kw/iesna.txt" class="url">http://lumen.iee.put.poznan.pl/kw/iesna.txt</a>
+</div><div class="bib">[<a class="target" name="citation-ashikhmin00">&nbsp;</a><b>Ashikhmin00</b>] Michael Ashikhmin, Simon Premoze and Peter Shirley. A Microfacet-based BRDF Generator. <em class="asterisk">SIGGRAPH '00 Proceedings</em>, 65-74.
+</div><div class="bib">[<a class="target" name="citation-ashikhmin07">&nbsp;</a><b>Ashikhmin07</b>] Michael Ashikhmin and Simon Premoze. 2007. Distribution-based BRDFs.
+</div><div class="bib">[<a class="target" name="citation-burley12">&nbsp;</a><b>Burley12</b>] Brent Burley. 2012. Physically Based Shading at Disney. <em class="asterisk">Physically Based Shading in Film and Game Production, ACM SIGGRAPH 2012 Courses</em>.
+</div><div class="bib">[<a class="target" name="citation-estevez17">&nbsp;</a><b>Estevez17</b>] Alejandro Conty Estevez and Christopher Kulla. 2017. Production Friendly Microfacet Sheen BRDF. <em class="asterisk">ACM SIGGRAPH 2017</em>.
+</div><div class="bib">[<a class="target" name="citation-hammon17">&nbsp;</a><b>Hammon17</b>] Earl Hammon. 217. PBR Diffuse Lighting for GGX+Smith Microsurfaces. <em class="asterisk">GDC 2017</em>.
+</div><div class="bib">[<a class="target" name="citation-heitz14">&nbsp;</a><b>Heitz14</b>] Eric Heitz. 2014. Understanding the Masking-Shadowing Function
 in Microfacet-Based BRDFs. <em class="asterisk">Journal of Computer Graphics Techniques</em>, 3 (2).
-</div><div class="bib">[<a class="target" name="citation-heitz16">&#xA0;</a><b>Heitz16</b>] Eric Heitz et al. 2016. Multiple-Scattering Microfacet BSDFs with the Smith Model. <em class="asterisk">ACM SIGGRAPH 2016</em>.
-</div><div class="bib">[<a class="target" name="citation-hill12">&#xA0;</a><b>Hill12</b>] Colin Barr&#xE9;-Brisebois and Stephen Hill. 2012. Blending in Detail. <a href="http://blog.selfshadow.com/publications/blending-in-detail/" class="url">http://blog.selfshadow.com/publications/blending-in-detail/</a>
-</div><div class="bib">[<a class="target" name="citation-karis13a">&#xA0;</a><b>Karis13a</b>] Brian Karis. 2013. Specular BRDF Reference. <a href="http://graphicrants.blogspot.com/2013/08/specular-brdf-reference.html" class="url">http://graphicrants.blogspot.com/2013/08/specular-brdf-reference.html</a>
-</div><div class="bib">[<a class="target" name="citation-karis13b">&#xA0;</a><b>Karis13b</b>] Brian Karis, 2013. Real Shading in Unreal Engine 4. <a href="https://blog.selfshadow.com/publications/s2013-shading-course/karis/s2013_pbs_epic_notes_v2.pdf" class="url">https://blog.selfshadow.com/publications/s2013-shading-course/karis/s2013_pbs_epic_notes_v2.pdf</a>
-</div><div class="bib">[<a class="target" name="citation-karis14">&#xA0;</a><b>Karis14</b>] Brian Karis. 2014. Physically Based Shading on Mobile. <a href="https://www.unrealengine.com/blog/physically-based-shading-on-mobile" class="url">https://www.unrealengine.com/blog/physically-based-shading-on-mobile</a>
-</div><div class="bib">[<a class="target" name="citation-kelemen01">&#xA0;</a><b>Kelemen01</b>] Csaba Kelemen et al. 2001. A Microfacet Based Coupled Specular-Matte BRDF Model with Importance Sampling. <em class="asterisk">Eurographics Short Presentations</em>.
-</div><div class="bib">[<a class="target" name="citation-krystek85">&#xA0;</a><b>Krystek85</b>] M. Krystek. 1985. An algorithm to calculate correlated color temperature. <em class="asterisk">Color Research &amp; Application</em>, 10 (1), 38&#x2013;40.
-</div><div class="bib">[<a class="target" name="citation-krivanek08">&#xA0;</a><b>Krivanek08</b>] Jaroslave Kriv&#xE0;nek and Mark Colbert. 2008. Real-time Shading with Filtered Importance Sampling. <em class="asterisk">Eurographics Symposium on Rendering 2008</em>, Volume 27, Number 4.
-</div><div class="bib">[<a class="target" name="citation-kulla17">&#xA0;</a><b>Kulla17</b>] Christopher Kulla and Alejandro Conty. 2017. Revisiting Physically Based Shading at Imageworks. <em class="asterisk">ACM SIGGRAPH 2017</em>
-</div><div class="bib">[<a class="target" name="citation-lagarde14">&#xA0;</a><b>Lagarde14</b>] S&#xE9;bastien Lagarde and Charles de Rousiers. 2014. Moving Frostbite to PBR. <em class="asterisk">Physically Based Shading in Theory and Practice, ACM SIGGRAPH 2014 Courses</em>.
-</div><div class="bib">[<a class="target" name="citation-lagarde18">&#xA0;</a><b>Lagarde18</b>] S&#xE9;bastien Lagarde and Evgenii Golubev. 2018. The road toward unified rendering with Unity&#x2019;s high definition rendering pipeline. <em class="asterisk">Advances in Real-Time Rendering in Games, ACM SIGGRAPH 2018 Courses</em>.
-</div><div class="bib">[<a class="target" name="citation-lazarov13">&#xA0;</a><b>Lazarov13</b>] Dimitar Lazarov. 2013. Physically-Based Shading in Call of Duty: Black Ops. <em class="asterisk">Physically Based Shading in Theory and Practice, ACM SIGGRAPH 2013 Courses</em>.
-</div><div class="bib">[<a class="target" name="citation-mcauley15">&#xA0;</a><b>McAuley15</b>] Stephen McAuley. 2015. Rendering the World of Far Cry 4. <em class="asterisk">GDC 2015</em>.
-</div><div class="bib">[<a class="target" name="citation-mcguire10">&#xA0;</a><b>McGuire10</b>] Morgan McGuire. 2010. Ambient Occlusion Volumes. <em class="asterisk">High Performance Graphics</em>.
-</div><div class="bib">[<a class="target" name="citation-narkowicz14">&#xA0;</a><b>Narkowicz14</b>] Krzysztof Narkowicz. 2014. Analytical DFG Term for IBL. <a href="https://knarkowicz.wordpress.com/2014/12/27/analytical-dfg-term-for-ibl" class="url">https://knarkowicz.wordpress.com/2014/12/27/analytical-dfg-term-for-ibl</a>
-</div><div class="bib">[<a class="target" name="citation-neubelt13">&#xA0;</a><b>Neubelt13</b>] David Neubelt and Matt Pettineo. 2013. Crafting a Next-Gen Material Pipeline for The Order: 1886. <em class="asterisk">Physically Based Shading in Theory and Practice, ACM SIGGRAPH 2013 Courses</em>.
-</div><div class="bib">[<a class="target" name="citation-oren94">&#xA0;</a><b>Oren94</b>] Michael Oren and Shree K. Nayar. 1994. Generalization of lambert&apos;s reflectance model. <em class="asterisk">SIGGRAPH</em>, 239&#x2013;246. ACM.
-</div><div class="bib">[<a class="target" name="citation-pattanaik00">&#xA0;</a><b>Pattanaik00</b>] Sumanta Pattanaik00 et al. 2000. Time-Dependent Visual Adaptation
-For Fast Realistic Image Display. <em class="asterisk">SIGGRAPH &apos;00 Proceedings of the 27th annual conference on Computer graphics and interactive techniques</em>, 47-54.
-</div><div class="bib">[<a class="target" name="citation-ramamoorthi01">&#xA0;</a><b>Ramamoorthi01</b>] Ravi Ramamoorthi and Pat Hanrahan. 2001. On the relationship between radiance and irradiance: determining the illumination from images of a convex Lambertian object. <em class="asterisk">Journal of the Optical Society of America</em>, Volume 18, Number 10, October 2001.
-</div><div class="bib">[<a class="target" name="citation-revie12">&#xA0;</a><b>Revie12</b>] Donald Revie. 2012.  Implementing Fur in Deferred Shading. <em class="asterisk">GPU Pro 2</em>, Chapter 2.
-</div><div class="bib">[<a class="target" name="citation-russell15">&#xA0;</a><b>Russell15</b>] Jeff Russell. 2015. Horizon Occlusion for Normal Mapped Reflections. <a href="http://marmosetco.tumblr.com/post/81245981087" class="url">http://marmosetco.tumblr.com/post/81245981087</a>
-</div><div class="bib">[<a class="target" name="citation-schlick94">&#xA0;</a><b>Schlick94</b>] Christophe Schlick. 1994. An Inexpensive BRDF Model for Physically-Based Rendering. <em class="asterisk">Computer Graphics Forum</em>, 13 (3), 233&#x2013;246.
-</div><div class="bib">[<a class="target" name="citation-walter07">&#xA0;</a><b>Walter07</b>] Bruce Walter et al. 2007. Microfacet Models for Refraction through Rough Surfaces. <em class="asterisk">Proceedings of the Eurographics Symposium on Rendering</em>.
+</div><div class="bib">[<a class="target" name="citation-heitz16">&nbsp;</a><b>Heitz16</b>] Eric Heitz et al. 2016. Multiple-Scattering Microfacet BSDFs with the Smith Model. <em class="asterisk">ACM SIGGRAPH 2016</em>.
+</div><div class="bib">[<a class="target" name="citation-hill12">&nbsp;</a><b>Hill12</b>] Colin Barré-Brisebois and Stephen Hill. 2012. Blending in Detail. <a href="http://blog.selfshadow.com/publications/blending-in-detail/" class="url">http://blog.selfshadow.com/publications/blending-in-detail/</a>
+</div><div class="bib">[<a class="target" name="citation-karis13a">&nbsp;</a><b>Karis13a</b>] Brian Karis. 2013. Specular BRDF Reference. <a href="http://graphicrants.blogspot.com/2013/08/specular-brdf-reference.html" class="url">http://graphicrants.blogspot.com/2013/08/specular-brdf-reference.html</a>
+</div><div class="bib">[<a class="target" name="citation-karis13b">&nbsp;</a><b>Karis13b</b>] Brian Karis, 2013. Real Shading in Unreal Engine 4. <a href="https://blog.selfshadow.com/publications/s2013-shading-course/karis/s2013_pbs_epic_notes_v2.pdf" class="url">https://blog.selfshadow.com/publications/s2013-shading-course/karis/s2013_pbs_epic_notes_v2.pdf</a>
+</div><div class="bib">[<a class="target" name="citation-karis14">&nbsp;</a><b>Karis14</b>] Brian Karis. 2014. Physically Based Shading on Mobile. <a href="https://www.unrealengine.com/blog/physically-based-shading-on-mobile" class="url">https://www.unrealengine.com/blog/physically-based-shading-on-mobile</a>
+</div><div class="bib">[<a class="target" name="citation-kelemen01">&nbsp;</a><b>Kelemen01</b>] Csaba Kelemen et al. 2001. A Microfacet Based Coupled Specular-Matte BRDF Model with Importance Sampling. <em class="asterisk">Eurographics Short Presentations</em>.
+</div><div class="bib">[<a class="target" name="citation-krystek85">&nbsp;</a><b>Krystek85</b>] M. Krystek. 1985. An algorithm to calculate correlated color temperature. <em class="asterisk">Color Research &amp; Application</em>, 10 (1), 38–40.
+</div><div class="bib">[<a class="target" name="citation-krivanek08">&nbsp;</a><b>Krivanek08</b>] Jaroslave Krivànek and Mark Colbert. 2008. Real-time Shading with Filtered Importance Sampling. <em class="asterisk">Eurographics Symposium on Rendering 2008</em>, Volume 27, Number 4.
+</div><div class="bib">[<a class="target" name="citation-kulla17">&nbsp;</a><b>Kulla17</b>] Christopher Kulla and Alejandro Conty. 2017. Revisiting Physically Based Shading at Imageworks. <em class="asterisk">ACM SIGGRAPH 2017</em>
+</div><div class="bib">[<a class="target" name="citation-lagarde14">&nbsp;</a><b>Lagarde14</b>] Sébastien Lagarde and Charles de Rousiers. 2014. Moving Frostbite to PBR. <em class="asterisk">Physically Based Shading in Theory and Practice, ACM SIGGRAPH 2014 Courses</em>.
+</div><div class="bib">[<a class="target" name="citation-lagarde18">&nbsp;</a><b>Lagarde18</b>] Sébastien Lagarde and Evgenii Golubev. 2018. The road toward unified rendering with Unity’s high definition rendering pipeline. <em class="asterisk">Advances in Real-Time Rendering in Games, ACM SIGGRAPH 2018 Courses</em>.
+</div><div class="bib">[<a class="target" name="citation-lazarov13">&nbsp;</a><b>Lazarov13</b>] Dimitar Lazarov. 2013. Physically-Based Shading in Call of Duty: Black Ops. <em class="asterisk">Physically Based Shading in Theory and Practice, ACM SIGGRAPH 2013 Courses</em>.
+</div><div class="bib">[<a class="target" name="citation-mcauley15">&nbsp;</a><b>McAuley15</b>] Stephen McAuley. 2015. Rendering the World of Far Cry 4. <em class="asterisk">GDC 2015</em>.
+</div><div class="bib">[<a class="target" name="citation-mcguire10">&nbsp;</a><b>McGuire10</b>] Morgan McGuire. 2010. Ambient Occlusion Volumes. <em class="asterisk">High Performance Graphics</em>.
+</div><div class="bib">[<a class="target" name="citation-narkowicz14">&nbsp;</a><b>Narkowicz14</b>] Krzysztof Narkowicz. 2014. Analytical DFG Term for IBL. <a href="https://knarkowicz.wordpress.com/2014/12/27/analytical-dfg-term-for-ibl" class="url">https://knarkowicz.wordpress.com/2014/12/27/analytical-dfg-term-for-ibl</a>
+</div><div class="bib">[<a class="target" name="citation-neubelt13">&nbsp;</a><b>Neubelt13</b>] David Neubelt and Matt Pettineo. 2013. Crafting a Next-Gen Material Pipeline for The Order: 1886. <em class="asterisk">Physically Based Shading in Theory and Practice, ACM SIGGRAPH 2013 Courses</em>.
+</div><div class="bib">[<a class="target" name="citation-oren94">&nbsp;</a><b>Oren94</b>] Michael Oren and Shree K. Nayar. 1994. Generalization of lambert's reflectance model. <em class="asterisk">SIGGRAPH</em>, 239–246. ACM.
+</div><div class="bib">[<a class="target" name="citation-pattanaik00">&nbsp;</a><b>Pattanaik00</b>] Sumanta Pattanaik00 et al. 2000. Time-Dependent Visual Adaptation
+For Fast Realistic Image Display. <em class="asterisk">SIGGRAPH '00 Proceedings of the 27th annual conference on Computer graphics and interactive techniques</em>, 47-54.
+</div><div class="bib">[<a class="target" name="citation-ramamoorthi01">&nbsp;</a><b>Ramamoorthi01</b>] Ravi Ramamoorthi and Pat Hanrahan. 2001. On the relationship between radiance and irradiance: determining the illumination from images of a convex Lambertian object. <em class="asterisk">Journal of the Optical Society of America</em>, Volume 18, Number 10, October 2001.
+</div><div class="bib">[<a class="target" name="citation-revie12">&nbsp;</a><b>Revie12</b>] Donald Revie. 2012.  Implementing Fur in Deferred Shading. <em class="asterisk">GPU Pro 2</em>, Chapter 2.
+</div><div class="bib">[<a class="target" name="citation-russell15">&nbsp;</a><b>Russell15</b>] Jeff Russell. 2015. Horizon Occlusion for Normal Mapped Reflections. <a href="http://marmosetco.tumblr.com/post/81245981087" class="url">http://marmosetco.tumblr.com/post/81245981087</a>
+</div><div class="bib">[<a class="target" name="citation-schlick94">&nbsp;</a><b>Schlick94</b>] Christophe Schlick. 1994. An Inexpensive BRDF Model for Physically-Based Rendering. <em class="asterisk">Computer Graphics Forum</em>, 13 (3), 233–246.
+</div><div class="bib">[<a class="target" name="citation-walter07">&nbsp;</a><b>Walter07</b>] Bruce Walter et al. 2007. Microfacet Models for Refraction through Rough Surfaces. <em class="asterisk">Proceedings of the Eurographics Symposium on Rendering</em>.
 </div>
-<p></p></span><div class="markdeepFooter"><i>formatted by <a href="http://casual-effects.com/markdeep" style="color:#999">Markdeep&#xA0;1.03&#xA0;&#xA0;</a></i><div style="display:inline-block;font-size:13px;font-family:&apos;Times New Roman&apos;,serif;vertical-align:middle;transform:translate(-3px,-1px)rotate(135deg);">&#x2712;</div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script></body></html>
\ No newline at end of file
+<p></p></span><div class="markdeepFooter"><i>formatted by <a href="http://casual-effects.com/markdeep" style="color:#999">Markdeep&nbsp;1.03&nbsp;&nbsp;</a></i><div style="display:inline-block;font-size:13px;font-family:'Times New Roman',serif;vertical-align:middle;transform:translate(-3px,-1px)rotate(135deg);">✒</div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script></body></html>
\ No newline at end of file
diff --git a/docs/Materials.html b/docs/Materials.html
index 62e13cf8e7..1e05d38092 100644
--- a/docs/Materials.html
+++ b/docs/Materials.html
@@ -29,107 +29,107 @@ counter-increment: h6;margin-right:10px}</style><style>.hljs{display:block;overf
 </p><center><a href="images/filament_logo.png" target="_blank"><img class="markdeep" src="images/filament_logo.png"></a></center>
 
 <p></p>
-<div class="longTOC"><div class="tocHeader">Contents</div><p><a href="#about" class="level1"><span class="tocNumber">1&#xA0; </span>About</a><br>
-&#xA0;&#xA0;<a href="#about/authors" class="level2"><span class="tocNumber">1.1&#xA0; </span>Authors</a><br>
-<a href="#overview" class="level1"><span class="tocNumber">2&#xA0; </span>Overview</a><br>
-&#xA0;&#xA0;<a href="#overview/coreconcepts" class="level2"><span class="tocNumber">2.1&#xA0; </span>Core concepts</a><br>
-<a href="#materialmodels" class="level1"><span class="tocNumber">3&#xA0; </span>Material models</a><br>
-&#xA0;&#xA0;<a href="#materialmodels/litmodel" class="level2"><span class="tocNumber">3.1&#xA0; </span>Lit model</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/basecolor" class="level3"><span class="tocNumber">3.1.1&#xA0; </span>Base color</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/metallic" class="level3"><span class="tocNumber">3.1.2&#xA0; </span>Metallic</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/roughness" class="level3"><span class="tocNumber">3.1.3&#xA0; </span>Roughness</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/non-metals" class="level3"><span class="tocNumber">3.1.4&#xA0; </span>Non-metals</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/metals" class="level3"><span class="tocNumber">3.1.5&#xA0; </span>Metals</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/refraction" class="level3"><span class="tocNumber">3.1.6&#xA0; </span>Refraction</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/reflectance" class="level3"><span class="tocNumber">3.1.7&#xA0; </span>Reflectance</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/sheencolor" class="level3"><span class="tocNumber">3.1.8&#xA0; </span>Sheen color</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/sheenroughness" class="level3"><span class="tocNumber">3.1.9&#xA0; </span>Sheen roughness</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/clearcoat" class="level3"><span class="tocNumber">3.1.10&#xA0; </span>Clear coat</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/clearcoatroughness" class="level3"><span class="tocNumber">3.1.11&#xA0; </span>Clear coat roughness</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/anisotropy" class="level3"><span class="tocNumber">3.1.12&#xA0; </span>Anisotropy</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/anisotropydirection" class="level3"><span class="tocNumber">3.1.13&#xA0; </span>Anisotropy direction</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/ambientocclusion" class="level3"><span class="tocNumber">3.1.14&#xA0; </span>Ambient occlusion</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/normal" class="level3"><span class="tocNumber">3.1.15&#xA0; </span>Normal</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/bentnormal" class="level3"><span class="tocNumber">3.1.16&#xA0; </span>Bent normal</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/clearcoatnormal" class="level3"><span class="tocNumber">3.1.17&#xA0; </span>Clear coat normal</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/emissive" class="level3"><span class="tocNumber">3.1.18&#xA0; </span>Emissive</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/post-lightingcolor" class="level3"><span class="tocNumber">3.1.19&#xA0; </span>Post-lighting color</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/indexofrefraction" class="level3"><span class="tocNumber">3.1.20&#xA0; </span>Index of refraction</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/transmission" class="level3"><span class="tocNumber">3.1.21&#xA0; </span>Transmission</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/absorption" class="level3"><span class="tocNumber">3.1.22&#xA0; </span>Absorption</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/litmodel/micro-thicknessandthickness" class="level3"><span class="tocNumber">3.1.23&#xA0; </span>Micro-thickness and thickness</a><br>
-&#xA0;&#xA0;<a href="#materialmodels/subsurfacemodel" class="level2"><span class="tocNumber">3.2&#xA0; </span>Subsurface model</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/subsurfacemodel/thickness" class="level3"><span class="tocNumber">3.2.1&#xA0; </span>Thickness</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/subsurfacemodel/subsurfacecolor" class="level3"><span class="tocNumber">3.2.2&#xA0; </span>Subsurface color</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/subsurfacemodel/subsurfacepower" class="level3"><span class="tocNumber">3.2.3&#xA0; </span>Subsurface power</a><br>
-&#xA0;&#xA0;<a href="#materialmodels/clothmodel" class="level2"><span class="tocNumber">3.3&#xA0; </span>Cloth model</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/clothmodel/sheencolor" class="level3"><span class="tocNumber">3.3.1&#xA0; </span>Sheen color</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialmodels/clothmodel/subsurfacecolor" class="level3"><span class="tocNumber">3.3.2&#xA0; </span>Subsurface color</a><br>
-&#xA0;&#xA0;<a href="#materialmodels/unlitmodel" class="level2"><span class="tocNumber">3.4&#xA0; </span>Unlit model</a><br>
-&#xA0;&#xA0;<a href="#materialmodels/specularglossiness" class="level2"><span class="tocNumber">3.5&#xA0; </span>Specular glossiness</a><br>
-<a href="#materialdefinitions" class="level1"><span class="tocNumber">4&#xA0; </span>Material definitions</a><br>
-&#xA0;&#xA0;<a href="#materialdefinitions/format" class="level2"><span class="tocNumber">4.1&#xA0; </span>Format</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/format/differenceswithjson" class="level3"><span class="tocNumber">4.1.1&#xA0; </span>Differences with JSON</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/format/example" class="level3"><span class="tocNumber">4.1.2&#xA0; </span>Example</a><br>
-&#xA0;&#xA0;<a href="#materialdefinitions/materialblock" class="level2"><span class="tocNumber">4.2&#xA0; </span>Material block</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/general:name" class="level3"><span class="tocNumber">4.2.1&#xA0; </span>General: name</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/general:shadingmodel" class="level3"><span class="tocNumber">4.2.2&#xA0; </span>General: shadingModel</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/general:parameters" class="level3"><span class="tocNumber">4.2.3&#xA0; </span>General: parameters</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/general:variantfilter" class="level3"><span class="tocNumber">4.2.4&#xA0; </span>General: variantFilter</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/general:flipuv" class="level3"><span class="tocNumber">4.2.5&#xA0; </span>General: flipUV</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/vertexandattributes:requires" class="level3"><span class="tocNumber">4.2.6&#xA0; </span>Vertex and attributes: requires</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/vertexandattributes:variables" class="level3"><span class="tocNumber">4.2.7&#xA0; </span>Vertex and attributes: variables</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/vertexandattributes:vertexdomain" class="level3"><span class="tocNumber">4.2.8&#xA0; </span>Vertex and attributes: vertexDomain</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/vertexandattributes:interpolation" class="level3"><span class="tocNumber">4.2.9&#xA0; </span>Vertex and attributes: interpolation</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/blendingandtransparency:blending" class="level3"><span class="tocNumber">4.2.10&#xA0; </span>Blending and transparency: blending</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/blendingandtransparency:postlightingblending" class="level3"><span class="tocNumber">4.2.11&#xA0; </span>Blending and transparency: postLightingBlending</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/blendingandtransparency:transparency" class="level3"><span class="tocNumber">4.2.12&#xA0; </span>Blending and transparency: transparency</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/blendingandtransparency:maskthreshold" class="level3"><span class="tocNumber">4.2.13&#xA0; </span>Blending and transparency: maskThreshold</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/blendingandtransparency:refractionmode" class="level3"><span class="tocNumber">4.2.14&#xA0; </span>Blending and transparency: refractionMode</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/blendingandtransparency:refractiontype" class="level3"><span class="tocNumber">4.2.15&#xA0; </span>Blending and transparency: refractionType</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/rasterization:culling" class="level3"><span class="tocNumber">4.2.16&#xA0; </span>Rasterization: culling</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/rasterization:colorwrite" class="level3"><span class="tocNumber">4.2.17&#xA0; </span>Rasterization: colorWrite</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/rasterization:depthwrite" class="level3"><span class="tocNumber">4.2.18&#xA0; </span>Rasterization: depthWrite</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/rasterization:depthculling" class="level3"><span class="tocNumber">4.2.19&#xA0; </span>Rasterization: depthCulling</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/rasterization:doublesided" class="level3"><span class="tocNumber">4.2.20&#xA0; </span>Rasterization: doubleSided</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/lighting:shadowmultiplier" class="level3"><span class="tocNumber">4.2.21&#xA0; </span>Lighting: shadowMultiplier</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/lighting:clearcoatiorchange" class="level3"><span class="tocNumber">4.2.22&#xA0; </span>Lighting: clearCoatIorChange</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/lighting:multibounceambientocclusion" class="level3"><span class="tocNumber">4.2.23&#xA0; </span>Lighting: multiBounceAmbientOcclusion</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/lighting:specularambientocclusion" class="level3"><span class="tocNumber">4.2.24&#xA0; </span>Lighting: specularAmbientOcclusion</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/anti-aliasing:specularantialiasing" class="level3"><span class="tocNumber">4.2.25&#xA0; </span>Anti-aliasing: specularAntiAliasing</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/anti-aliasing:specularantialiasingvariance" class="level3"><span class="tocNumber">4.2.26&#xA0; </span>Anti-aliasing: specularAntiAliasingVariance</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/materialblock/anti-aliasing:specularantialiasingthreshold" class="level3"><span class="tocNumber">4.2.27&#xA0; </span>Anti-aliasing: specularAntiAliasingThreshold</a><br>
-&#xA0;&#xA0;<a href="#materialdefinitions/vertexblock" class="level2"><span class="tocNumber">4.3&#xA0; </span>Vertex block</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/vertexblock/materialvertexinputs" class="level3"><span class="tocNumber">4.3.1&#xA0; </span>Material vertex inputs</a><br>
-&#xA0;&#xA0;<a href="#materialdefinitions/fragmentblock" class="level2"><span class="tocNumber">4.4&#xA0; </span>Fragment block</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/fragmentblock/preparematerialfunction" class="level3"><span class="tocNumber">4.4.1&#xA0; </span>prepareMaterial function</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/fragmentblock/materialfragmentinputs" class="level3"><span class="tocNumber">4.4.2&#xA0; </span>Material fragment inputs</a><br>
-&#xA0;&#xA0;<a href="#materialdefinitions/shaderpublicapis" class="level2"><span class="tocNumber">4.5&#xA0; </span>Shader public APIs</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/shaderpublicapis/types" class="level3"><span class="tocNumber">4.5.1&#xA0; </span>Types</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/shaderpublicapis/math" class="level3"><span class="tocNumber">4.5.2&#xA0; </span>Math</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/shaderpublicapis/matrices" class="level3"><span class="tocNumber">4.5.3&#xA0; </span>Matrices</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/shaderpublicapis/frameconstants" class="level3"><span class="tocNumber">4.5.4&#xA0; </span>Frame constants</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/shaderpublicapis/vertexonly" class="level3"><span class="tocNumber">4.5.5&#xA0; </span>Vertex only</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#materialdefinitions/shaderpublicapis/fragmentonly" class="level3"><span class="tocNumber">4.5.6&#xA0; </span>Fragment only</a><br>
-<a href="#compilingmaterials" class="level1"><span class="tocNumber">5&#xA0; </span>Compiling materials</a><br>
-&#xA0;&#xA0;<a href="#compilingmaterials/shadervalidation" class="level2"><span class="tocNumber">5.1&#xA0; </span>Shader validation</a><br>
-&#xA0;&#xA0;<a href="#compilingmaterials/flags" class="level2"><span class="tocNumber">5.2&#xA0; </span>Flags</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#compilingmaterials/flags/&#x2014;platform" class="level3"><span class="tocNumber">5.2.1&#xA0; </span>&#x2014;platform</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#compilingmaterials/flags/&#x2014;api" class="level3"><span class="tocNumber">5.2.2&#xA0; </span>&#x2014;api</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#compilingmaterials/flags/&#x2014;optimize-size" class="level3"><span class="tocNumber">5.2.3&#xA0; </span>&#x2014;optimize-size</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#compilingmaterials/flags/&#x2014;reflect" class="level3"><span class="tocNumber">5.2.4&#xA0; </span>&#x2014;reflect</a><br>
-&#xA0;&#xA0;&#xA0;&#xA0;<a href="#compilingmaterials/flags/&#x2014;variant-filter" class="level3"><span class="tocNumber">5.2.5&#xA0; </span>&#x2014;variant-filter</a><br>
-<a href="#handlingcolors" class="level1"><span class="tocNumber">6&#xA0; </span>Handling colors</a><br>
-&#xA0;&#xA0;<a href="#handlingcolors/linearcolors" class="level2"><span class="tocNumber">6.1&#xA0; </span>Linear colors</a><br>
-&#xA0;&#xA0;<a href="#handlingcolors/pre-multipliedalpha" class="level2"><span class="tocNumber">6.2&#xA0; </span>Pre-multiplied alpha</a><br>
-</p></div><a class="target" name="about">&#xA0;</a><a class="target" name="about">&#xA0;</a><a class="target" name="toc1">&#xA0;</a><h1>About</h1>
+<div class="longTOC"><div class="tocHeader">Contents</div><p><a href="#about" class="level1"><span class="tocNumber">1&nbsp; </span>About</a><br>
+&nbsp;&nbsp;<a href="#about/authors" class="level2"><span class="tocNumber">1.1&nbsp; </span>Authors</a><br>
+<a href="#overview" class="level1"><span class="tocNumber">2&nbsp; </span>Overview</a><br>
+&nbsp;&nbsp;<a href="#overview/coreconcepts" class="level2"><span class="tocNumber">2.1&nbsp; </span>Core concepts</a><br>
+<a href="#materialmodels" class="level1"><span class="tocNumber">3&nbsp; </span>Material models</a><br>
+&nbsp;&nbsp;<a href="#materialmodels/litmodel" class="level2"><span class="tocNumber">3.1&nbsp; </span>Lit model</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/basecolor" class="level3"><span class="tocNumber">3.1.1&nbsp; </span>Base color</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/metallic" class="level3"><span class="tocNumber">3.1.2&nbsp; </span>Metallic</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/roughness" class="level3"><span class="tocNumber">3.1.3&nbsp; </span>Roughness</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/non-metals" class="level3"><span class="tocNumber">3.1.4&nbsp; </span>Non-metals</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/metals" class="level3"><span class="tocNumber">3.1.5&nbsp; </span>Metals</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/refraction" class="level3"><span class="tocNumber">3.1.6&nbsp; </span>Refraction</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/reflectance" class="level3"><span class="tocNumber">3.1.7&nbsp; </span>Reflectance</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/sheencolor" class="level3"><span class="tocNumber">3.1.8&nbsp; </span>Sheen color</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/sheenroughness" class="level3"><span class="tocNumber">3.1.9&nbsp; </span>Sheen roughness</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/clearcoat" class="level3"><span class="tocNumber">3.1.10&nbsp; </span>Clear coat</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/clearcoatroughness" class="level3"><span class="tocNumber">3.1.11&nbsp; </span>Clear coat roughness</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/anisotropy" class="level3"><span class="tocNumber">3.1.12&nbsp; </span>Anisotropy</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/anisotropydirection" class="level3"><span class="tocNumber">3.1.13&nbsp; </span>Anisotropy direction</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/ambientocclusion" class="level3"><span class="tocNumber">3.1.14&nbsp; </span>Ambient occlusion</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/normal" class="level3"><span class="tocNumber">3.1.15&nbsp; </span>Normal</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/bentnormal" class="level3"><span class="tocNumber">3.1.16&nbsp; </span>Bent normal</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/clearcoatnormal" class="level3"><span class="tocNumber">3.1.17&nbsp; </span>Clear coat normal</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/emissive" class="level3"><span class="tocNumber">3.1.18&nbsp; </span>Emissive</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/post-lightingcolor" class="level3"><span class="tocNumber">3.1.19&nbsp; </span>Post-lighting color</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/indexofrefraction" class="level3"><span class="tocNumber">3.1.20&nbsp; </span>Index of refraction</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/transmission" class="level3"><span class="tocNumber">3.1.21&nbsp; </span>Transmission</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/absorption" class="level3"><span class="tocNumber">3.1.22&nbsp; </span>Absorption</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/litmodel/micro-thicknessandthickness" class="level3"><span class="tocNumber">3.1.23&nbsp; </span>Micro-thickness and thickness</a><br>
+&nbsp;&nbsp;<a href="#materialmodels/subsurfacemodel" class="level2"><span class="tocNumber">3.2&nbsp; </span>Subsurface model</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/subsurfacemodel/thickness" class="level3"><span class="tocNumber">3.2.1&nbsp; </span>Thickness</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/subsurfacemodel/subsurfacecolor" class="level3"><span class="tocNumber">3.2.2&nbsp; </span>Subsurface color</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/subsurfacemodel/subsurfacepower" class="level3"><span class="tocNumber">3.2.3&nbsp; </span>Subsurface power</a><br>
+&nbsp;&nbsp;<a href="#materialmodels/clothmodel" class="level2"><span class="tocNumber">3.3&nbsp; </span>Cloth model</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/clothmodel/sheencolor" class="level3"><span class="tocNumber">3.3.1&nbsp; </span>Sheen color</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialmodels/clothmodel/subsurfacecolor" class="level3"><span class="tocNumber">3.3.2&nbsp; </span>Subsurface color</a><br>
+&nbsp;&nbsp;<a href="#materialmodels/unlitmodel" class="level2"><span class="tocNumber">3.4&nbsp; </span>Unlit model</a><br>
+&nbsp;&nbsp;<a href="#materialmodels/specularglossiness" class="level2"><span class="tocNumber">3.5&nbsp; </span>Specular glossiness</a><br>
+<a href="#materialdefinitions" class="level1"><span class="tocNumber">4&nbsp; </span>Material definitions</a><br>
+&nbsp;&nbsp;<a href="#materialdefinitions/format" class="level2"><span class="tocNumber">4.1&nbsp; </span>Format</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/format/differenceswithjson" class="level3"><span class="tocNumber">4.1.1&nbsp; </span>Differences with JSON</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/format/example" class="level3"><span class="tocNumber">4.1.2&nbsp; </span>Example</a><br>
+&nbsp;&nbsp;<a href="#materialdefinitions/materialblock" class="level2"><span class="tocNumber">4.2&nbsp; </span>Material block</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/general:name" class="level3"><span class="tocNumber">4.2.1&nbsp; </span>General: name</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/general:shadingmodel" class="level3"><span class="tocNumber">4.2.2&nbsp; </span>General: shadingModel</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/general:parameters" class="level3"><span class="tocNumber">4.2.3&nbsp; </span>General: parameters</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/general:variantfilter" class="level3"><span class="tocNumber">4.2.4&nbsp; </span>General: variantFilter</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/general:flipuv" class="level3"><span class="tocNumber">4.2.5&nbsp; </span>General: flipUV</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/vertexandattributes:requires" class="level3"><span class="tocNumber">4.2.6&nbsp; </span>Vertex and attributes: requires</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/vertexandattributes:variables" class="level3"><span class="tocNumber">4.2.7&nbsp; </span>Vertex and attributes: variables</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/vertexandattributes:vertexdomain" class="level3"><span class="tocNumber">4.2.8&nbsp; </span>Vertex and attributes: vertexDomain</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/vertexandattributes:interpolation" class="level3"><span class="tocNumber">4.2.9&nbsp; </span>Vertex and attributes: interpolation</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/blendingandtransparency:blending" class="level3"><span class="tocNumber">4.2.10&nbsp; </span>Blending and transparency: blending</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/blendingandtransparency:postlightingblending" class="level3"><span class="tocNumber">4.2.11&nbsp; </span>Blending and transparency: postLightingBlending</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/blendingandtransparency:transparency" class="level3"><span class="tocNumber">4.2.12&nbsp; </span>Blending and transparency: transparency</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/blendingandtransparency:maskthreshold" class="level3"><span class="tocNumber">4.2.13&nbsp; </span>Blending and transparency: maskThreshold</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/blendingandtransparency:refractionmode" class="level3"><span class="tocNumber">4.2.14&nbsp; </span>Blending and transparency: refractionMode</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/blendingandtransparency:refractiontype" class="level3"><span class="tocNumber">4.2.15&nbsp; </span>Blending and transparency: refractionType</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/rasterization:culling" class="level3"><span class="tocNumber">4.2.16&nbsp; </span>Rasterization: culling</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/rasterization:colorwrite" class="level3"><span class="tocNumber">4.2.17&nbsp; </span>Rasterization: colorWrite</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/rasterization:depthwrite" class="level3"><span class="tocNumber">4.2.18&nbsp; </span>Rasterization: depthWrite</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/rasterization:depthculling" class="level3"><span class="tocNumber">4.2.19&nbsp; </span>Rasterization: depthCulling</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/rasterization:doublesided" class="level3"><span class="tocNumber">4.2.20&nbsp; </span>Rasterization: doubleSided</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/lighting:shadowmultiplier" class="level3"><span class="tocNumber">4.2.21&nbsp; </span>Lighting: shadowMultiplier</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/lighting:clearcoatiorchange" class="level3"><span class="tocNumber">4.2.22&nbsp; </span>Lighting: clearCoatIorChange</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/lighting:multibounceambientocclusion" class="level3"><span class="tocNumber">4.2.23&nbsp; </span>Lighting: multiBounceAmbientOcclusion</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/lighting:specularambientocclusion" class="level3"><span class="tocNumber">4.2.24&nbsp; </span>Lighting: specularAmbientOcclusion</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/anti-aliasing:specularantialiasing" class="level3"><span class="tocNumber">4.2.25&nbsp; </span>Anti-aliasing: specularAntiAliasing</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/anti-aliasing:specularantialiasingvariance" class="level3"><span class="tocNumber">4.2.26&nbsp; </span>Anti-aliasing: specularAntiAliasingVariance</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/materialblock/anti-aliasing:specularantialiasingthreshold" class="level3"><span class="tocNumber">4.2.27&nbsp; </span>Anti-aliasing: specularAntiAliasingThreshold</a><br>
+&nbsp;&nbsp;<a href="#materialdefinitions/vertexblock" class="level2"><span class="tocNumber">4.3&nbsp; </span>Vertex block</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/vertexblock/materialvertexinputs" class="level3"><span class="tocNumber">4.3.1&nbsp; </span>Material vertex inputs</a><br>
+&nbsp;&nbsp;<a href="#materialdefinitions/fragmentblock" class="level2"><span class="tocNumber">4.4&nbsp; </span>Fragment block</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/fragmentblock/preparematerialfunction" class="level3"><span class="tocNumber">4.4.1&nbsp; </span>prepareMaterial function</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/fragmentblock/materialfragmentinputs" class="level3"><span class="tocNumber">4.4.2&nbsp; </span>Material fragment inputs</a><br>
+&nbsp;&nbsp;<a href="#materialdefinitions/shaderpublicapis" class="level2"><span class="tocNumber">4.5&nbsp; </span>Shader public APIs</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/shaderpublicapis/types" class="level3"><span class="tocNumber">4.5.1&nbsp; </span>Types</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/shaderpublicapis/math" class="level3"><span class="tocNumber">4.5.2&nbsp; </span>Math</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/shaderpublicapis/matrices" class="level3"><span class="tocNumber">4.5.3&nbsp; </span>Matrices</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/shaderpublicapis/frameconstants" class="level3"><span class="tocNumber">4.5.4&nbsp; </span>Frame constants</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/shaderpublicapis/vertexonly" class="level3"><span class="tocNumber">4.5.5&nbsp; </span>Vertex only</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#materialdefinitions/shaderpublicapis/fragmentonly" class="level3"><span class="tocNumber">4.5.6&nbsp; </span>Fragment only</a><br>
+<a href="#compilingmaterials" class="level1"><span class="tocNumber">5&nbsp; </span>Compiling materials</a><br>
+&nbsp;&nbsp;<a href="#compilingmaterials/shadervalidation" class="level2"><span class="tocNumber">5.1&nbsp; </span>Shader validation</a><br>
+&nbsp;&nbsp;<a href="#compilingmaterials/flags" class="level2"><span class="tocNumber">5.2&nbsp; </span>Flags</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#compilingmaterials/flags/—platform" class="level3"><span class="tocNumber">5.2.1&nbsp; </span>—platform</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#compilingmaterials/flags/—api" class="level3"><span class="tocNumber">5.2.2&nbsp; </span>—api</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#compilingmaterials/flags/—optimize-size" class="level3"><span class="tocNumber">5.2.3&nbsp; </span>—optimize-size</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#compilingmaterials/flags/—reflect" class="level3"><span class="tocNumber">5.2.4&nbsp; </span>—reflect</a><br>
+&nbsp;&nbsp;&nbsp;&nbsp;<a href="#compilingmaterials/flags/—variant-filter" class="level3"><span class="tocNumber">5.2.5&nbsp; </span>—variant-filter</a><br>
+<a href="#handlingcolors" class="level1"><span class="tocNumber">6&nbsp; </span>Handling colors</a><br>
+&nbsp;&nbsp;<a href="#handlingcolors/linearcolors" class="level2"><span class="tocNumber">6.1&nbsp; </span>Linear colors</a><br>
+&nbsp;&nbsp;<a href="#handlingcolors/pre-multipliedalpha" class="level2"><span class="tocNumber">6.2&nbsp; </span>Pre-multiplied alpha</a><br>
+</p></div><a class="target" name="about">&nbsp;</a><a class="target" name="about">&nbsp;</a><a class="target" name="toc1">&nbsp;</a><h1>About</h1>
 <p>
 
 
-This document is part of the <a href="https://github.com/google/filament">Filament project</a>. To report errors in this document please use the <a href="https://github.com/google/filament/issues">project&apos;s issue tracker</a>.
+This document is part of the <a href="https://github.com/google/filament">Filament project</a>. To report errors in this document please use the <a href="https://github.com/google/filament/issues">project's issue tracker</a>.
 
 </p>
-<a class="target" name="authors">&#xA0;</a><a class="target" name="about/authors">&#xA0;</a><a class="target" name="toc1.1">&#xA0;</a><h2>Authors</h2>
+<a class="target" name="authors">&nbsp;</a><a class="target" name="about/authors">&nbsp;</a><a class="target" name="toc1.1">&nbsp;</a><h2>Authors</h2>
 <p>
 
 
@@ -140,7 +140,7 @@ This document is part of the <a href="https://github.com/google/filament">Filame
 <li class="minus"><a href="https://github.com/pixelflinger">Mathias Agopian</a>, <a href="https://twitter.com/darthmoosious">@darthmoosious</a></li></ul>
 
 <p></p>
-<a class="target" name="overview">&#xA0;</a><a class="target" name="overview">&#xA0;</a><a class="target" name="toc2">&#xA0;</a><h1>Overview</h1>
+<a class="target" name="overview">&nbsp;</a><a class="target" name="overview">&nbsp;</a><a class="target" name="toc2">&nbsp;</a><h1>Overview</h1>
 <p>
 
 
@@ -149,7 +149,7 @@ material system that you can use to create both simple and complex materials. Th
 describes all the features available to materials and how to create your own material.
 
 </p>
-<a class="target" name="coreconcepts">&#xA0;</a><a class="target" name="overview/coreconcepts">&#xA0;</a><a class="target" name="toc2.1">&#xA0;</a><h2>Core concepts</h2>
+<a class="target" name="coreconcepts">&nbsp;</a><a class="target" name="overview/coreconcepts">&nbsp;</a><a class="target" name="toc2.1">&nbsp;</a><h2>Core concepts</h2>
 <p>
 
 
@@ -184,10 +184,10 @@ describes all the features available to materials and how to create your own mat
 
 </p></dd><dt>Material instance</dt><dd><p>    A material instance is a reference to a material and a set of values for the different values of
     that material. Material instances are not covered in this document as they are created and
-    manipulated directly from code using Filament&apos;s APIs.
+    manipulated directly from code using Filament's APIs.
 
 </p></dd></dl><p></p>
-<a class="target" name="materialmodels">&#xA0;</a><a class="target" name="materialmodels">&#xA0;</a><a class="target" name="toc3">&#xA0;</a><h1>Material models</h1>
+<a class="target" name="materialmodels">&nbsp;</a><a class="target" name="materialmodels">&nbsp;</a><a class="target" name="toc3">&nbsp;</a><h1>Material models</h1>
 <p>
 
 
@@ -207,11 +207,11 @@ Filament materials can use one of the following material models:
 <li class="minus">Specular glossiness (legacy)</li></ul>
 
 <p></p>
-<a class="target" name="litmodel">&#xA0;</a><a class="target" name="materialmodels/litmodel">&#xA0;</a><a class="target" name="toc3.1">&#xA0;</a><h2>Lit model</h2>
+<a class="target" name="litmodel">&nbsp;</a><a class="target" name="materialmodels/litmodel">&nbsp;</a><a class="target" name="toc3.1">&nbsp;</a><h2>Lit model</h2>
 <p>
 
 
-The lit model is Filament&apos;s standard material model. This physically-based shading model was
+The lit model is Filament's standard material model. This physically-based shading model was
 designed after to offer good interoperability with other common tools and engines such as <em class="underscore">Unity 5</em>,
 <em class="underscore">Unreal Engine 4</em>, <em class="underscore">Substance Designer</em> or <em class="underscore">Marmoset Toolbag</em>.
 
@@ -223,7 +223,7 @@ or metallic surfaces (<em class="underscore">conductors</em>).
 </p><p>
 
 The appearance of a material using the standard model is controlled using the properties described
-in <a href="#table_standardproperties">table&#xA0;1</a>.
+in <a href="#table_standardproperties">table&nbsp;1</a>.
 
 </p><p>
 
@@ -250,35 +250,35 @@ in <a href="#table_standardproperties">table&#xA0;1</a>.
 <tr><td style="text-align:right"> <strong class="asterisk">absorption</strong> </td><td style="text-align:left"> Absorption factor for refractive objects </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">microThickness</strong> </td><td style="text-align:left"> Thickness of the thin layer of refractive objects </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">thickness</strong> </td><td style="text-align:left"> Thickness of the solid volume of refractive objects </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_standardproperties">&#xA0;</a><b style="font-style:normal;">Table&#xA0;1:</b> Properties of the standard model</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_standardproperties">&nbsp;</a><b style="font-style:normal;">Table&nbsp;1:</b> Properties of the standard model</div></div>
 
 <p></p><p>
 
-The type and range of each property is described in <a href="#table_standardpropertiestypes">table&#xA0;2</a>.
+The type and range of each property is described in <a href="#table_standardpropertiestypes">table&nbsp;2</a>.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Property </th><th style="text-align:center"> Type </th><th style="text-align:center"> Range </th><th style="text-align:left"> Note </th></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">baseColor</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Pre-multiplied linear RGB </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">metallic</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Should be 0 or 1 </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">roughness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &#xA0; </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">roughness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &nbsp; </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">reflectance</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Prefer values &gt; 0.35 </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">sheenColor</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Linear RGB </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">sheenRoughness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &#xA0; </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">sheenRoughness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &nbsp; </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">clearCoat</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Should be 0 or 1 </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">clearCoatRoughness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &#xA0; </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">anisotropy</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [&#x2212;1..1] </td><td style="text-align:left"> Anisotropy is in the tangent direction when this value is positive </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">clearCoatRoughness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &nbsp; </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">anisotropy</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [−1..1] </td><td style="text-align:left"> Anisotropy is in the tangent direction when this value is positive </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">anisotropyDirection</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Linear RGB, encodes a direction vector in tangent space </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">ambientOcclusion</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &#xA0; </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">ambientOcclusion</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &nbsp; </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">normal</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Linear RGB, encodes a direction vector in tangent space </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">bentNormal</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Linear RGB, encodes a direction vector in tangent space </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">clearCoatNormal</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Linear RGB, encodes a direction vector in tangent space </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">emissive</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:center"> rgb=[0..n], a=[0..1] </td><td style="text-align:left"> Linear RGB intensity in nits, alpha encodes the exposure weight </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">postLightingColor</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Pre-multiplied linear RGB </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">ior</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [1..n] </td><td style="text-align:left"> Optional, usually deduced from the reflectance </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">transmission</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &#xA0; </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">absorption</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..n] </td><td style="text-align:left"> &#xA0; </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">microThickness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..n] </td><td style="text-align:left"> &#xA0; </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">thickness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..n] </td><td style="text-align:left"> &#xA0; </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_standardpropertiestypes">&#xA0;</a><b style="font-style:normal;">Table&#xA0;2:</b> Range and type of the standard model&apos;s properties</div></div>
+<tr><td style="text-align:right"> <strong class="asterisk">transmission</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> &nbsp; </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">absorption</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..n] </td><td style="text-align:left"> &nbsp; </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">microThickness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..n] </td><td style="text-align:left"> &nbsp; </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">thickness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..n] </td><td style="text-align:left"> &nbsp; </td></tr>
+</tbody></table><div class="tablecaption"><a class="target" name="table_standardpropertiestypes">&nbsp;</a><b style="font-style:normal;">Table&nbsp;2:</b> Range and type of the standard model's properties</div></div>
 
 <p></p><p>
 
@@ -316,7 +316,7 @@ The type and range of each property is described in <a href="#table_standardprop
 <p></p><p>
 
     The index of refraction (IOR) and the reflectance represent the same physical attribute,
-    therefore they don&apos;t need to be both specified. Typically, only the reflectance is specified
+    therefore they don't need to be both specified. Typically, only the reflectance is specified
     and the IOR is deduced automatically. When only the IOR is specified, the reflectance is then
     deduced automatically. It is possible to specify both, in which case their values are kept
     as-is, which can lead to physically impossible materials, however, this might be desirable
@@ -336,7 +336,7 @@ The type and range of each property is described in <a href="#table_standardprop
     used when <code>refractionType</code> is set to <code>thin</code>.</p></div>
 
 <p></p>
-<a class="target" name="basecolor">&#xA0;</a><a class="target" name="materialmodels/litmodel/basecolor">&#xA0;</a><a class="target" name="toc3.1.1">&#xA0;</a><h3>Base color</h3>
+<a class="target" name="basecolor">&nbsp;</a><a class="target" name="materialmodels/litmodel/basecolor">&nbsp;</a><a class="target" name="toc3.1.1">&nbsp;</a><h3>Base color</h3>
 <p>
 
 
@@ -349,40 +349,40 @@ explained in the <a href="#metallic">Metallic</a> section.
 </p><dl><dt>Non-metals (dielectrics)</dt><dd><p>  Defines the diffuse color of the surface. Real-world values are typically found in the range
   \([10..240]\) if the value is encoded between 0 and 255, or in the range \([0.04..0.94]\) between 0
   and 1. Several examples of base colors for non-metallic surfaces can be found in
-  <a href="#table_basecolorsdielectrics">table&#xA0;3</a>.
+  <a href="#table_basecolorsdielectrics">table&nbsp;3</a>.
 
 </p></dd></dl><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Metal </th><th style="text-align:center"> sRGB </th><th style="text-align:center"> Hexadecimal </th><th style="text-align:left"> Color </th></tr>
-<tr><td style="text-align:right"> Coal </td><td style="text-align:center"> 0.19, 0.19, 0.19 </td><td style="text-align:center"> #323232 </td><td style="text-align:left"> <div style="background-color: #323232; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Rubber </td><td style="text-align:center"> 0.21, 0.21, 0.21 </td><td style="text-align:center"> #353535 </td><td style="text-align:left"> <div style="background-color: #353535; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Mud </td><td style="text-align:center"> 0.33, 0.24, 0.19 </td><td style="text-align:center"> #553d31 </td><td style="text-align:left"> <div style="background-color: #875c3c; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Wood </td><td style="text-align:center"> 0.53, 0.36, 0.24 </td><td style="text-align:center"> #875c3c </td><td style="text-align:left"> <div style="background-color: #c4c6c6; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Vegetation </td><td style="text-align:center"> 0.48, 0.51, 0.31 </td><td style="text-align:center"> #7b824e </td><td style="text-align:left"> <div style="background-color: #7b824e; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Brick </td><td style="text-align:center"> 0.58, 0.49, 0.46 </td><td style="text-align:center"> #947d75 </td><td style="text-align:left"> <div style="background-color: #947d75; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Sand </td><td style="text-align:center"> 0.69, 0.66, 0.52 </td><td style="text-align:center"> #b1a884 </td><td style="text-align:left"> <div style="background-color: #b1a884; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Concrete </td><td style="text-align:center"> 0.75, 0.75, 0.73 </td><td style="text-align:center"> #c0bfbb </td><td style="text-align:left"> <div style="background-color: #c0bfbb; width: 60px">&#xA0;</div> </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_basecolorsdielectrics">&#xA0;</a><b style="font-style:normal;">Table&#xA0;3:</b> <code>baseColor</code> for common non-metals</div></div>
+<tr><td style="text-align:right"> Coal </td><td style="text-align:center"> 0.19, 0.19, 0.19 </td><td style="text-align:center"> #323232 </td><td style="text-align:left"> <div style="background-color: #323232; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Rubber </td><td style="text-align:center"> 0.21, 0.21, 0.21 </td><td style="text-align:center"> #353535 </td><td style="text-align:left"> <div style="background-color: #353535; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Mud </td><td style="text-align:center"> 0.33, 0.24, 0.19 </td><td style="text-align:center"> #553d31 </td><td style="text-align:left"> <div style="background-color: #875c3c; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Wood </td><td style="text-align:center"> 0.53, 0.36, 0.24 </td><td style="text-align:center"> #875c3c </td><td style="text-align:left"> <div style="background-color: #c4c6c6; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Vegetation </td><td style="text-align:center"> 0.48, 0.51, 0.31 </td><td style="text-align:center"> #7b824e </td><td style="text-align:left"> <div style="background-color: #7b824e; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Brick </td><td style="text-align:center"> 0.58, 0.49, 0.46 </td><td style="text-align:center"> #947d75 </td><td style="text-align:left"> <div style="background-color: #947d75; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Sand </td><td style="text-align:center"> 0.69, 0.66, 0.52 </td><td style="text-align:center"> #b1a884 </td><td style="text-align:left"> <div style="background-color: #b1a884; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Concrete </td><td style="text-align:center"> 0.75, 0.75, 0.73 </td><td style="text-align:center"> #c0bfbb </td><td style="text-align:left"> <div style="background-color: #c0bfbb; width: 60px">&nbsp;</div> </td></tr>
+</tbody></table><div class="tablecaption"><a class="target" name="table_basecolorsdielectrics">&nbsp;</a><b style="font-style:normal;">Table&nbsp;3:</b> <code>baseColor</code> for common non-metals</div></div>
 
 <p></p><p>
 
 </p><dl><dt>Metals (conductors)</dt><dd><p>  Defines the specular color of the surface. Real-world values are typically found in the range
   \([170..255]\) if the value is encoded between 0 and 255, or in the range \([0.66..1.0]\) between 0 and
-  1. Several examples of base colors for metallic surfaces can be found in <a href="#table_basecolorsconductors">table&#xA0;4</a>.
+  1. Several examples of base colors for metallic surfaces can be found in <a href="#table_basecolorsconductors">table&nbsp;4</a>.
 
 </p></dd></dl><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Metal </th><th style="text-align:center"> sRGB </th><th style="text-align:center"> Hexadecimal </th><th style="text-align:left"> Color </th></tr>
-<tr><td style="text-align:right"> Silver </td><td style="text-align:center"> 0.97, 0.96, 0.91 </td><td style="text-align:center"> #f7f4e8 </td><td style="text-align:left"> <div style="background-color: #faf9f5; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Aluminum </td><td style="text-align:center"> 0.91, 0.92, 0.92 </td><td style="text-align:center"> #e8eaea </td><td style="text-align:left"> <div style="background-color: #f4f5f5; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Titanium </td><td style="text-align:center"> 0.76, 0.73, 0.69 </td><td style="text-align:center"> #c1baaf </td><td style="text-align:left"> <div style="background-color: #cec8c2; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Iron </td><td style="text-align:center"> 0.77, 0.78, 0.78 </td><td style="text-align:center"> #c4c6c6 </td><td style="text-align:left"> <div style="background-color: #c0bdba; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Platinum </td><td style="text-align:center"> 0.83, 0.81, 0.78 </td><td style="text-align:center"> #d3cec6 </td><td style="text-align:left"> <div style="background-color: #d6d1c8; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Gold </td><td style="text-align:center"> 1.00, 0.85, 0.57 </td><td style="text-align:center"> #ffd891 </td><td style="text-align:left"> <div style="background-color: #fedc9d; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Brass </td><td style="text-align:center"> 0.98, 0.90, 0.59 </td><td style="text-align:center"> #f9e596 </td><td style="text-align:left"> <div style="background-color: #f4e4ad; width: 60px">&#xA0;</div> </td></tr>
-<tr><td style="text-align:right"> Copper </td><td style="text-align:center"> 0.97, 0.74, 0.62 </td><td style="text-align:center"> #f7bc9e </td><td style="text-align:left"> <div style="background-color: #fbd8b8; width: 60px">&#xA0;</div> </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_basecolorsconductors">&#xA0;</a><b style="font-style:normal;">Table&#xA0;4:</b> <code>baseColor</code> for common metals</div></div>
+<tr><td style="text-align:right"> Silver </td><td style="text-align:center"> 0.97, 0.96, 0.91 </td><td style="text-align:center"> #f7f4e8 </td><td style="text-align:left"> <div style="background-color: #faf9f5; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Aluminum </td><td style="text-align:center"> 0.91, 0.92, 0.92 </td><td style="text-align:center"> #e8eaea </td><td style="text-align:left"> <div style="background-color: #f4f5f5; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Titanium </td><td style="text-align:center"> 0.76, 0.73, 0.69 </td><td style="text-align:center"> #c1baaf </td><td style="text-align:left"> <div style="background-color: #cec8c2; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Iron </td><td style="text-align:center"> 0.77, 0.78, 0.78 </td><td style="text-align:center"> #c4c6c6 </td><td style="text-align:left"> <div style="background-color: #c0bdba; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Platinum </td><td style="text-align:center"> 0.83, 0.81, 0.78 </td><td style="text-align:center"> #d3cec6 </td><td style="text-align:left"> <div style="background-color: #d6d1c8; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Gold </td><td style="text-align:center"> 1.00, 0.85, 0.57 </td><td style="text-align:center"> #ffd891 </td><td style="text-align:left"> <div style="background-color: #fedc9d; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Brass </td><td style="text-align:center"> 0.98, 0.90, 0.59 </td><td style="text-align:center"> #f9e596 </td><td style="text-align:left"> <div style="background-color: #f4e4ad; width: 60px">&nbsp;</div> </td></tr>
+<tr><td style="text-align:right"> Copper </td><td style="text-align:center"> 0.97, 0.74, 0.62 </td><td style="text-align:center"> #f7bc9e </td><td style="text-align:left"> <div style="background-color: #fbd8b8; width: 60px">&nbsp;</div> </td></tr>
+</tbody></table><div class="tablecaption"><a class="target" name="table_basecolorsconductors">&nbsp;</a><b style="font-style:normal;">Table&nbsp;4:</b> <code>baseColor</code> for common metals</div></div>
 
 <p></p>
-<a class="target" name="metallic">&#xA0;</a><a class="target" name="materialmodels/litmodel/metallic">&#xA0;</a><a class="target" name="toc3.1.2">&#xA0;</a><h3>Metallic</h3>
+<a class="target" name="metallic">&nbsp;</a><a class="target" name="materialmodels/litmodel/metallic">&nbsp;</a><a class="target" name="toc3.1.2">&nbsp;</a><h3>Metallic</h3>
 <p>
 
 
@@ -400,65 +400,65 @@ color). Metallic surfaces do not have any diffuse reflection and chromatic specu
 
 </p><p>
 
-The effect of <code>metallic</code> is shown in <a href="#figure_metallicproperty">figure&#xA0;1</a> (click on the image to see a
+The effect of <code>metallic</code> is shown in <a href="#figure_metallicproperty">figure&nbsp;1</a> (click on the image to see a
 larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/metallic.png" target="_blank"><img class="markdeep" src="images/materials/metallic.png"></a><div class="imagecaption"><a class="target" name="figure_metallicproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;1:</b> <code>metallic</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/metallic.png" target="_blank"><img class="markdeep" src="images/materials/metallic.png"></a><div class="imagecaption"><a class="target" name="figure_metallicproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;1:</b> <code>metallic</code> varying from 0.0
 (left) to 1.0 (right)</div></div></center>
 
 <p></p>
-<a class="target" name="roughness">&#xA0;</a><a class="target" name="materialmodels/litmodel/roughness">&#xA0;</a><a class="target" name="toc3.1.3">&#xA0;</a><h3>Roughness</h3>
+<a class="target" name="roughness">&nbsp;</a><a class="target" name="materialmodels/litmodel/roughness">&nbsp;</a><a class="target" name="toc3.1.3">&nbsp;</a><h3>Roughness</h3>
 <p>
 
 
 The <code>roughness</code> property controls the perceived smoothness of the surface. When <code>roughness</code> is set
-to 0, the surface is perfectly smooth and highly glossy. The rougher a surface is, the &#x201C;blurrier&#x201D;
+to 0, the surface is perfectly smooth and highly glossy. The rougher a surface is, the “blurrier”
 the reflections are. This property is often called <em class="underscore">glossiness</em> in other engines and tools, and is
 simply the opposite of the roughness (<code>roughness = 1 - glossiness</code>).
 
 </p>
-<a class="target" name="non-metals">&#xA0;</a><a class="target" name="materialmodels/litmodel/non-metals">&#xA0;</a><a class="target" name="toc3.1.4">&#xA0;</a><h3>Non-metals</h3>
+<a class="target" name="non-metals">&nbsp;</a><a class="target" name="materialmodels/litmodel/non-metals">&nbsp;</a><a class="target" name="toc3.1.4">&nbsp;</a><h3>Non-metals</h3>
 <p>
 
 
-The effect of <code>roughness</code> on non-metallic surfaces is shown in <a href="#figure_roughnessproperty">figure&#xA0;2</a> (click
+The effect of <code>roughness</code> on non-metallic surfaces is shown in <a href="#figure_roughnessproperty">figure&nbsp;2</a> (click
 on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/dielectric_roughness.png" target="_blank"><img class="markdeep" src="images/materials/dielectric_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_roughnessproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;2:</b> Dielectric <code>roughness</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/dielectric_roughness.png" target="_blank"><img class="markdeep" src="images/materials/dielectric_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_roughnessproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;2:</b> Dielectric <code>roughness</code> varying from 0.0
 (left) to 1.0 (right)</div></div></center>
 
 <p></p>
-<a class="target" name="metals">&#xA0;</a><a class="target" name="materialmodels/litmodel/metals">&#xA0;</a><a class="target" name="toc3.1.5">&#xA0;</a><h3>Metals</h3>
+<a class="target" name="metals">&nbsp;</a><a class="target" name="materialmodels/litmodel/metals">&nbsp;</a><a class="target" name="toc3.1.5">&nbsp;</a><h3>Metals</h3>
 <p>
 
 
-The effect of <code>roughness</code> on metallic surfaces is shown in <a href="#figure_roughnessconductorproperty">figure&#xA0;3</a>
+The effect of <code>roughness</code> on metallic surfaces is shown in <a href="#figure_roughnessconductorproperty">figure&nbsp;3</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/conductor_roughness.png" target="_blank"><img class="markdeep" src="images/materials/conductor_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_roughnessconductorproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;3:</b> Conductor <code>roughness</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/conductor_roughness.png" target="_blank"><img class="markdeep" src="images/materials/conductor_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_roughnessconductorproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;3:</b> Conductor <code>roughness</code> varying from 0.0
 (left) to 1.0 (right)</div></div></center>
 
 <p></p>
-<a class="target" name="refraction">&#xA0;</a><a class="target" name="materialmodels/litmodel/refraction">&#xA0;</a><a class="target" name="toc3.1.6">&#xA0;</a><h3>Refraction</h3>
+<a class="target" name="refraction">&nbsp;</a><a class="target" name="materialmodels/litmodel/refraction">&nbsp;</a><a class="target" name="toc3.1.6">&nbsp;</a><h3>Refraction</h3>
 <p>
 
 
 When refraction through an object is enabled (using a <code>refractonType</code> of <code>thin</code> or <code>solid</code>), the
-<code>roughness</code> property will also affect the refractions, as shown in <a href="#figure_roughnessrefractionproperty">figure&#xA0;4</a> (click on the image to see a larger version).
+<code>roughness</code> property will also affect the refractions, as shown in <a href="#figure_roughnessrefractionproperty">figure&nbsp;4</a> (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/refraction_roughness.png" target="_blank"><img class="markdeep" src="images/materials/refraction_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_roughnessrefractionproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;4:</b> Refractive sphere with <code>roughness</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/refraction_roughness.png" target="_blank"><img class="markdeep" src="images/materials/refraction_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_roughnessrefractionproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;4:</b> Refractive sphere with <code>roughness</code> varying from 0.0
  (left) to 1.0 (right)</div></div></center>
 
 <p></p>
-<a class="target" name="reflectance">&#xA0;</a><a class="target" name="materialmodels/litmodel/reflectance">&#xA0;</a><a class="target" name="toc3.1.7">&#xA0;</a><h3>Reflectance</h3>
+<a class="target" name="reflectance">&nbsp;</a><a class="target" name="materialmodels/litmodel/reflectance">&nbsp;</a><a class="target" name="toc3.1.7">&nbsp;</a><h3>Reflectance</h3>
 <p>
 
 
@@ -470,25 +470,25 @@ be avoided as no real-world materials have such low reflectance.
 
 </p><p>
 
-The effect of <code>reflectance</code> on non-metallic surfaces is shown in <a href="#figure_reflectanceproperty">figure&#xA0;5</a>
+The effect of <code>reflectance</code> on non-metallic surfaces is shown in <a href="#figure_reflectanceproperty">figure&nbsp;5</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/reflectance.png" target="_blank"><img class="markdeep" src="images/materials/reflectance.png"></a><div class="imagecaption"><a class="target" name="figure_reflectanceproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;5:</b> <code>reflectance</code> varying from 0.0 (left)
+</p><center><div class="image" style=""><a href="images/materials/reflectance.png" target="_blank"><img class="markdeep" src="images/materials/reflectance.png"></a><div class="imagecaption"><a class="target" name="figure_reflectanceproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;5:</b> <code>reflectance</code> varying from 0.0 (left)
 to 1.0 (right)</div></div></center>
 
 <p></p><p>
 
-<a href="#figure_reflectance">Figure&#xA0;6</a> shows common values and how they relate to the mapping function.
+<a href="#figure_reflectance">Figure&nbsp;6</a> shows common values and how they relate to the mapping function.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/diagram_reflectance.png" target="_blank"><img class="markdeep" src="images/diagram_reflectance.png"></a><div class="imagecaption"><a class="target" name="figure_reflectance">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;6:</b> Common reflectance values</div></div></center>
+</p><center><div class="image" style=""><a href="images/diagram_reflectance.png" target="_blank"><img class="markdeep" src="images/diagram_reflectance.png"></a><div class="imagecaption"><a class="target" name="figure_reflectance">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;6:</b> Common reflectance values</div></div></center>
 
 <p></p><p>
 
-<a href="#table_commonmatreflectance">Table&#xA0;5</a> describes acceptable reflectance values for various types of materials
+<a href="#table_commonmatreflectance">Table&nbsp;5</a> describes acceptable reflectance values for various types of materials
 (no real world material has a value under 2%).
 
 </p><p>
@@ -506,7 +506,7 @@ to 1.0 (right)</div></div></center>
 <tr><td style="text-align:right"> Hair </td><td style="text-align:left"> 4.6% </td><td style="text-align:left"> 1.55 </td><td style="text-align:left"> 0.54 </td></tr>
 <tr><td style="text-align:right"> Teeth </td><td style="text-align:left"> 5.8% </td><td style="text-align:left"> 1.63 </td><td style="text-align:left"> 0.6 </td></tr>
 <tr><td style="text-align:right"> Default value </td><td style="text-align:left"> 4% </td><td style="text-align:left"> 1.5 </td><td style="text-align:left"> 0.5 </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_commonmatreflectance">&#xA0;</a><b style="font-style:normal;">Table&#xA0;5:</b> Reflectance of common materials</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_commonmatreflectance">&nbsp;</a><b style="font-style:normal;">Table&nbsp;5:</b> Reflectance of common materials</div></div>
 
 <p></p><p>
 
@@ -527,7 +527,7 @@ See section  <a href="#toc3.1.20">3.1.20</a> for more information about the <cod
 indices.
 
 </p>
-<a class="target" name="sheencolor">&#xA0;</a><a class="target" name="materialmodels/litmodel/sheencolor">&#xA0;</a><a class="target" name="toc3.1.8">&#xA0;</a><h3>Sheen color</h3>
+<a class="target" name="sheencolor">&nbsp;</a><a class="target" name="materialmodels/litmodel/sheencolor">&nbsp;</a><a class="target" name="toc3.1.8">&nbsp;</a><h3>Sheen color</h3>
 <p>
 
 
@@ -542,12 +542,12 @@ section  <a href="#toc3.3">3.3</a> for more information about cloth and fabric m
 
 </p><p>
 
-The effect of <code>sheenColor</code> is shown in <a href="#figure_materialsheencolor">figure&#xA0;7</a>
+The effect of <code>sheenColor</code> is shown in <a href="#figure_materialsheencolor">figure&nbsp;7</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_sheen_color.png" target="_blank"><img class="markdeep" src="images/screenshot_sheen_color.png"></a><div class="imagecaption"><a class="target" name="figure_materialsheencolor">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;7:</b> Different sheen colors</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_sheen_color.png" target="_blank"><img class="markdeep" src="images/screenshot_sheen_color.png"></a><div class="imagecaption"><a class="target" name="figure_materialsheencolor">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;7:</b> Different sheen colors</div></div></center>
 
 <p></p><p>
 
@@ -556,7 +556,7 @@ The effect of <code>sheenColor</code> is shown in <a href="#figure_materialsheen
     model described in section  <a href="#toc3.3">3.3</a>.</div>
 
 <p></p>
-<a class="target" name="sheenroughness">&#xA0;</a><a class="target" name="materialmodels/litmodel/sheenroughness">&#xA0;</a><a class="target" name="toc3.1.9">&#xA0;</a><h3>Sheen roughness</h3>
+<a class="target" name="sheenroughness">&nbsp;</a><a class="target" name="materialmodels/litmodel/sheenroughness">&nbsp;</a><a class="target" name="toc3.1.9">&nbsp;</a><h3>Sheen roughness</h3>
 <p>
 
 
@@ -565,17 +565,17 @@ sheen layer.
 
 </p><p>
 
-The effect of <code>sheenRoughness</code> on a rough metal is shown in <a href="#figure_sheenroughnessproperty">figure&#xA0;8</a>
+The effect of <code>sheenRoughness</code> on a rough metal is shown in <a href="#figure_sheenroughnessproperty">figure&nbsp;8</a>
 (click on the image to see a larger version). In this picture, the base layer is a dark blue, with
 <code>metallic</code> set to <code>0.0</code> and <code>roughness</code> set to <code>1.0</code>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/sheen_roughness.png" target="_blank"><img class="markdeep" src="images/materials/sheen_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_sheenroughnessproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;8:</b> <code>sheenRoughness</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/sheen_roughness.png" target="_blank"><img class="markdeep" src="images/materials/sheen_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_sheenroughnessproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;8:</b> <code>sheenRoughness</code> varying from 0.0
 (left) to 1.0 (right)</div></div></center>
 
 <p></p>
-<a class="target" name="clearcoat">&#xA0;</a><a class="target" name="materialmodels/litmodel/clearcoat">&#xA0;</a><a class="target" name="toc3.1.10">&#xA0;</a><h3>Clear coat</h3>
+<a class="target" name="clearcoat">&nbsp;</a><a class="target" name="materialmodels/litmodel/clearcoat">&nbsp;</a><a class="target" name="toc3.1.10">&nbsp;</a><h3>Clear coat</h3>
 <p>
 
 
@@ -590,36 +590,36 @@ will always be isotropic and dielectric.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_carbon_fiber.png" target="_blank"><img class="markdeep" src="images/material_carbon_fiber.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoat">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;9:</b> Comparison of a carbon-fiber material under the standard material model
+</p><center><div class="image" style=""><a href="images/material_carbon_fiber.png" target="_blank"><img class="markdeep" src="images/material_carbon_fiber.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoat">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;9:</b> Comparison of a carbon-fiber material under the standard material model
 (left) and the clear coat model (right)</div></div></center>
 
 <p></p><p>
 
 The <code>clearCoat</code> property controls the strength of the clear coat layer. This should be treated as a
 binary value, set to either 0 or 1. Intermediate values are useful to control transitions between
-parts of the surface that have a clear coat layers and parts that don&apos;t.
+parts of the surface that have a clear coat layers and parts that don't.
 
 </p><p>
 
-The effect of <code>clearCoat</code> on a rough metal is shown in <a href="#figure_clearcoatproperty">figure&#xA0;10</a>
+The effect of <code>clearCoat</code> on a rough metal is shown in <a href="#figure_clearcoatproperty">figure&nbsp;10</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/clear_coat.png" target="_blank"><img class="markdeep" src="images/materials/clear_coat.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoatproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;10:</b> <code>clearCoat</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/clear_coat.png" target="_blank"><img class="markdeep" src="images/materials/clear_coat.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoatproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;10:</b> <code>clearCoat</code> varying from 0.0
 (left) to 1.0 (right)</div></div></center>
 
 <p></p><p>
 
 </p><div class="admonition warning">The clear coat layer effectively doubles the cost of specular computations. Do not assign a
-    value, even 0.0, to the clear coat property if you don&apos;t need this second layer.</div>
+    value, even 0.0, to the clear coat property if you don't need this second layer.</div>
 
 <p></p><p>
 
 </p><div class="admonition note">The clear coat layer is added on top of the sheen layer if present.</div>
 
 <p></p>
-<a class="target" name="clearcoatroughness">&#xA0;</a><a class="target" name="materialmodels/litmodel/clearcoatroughness">&#xA0;</a><a class="target" name="toc3.1.11">&#xA0;</a><h3>Clear coat roughness</h3>
+<a class="target" name="clearcoatroughness">&nbsp;</a><a class="target" name="materialmodels/litmodel/clearcoatroughness">&nbsp;</a><a class="target" name="toc3.1.11">&nbsp;</a><h3>Clear coat roughness</h3>
 <p>
 
 
@@ -628,16 +628,16 @@ clear coat layer.
 
 </p><p>
 
-The effect of <code>clearCoatRoughness</code> on a rough metal is shown in <a href="#figure_clearcoatroughnessproperty">figure&#xA0;11</a>
+The effect of <code>clearCoatRoughness</code> on a rough metal is shown in <a href="#figure_clearcoatroughnessproperty">figure&nbsp;11</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/clear_coat_roughness.png" target="_blank"><img class="markdeep" src="images/materials/clear_coat_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoatroughnessproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;11:</b> <code>clearCoatRoughness</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/clear_coat_roughness.png" target="_blank"><img class="markdeep" src="images/materials/clear_coat_roughness.png"></a><div class="imagecaption"><a class="target" name="figure_clearcoatroughnessproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;11:</b> <code>clearCoatRoughness</code> varying from 0.0
 (left) to 1.0 (right)</div></div></center>
 
 <p></p>
-<a class="target" name="anisotropy">&#xA0;</a><a class="target" name="materialmodels/litmodel/anisotropy">&#xA0;</a><a class="target" name="toc3.1.12">&#xA0;</a><h3>Anisotropy</h3>
+<a class="target" name="anisotropy">&nbsp;</a><a class="target" name="materialmodels/litmodel/anisotropy">&nbsp;</a><a class="target" name="toc3.1.12">&nbsp;</a><h3>Anisotropy</h3>
 <p>
 
 
@@ -647,37 +647,37 @@ model by using the <code>anisotropy</code> property.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_anisotropic.png" target="_blank"><img class="markdeep" src="images/material_anisotropic.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropic">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;12:</b> Comparison of isotropic material
+</p><center><div class="image" style=""><a href="images/material_anisotropic.png" target="_blank"><img class="markdeep" src="images/material_anisotropic.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropic">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;12:</b> Comparison of isotropic material
 (left) and anistropic material (right)</div></div></center>
 
 <p></p><p>
 
-The effect of <code>anisotropy</code> on a rough metal is shown in <a href="#figure_anisotropyproperty">figure&#xA0;13</a>
+The effect of <code>anisotropy</code> on a rough metal is shown in <a href="#figure_anisotropyproperty">figure&nbsp;13</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/anisotropy.png" target="_blank"><img class="markdeep" src="images/materials/anisotropy.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropyproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;13:</b> <code>anisotropy</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/anisotropy.png" target="_blank"><img class="markdeep" src="images/materials/anisotropy.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropyproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;13:</b> <code>anisotropy</code> varying from 0.0
 (left) to 1.0 (right)</div></div></center>
 
 <p></p><p>
 
-The <a href="#figure_anisotropydir">figure&#xA0;14</a> below shows how the direction of the anisotropic highlights can be
+The <a href="#figure_anisotropydir">figure&nbsp;14</a> below shows how the direction of the anisotropic highlights can be
 controlled by using either positive or negative values: positive values define anisotropy in the
 tangent direction and negative values in the bitangent direction.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_anisotropy_direction.png" target="_blank"><img class="markdeep" src="images/screenshot_anisotropy_direction.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropydir">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;14:</b> Positive (left) vs negative
+</p><center><div class="image" style=""><a href="images/screenshot_anisotropy_direction.png" target="_blank"><img class="markdeep" src="images/screenshot_anisotropy_direction.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropydir">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;14:</b> Positive (left) vs negative
 (right) <code>anisotropy</code> values</div></div></center>
 
 <p></p><p>
 
 </p><div class="admonition tip">The anisotropic material model is slightly more expensive than the standard material model. Do
-    not assign a value (even 0.0) to the <code>anisotropy</code> property if you don&apos;t need anisotropy.</div>
+    not assign a value (even 0.0) to the <code>anisotropy</code> property if you don't need anisotropy.</div>
 
 <p></p>
-<a class="target" name="anisotropydirection">&#xA0;</a><a class="target" name="materialmodels/litmodel/anisotropydirection">&#xA0;</a><a class="target" name="toc3.1.13">&#xA0;</a><h3>Anisotropy direction</h3>
+<a class="target" name="anisotropydirection">&nbsp;</a><a class="target" name="materialmodels/litmodel/anisotropydirection">&nbsp;</a><a class="target" name="toc3.1.13">&nbsp;</a><h3>Anisotropy direction</h3>
 <p>
 
 
@@ -687,25 +687,25 @@ come from a texture, encoding the directions local to the surface.
 
 </p><p>
 
-The effect of <code>anisotropyDirection</code> on a metal is shown in <a href="#figure_anisotropydirectionproperty">figure&#xA0;16</a>
+The effect of <code>anisotropyDirection</code> on a metal is shown in <a href="#figure_anisotropydirectionproperty">figure&nbsp;16</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_anisotropy.png" target="_blank"><img class="markdeep" src="images/screenshot_anisotropy.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropydirectionproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;15:</b> Anisotropic metal rendered
+</p><center><div class="image" style=""><a href="images/screenshot_anisotropy.png" target="_blank"><img class="markdeep" src="images/screenshot_anisotropy.png"></a><div class="imagecaption"><a class="target" name="figure_anisotropydirectionproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;15:</b> Anisotropic metal rendered
 with a direction map</div></div></center>
 
 <p></p><p>
 
-The result shown in <a href="#figure_anisotropydirectionproperty">figure&#xA0;16</a> was obtained using the direction map shown
-in <a href="#figure_anisotropydirectionproperty">figure&#xA0;16</a>.
+The result shown in <a href="#figure_anisotropydirectionproperty">figure&nbsp;16</a> was obtained using the direction map shown
+in <a href="#figure_anisotropydirectionproperty">figure&nbsp;16</a>.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_anisotropy_map.jpg" target="_blank"><img class="markdeep" src="images/screenshot_anisotropy_map.jpg"></a><div class="imagecaption"><a class="target" name="figure_anisotropydirectionproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;16:</b> Example of a direction map</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_anisotropy_map.jpg" target="_blank"><img class="markdeep" src="images/screenshot_anisotropy_map.jpg"></a><div class="imagecaption"><a class="target" name="figure_anisotropydirectionproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;16:</b> Example of a direction map</div></div></center>
 
 <p></p>
-<a class="target" name="ambientocclusion">&#xA0;</a><a class="target" name="materialmodels/litmodel/ambientocclusion">&#xA0;</a><a class="target" name="toc3.1.14">&#xA0;</a><h3>Ambient occlusion</h3>
+<a class="target" name="ambientocclusion">&nbsp;</a><a class="target" name="materialmodels/litmodel/ambientocclusion">&nbsp;</a><a class="target" name="toc3.1.14">&nbsp;</a><h3>Ambient occlusion</h3>
 <p>
 
 
@@ -716,11 +716,11 @@ directional, point and spot lights, nor specular lighting.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_ao.jpg" target="_blank"><img class="markdeep" src="images/screenshot_ao.jpg"></a><div class="imagecaption"><a class="target" name="figure_aoexample">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;17:</b> Comparison of materials without diffuse ambient occlusion
+</p><center><div class="image" style=""><a href="images/screenshot_ao.jpg" target="_blank"><img class="markdeep" src="images/screenshot_ao.jpg"></a><div class="imagecaption"><a class="target" name="figure_aoexample">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;17:</b> Comparison of materials without diffuse ambient occlusion
 (left) and with (right)</div></div></center>
 
 <p></p>
-<a class="target" name="normal">&#xA0;</a><a class="target" name="materialmodels/litmodel/normal">&#xA0;</a><a class="target" name="toc3.1.15">&#xA0;</a><h3>Normal</h3>
+<a class="target" name="normal">&nbsp;</a><a class="target" name="materialmodels/litmodel/normal">&nbsp;</a><a class="target" name="toc3.1.15">&nbsp;</a><h3>Normal</h3>
 <p>
 
 
@@ -730,10 +730,10 @@ space, which means that +Z points outside of the surface.
 
 </p><p>
 
-For example, let&apos;s imagine that we want to render a piece of furniture covered in tufted leather.
+For example, let's imagine that we want to render a piece of furniture covered in tufted leather.
 Modeling the geometry to accurately represent the tufted pattern would require too many triangles
 so we instead bake a high-poly mesh into a normal map. Once the base map is applied to a simplified
-mesh, we get the result in <a href="#figure_normalmapped">figure&#xA0;18</a>.
+mesh, we get the result in <a href="#figure_normalmapped">figure&nbsp;18</a>.
 
 </p><p>
 
@@ -741,7 +741,7 @@ Note that the <code>normal</code> property affects the <em class="underscore">ba
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_normal_mapping.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_mapping.jpg"></a><div class="imagecaption"><a class="target" name="figure_normalmapped">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;18:</b> Low-poly mesh without normal mapping (left)
+</p><center><div class="image" style=""><a href="images/screenshot_normal_mapping.jpg" target="_blank"><img class="markdeep" src="images/screenshot_normal_mapping.jpg"></a><div class="imagecaption"><a class="target" name="figure_normalmapped">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;18:</b> Low-poly mesh without normal mapping (left)
 and with (right)</div></div></center>
 
 <p></p><p>
@@ -749,7 +749,7 @@ and with (right)</div></div></center>
 </p><div class="admonition warning">Using a normal map increases the runtime cost of the material model.</div>
 
 <p></p>
-<a class="target" name="bentnormal">&#xA0;</a><a class="target" name="materialmodels/litmodel/bentnormal">&#xA0;</a><a class="target" name="toc3.1.16">&#xA0;</a><h3>Bent normal</h3>
+<a class="target" name="bentnormal">&nbsp;</a><a class="target" name="materialmodels/litmodel/bentnormal">&nbsp;</a><a class="target" name="toc3.1.16">&nbsp;</a><h3>Bent normal</h3>
 <p>
 
 
@@ -761,16 +761,16 @@ specular ambient occlusion (see section  <a href="#toc4.2.24">4.2.24</a> about
 </p><p>
 
 Bent normals can greatly increase the visual fidelity of an asset with various cavities and concave
-areas, as shown in <a href="#figure_bentnormalmapped">figure&#xA0;19</a>. See the areas of the ears, nostrils and eyes for
+areas, as shown in <a href="#figure_bentnormalmapped">figure&nbsp;19</a>. See the areas of the ears, nostrils and eyes for
 instance.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_bent_normal.gif" target="_blank"><img class="markdeep" src="images/material_bent_normal.gif"></a><div class="imagecaption"><a class="target" name="figure_bentnormalmapped">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;19:</b> Example of a model rendered with and without a bent normal map. Both
+</p><center><div class="image" style=""><a href="images/material_bent_normal.gif" target="_blank"><img class="markdeep" src="images/material_bent_normal.gif"></a><div class="imagecaption"><a class="target" name="figure_bentnormalmapped">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;19:</b> Example of a model rendered with and without a bent normal map. Both
 versions use the same ambient occlusion map.</div></div></center>
 
 <p></p>
-<a class="target" name="clearcoatnormal">&#xA0;</a><a class="target" name="materialmodels/litmodel/clearcoatnormal">&#xA0;</a><a class="target" name="toc3.1.17">&#xA0;</a><h3>Clear coat normal</h3>
+<a class="target" name="clearcoatnormal">&nbsp;</a><a class="target" name="materialmodels/litmodel/clearcoatnormal">&nbsp;</a><a class="target" name="toc3.1.17">&nbsp;</a><h3>Clear coat normal</h3>
 <p>
 
 
@@ -779,7 +779,7 @@ behaves otherwise like the <code>normal</code> property.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_clear_coat_normal.jpg" target="_blank"><img class="markdeep" src="images/screenshot_clear_coat_normal.jpg"></a><div class="imagecaption"><a class="target" name="figure_clearcoatnormalmapped">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;20:</b> A material with a clear coat normal
+</p><center><div class="image" style=""><a href="images/screenshot_clear_coat_normal.jpg" target="_blank"><img class="markdeep" src="images/screenshot_clear_coat_normal.jpg"></a><div class="imagecaption"><a class="target" name="figure_clearcoatnormalmapped">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;20:</b> A material with a clear coat normal
 map and a surface normal map</div></div></center>
 
 <p></p><p>
@@ -787,7 +787,7 @@ map and a surface normal map</div></div></center>
 </p><div class="admonition warning">Using a clear coat normal map increases the runtime cost of the material model.</div>
 
 <p></p>
-<a class="target" name="emissive">&#xA0;</a><a class="target" name="materialmodels/litmodel/emissive">&#xA0;</a><a class="target" name="toc3.1.18">&#xA0;</a><h3>Emissive</h3>
+<a class="target" name="emissive">&nbsp;</a><a class="target" name="materialmodels/litmodel/emissive">&nbsp;</a><a class="target" name="toc3.1.18">&nbsp;</a><h3>Emissive</h3>
 <p>
 
 
@@ -815,7 +815,7 @@ not affected by the camera exposure. When the weight is set to 1, the intensity
 the camera exposure like with any regular light.
 
 </p>
-<a class="target" name="post-lightingcolor">&#xA0;</a><a class="target" name="materialmodels/litmodel/post-lightingcolor">&#xA0;</a><a class="target" name="toc3.1.19">&#xA0;</a><h3>Post-lighting color</h3>
+<a class="target" name="post-lightingcolor">&nbsp;</a><a class="target" name="materialmodels/litmodel/post-lightingcolor">&nbsp;</a><a class="target" name="toc3.1.19">&nbsp;</a><h3>Post-lighting color</h3>
 <p>
 
 
@@ -836,7 +836,7 @@ this option for more information.
     <code>postLightingBlending</code> to <code>add</code> and by providing an RGB color with alpha set to <code>0.0</code>.</div>
 
 <p></p>
-<a class="target" name="indexofrefraction">&#xA0;</a><a class="target" name="materialmodels/litmodel/indexofrefraction">&#xA0;</a><a class="target" name="toc3.1.20">&#xA0;</a><h3>Index of refraction</h3>
+<a class="target" name="indexofrefraction">&nbsp;</a><a class="target" name="materialmodels/litmodel/indexofrefraction">&nbsp;</a><a class="target" name="toc3.1.20">&nbsp;</a><h3>Index of refraction</h3>
 <p>
 
 
@@ -855,7 +855,7 @@ light to bend further away from the initial path.
 
 </p><p>
 
-<a href="#table_commonmatior">Table&#xA0;6</a> describes acceptable refractive indices for various types of materials.
+<a href="#table_commonmatior">Table&nbsp;6</a> describes acceptable refractive indices for various types of materials.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Material </th><th style="text-align:left"> IOR </th></tr>
 <tr><td style="text-align:right"> Air </td><td style="text-align:left"> 1.0 </td></tr>
@@ -864,7 +864,7 @@ light to bend further away from the initial path.
 <tr><td style="text-align:right"> Common gemstones </td><td style="text-align:left"> 1.58 to 2.33 </td></tr>
 <tr><td style="text-align:right"> Plastics, glass </td><td style="text-align:left"> 1.5 to 1.58 </td></tr>
 <tr><td style="text-align:right"> Other dielectric materials </td><td style="text-align:left"> 1.33 to 1.58 </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_commonmatior">&#xA0;</a><b style="font-style:normal;">Table&#xA0;6:</b> Index of refraction of common materials</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_commonmatior">&nbsp;</a><b style="font-style:normal;">Table&nbsp;6:</b> Index of refraction of common materials</div></div>
 
 <p></p><p>
 
@@ -875,22 +875,22 @@ for more information.
 </p><p>
 
 The effect of <code>ior</code> when <code>refractionMode</code> is set to <code>cubemap</code> and <code>refractionType</code> is set to <code>solid</code>
-can be seen in <a href="#figure_iorproperty2">figure&#xA0;21</a> (click on the image to see a larger version).
+can be seen in <a href="#figure_iorproperty2">figure&nbsp;21</a> (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/ior.png" target="_blank"><img class="markdeep" src="images/materials/ior.png"></a><div class="imagecaption"><a class="target" name="figure_iorproperty2">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;21:</b> <code>transmission</code> varying from 1.0
+</p><center><div class="image" style=""><a href="images/materials/ior.png" target="_blank"><img class="markdeep" src="images/materials/ior.png"></a><div class="imagecaption"><a class="target" name="figure_iorproperty2">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;21:</b> <code>transmission</code> varying from 1.0
 (left) to 1.5 (right)</div></div></center>
 
 <p></p><p>
 
-<a href="#figure_iorproperty">Figure&#xA0;22</a> shows the comparison of a sphere of <code>ior</code> 1.0 with a sphere of <code>ior</code> 1.33, with
+<a href="#figure_iorproperty">Figure&nbsp;22</a> shows the comparison of a sphere of <code>ior</code> 1.0 with a sphere of <code>ior</code> 1.33, with
 the <code>refractionMode</code> set to <code>screenspace</code> and the <code>refractionType</code> set to <code>solid</code>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_ior.png" target="_blank"><img class="markdeep" src="images/material_ior.png"></a><div class="imagecaption"><a class="target" name="figure_iorproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;22:</b> <code>ior</code> of 1.0 (left) and 1.33 (right)</div></div></center>
+</p><center><div class="image" style=""><a href="images/material_ior.png" target="_blank"><img class="markdeep" src="images/material_ior.png"></a><div class="imagecaption"><a class="target" name="figure_iorproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;22:</b> <code>ior</code> of 1.0 (left) and 1.33 (right)</div></div></center>
 
 <p></p><p>
 
@@ -907,11 +907,11 @@ See the <a href="#reflectance">Reflectance</a> section for more information on t
 </p><p>
 
 </p><div class="admonition tip">Refractive materials are affected by the <code>roughness</code> property. Rough materials will scatter
-    light, creating a diffusion effect useful to recreate &#x201C;blurry&#x201D; appearances such as frosted
+    light, creating a diffusion effect useful to recreate “blurry” appearances such as frosted
     glass, certain plastics, etc.</div>
 
 <p></p>
-<a class="target" name="transmission">&#xA0;</a><a class="target" name="materialmodels/litmodel/transmission">&#xA0;</a><a class="target" name="toc3.1.21">&#xA0;</a><h3>Transmission</h3>
+<a class="target" name="transmission">&nbsp;</a><a class="target" name="materialmodels/litmodel/transmission">&nbsp;</a><a class="target" name="toc3.1.21">&nbsp;</a><h3>Transmission</h3>
 <p>
 
 
@@ -928,12 +928,12 @@ diffuse component is not visible anymore, only the specular component is.
 </p><p>
 
 The effect of <code>transmission</code> on a glossy dielectric (<code>ior</code> of 1.5, <code>refractionMode</code> set to
-<code>cubemap</code>, <code>refractionType</code> set to <code>solid</code>) is shown in <a href="#figure_transmissionproperty">figure&#xA0;23</a>
+<code>cubemap</code>, <code>refractionType</code> set to <code>solid</code>) is shown in <a href="#figure_transmissionproperty">figure&nbsp;23</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/transmission.png" target="_blank"><img class="markdeep" src="images/materials/transmission.png"></a><div class="imagecaption"><a class="target" name="figure_transmissionproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;23:</b> <code>transmission</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/transmission.png" target="_blank"><img class="markdeep" src="images/materials/transmission.png"></a><div class="imagecaption"><a class="target" name="figure_transmissionproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;23:</b> <code>transmission</code> varying from 0.0
 (left) to 1.0 (right)</div></div></center>
 
 <p></p><p>
@@ -942,17 +942,17 @@ The effect of <code>transmission</code> on a glossy dielectric (<code>ior</code>
     materials.</div>
 
 <p></p>
-<a class="target" name="absorption">&#xA0;</a><a class="target" name="materialmodels/litmodel/absorption">&#xA0;</a><a class="target" name="toc3.1.22">&#xA0;</a><h3>Absorption</h3>
+<a class="target" name="absorption">&nbsp;</a><a class="target" name="materialmodels/litmodel/absorption">&nbsp;</a><a class="target" name="toc3.1.22">&nbsp;</a><h3>Absorption</h3>
 <p>
 
 
 The <code>absorption</code> property defines the absorption coefficients of light transmitted through the
-material. <a href="#figure_absorptionexample">Figure&#xA0;24</a> shows the effect of <code>absorption</code> on a refracting object with
+material. <a href="#figure_absorptionexample">Figure&nbsp;24</a> shows the effect of <code>absorption</code> on a refracting object with
 an index of refraction of 1.5 and a base color set to white.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_absorption.png" target="_blank"><img class="markdeep" src="images/material_absorption.png"></a><div class="imagecaption"><a class="target" name="figure_absorptionexample">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;24:</b> Refracting object without (left)
+</p><center><div class="image" style=""><a href="images/material_absorption.png" target="_blank"><img class="markdeep" src="images/material_absorption.png"></a><div class="imagecaption"><a class="target" name="figure_absorptionexample">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;24:</b> Refracting object without (left)
 and with (right) absorption</div></div></center>
 
 <p></p><p>
@@ -976,19 +976,19 @@ $$color \cdot (1 - absorption)$$
 
 </p><p>
 
-The effect of varying the <code>absorption</code> coefficients is shown in <a href="#figure_absorptionproperty">figure&#xA0;25</a>
+The effect of varying the <code>absorption</code> coefficients is shown in <a href="#figure_absorptionproperty">figure&nbsp;25</a>
 (click on the image to see a larger version). In this picture, the object has a fixed <code>thickness</code>
 of 4.5 and an index of refraction set to 1.3.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/absorption.png" target="_blank"><img class="markdeep" src="images/materials/absorption.png"></a><div class="imagecaption"><a class="target" name="figure_absorptionproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;25:</b> <code>absorption</code> varying from (0.0, 0.02, 0.14)
+</p><center><div class="image" style=""><a href="images/materials/absorption.png" target="_blank"><img class="markdeep" src="images/materials/absorption.png"></a><div class="imagecaption"><a class="target" name="figure_absorptionproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;25:</b> <code>absorption</code> varying from (0.0, 0.02, 0.14)
 (left) to (0.0, 0.36, 2.3) (right)</div></div></center>
 
 <p></p><p>
 
 Setting the absorption coefficients directly can be unintuitive which is why we recommend working
-with a <em class="underscore">transmittance color</em> and a <em class="underscore">&#x201C;at distance&#x201D;</em> factor instead. These two parameters allow an
+with a <em class="underscore">transmittance color</em> and a <em class="underscore">“at distance”</em> factor instead. These two parameters allow an
 artist to specify the precise color the material should have at a specified distance through the
 volume. The value to pass to <code>absorption</code> can be computed this way:
 
@@ -1002,7 +1002,7 @@ While this computation can be done in the material itself we recommend doing it
 possible. Filament provides an API for this purpose, <code>Color::absorptionAtDistance()</code>.
 
 </p>
-<a class="target" name="micro-thicknessandthickness">&#xA0;</a><a class="target" name="materialmodels/litmodel/micro-thicknessandthickness">&#xA0;</a><a class="target" name="toc3.1.23">&#xA0;</a><h3>Micro-thickness and thickness</h3>
+<a class="target" name="micro-thicknessandthickness">&nbsp;</a><a class="target" name="materialmodels/litmodel/micro-thicknessandthickness">&nbsp;</a><a class="target" name="toc3.1.23">&nbsp;</a><h3>Micro-thickness and thickness</h3>
 <p>
 
 
@@ -1032,35 +1032,35 @@ rays are refracted.
 </p><p>
 
 The effect <code>thickness</code> in a solid volume with <code>refractionMode</code> set to <code>screenSpace</code> is shown in
-<a href="#figure_thicknessproperty">figure&#xA0;26</a> (click on the image to see a larger version). Note how the <code>thickness</code>
+<a href="#figure_thicknessproperty">figure&nbsp;26</a> (click on the image to see a larger version). Note how the <code>thickness</code>
 value not only changes the effect of <code>absorption</code> but also modifies the direction of the refracted
 light.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/materials/thickness.png" target="_blank"><img class="markdeep" src="images/materials/thickness.png"></a><div class="imagecaption"><a class="target" name="figure_thicknessproperty">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;26:</b> <code>thickness</code> varying from 0.0
+</p><center><div class="image" style=""><a href="images/materials/thickness.png" target="_blank"><img class="markdeep" src="images/materials/thickness.png"></a><div class="imagecaption"><a class="target" name="figure_thicknessproperty">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;26:</b> <code>thickness</code> varying from 0.0
 (left) to 2.0 (right)</div></div></center>
 
 <p></p><p>
 
-<a href="#figure_varyingthickness">Figure&#xA0;27</a> shows what a prism with spatially varying <code>thickness</code> looks like when
+<a href="#figure_varyingthickness">Figure&nbsp;27</a> shows what a prism with spatially varying <code>thickness</code> looks like when
 the <code>refractionType</code> is set to <code>solid</code> and <code>absorption</code> coefficients are set.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/material_thickness.png" target="_blank"><img class="markdeep" src="images/material_thickness.png"></a><div class="imagecaption"><a class="target" name="figure_varyingthickness">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;27:</b> <code>thickness</code> varying from 0.0 at the top of the prism to 3.0 at the
+</p><center><div class="image" style=""><a href="images/material_thickness.png" target="_blank"><img class="markdeep" src="images/material_thickness.png"></a><div class="imagecaption"><a class="target" name="figure_varyingthickness">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;27:</b> <code>thickness</code> varying from 0.0 at the top of the prism to 3.0 at the
 bottom of the prism</div></div></center>
 
 <p></p>
-<a class="target" name="subsurfacemodel">&#xA0;</a><a class="target" name="materialmodels/subsurfacemodel">&#xA0;</a><a class="target" name="toc3.2">&#xA0;</a><h2>Subsurface model</h2>
+<a class="target" name="subsurfacemodel">&nbsp;</a><a class="target" name="materialmodels/subsurfacemodel">&nbsp;</a><a class="target" name="toc3.2">&nbsp;</a><h2>Subsurface model</h2>
 
-<a class="target" name="thickness">&#xA0;</a><a class="target" name="materialmodels/subsurfacemodel/thickness">&#xA0;</a><a class="target" name="toc3.2.1">&#xA0;</a><h3>Thickness</h3>
+<a class="target" name="thickness">&nbsp;</a><a class="target" name="materialmodels/subsurfacemodel/thickness">&nbsp;</a><a class="target" name="toc3.2.1">&nbsp;</a><h3>Thickness</h3>
 
-<a class="target" name="subsurfacecolor">&#xA0;</a><a class="target" name="materialmodels/subsurfacemodel/subsurfacecolor">&#xA0;</a><a class="target" name="toc3.2.2">&#xA0;</a><h3>Subsurface color</h3>
+<a class="target" name="subsurfacecolor">&nbsp;</a><a class="target" name="materialmodels/subsurfacemodel/subsurfacecolor">&nbsp;</a><a class="target" name="toc3.2.2">&nbsp;</a><h3>Subsurface color</h3>
 
-<a class="target" name="subsurfacepower">&#xA0;</a><a class="target" name="materialmodels/subsurfacemodel/subsurfacepower">&#xA0;</a><a class="target" name="toc3.2.3">&#xA0;</a><h3>Subsurface power</h3>
+<a class="target" name="subsurfacepower">&nbsp;</a><a class="target" name="materialmodels/subsurfacemodel/subsurfacepower">&nbsp;</a><a class="target" name="toc3.2.3">&nbsp;</a><h3>Subsurface power</h3>
 
-<a class="target" name="clothmodel">&#xA0;</a><a class="target" name="materialmodels/clothmodel">&#xA0;</a><a class="target" name="toc3.3">&#xA0;</a><h2>Cloth model</h2>
+<a class="target" name="clothmodel">&nbsp;</a><a class="target" name="materialmodels/clothmodel">&nbsp;</a><a class="target" name="toc3.3">&nbsp;</a><h2>Cloth model</h2>
 <p>
 
 
@@ -1073,19 +1073,19 @@ forward/backward scattering. Some fabrics also exhibit two-tone specular colors
 
 </p><p>
 
-<a href="#figure_materialcloth">Figure&#xA0;28</a> shows how the standard material model fails to capture the appearance of a
+<a href="#figure_materialcloth">Figure&nbsp;28</a> shows how the standard material model fails to capture the appearance of a
 sample of denim fabric. The surface appears rigid (almost plastic-like), more similar to a tarp
 than a piece of clothing. This figure also shows how important the softer specular lobe caused by
 absorption and scattering is to the faithful recreation of the fabric.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_cloth.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth.png"></a><div class="imagecaption"><a class="target" name="figure_materialcloth">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;28:</b> Comparison of denim fabric rendered using the standard model
+</p><center><div class="image" style=""><a href="images/screenshot_cloth.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth.png"></a><div class="imagecaption"><a class="target" name="figure_materialcloth">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;28:</b> Comparison of denim fabric rendered using the standard model
 (left) and the cloth model (right)</div></div></center>
 
 <p></p><p>
 
-Velvet is an interesting use case for a cloth material model. As shown in <a href="#figure_materialvelvet">figure&#xA0;29</a>
+Velvet is an interesting use case for a cloth material model. As shown in <a href="#figure_materialvelvet">figure&nbsp;29</a>
 this type of fabric exhibits strong rim lighting due to forward and backward scattering. These
 scattering events are caused by fibers standing straight at the surface of the fabric. When the
 incident light comes from the direction opposite to the view direction, the fibers will forward
@@ -1094,7 +1094,7 @@ direction, the fibers will scatter the light backward.
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_cloth_velvet.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_velvet.png"></a><div class="imagecaption"><a class="target" name="figure_materialvelvet">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;29:</b> Velvet fabric showcasing forward and
+</p><center><div class="image" style=""><a href="images/screenshot_cloth_velvet.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_velvet.png"></a><div class="imagecaption"><a class="target" name="figure_materialvelvet">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;29:</b> Velvet fabric showcasing forward and
 backward scattering</div></div></center>
 
 <p></p><p>
@@ -1107,7 +1107,7 @@ anisotropic material models.
 
 The cloth material model encompasses all the parameters previously defined for the standard
 material mode except for <em class="underscore">metallic</em> and <em class="underscore">reflectance</em>. Two extra parameters described in
-<a href="#table_clothproperties">table&#xA0;7</a> are also available.
+<a href="#table_clothproperties">table&nbsp;7</a> are also available.
 
 </p><p>
 
@@ -1115,16 +1115,16 @@ material mode except for <em class="underscore">metallic</em> and <em class="und
 <table class="table"><tbody><tr><th style="text-align:right"> Parameter </th><th style="text-align:left"> Definition </th></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">sheenColor</strong> </td><td style="text-align:left"> Specular tint to create two-tone specular fabrics (defaults to \(\sqrt{baseColor}\)) </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">subsurfaceColor</strong> </td><td style="text-align:left"> Tint for the diffuse color after scattering and absorption through the material </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_clothproperties">&#xA0;</a><b style="font-style:normal;">Table&#xA0;7:</b> Cloth model parameters</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_clothproperties">&nbsp;</a><b style="font-style:normal;">Table&nbsp;7:</b> Cloth model parameters</div></div>
 
 <p></p><p>
 
-The type and range of each property is described in <a href="#table_clothpropertiestypes">table&#xA0;8</a>.
+The type and range of each property is described in <a href="#table_clothpropertiestypes">table&nbsp;8</a>.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Property </th><th style="text-align:center"> Type </th><th style="text-align:center"> Range </th><th style="text-align:left"> Note </th></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">sheenColor</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Linear RGB </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">subsurfaceColor</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Linear RGB </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_clothpropertiestypes">&#xA0;</a><b style="font-style:normal;">Table&#xA0;8:</b> Range and type of the cloth model&apos;s properties</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_clothpropertiestypes">&nbsp;</a><b style="font-style:normal;">Table&nbsp;8:</b> Range and type of the cloth model's properties</div></div>
 
 <p></p><p>
 
@@ -1146,7 +1146,7 @@ or set the sheen color to the luminance of the base color.
     in some areas. It is best suited for subtle transmission effects through the material.</div>
 
 <p></p>
-<a class="target" name="sheencolor">&#xA0;</a><a class="target" name="materialmodels/clothmodel/sheencolor">&#xA0;</a><a class="target" name="toc3.3.1">&#xA0;</a><h3>Sheen color</h3>
+<a class="target" name="sheencolor">&nbsp;</a><a class="target" name="materialmodels/clothmodel/sheencolor">&nbsp;</a><a class="target" name="toc3.3.1">&nbsp;</a><h3>Sheen color</h3>
 <p>
 
 
@@ -1156,15 +1156,15 @@ two-tone specular materials.
 
 </p><p>
 
-The effect of <code>sheenColor</code> is shown in <a href="#figure_materialclothsheen">figure&#xA0;30</a>
+The effect of <code>sheenColor</code> is shown in <a href="#figure_materialclothsheen">figure&nbsp;30</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_cloth_sheen.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_sheen.png"></a><div class="imagecaption"><a class="target" name="figure_materialclothsheen">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;30:</b> Blue fabric without (left) and with (right) sheen</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_cloth_sheen.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_sheen.png"></a><div class="imagecaption"><a class="target" name="figure_materialclothsheen">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;30:</b> Blue fabric without (left) and with (right) sheen</div></div></center>
 
 <p></p>
-<a class="target" name="subsurfacecolor">&#xA0;</a><a class="target" name="materialmodels/clothmodel/subsurfacecolor">&#xA0;</a><a class="target" name="toc3.3.2">&#xA0;</a><h3>Subsurface color</h3>
+<a class="target" name="subsurfacecolor">&nbsp;</a><a class="target" name="materialmodels/clothmodel/subsurfacecolor">&nbsp;</a><a class="target" name="toc3.3.2">&nbsp;</a><h3>Subsurface color</h3>
 <p>
 
 
@@ -1178,39 +1178,39 @@ useful to create softer fabrics.
 
 <p></p><p>
 
-The effect of <code>subsurfaceColor</code> is shown in <a href="#figure_materialclothsubsurface">figure&#xA0;31</a>
+The effect of <code>subsurfaceColor</code> is shown in <a href="#figure_materialclothsubsurface">figure&nbsp;31</a>
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_cloth_subsurface.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_subsurface.png"></a><div class="imagecaption"><a class="target" name="figure_materialclothsubsurface">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;31:</b> White cloth (left column) vs white cloth with
+</p><center><div class="image" style=""><a href="images/screenshot_cloth_subsurface.png" target="_blank"><img class="markdeep" src="images/screenshot_cloth_subsurface.png"></a><div class="imagecaption"><a class="target" name="figure_materialclothsubsurface">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;31:</b> White cloth (left column) vs white cloth with
 brown subsurface scatting (right)</div></div></center>
 
 <p></p>
-<a class="target" name="unlitmodel">&#xA0;</a><a class="target" name="materialmodels/unlitmodel">&#xA0;</a><a class="target" name="toc3.4">&#xA0;</a><h2>Unlit model</h2>
+<a class="target" name="unlitmodel">&nbsp;</a><a class="target" name="materialmodels/unlitmodel">&nbsp;</a><a class="target" name="toc3.4">&nbsp;</a><h2>Unlit model</h2>
 <p>
 
 
 The unlit material model can be used to turn off all lighting computations. Its primary purpose is
 to render pre-lit elements such as a cubemap, external content (such as a video or camera stream),
 user interfaces, visualization/debugging etc. The unlit model exposes only two properties described
-in <a href="#table_unlitproperties">table&#xA0;9</a>.
+in <a href="#table_unlitproperties">table&nbsp;9</a>.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Property </th><th style="text-align:left"> Definition </th></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">baseColor</strong> </td><td style="text-align:left"> Surface diffuse color </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">emissive</strong> </td><td style="text-align:left"> Additional diffuse color to simulate emissive surfaces. This property is mostly useful in an HDR pipeline with a bloom pass </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">postLightingColor</strong> </td><td style="text-align:left"> Additional color to blend with base color and emissive </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_unlitproperties">&#xA0;</a><b style="font-style:normal;">Table&#xA0;9:</b> Properties of the standard model</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_unlitproperties">&nbsp;</a><b style="font-style:normal;">Table&nbsp;9:</b> Properties of the standard model</div></div>
 
 <p></p><p>
 
-The type and range of each property is described in <a href="#table_unlitpropertiestypes">table&#xA0;10</a>.
+The type and range of each property is described in <a href="#table_unlitpropertiestypes">table&nbsp;10</a>.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Property </th><th style="text-align:center"> Type </th><th style="text-align:center"> Range </th><th style="text-align:left"> Note </th></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">baseColor</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Pre-multiplied linear RGB </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">emissive</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:center"> rgb=[0..n], a=[0..1] </td><td style="text-align:left"> Linear RGB intensity in nits, alpha encodes the exposure weight </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">postLightingColor</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Pre-multiplied linear RGB </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_unlitpropertiestypes">&#xA0;</a><b style="font-style:normal;">Table&#xA0;10:</b> Range and type of the unlit model&apos;s properties</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_unlitpropertiestypes">&nbsp;</a><b style="font-style:normal;">Table&nbsp;10:</b> Range and type of the unlit model's properties</div></div>
 
 <p></p><p>
 
@@ -1219,15 +1219,15 @@ the blending mode specified by the <code>postLightingBlending</code> material op
 
 </p><p>
 
-<a href="#figure_materialunlit">Figure&#xA0;32</a> shows an example of the unlit material model
+<a href="#figure_materialunlit">Figure&nbsp;32</a> shows an example of the unlit material model
 (click on the image to see a larger version).
 
 </p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_unlit.jpg" target="_blank"><img class="markdeep" src="images/screenshot_unlit.jpg"></a><div class="imagecaption"><a class="target" name="figure_materialunlit">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;32:</b> The unlit model is used to render debug information</div></div></center>
+</p><center><div class="image" style=""><a href="images/screenshot_unlit.jpg" target="_blank"><img class="markdeep" src="images/screenshot_unlit.jpg"></a><div class="imagecaption"><a class="target" name="figure_materialunlit">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;32:</b> The unlit model is used to render debug information</div></div></center>
 
 <p></p>
-<a class="target" name="specularglossiness">&#xA0;</a><a class="target" name="materialmodels/specularglossiness">&#xA0;</a><a class="target" name="toc3.5">&#xA0;</a><h2>Specular glossiness</h2>
+<a class="target" name="specularglossiness">&nbsp;</a><a class="target" name="materialmodels/specularglossiness">&nbsp;</a><a class="target" name="toc3.5">&nbsp;</a><h2>Specular glossiness</h2>
 <p>
 
 
@@ -1243,20 +1243,20 @@ This model encompasses the parameters previously defined for the standard lit mo
 <tr><td style="text-align:right"> <strong class="asterisk">baseColor</strong> </td><td style="text-align:left"> Surface diffuse color </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">specularColor</strong> </td><td style="text-align:left"> Specular tint (defaults to black) </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">glossiness</strong> </td><td style="text-align:left"> Glossiness (defaults to 0.0) </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_glossinessproperties">&#xA0;</a><b style="font-style:normal;">Table&#xA0;11:</b> Properties of the specular-glossiness shading model</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_glossinessproperties">&nbsp;</a><b style="font-style:normal;">Table&nbsp;11:</b> Properties of the specular-glossiness shading model</div></div>
 
 <p></p><p>
 
-The type and range of each property is described in <a href="#table_glossinesspropertiestypes">table&#xA0;12</a>.
+The type and range of each property is described in <a href="#table_glossinesspropertiestypes">table&nbsp;12</a>.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Property </th><th style="text-align:center"> Type </th><th style="text-align:center"> Range </th><th style="text-align:left"> Note </th></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">baseColor</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Pre-multiplied linear RGB </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">specularColor</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Linear RGB </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">glossiness</strong> </td><td style="text-align:center"> float </td><td style="text-align:center"> [0..1] </td><td style="text-align:left"> Inverse of roughness </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_glossinesspropertiestypes">&#xA0;</a><b style="font-style:normal;">Table&#xA0;12:</b> Range and type of the specular-glossiness model&apos;s properties</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_glossinesspropertiestypes">&nbsp;</a><b style="font-style:normal;">Table&nbsp;12:</b> Range and type of the specular-glossiness model's properties</div></div>
 
 <p></p>
-<a class="target" name="materialdefinitions">&#xA0;</a><a class="target" name="materialdefinitions">&#xA0;</a><a class="target" name="toc4">&#xA0;</a><h1>Material definitions</h1>
+<a class="target" name="materialdefinitions">&nbsp;</a><a class="target" name="materialdefinitions">&nbsp;</a><a class="target" name="toc4">&nbsp;</a><h1>Material definitions</h1>
 <p>
 
 
@@ -1280,7 +1280,7 @@ A material definition is a text file that describes all the information required
 <li class="minus">Shader code (fragment shader, optionally vertex shader)</li></ul>
 
 <p></p>
-<a class="target" name="format">&#xA0;</a><a class="target" name="materialdefinitions/format">&#xA0;</a><a class="target" name="toc4.1">&#xA0;</a><h2>Format</h2>
+<a class="target" name="format">&nbsp;</a><a class="target" name="materialdefinitions/format">&nbsp;</a><a class="target" name="toc4.1">&nbsp;</a><h2>Format</h2>
 <p>
 
 
@@ -1304,13 +1304,13 @@ A minimum viable material definition must contain a <code>material</code> preamb
 <code>vertex</code> block is optional.
 
 </p>
-<a class="target" name="differenceswithjson">&#xA0;</a><a class="target" name="materialdefinitions/format/differenceswithjson">&#xA0;</a><a class="target" name="toc4.1.1">&#xA0;</a><h3>Differences with JSON</h3>
+<a class="target" name="differenceswithjson">&nbsp;</a><a class="target" name="materialdefinitions/format/differenceswithjson">&nbsp;</a><a class="target" name="toc4.1.1">&nbsp;</a><h3>Differences with JSON</h3>
 <p>
 
 
 In JSON, an object is made of key/value <em class="underscore">pairs</em>. A JSON pair has the following syntax:
 
-</p><pre class="listing tilde"><code><span class="line">&quot;key&quot; : value</span></code></pre><p>
+</p><pre class="listing tilde"><code><span class="line">"key" : value</span></code></pre><p>
 
 Where value can be a string, number, object, array or a literal (<code>true</code>, <code>false</code> or <code>null</code>). While
 this syntax is perfectly valid in a material definition, a variant without quotes around strings is
@@ -1337,7 +1337,7 @@ The key of a pair is case-sensitive.
 The value of a pair is not case-sensitive.
 
 </p>
-<a class="target" name="example">&#xA0;</a><a class="target" name="materialdefinitions/format/example">&#xA0;</a><a class="target" name="toc4.1.2">&#xA0;</a><h3>Example</h3>
+<a class="target" name="example">&nbsp;</a><a class="target" name="materialdefinitions/format/example">&nbsp;</a><a class="target" name="toc4.1.2">&nbsp;</a><h3>Example</h3>
 <p>
 
 
@@ -1347,7 +1347,7 @@ that a set of UV coordinates be presented in the rendered mesh and defines 3 use
 following sections of this document describe the <code>material</code> and <code>fragment</code> blocks in detail.
 
 </p><pre class="listing tilde"><code><span class="line">material {</span>
-<span class="line">    name : &quot;Textured material&quot;,</span>
+<span class="line">    name : "Textured material",</span>
 <span class="line">    parameters : [</span>
 <span class="line">        {</span>
 <span class="line">           type : sampler2d,</span>
@@ -1377,7 +1377,7 @@ following sections of this document describe the <code>material</code> and <code
 <span class="line">        material.roughness = materialParams.roughness;</span>
 <span class="line">    }</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="materialblock">&#xA0;</a><a class="target" name="materialdefinitions/materialblock">&#xA0;</a><a class="target" name="toc4.2">&#xA0;</a><h2>Material block</h2>
+<a class="target" name="materialblock">&nbsp;</a><a class="target" name="materialdefinitions/materialblock">&nbsp;</a><a class="target" name="toc4.2">&nbsp;</a><h2>Material block</h2>
 <p>
 
 
@@ -1385,7 +1385,7 @@ The material block is mandatory block that contains a list of property pairs to
 non-shader data.
 
 </p>
-<a class="target" name="general:name">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/general:name">&#xA0;</a><a class="target" name="toc4.2.1">&#xA0;</a><h3>General: name</h3>
+<a class="target" name="general:name">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/general:name">&nbsp;</a><a class="target" name="toc4.2.1">&nbsp;</a><h3>General: name</h3>
 <p>
 
 
@@ -1400,9 +1400,9 @@ non-shader data.
 <span class="line">}</span>
 <span class="line"></span>
 <span class="line">material {</span>
-<span class="line">    name : &quot;Wet pavement&quot;</span>
+<span class="line">    name : "Wet pavement"</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="general:shadingmodel">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/general:shadingmodel">&#xA0;</a><a class="target" name="toc4.2.2">&#xA0;</a><h3>General: shadingModel</h3>
+<a class="target" name="general:shadingmodel">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/general:shadingmodel">&nbsp;</a><a class="target" name="toc4.2.2">&nbsp;</a><h3>General: shadingModel</h3>
 <p>
 
 
@@ -1417,9 +1417,9 @@ non-shader data.
 <span class="line">}</span>
 <span class="line"></span>
 <span class="line">material {</span>
-<span class="line">    shadingModel : &quot;subsurface&quot;</span>
+<span class="line">    shadingModel : "subsurface"</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="general:parameters">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/general:parameters">&#xA0;</a><a class="target" name="toc4.2.3">&#xA0;</a><h3>General: parameters</h3>
+<a class="target" name="general:parameters">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/general:parameters">&nbsp;</a><a class="target" name="toc4.2.3">&nbsp;</a><h3>General: parameters</h3>
 <p>
 
 
@@ -1427,7 +1427,7 @@ non-shader data.
 
 </p></dd><dt>Value</dt><dd><p>      Each entry is an object with the properties <code>name</code> and <code>type</code>, both of <code>string</code> type. The
       name must be a valid GLSL identifier. The type must be one of the types described in
-      <a href="#table_materialparamstypes">table&#xA0;13</a>.
+      <a href="#table_materialparamstypes">table&nbsp;13</a>.
 
 </p></dd></dl><div class="table">
 <table class="table"><tbody><tr><th style="text-align:left"> Type </th><th style="text-align:left"> Description </th></tr>
@@ -1447,12 +1447,12 @@ non-shader data.
 <tr><td style="text-align:left"> uint2 </td><td style="text-align:left"> Vector of 2 unsigned integers </td></tr>
 <tr><td style="text-align:left"> uint3 </td><td style="text-align:left"> Vector of 3 unsigned integers </td></tr>
 <tr><td style="text-align:left"> uint4 </td><td style="text-align:left"> Vector of 4 unsigned integers </td></tr>
-<tr><td style="text-align:left"> float3&#xD7;3 </td><td style="text-align:left"> Matrix of 3&#xD7;3 floats </td></tr>
-<tr><td style="text-align:left"> float4&#xD7;4 </td><td style="text-align:left"> Matrix of 4&#xD7;4 floats </td></tr>
+<tr><td style="text-align:left"> float3×3 </td><td style="text-align:left"> Matrix of 3×3 floats </td></tr>
+<tr><td style="text-align:left"> float4×4 </td><td style="text-align:left"> Matrix of 4×4 floats </td></tr>
 <tr><td style="text-align:left"> sampler2d </td><td style="text-align:left"> 2D texture </td></tr>
 <tr><td style="text-align:left"> samplerExternal </td><td style="text-align:left"> External texture (platform-specific) </td></tr>
 <tr><td style="text-align:left"> samplerCubemap </td><td style="text-align:left"> Cubemap texture </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_materialparamstypes">&#xA0;</a><b style="font-style:normal;">Table&#xA0;13:</b> Material parameter types</div></div>
+</tbody></table><div class="tablecaption"><a class="target" name="table_materialparamstypes">&nbsp;</a><b style="font-style:normal;">Table&nbsp;13:</b> Material parameter types</div></div>
 
 <p></p><p>
 
@@ -1466,7 +1466,7 @@ non-shader data.
       values. Arrays of samplers are <em class="underscore">not</em> supported at the moment.
 
 </p></dd><dt>Description</dt><dd><p>      Lists the parameters required by your material. These parameters can be set at runtime using
-      Filament&apos;s material API. Accessing parameters from the shaders varies depending on the type of
+      Filament's material API. Accessing parameters from the shaders varies depending on the type of
       parameter:
 
 </p><p>
@@ -1510,7 +1510,7 @@ non-shader data.
 <span class="line">        material.reflectance = materialParams.metallicReflectance.y;</span>
 <span class="line">    }</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="general:variantfilter">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/general:variantfilter">&#xA0;</a><a class="target" name="toc4.2.4">&#xA0;</a><h3>General: variantFilter</h3>
+<a class="target" name="general:variantfilter">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/general:variantfilter">&nbsp;</a><a class="target" name="toc4.2.4">&nbsp;</a><h3>General: variantFilter</h3>
 <p>
 
 
@@ -1540,13 +1540,13 @@ non-shader data.
 <li class="minus"><code>skinning</code>, used when an object is animated using GPU skinning</li></ul>
 
 <p></p><pre class="listing tilde"><code><span class="line">material {</span>
-<span class="line">    name : &quot;Invisible shadow plane&quot;,</span>
+<span class="line">    name : "Invisible shadow plane",</span>
 <span class="line">    shadingModel : unlit,</span>
 <span class="line">    shadowMultiplier : true,</span>
 <span class="line">    blending : transparent,</span>
 <span class="line">    variantFilter : [ skinning ]</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="general:flipuv">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/general:flipuv">&#xA0;</a><a class="target" name="toc4.2.5">&#xA0;</a><h3>General: flipUV</h3>
+<a class="target" name="general:flipuv">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/general:flipuv">&nbsp;</a><a class="target" name="toc4.2.5">&nbsp;</a><h3>General: flipUV</h3>
 <p>
 
 
@@ -1555,13 +1555,13 @@ non-shader data.
 </p></dd><dt>Value</dt><dd><p>      <code>true</code> or <code>false</code>. Defaults to <code>true</code>.
 
 </p></dd><dt>Description</dt><dd><p>     When set to <code>true</code> (default value), the Y coordinate of UV attributes will be flipped when
-     read by this material&apos;s vertex shader. Flipping is equivalent to <code>y = 1.0 - y</code>. When set
+     read by this material's vertex shader. Flipping is equivalent to <code>y = 1.0 - y</code>. When set
      to <code>false</code>, flipping is disabled and the UV attributes are read as is.
 
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    flipUV : false</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="vertexandattributes:requires">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/vertexandattributes:requires">&#xA0;</a><a class="target" name="toc4.2.6">&#xA0;</a><h3>Vertex and attributes: requires</h3>
+<a class="target" name="vertexandattributes:requires">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/vertexandattributes:requires">&nbsp;</a><a class="target" name="toc4.2.6">&nbsp;</a><h3>Vertex and attributes: requires</h3>
 <p>
 
 
@@ -1593,7 +1593,7 @@ non-shader data.
 <span class="line">        material.baseColor = texture(materialParams_texture, getUV0());</span>
 <span class="line">    }</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="vertexandattributes:variables">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/vertexandattributes:variables">&#xA0;</a><a class="target" name="toc4.2.7">&#xA0;</a><h3>Vertex and attributes: variables</h3>
+<a class="target" name="vertexandattributes:variables">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/vertexandattributes:variables">&nbsp;</a><a class="target" name="toc4.2.7">&nbsp;</a><h3>Vertex and attributes: variables</h3>
 <p>
 
 
@@ -1601,7 +1601,7 @@ non-shader data.
 
 </p></dd><dt>Value</dt><dd><p>      Up to 4 strings, each must be a valid GLSL identifier.
 
-</p></dd><dt>Description</dt><dd><p>      Defines custom interpolants (or variables) that are output by the material&apos;s vertex shader.
+</p></dd><dt>Description</dt><dd><p>      Defines custom interpolants (or variables) that are output by the material's vertex shader.
       Each entry of the array defines the name of an  interpolant. The full name in the fragment
       shader is the name of the interpolant with the <code>variable_</code> prefix. For instance, if you
       declare a variable called <code>eyeDirection</code> you can access it in the fragment shader using
@@ -1640,7 +1640,7 @@ non-shader data.
 <span class="line">        material.eyeDirection.xyz = mulMat3x3Float3(getWorldFromViewMatrix(), u);</span>
 <span class="line">    }</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="vertexandattributes:vertexdomain">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/vertexandattributes:vertexdomain">&#xA0;</a><a class="target" name="toc4.2.8">&#xA0;</a><h3>Vertex and attributes: vertexDomain</h3>
+<a class="target" name="vertexandattributes:vertexdomain">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/vertexandattributes:vertexdomain">&nbsp;</a><a class="target" name="toc4.2.8">&nbsp;</a><h3>Vertex and attributes: vertexDomain</h3>
 <p>
 
 
@@ -1655,21 +1655,21 @@ non-shader data.
 
 </p><ul>
      <li class="minus"><strong class="asterisk">Object</strong>: the vertices are defined in the object (or model) coordinate space. The
-            vertices are transformed using the rendered object&apos;s transform matrix
+            vertices are transformed using the rendered object's transform matrix
 </li>
      <li class="minus"><strong class="asterisk">World</strong>: the vertices are defined in world coordinate space. The vertices are not
-            transformed using the rendered object&apos;s transform.
+            transformed using the rendered object's transform.
 </li>
      <li class="minus"><strong class="asterisk">View</strong>: the vertices are defined in view (or eye or camera) coordinate space. The
-            vertices are not transformed using the rendered object&apos;s transform.
+            vertices are not transformed using the rendered object's transform.
 </li>
      <li class="minus"><strong class="asterisk">Device</strong>:  the vertices are defined in normalized device (or clip) coordinate space.
-            The vertices are not transformed using the rendered object&apos;s transform.</li></ul>
+            The vertices are not transformed using the rendered object's transform.</li></ul>
 
 <p></p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    vertexDomain : device</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="vertexandattributes:interpolation">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/vertexandattributes:interpolation">&#xA0;</a><a class="target" name="toc4.2.9">&#xA0;</a><h3>Vertex and attributes: interpolation</h3>
+<a class="target" name="vertexandattributes:interpolation">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/vertexandattributes:interpolation">&nbsp;</a><a class="target" name="toc4.2.9">&nbsp;</a><h3>Vertex and attributes: interpolation</h3>
 <p>
 
 
@@ -1685,7 +1685,7 @@ non-shader data.
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    interpolation : flat</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="blendingandtransparency:blending">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:blending">&#xA0;</a><a class="target" name="toc4.2.10">&#xA0;</a><h3>Blending and transparency: blending</h3>
+<a class="target" name="blendingandtransparency:blending">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:blending">&nbsp;</a><a class="target" name="toc4.2.10">&nbsp;</a><h3>Blending and transparency: blending</h3>
 <p>
 
 
@@ -1699,33 +1699,33 @@ non-shader data.
 </p><p>
 
 </p><ul>
-    <li class="minus"><strong class="asterisk">Opaque</strong>: blending is disabled, the alpha channel of the material&apos;s output is ignored.
+    <li class="minus"><strong class="asterisk">Opaque</strong>: blending is disabled, the alpha channel of the material's output is ignored.
 </li>
-    <li class="minus"><strong class="asterisk">Transparent</strong>: blending is enabled. The material&apos;s output is alpha composited with the
-          render target, using Porter-Duff&apos;s <code>source over</code> rule. This blending mode assumes
+    <li class="minus"><strong class="asterisk">Transparent</strong>: blending is enabled. The material's output is alpha composited with the
+          render target, using Porter-Duff's <code>source over</code> rule. This blending mode assumes
           pre-multiplied alpha.
 </li>
     <li class="minus"><strong class="asterisk">Fade</strong>: acts as <code>transparent</code> but transparency is also applied to specular lighting. In
-          <code>transparent</code> mode, the material&apos;s alpha values only applies to diffuse lighting. This
+          <code>transparent</code> mode, the material's alpha values only applies to diffuse lighting. This
           blending mode is useful to fade lit objects in and out.
 </li>
-    <li class="minus"><strong class="asterisk">Add</strong>: blending is enabled. The material&apos;s output is added to the content of the
+    <li class="minus"><strong class="asterisk">Add</strong>: blending is enabled. The material's output is added to the content of the
           render target.
 </li>
-    <li class="minus"><strong class="asterisk">Multiply</strong>: blending is enabled. The material&apos;s output is multiplied with the content of the
+    <li class="minus"><strong class="asterisk">Multiply</strong>: blending is enabled. The material's output is multiplied with the content of the
           render target, darkening the content.
 </li>
     <li class="minus"><strong class="asterisk">Screen</strong>: blending is enabled. Effectively the opposite of the <code>multiply</code>, the content of the
           render target is brightened.
 </li>
     <li class="minus"><strong class="asterisk">Masked</strong>: blending is disabled. This blending mode enables alpha masking. The alpha channel
-          of the material&apos;s output defines whether a fragment is discarded or not. See the maskThreshold
+          of the material's output defines whether a fragment is discarded or not. See the maskThreshold
           section for more information.</li></ul>
 
 <p></p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    blending : transparent</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="blendingandtransparency:postlightingblending">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:postlightingblending">&#xA0;</a><a class="target" name="toc4.2.11">&#xA0;</a><h3>Blending and transparency: postLightingBlending</h3>
+<a class="target" name="blendingandtransparency:postlightingblending">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:postlightingblending">&nbsp;</a><a class="target" name="toc4.2.11">&nbsp;</a><h3>Blending and transparency: postLightingBlending</h3>
 <p>
 
 
@@ -1741,21 +1741,21 @@ non-shader data.
 </p><ul>
     <li class="minus"><strong class="asterisk">Opaque</strong>: blending is disabled, the material will output <code>postLightingColor</code> directly.
 </li>
-    <li class="minus"><strong class="asterisk">Transparent</strong>: blending is enabled. The material&apos;s computed color is alpha composited with
-          the <code>postLightingColor</code>, using Porter-Duff&apos;s <code>source over</code> rule. This blending mode assumes
+    <li class="minus"><strong class="asterisk">Transparent</strong>: blending is enabled. The material's computed color is alpha composited with
+          the <code>postLightingColor</code>, using Porter-Duff's <code>source over</code> rule. This blending mode assumes
           pre-multiplied alpha.
 </li>
-    <li class="minus"><strong class="asterisk">Add</strong>: blending is enabled. The material&apos;s computed color is added to <code>postLightingColor</code>.
+    <li class="minus"><strong class="asterisk">Add</strong>: blending is enabled. The material's computed color is added to <code>postLightingColor</code>.
 </li>
-    <li class="minus"><strong class="asterisk">Multiply</strong>: blending is enabled. The material&apos;s computed color is multiplied with <code>postLightingColor</code>.
+    <li class="minus"><strong class="asterisk">Multiply</strong>: blending is enabled. The material's computed color is multiplied with <code>postLightingColor</code>.
 </li>
-    <li class="minus"><strong class="asterisk">Screen</strong>: blending is enabled. The material&apos;s computed color is inverted and multiplied with <code>postLightingColor</code>,
-          and the result is added to the material&apos;s computed color.</li></ul>
+    <li class="minus"><strong class="asterisk">Screen</strong>: blending is enabled. The material's computed color is inverted and multiplied with <code>postLightingColor</code>,
+          and the result is added to the material's computed color.</li></ul>
 
 <p></p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    postLightingBlending : add</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="blendingandtransparency:transparency">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:transparency">&#xA0;</a><a class="target" name="toc4.2.12">&#xA0;</a><h3>Blending and transparency: transparency</h3>
+<a class="target" name="blendingandtransparency:transparency">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:transparency">&nbsp;</a><a class="target" name="toc4.2.12">&nbsp;</a><h3>Blending and transparency: transparency</h3>
 <p>
 
 
@@ -1772,37 +1772,37 @@ non-shader data.
 <p></p><p>
 
 </p><ul>
-<li class="minus"><code>default</code>: the transparent object is rendered normally (as seen in <a href="#figure_transparencydefault">figure&#xA0;33</a>),
+<li class="minus"><code>default</code>: the transparent object is rendered normally (as seen in <a href="#figure_transparencydefault">figure&nbsp;33</a>),
    honoring the <code>culling</code> mode, etc.
 </li>
 <li class="minus"><code>twoPassesOneSide</code>: the transparent object is first rendered in the depth buffer, then again in
   the color buffer, honoring the <code>culling</code> mode. This effectively renders only half of the
-  transparent object as shown in <a href="#figure_transparencytwopassesoneside">figure&#xA0;34</a>.
+  transparent object as shown in <a href="#figure_transparencytwopassesoneside">figure&nbsp;34</a>.
 </li>
 <li class="minus"><code>twoPassesTwoSides</code>: the transparent object is rendered twice in the color buffer: first with its
   back faces, then with its front faces. This mode lets you render both set of faces while reducing
-  or eliminating sorting issues, as shown in <a href="#figure_transparencytwopassestwosides">figure&#xA0;35</a>.
+  or eliminating sorting issues, as shown in <a href="#figure_transparencytwopassestwosides">figure&nbsp;35</a>.
   <code>twoPassesTwoSides</code> can be combined with <code>doubleSided</code> for better effect.</li></ul>
 
 <p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    transparency : twoPassesOneSide</span>
 <span class="line">}</span></code></pre><p>
 
-</p><center><div class="image" style><a href="images/screenshot_transparency_default.png" target="_blank"><img class="markdeep" src="images/screenshot_transparency_default.png"></a><div class="imagecaption"><a class="target" name="figure_transparencydefault">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;33:</b> This double sided model shows the type of sorting issues transparent
+</p><center><div class="image" style=""><a href="images/screenshot_transparency_default.png" target="_blank"><img class="markdeep" src="images/screenshot_transparency_default.png"></a><div class="imagecaption"><a class="target" name="figure_transparencydefault">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;33:</b> This double sided model shows the type of sorting issues transparent
 objects can be subject to in <code>default</code> mode</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_twopasses_oneside.png" target="_blank"><img class="markdeep" src="images/screenshot_twopasses_oneside.png"></a><div class="imagecaption"><a class="target" name="figure_transparencytwopassesoneside">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;34:</b> In <code>twoPassesOneSide</code> mode, only one set of faces is visible
+</p><center><div class="image" style=""><a href="images/screenshot_twopasses_oneside.png" target="_blank"><img class="markdeep" src="images/screenshot_twopasses_oneside.png"></a><div class="imagecaption"><a class="target" name="figure_transparencytwopassesoneside">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;34:</b> In <code>twoPassesOneSide</code> mode, only one set of faces is visible
 and correctly sorted</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_twopasses_twosides.png" target="_blank"><img class="markdeep" src="images/screenshot_twopasses_twosides.png"></a><div class="imagecaption"><a class="target" name="figure_transparencytwopassestwosides">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;35:</b> In <code>twoPassesTwoSides</code> mode, both set of faces are visible
+</p><center><div class="image" style=""><a href="images/screenshot_twopasses_twosides.png" target="_blank"><img class="markdeep" src="images/screenshot_twopasses_twosides.png"></a><div class="imagecaption"><a class="target" name="figure_transparencytwopassestwosides">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;35:</b> In <code>twoPassesTwoSides</code> mode, both set of faces are visible
 and sorting issues are minimized or eliminated</div></div></center>
 
 <p></p>
-<a class="target" name="blendingandtransparency:maskthreshold">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:maskthreshold">&#xA0;</a><a class="target" name="toc4.2.13">&#xA0;</a><h3>Blending and transparency: maskThreshold</h3>
+<a class="target" name="blendingandtransparency:maskthreshold">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:maskthreshold">&nbsp;</a><a class="target" name="toc4.2.13">&nbsp;</a><h3>Blending and transparency: maskThreshold</h3>
 <p>
 
 
@@ -1818,7 +1818,7 @@ and sorting issues are minimized or eliminated</div></div></center>
 <span class="line">    blending : masked,</span>
 <span class="line">    maskThreshold : 0.5</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="blendingandtransparency:refractionmode">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:refractionmode">&#xA0;</a><a class="target" name="toc4.2.14">&#xA0;</a><h3>Blending and transparency: refractionMode</h3>
+<a class="target" name="blendingandtransparency:refractionmode">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:refractionmode">&nbsp;</a><a class="target" name="toc4.2.14">&nbsp;</a><h3>Blending and transparency: refractionMode</h3>
 <p>
 
 
@@ -1839,7 +1839,7 @@ and sorting issues are minimized or eliminated</div></div></center>
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    refractionMode : cubemap,</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="blendingandtransparency:refractiontype">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:refractiontype">&#xA0;</a><a class="target" name="toc4.2.15">&#xA0;</a><h3>Blending and transparency: refractionType</h3>
+<a class="target" name="blendingandtransparency:refractiontype">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/blendingandtransparency:refractiontype">&nbsp;</a><a class="target" name="toc4.2.15">&nbsp;</a><h3>Blending and transparency: refractionType</h3>
 <p>
 
 
@@ -1858,7 +1858,7 @@ and sorting issues are minimized or eliminated</div></div></center>
 <span class="line">    refractionMode : cubemap,</span>
 <span class="line">    refractionType : thin,</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="rasterization:culling">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/rasterization:culling">&#xA0;</a><a class="target" name="toc4.2.16">&#xA0;</a><h3>Rasterization: culling</h3>
+<a class="target" name="rasterization:culling">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/rasterization:culling">&nbsp;</a><a class="target" name="toc4.2.16">&nbsp;</a><h3>Rasterization: culling</h3>
 <p>
 
 
@@ -1872,7 +1872,7 @@ and sorting issues are minimized or eliminated</div></div></center>
 </p></dd></td></tr></tbody></table></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    culling : none</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="rasterization:colorwrite">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/rasterization:colorwrite">&#xA0;</a><a class="target" name="toc4.2.17">&#xA0;</a><h3>Rasterization: colorWrite</h3>
+<a class="target" name="rasterization:colorwrite">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/rasterization:colorwrite">&nbsp;</a><a class="target" name="toc4.2.17">&nbsp;</a><h3>Rasterization: colorWrite</h3>
 <p>
 
 
@@ -1885,7 +1885,7 @@ and sorting issues are minimized or eliminated</div></div></center>
 </p></dd></td></tr></tbody></table></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    colorWrite : false</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="rasterization:depthwrite">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/rasterization:depthwrite">&#xA0;</a><a class="target" name="toc4.2.18">&#xA0;</a><h3>Rasterization: depthWrite</h3>
+<a class="target" name="rasterization:depthwrite">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/rasterization:depthwrite">&nbsp;</a><a class="target" name="toc4.2.18">&nbsp;</a><h3>Rasterization: depthWrite</h3>
 <p>
 
 
@@ -1898,7 +1898,7 @@ and sorting issues are minimized or eliminated</div></div></center>
 </p></dd></td></tr></tbody></table></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    depthWrite : false</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="rasterization:depthculling">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/rasterization:depthculling">&#xA0;</a><a class="target" name="toc4.2.19">&#xA0;</a><h3>Rasterization: depthCulling</h3>
+<a class="target" name="rasterization:depthculling">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/rasterization:depthculling">&nbsp;</a><a class="target" name="toc4.2.19">&nbsp;</a><h3>Rasterization: depthCulling</h3>
 <p>
 
 
@@ -1912,7 +1912,7 @@ and sorting issues are minimized or eliminated</div></div></center>
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    depthCulling : false</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="rasterization:doublesided">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/rasterization:doublesided">&#xA0;</a><a class="target" name="toc4.2.20">&#xA0;</a><h3>Rasterization: doubleSided</h3>
+<a class="target" name="rasterization:doublesided">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/rasterization:doublesided">&nbsp;</a><a class="target" name="toc4.2.20">&nbsp;</a><h3>Rasterization: doubleSided</h3>
 <p>
 
 
@@ -1921,14 +1921,14 @@ and sorting issues are minimized or eliminated</div></div></center>
 </p></dd><dt>Value</dt><dd><p>      <code>true</code> or <code>false</code>. Defaults to <code>false</code>.
 
 </p></dd><dt>Description</dt><dd><p>      Enables two-sided rendering and its capability to be toggled at run time. When set to <code>true</code>,
-      <code>culling</code> is automatically set to <code>none</code>; if the triangle is back-facing, the triangle&apos;s
+      <code>culling</code> is automatically set to <code>none</code>; if the triangle is back-facing, the triangle's
       normal is flipped to become front-facing. When explicitly set to <code>false</code>, this allows the
       double-sidedness to be toggled at run time.
 
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    doubleSided : true</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="lighting:shadowmultiplier">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/lighting:shadowmultiplier">&#xA0;</a><a class="target" name="toc4.2.21">&#xA0;</a><h3>Lighting: shadowMultiplier</h3>
+<a class="target" name="lighting:shadowmultiplier">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/lighting:shadowmultiplier">&nbsp;</a><a class="target" name="toc4.2.21">&nbsp;</a><h3>Lighting: shadowMultiplier</h3>
 <p>
 
 
@@ -1941,7 +1941,7 @@ and sorting issues are minimized or eliminated</div></div></center>
       create transparent shadow-receiving objects (for instance an invisible ground plane in AR).
 
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
-<span class="line">    name : &quot;Invisible shadow plane&quot;,</span>
+<span class="line">    name : "Invisible shadow plane",</span>
 <span class="line">    shadingModel : unlit,</span>
 <span class="line">    shadowMultiplier : true,</span>
 <span class="line">    blending : transparent</span>
@@ -1954,7 +1954,7 @@ and sorting issues are minimized or eliminated</div></div></center>
 <span class="line">        material.baseColor = vec4(0.0, 0.0, 0.0, 0.7);</span>
 <span class="line">    }</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="lighting:clearcoatiorchange">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/lighting:clearcoatiorchange">&#xA0;</a><a class="target" name="toc4.2.22">&#xA0;</a><h3>Lighting: clearCoatIorChange</h3>
+<a class="target" name="lighting:clearcoatiorchange">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/lighting:clearcoatiorchange">&nbsp;</a><a class="target" name="toc4.2.22">&nbsp;</a><h3>Lighting: clearCoatIorChange</h3>
 <p>
 
 
@@ -1964,19 +1964,19 @@ and sorting issues are minimized or eliminated</div></div></center>
 
 </p></dd><dt>Description</dt><dd><p>     When adding a clear coat layer, the change in index of refraction (IoR) is taken into account
      to modify the specular color of the base layer. This appears to darken <code>baseColor</code>. When this
-     effect is disabled, <code>baseColor</code> is left unmodified. See <a href="#figure_clearcoatiorchange">figure&#xA0;36</a> for an
+     effect is disabled, <code>baseColor</code> is left unmodified. See <a href="#figure_clearcoatiorchange">figure&nbsp;36</a> for an
      example of how this property can affect a red metallic base layer.
 
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    clearCoatIorChange : false</span>
 <span class="line">}</span></code></pre><p>
 
-</p><center><div class="image" style><a href="images/screenshot_clear_coat_ior_change.jpg" target="_blank"><img class="markdeep" src="images/screenshot_clear_coat_ior_change.jpg"></a><div class="imagecaption"><a class="target" name="figure_clearcoatiorchange">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;36:</b> The same rough metallic ball with a clear coat layer rendered
+</p><center><div class="image" style=""><a href="images/screenshot_clear_coat_ior_change.jpg" target="_blank"><img class="markdeep" src="images/screenshot_clear_coat_ior_change.jpg"></a><div class="imagecaption"><a class="target" name="figure_clearcoatiorchange">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;36:</b> The same rough metallic ball with a clear coat layer rendered
 with <code>clearCoatIorChange</code> enabled (left) and disabled
 (right).</div></div></center>
 
 <p></p>
-<a class="target" name="lighting:multibounceambientocclusion">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/lighting:multibounceambientocclusion">&#xA0;</a><a class="target" name="toc4.2.23">&#xA0;</a><h3>Lighting: multiBounceAmbientOcclusion</h3>
+<a class="target" name="lighting:multibounceambientocclusion">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/lighting:multibounceambientocclusion">&nbsp;</a><a class="target" name="toc4.2.23">&nbsp;</a><h3>Lighting: multiBounceAmbientOcclusion</h3>
 <p>
 
 
@@ -1987,25 +1987,25 @@ with <code>clearCoatIorChange</code> enabled (left) and disabled
 </p></dd><dt>Description</dt><dd><p>     Multi-bounce ambient occlusion takes into account interreflections when applying ambient
      occlusion to image-based lighting. Turning this feature on avoids over-darkening occluded
      areas. It also takes the surface color into account to generate colored ambient occlusion.
-     <a href="#figure_multibounceao">Figure&#xA0;37</a> compares the ambient occlusion term of a surface with and without
+     <a href="#figure_multibounceao">Figure&nbsp;37</a> compares the ambient occlusion term of a surface with and without
      multi-bounce ambient occlusion. Notice how multi-bounce ambient occlusion introduces color
-     in the occluded areas. <a href="#figure_multibounceaoanimated">Figure&#xA0;38</a> toggles between multi-bounce ambient
+     in the occluded areas. <a href="#figure_multibounceaoanimated">Figure&nbsp;38</a> toggles between multi-bounce ambient
      occlusion on and off on a lit brick material to highlight the effects of this property.
 
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    multiBounceAmbientOcclusion : true</span>
 <span class="line">}</span></code></pre><p>
 
-</p><center><div class="image" style><a href="images/screenshot_multi_bounce_ao.jpg" target="_blank"><img class="markdeep" src="images/screenshot_multi_bounce_ao.jpg"></a><div class="imagecaption"><a class="target" name="figure_multibounceao">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;37:</b> Brick texture amient occlusion map rendered with multi-bounce ambient
+</p><center><div class="image" style=""><a href="images/screenshot_multi_bounce_ao.jpg" target="_blank"><img class="markdeep" src="images/screenshot_multi_bounce_ao.jpg"></a><div class="imagecaption"><a class="target" name="figure_multibounceao">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;37:</b> Brick texture amient occlusion map rendered with multi-bounce ambient
 occclusion enabled (left) and disabled (right).</div></div></center>
 
 <p></p><p>
 
-</p><center><div class="image" style><a href="images/screenshot_multi_bounce_ao.gif" target="_blank"><img class="markdeep" src="images/screenshot_multi_bounce_ao.gif"></a><div class="imagecaption"><a class="target" name="figure_multibounceaoanimated">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;38:</b> Brick texture rendered with multi-bounce ambient
+</p><center><div class="image" style=""><a href="images/screenshot_multi_bounce_ao.gif" target="_blank"><img class="markdeep" src="images/screenshot_multi_bounce_ao.gif"></a><div class="imagecaption"><a class="target" name="figure_multibounceaoanimated">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;38:</b> Brick texture rendered with multi-bounce ambient
 occclusion enabled and disabled.</div></div></center>
 
 <p></p>
-<a class="target" name="lighting:specularambientocclusion">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/lighting:specularambientocclusion">&#xA0;</a><a class="target" name="toc4.2.24">&#xA0;</a><h3>Lighting: specularAmbientOcclusion</h3>
+<a class="target" name="lighting:specularambientocclusion">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/lighting:specularambientocclusion">&nbsp;</a><a class="target" name="toc4.2.24">&nbsp;</a><h3>Lighting: specularAmbientOcclusion</h3>
 <p>
 
 
@@ -2018,22 +2018,22 @@ occclusion enabled and disabled.</div></div></center>
 </p></dd><dt>Description</dt><dd><p>     Static ambient occlusion maps and dynamic ambient occlusion (SSAO, etc.) apply to diffuse
      indirect lighting. When setting this property to other than <code>none</code>, a new ambient occlusion
      term is derived from the surface roughness and applied to specular indirect lighting.
-     This effect helps remove unwanted specular reflections as shown in <a href="#figure_specularao">figure&#xA0;39</a>.
+     This effect helps remove unwanted specular reflections as shown in <a href="#figure_specularao">figure&nbsp;39</a>.
      When this value is set to <code>simple</code>, Filament uses a cheap but approximate method of computing
      the specular ambient occlusion term. If this value is set to <code>bentNormals</code>, Filament will use
      a much more accurate but much more expensive method. <code>bentNormals</code> only works if the material
-     sets the <code>bentNormal</code> property inside the fragment shader. If that property isn&apos;t set,
+     sets the <code>bentNormal</code> property inside the fragment shader. If that property isn't set,
      <code>bentNormals</code> will behave like <code>simple</code>.
 
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    specularAmbientOcclusion : simple</span>
 <span class="line">}</span></code></pre><p>
 
-</p><center><div class="image" style><a href="images/screenshot_specular_ao.gif" target="_blank"><img class="markdeep" src="images/screenshot_specular_ao.gif"></a><div class="imagecaption"><a class="target" name="figure_specularao">&#xA0;</a><b style="font-style:normal;">Figure&#xA0;39:</b> Comparison of specular ambient occlusion on and off. The effect is
+</p><center><div class="image" style=""><a href="images/screenshot_specular_ao.gif" target="_blank"><img class="markdeep" src="images/screenshot_specular_ao.gif"></a><div class="imagecaption"><a class="target" name="figure_specularao">&nbsp;</a><b style="font-style:normal;">Figure&nbsp;39:</b> Comparison of specular ambient occlusion on and off. The effect is
 particularly visible under the hose.</div></div></center>
 
 <p></p>
-<a class="target" name="anti-aliasing:specularantialiasing">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/anti-aliasing:specularantialiasing">&#xA0;</a><a class="target" name="toc4.2.25">&#xA0;</a><h3>Anti-aliasing: specularAntiAliasing</h3>
+<a class="target" name="anti-aliasing:specularantialiasing">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/anti-aliasing:specularantialiasing">&nbsp;</a><a class="target" name="toc4.2.25">&nbsp;</a><h3>Anti-aliasing: specularAntiAliasing</h3>
 <p>
 
 
@@ -2050,7 +2050,7 @@ particularly visible under the hose.</div></div></center>
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    specularAntiAliasing : true</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="anti-aliasing:specularantialiasingvariance">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/anti-aliasing:specularantialiasingvariance">&#xA0;</a><a class="target" name="toc4.2.26">&#xA0;</a><h3>Anti-aliasing: specularAntiAliasingVariance</h3>
+<a class="target" name="anti-aliasing:specularantialiasingvariance">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/anti-aliasing:specularantialiasingvariance">&nbsp;</a><a class="target" name="toc4.2.26">&nbsp;</a><h3>Anti-aliasing: specularAntiAliasingVariance</h3>
 <p>
 
 
@@ -2065,7 +2065,7 @@ particularly visible under the hose.</div></div></center>
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    specularAntiAliasingVariance : 0.2</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="anti-aliasing:specularantialiasingthreshold">&#xA0;</a><a class="target" name="materialdefinitions/materialblock/anti-aliasing:specularantialiasingthreshold">&#xA0;</a><a class="target" name="toc4.2.27">&#xA0;</a><h3>Anti-aliasing: specularAntiAliasingThreshold</h3>
+<a class="target" name="anti-aliasing:specularantialiasingthreshold">&nbsp;</a><a class="target" name="materialdefinitions/materialblock/anti-aliasing:specularantialiasingthreshold">&nbsp;</a><a class="target" name="toc4.2.27">&nbsp;</a><h3>Anti-aliasing: specularAntiAliasingThreshold</h3>
 <p>
 
 
@@ -2079,7 +2079,7 @@ particularly visible under the hose.</div></div></center>
 </p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    specularAntiAliasingThreshold : 0.1</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="vertexblock">&#xA0;</a><a class="target" name="materialdefinitions/vertexblock">&#xA0;</a><a class="target" name="toc4.3">&#xA0;</a><h2>Vertex block</h2>
+<a class="target" name="vertexblock">&nbsp;</a><a class="target" name="materialdefinitions/vertexblock">&nbsp;</a><a class="target" name="toc4.3">&nbsp;</a><h2>Vertex block</h2>
 <p>
 
 
@@ -2119,7 +2119,7 @@ In addition to the <code>MaterialVertexInputs</code> structure, your vertex shad
 APIs listed in the <a href="#shaderpublicapis">Shader public APIs</a> section.
 
 </p>
-<a class="target" name="materialvertexinputs">&#xA0;</a><a class="target" name="materialdefinitions/vertexblock/materialvertexinputs">&#xA0;</a><a class="target" name="toc4.3.1">&#xA0;</a><h3>Material vertex inputs</h3>
+<a class="target" name="materialvertexinputs">&nbsp;</a><a class="target" name="materialdefinitions/vertexblock/materialvertexinputs">&nbsp;</a><a class="target" name="toc4.3.1">&nbsp;</a><h3>Material vertex inputs</h3>
 <pre class="listing tilde"><code><span class="line">struct MaterialVertexInputs {</span>
 <span class="line">    float4 color;              <span class="hljs-comment">// if the color attribute is required</span></span>
 <span class="line">    float2 uv0;                <span class="hljs-comment">// if the uv0 attribute is required</span></span>
@@ -2157,7 +2157,7 @@ APIs listed in the <a href="#shaderpublicapis">Shader public APIs</a> section.
     this behavior using the <code>flipUV</code> property and setting it to <code>false</code>.</p></div>
 
 <p></p>
-<a class="target" name="fragmentblock">&#xA0;</a><a class="target" name="materialdefinitions/fragmentblock">&#xA0;</a><a class="target" name="toc4.4">&#xA0;</a><h2>Fragment block</h2>
+<a class="target" name="fragmentblock">&nbsp;</a><a class="target" name="materialdefinitions/fragmentblock">&nbsp;</a><a class="target" name="toc4.4">&nbsp;</a><h2>Fragment block</h2>
 <p>
 
 
@@ -2194,7 +2194,7 @@ standard lit shading model:
 <span class="line">        material.roughness = <span class="hljs-number">0.0</span>;</span>
 <span class="line">    }</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="preparematerialfunction">&#xA0;</a><a class="target" name="materialdefinitions/fragmentblock/preparematerialfunction">&#xA0;</a><a class="target" name="toc4.4.1">&#xA0;</a><h3>prepareMaterial function</h3>
+<a class="target" name="preparematerialfunction">&nbsp;</a><a class="target" name="materialdefinitions/fragmentblock/preparematerialfunction">&nbsp;</a><a class="target" name="toc4.4.1">&nbsp;</a><h3>prepareMaterial function</h3>
 <p>
 
 
@@ -2225,7 +2225,7 @@ plastic with bump mapping:
 <span class="line">        material.roughness = <span class="hljs-number">1.0</span>;</span>
 <span class="line">    }</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="materialfragmentinputs">&#xA0;</a><a class="target" name="materialdefinitions/fragmentblock/materialfragmentinputs">&#xA0;</a><a class="target" name="toc4.4.2">&#xA0;</a><h3>Material fragment inputs</h3>
+<a class="target" name="materialfragmentinputs">&nbsp;</a><a class="target" name="materialdefinitions/fragmentblock/materialfragmentinputs">&nbsp;</a><a class="target" name="toc4.4.2">&nbsp;</a><h3>Material fragment inputs</h3>
 <pre class="listing tilde"><code><span class="line">struct MaterialInputs {</span>
 <span class="line">    float4 baseColor;           <span class="hljs-comment">// default: float4(1.0)</span></span>
 <span class="line">    float4 emissive;            <span class="hljs-comment">// default: float4(0.0, 0.0, 0.0, 1.0)</span></span>
@@ -2269,11 +2269,11 @@ plastic with bump mapping:
 <span class="line">    <span class="hljs-type">float</span> transmission;         <span class="hljs-comment">// default: 1.0</span></span>
 <span class="line">    float3 absorption;          <span class="hljs-comment">// default float3(0.0, 0.0, 0.0)</span></span>
 <span class="line">    <span class="hljs-type">float</span> ior;                  <span class="hljs-comment">// default: 1.5</span></span>
-<span class="line">    <span class="hljs-type">float</span> microThickness;       <span class="hljs-comment">// default: 0.0, not available with refractionType &quot;solid&quot;</span></span>
+<span class="line">    <span class="hljs-type">float</span> microThickness;       <span class="hljs-comment">// default: 0.0, not available with refractionType "solid"</span></span>
 <span class="line">}</span></code></pre>
-<a class="target" name="shaderpublicapis">&#xA0;</a><a class="target" name="materialdefinitions/shaderpublicapis">&#xA0;</a><a class="target" name="toc4.5">&#xA0;</a><h2>Shader public APIs</h2>
+<a class="target" name="shaderpublicapis">&nbsp;</a><a class="target" name="materialdefinitions/shaderpublicapis">&nbsp;</a><a class="target" name="toc4.5">&nbsp;</a><h2>Shader public APIs</h2>
 
-<a class="target" name="types">&#xA0;</a><a class="target" name="materialdefinitions/shaderpublicapis/types">&#xA0;</a><a class="target" name="toc4.5.1">&#xA0;</a><h3>Types</h3>
+<a class="target" name="types">&nbsp;</a><a class="target" name="materialdefinitions/shaderpublicapis/types">&nbsp;</a><a class="target" name="toc4.5.1">&nbsp;</a><h3>Types</h3>
 <p>
 
 
@@ -2292,12 +2292,12 @@ type aliases:
 <tr><td style="text-align:left"> <strong class="asterisk">float2</strong> </td><td style="text-align:center"> float2 </td><td style="text-align:left"> A vector of 2 floats </td></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">float3</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:left"> A vector of 3 floats </td></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">float4</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:left"> A vector of 4 floats </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">float4&#xD7;4</strong> </td><td style="text-align:center"> mat4 </td><td style="text-align:left"> A 4&#xD7;4 float matrix </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">float3&#xD7;3</strong> </td><td style="text-align:center"> mat3 </td><td style="text-align:left"> A 3&#xD7;3 float matrix </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">float4×4</strong> </td><td style="text-align:center"> mat4 </td><td style="text-align:left"> A 4×4 float matrix </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">float3×3</strong> </td><td style="text-align:center"> mat3 </td><td style="text-align:left"> A 3×3 float matrix </td></tr>
 </tbody></table></div>
 
 <p></p>
-<a class="target" name="math">&#xA0;</a><a class="target" name="materialdefinitions/shaderpublicapis/math">&#xA0;</a><a class="target" name="toc4.5.2">&#xA0;</a><h3>Math</h3>
+<a class="target" name="math">&nbsp;</a><a class="target" name="materialdefinitions/shaderpublicapis/math">&nbsp;</a><a class="target" name="toc4.5.2">&nbsp;</a><h3>Math</h3>
 <p>
 </p><div class="table"><table class="table"><tbody><tr><th style="text-align:left"> Name </th><th style="text-align:center"> Type </th><th style="text-align:left"> Description </th></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">PI</strong> </td><td style="text-align:center"> float </td><td style="text-align:left"> A constant that represent \(\pi\) </td></tr>
@@ -2306,25 +2306,25 @@ type aliases:
 <tr><td style="text-align:left"> <strong class="asterisk">pow5(float x)</strong> </td><td style="text-align:center"> float </td><td style="text-align:left"> Computes \(x^5\) </td></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">sq(float x)</strong> </td><td style="text-align:center"> float </td><td style="text-align:left"> Computes \(x^2\) </td></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">max3(float3 v)</strong> </td><td style="text-align:center"> float </td><td style="text-align:left"> Returns the maximum value of the specified <code>float3</code> </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">mulMat4&#xD7;4Float3(float4&#xD7;4 m, float3 v)</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:left"> Returns \(m * v\) </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">mulMat3&#xD7;3Float3(float4&#xD7;4 m, float3 v)</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:left"> Returns \(m * v\) </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">mulMat4×4Float3(float4×4 m, float3 v)</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:left"> Returns \(m * v\) </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">mulMat3×3Float3(float4×4 m, float3 v)</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:left"> Returns \(m * v\) </td></tr>
 </tbody></table></div>
 
 <p></p>
-<a class="target" name="matrices">&#xA0;</a><a class="target" name="materialdefinitions/shaderpublicapis/matrices">&#xA0;</a><a class="target" name="toc4.5.3">&#xA0;</a><h3>Matrices</h3>
+<a class="target" name="matrices">&nbsp;</a><a class="target" name="materialdefinitions/shaderpublicapis/matrices">&nbsp;</a><a class="target" name="toc4.5.3">&nbsp;</a><h3>Matrices</h3>
 <p>
 
 </p><div class="table"><table class="table"><tbody><tr><th style="text-align:left"> Name </th><th style="text-align:center"> Type </th><th style="text-align:left"> Description </th></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">getViewFromWorldMatrix()</strong> </td><td style="text-align:center"> float4&#xD7;4 </td><td style="text-align:left"> Matrix that converts from world space to view/eye space </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">getWorldFromViewMatrix()</strong> </td><td style="text-align:center"> float4&#xD7;4 </td><td style="text-align:left"> Matrix that converts from view/eye space to world space </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">getClipFromViewMatrix()</strong> </td><td style="text-align:center"> float4&#xD7;4 </td><td style="text-align:left"> Matrix that converts from view/eye space to clip (NDC) space </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">getViewFromClipMatrix()</strong> </td><td style="text-align:center"> float4&#xD7;4 </td><td style="text-align:left"> Matrix that converts from clip (NDC) space to view/eye space </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">getClipFromWorldMatrix()</strong> </td><td style="text-align:center"> float4&#xD7;4 </td><td style="text-align:left"> Matrix that converts from world to clip (NDC) space </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">getWorldFromClipMatrix()</strong> </td><td style="text-align:center"> float4&#xD7;4 </td><td style="text-align:left"> Matrix that converts from clip (NDC) space to world space </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getViewFromWorldMatrix()</strong> </td><td style="text-align:center"> float4×4 </td><td style="text-align:left"> Matrix that converts from world space to view/eye space </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getWorldFromViewMatrix()</strong> </td><td style="text-align:center"> float4×4 </td><td style="text-align:left"> Matrix that converts from view/eye space to world space </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getClipFromViewMatrix()</strong> </td><td style="text-align:center"> float4×4 </td><td style="text-align:left"> Matrix that converts from view/eye space to clip (NDC) space </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getViewFromClipMatrix()</strong> </td><td style="text-align:center"> float4×4 </td><td style="text-align:left"> Matrix that converts from clip (NDC) space to view/eye space </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getClipFromWorldMatrix()</strong> </td><td style="text-align:center"> float4×4 </td><td style="text-align:left"> Matrix that converts from world to clip (NDC) space </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getWorldFromClipMatrix()</strong> </td><td style="text-align:center"> float4×4 </td><td style="text-align:left"> Matrix that converts from clip (NDC) space to world space </td></tr>
 </tbody></table></div>
 
 <p></p>
-<a class="target" name="frameconstants">&#xA0;</a><a class="target" name="materialdefinitions/shaderpublicapis/frameconstants">&#xA0;</a><a class="target" name="toc4.5.4">&#xA0;</a><h3>Frame constants</h3>
+<a class="target" name="frameconstants">&nbsp;</a><a class="target" name="materialdefinitions/shaderpublicapis/frameconstants">&nbsp;</a><a class="target" name="toc4.5.4">&nbsp;</a><h3>Frame constants</h3>
 <p>
 
 </p><div class="table"><table class="table"><tbody><tr><th style="text-align:left"> Name </th><th style="text-align:center"> Type </th><th style="text-align:left"> Description </th></tr>
@@ -2344,12 +2344,12 @@ type aliases:
 
 <p></p><p>
 
-    To achieve good precision, the &#x201C;world space&#x201D; in Filament&apos;s shading system does not necessarily
+    To achieve good precision, the “world space” in Filament's shading system does not necessarily
     match the API-level world space. To obtain the position of the API-level camera, custom
     materials can add <code>getWorldOffset()</code> to <code>getWorldCameraPosition()</code>.</p></div>
 
 <p></p>
-<a class="target" name="vertexonly">&#xA0;</a><a class="target" name="materialdefinitions/shaderpublicapis/vertexonly">&#xA0;</a><a class="target" name="toc4.5.5">&#xA0;</a><h3>Vertex only</h3>
+<a class="target" name="vertexonly">&nbsp;</a><a class="target" name="materialdefinitions/shaderpublicapis/vertexonly">&nbsp;</a><a class="target" name="toc4.5.5">&nbsp;</a><h3>Vertex only</h3>
 <p>
 
 
@@ -2357,18 +2357,19 @@ The following APIs are only available from the vertex block:
 </p><div class="table"><table class="table"><tbody><tr><th style="text-align:left"> Name </th><th style="text-align:center"> Type </th><th style="text-align:left"> Description </th></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">getPosition()</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:left"> Vertex position in the domain defined by the material (default: object/model space) </td></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">getCustom0()</strong> to <strong class="asterisk">getCustom7()</strong> </td><td style="text-align:center"> float4 </td><td style="text-align:left"> Custom vertex attribute </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">getWorldFromModelMatrix()</strong> </td><td style="text-align:center"> float4&#xD7;4 </td><td style="text-align:left"> Matrix that converts from model (object) space to world space </td></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">getWorldFromModelNormalMatrix()</strong> </td><td style="text-align:center"> float3&#xD7;3 </td><td style="text-align:left"> Matrix that converts normals from model (object) space to world space </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getWorldFromModelMatrix()</strong> </td><td style="text-align:center"> float4×4 </td><td style="text-align:left"> Matrix that converts from model (object) space to world space </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getWorldFromModelNormalMatrix()</strong> </td><td style="text-align:center"> float3×3 </td><td style="text-align:left"> Matrix that converts normals from model (object) space to world space </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getVertexIndex()</strong> </td><td style="text-align:center"> int </td><td style="text-align:left"> Index of the current vertex </td></tr>
 </tbody></table></div>
 
 <p></p>
-<a class="target" name="fragmentonly">&#xA0;</a><a class="target" name="materialdefinitions/shaderpublicapis/fragmentonly">&#xA0;</a><a class="target" name="toc4.5.6">&#xA0;</a><h3>Fragment only</h3>
+<a class="target" name="fragmentonly">&nbsp;</a><a class="target" name="materialdefinitions/shaderpublicapis/fragmentonly">&nbsp;</a><a class="target" name="toc4.5.6">&nbsp;</a><h3>Fragment only</h3>
 <p>
 
 
 The following APIs are only available from the fragment block:
 </p><div class="table"><table class="table"><tbody><tr><th style="text-align:left"> Name </th><th style="text-align:center"> Type </th><th style="text-align:left"> Description </th></tr>
-<tr><td style="text-align:left"> <strong class="asterisk">getWorldTangentFrame()</strong> </td><td style="text-align:center"> float3&#xD7;3 </td><td style="text-align:left"> Matrix containing in each column the <code>tangent</code> (<code>frame[0]</code>), <code>bi-tangent</code> (<code>frame[1]</code>) and <code>normal</code> (<code>frame[2]</code>) of the vertex in world space. If the material does not compute a tangent space normal for bump mapping or if the shading is not anisotropic, only the <code>normal</code> is valid in this matrix. </td></tr>
+<tr><td style="text-align:left"> <strong class="asterisk">getWorldTangentFrame()</strong> </td><td style="text-align:center"> float3×3 </td><td style="text-align:left"> Matrix containing in each column the <code>tangent</code> (<code>frame[0]</code>), <code>bi-tangent</code> (<code>frame[1]</code>) and <code>normal</code> (<code>frame[2]</code>) of the vertex in world space. If the material does not compute a tangent space normal for bump mapping or if the shading is not anisotropic, only the <code>normal</code> is valid in this matrix. </td></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">getWorldPosition()</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:left"> Position of the fragment in world space (see note below about world-space) </td></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">getWorldViewVector()</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:left"> Normalized vector in world space from the fragment position to the eye </td></tr>
 <tr><td style="text-align:left"> <strong class="asterisk">getWorldNormalVector()</strong> </td><td style="text-align:center"> float3 </td><td style="text-align:left"> Normalized normal in world space, after bump mapping (must be used after <code>prepareMaterial()</code>) </td></tr>
@@ -2407,7 +2408,7 @@ The following APIs are only available from the fragment block:
     coordinate. This will flip the coordinate depending on which backend is being used.</p></div>
 
 <p></p>
-<a class="target" name="compilingmaterials">&#xA0;</a><a class="target" name="compilingmaterials">&#xA0;</a><a class="target" name="toc5">&#xA0;</a><h1>Compiling materials</h1>
+<a class="target" name="compilingmaterials">&nbsp;</a><a class="target" name="compilingmaterials">&nbsp;</a><a class="target" name="toc5">&nbsp;</a><h1>Compiling materials</h1>
 <p>
 
 
@@ -2416,7 +2417,7 @@ Material packages can be compiled from material definitions using the command li
 in the example below) and an output material package (<code>car_paint.filamat</code> in the example below):
 
 </p><pre class="listing backtick"><code><span class="line">$ matc -o ./materials/bin/car_paint.filamat ./materials/src/car_paint.mat</span></code></pre>
-<a class="target" name="shadervalidation">&#xA0;</a><a class="target" name="compilingmaterials/shadervalidation">&#xA0;</a><a class="target" name="toc5.1">&#xA0;</a><h2>Shader validation</h2>
+<a class="target" name="shadervalidation">&nbsp;</a><a class="target" name="compilingmaterials/shadervalidation">&nbsp;</a><a class="target" name="toc5.1">&nbsp;</a><h2>Shader validation</h2>
 <p>
 
 
@@ -2425,25 +2426,25 @@ example of an error message generated when compiling a material definition conta
 fragment shader (<code>metalic</code> instead of <code>metallic</code>). The reported line numbers are line numbers in the
 source material definition file.
 
-</p><pre class="listing backtick"><code><span class="line">ERROR: 0:13: &apos;metalic&apos; : no such field in structure</span>
-<span class="line">ERROR: 0:13: &apos;&apos; : compilation terminated</span>
+</p><pre class="listing backtick"><code><span class="line">ERROR: 0:13: 'metalic' : no such field in structure</span>
+<span class="line">ERROR: 0:13: '' : compilation terminated</span>
 <span class="line">ERROR: 2 compilation errors.  No code generated.</span>
 <span class="line"></span>
 <span class="line">Could not compile material metal.mat</span></code></pre>
-<a class="target" name="flags">&#xA0;</a><a class="target" name="compilingmaterials/flags">&#xA0;</a><a class="target" name="toc5.2">&#xA0;</a><h2>Flags</h2>
+<a class="target" name="flags">&nbsp;</a><a class="target" name="compilingmaterials/flags">&nbsp;</a><a class="target" name="toc5.2">&nbsp;</a><h2>Flags</h2>
 <p>
 
 
-The command line flags relevant to application development are described in <a href="#table_matcflags">table&#xA0;14</a>.
+The command line flags relevant to application development are described in <a href="#table_matcflags">table&nbsp;14</a>.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Flag </th><th style="text-align:center"> Value </th><th style="text-align:left"> Usage </th></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">-o</strong>, <strong class="asterisk">&#x2014;output</strong> </td><td style="text-align:center"> [path] </td><td style="text-align:left"> Specify the output file path </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">-p</strong>, <strong class="asterisk">&#x2014;platform</strong> </td><td style="text-align:center"> desktop/mobile/all </td><td style="text-align:left"> Select the target platform(s) </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">-a</strong>, <strong class="asterisk">&#x2014;api</strong> </td><td style="text-align:center"> opengl/vulkan/all </td><td style="text-align:left"> Specify the target graphics API </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">-S</strong>, <strong class="asterisk">&#x2014;optimize-size</strong> </td><td style="text-align:center"> N/A </td><td style="text-align:left"> Optimize compiled material for size instead of just performance </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">-r</strong>, <strong class="asterisk">&#x2014;reflect</strong> </td><td style="text-align:center"> parameters </td><td style="text-align:left"> Outputs the specified metadata as JSON </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">-v</strong>, <strong class="asterisk">&#x2014;variant-filter</strong> </td><td style="text-align:center"> [variant] </td><td style="text-align:left"> Filters out the specified, comma-separated variants </td></tr>
-</tbody></table><div class="tablecaption"><a class="target" name="table_matcflags">&#xA0;</a><b style="font-style:normal;">Table&#xA0;14:</b> List of <code>matc</code> flags</div></div>
+<tr><td style="text-align:right"> <strong class="asterisk">-o</strong>, <strong class="asterisk">—output</strong> </td><td style="text-align:center"> [path] </td><td style="text-align:left"> Specify the output file path </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">-p</strong>, <strong class="asterisk">—platform</strong> </td><td style="text-align:center"> desktop/mobile/all </td><td style="text-align:left"> Select the target platform(s) </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">-a</strong>, <strong class="asterisk">—api</strong> </td><td style="text-align:center"> opengl/vulkan/all </td><td style="text-align:left"> Specify the target graphics API </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">-S</strong>, <strong class="asterisk">—optimize-size</strong> </td><td style="text-align:center"> N/A </td><td style="text-align:left"> Optimize compiled material for size instead of just performance </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">-r</strong>, <strong class="asterisk">—reflect</strong> </td><td style="text-align:center"> parameters </td><td style="text-align:left"> Outputs the specified metadata as JSON </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">-v</strong>, <strong class="asterisk">—variant-filter</strong> </td><td style="text-align:center"> [variant] </td><td style="text-align:left"> Filters out the specified, comma-separated variants </td></tr>
+</tbody></table><div class="tablecaption"><a class="target" name="table_matcflags">&nbsp;</a><b style="font-style:normal;">Table&nbsp;14:</b> List of <code>matc</code> flags</div></div>
 
 <p></p><p>
 
@@ -2451,7 +2452,7 @@ The command line flags relevant to application development are described in <a h
 use only.
 
 </p>
-<a class="target" name="--platform">&#xA0;</a><a class="target" name="compilingmaterials/flags/&#x2014;platform">&#xA0;</a><a class="target" name="toc5.2.1">&#xA0;</a><h3>&#x2014;platform</h3>
+<a class="target" name="--platform">&nbsp;</a><a class="target" name="compilingmaterials/flags/—platform">&nbsp;</a><a class="target" name="toc5.2.1">&nbsp;</a><h3>—platform</h3>
 <p>
 
 
@@ -2461,7 +2462,7 @@ appropriate target platform. For instance, to compile a material package for And
 the following command:
 
 </p><pre class="listing backtick"><code><span class="line">$ matc -p mobile -o ./materials/bin/car_paint.filamat ./materials/src/car_paint.mat</span></code></pre>
-<a class="target" name="--api">&#xA0;</a><a class="target" name="compilingmaterials/flags/&#x2014;api">&#xA0;</a><a class="target" name="toc5.2.2">&#xA0;</a><h3>&#x2014;api</h3>
+<a class="target" name="--api">&nbsp;</a><a class="target" name="compilingmaterials/flags/—api">&nbsp;</a><a class="target" name="toc5.2.2">&nbsp;</a><h3>—api</h3>
 <p>
 
 
@@ -2471,7 +2472,7 @@ only Vulkan capable devices, you can reduce the size of the material packages by
 the set of Vulkan shaders:
 
 </p><pre class="listing backtick"><code><span class="line">$ matc -a vulkan -o ./materials/bin/car_paint.filamat ./materials/src/car_paint.mat</span></code></pre>
-<a class="target" name="--optimize-size">&#xA0;</a><a class="target" name="compilingmaterials/flags/&#x2014;optimize-size">&#xA0;</a><a class="target" name="toc5.2.3">&#xA0;</a><h3>&#x2014;optimize-size</h3>
+<a class="target" name="--optimize-size">&nbsp;</a><a class="target" name="compilingmaterials/flags/—optimize-size">&nbsp;</a><a class="target" name="toc5.2.3">&nbsp;</a><h3>—optimize-size</h3>
 <p>
 
 
@@ -2480,32 +2481,32 @@ possible. If the compiled material is deemed too large by default, using this fl
 a good compromise between runtime performance and size.
 
 </p>
-<a class="target" name="--reflect">&#xA0;</a><a class="target" name="compilingmaterials/flags/&#x2014;reflect">&#xA0;</a><a class="target" name="toc5.2.4">&#xA0;</a><h3>&#x2014;reflect</h3>
+<a class="target" name="--reflect">&nbsp;</a><a class="target" name="compilingmaterials/flags/—reflect">&nbsp;</a><a class="target" name="toc5.2.4">&nbsp;</a><h3>—reflect</h3>
 <p>
 
 
 This flag was designed to help build tools around <code>matc</code>. It allows you to print out specific
-metadata in JSON format. The example below prints out the list of parameters defined in Filament&apos;s
+metadata in JSON format. The example below prints out the list of parameters defined in Filament's
 standard skybox material. It produces a list of 2 parameters, named <code>showSun</code> and <code>skybox</code>,
 respectively a boolean and a cubemap texture.
 
 </p><pre class="listing backtick"><code><span class="line">$ matc --reflect parameters filament/src/materials/skybox.mat </span>
 <span class="line">{</span>
-<span class="line">  &quot;parameters&quot;: [</span>
+<span class="line">  "parameters": [</span>
 <span class="line">    {</span>
-<span class="line">      &quot;name&quot;: &quot;showSun&quot;,</span>
-<span class="line">      &quot;type&quot;: &quot;bool&quot;,</span>
-<span class="line">      &quot;size&quot;: &quot;1&quot;</span>
+<span class="line">      "name": "showSun",</span>
+<span class="line">      "type": "bool",</span>
+<span class="line">      "size": "1"</span>
 <span class="line">    },</span>
 <span class="line">    {</span>
-<span class="line">      &quot;name&quot;: &quot;skybox&quot;,</span>
-<span class="line">      &quot;type&quot;: &quot;samplerCubemap&quot;,</span>
-<span class="line">      &quot;format&quot;: &quot;float&quot;,</span>
-<span class="line">      &quot;precision&quot;: &quot;default&quot;</span>
+<span class="line">      "name": "skybox",</span>
+<span class="line">      "type": "samplerCubemap",</span>
+<span class="line">      "format": "float",</span>
+<span class="line">      "precision": "default"</span>
 <span class="line">    }</span>
 <span class="line">  ]</span>
 <span class="line">}</span></code></pre>
-<a class="target" name="--variant-filter">&#xA0;</a><a class="target" name="compilingmaterials/flags/&#x2014;variant-filter">&#xA0;</a><a class="target" name="toc5.2.5">&#xA0;</a><h3>&#x2014;variant-filter</h3>
+<a class="target" name="--variant-filter">&nbsp;</a><a class="target" name="compilingmaterials/flags/—variant-filter">&nbsp;</a><a class="target" name="toc5.2.5">&nbsp;</a><h3>—variant-filter</h3>
 <p>
 
 
@@ -2528,7 +2529,11 @@ variants:
 </li>
 <li class="minus"><code>shadowReceiver</code>, used when an object can receive shadows
 </li>
-<li class="minus"><code>skinning</code>, used when an object is animated using GPU skinning or vertex morphing</li></ul>
+<li class="minus"><code>skinning</code>, used when an object is animated using GPU skinning or vertex morphing
+</li>
+<li class="minus"><code>fog</code>, used when global fog is applied to the scene
+</li>
+<li class="minus"><code>vsm</code>, used when VSM shadows are enabled and the object is a shadow receiver</li></ul>
 
 <p></p><p>
 
@@ -2548,9 +2553,9 @@ in the material itself.
 Use this flag with caution, filtering out a variant required at runtime may lead to crashes.
 
 </p>
-<a class="target" name="handlingcolors">&#xA0;</a><a class="target" name="handlingcolors">&#xA0;</a><a class="target" name="toc6">&#xA0;</a><h1>Handling colors</h1>
+<a class="target" name="handlingcolors">&nbsp;</a><a class="target" name="handlingcolors">&nbsp;</a><a class="target" name="toc6">&nbsp;</a><h1>Handling colors</h1>
 
-<a class="target" name="linearcolors">&#xA0;</a><a class="target" name="handlingcolors/linearcolors">&#xA0;</a><a class="target" name="toc6.1">&#xA0;</a><h2>Linear colors</h2>
+<a class="target" name="linearcolors">&nbsp;</a><a class="target" name="handlingcolors/linearcolors">&nbsp;</a><a class="target" name="toc6.1">&nbsp;</a><h2>Linear colors</h2>
 <p>
 
 
@@ -2569,7 +2574,7 @@ Alternatively you can use one of the two cheaper but less accurate versions show
 <span class="line">linearColor = <span class="hljs-built_in">pow</span>(color, <span class="hljs-number">2.2</span>);</span>
 <span class="line"><span class="hljs-comment">// Cheapest</span></span>
 <span class="line">linearColor = color * color;</span></code></pre>
-<a class="target" name="pre-multipliedalpha">&#xA0;</a><a class="target" name="handlingcolors/pre-multipliedalpha">&#xA0;</a><a class="target" name="toc6.2">&#xA0;</a><h2>Pre-multiplied alpha</h2>
+<a class="target" name="pre-multipliedalpha">&nbsp;</a><a class="target" name="handlingcolors/pre-multipliedalpha">&nbsp;</a><a class="target" name="toc6.2">&nbsp;</a><h2>Pre-multiplied alpha</h2>
 <p>
 
 
@@ -2585,5 +2590,5 @@ pre-multiplied by default.
 
 </p><p>
 
-</p></span><div class="markdeepFooter"><i>formatted by <a href="http://casual-effects.com/markdeep" style="color:#999">Markdeep&#xA0;1.03&#xA0;&#xA0;</a></i><div style="display:inline-block;font-size:13px;font-family:&apos;Times New Roman&apos;,serif;vertical-align:middle;transform:translate(-3px,-1px)rotate(135deg);">&#x2712;</div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>
+</p></span><div class="markdeepFooter"><i>formatted by <a href="http://casual-effects.com/markdeep" style="color:#999">Markdeep&nbsp;1.03&nbsp;&nbsp;</a></i><div style="display:inline-block;font-size:13px;font-family:'Times New Roman',serif;vertical-align:middle;transform:translate(-3px,-1px)rotate(135deg);">✒</div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>
 </body></html>
\ No newline at end of file
diff --git a/docs/Materials.md.html b/docs/Materials.md.html
index e5d6a33829..49de5d9cc7 100644
--- a/docs/Materials.md.html
+++ b/docs/Materials.md.html
@@ -2065,6 +2065,8 @@ variants:
 - `dynamicLighting`, used when a non-directional light (point, spot, etc.) is present in the scene
 - `shadowReceiver`, used when an object can receive shadows
 - `skinning`, used when an object is animated using GPU skinning or vertex morphing
+- `fog`, used when global fog is applied to the scene
+- `vsm`, used when VSM shadows are enabled and the object is a shadow receiver
 
 Example:
 ```