updated mathjax 🚀

Author: chicio

_includes/dependencies-js-blog.html

@@ -1,21 +1,30 @@
 {% if page.math %}
-<script type="text/x-mathjax-config">
-    MathJax.Hub.Config({
-        jax: ["input/TeX","output/SVG"],
-        messageStyle: "none",
-        tex2jax: {
-            inlineMath: [['$','$']],
-            processEscapes: true
-        },
-        "HTML-CSS": {
-            linebreaks: { automatic: true }
-        },
-        SVG: {
-            linebreaks: { automatic: true }
-        }
-    });
+<script>
+window.MathJax = {
+  tex: {
+    inlineMath: [['$','$']],
+    displayMath: [['£$', '£$']],
+    processEscapes: true,
+    autoload: {
+      color: [],
+      colorV2: ['color']
+    },
+    packages: {'[+]': ['noerrors']}
+  },
+  svg: {
+    fontCache: 'global'
+  },
+  options: {
+    ignoreHtmlClass: 'tex2jax_ignore',
+    processHtmlClass: 'tex2jax_process'
+  },
+  loader: {
+    load: ['[tex]/noerrors']
+  }
+};
 </script>
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_SVG"></script>
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" id="MathJax-script"></script>
 {% endif %}
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
 <script type="text/javascript" src="/assets/js/index.blog.min.js?rev=9a2b035a05763800c451c5b6834f504b"></script>

_posts/2017-07-26-phong-lighting-model.md

@@ -45,7 +45,7 @@ This is the light component emitted by the surface material. Is a purely additiv
 speaking you can use the scene light RGB color. The emissive constant $k_{\text{e}}$ is a surface property that express its emissive 
 reflectance.
 
-$$I_{\text{emissive}}=k_{\text{e}}I_{\text{LE}}$$
+£$I_{\text{emissive}}=k_{\text{e}}I_{\text{LE}}£$
 
 #### **Ambient component**
 
@@ -57,7 +57,7 @@ constant related exclusively to the surface material that express empirically it
 As for the emissive component, the ambient light intensity could be the intensity of the scene light (or an average if 
 you have multiple scene lights).
 
-$$I_{\text{ambient}}=k_{\text{a}}I_{\text{LA}}$$
+£$I_{\text{ambient}}=k_{\text{a}}I_{\text{LA}}£$
 
 #### **Diffusive component**  
 
@@ -69,19 +69,19 @@ and with the attenuation factor due to incident light given by the cosine of the
 normal $\cos\theta$.  This last value is the dot product between the surface normal ${\hat {N}}$ and the light direction ${\hat {L}}$. 
 So the final formula for the diffuse component is:
 
-$$I_{\text{diffuse}}=k_{\text{d}}I_{\text{LD}}({\hat {L}}\cdot{\hat {N}})$$
+£$I_{\text{diffuse}}=k_{\text{d}}I_{\text{LD}}({\hat {L}}\cdot{\hat {N}})£$
 
 #### **Specular component**
 
-This light component represents the amount of reflected light in a specific direction (mirror alike reflection). Light is reflected in a different way depending on the incident light direction. Shiny materials are the one with a high specular component. The perceived specular light depends on the position of the observer with respect to the surface. In particular, the specular illumination is influenced by $\cos\alpha$, that is the cosine of the angle between the direction from the surface point towards the view ${\hat {V}}$ and the direction that a perfectly reflected ray of light would take from this point on the surface ${\hat {R}}$. The size of the specular highlights is regulated by a shininess constant $$n$$, based on the surface material properties. Given all this information the specular component formula obtained by multiplying the specular surface constant $k_{\text{s}}$ with the light specular intensity $I_{\text{LS}}$ and with dot product of the reflection direction ${\hat {R}}$ and the the direction from the surface point towards the view ${\hat {V}}$ squared to the shininess constant $$n$$:
+This light component represents the amount of reflected light in a specific direction (mirror alike reflection). Light is reflected in a different way depending on the incident light direction. Shiny materials are the one with a high specular component. The perceived specular light depends on the position of the observer with respect to the surface. In particular, the specular illumination is influenced by $\cos\alpha$, that is the cosine of the angle between the direction from the surface point towards the view ${\hat {V}}$ and the direction that a perfectly reflected ray of light would take from this point on the surface ${\hat {R}}$. The size of the specular highlights is regulated by a shininess constant £$n£$, based on the surface material properties. Given all this information the specular component formula obtained by multiplying the specular surface constant $k_{\text{s}}$ with the light specular intensity $I_{\text{LS}}$ and with dot product of the reflection direction ${\hat {R}}$ and the the direction from the surface point towards the view ${\hat {V}}$ squared to the shininess constant £$n£$:
 
-$$I_{\text{specular}}=k_{\text{s}}I_{\text{LS}}({\hat {R}}\cdot {\hat {V}})^{n}$$
+£$I_{\text{specular}}=k_{\text{s}}I_{\text{LS}}({\hat {R}}\cdot {\hat {V}})^{n}£$
 
 The above observation are valid also in case we have multiple lights. The only difference is that the diffuse and specular 
 component are calculated for each light and their sum is the final diffuse and specular component.
 Now we are ready to write the complete Phong reflection lighting equation:
 
-$$I_{\text{tot}}=k_{\text{e}}I_{\text{LE}}+k_{\text{a}}I_{\text{LA}}+\sum _{p\;\in \;{\text{lights}}}(k_{\text{d}}I_{p,{\text{LD}}} ({\hat {L}}_{p}\cdot {\hat {N}})+k_{\text{s}}I_{p,{\text{LS}}}({\hat {R}}_{p}\cdot {\hat {V}})^{n})$$
+£$I_{\text{tot}}=k_{\text{e}}I_{\text{LE}}+k_{\text{a}}I_{\text{LA}}+\sum _{p\;\in \;{\text{lights}}}(k_{\text{d}}I_{p,{\text{LD}}} ({\hat {L}}_{p}\cdot {\hat {N}})+k_{\text{s}}I_{p,{\text{LS}}}({\hat {R}}_{p}\cdot {\hat {V}})^{n})£$
 
 Just a final note: we distinguished different type of light intensity based on the component. In fact most of the time this model is implemented using a single general light intensity triplet for all the component for each light.
 How can you implement it in a OpenGL ES shader? The following code sample is a simple implementation of this model using RGB colors.

_posts/2017-08-25-how-to-calculate-reflection-vector.md

@@ -25,7 +25,7 @@ vec3 reflectionDirection = reflect(-lightDirection, normalInterp);
 Easy, isn't it? But the most curios of you may asking: "How the f*$k this method calculate this reflection direction?" :stuck_out_tongue_closed_eyes:  
 We will suppose as in the previous post about the phong model that all vectors are normalized. Let's start from the beginning. The formula to calculate the reflection direction is:  
 
-$$R = 2({\hat{N}}\cdot{\hat{L}}){\hat{N}} - {\hat{L}}$$
+£$R = 2({\hat{N}}\cdot{\hat{L}}){\hat{N}} - {\hat{L}}£$
 
 How is this formula obtained? Let's start from a picture that represents our reflection vector and the other vectors
 used in the calculation.
@@ -42,40 +42,40 @@ normal.
 Now we are ready for our demonstration :sunglasses:.  
 From the law of refraction reported above we know that:
 
-$$\Theta_R=\Theta_L$$
+£$\Theta_R=\Theta_L£$
 
 This equation could be rewritten as the dot product of the reflection direction with the normal equals the dot product of the incident light direction and the normal (remember that the [dot product of two vector is equal to the cosine of the angle between them](https://en.wikipedia.org/wiki/Dot_product "dot product of two vector is equal to the cosine of the angle between them")). So we have:  
 
-$${\hat {R}} \cdot {\hat {N}} = {\hat {L}} \cdot {\hat {N}}$$
+£${\hat {R}} \cdot {\hat {N}} = {\hat {L}} \cdot {\hat {N}}£$
 
 From the image above it's also evident for symmetry that:
 
-$${\hat {U}^{\prime}} = -{\hat {U}^{\prime \prime}}$$
+£${\hat {U}^{\prime}} = -{\hat {U}^{\prime \prime}}£$
 
 As you can see again from the image above, this two vectors could be easily calculated. In fact the first one is the difference between the reflection vector and the [projection](https://en.wikipedia.org/wiki/Vector_projection "vector projection") of it on the normal. The second one is the difference between the light incident vector and the projection of it on the normal. So for the reflection side we could write:
 
-$${\hat {U}^{\prime}} = {\hat {R}} - {\hat {N}^{\prime}} = {\hat {R}} - ({\hat {R}} \cdot {\hat {N}}){\hat {N}}$$  
+£${\hat {U}^{\prime}} = {\hat {R}} - {\hat {N}^{\prime}} = {\hat {R}} - ({\hat {R}} \cdot {\hat {N}}){\hat {N}}£$  
 
 For the light side we could write:
 
-$${\hat {U}^{\prime \prime}} = {\hat {L}} - {\hat {N}^{\prime \prime}} = {\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}}$$
+£${\hat {U}^{\prime \prime}} = {\hat {L}} - {\hat {N}^{\prime \prime}} = {\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}}£$
 
 As a consequence we obtain the following equation:
 
-$${\hat {R}} - ({\hat {R}} \cdot {\hat {N}}){\hat {N}} = -({\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}})$$
+£${\hat {R}} - ({\hat {R}} \cdot {\hat {N}}){\hat {N}} = -({\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}})£$
 
 Now we can see again from the image above that the vector projections ${\hat {N}^{\prime}}$ and ${\hat {N}^{\prime \prime}}$ are equals, that means we could change the previous equation by substituting the first one with the second one. So we obtain the following equation:
 
-$${\hat {R}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}} = -({\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}})$$
+£${\hat {R}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}} = -({\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}})£$
 
 Now we have all we need to calculate our R vector:
 
-$${\hat {R}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}} = -({\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}})$$
+£${\hat {R}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}} = -({\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}})£$
 
-$${\hat {R}} = ({\hat {L}} \cdot {\hat {N}}){\hat {N}} - ({\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}})$$
+£${\hat {R}} = ({\hat {L}} \cdot {\hat {N}}){\hat {N}} - ({\hat {L}} - ({\hat {L}} \cdot {\hat {N}}){\hat {N}})£$
 
-$${\hat {R}} = ({\hat {L}} \cdot {\hat {N}}){\hat {N}} - {\hat {L}} + ({\hat {L}} \cdot {\hat {N}}){\hat {N}}$$
+£${\hat {R}} = ({\hat {L}} \cdot {\hat {N}}){\hat {N}} - {\hat {L}} + ({\hat {L}} \cdot {\hat {N}}){\hat {N}}£$
 
-$$R = 2({\hat{N}}\cdot{\hat{L}}){\hat{N}} - {\hat{L}}$$
+£$R = 2({\hat{N}}\cdot{\hat{L}}){\hat{N}} - {\hat{L}}£$
 
 That's it!! We get our formula. Now you're ready to understand in detail [the "magic" of the Phong lighting model](/2017/07/26/phong-lighting-model.html) :relaxed:.

_posts/2017-12-07-physically-base-rendering-introduction.md

@@ -28,7 +28,7 @@ Other two important quantities of radiometry are **irradiance** and **radiant ex
 arriving at a surface per unit area. The second one describe flux leaving a surface per unit area (Pharr et al., 2010 [1]). 
 Formally irradiance is described with the following equation:
 
-$$E = \frac{d\phi}{dA}$$
+£$E = \frac{d\phi}{dA}£$
 
 where the differential flux $d\phi$ is computed over the differential area $dA$. It is measured as units of watt
 per square meter.  
@@ -40,7 +40,7 @@ it with $\omega$, that is the set of all direction vectors anchored at $p$ that
 sphere and the object (Pharr et al., 2010 [1]).
 Now it is possible to give the definition of **radiance**, that is flux density per unit solid angle per unit area:
 
-$$L=\frac{d\phi}{d\omega \ dA^{\perp}}$$
+£$L=\frac{d\phi}{d\omega \ dA^{\perp}}£$
 
 In this case $dA^{\perp}$ is the projected area $dA$ on a surface perpendicular to $\omega$. So radiance describe 
 the limit of measurement of incident light at the surface as a cone of incident directions of interest ${d\omega}$ becomes 
@@ -50,7 +50,7 @@ and radiance leaving a point called exitant radiance and indicated with $L_{o}(p
 in the equations described below. It is important also to note another useful property, that connect 
 the two types of radiance:
 
-$$L_{i}(p,\omega) \neq L_{o}(p,\omega)$$
+£$L_{i}(p,\omega) \neq L_{o}(p,\omega)£$
 
 #### **The rendering equation**
 
@@ -59,7 +59,7 @@ Equation. It is the equation that describes the equilibrium distribution of radi
 gives the total reflected radiance at a point as a sum of emitted and reflected light from a surface. This is the 
 formula of the rendering equation:
 
-$$L_{o}(p,\omega) = L_{e}(p,\omega) + \int_{\Omega}f_{r}(p,\omega_{i},\omega_{0})L_{i}(p,\omega)\cos\theta_{i}d\omega_{i}$$
+£$L_{o}(p,\omega) = L_{e}(p,\omega) + \int_{\Omega}f_{r}(p,\omega_{i},\omega_{0})L_{i}(p,\omega)\cos\theta_{i}d\omega_{i}£$
 
 In this formula the meaning of each symbols are:
 
@@ -83,11 +83,11 @@ between the differential exitant radiance and the differential irradiance at a p
 parameter of this function are: the incident light direction, the outgoing light direction and a point on the surface. 
 The formula for this function in terms of radiometric quantities is the following:
 
-$$f_{r}(p,\omega_{i},\omega_{o}) = \frac{dL_{o}(p,\omega_{o})}{dE(p,\omega_{I})}$$
+£$f_{r}(p,\omega_{i},\omega_{o}) = \frac{dL_{o}(p,\omega_{o})}{dE(p,\omega_{I})}£$
 
 The BRDF has two important properties:
 
-* it is a symmetric function, so for all pair of directions $$f_{r}(p,\omega_{i},\omega_{o}) = f_{r}(p,\omega_{o},\omega_{i})$$
+* it is a symmetric function, so for all pair of directions £$f_{r}(p,\omega_{i},\omega_{o}) = f_{r}(p,\omega_{o},\omega_{i})£$
 * it satisfies the **energy conservation principle**: *the light reflected is less than or equal to the incident light*.
 
 A lot of models has been developed to describe the BRDF of different surfaces. In particular, in the last years 

dependencies-js-blog.html

@@ -1,21 +1,30 @@
 {% if page.math %}
-<script type="text/x-mathjax-config">
-    MathJax.Hub.Config({
-        jax: ["input/TeX","output/SVG"],
-        messageStyle: "none",
-        tex2jax: {
-            inlineMath: [['$','$']],
-            processEscapes: true
-        },
-        "HTML-CSS": {
-            linebreaks: { automatic: true }
-        },
-        SVG: {
-            linebreaks: { automatic: true }
-        }
-    });
+<script>
+window.MathJax = {
+  tex: {
+    inlineMath: [['$','$']],
+    displayMath: [['£$', '£$']],
+    processEscapes: true,
+    autoload: {
+      color: [],
+      colorV2: ['color']
+    },
+    packages: {'[+]': ['noerrors']}
+  },
+  svg: {
+    fontCache: 'global'
+  },
+  options: {
+    ignoreHtmlClass: 'tex2jax_ignore',
+    processHtmlClass: 'tex2jax_process'
+  },
+  loader: {
+    load: ['[tex]/noerrors']
+  }
+};
 </script>
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_SVG"></script>
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" id="MathJax-script"></script>
 {% endif %}
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
 <script type="text/javascript" src="/assets/js/index.blog.min.js?rev=@@hash"></script>