A library for p5.strands for creating environment lights using angular signed distance functions.

p5.js includes the ability to use a sphere map image as lighting. Unfortunately, it's hard to create images for this, and setup is too expensive to use for animations. By pairing SDFs with a characteristic radius per shape primitive, approximate roughness levels can be computed quickly on the fly, letting you write animated environment light shaders.

Read more View Source on GitHub

Stretching a font generally doesn't look very good. Instead, we can find the most stretchable areas automatically and preserve the details in the rest!

Slices of a font stretch proportional to how well the tangents at that slice align with the stretch direction. This technique works for standard outline fonts, so you can try it on just about any font!

Read more Try it!

I worked out some math to be able to apply arbitrary warps to 3D meshes in a shader and still get correct lighting and reflections.

Domain warping is a technique commonly used in creative coding to distort graphics and add visual interest to a work. The approach has the potential to be used in 3D art as mesh vertices can be efficiently warped using a vertex shader in a WebGL pipeline. However, 3D models packaged for the web typically come with baked-in normal vectors, and these need to be updated when vertex positions change for lighting calculations to work. This is typically done via finite differences, which requires parameter tuning to achieve optimal visual fidelity. We present a method for 3D domain warping that works with automatic differentiation, allowing exact normals to be used without any tuning while still benefiting from hardware acceleration.

Read more Read the Paper View on arxiv.org View Source on GitHub