Updated Graphics blog with my fancy lighting stuff.

package.json

@@ -17,7 +17,7 @@
     "@babel/core": "^7.12.3",
     "@babel/plugin-transform-react-jsx": "^7.12.5",
     "cssnano": "^5.1.0",
-    "parcel": "^2.4.1",
+    "parcel": "^2.7.0",
     "typescript": "^4.0.5"
   },
   "dependencies": {

src/GraphicsBlog.jsx

@@ -21,6 +21,12 @@ import Blog1 from "../static/images/GraphicsBlog/blog1.png";
 const Blog2 = new URL("../static/video/graphics_blog/blog2.webm", import.meta.url);
 import Blog3 from "../static/images/GraphicsBlog/blog3.png";
 import Blog4 from "../static/images/GraphicsBlog/blog4.png";
+import Blog5 from "../static/images/GraphicsBlog/blog5.png";
+import Blog6 from "../static/images/GraphicsBlog/blog6.png";
+const Blog7 = new URL("../static/video/graphics_blog/blog7.mp4", import.meta.url);
+const Blog8 = new URL("../static/video/graphics_blog/blog8.mp4", import.meta.url);
+const Blog9 = new URL("../static/video/graphics_blog/blog9.mp4", import.meta.url);
+const Blog10 = new URL("../static/video/graphics_blog/blog10.mp4", import.meta.url);
 
 class GraphicsBlog extends Component {
   constructor(props) {
@@ -65,13 +71,13 @@ class GraphicsBlog extends Component {
         mediaType: "img",
         image: Blog4,
         imageAltText: "3 Textured squares",
-        content:  <span>Models now have their own position in world space and
+        content: <span>Models now have their own position in world space and
           can be made up of multiple meshes. They can also be moved
-          dynamically.<p/> I got 3 different directions to go now. 1) start
+          dynamically.<p /> I got 3 different directions to go now. 1) start
           working on a lighting system which will teach me more about low level
           shaders and their maths, 2) create a method of loading in models
           exported from blender, 3) start messing about with creating and
-          rendering shapes with noise. <p/> Comment) lighting is fun <p/>
+          rendering shapes with noise. <p /> Comment) lighting is fun <p />
           Answer) Light is cool, but to get good lighting I'm gonna need to
           start working with vertex normals and UVs and that's without shadows.
           So maybe it'll actually be worth me importing models where I know
@@ -81,6 +87,66 @@ class GraphicsBlog extends Component {
         buttonText: undefined,
         buttonLink: undefined,
       },
+      {
+        header: "Loading models into the engine.",
+        subheader: "",
+        mediaType: "img",
+        image: Blog5,
+        imageAltText: "3 stages of model loading described in the description box",
+        content: "I decided I wanted something in my engine to test lighting on before I go further, I ran into a few problems along the way but here's the visual progression of things. The first image was me not sending the correct texture reference to the GPU followed by loading in the texture upside down, you know normal debugging stuff.",
+        buttonText: undefined,
+        buttonLink: undefined,
+      },
+      {
+        header: "Basic Lighting.",
+        subheader: "",
+        mediaType: "img",
+        image: Blog6,
+        imageAltText: "A graphical render of a coloured cube and a guitar backpack with a simple light.",
+        content: "Now I have a model loaded I've decided to focus on lighting for a bit. After implementing some simple diffuse lighting here I think I'm gonna go all in and jump straight to a PBR system.",
+        buttonText: undefined,
+        buttonLink: undefined,
+      },
+      {
+        header: "Metalness",
+        subheader: "",
+        mediaType: "video",
+        image: Blog7,
+        imageAltText: "A render of light moving around a cube and a barrel",
+        content: <span>I've decided to go with the metalness, roughness, and AO version of PBR as the online documentation for its implementation appears far more accessible to me, special thanks to <Link component="span" rel="noopener" href="https://learnopengl.com/PBR/Theory" >LearnOpenGL.com</Link> In this video you can see a slightly wonky metalness implementation.</span>,
+        buttonText: undefined,
+        buttonLink: undefined,
+      },
+      {
+        header: "Metalness and Roughness",
+        subheader: "",
+        mediaType: "video",
+        image: Blog8,
+        imageAltText: "A render of light moving around a cube and a barrel",
+        content: <span>It was almost too easy but thanks to my metalness implementation I've been able to put in roughness now as well.</span>,
+        buttonText: undefined,
+        buttonLink: undefined,
+      },
+      {
+        header: "Full PBR",
+        subheader: "",
+        mediaType: "video",
+        image: Blog9,
+        imageAltText: "A render of light moving around a cube and a barrel",
+        content: <span>And here we have full PBR I think the only thing that's missing now is normals. I've also packed all the separate PBR textures into a single RMA texture, meaning that I only need to load one texture for the roughness, metalness and AO. I feel like I don't fully understand the maths that's in this PBR algorithm so with the normals I will reimplement the code differently to the source I'm learning from.</span>,
+        buttonText: undefined,
+        buttonLink: undefined,
+      },
+      {
+        header: "Normals",
+        subheader: "",
+        mediaType: "video",
+        image: Blog10,
+        imageAltText: "A render of light moving around a cube and a barrel",
+        content: <span>I have not learned this much heavy maths since my A-level, I can now say I have a decent intuitive understanding of linear trigonometry again though. Especially after reimplementing normal maps fully in the geometry shader using the primitives to calculate the tangent space in the GPU rather than doing so on the CPU like on <Link component="span" rel="noopener" href="https://learnopengl.com/Advanced-Lighting/Normal-Mapping" >LearnOpenGL.com</Link>. If anyone needs an amazing refresher on linear algebra I can't recommend <Link component="span" rel="noopener" href="https://youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab">3Blue1Brown&apos;s series on the topic</Link> more. </span>,
+        buttonText: undefined,
+        buttonLink: undefined,
+      },
     ];
   }
 
@@ -103,10 +169,6 @@ class GraphicsBlog extends Component {
                 <Typography variant="p" >
                   To Do:
                 </Typography>
-                <ListItem>
-                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
-                  Give meshes their own relative location.
-                </ListItem>
                 <ListItem>
                   <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                   Run a marching square implementation to generate a mesh for a
@@ -133,11 +195,6 @@ class GraphicsBlog extends Component {
                   algorithm generate something that looks like a city. (May
                   require a method of importing models)
                 </ListItem>
-                <ListItem>
-                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
-                  Fancy lighting (Potentially bake some shadows into a chunks
-                  texture during the generation phase).
-                </ListItem>
                 <ListItem>
                   <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                   Design and create an interesting movement system for the