From f464db3c1cd028cc0f9166f995d6397922dabb20 Mon Sep 17 00:00:00 2001 From: Warwick Date: Fri, 2 Sep 2022 14:24:26 +0100 Subject: [PATCH] Made the new stuff in the graphics blog more positive and added detail. --- src/GraphicsBlog.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/GraphicsBlog.jsx b/src/GraphicsBlog.jsx index 4a089b6..4f82a2a 100644 --- a/src/GraphicsBlog.jsx +++ b/src/GraphicsBlog.jsx @@ -67,7 +67,7 @@ class GraphicsBlog extends Component { }, { header: "Models with their own Model space.", - subheader: "", + subheader: "Note: this blog is a copy of a forum thread", mediaType: "img", image: Blog4, imageAltText: "3 Textured squares", @@ -93,7 +93,7 @@ class GraphicsBlog extends Component { 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.", + 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. It took me a few tries to get the textures loaded incorrectly as you can see but once I reverse-engineered some boilerplate example code for the order of execution when loading multiple textures the rest just fell into place.", buttonText: undefined, buttonLink: undefined, }, @@ -113,7 +113,7 @@ class GraphicsBlog extends Component { mediaType: "video", image: Blog7, imageAltText: "A render of light moving around a cube and a barrel", - content: 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 LearnOpenGL.com In this video you can see a slightly wonky metalness implementation., + content: 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, special thanks to LearnOpenGL.com In this video you can see a slightly wonky metalness implementation where the specular part of the algorithm appears to be inverted. I also expanded the material loading system to load in the Metalness., buttonText: undefined, buttonLink: undefined, }, @@ -123,7 +123,7 @@ class GraphicsBlog extends Component { mediaType: "video", image: Blog8, imageAltText: "A render of light moving around a cube and a barrel", - content: It was almost too easy but thanks to my metalness implementation I've been able to put in roughness now as well., + content: It was almost too easy but thanks to my metalness implementation I've been able to easily extend the material system to load multiple additional textures into the shader. making implementing roughness as easy as plugging it into the algorithm I've implemented for metalness., buttonText: undefined, buttonLink: undefined, }, @@ -133,17 +133,17 @@ class GraphicsBlog extends Component { mediaType: "video", image: Blog9, imageAltText: "A render of light moving around a cube and a barrel", - content: 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., + content: And here we have full PBR in the flesh. I think the only thing that's missing now is normal maps. 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. Whilst I've got PBR working I think that for this project using a cube map with IBL to create realistic reflections will be overkill unless I really think environmental reflections are important for reflective surfaces like windows. But if I use a cube map for that situation, the effort will be better spent using one to mimic an interior instead., buttonText: undefined, buttonLink: undefined, }, { - header: "Normals", + header: "Normal Maps", subheader: "", mediaType: "video", image: Blog10, imageAltText: "A render of light moving around a cube and a barrel", - content: 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 LearnOpenGL.com. If anyone needs an amazing refresher on linear algebra I can't recommend 3Blue1Brown's series on the topic more. , + content: It's been great to have the opportunity to dive into a hard maths topic again as I haven't felt this challenged since my university graphics project. I can now say I have an intuitive understanding of linear trigonometry again. Especially after reimplementing normal maps fully in the geometry shader using the triangle primitives available in that part of the pipeline to calculate the tangent space in the GPU rather than doing so on the CPU like on LearnOpenGL.com. If anyone needs an amazing refresher on linear algebra I can't recommend 3Blue1Brown's series on the topic more. , buttonText: undefined, buttonLink: undefined, }, @@ -160,7 +160,7 @@ class GraphicsBlog extends Component { - In this project, I plan to generate a cyberpunk cityscape with + In this project, I am going to generate a cyberpunk cityscape with an infinite level of verticality to give it a large sense of scale. The project is written in C++ using SDL to manage windows and OpenGL to render the meshes.