https://salvatorespoto.github.io/post/Recent content in Posts on The Render LoopHugo -- gohugo.ioenCopyright © 2024, Salvatore Spoto; all rights reserved.Sat, 08 Feb 2025 20:28:24 +0200https://salvatorespoto.github.io/post/shadertoy-basics/Sat, 08 Feb 2025 20:28:24 +0200https://salvatorespoto.github.io/post/shadertoy-basics/ This is a collection of simple shaders in Shadertoy that show how to draw basic elements using basic functions like step and smoothstep. If you're new to Shadertoy or shader programming in general, you might find these useful. In the following paragraphs, you'll find shaders that illustrate some simple functions and basic drawing techniques. The code includes plenty of comments to guide you through the implementation. The shader code is pasted below each implementation, but if you click on the shader's name, you'll be taken to Shadertoy, where you can experiment with it.https://salvatorespoto.github.io/post/old-school-effects/Sat, 01 Feb 2025 20:28:24 +0200https://salvatorespoto.github.io/post/old-school-effects/ Nostalgia time! The early '90s were a golden era for the demoscene. In 1993, Second Reality hit like a bombshell for all of us messing around with computers and coding. No 3D acceleration back then, just CPU and raw code. Future Crew dropped their demo at Assembly, and a wave of inspiration spread across Europe. Every kid into programming, PCs, and video games started dreaming about real-time graphics, trying to replicate the magic of that legendary Finnish group.https://salvatorespoto.github.io/post/d3d12notes/2-overview/Wed, 22 Jan 2025 20:28:24 +0200https://salvatorespoto.github.io/post/d3d12notes/2-overview/ In this second chapter, the focus is to implement a simple application using the components and the flow described in the previous one. You start creating a very minimal application: drawing a static 2D triangle. First D3D 12 Application: Drawing a Triangle This simple task already requires a certain effort, particularly in setting up the entire pipeline. Additionally, the practical implementation introduces some aspects and details that were ignored in the previous lesson, such as window initialization.https://salvatorespoto.github.io/post/d3d12notes/1-overview/Sat, 11 Jan 2025 20:28:24 +0200https://salvatorespoto.github.io/post/d3d12notes/1-overview/ This series is a collection of my personal notes as I review and study DirectX 12. I'm not an expert, but I'm documenting what I learn along the way to help solidify my understanding and possibly assist others who are also exploring this topic. These notes are informal and meant as a reference for myself, rather than a comprehensive guide. Introduction to the Direct3D 12 Graphics API This series of articles introduce to Microsoft Direct3D (D3D) 12 programming.https://salvatorespoto.github.io/post/assembly24/Wed, 18 Sep 2024 20:28:24 +0200https://salvatorespoto.github.io/post/assembly24/ Assembly Summer '24 has come and gone, and I had the great joy of seeing my little 1k intro on the big screen and see some living legends of the Demoscene. I also took 3rd place in the compo, which isn't bad at all. This is the ShaderToy version of the 1kb demo I presented: CubeSink See you next year with more incredible demos, Assembly! Info On this page you'll find shaders written in Shadertoy and functions graph made in Desmos.https://salvatorespoto.github.io/post/aliasing-antialiasing/6-antialiasing/Mon, 16 Sep 2024 20:28:24 +0200https://salvatorespoto.github.io/post/aliasing-antialiasing/6-antialiasing/ Anti-aliasing is a technique used in computer graphics to reduce the alias we have described in the previous chapters. Here there is an example in ShaderToy of three popular anti-aliasing algorithms: SSAA (Super-Sample Anti-Aliasing), MSAA (Multi-Sample Anti-Aliasing), and TAA (Temporal Anti-Aliasing). Please check the shader code for further details. SSAA (Super-Sample Anti-Aliasing) Super-Sample Anti-Aliasing (SSAA) is one of the simplest forms of anti-aliasing. It works by rendering the scene at a higher resolution and then downscaling it to the desired display resolution.https://salvatorespoto.github.io/post/aliasing-antialiasing/5-texture-filtering/Sun, 15 Sep 2024 20:28:24 +0200https://salvatorespoto.github.io/post/aliasing-antialiasing/5-texture-filtering/ As we've seen before, aliasing happens when the sampling rate is too low to properly reconstruct the original signal. With computer-generated images, it happens because these images come from a mathematical continuous description of the 3D scene. The signal we're trying to display isn't bandwidth-limited, so aliasing is bound to happen when we put it on the screen. Example: Diagonal Line For example, imagine drawing a straight diagonal line on the monitor.https://salvatorespoto.github.io/post/aliasing-antialiasing/4-sampling-filtering/Fri, 13 Sep 2024 20:28:24 +0200https://salvatorespoto.github.io/post/aliasing-antialiasing/4-sampling-filtering/ Sampling means to take samples of the continous signal at discrete intervals. Filtering is the opposite operation: reconstructing the continuous time signal from its discrete samples. Info In this pages you'll find some shaders written with Shadertoy, and some Desmos graphs. Read how to use the interactive content in this site. Sampling a signal at discrete intervals Sampling means to take samples of the continous signal at discrete intervals. This allows to store it as an array of numbers, which can be easily loaded into a computer memory or saved on a storage.https://salvatorespoto.github.io/post/aliasing-antialiasing/3-signals/Thu, 12 Sep 2024 20:28:24 +0200https://salvatorespoto.github.io/post/aliasing-antialiasing/3-signals/ Let's introduce the definition of signal, and some of the properties used to describe it. Info In this pages you'll find some shaders written with Shadertoy, and some Desmos graphs. Read how to use the interactive content in this site. What is a signal As stated in the Introduction a signal, broadly speaking, is any quantity that vary in space or time. Let's see some examples. One dimensional signal A simple example is the $sin(x)$ function: a function of one variable, defined for each real value.https://salvatorespoto.github.io/post/aliasing-antialiasing/2-introduction/Wed, 11 Sep 2024 20:28:24 +0200https://salvatorespoto.github.io/post/aliasing-antialiasing/2-introduction/ This is a brief introduction of the main topics that will be elaborated during the series: signals, sampling, filtering and aliasing. Info In this pages you'll find some shaders written with Shadertoy, and some Desmos graphs. Read how to use the interactive content in this site. What is a signal A Signal, broadly speaking, is any quantity that vary in space or time. An example is the function $f(t) = \sin 2t + \sin t + 2$, where the $t$ variable is the time.https://salvatorespoto.github.io/post/aliasing-antialiasing/1-overview/Tue, 10 Sep 2024 20:28:24 +0200https://salvatorespoto.github.io/post/aliasing-antialiasing/1-overview/ Rendering an image is essentially a sampling process: a continuous image, with its geometry, colors, and lighting, needs to be sampled and converted into pixels on the screen. These brief notes provide a quick introduction to signal processing, filtering, and aliasing. In the final chapter, there are some ShaderToy examples that demonstrate some anti-aliasing algorithms. Introduction Signals Sampling Texture Filtering AntiAliasing Hope you find these notes interesting!https://salvatorespoto.github.io/post/desmos3d-kyrby/Wed, 25 Jan 2023 16:08:01 +0200https://salvatorespoto.github.io/post/desmos3d-kyrby/ 3D Modelins with Math for Fun. Desmos recently added 3D graphing functionalities, so I had fun modeling Kirby with some stars around him. This was obviously inspired by the incredible work of Inigo Quilez, who is renowned for his exceptional math modeling, especially on Shadertoy. You can check out an example of his amazing work here. For this scene, I mainly used distorted ellipsoids, both implicit and explicit. I found that implicit shapes are easier to blend smoothly.https://salvatorespoto.github.io/post/gltf-viewer/Wed, 25 Jan 2023 16:08:01 +0200https://salvatorespoto.github.io/post/gltf-viewer/ A viewer of the glTF file format, implemented in DirectX 12 and C++. Here's the GitHub Repository of a Viewer for glTF files, made in C++ and DirectX 12. I wrote this software to explore the DirectX 12 API. glTF is a standard file format for three-dimensional scenes and models, the specification are from the Khronos Group. The glTFViewer can edit the vertex, geometry and fragment shaders on the fly. The video below shows the application in action:https://salvatorespoto.github.io/post/meta-balls-3d/Tue, 23 Aug 2022 20:28:24 +0200https://salvatorespoto.github.io/post/meta-balls-3d/ 3D Metaballs are a valuable tool for modeling "blobby shapes", or something that should look "organic". They could even be used for fake fluid simulations. In this article, we'll explore how to render Metaballs in 3D, using ray casting tecniques. The Metaballism 1 video series by Alexander Mitzkus showcases the versatility of metaballs in 3D graphics. If you're new to metaballs, it's recommended to read the previous article in the series, Rendering Metaballs in 2D.https://salvatorespoto.github.io/post/meta-balls/Sun, 21 Aug 2022 16:08:01 +0200https://salvatorespoto.github.io/post/meta-balls/ Metaballs are blobby objects that "glue togheter" when they came close. They were Invented by Jim Blinn for the 1980 documentary TV show Cosmos to represent atoms and molecules. Metaballs later became a popular effect in the demoscene in the early 90s. In this article we'll see how render them in 2D. Info In this page you'll find shaders written with Shadertoy and Desmos graphs. Read how to use the interactive content in this site.https://salvatorespoto.github.io/post/howto-interactive-content/Fri, 19 Aug 2022 23:42:50 +0200https://salvatorespoto.github.io/post/howto-interactive-content/ How to use interactive content on this blog. Info In this short guide, we'll explore how to interact with the content on this website. Shaders will be often written with Shadertoy and function graphs plotted with Desmos. ShaderToy A Shadertoy shaders is a shader written on Shadertoy using the GLSL language. When you hover over the shader image, a minimal interface will apper. Clicking on the play button will start the shader, if it's not already in play state.