[WIP article]
In graphics, backface culling is the process by which the faces of a mesh that are facing away from a particular direction (e.g. camera) are culled in some form so that we avoid or reduce the GPU cost of processing them.
Author: Vassilis
The Function Graph object in the editor allows you to plot cartesian and polar graphs of arbitrary functions. Since the functions are authored in Javascript, it’s actually quite easy to add logic and more or less arbitrary code to them, i.e. we’re not restricted to stricly maths-like functions. One of the advantages of this is that it was quite easy to expose ray hit testing results as inputs to the functions. This has allowed for some quite interesting graphs!
I recently added support for convolution integrals on the Function Graph object in the editor. I thought I’d take the opportunity to write a quick introduction on the topic and present a few interactive diagrams. As with previous posts, this is not meant to be a complete teaching resource on convolution integrals. There are many excellent resources out there already! It’s just another take on them with some, hopefully interesting, diagrams.
During the Christmas holidays I decided that I’ve had enough of the old editor UI and needed something more functional. I didn’t like the Property Panel taking up so much screen space or the fact that it kept changing size as the number of properties changed. The Object List was also quite bulky and I was finding that most of the time I wasn’t actually using it.
You can have a look at the new editor here!
New UI
So, out with the old, in with the new! I’ve taken the slightly unusual approach of having a horizontal Property Panel. Most scene objects have few properties and they’re easy to fit on a single row. I also made the property widgets pop out on mouse hover. Again, slightly unorthodox, but most of the workflow is directly on the canvas. The value of the property is always displayed but there is no need to take screen real estate on a slider widget until the user needs to edit the property.
I was having a conversation with a friend at work last week and I needed to refer to some my old notes. I generally keep an A4 pad to scribble notes, make calculations and draw diagrams for whatever I’m working on. It occurred to me that some of my more recent diagrams, which I’ve done using the editor are ‘missing’ from my notes. My notebook will contain some related calculations, or even a rough sketch of the diagram, but not the proper version. I have printed off a few of them, and kept them on a separate folder, but it’s not the same.
Growing up as the son of a Civil Engineer, I was fortunate to have access to a proper HP pen plotter. That thing was AMAZING!
Last week was British Science Week and like every year my wife and I both volunteer to run an activity at the local Primary school. The theme this year was ‘Exploration & Discovery’ and I thought it would be fun to introduce Year 4 children (ages 8-9) to the basic principles of GPS. The focus was on trilateration, i.e. draw three circles, see where they intersect.
The activity itself was quite simple: “A few explorers have found themselves lost somewhere around the UK. Their GPS devices are malfunctioning and do not report their exact position. They only show their distance from a few satellites. Can you use trilateration to help locate them?”.
Preparing the material for the activity seemed quite simple at first, just print off a map, mark the location of the satellites, pick the location of the explorers and measure some distances. In practice though, there were some complications.
I got tired of looking at the old ‘programmer art’ UI in the Editor, so I spent a bit of time putting something a bit nicer together. I had a look at a couple of ready make JS libraries to use, but in the end I decided to build up the little UI library I was using already. There are lots of good libraries out there, but they’re aimed at proper UI/UX people, rather than C++ programmers hacking some JS together (like I am).
There are still some improvements to come. Now that the UI is looking reasonable and has a few usage tips, I’m going to focus on making some usability changes on the drawing itself. There is a lot of functionality (typically accessed via keyboard modifiers) that isn’t very obvious. The overlay rendering (snaps, visual hints, etc) aren’t very nice either (again, programmer art!). Some of these I will address by having nicer, more intuitive graphics, and others by providing example and tutorial scenes.
You can now edit a local copy of any diagram in any of the posts! There is an option available via the right click context menu. It works by saving a copy of the diagram to Local Storage and then opening it in the Editor!
Rendering engines often use cubemaps to store some form of lighting. There are a myriad of techniques that use them ranging from static to dynamic, direct and indirect, diffuse and specular lighting and so on. In this post we’ll try to illustrate some of the common steps in capturing, filtering and using cubemaps to achieve some form of lighting.
A Signed Distance Field is a mathematical construct where the distance to a closed surface is computed along a set of positions, with the sign of the distance used to indicate whether the position is inside or outside the surface. The positions are typically chosen to be on a regular grid and they work well in both 2D and 3D. They were made popular in computer graphics by this SIGGRAPH 2007 paper by Valve. If you haven’t already read it, it’s definitely worth a read!
In this post we’ll investigate using a simple 2D SDF to approximate a shape. It’s by no means the only use of SDF, but it’s one that’s easy to visualize and has practical use in computer graphics.