Mercurial

comparison mrjunejune/src/blog/optimizing-grass-rendering/index.md @ 113:7a4e942814bc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Fixed static assets
author June Park <parkjune1995@gmail.com>
date Sun, 04 Jan 2026 14:42:54 -0800
parents 65e5a5b89a4e
children 295ac2e5ec00
comparison
equal deleted inserted replaced
112:d6d578b49a19 113:7a4e942814bc
35 } 35 }
36 ``` 36 ```
37 37
38 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. 38 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.
39 39
40 <div class="center"> <img src="/white_noise_grass.png" /> </div> 40 <div class="center"> <img src="/public/white-noise-grass.png" /> </div>
41 41
42 Above image is okay, but lacks realism. We can do better. 42 Above image is okay, but lacks realism. We can do better.
43 43
44 44
45 #### Blue Noise 45 #### Blue Noise
77 } 77 }
78 ``` 78 ```
79 79
80 As you can see from below image, this approach improves visual quality... 80 As you can see from below image, this approach improves visual quality...
81 81
82 <div class="center"> <img src="/blue_noise_random.png" /> </div> 82 <div class="center"> <img src="/public/blue-noise-random.png" /> </div>
83 83
84 ...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. 84 ...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.
85 85
86 <video width="100%" controls> 86 <video width="100%" controls>
87 <source src="/slow_blue.mp4" type="video/mp4" /> 87 <source src="/public/slow-blue.mp4" type="video/mp4" />
88 </video> 88 </video>
89 89
90 ** It takes around 8 seconds for 800 points in 1000 x 800 with 30 radius which means it should be able to add 100 more points in theory ** 90 ** It takes around 8 seconds for 800 points in 1000 x 800 with 30 radius which means it should be able to add 100 more points in theory **
91 91
92 92
143 } 143 }
144 } 144 }
145 ``` 145 ```
146 146
147 <video width="100%" controls> 147 <video width="100%" controls>
148 <source src="/fast_blue.mp4" type="video/mp4" /> 148 <source src="/public/fast-blue.mp4" type="video/mp4" />
149 </video> 149 </video>
150 150
151 ** 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 ** 151 ** 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 **
152 152
153 153
154 <div class="center"> <img src="/blue_noises_optimal.png" /> </div> 154 <div class="center"> <img src="/public/blue-noises-optimal.png" /> </div>
155 155
156 156
157 ### Conclusion 157 ### Conclusion
158 158
159 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. 159 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.