diff options
Diffstat (limited to '')
| -rw-r--r-- | writeup.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/writeup.html b/writeup.html new file mode 100644 index 0000000..aa1da7e --- /dev/null +++ b/writeup.html @@ -0,0 +1,167 @@ +<html> + <head> + <title>my very super duper cool writeup</title> + <style> +html { + background-color: black; + color:yellow; + font-family: sans-serif; + padding: 1rem; +} +a, button { + all: unset; + display: inline-block; + color:yellow; + border: 1px solid; + border-radius: 10px; + margin: .5rem 0; + margin-right: 1rem; + padding: .5rem; +} + +a:hover, button:hover { + background-color: #313244; + color: #a6adc8; + cursor: pointer; +} + + +.trail { + position: absolute; + z-index: 9999; + pointer-events: none; +} + + </style> + </head> + <body> + <h1>the writeup</h1> + <marquee>woah its a funny html file again</marquee> + + <h2>overview</h2> + The project itself I would say was built quite well. It is reasonably able to render + chunks at a good enough framerate that im happy with it. I personally would of not picked + java script, mostly because of the multithreading support. + + <h3>js slow</h3> + + Being forced to halt rendering + so that the game can generate AND mesh chunks does cause quite noticeable lag spikes. + The best thing to do would create a render thread, and only have generation and meshing done + on its own thread, but I cannot do this in JS. + + <h3>vertex data</h3> + + As also described in the presentation, I do thing the vertex mesh for the chunk is not well + made. 192 bytes per quad (vec3 + vec3 + vec2 + vec3 + float) * 4, is really terrible for + gpu performance. The smaller the mesh, the quicker the gpu can process it each frame and the + high the fps. I have decided to continue this project but not in javascript, but in c, and I + have gotten it down to 4 bytes, horray! + + <pre> + <code> +typedef union { + struct { + u32 x : 5; + u32 y : 5; + u32 z : 5; + u32 width : 5; + u32 height : 5; + u32 face : 3; + u32 block : 4; + }; + u32 raw; +} Quad; + </code> + </pre> + + Above is the struct I am not using in C for per quad data. Each quad is then instanced on the gpu, stored in a uniform buffer. Then I use the instance index to index into the uniform of "Quad"s, to render each face. It is quite a lot faster than the approach I did in JS. + + You may also notice that this contains a width and height field, which allows us to use this + with greedy meshing! Horray!!! + + If you would like to take a look at my C code, you can find it at <a href="https://g.freya.cat/voxel">https://g.freya.cat/voxel</a>. Yes its OpenGL, but I've done Vulkan once, and never again. + + <h3>texture array</h3> + + The first time i made minecraft I ran into the issue where texture atlases would get blurd and wonky when msaa or mipmapping were turned on. This ended up being because the edges of each texture in atlas would get blured (msaa'd) togeather, and the edges of blocks would look terrible. The solution to this was to use a texture array (or a 3d texture), since each layer gets sampeled differently, and such there would be no bluring between the layers. + + <h3>what would i do differently</h3> + + So though all the issues I ran into, what would i do differently? Well thats easy, the C code I just linked to in the previous section. It fixes alot of the issues I ran into in the + JS voxel "engine", and also adds a whole new slew of features such as frustum culling and soon will have ambient occlusion. + + Frustum culling turns out is alot easier than I thought, because once can get each plane from the proj-view matrix. + + I rally had a fun time writing this, and I hope you think It was a cool project :) + + <h2>johnvertize</h2> + <marquee>scream into the void</marquee> + <iframe src="https://john.citrons.xyz/embed?ref=freya.cat" style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;height:94px;border:none;"></iframe> + + <div class="buttons"> + <picture> + <source type="image/webp" srcset="https://freya.cat/public/buttons/eyes.webp?timestamp=1716556123" media="(prefers-reduced-motion: reduce)"> + <source type="image/png" srcset="https://freya.cat/public/buttons/eyes.png?timestamp=1716556123" media="(prefers-reduced-motion: reduce)"> + <source type="image/gif" srcset="https://freya.cat/public/buttons/eyes.gif?timestamp=1716556123"> + <img src="https://freya.cat/public/buttons/eyes.png?timestamp=1716556123" alt="Best viewed with eyes" title="Best viewed with eyes" width="88" height="30"> + </picture> + <picture> + <source type="image/webp" srcset="https://freya.cat/public/buttons/vim.webp?timestamp=1716556123" media="(prefers-reduced-motion: reduce)"> + <source type="image/png" srcset="https://freya.cat/public/buttons/vim.png?timestamp=1716556123" media="(prefers-reduced-motion: reduce)"> + <source type="image/gif" srcset="https://freya.cat/public/buttons/vim.gif?timestamp=1716556123"> + <img src="https://freya.cat/public/buttons/vim.png?timestamp=1716556123" alt="Edited with VIM" title="Edited with VIM" width="88" height="30"> + </picture> + <picture> + <source type="image/webp" srcset="https://freya.cat/public/buttons/gnu-linux.webp?timestamp=1716556123"> + <source type="image/png" srcset="https://freya.cat/public/buttons/gnu-linux.png?timestamp=1716556123"> + <img src="https://freya.cat/public/buttons/gnu-linux.png?timestamp=1716556123" alt="Made with GNU/Linux" title="Made with GNU/Linux" width="88" height="30"> + </picture> + <script> + alert('welcome back') + + // thank u ryan, very cool + + var trailLength = 12; + var path = []; + var delay = 100; + var lastX = 0; + var lastY = 0; + + function createMouseTrail() { + for (var i = 0; i < trailLength; i++) { + var div = document.createElement('div'); + div.setAttribute('class', 'trail'); + div.style.top = '-200px'; + div.style.left = '-200px'; + div.style.backgroundImage = 'url(https://www.rochesterapex.com/css/cursor.gif)'; + div.style.backgroundSize = 'cover'; + div.style.width = '11px'; + div.style.height = '19px'; + document.body.appendChild(div); + path.push(div); + } + } + + var lastX = 0; + var lastY = 0; + + function moveTrail(e) { + if (lastX !== e.pageX || lastY !== e.pageY) { + for (let i = 0; i < path.length; i++) { + setTimeout(function() { + path[i].style.top = (e.pageY) + 'px'; + path[i].style.left = (e.pageX) + 'px'; + }, i * delay); + } + } + + lastX = e.pageX; + lastY = e.pageY; + } + + document.addEventListener('mousemove', moveTrail); + createMouseTrail(); + </script> + </body> +</html> |