Blurs are the basic building block for many video game post-processing effects and essential for sleek and modern GUIs. Video game Depth of Field and Bloom or frosted panels in modern user interfaces - used subtly or obviously - they’re everywhere.

source: L

In this interactive article, we will explore the physical phenomena that create light and the fundamental laws governing its interaction with matter. We will learn how our human eyes capture light and how our brains interpret it as visual information. We will then model approximations of these physical interactions and learn how to create physically realistic renderings of various materials.

source: HN

A breakdown of how to build a custom Three.js shader that recreates the iridescent, sparkling look of foil stickers using vertex deformation, angle-based color shifts, and procedural flakes.

source: HN

The book is sold out, but there are some fun widgets to play with as well.

I spent the past few months building my personal website from the ground up, finally taking the time to incorporate some 3D work to showcase my shader and WebGL skills. Throughout this work, I got to truly understand the crucial role that post-processing plays in making a scene actually look good, which brought some resolutions to long-term frustrations I had with my past React Three Fiber and shader projects where my vision wouldn’t materialize regardless of the amount of work and care I was putting into them.

Taking the time to build, combine, and experiment with custom post-processing effects gave me an additional creative outlet, and among the many types I got to iterate on, I always had a particular affection for the several “retro” effects I came up with. With subtle details such as dithering, color quantization, or pixelization/CRT RGB cells, they bring a pleasant contrast between the modern web landscape and a long-gone era of technology we 90s/early 2000s kids are sometime longing for.

source: HN

To render any geometric figure to a GPU (with OpenGL / Direct3D / Vulkan / ...), they must first be triangulated, i.e. decomposed as a series of triangles. Some figures are trivial to transform into triangles: for instance, a segment with thickness is represented by a rectangle, which can be rendered with two triangles. But a segment strip with thickness (aka. polyline) is not trivial.

Ultimately, this exploration has been a rabbit hole, also partly due to some digressions along the path — let’s prototype with a bare implementation of GeoGebra in vanilla JavaScript — let’s do a WebGL + WASM demo to verify the algorithm works correctly ... 😅 At least, it gives some fancy interactive visuals for this blog post. 😁

source: HN

What happens if you take motion blur past its logical extreme? Here are some fun observations and ideas I encountered while trying to answer this question, with an attempt to apply the results in a procedural animation.

source: L

In 1969, Harry amazed everybody with a little electronic gadget he’d built which, using the primitive digital integrated circuits of the time, generated random music, played it through a speaker, and flashed lights on its front panel. It was precisely what people expected computers to do, based upon portrayals in the movies and on television, and yet it could be held in your hand and was, internally, very simple. He explained how it worked, and I immediately knew I had to have one. Digital electronics was in a great state of flux at the time, with each manufacturer launching their own line of integrated circuits, most incompatible with one another, so there was no point in slavishly reproducing Harry’s design. Starting from the concept, I designed my own gadget from scratch, using Signetics Utilogic diode-transistor small scale integration integrated circuits which were popular at the time but shortly thereafter made obsolete by 7400 series transistor-transistor logic (TTL). The architecture was identical to Harry’s device, but I opted for more with-it and less power-hungry light-emitting diodes (LEDs) for the display instead of the incandescent bulbs he used. I built the electronics assembly on a sheet of perforated board using wire-wrap fabrication (some people look down their noses at wire-wrap today, but it was good enough for the Apollo Guidance Computer and almost every mainframe backplane of the 1960s, and my wire-wrapped electronics works perfectly fifty years later.)

Little did I imagine, when designing and building the Mind Grenade hardware in 1969, that fifty years later I’d be emulating it on a computer which ran more than a thousand times faster than the one I used in my day job at the time and, furthermore, was sitting on my own desk. But here we are. Thanks to HTML5 and JavaScript, it is now possible to emulate the hardware Mind Grenade entirely in software that runs within any modern Web browser. Below is an abstracted version of the Mind Grenade front panel. Press the power button at the bottom to get things going. The slider at the left controls the pitch and the slider at the right sets the rate at which the notes play. The check boxes below the lights select any of the 16 possible tunes that can be played.

source: HN

This page performs a live, annotated https: request for its own source. It’s inspired by The Illustrated TLS 1.3 Connection and Julia Evans’ toy TLS 1.3.

source: L

In the world of modern portable devices, it may be hard to believe that merely a few decades ago the most convenient way to keep track of time was a mechanical watch. Unlike their quartz and smart siblings, mechanical watches can run without using any batteries or other electronic components.

Over the course of this article I’ll explain the workings of the mechanism seen in the demonstration below. You can drag the device around to change your viewing angle, and you can use the slider to peek at what’s going on inside:

An interactive experience!

source: DF

If you’ve done any 3D programming, you’ve likely encountered the zoo of techniques and representations used when working with 3D rotations. Some of them are better than others, depending on the situation.

source: HN

Can you beat 1024 of javascript at chess?

source: HN

This article is a comprehensive guide to the Roland Juno’s digitally-controlled analog oscillators (DCOs). I fell in love with the Juno early in my synthesizer journey and I’ve spent the last year or so doing research on its design so that I could create my own Juno-inspired DCO, Winterbloom’s Castor & Pollux.

source: trivium

Cameras and the lenses inside them may seem a little mystifying. In this blog post I’d like to explain not only how they work, but also how adjusting a few tunable parameters can produce fairly different results:

This is amazing work.

source: HN

I used this code to help me make a video to explain how SHA-256 works.

Also: https://www.youtube.com/watch?v=f9EbD6iY9zI

source: HN

Let’s get in the ring and show what AVX/AVX2 intrinsics can really do for a non-trivial problem, and even discuss potential improvements that future CoreCLR versions could bring to the table.

Everyone needs to sort arrays, once in a while, and many algorithms we take for granted rely on doing so. We think of it as a solved problem and that nothing can be further done about it in 2020, except for waiting for newer, marginally faster machines to pop-up. However, that is not the case, and while I’m not the first to have thoughts about it; or the best at implementing it, if you join me in this rather long journey, we’ll end up with a replacement function for Array.Sort, written in pure C# that outperforms CoreCLR’s C++2 code by a factor north of 10x on most modern Intel CPUs, and north of 11x on my laptop. Sounds interesting? If so, down the rabbit hole we go…

Very well done.

In this blog post I’d like to look at these simple machines up close. I’ll explain how gears affect the properties of rotational motion and how the shape of their teeth is way more sophisticated than it may initially seem.

Movement is important in this article so most of the visualizations are animated – you can play and pause them by tapping on the button in their bottom left corner. By default the animations are enabled, but if you find them distracting, or you want to save power, you can globally pause all animations, just make sure to unpause them as needed.

This is very neat.

source: HN

The Pond and Plaza Hotel in 1933: https://www.oldnyc.org/#718363f-a