Mercurial

comparison mrjunejune/src/blog/optimizing-grass-rendering/index.md @ 241:9c2eec61a152

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[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
comparison
equal deleted inserted replaced
240:c345083cd8a7 241:9c2eec61a152
40 } 40 }
41 ``` 41 ```
42 42
43 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. 43 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.
44 44
45 <div class="center"> <img src="/public/white-noise-grass.png" /> </div> 45 <div class="center"> <img src="/public/white-noise-grass.webp" /> </div>
46 46
47 Above image is okay, but lacks realism. We can do better. 47 Above image is okay, but lacks realism. We can do better.
48 48
49 49
50 #### Blue Noise 50 #### Blue Noise
82 } 82 }
83 ``` 83 ```
84 84
85 As you can see from below image, this approach improves visual quality... 85 As you can see from below image, this approach improves visual quality...
86 86
87 <div class="center"> <img src="/public/blue-noise-random.png" /> </div> 87 <div class="center"> <img src="/public/blue-noise-random.webp" /> </div>
88 88
89 ...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. 89 ...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.
90 90
91 <video width="100%" controls> 91 <video width="100%" controls>
92 <source src="/public/slow-blue.mp4" type="video/mp4" /> 92 <source src="/public/slow-blue.mp4" type="video/mp4" />
154 </video> 154 </video>
155 155
156 ** 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 ** 156 ** 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 **
157 157
158 158
159 <div class="center"> <img src="/public/blue-noises-optimal.png" /> </div> 159 <div class="center"> <img src="/public/blue-noises-optimal.webp" /> </div>
160 160
161 161
162 ### Conclusion 162 ### Conclusion
163 163
164 If you're working on object placement for games, simulations, or any graphics project, understanding the balance between randomness and natural constraints is crucial. Blue noise offers a compelling way to achieve this balance, and with optimizations, it becomes practical for real-time rendering. 164 If you're working on object placement for games, simulations, or any graphics project, understanding the balance between randomness and natural constraints is crucial. Blue noise offers a compelling way to achieve this balance, and with optimizations, it becomes practical for real-time rendering.