Mercurial
diff mrjunejune/src/blog/optimizing-grass-rendering/index.md @ 241:9c2eec61a152
[assets] Generate site images as WebP with Bazel
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Mon, 03 Aug 2026 11:26:30 -0700 |
| parents | 295ac2e5ec00 |
| children |
line wrap: on
line diff
--- a/mrjunejune/src/blog/optimizing-grass-rendering/index.md Mon Aug 03 10:48:59 2026 -0700 +++ b/mrjunejune/src/blog/optimizing-grass-rendering/index.md Mon Aug 03 11:26:30 2026 -0700 @@ -42,7 +42,7 @@ This is computationally the most efficient as there is no constraints on where it can be placed which mean it will often lead to clumping together. -<div class="center"> <img src="/public/white-noise-grass.png" /> </div> +<div class="center"> <img src="/public/white-noise-grass.webp" /> </div> Above image is okay, but lacks realism. We can do better. @@ -84,7 +84,7 @@ As you can see from below image, this approach improves visual quality... -<div class="center"> <img src="/public/blue-noise-random.png" /> </div> +<div class="center"> <img src="/public/blue-noise-random.webp" /> </div> ...but at the cost of computational complexity. As the number of points increases, available space becomes limited, requiring more attempts to place a point. This can take several seconds, which isn’t ideal. @@ -156,7 +156,7 @@ ** It only took 2 seconds or so. It slows down at the end since it probably needed to look for one or two points using random number ** -<div class="center"> <img src="/public/blue-noises-optimal.png" /> </div> +<div class="center"> <img src="/public/blue-noises-optimal.webp" /> </div> ### Conclusion