three-billboard-reflection
A performant three.js library for implementing plane reflections on any mesh with correct orientation.
What is three-billboard-reflection?
Billboard Reflection is a three.js library that implements performant reflections for simple planes (billboards) on any mesh in a 3D scene. It solves the problem of adding realistic reflections without significant performance overhead, using a ray/triangle intersection algorithm to ensure correct orientation. The library is particularly useful for scenarios where billboards need to reflect dynamically in interactive applications.
WebGL and three.js developers building interactive 3D applications, games, or visualizations that require efficient plane reflections. It's also suitable for graphics programmers looking for a lightweight reflection solution without heavy engine dependencies.
Developers choose Billboard Reflection for its performance-oriented approach, mesh-agnostic orientation support, and ease of integration with existing three.js materials. Unlike generic reflection techniques, it focuses specifically on plane reflections, offering a balance between visual quality and computational efficiency.
Overview
Performant plane reflections in three.js r139
Use Cases
Best For
- Adding reflections to billboards in three.js scenes
- Implementing performant plane reflections in WebGL games
- Enhancing visual realism in interactive 3D applications
- Creating reflections for batched mesh geometries
- Optimizing reflection rendering for real-time graphics
- Integrating roughness-based blurring for material reflections
Not Ideal For
- Applications requiring realistic reflections on curved or complex surfaces, as it's optimized for simple planes only
- Scenes where accurate occlusion handling is critical, since reflections can appear behind other meshes without checks
- Projects using video textures for billboards, as roughness-based blurring fails due to lack of mipmaps
- Teams wanting a plug-and-play reflection solution without shader modifications or custom integration work
Pros & Cons
Pros
Uses a ray/triangle intersection algorithm for efficient reflection calculations, reducing overhead in real-time 3D scenes, as noted in the README's focus on performance.
Correctly reflects planes on any mesh regardless of orientation, ensuring accurate reflections in dynamic scenes, which is a core benefit highlighted in the description.
Supports configurable color, opacity, roughness, and falloff, allowing fine-tuned integration with existing three.js materials via options like rayFalloff and envMapIntensity.
Enables reflections for batched meshes using just a texture and transformation matrix, useful for optimization in complex scenes, as shown in the createFromTextureAndMatrix method.
Cons
Lacks proper blurring for rough surfaces; reflections only fade out or use low-res mipmaps, which can cause artifacts and doesn't work with video textures, as admitted in the Limitations section.
Reflections can be visible behind other meshes without occlusion checks, requiring manual workarounds like adding reflections to occluding objects or adjusting falloff values.
Requires modifying shaders via onBeforeCompile, which adds setup complexity and may conflict with other custom shader code or material overrides in three.js projects.
Frequently Asked Questions
Related Projects
VueThis is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
BootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
electron:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS
d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.