I am creating recursive tree maps, where a tree map is a rectangular representation of things in a container. For example a file system directory that has 2 sub directories and one file, would be represented at the top level by a square divided into three sections. But each sub directory could be represented by another tree map of the contents of that directory. So recursive.
Tiled map systems, for example leaflet.js provide a way to zoom in to a deeper level of detail like the way google maps lets you zoom in out. I am trying to duplicate that experience with the recursive tree map, using react three fiber and drei.
I am learning a bit about shaders and adapted this example:
https://codesandbox.io/p/sandbox/blissful-driscoll-x37p4kk6p4
But this works on textures and I am not using images so donât have textures. I do not know if there is a way to take my rectangle and fade the whole collection of MeshStandardMaterials into another set. webglrenderer.copyTextureTOTexture?
Also it needs to be dynamic so the route of first generating image (.png) file like map tiles appears not to be an option.
I could try to understand the drei mesh reflector material and more or less duplicate that. I have not delved deeply, but it appears to work by setting up a virtual camera and then projecting that image. Certainly that would work but it is a daunting task for me at this point. (Maybe a good one though).
The end effect I want is that a user can click on an area and the target area gets larger AND instead of seeing a filler color, the sub tree map is rendered. With a nice fade. The image gallery example https://codesandbox.io/p/sandbox/lx2h8 is a good starting point. I could just draw top level tree map, then draw a more detailed version when it is selected I would be close! Thank!!