Casey Primozic’s Notes

Misc. notes, code, and other content I want to post publicly that don’t warrant a full blog post

By Casey Primozic

Subscribe to RSS

Handling Gamma Correction for Three.JS pmndrs postprocessing Effects

I recently received a bug report on a library I built - three-good-godrays - which implements screen-space raymarched godrays for Three.JS as a pass for the pmndrs postprocessing library. One of the problems pointed out was that colors seemed washed out/desaturated when my pass was used, even when the pass wasn’t rendering any godrays. Here’s how things look by default without the effect (and are supposed to look with it on):
Read more →

Changing Linux Select to Paste Menu fcitx Keyboard Shortcut

For a long time - at least a couple of years - I’ve been cursed with an issue on my KDE Plasma Linux desktop where my PgUp key doesn’t work. Instead of scrolling up in my terminal or editor, it pops open a menu with the title “Select to paste” and a listing of my most recent clipboard entries: I tried briefly a couple of times to fix this and get my page up to work again but to no avail.
Read more →

PIXI.JS Optimizations

I was recently working on speeding up a MIDI editor UI written in PIXI.JS which is part of my web synth project. The UI is fairly simple itself, but it needs to be efficient in order to render potentially thousands+ notes on the screen at once. Here’s what the MIDI editor UI looks like: As I mentioned, I built this whole UI with Pixi.JS (except for the toolbar which is vanilla HTML/CSS/React).
Read more →

Fixing Svelte Seo Cannot find module './transformers/"application/ld+json">${'

The Problem After upgrading svelte-seo to the latest version (1.5.4 at the time of writing this), I encountered this error when trying to run my SvelteKit dev server: Error while preprocessing /home/casey/dream/node_modules/svelte-seo/index.svelte - Cannot find module './transformers/"application/ld+json">${' Require stack: - /home/casey/dream/node_modules/svelte-preprocess/dist/autoProcess.js - /home/casey/dream/node_modules/svelte-preprocess/dist/index.js Error while preprocessing /home/casey/dream/node_modules/svelte-seo/index.svelte - Cannot find module './transformers/"application/ld+json">${' Require stack: - /home/casey/dream/node_modules/svelte-preprocess/dist/autoProcess.js - /home/casey/dream/node_modules/svelte-preprocess/dist/index.js The Fix The issue turned out to be that my svelte version was too old.
Read more →

Building a Realistic Raindrop-Covered Window Pane Material in Three.JS

Casey Primozic
Screenshot of a rain-covered window rendered with Three.JS. There appears to be many water drops covering the back surface which refract the light from the background. The background is blurry and gray with indistinct high-rise buildings visible in the distance and a gray concrete platform just outside the window. The corner of a table and a table leg are visible in the bottom left corner.
Recently, I’ve been working on a rainy scene in Three.JS. One of the most important parts of this scene is a greenhouse with big glass windows. I decided to take a stab at making some realistic raindrop-covered window panes for them using Three.JS’s built-in transmission shader. The result turned out pretty well if I do say so myself, so I thought I’d write up my process for building it from start to finish.
Read more →