107 lines
7.4 KiB
HTML
107 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>MiniRT Preview</title>
|
|
<link href="/css/style.css" rel="stylesheet">
|
|
<link href="/css/minirt.css" rel="stylesheet">
|
|
<link href="/css/tailwind.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="flex flex-col w-full">
|
|
<header class="flex flex-col h-48 w-screen text-[#FFF6DA]" style="background-color: rgb(169, 74, 74);">
|
|
<h1 class="p-8 grow place-content-center text-center text-5xl">My Personal Website</h1>
|
|
<div class="w-screen flex p-1 justify-center px-30 gap-4" style="background-color: #889E73">
|
|
<a class="p-4 hover:bg-[#aa9E73ff] rounded-md" href="/">Home</a>
|
|
<a class="p-4 hover:bg-[#aa9E73ff] rounded-md" href="/html/minishell.html">Minishell</a>
|
|
<a class="p-4 hover:bg-[#aa9E73ff] rounded-md" href="/html/minirt.html">MiniRT</a>
|
|
<a class="p-4 hover:bg-[#aa9E73ff] rounded-md" href="/html/emiku.html">emiku</a>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-col gap-y-6 bg-neutral-200/70 w-[60%] ml-[10%] mr-auto px-16 py-8">
|
|
<h2 class="text-4xl font-bold text-gray-800">The Raytracer</h2>
|
|
<div class="space-y-2">
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
The next project i want to showcase is the miniRT (mini-raytracer).<br/>
|
|
Like the shell, this was part of the 42 curriculum, and was achieved within the same rules and
|
|
constraints as the previous project.
|
|
</p>
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
This time, the assignment was to create a simple raytracer from scratch,
|
|
using a custom wrapper around the linux X11 API, for simple window creation and I/O.
|
|
</p>
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
A raytracer is a program that uses a technique called
|
|
<a class="underline text-blue-700 hover:text-blue-900" href="https://en.wikipedia.org/wiki/Ray_tracing_(graphics)">"raytracing"</a>,
|
|
which essentially means that we simulate looking at a scene from our "eye-position", and use the computer screen like a window through which we
|
|
look at this scene.
|
|
</p>
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
Now, we imagine shooting a perfectly straight "ray" from our "eye" through each pixel of the screen, and trace that ray's path to see if it will
|
|
intersect with an object. If yes, we know that this specific pixel can display the color of the object that it hit.
|
|
We repeat this process for each pixel. Using some math to check for lighting, shadows from other objects, distance and more,
|
|
we can determine a final color for each pixel, and with that create a remarkably realistic image from our scene.
|
|
</p>
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
On top of the basic image generation, we added some extra feature that were not required by the subject, but seemed interesting enough to learn about
|
|
and implement on our own.<br/>
|
|
Some of the extra features are:
|
|
</p>
|
|
<ul class="list-disc list-inside space-y-2 text-gray-700 ml-4">
|
|
<li>Multithreaded</li>
|
|
<li>Textures and Bumpmaps</li>
|
|
<li>Dynamic Scene/Texture/Bumpmap loading</li>
|
|
<li>Menus with buttons and sliders</li>
|
|
<li>Simple File-Explorer to load resources at runtime</li>
|
|
<li>Diffrent Reflection Models</li>
|
|
<li>Objects as Perfect Mirrors</li>
|
|
<li>Skybox</li>
|
|
</ul>
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
This project was again a team effort, my teammate
|
|
<a class="underline text-blue-700 hover:text-blue-900" href="https://github.com/benszilas">Benjámin Szilas</a>
|
|
was very effective at implementing a lot of the math formulas.
|
|
He is responsible for a lot of the tracing functions, he implemented shadows, reflection, light-dispersion, anti-aliasing and much more,
|
|
whereas I prefered to work on the I/O focused parts like the menus, scene manipulation, file explorer and so on.<br/>
|
|
I had a lot of fun with this project, and learned a lot about working as a team, graphical programming and (some) maths!
|
|
</p>
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
As a final note: since we finished the project, and I was planning on showcasing it here, I have reimplemented the graphical part to use
|
|
<a class="underline text-blue-700 hover:text-blue-900" href="https://github.com/raysan5/raylib">Raylib</a>
|
|
since it seemed more future proof to use.
|
|
</p>
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
Again, I have provided a live version below, feel free to play around in it!
|
|
</p>
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
Credits go to
|
|
<a class="underline text-blue-700 hover:text-blue-900" href="https://github.com/novnc/noVNC">noVNC</a>
|
|
for providing the web integration, their stuff is really great!
|
|
</p>
|
|
<p class="leading-relaxed text-gray-700 max-w-prose">
|
|
Before you start, you will need to request the password by clicking the button below.
|
|
</p>
|
|
<div class="flex gap-4">
|
|
<button id="minirt-password-btn" class="flex p-2 w-full bg-neutral-100/50 place-items-center justify-center rounded-md">
|
|
Get Password
|
|
</button>
|
|
<div id="minirt-password-display" class="flex w-full h-[5dvh] place-items-center justify-center"></div>
|
|
</div>
|
|
<div class="flex max-w-prose h-[20dvh] justify-center place-items-center">
|
|
<button id="minirt-start-button" class="flex p-4 bg-neutral-100/50 place-items-center rounded-md">
|
|
Start Raytracer
|
|
</button>
|
|
<div>
|
|
<div id="minirt-canvas-background" style="display: none" class="minirt-canvas-background">
|
|
<button id="canvas-close-btn" class="absolute top-[16px] right-[16px] text-white">Close</button>
|
|
<div id="top_bar">
|
|
<div id="status">Loading</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/js/minirt.js"></script>
|
|
</body>
|
|
</html>
|