Warwick/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made the new stuff in the graphics blog more positive and added detail.

Browse source
This commit is contained in:
Warwick 2022-09-02 14:24:26 +01:00
parent ef45cfc77c
commit f464db3c1c
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/GraphicsBlog.jsx
View file

@ -67,7 +67,7 @@ class GraphicsBlog extends Component {
}, },
{ {
header: "Models with their own Model space.", header: "Models with their own Model space.",
subheader: "", subheader: "Note: this blog is a copy of a forum thread",
mediaType: "img", mediaType: "img",
image: Blog4, image: Blog4,
imageAltText: "3 Textured squares", imageAltText: "3 Textured squares",
@ -93,7 +93,7 @@ class GraphicsBlog extends Component {
mediaType: "img", mediaType: "img",
image: Blog5, image: Blog5,
imageAltText: "3 stages of model loading described in the description box", 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, buttonText: undefined,
buttonLink: undefined, buttonLink: undefined,
}, },
@ -113,7 +113,7 @@ class GraphicsBlog extends Component {
mediaType: "video", mediaType: "video",
image: Blog7, image: Blog7,
imageAltText: "A render of light moving around a cube and a barrel", 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>, 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, 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 where the specular part of the algorithm appears to be inverted. I also expanded the material loading system to load in the Metalness.</span>,
buttonText: undefined, buttonText: undefined,
buttonLink: undefined, buttonLink: undefined,
}, },
@ -123,7 +123,7 @@ class GraphicsBlog extends Component {
mediaType: "video", mediaType: "video",
image: Blog8, image: Blog8,
imageAltText: "A render of light moving around a cube and a barrel", 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>, content: <span>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.</span>,
buttonText: undefined, buttonText: undefined,
buttonLink: undefined, buttonLink: undefined,
}, },
@ -133,17 +133,17 @@ class GraphicsBlog extends Component {
mediaType: "video", mediaType: "video",
image: Blog9, image: Blog9,
imageAltText: "A render of light moving around a cube and a barrel", 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>, content: <span>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.</span>,
buttonText: undefined, buttonText: undefined,
buttonLink: undefined, buttonLink: undefined,
}, },
{ {
header: "Normals", header: "Normal Maps",
subheader: "", subheader: "",
mediaType: "video", mediaType: "video",
image: Blog10, image: Blog10,
imageAltText: "A render of light moving around a cube and a barrel", 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>, content: <span>It&apos;s been great to have the opportunity to dive into a hard maths topic again as I haven't felt this challenged since my <Link href='/uni-graphics'>university graphics project</Link>. 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 <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, buttonText: undefined,
buttonLink: undefined, buttonLink: undefined,
}, },
@ -160,7 +160,7 @@ class GraphicsBlog extends Component {
<CardHeader title="Graphics Blog" /> <CardHeader title="Graphics Blog" />
<CardContent> <CardContent>
<Typography variant="p" > <Typography variant="p" >
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 an infinite level of verticality to give it a large sense of
scale. The project is written in C++ using SDL to manage scale. The project is written in C++ using SDL to manage
windows and OpenGL to render the meshes. windows and OpenGL to render the meshes.