Best of Codrops — February 2025

1. 1
   Article

   Codrops·1y

   WebGPU Fluid Simulations: High Performance & Real-Time Rendering

   Matsuoka's WebGPU-powered fluid simulations have demonstrated outstanding performance and visual appeal, showcasing the capabilities of WebGPU. He has developed two simulations, WebGPU-Ocean and WaterBall, focusing on high performance and realistic visualization. He used the MLS-MPM (Moving Least Squares Material Point Method) for simulation and Screen-Space Fluid Rendering for visualization, achieving real-time performance even on integrated GPUs. These techniques promise significant improvements in browser-based physics simulations, potentially matching the quality of simulations done with advanced engines in the future.

   193

   6
2. 2
   Article

   Codrops·1y

   Nim is a free and open-source personal website template built with Next.js 15, React 19 and Motion-Primitives.

   Nim is a free, open-source personal website template built with Next.js 15, React 19, Tailwind CSS v4, and Motion-Primitives. It offers customizable, pre-built motion components to simplify adding animations to websites. Designed for developers, designers, and founders, Nim is easy to customize, featuring a blog powered by MDX and various animated elements.

   111

   4
3. 3
   Article

   Codrops·1y

   Implementing a Dissolve Effect with Shaders and Particles in Three.js

   Learn how to create a dynamic dissolve effect using Three.js shaders and particles. This tutorial covers setting up the environment and lighting, crafting the dissolve effect with Perlin noise, creating a particle system, and applying the Unreal Bloom effect to make the edges and particles glow. Each step is detailed with code snippets and linked to specific commits for easy reference.

   31

   2
4. 4
   Article

   Codrops·1y

   How to Make The Fluffiest Grass With Three.js

   Learn how to create the fluffiest grass on the web using Three.js with techniques including creating terrain, using tiled grass textures, alpha cards, and individual grass blades. Discover the instancing, chunking, and level of detail (LOD) methods to optimize performance, and enhance visual appeal with techniques like fake ambient occlusion, color variation, animation, and simplified lighting and shadows.

   10